UI5_Walkthrough_2
Pages and Panels
将前面app的xml内容放到Panel中,并将Panel放到Page中,设置displayBlock="true"
可以更适应全屏工作的高度。
<App>
<pages>
<Page title="{i18n>homePageTitle}">
<content>
<Panel
headerText="{i18n>helloPanelTitle}">
<content>
<Button
text="{i18n>showHelloButtonText}"
press="onShowHello"/>
<Input
value="{/recipient/name}"
description="Hello {/recipient/name}"
valueLiveUpdate="true"
width="60%"/>
</content>
</Panel>
</content>
</Page>
</pages>
</App>
Page与Panel的界面如下
Shell Control
使用Shell Control作为应用的root容器,Shell在界面上引用了letterbox,可以使得应用能更好视频屏幕视觉。
在index文件中将原来新建ComponentContainer的代码改成如下,放到Shell中, Shell control可以作为应用的根元素
new sap.m.Shell({
app : new sap.ui.core.ComponentContainer({
name : "sap.ui.demo.wt",
height : "100%"
})
}).placeAt("content");
Shell Control如下,全屏后,APP内容放在中间部分
Margins and Paddings
将Panel设置class="sapUiResponsiveMargin" width="auto"
,可以看到内容与边框之间有一定的边缘Margin,并且是响应式的,随着屏幕大小的改变,Margin的大小也自动在变。在Button及Text元素中,可以设置class="sapUiSmallMarginEnd"
或者class="sapUiSmallMargin
来设置元素间的边缘Margin。
Custom CSS
定义css文件/css/style.css,其中1rem为16px。
.myAppDemoWT .myCustomButton.sapMBtn {
margin-right: 1rem
}
.myAppDemoWT .myCustomText {
font-weight: bold;
}
在manifest.json中引入css文件资源
在view中,app标签上<App class="myAppDemoWT">
Button标签class="myCustomButton"
这样可以定位到自定义的样式,在Text标签上class ="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"
加入自定义myCustomText样式
Nested Views
新建xml view,将原来app view的Panel中的内容移到新的HelloPanel View,并新建与之对应的controller。原来的App view中,content标签中通过<mvc:XMLView viewName="sap.ui.demo.wt.view.HelloPanel"/>
引用Nested View。
由于Nested View,原来上面的custom css文件中css选择器选择不到相应的类,需要修改
Dialogs and Fragments
Fragments是轻量级的UI部件,没有独立的controller,可以在多个view中共用。定义一个button,在上面定义press="onOpenDialog"
事件,在controller中定义onOpenDialog事件的实现,通过sap.ui.xmlfragment创建fragment,其中id为HelloPanel view的ID,将dialog添加为view的adependent,生命周期将于view一样。
onOpenDialog : function () {
var oView = this.getView();
var oDialog = oView.byId("helloDialog");
// create dialog lazily
if (!oDialog) {
// create dialog via fragment factory
oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.wt.view.HelloDialog");
oView.addDependent(oDialog);
}
oDialog.open();
}
新建HelloDialog.fragment.xml
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core" >
<Dialog
id="helloDialog"
title="Hello {/recipient/name}">
</Dialog>
</core:FragmentDefinition>
Fragment Callbacks
Fragments没有独立controller来处理事件,sap.ui.xmlfragment的第三个参数传入处理事件的controller,
可以直接oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.wt.view.HelloDialog", this)
this为当前HelloPanel Controller。定义onCloseDialog事件的实现this.getView().byId("helloDialog").close();
Icons
图标通过sap-icon://<iconname>.
来访问。在button上可以icon="sap-icon://world"
,在dialog fragment中,在content标签内可以添加Icon Control
<core:Icon
src="sap-icon://hello-world"
size="8rem"
class="sapUiMediumMargin"/>
Reuse Dialogs
前面我们将Dialog Fragment的交互代码写在HelloPanel Controller中,我们要复用这个Dialog Fragment时,需要将代码写在Component.js这个公共模块下。首先定义模块HelloDialog.js,继承SAPUI5 Base Object,构造方法传入view,open事件中,由于没有controller传入,我们定义local的oFragmentController对象,里面包含了onCloseDialog事件,新建oDialog时,将oFragmentController对象作为第三个参数传入,
sap.ui.define([
"sap/ui/base/Object"
], function (UI5Object) {
"use strict";
return UI5Object.extend("sap.ui.demo.wt.controller.HelloDialog", {
constructor : function (oView) {
this._oView = oView;
},
open : function () {
var oView = this._oView;
var oDialog = oView.byId("helloDialog");
if (!oDialog) {
var oFragmentController = {
onCloseDialog : function () {
oDialog.close();
}
};
// create dialog via fragment factory
oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.wt.view.HelloDialog", oFragmentController);
// connect dialog to the root view of this component (models, lifecycle)
oView.addDependent(oDialog);
}
oDialog.open();
}
});
});
fragment的生命周期随着view的销毁而销毁,我们要将复用的fragment绑定到rootView
在Component.js中,添加HelloDialog依赖,this.getAggregation("rootControl")
获取manifest.json中定义的rootView,将其作为HelloDialog模块的参数传入,this._helloDialog = new HelloDialog(this.getAggregation("rootControl"));
添加openHelloDialog事件的实现this._helloDialog.open();
调用helloDialog模块的open事件。
修改onOpenDialog的实现方法this.getOwnerComponent().openHelloDialog();
,getOwnerComponent获取当前view的component,即component.js,然后出发open事件。