[UI5 常用控件] 04.ExpandableText,FormattedText,HTML,Text Area,RichTextEditor,Currency

---

前言

本章节记录常用控件ExpandableText,FormattedText,HTML,Text Area,RichTextEditor,Currency
其路径分别是：

• sap.m.ExpandableText
• sap.m.FormattedText
• sap.ui.core.HTML
• sap.m.TextArea
• sap.ui.richtexteditor.RichTextEditor
• sap.ui.unified.Currency

1. ExpandableText

• ExpandableText可以显示长文本限制其输出长度，带有Show More并点击的时候以2种方式显示全文

InPlace : 在当前控件下全部显示
Popover：以弹窗形式显示

• View

	<Panel
	   headerText="ExpandableText"
	    class="sapUiLargeMarginTopBottom"
	>
	    <List width="300px">
	        <CustomListItem>
	            <VBox>
	                <Text
	                    text="InPlace: "
	                    class="myBoldText"
	                />
	                <ExpandableText
	                    text="{/expTextModel}"
	                    overflowMode="InPlace"
	                    class="sapUiTinyMarginTop"
	                />
	            VBox>
	            <VBox class="sapUiMediumMarginTop">
	                <Text
	                    text="Popover: "
	                    class="myBoldText"
	                />
	                <ExpandableText
	                    text="{/expTextModel}"
	                    overflowMode="Popover"
	                    class="sapUiTinyMarginTop"
	                />
	            VBox>
	        CustomListItem>
	    List>
	Panel>

2. FormattedText

• 显示带有html格式的文本

• View

	<Panel
	    headerText="FormattedText"
	    class="sapUiLargeMarginBottom"
	>
	    <FormattedText htmlText="{/formatTextModel}" />
	Panel>

• Controller

	var formatText = "
subheader
" +
	                    "
link: link to sap.com - links open in a new window.
" +
	                    "
paragraph: strong and emphasized.
"

3. HTML

• 和FormattedText类似，可以显示带有HTML标签的文本,并且可以识别js和css内容（FormattedText无法识别js和css）

• View

	<Panel
	    headerText="HTML"
	    class="sapUiLargeMarginBottom"
	>
	    <VBox>
	        <core:HTML content='{/htmlTextModel}' />
	    VBox>
	Panel>

• Controller

	var htmlText = "
This is a simple HTML content.
Click me
"

4. Text Area

可以输入长文本

4.1 基本

• View

	<VBox class="sapUiLargeMarginBottom">
	   <Title text="基本" />
	    <HBox>
	        <TextArea
	            id="textarea01"
	            value=""
	            rows="3"
	        />
	        <Button
	            text="显示TextArea"
	            press="onClickShowTextArea"
	        />
	    HBox>
	VBox>

• 获取内容

	onClickShowTextArea: function () {
	    sap.m.MessageToast.show("Textarea value: " + this.byId("textarea01").getValue());
	
	},

4.2 MaxLength和提示

maxLength: 显示最大输入字符
showExceededText：

• true：显示超出输入的部分
• false：限制超出输入

• View

	<VBox class="sapUiLargeMarginBottom">
	    <Title text="MaxLength和提示: showExceededText" />
	    <HBox>
	        <TextArea
	            value=""
	            rows="3"
	            maxLength="10"
	            showExceededText="true"
	        />
	
	        <TextArea
	            value=""
	            rows="3"
	            maxLength="10"
	            showExceededText="false"
	            class="sapUiLargeMarginBegin"
	        />
	    HBox>
	VBox>

4.3 valueState

有4中状态可选： Warning,Error,Success,Information

4.4 Value Update

有两个属性可供选择

• valueLiveUpdate：当值为true时，实时更新绑定数据
• liveChange：每次对文本框的变更都会触发对应的事件，可以进行值的2次利用

• View

	<VBox class="sapUiLargeMarginBottom">
	   <Title text="Value Update" />
	
	    <TextArea
	        value="{InputValue>/name}"
	        valueLiveUpdate="false"
	        liveChange="handleLiveChange"
	    />
	
	    <HBox>
	        <Text text="input.getValue():" />
	        <Text
	            id="getValue"
	            text=" "
	        />
	    HBox>
	    <HBox>
	        <Text text="model.getProperty():" />
	        <Text
	            id="getProperty"
	            text="{InputValue>/name}"
	        />
	    HBox>
	VBox>

• Controller

	handleLiveChange: function (oEvent) {
	   var sValue = oEvent.getParameter("value");
	    this.byId("getValue").setText(sValue);
	},

4.5 Growing

在文本框显示滚动条

• View

	<VBox class="sapUiLargeMarginBottom">
	    <Title text="Growing" />
	    <HBox>
	        <TextArea
	            growing="true"
	            growingMaxLines="3"
	            value="1"
	            width="200px"
	        />
	    HBox>
	VBox>

5. RichText Editor

提供富文本编辑器

• View

	<Panel
	    headerText="RichText Editor"
	    class="sapUiLargeMarginBottom"
	 >
	    <l:VerticalLayout
	        id="idVerticalLayout"
	        class="sapUiContentPadding"
	        width="40%"
	    >
	        <Button
	            text="保存"
	            width="200px"
	            type="Emphasized"
	            press="onSaveRichText"
	        />
	    </l:VerticalLayout>
	</Panel>

• Controller

	onInit: function () {
		this.initRichTextEditor()
	}

	initRichTextEditor: function () {
		var that = this
		sap.ui.require(["sap/ui/richtexteditor/RichTextEditor", "sap/ui/richtexteditor/library"],
		    function (RTE, library) {
		        var EditorType = library.EditorType;
		        that.oRichTextEditor = new RTE("myRTE", {
		            editorType: EditorType.TinyMCE6,
		            width: "100%",
		            height: "400px",
		            customToolbar: true,
		            showGroupFont: true,
		            showGroupLink: true,
		            showGroupInsert: true,
		            value: '',
		            ready: function () {
		                this.addButtonGroup("styles").addButtonGroup("table");
		                //控制工具栏
		                this.removeButtonGroup("font-style");
		                this.addButtonGroup({
		                    name: "font-style",
		                    visible: true,
		                    priority: 10,
		                    customToolbarPriority: 10,
		                    buttons: [
		                        "bold", "italic"
		                    ]
		                });
		            }
		        });
		
		        that.getView().byId("idVerticalLayout").addContent(that.oRichTextEditor);
		    });
		},
	onSaveRichText: function () {
	    var oRichTextEditor = this.oRichTextEditor; // 使用initRichTextEditor函数中指定的ID
	    var sValue = oRichTextEditor.getValue();
	    sap.m.MessageToast.show(sValue);
}

6. Currency

显示金额时使用，但也可以使用Text或者ObjectNumber替代
Currency会根据货币单位自动判断有无小数点。例如KRW,JPY等金额不带小数点
也可以使用maxPrecision指定小数点位数

	<Panel
	   headerText="Currency"
	    class="sapUiLargeMarginBottom"
	 >
	    <HBox>
	        <List
	            id="listOneId"
	            headerText="自动判断小数点"
	            items="{path: '/variousNumberDataModel'}"
	            width="200px"
	            class="sapUiLargeMarginEnd"
	        >
	            <CustomListItem>
	                <u:Currency
	                    value="{price}"
	                    currency="{currency}"
	                    useSymbol="false"
	                />
	            CustomListItem>
	        List>
	
	        <List
	            id="listSixId"
	            headerText="指定小数点位数"
	            items="{path: '/variousNumberDataModel'}"
	            width="200px"
	            class="sapUiLargeMarginEnd"
	        >
	            <CustomListItem>
	                <u:Currency
	                    stringValue="{price}"
	                    currency="{currency}"
	                    useSymbol="false"
	                    maxPrecision="3"
	                />
	            CustomListItem>
	        List>
	
	        <List
	            id="listFourId"
	            headerText="显示超大金额"
	            items="{path: '/bigNumberDataModel'}"
	            width="300px"
	        >
	            <CustomListItem>
	                <u:Currency
	                    stringValue="{price}"
	                    currency="{currency}"
	                    useSymbol="false"
	                />
	            CustomListItem>
	        List>
	    HBox>
	Panel>