OpenUI5移动(Mobile)

一般而言sap.m.App (以下简称App)是作为UI5移动应用的根节点元素(root element)，所以在一个UI5 移动应用的一开始，我们就创建一个App对象，并把这个App置入UI Area中。

我们可以对这个控件做一些定制化，查看这个控件的API Reference，看到它有这么几个属性：

• homeIcon
• backgroundColor
• backgroundImage
• backgroundRepeat
• backgroundOpacity

我们随便挑一个属性来看一下怎么用，就设置背景颜色吧，使用 backgroundColor

找到如下代码：

var app = new sap.m.App("myApp", {initialPage:"page1"});

改为：

var app = new sap.m.App("myApp", {
  backgroundColor: "blue",
  initialPage:"page1"});

重新打开应用的url，显示效果如下：

好吧，很难看不是吗，所以尽量不要去修改背景、前景之类的，因为我们有指定主题，所以如果你需要定制不同的界面风格，尽量通过定制主题来实现，这个我们在之后会一起来探讨。

App是应用的主容器，但是一个应用会有多个页面，每一个页面就是一个Page。对一个Mobile来说，一个应用每次只能显示一个Page到当前 屏幕。如果是一个Tablet或者Desktop，可以显示一个作为导航的 Page和一个详细信息的Page，比如典型的Master Detail应用。

在上面的例子中，我们创建了两个Page，并通过App的addPage方法把两个Page都添加到App中，并指定page1作为初始页面。

页面的导航或者说路由如何实现？可以看到UI5中很大程度上封装并简化了导航的操作，通过App的实例对象的to方法和back方法可以方便的在 Page之间进行切换，当然前提是你已经把Page添加到App中。如果你想在运行时动态添加页面的话，在添加页面之前是不能通过to方法来导航的。当然 了，因为这个例子只有两个页面，所以相对来说页面导航比较简单，如果是一个复杂的应用，页面深度在两层以上，简单的通过App的to和back就无法满足 需求了，这就需要用到component和route来实现了，这里先简单的提一下，以后应该会有专题来介绍的。

总的来说，Page是一个移动应用显示屏幕的最基本(Fundamental)容器，屏幕上的其他控件都需要放在Page的content下，或者通过Page的AddContent方法来逐个加入。

这个不要多介绍了，多行文本框，可以显示多行文本，例子中展示了一个最基本的用法。

按钮，也无需多介绍，按钮作为网页中最常见的控件在UI5中有很多种样式和用法，我们这里用的是一个最基本的按钮控件。这里给按钮添加了一个方法，通过sap.ui.Device类让其可以显示当前设备的类型。