SAPUI5基础知识23 - 模型的种类（小结）

1. 背景

在前序的学习中，我们学习了SAPUI5的MVC架构中的各个知识点，包括视图的设计，控制器的设计，以及模型的使用。

在企业级应用程序中，对于数据的处理的需求是很大的，在学习更复杂的数据绑定方式之前，让我们再深挖下MVC架构中与数据处理关系最大的部分 - 模型。

2. 概览

SAPUI5中的模型（Model）用于保存数据并提供检索、设置和删除数据的方法，它是数据和控制器之间的桥梁。如果从模型的类型上区分，则可以分为“客户端模型”和“服务器端模型”两种：

• 客户端模型：数据从本地数据源中获取；所有数据都在客户端上可用，过滤/排序/分组在本地执行(其中，资源模型用于i18n支持；而设备模型是由框架创建，包含有关运行时的设备特定信息)
• 服务器端模型：数据每次从数据源（后端）获取；只有请求的数据可用，过滤/排序/分组在远程执行
  

从功能上区分，客户端模型和服务器模型适用于不同的场景和数据集：

• 客户端模型
  • 适用于小数据集
  • 不包含基于服务器的分页或增量加载机制
  • 主要用于处理资源包中的数据，提供不同语言的文本，实现国际化
• 服务器端模型
  • 适用于大数据集
  • 允许将控件绑定到来自 OData 服务的数据
  • 数据集仅在服务器上可用，客户端仅知道当前可见的行和字段

3. 示例

3.1 客户端模型

客户端模型是指在客户端（浏览器）中管理和存储数据的模型。常见的客户端模型包括 JSONModel 和 XMLModel。

3.1.1 JSONModel

SAPUI5中的JSON Model是一个客户端模型，可以用于在SAPUI5应用程序中处理和操作JSON数据。SAPUI5提供了绑定控件数据到JSON对象的机制，使得当JSON数据改变时，UI控件也会自动更新。

代码示例：

// 创建一个JSON Model实例
var oModel = new sap.ui.model.json.JSONModel();

// 设置JSON数据到模型中
var oData = {
    "employees": [
        { "firstName": "John", "lastName": "Doe" },
        { "firstName": "Anna", "lastName": "Smith" },
        { "firstName": "Peter", "lastName": "Jones" }
    ]
};
oModel.setData(oData);

// 将模型绑定到视图
this.getView().setModel(oModel);

在视图文件中，使用以下方式绑定数据到控件：

<List items="{/employees}">
    <items>
        <ObjectListItem title="{firstName}" intro="{lastName}" />
    </items>
</List>

在上述示例中，我们首先创建了一个JSON Model实例，然后设置了一些JSON数据到模型中。然后，我们将模型绑定到视图。在视图中，我们使用绑定语法将数据绑定到一个列表控件。当JSON数据改变时，列表控件会自动更新。

当然JSON模型中的数据，是可以存储在单独的JSON文件中的，当需要处理模型数据时，可以从JSON文件中加载，如下例：

var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("mydata.json");
sap.ui.getCore().setModel(oModel);

3.1.2 XMLModel

与JSONModel类似，XMLModel也是一个客户端模型，用于处理XML格式的数据。它可以用于存储和处理来自服务器的XML数据。

代码示例：

var oModel = new sap.ui.model.xml.XMLModel();
oModel.loadData("mydata.xml");
sap.ui.getCore().setModel(oModel);

3.1.3 Device模型

Device模型在SAPUI5中是一个特殊的模型，它不是一个真正的模型，而是一个包含设备相关信息的对象。这些信息包括设备类型（如桌面、平板或手机）、操作系统、浏览器、屏幕尺寸等。Device模型通常用于响应式设计，根据设备的类型和屏幕尺寸来调整UI的布局和行为。

设备模型由框架创建，包含有关运行时的特定于设备的信息，可以使用sap.ui.Device对象来获取设备信息。

Device模型的使用示例如下：

// 检查设备是否是手机
if (sap.ui.Device.system.phone) {
  // 如果是手机，使用简洁布局
  this.getView().byId("myLayout").setSimple(true);
}

// 检查操作系统是否是iOS
if (sap.ui.Device.os.ios) {
  // 如果是iOS，使用iOS样式
  this.getView().addStyleClass("ios-style");
}

// 检查屏幕尺寸
if (sap.ui.Device.resize.width < 500) {
  // 如果屏幕尺寸小于500px，使用小字体
  this.getView().addStyleClass("small-font");
} else {
  // 如果屏幕尺寸大于或等于500px，使用大字体
  this.getView().addStyleClass("large-font");
}

或者，也可以直接通过创建实例，获取device的所有数据：

// 创建一个 DeviceModel 实例
var oDeviceModel = new sap.ui.model.json.JSONModel(sap.ui.Device);

3.1.4 ResourceModel资源模型

在SAPUI5中，资源模型（Resource Model）主要用于处理国际化（i18n）资源文件，通常用于实现多语言支持。资源模型可以加载包含翻译文本的属性文件，并提供一种方便的方式来获取这些文本。

以下是一些使用资源模型的场景：

• 多语言支持：如果你的应用需要支持多种语言，你可以为每种语言创建一个资源文件，然后使用资源模型来加载相应的文件。
• 文本复用：如果你的应用中有一些文本在多个地方被复用，你可以将这些文本放在资源文件中，然后使用资源模型来获取这些文本。

以下是使用资源模型的代码示例：

首先，你需要在你的项目中创建一个i18n资源文件，例如i18n.properties：

greeting=Hello, {0}!
button=OK

然后，使用SAP.ui.model.resource.ResourceModel类来创建资源模型，并加载资源文件：

var oModel = new sap.ui.model.resource.ResourceModel({
  bundleName: "myapp.i18n.i18n"
});
this.getView().setModel(oModel, "i18n");

可以使用资源模型来获取资源文件中的文本：

var oBundle = this.getView().getModel("i18n").getResourceBundle();
var sGreeting = oBundle.getText("greeting", ["World"]);  // "Hello, World!"

也可以在视图文件中，直接使用这些文本：

<Text text="{i18n>button}" />

在这个例子中，{i18n>button} 是一个绑定表达式，它告诉SAPUI5从名为 “i18n” 的模型中获取键为 “button” 的值。这个值就是我们在i18n.properties文件中定义的本地化字符串。

3.1.4 Message模型

在SAPUI5中，Message模型用于处理消息，例如错误消息、警告消息、信息消息和成功消息。Message模型可以帮助你管理和显示这些消息。

以下是使用Message模型的代码示例：

首先，需要使用SAP.ui.model.message.MessageModel类来创建Message模型：

var oModel = new sap.ui.model.message.MessageModel();
this.getView().setModel(oModel, "message");

然后，使用SAP.ui.core.message.Message类来创建消息，并添加到Message模型中：

var oMessage = new sap.ui.core.message.Message({
  message: "Invalid input",
  type: sap.ui.core.MessageType.Error
});
this.getView().getModel("message").addMessage(oMessage);

最后，使用SAP.m.MessagePopover控件来显示消息：

var oMessagePopover = new sap.m.MessagePopover({
  items: {
    path: "message>/",
    template: new sap.m.MessagePopoverItem({
      description: "{message>message}",
      type: "{message>type}"
    })
  }
});
oMessagePopover.setModel(this.getView().getModel("message"), "message");
oMessagePopover.openBy(this.getView().byId("myButton"));

3.2 服务器模型

服务器模型是指从服务器端获取数据并在客户端进行管理的模型，ODataModel 是最常用的服务器模型。

3.2.1 ODataModel V2

在SAPUI5中，OData模型用于处理OData服务的数据。OData（Open Data Protocol）是一种用于创建和消费RESTful API的开放标准。SAPUI5提供了sap.ui.model.odata.v2.ODataModel类来创建OData模型。

下面是使用ODataModel的一些示例：

使用sap.ui.model.odata.v2.ODataModel类来创建OData模型，并连接到OData服务

var oModel = new sap.ui.model.odata.v2.ODataModel("/my/odata/service");
this.getView().setModel(oModel);

可以使用OData模型来读取数据：

this.getView().getModel().read("/Products", {
  success: function(oData, oResponse) {
    console.log("Read success", oData);
  },
  error: function(oError) {
    console.log("Read error", oError);
  }
});

也可以使用OData模型来创建、更新和删除数据：

// 创建数据
this.getView().getModel().create("/Products", oProduct, {
  success: function(oData, oResponse) {
    console.log("Create success", oData);
  },
  error: function(oError) {
    console.log("Create error", oError);
  }
});

// 更新数据
this.getView().getModel().update("/Products('1')", oProduct, {
  success: function(oData, oResponse) {
    console.log("Update success", oData);
  },
  error: function(oError) {
    console.log("Update error", oError);
  }
});

// 删除数据
this.getView().getModel().remove("/Products('1')", {
  success: function(oData, oResponse) {
    console.log("Delete success", oData);
  },
  error: function(oError) {
    console.log("Delete error", oError);
  }
});

4. 小结

本文进一步总结了SAPUI5中常用模型的种类，并结合使用场景给出类具体的代码示例。