现在我们就用上节课创建的标准模板学习一些简单控件的使用，学习之前我们可以先看下跟随模板创建的程序架构，和我们之前跟着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：搜索帮助事件
<Input
id="productInput"
placeholder="Enter product"
showSuggestion="true"
showValueHelp="true"
valueHelpRequest=".onValueHelpRequest"
suggestionItems="{products>/}"
>
<suggestionItems>
<core:Item
id="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 binding
oDialog.getBinding("items").filter([new Filter("ProductName", FilterOperator.Contains, sInputValue)]);
// Open ValueHelpDialog filtered by the input's value
oDialog.open(sInputValue);
});
}
Button控件：
id：用来区分控件，建议每个控件都加上，在vscode里面如果我们安装了UI5插件，没有id会报错。
text：文本描述
press：按下事件，就是我们上面看到的
icon：图标，这个属性在API里面也看得到
<Button
id="button_hello"
text="{i18n>hellotext}"
press=".onSayHello"
icon="sap-icon://world"
/>
既然有了按下的事件，那么就需要有响应，对应的代码我们写在controller里面
onSayHello: function () {
var input01 = this.byId("productInput").getValue();
MessageToast.show("你输入的是：" + input01);
},
CheckBox控件：
<CheckBox
id="CheckBoxA"
selected="true"
text="option A"
select="onSelectCheckBoxA"
/>
<CheckBox
id="CheckBoxB"
selected="false"
text="option B"
select="onSelectCheckBoxB"
/>
onSelectCheckBoxA: function (oEvent) {
MessageToast.show("你选择的是：" + oEvent.getParameters().selected);
}
RadioButton控件：
<RadioButtonGroup
id="rbg2"
columns="1"
selectedIndex="2"
class="sapUiMediumMarginBottom"
select="onSelectRadio"
>
<RadioButton
id="RB2-1"
text="Option 1"
/>
<RadioButton
id="RB2-2"
text="Option 2"
editable="false"
/>
<RadioButton
id="RB2-3"
text="Option 3"
/>
</RadioButtonGroup>
onSelectRadio: function (oEvent) {
var radioButtongrp = this.byId("rbg2");
var radioButton = radioButtongrp.getSelectedButton();
MessageToast.show("你选择的是：" + radioButton.getText());
}
Switch控件：
<Switch
id="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来取值
<ComboBox
id="comboBox1"
change="onChangeCombox"
>
<items>
<core:Item
id="comboBoxitem1"
text="Yes"
key="true"
/>
<core:Item
id="comboBoxitem2"
text="No"
key="false"
/>
</items>
</ComboBox>
<ComboBox
id="comboBox2"
items="{SuggestModel>/}"
change="onChangeCombox"
selectedKey="{SuggestModel>/}"
>
<items>
<core:Item
id="comboBox2item"
text="{SuggestModel>value}"
key="{SuggestModel>key}"
/>
</items>
</ComboBox>
Select控件：同下拉框控件
<Select id="select1">
<items>
<core:Item
id="selectitem1"
text="Yes"
key="true"
/>
<core:Item
id="selectitem2"
text="No"
key="false"
/>
</items>
</Select>
<Select
id="select2"
items="{suggestModel>/}"
>
<items>
<core:Item
id="select2item"
text="{suggestModel>value}"
key="{suggestModel>key}"
/>
</items>
</Select>
一些常见的单一控件就这些，具体使用什么我们可以视项目情况而定，总之，使用方法都可以通过官方文档查得到，也不用死记硬背，需要的话就去查一下。
贴一下完整代码：
Overview.view.xml，里面还有一些和布局相关的控件，VBox竖向布局，HBox横向布局
<mvc:View
controllerName="democontrol.controller.Overview"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:core="sap.ui.core"
displayBlock="true"
>
<Page
id="idpage"
title="{i18n>homePageTitle}"
>
<content>
<Panel
id="panel01"
headerText="{i18n>helloPanelTitle}"
class="sapUiResponsiveMargin"
width="auto"
>
<VBox id="vBox">
<Button
id="button_hello"
text="{i18n>hellotext}"
press=".onSayHello"
icon="sap-icon://world"
/>
<Label
id="lableProduct"
text="Product"
labelFor="productInput"
/>
<Input
id="productInput"
placeholder="Enter product"
showSuggestion="true"
suggestionItems="{invoices>/Invoices}"
showValueHelp="true"
valueHelpRequest=".onValueHelpRequest"
>
<suggestionItems>
<core:Item
id="suggestionItem"
text="{invoices>ProductName}"
/>
</suggestionItems>
</Input>
<Text
id="tetx1"
text="{firstModel>/text1}"
/>
<CheckBox
id="CheckBoxA"
selected="true"
text="option A"
select="onSelectCheckBoxA"
/>
<CheckBox
id="CheckBoxB"
selected="false"
text="option B"
select="onSelectCheckBoxB"
/>
<Label
id="labelRadio"
labelFor="rbg2"
text="An example with 3 buttons and 1 columns"
/>
<RadioButtonGroup
id="rbg2"
columns="1"
selectedIndex="2"
class="sapUiMediumMarginBottom"
select="onSelectRadio"
>
<RadioButton
id="RB2-1"
text="Option 1"
/>
<RadioButton
id="RB2-2"
text="Option 2"
editable="false"
/>
<RadioButton
id="RB2-3"
text="Option 3"
/>
</RadioButtonGroup>
<Switch
id="switchId1"
state="true"
customTextOn="Yes"
customTextOff="No"
change="onSwitchChange1"
/>
<Switch
id="switchId2"
type="AcceptReject"
state="true"
customTextOn="Yes"
customTextOff="No"
change="onSwitchChange2"
/>
<ComboBox
id="comboBox1"
change="onChangeCombox"
>
<items>
<core:Item
id="comboBoxitem1"
text="Yes"
key="true"
/>
<core:Item
id="comboBoxitem2"
text="No"
key="false"
/>
</items>
</ComboBox>
<ComboBox
id="comboBox2"
items="{SuggestModel>/}"
change="onChangeCombox"
selectedKey="{SuggestModel>/}"
>
<items>
<core:Item
id="comboBox2item"
text="{SuggestModel>value}"
key="{SuggestModel>key}"
/>
</items>
</ComboBox>
<Select id="select1">
<items>
<core:Item
id="selectitem1"
text="Yes"
key="true"
/>
<core:Item
id="selectitem2"
text="No"
key="false"
/>
</items>
</Select>
<Select
id="select2"
items="{suggestModel>/}"
>
<items>
<core:Item
id="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 value
oDialog.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">
<SelectDialog
id="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
}
}
}