SAPUI5 (12) - 对象显示组件

上一篇介绍了使用sap.m.Panel和sap.m.Text控件来显示一个供应商的信息。但SAPUI5提供了几个专门用于显示数据的组件，可以让编码更加简单，显示更加漂亮：

• sap.m.ObjectIdentifier: 用于需要对操作对象进行明确区分的时候，使用这个组件进行显示。为什么叫ObjectIdentifier呢？强调的是标识，比如显示供应商主数据，供应商就是明显的ID标识。
• sap.m.ObjectNumber: 显示数字
• sap.m.ObjectMarker: 以图标的方式显示预定义的几种类型，包括：Flagged，Favorite，Draft，Locked，LockedBy，Unsaved，UnsavedBy.
• sap.m.ObjectAttribute: 显示对象，并提供普通和active两种状态，active状态可与事件绑定
• sap.m.ObjectStatus: 显示对象的文本，并且根据状态不同，文本以不同的颜色区分
• sap.m.ObjectHeader: 显示对象，包括标识和附加的信息，图标等。

ObjectIdentifier

定义:The ObjectIdentifier is a display control that enables the user to easily identify a specific object. The ObjectIdentifier title is the key identifier of the object and additional text and icons can be used to further distinguish it from other objects.

对象主要通过title属性进行标识，使用text和icon进行补充。

举个例子：

/**
 * ObjectIdentifier
 * Stone Wang Demo
 */

function onTitlePress(oEvent){
    jQuery.sap.require("sap.m.MessageBox");
    var sName = oEvent.getSource().getTitle();
    sap.m.MessageBox.information(sName);
}

var oAppData = {            
"SupplierId": "1",
"SupplierName": "ABC新能源汽车有限公司",
"Profile": "生产和销售新能源汽车及备件"
};

var oModel = sap.ui.model.json.JSONModel();
oModel.setData(oAppData);

sap.ui.getCore().setModel(oModel);

var oObjIdentifier = new sap.m.ObjectIdentifier({
    title: "{/SupplierName}",
    text: "{/Profile}",
    titleActive: true,
    titlePress: onTitlePress
});

oObjIdentifier.placeAt("content");

• 定义json格式的数据，包含供应商名称和简介，然后通过ObjectIdentifier显示。当用户点击名称的时候，弹出一个对话框。效果如下：

• title属性是主要标识，text属性是补充，如果titleActive为true，则标题用颜色标识，同时可以在titlePress的事件处理程序中提供反馈。

• 如果titleActive属性为false，显示如下：

ObjectNumber

定义：The ObjectNumber control displays number and number unit properties for an object. The number can be displayed using semantic colors to provide additional meaning about the object to the user.
ObjectNumber

用于显示数字，并且能根据不同的状态提供颜色区分。例子：

/**
 * ObjectNumber
 * Stone Wang Demo
 */

var oAppData = {            
"ProductId": "1",
"ProductName": "Sony DPT-S1",
"Price": "5890",
"Currency": "CNY"
};

var oModel = sap.ui.model.json.JSONModel();
oModel.setData(oAppData);

sap.ui.getCore().setModel(oModel);

var oProduct = new sap.m.ObjectIdentifier({
    title: "{/ProductName}"
});

var oNumber1 = new sap.m.ObjectNumber({
    number: "{/Price}",
    numberUnit: "{/Currency}"
});
var oNumber2 = new sap.m.ObjectNumber({
    number: "{/Price}",
    numberUnit: "{/Currency}",
    state: "Error"
});         
var oNumber3 = new sap.m.ObjectNumber({
    number: "{/Price}",
    numberUnit: "{/Currency}",
    state: "Warning"
});
var oNumber4 = new sap.m.ObjectNumber({
    number: "{/Price}",
    numberUnit: "{/Currency}",
    state: "Success"
});

new sap.ui.layout.VerticalLayout({
    content: [oProduct, oNumber1, oNumber2, oNumber3, oNumber4]
}).placeAt("content");

• ObjectNumber有四种state: Warning, Error, Success和普通，分别用不同的颜色来显示数字，并且可以跟数字单位一起显示。页面显示如下：

故意使用4个不同的状态，显示索尼DPT-S1的价格。

ObjectAttribute

定义: The ObjectAttribute control displays a text field that can be normal or active. The ObjectAttribute fires a press event when the user selects active text.

示例：

/**
 * ObjectAttribute
 * Stone Wang Demo
 */

function onAttributePressed(oEvent){
    jQuery.sap.require("sap.m.MessageBox");
    var sMessage = oEvent.getSource().getTitle() 
        + ":" + oModel.getProperty("/Price");
    sap.m.MessageBox.information(sMessage);
}

var oAppData = {            
"ProductId": "1",
"ProductName": "Sony PST-1",
"Price": "5890",
"Currency": "CNY"
};

var oModel = sap.ui.model.json.JSONModel();
oModel.setData(oAppData);

sap.ui.getCore().setModel(oModel); 

var oObjAttribute = new sap.m.ObjectAttribute({
    title: "{/ProductName}",
    text: "{ProductId}",
    active: true,
    press: onAttributePressed
});

oObjAttribute.placeAt("content");

当点击title的时候，对话框显示名称 + 价格：

使用oEvent.getSource().getTitle()获得ObjectAttribute的title属性，使用oModel.getProperty("/Price")获得model的price。

ObjectMarker

ObjectMarker以图标的方式显示预定义的几种标记。可以绑定press事件。

/**
 * Object Marker
 * Demo written by Stone Wang
 */

function onMarkerPressed(oEvent){
    sap.m.MessageToast.show(oEvent.getParameter("type") + " was pressed.");
}

var oPanel = new sap.m.Panel({
    headerText: "图例",
    content: [
        new sap.m.ObjectMarker({
            type: "Flagged"
        }),     

        new sap.m.ObjectMarker().setType(sap.m.ObjectMarkerType.Favorite),

        new sap.m.ObjectMarker({
            type: "Locked"
        }),

        new sap.m.ObjectMarker({
            type: "Draft",
            press: function(oEvent){
                sap.m.MessageToast.show(oEvent.getParameter("type"));
            }
        })
    ]
}).placeAt("content");

页面显示效果：

ObjectStatus

以文本的方式显示对象，并根据对象的状态用不同的颜色进行区分。

/**
 * Object Status
 * Demo written by Stone Wang
 */

new sap.ui.layout.VerticalLayout({
    content: [
new sap.m.ObjectStatus({
            text: "Normal message",
            state: "None"
        }),

new sap.m.ObjectStatus({
            text: "Normal message with icon",
            state: "None",
            icon: "sap-icon://accept"
        }),

new sap.m.ObjectStatus({
            text: "Error message",
            state: "Error"
        }),

new sap.m.ObjectStatus({
            text: "Error message with icon",
            state: "Error",
            icon: "sap-icon://alert"
        }),

new sap.m.ObjectStatus({    
            text: "Purchase Order was created successfully.",
            state: "Success",
            icon: "sap-icon://save"
        }),
    ]
}).placeAt("content");  

界面效果：

ObjectHeader

ObjectHeader可以显示对象很多信息，包括关键的title和附件的text, icon等，还可以包含其它控件，从而表达比较丰富的信息。比如，接下来我们通过ObjectHeader来显示一个产品的相关信息：

/**
 * Object Header
 * Demo written by Stone Wang
 */

// 定义Application data
var oAppData = {            
"Product": {
"Name": "Power Projector 4713",
"Price": "856.49",
"Currency": "CNY",
"Width": "51",
"Depth": "42",
"Height": "18",
"DimUnit": "cm",
"Description": "A very powerful projector with special features for Internet usability, USB"
    }
};

// 绑定Model与Data
var oModel = sap.ui.model.json.JSONModel();
oModel.setData(oAppData);

// 设置Model到Core对象，从而使model在Application中可见
sap.ui.getCore().setModel(oModel);

// 使用ObjectHeader显示产品信息
new sap.m.ObjectHeader({
    title: "{/Product/Name}",
    number: "{/Product/Price}",
    numberUnit: "{/Product/Currency}",

    statuses: [
        new sap.m.ObjectStatus({text:"Some damaged", state: "Error"}),
        new sap.m.ObjectStatus({text:"In stock", state: "Success"})
    ],

    attributes: [
        new sap.m.ObjectAttribute({
            text: "{/Product/Width} x {/Product/Depth} x {/Product/Height} {/Product/DimUnit}"
        }),
        new sap.m.ObjectAttribute({
            text: "{/Product/Description}"
        }),
        new sap.m.ObjectAttribute({
            text: "www.jd.com",
            active: true,
            press: function(oEvent){
                sap.m.URLHelper.redirect("http://www.jd.com", true);
            }
        })
    ]
}).placeAt("content");

页面显示效果：

比较美观的显示了一个产品的相关信息，点击www.jd.com可以实现跳转。