SAP UI5 - 控制元件

在開發 UI5 應用程式時，您可以使用不同型別的 UI 控制元件。這些控制元件可讓您在 UI5 應用程式中新增按鈕、表格、影像、佈局、下拉框以及各種其他控制元件。

常見的控制元件型別包括 -

• 簡單控制元件
• 複雜控制元件
• UX3 控制元件
• 對話方塊
• 佈局

影像控制元件

Var image = new sap.ui.commons.Image();
Image.setSrc(“Image1.gif”);
Image.setAlt(“alternat.text”);

下拉框

您可以使用下拉框來提供預定義的條目。

屬性 - 專案、選定鍵

Var oComboBox2 = new sap.ui.commons.ComboBox (“ComboBox”,{
   Items:{path:”/data”,
      Template:oItemTemplate, filters:[oFilter]},
   Change: function(oEvent){
      Sap.ui.getCore(). byId(“field”).setValue(
         oEvent.oSource.getSelectedKey());
   }
});

簡單按鈕控制元件

使用 attachPresss 分配推送操作的事件處理程式。

Var oButton = new sap.ui.commons.Button ({text : “Click”,
   Press: oController.update
});

自動完成控制元件

自動完成輸入的值。

Var uiElement = new sap.ui.commons.AutoComplete({
   Tooltip: ”Enter the product”,
   maxPopupItems: 4
});
For (var i = 0; i<aData.lenght; i++){
   uiElement.addItem(new sap.ui.core.ListItem(
      {text: aData[i].name}));
}

表格控制元件框

它源自 sap.ui.table，並且每個表格包含列。

Var oTable = new sap.ui.table.Table({
   Columns: [
      New sap.ui.table.Column({
         Label: new sap.ui.commons.lable({ text: “First Column”}),
         Template: new sap.ui.commons.TextView({ text: “{Firstcolumn}” }),
         Width: “120px”
      })