此节,将Shell Control控件用作应用程序的容器,并将其用作新的根元素。把Shell Control作为页中控件的所有元素的根元素。
1.练习效果
2.源码
您可以在演练-步骤12中查看和下载所有文件。
webapp/view/App.view.xml
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 |
<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> |
在这个例子中,Shell控件是我们应用程序的最外部控件,如果屏幕尺寸大于特定宽度,则会自动改变,自动调整为屏幕大小。
3.注意
我们不用添加 Shell控件到XML视图中的声明式UI定义,因为在外部(如SAP Fiori启动板)中运行的应用程序已经在组件UI周围有了外壳,所以不用再增加。
还有其他定制外壳的选项,例如custom background image 或者 color 或者 setting a custom logo控件。查看相关的API参考以获取更多详细信息。