Fiori学习专题四十：单一控件

现在我们就用上节课创建的标准模板学习一些简单控件的使用，学习之前我们可以先看下跟随模板创建的程序架构，和我们之前跟着walkthrough教程搭建出来的是一样的。

现在我们对Fiori常用的一些单一控件做一些了解。包括：Button，Label，Input，Text，CheckBox，RadioButton，Switch，ComboBox，Select；
在使用控件之前，1.我们可以通过官方API来查看控件的属性，方法，事件等；2.通过API样例去查看样例代码；
以Button为例，我们可以看到在Event标签下有一个press属性，这样我们在标签里就可以使用这个属性。有的时候我们会遇到找不到的情况，就可以从这个控件的父类里面去找，也就是Extends对应的类；
例如Input控件的placeholder属性，我们在input控件的Api属性页签是找不到对应的属性的，这个时候我们就可以查看其父类



这里我们就可以看到对应的属性。其余的控件都可以按照这样的方法去参考api，后面就不再赘述；

Input控件：
placeholder：在没有输入任何文字时默认显示
showSuggestion：自动带出，根据我们输入的文字自动匹配
suggestionItems：绑定自动带出时的搜索列表
showValueHelp：搜索帮助
valueHelpRequest：搜索帮助事件

<Inputid="productInput"placeholder="Enter product"showSuggestion="true"showValueHelp="true"valueHelpRequest=".onValueHelpRequest"suggestionItems="{products>/}"><suggestionItems><core:Itemid="suggestionItem"text="{products>ProductName}"/></suggestionItems></Input>

onValueHelpRequest方法，这里就可以通过oEvent参数来调用对应的方法，这里我们使用调用getSource方法，返回一个sap.ui.base.EventProvider类，这里返回的就是Input控件，再通过调用控件的getValue方法返回input输入的值；

onValueHelpRequest: function (oEvent) {var sInputValue = oEvent.getSource().getValue(),oView = this.getView();if (!this._pValueHelpDialog) {this._pValueHelpDialog = Fragment.load({id: oView.getId(),name: "tutorial20250506.fragment.ValueHelpDialog",controller: this}).then(function (oDialog) {oView.addDependent(oDialog);return oDialog;});}this._pValueHelpDialog.then(function (oDialog) {// Create a filter for the bindingoDialog.getBinding("items").filter([new Filter("ProductName", FilterOperator.Contains, sInputValue)]);// Open ValueHelpDialog filtered by the input's valueoDialog.open(sInputValue);});}

Button控件：
id：用来区分控件，建议每个控件都加上，在vscode里面如果我们安装了UI5插件，没有id会报错。
text：文本描述
press：按下事件，就是我们上面看到的
icon：图标，这个属性在API里面也看得到

              <Buttonid="button_hello"text="{i18n>hellotext}"press=".onSayHello"icon="sap-icon://world"/>

既然有了按下的事件，那么就需要有响应，对应的代码我们写在controller里面

onSayHello: function () {var input01 = this.byId("productInput").getValue();MessageToast.show("你输入的是：" + input01);},

CheckBox控件：

 <CheckBoxid="CheckBoxA"selected="true"text="option A"select="onSelectCheckBoxA"/><CheckBoxid="CheckBoxB"selected="false"text="option B"select="onSelectCheckBoxB"/>

onSelectCheckBoxA: function (oEvent) {MessageToast.show("你选择的是：" + oEvent.getParameters().selected);}

RadioButton控件：

<RadioButtonGroupid="rbg2"columns="1"selectedIndex="2"class="sapUiMediumMarginBottom"select="onSelectRadio"><RadioButtonid="RB2-1"text="Option 1"/><RadioButtonid="RB2-2"text="Option 2"editable="false"/><RadioButtonid="RB2-3"text="Option 3"/></RadioButtonGroup>

onSelectRadio: function (oEvent) {var radioButtongrp = this.byId("rbg2");var radioButton = radioButtongrp.getSelectedButton();MessageToast.show("你选择的是：" + radioButton.getText());}

Switch控件：

 <Switchid="switchId2"type="AcceptReject"state="true"customTextOn="Yes"customTextOff="No"change="onSwitchChange2"/>

  onSwitchChange1: function (oEvent) {if (oEvent.getParameters().state == true) {var message = '你打开了开关'} else {var message = '你关闭了开关'}MessageToast.show(message);}

ComboBox控件：下拉框控件，内容既可以指定，也可以通过绑定JsonModel来取值

<ComboBoxid="comboBox1"change="onChangeCombox"><items><core:Itemid="comboBoxitem1"text="Yes"key="true"/><core:Itemid="comboBoxitem2"text="No"key="false"/></items></ComboBox>

<ComboBoxid="comboBox2"items="{SuggestModel>/}"change="onChangeCombox"selectedKey="{SuggestModel>/}"><items><core:Itemid="comboBox2item"text="{SuggestModel>value}"key="{SuggestModel>key}"/></items></ComboBox>

Select控件：同下拉框控件

<Select id="select1"><items><core:Itemid="selectitem1"text="Yes"key="true"/><core:Itemid="selectitem2"text="No"key="false"/></items></Select>

<Selectid="select2"items="{suggestModel>/}"><items><core:Itemid="select2item"text="{suggestModel>value}"key="{suggestModel>key}"/></items></Select>

一些常见的单一控件就这些，具体使用什么我们可以视项目情况而定，总之，使用方法都可以通过官方文档查得到，也不用死记硬背，需要的话就去查一下。
贴一下完整代码：
Overview.view.xml，里面还有一些和布局相关的控件，VBox竖向布局，HBox横向布局

<mvc:ViewcontrollerName="democontrol.controller.Overview"xmlns:mvc="sap.ui.core.mvc"xmlns="sap.m"xmlns:core="sap.ui.core"displayBlock="true"
><Pageid="idpage"title="{i18n>homePageTitle}"><content><Panelid="panel01"headerText="{i18n>helloPanelTitle}"class="sapUiResponsiveMargin"width="auto"><VBox id="vBox"><Buttonid="button_hello"text="{i18n>hellotext}"press=".onSayHello"icon="sap-icon://world"/><Labelid="lableProduct"text="Product"labelFor="productInput"/><Inputid="productInput"placeholder="Enter product"showSuggestion="true"suggestionItems="{invoices>/Invoices}"showValueHelp="true"valueHelpRequest=".onValueHelpRequest"><suggestionItems><core:Itemid="suggestionItem"text="{invoices>ProductName}"/></suggestionItems></Input><Textid="tetx1"text="{firstModel>/text1}"/><CheckBoxid="CheckBoxA"selected="true"text="option A"select="onSelectCheckBoxA"/><CheckBoxid="CheckBoxB"selected="false"text="option B"select="onSelectCheckBoxB"/><Labelid="labelRadio"labelFor="rbg2"text="An example with 3 buttons and 1 columns"/><RadioButtonGroupid="rbg2"columns="1"selectedIndex="2"class="sapUiMediumMarginBottom"select="onSelectRadio"><RadioButtonid="RB2-1"text="Option 1"/><RadioButtonid="RB2-2"text="Option 2"editable="false"/><RadioButtonid="RB2-3"text="Option 3"/></RadioButtonGroup><Switchid="switchId1"state="true"customTextOn="Yes"customTextOff="No"change="onSwitchChange1"/><Switchid="switchId2"type="AcceptReject"state="true"customTextOn="Yes"customTextOff="No"change="onSwitchChange2"/><ComboBoxid="comboBox1"change="onChangeCombox"><items><core:Itemid="comboBoxitem1"text="Yes"key="true"/><core:Itemid="comboBoxitem2"text="No"key="false"/></items></ComboBox><ComboBoxid="comboBox2"items="{SuggestModel>/}"change="onChangeCombox"selectedKey="{SuggestModel>/}"><items><core:Itemid="comboBox2item"text="{SuggestModel>value}"key="{SuggestModel>key}"/></items></ComboBox><Select id="select1"><items><core:Itemid="selectitem1"text="Yes"key="true"/><core:Itemid="selectitem2"text="No"key="false"/></items></Select><Selectid="select2"items="{suggestModel>/}"><items><core:Itemid="select2item"text="{suggestModel>value}"key="{suggestModel>key}"/></items></Select></VBox></Panel></content></Page>
</mvc:View>

Overview.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller","sap/m/MessageToast","sap/ui/model/json/JSONModel","sap/ui/core/Fragment","sap/ui/model/Filter","sap/ui/model/FilterOperator"
],/*** @param {typeof sap.ui.core.mvc.Controller} Controller*/function (Controller, MessageToast, JSONModel, Fragment, Filter, FilterOperator) {"use strict";return Controller.extend("democontrol.controller.Overview", {onInit: function () {this.getView().setModel(new JSONModel({input: '444',text1: '1',text2: '2'}), 'firstModel');this.getView().setModel(new JSONModel({key:"1",value:"AAA"}), 'suggestModel');},onSayHello: function () {var input01 = this.byId("productInput").getValue();MessageToast.show("你输入的是：" + input01);},onValueHelpRequest: function (oEvent) {var inputcontrol_1 = oEvent.getSource();var inputcontrol_2 = this.byId("productInput");if(inputcontrol_1 === inputcontrol_2 ){console.log(true)}else{console.log(false)}var sInputValue = oEvent.getSource().getValue(), oView = this.getView();if (!this._pValueHelpDialog) {this._pValueHelpDialog = Fragment.load({id: oView.getId(),name: "democontrol.fragment.ValueHelpDialog",controller: this}).then(function (oDialog) {oView.addDependent(oDialog);return oDialog;});}this._pValueHelpDialog.then(function (oDialog) {// Create a filter for the binding//oDialog.getBinding("items").filter([new Filter("ProductName", FilterOperator.Contains, sInputValue)]);// Open ValueHelpDialog filtered by the input's valueoDialog.open(sInputValue);});},onValueHelpSearch: function (oEvent) {var sValue = oEvent.getParameter("value");var oFilter = new Filter("ProductName", FilterOperator.Contains, sValue);oEvent.getSource().getBinding("items").filter([oFilter]);},onValueHelpClose: function (oEvent) {var oSelectedItem = oEvent.getParameter("selectedItem");oEvent.getSource().getBinding("items").filter([]);if (!oSelectedItem) {return;}this.byId("productInput").setValue(oSelectedItem.getTitle());},onSelectCheckBoxA: function (oEvent) {MessageToast.show("你选择的是：" + oEvent.getParameters().selected);},onSelectRadio: function (oEvent) {var radioButtongrp = this.byId("rbg2");var radioButton = radioButtongrp.getSelectedButton();MessageToast.show("你选择的是：" + radioButton.getText());},onSwitchChange1: function (oEvent) {if (oEvent.getParameters().state == true) {var message = '你打开了开关'} else {var message = '你关闭了开关'}MessageToast.show(message);}});});

ValueHelpDialog.fragment.xml

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core"><SelectDialogid="selectDialog"title="Products"items="{invoices>/Invoices}"search=".onValueHelpSearch"confirm=".onValueHelpClose"cancel=".onValueHelpClose"><StandardListItem id="idStandardListItem" title="{invoices>ProductName}"description="{invoices>ProductName}" /></SelectDialog>
</core:FragmentDefinition>

manifest.json

{"_version": "1.65.0","sap.app": {"id": "democontrol","type": "application","i18n": "i18n/i18n.properties","applicationVersion": {"version": "0.0.1"},"title": "{{appTitle}}","description": "{{appDescription}}","resources": "resources.json","sourceTemplate": {"id": "@sap/generator-fiori:basic","version": "1.17.4","toolsId": "64a13bc7-5c79-400b-adf7-5e7993d0612a"}},"sap.ui": {"technology": "UI5","icons": {"icon": "","favIcon": "","phone": "","phone@2": "","tablet": "","tablet@2": ""},"deviceTypes": {"desktop": true,"tablet": true,"phone": true}},"sap.ui5": {"flexEnabled": true,"dependencies": {"minUI5Version": "1.135.0","libs": {"sap.m": {},"sap.ui.core": {}}},"contentDensities": {"compact": true,"cozy": true},"models": {"i18n": {"type": "sap.ui.model.resource.ResourceModel","settings": {"bundleName": "democontrol.i18n.i18n"}},"invoices": {"type": "sap.ui.model.json.JSONModel","uri": "Invoices.json"}},"resources": {"css": [{"uri": "css/style.css"}]},"routing": {"config": {"routerClass": "sap.m.routing.Router","controlAggregation": "pages","controlId": "app","transition": "slide","type": "View","viewType": "XML","path": "democontrol.view","async": true,"viewPath": "democontrol.view"},"routes": [{"name": "RouteOverview","pattern": ":?query:","target": ["TargetOverview"]}],"targets": {"TargetOverview": {"id": "Overview","name": "Overview"}}},"rootView": {"viewName": "democontrol.view.App","type": "XML","id": "App","async": true}}
}