菜单

HTML5开发移动web应用

2019年8月9日 - 前端排行
HTML5开发移动web应用

HTML5开发移动web应用——SAP UI5篇(9)

之前我们对于app的构建都是基于显示的,现在我们来格式化一下,引入更多的SAP
UI5组件概念。这使得APP的一个界面更有层次性,更像是一个手机应用的界面,并且更好地使用SAP
UI5中提供的功能。每个不同的层次都有不同的功能。

首先修改App.view.xml文件代码:

<mvc:view controllername="sap.ui.demo.wt.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"></button><input value="{/recipient/name}" description="Hello {/recipient/name}" valueliveupdate="true" width="60%" data-cke-editable="1" contenteditable="false"><button text="{i18n>showHelloButtonText}" press="onShowHello"></button></content></panel></content></page></pages></app></mvc:view>

跟之前的相比,虽然内容相同,但是我们引入了很多组件,让这个界面更有了层次性。把所有的组件都放到了Page中,基本结构是App->Page(里面有content)->Panel(里面有content)。真正的页面内容都放在Panel中,前两层只是为了实现基础功能。另外将displayBlock设置为true,这样才能让手机页面正常显示。

在index.html文件中修改代码如下:

<!DOCTYPE html><html>
   <head>
      …
      <script>
         sap.ui.getCore().attachInit(function () {
            new sap.m.Shell({
               app : new sap.ui.core.ComponentContainer({
                  name : "sap.ui.demo.wt",
                  height : "100%"
               })
            }).placeAt("content");
         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body></html>

… <script> sap.ui.getCore().attachInit(function () { new
sap.m.Shell({ app : new sap.ui.core.ComponentContainer({ name :
“sap.ui.demo.wt”, height : “100%” }) }).placeAt(“content”); });
</script>这里面利用了SAP
UI5中的Shell组件,把页面内容放在这里面可以保证页面的响应式,更好地支持移动端设备。除此之外,我们还设定了height属性为100%,表示沾满整个屏幕。

UI5篇(9)
之前我们对于app的构建都是基于显示的,现在我们来格式化一下,引入更多的SAP
UI5组件概念。这使得A…

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的界面如下

图片 1

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内容放在中间部分

图片 2

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样式

图片 3

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选择器选择不到相应的类,需要修改

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图