HTML 5モバイルWebアプリケーション開発——SAP UI 5編(9)
2326 ワード
以前はappの構築は表示に基づいていましたが、ここではフォーマットして、より多くのSAP UI 5コンポーネントの概念を導入します.これにより、アプリの1つのインタフェースがより階層的になり、携帯電話アプリケーションのインタフェースのようになり、SAP UI 5で提供されている機能をよりよく使用することができます.各階層には異なる機能があります.
まずAppを修正します.view.xmlファイルコード:
以前と比較して,コンテンツは同じであるが,このインタフェースをより階層的にするために多くのコンポーネントを導入した.すべてのコンポーネントを配置しました
Page
で、基本構造は
App->Page(
中には
content)->Panel(
中には
content)
.本物のページの内容はすべて
Panel
で、上位2層は基礎機能を実現するためだけです.さらに
将
displayBlock
次のように設定
true
ああ、そうすれば携帯電話のページが正常に表示されます.
indexでhtmlファイルの修正コードは以下の通りです.
まず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"/>
<Input
value="{/recipient/name}"
description="Hello {/recipient/name}"
valueLiveUpdate="true"
width="60%"/>
</content>
</Panel>
</content>
</Page>
</pages>
</App></mvc:View>以前と比較して,コンテンツは同じであるが,このインタフェースをより階層的にするために多くのコンポーネントを導入した.すべてのコンポーネントを配置しました
Page
で、基本構造は
App->Page(
中には
content)->Panel(
中には
content)
.本物のページの内容はすべて
Panel
で、上位2層は基礎機能を実現するためだけです.さらに
将
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>