UI(四) 页面和面板、Shell Control控件、使用CSS属性实现边距和填充、主题颜色、_边距ui

为改善我们应用程序的外观。我们将使用sap.m库中的两个控件为我们的UI添加更多的“ bling”。您还将在此步骤中了解控件聚合。
最好能将标准SAPUI5 CSS类用于布局。这样更有得于开发用户管理。

webapp/view/App.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc"
  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>
</mvc:View>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

将Shell Control控件用作应用程序的容器，并将其用作新的根元素。把Shell Control作为页中控件的所有元素的根元素。

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<Shell>

		<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>
	</Shell>

</mvc:View>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这个例子中，Shell控件是我们应用程序的最外部控件，如果屏幕尺寸大于特定宽度，则会自动改变，自动调整为屏幕大小。
我们不用添加 Shell控件到XML视图中的声明式UI定义，因为在外部（如SAP Fiori启动板）中运行的应用程序已经在组件UI周围有了外壳，所以不用再增加。

还有其他定制外壳的选项，例如custom background image 或者 color 或者 setting a custom logo控件。查看相关的API参考以获取更多详细信息。

webapp/view/App.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<Shell>
		<App>
			<pages>
				<Page title="{i18n>homePageTitle}">
					<content>
						<Panel
							headerText="{i18n>helloPanelTitle}"
							class="sapUiResponsiveMargin"
							width="auto">
							<content>
								<Button
									text="{i18n>showHelloButtonText}"
									press=".onShowHello"
									class="sapUiSmallMarginEnd"/>
								<Input
									value="{/recipient/name}"
									valueLiveUpdate="true"
									width="60%"/>
								<Text
									text="Hello {/recipient/name}"
									class="sapUiSmallMargin"/>

							</content>
						</Panel>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

要布局面中，我们添加属性，使用CSS类 sapUiResponsiveMargin这样会在面板周围增加一些空间。我们必须将属性的宽度设置为 auto，否则会将边距添加到默认宽度100％并超过页面大小。

这时如果屏幕尺寸变小，可以看到边距也会自动变小了。可以看出，该边距是响应性的，并自动适应设备的屏幕尺寸。平板电脑的边距将较小，而纵向模式下的电脑屏幕也不会留下空白的空间。

边距可以添加到各种控件中，并且有许多不同的选项可用。我们甚至可以通过添加CSS类在按钮和输入字段之间,添加属性sapUiSmallMarginEnd的 按钮。

要单独设置输出文本的格式，我们从输入字段中删除说明，然后添加新的 TEXT控制具有相同的值。在这里，我们还使用一个小边距将其与其他内容对齐。同样，我们可以添加标准的填充CSS类来设置布局容器控件的内部，但是由于默认情况下已经带出了填充，因此此处不需要。

前面步骤中，我们设置了控件的Class属性，使用的是SAPUI5预定义的CSS 属性，但有时我们需要自定义一些更细致的布局，这样我们可以通过向控件中添加自定义样式CSS类并根据需要对它们进行样式设置，来更灵活的使用CSS。

图中可看出，按钮和输入字段之间的空间较小，输出文本为粗体

注意：
兼容性规则中描述，SAPUI5生成的HTML和CSS 不是公共API的一部分，SAPUI5可能会在补丁程序和升级的版本中进行更改。如果新版本决定覆盖了样式，SAPUI5更新时都会有义务测试和更新这些修改。但前提条件是您可以控制所使用的SAPUI5版本，例如在独立方案中。在SAP Fiori启动板中运行您的应用程序时，这是不可能的，在其中为所有应用程序集中加载了SAPUI5。因此， SAP Fiori启动板应用程序不应覆盖样式。所以你在使用自定义的样式时，在升级SAPUI5时，得自己考虑升级变更。

webapp/css/style.css（新）

html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn {
   margin-right: 0.125rem
}

html[dir="rtl"] .myAppDemoWT .myCustomButton.sapMBtn {
   margin-left: 0.125rem
}

.myAppDemoWT .myCustomText {
   display: inline-block;
   font-weight: bold;
}
1
2
3
4
5
6
7
8
9
10
11
12

这里创建一个文件夹 ：CSS其中将包含我们的CSS文件。在新的样式定义文件中的CSS在文件夹中，我们创建了与自定义名称空间类结合的自定义类。这样可以确保样式仅应用于应用程序中使用的控件。

按钮的默认边距为 0 我们要覆盖的内容：我们添加了一个自定义边距 2px（要么 0.125rem 相对于默认字体大小计算 16px）到带有样式类的按钮 myCustomButton。我们添加CSS类sapMBtn 使选择器更具体：在CSS中，包含最具体选择器的规则“获胜”。

对于从右到左（rtl），您可以设置左页边距，并在应用程序显示反转时重置右页边距。如果仅使用标准SAPUI5控件，则无需担心，在这种情况下，如果我们使用自定义CSS，则必须添加此信息。

在另一个 myCustomText 我们定义一个粗体文本并将显示设置为 inline-block。这次，我们只定义了自定义类，没有任何其他选择器。我们此处尚未设置颜色值，我们将在视图中进行设置。

webapp / manifest.json

...
  "sap.ui5": {
	...	
	"models": {
	  ...
	},
	"resources": {
	  "css": [
		{
		  "uri": "css/style.css"
		}
	  ]
	}

  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在里面 resources 的部分 sap.ui5命名空间，可以加载该应用程序的其他资源。我们通过定义相对于组件的URI来加载CSS样式。然后，SAPUI5将该文件添加为HTML页面的标题，作为标记，就像在普通网页中一样，浏览器会自动加载它。

webapp/view/App.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<Shell>
		<App class="myAppDemoWT">
			<pages>
				<Page title="{i18n>homePageTitle}">
					<content>
						<Panel
							headerText="{i18n>helloPanelTitle}"
							class="sapUiResponsiveMargin"
							width="auto">
							<content>
								<Button
									text="{i18n>showHelloButtonText}"
									press=".onShowHello"
									class="myCustomButton"/>
								<Input
									value="{/recipient/name}"
									valueLiveUpdate="true"
									width="60%"/>
								<FormattedText
									htmlText="Hello {/recipient/name}"
									class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
							</content>
						</Panel>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

应用程序控件中使用我们的自定义名称空间类： myAppDemoWT。此类没有设置样式规则，并且在CSS规则的定义中用于定义仅对此应用程序有效的CSS选择器。

我们将自定义CSS类添加到按钮，以精确定义按钮和输入字段之间的空间。现在，我们为面板内容提供了像素完美的设计。

为了突出显示输出文本，我们使用 FormattedText控件，可以使用自定义CSS或HTML代码分别设置样式。我们添加自定义CSS类（myCustomText）并添加与主题相关的CSS类，以设置主题中定义的突出显示颜色。

现在，实际颜色取决于所选主题，这可以确保颜色始终适合主题并且在语义上清晰。有关可用CSS类名称的完整列表，请参见主题参数的CSS类。

不要在自定义CSS中指定颜色，而应使用标准的主题相关类。
webapp/view/App.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<Shell>
		<App class="myAppDemoWT">
			<pages>
				<Page title="{i18n>homePageTitle}">
					<content>
						<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这里不是将页面及其内容直接放入我们的 App view 视图，我们将其移至新的单独位置 Hellopanel视图中。我们使用 XMLView 标签在页面的内容中聚合显示。

webapp/view/HelloPanel.view.xml（新）

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Panel
      headerText="{i18n>helloPanelTitle}"
      class="sapUiResponsiveMargin"
      width="auto" >
      <content>
         <Button
            text="{i18n>showHelloButtonText}"
            press=".onShowHello"
            class="myAppDemoWT myCustomButton"/>
         <Input
            value="{/recipient/name}"
            valueLiveUpdate="true"
            width="60%"/>
         <FormattedText
            htmlText="Hello {/recipient/name}"
            class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
      </content>
   </Panel>
</mvc:View>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

这里我们把面板的全部内容现在已添加到新文件中 HelloPanel.view.xml中。我们还通过设置controllerName XML视图的属性。

webapp/controller/HelloPanel.controller.js (New)

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {
      onShowHello : function () {
         // read msg from i18n model
         var oBundle = this.getView().getModel("i18n").getResourceBundle();
         var sRecipient = this.getView().getModel().getProperty("/recipient/name");
         var sMsg = oBundle.getText("helloMsg", [sRecipient]);
         // show message
         MessageToast.show(sMsg);
      }
   });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

现在，我们将所有内容移出了应用程序视图和控制器。该应用控制器暂时仍为空，我们稍后将使用它来添加更多功能。
这一步我们学习一个与用户的对话框，及fragment视图的使用，fragment，是的不个代码的片断

webapp/view/HelloPanel.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Panel
      headerText="{i18n>helloPanelTitle}"
      class="sapUiResponsiveMargin"
      width="auto" >
      <content>
      <Button
         id="helloDialogButton"
         text="{i18n>openDialogButtonText}"
         press=".onOpenDialog"
         class="sapUiSmallMarginEnd"/>

      <Button
         text="{i18n>showHelloButtonText}"
         press=".onShowHello"
         class="myCustomButton"/>
      <Input
         value="{/recipient/name}"
         valueLiveUpdate="true"
         width="60%"/>
      <FormattedText
         htmlText="Hello {/recipient/name}"
         class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
      </content>
   </Panel>
</mvc:View>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

我们向视图添加一个新按钮以打开对话框。它只是在面板的内容视图的控制器中调用事件处理程序函数。我们将需要新的id =“ helloDialogBu​​tton”在步骤29：与OPA的集成测试中。

最好设置一个唯一的ID，例如 helloWorldButton应用程序的关键控件，以便轻松识别。如果未指定属性“ id”，则OpenUI5运行时将为控件生成唯一的但正在更改的ID，例如“ __button23”。在浏览器中检查应用程序的DOM元素，以了解两者之间的区别。

webapp/view/HelloDialog.fragment.xml（新）

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core" >
   <Dialog
      id="helloDialog"
      title="Hello {/recipient/name}">
   </Dialog>
</core:FragmentDefinition>
1
2
3
4
5
6
7
8

我们添加了一个新的XML文件，以便在一个片段中声明性地定义我们的对话框。片段资产位于核心 命名空间，因此我们添加了 XML文件 在内部的命名空间 片段定义 标签。

语法类似于视图，但是由于片段没有控制器，因此缺少此属性。此外，该片段在应用程序的DOM树中没有任何占用空间，并且片段本身没有控件实例（仅包含控件）。它只是一组重用控件的容器。

我们还添加了 ID 为了我们 对话 可以从我们的对话框中访问对话框 Hellopanel 控制器。

webapp/controller/HelloPanel.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast",
	"sap/ui/core/Fragment"
], function (Controller, MessageToast, Fragment) {
	"use strict";

	return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {

		onShowHello : function () {
			…
		},
		onOpenDialog : function () {
			var oView = this.getView();

			// create dialog lazily
			if (!this.byId("helloDialog")) {
				// load asynchronous XML fragment
				Fragment.load({
					id: oView.getId(),
					name: "sap.ui.demo.walkthrough.view.HelloDialog"
				}).then(function (oDialog) {
					// connect dialog to the root view of this component (models, lifecycle)
					oView.addDependent(oDialog);
					oDialog.open();
				});
			} else {
				this.byId("helloDialog").open();
			}
		}

	});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

如果片段中的对话框尚不存在，则通过调用 sap.ui.xml片段 具有以下参数的方法：

的ID Hellopanel 视图此参数用于在片段内部添加ID前缀。在那里，我们定义了IDhelloDialog 为了 对话 控件，我们可以通过调用视图来访问对话框 oView.byId（“ helloDialog”）。这样可以确保即使您以相同的方式在其他视图中实例化相同的片段，每个对话框也将具有其唯一的ID，该ID由视图ID和对话框ID串联而成。使用唯一的ID很重要，因为重复的ID会导致框架中的错误。
片段定义的路径
1
2

我们在对话框上将对话框添加为“从属”，以连接到视图模型的生命周期。一个方便的副作用是，在销毁视图时，对话框将自动销毁。否则，我们将不得不手动销毁对话框以释放其资源。

始终使用 addDependent 将对话框连接到视图的生命周期管理和数据绑定的方法，即使该对话框未添加到其UI树中也是如此。
私有函数和变量应始终以下划线开头

webapp / i18n / i18n.properties

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
1
2
3
4
5
6
7
8
9
10

既然我们已经集成了对话框，现在是时候添加一些用户交互了。
用户肯定希望在某个时刻再次关闭对话框，因此我们添加一个按钮来关闭对话框并分配一个事件处理程序。

webapp/controller/HelloPanel.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast",
	"sap/ui/core/Fragment"
], function (Controller, MessageToast, Fragment) {
	"use strict";

	return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {

		onShowHello : function () {
			// read msg from i18n model
			var oBundle = this.getView().getModel("i18n").getResourceBundle();
			var sRecipient = this.getView().getModel().getProperty("/recipient/name");
			var sMsg = oBundle.getText("helloMsg", [sRecipient]);

			// show message
			MessageToast.show(sMsg);
		},

		onOpenDialog : function () {
			var oView = this.getView();

			// create dialog lazily
			if (!this.byId("helloDialog")) {
				// load asynchronous XML fragment
				Fragment.load({
					id: oView.getId(),
					name: "sap.ui.demo.walkthrough.view.HelloDialog",
					controller: this
				}).then(function (oDialog) {
					// connect dialog to the root view of this component (models, lifecycle)
					oView.addDependent(oDialog);
					oDialog.open();
				});
			} else {
				this.byId("helloDialog").open();
			}
		},

		onCloseDialog : function () {
			this.byId("helloDialog").close();
		}
	});

});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

如前所述，片段是纯UI重用构件，没有控制器。sap.ui.xmlfragment函数的第三个参数是可选的，允许传入对(控制器)对象的引用。对于我们的对话框，我们引用HelloPanel控制器。然而，第三个参数不一定是控制器，但可以是任何对象。事件处理程序函数被放到相同的控制器文件中，它通过访问返回对话框的内部帮助函数来关闭对话框。

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core" >
   <Dialog
      id="helloDialog"
      title ="Hello {/recipient/name}">
      <beginButton>
         <Button
            text="{i18n>dialogCloseButtonText}"
            press=".onCloseDialog"/>
      </beginButton>
   </Dialog>
</core:FragmentDefinition>
1
2
3
4
5
6
7
8
9
10
11
12
13

在片段定义中，我们向对话框的beginButton聚合添加一个按钮。press处理程序引用了一个名为. onclosedialog的事件处理程序，由于我们将引用传递给了HelloPanel控制器，当按钮被按下时，该方法将被调用。
该对话框有一个名为beginButton和endButton的聚合。在这两个聚合中放置按钮可以确保beginButton被放置在UI上的endButton之前。然而，前面的意思取决于当前语言方向，beginButton将被渲染到左边，endButton将被渲染到对话框页脚的右边;在特定语言从右到左的模式下，顺序会被切换。

webapp/i18n/i18n.properties

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok
1
2
3
4
5
6
7
8
9
10
11