SAPUI5 Walkthrough Step 12: Shell Control as Container

https://sapui5.hana.ondemand.com/#/topic/4df1d914e52d4b1aa0805eb01522537e

使用Shell控件， Shell控件能实现不同设备屏幕大小的自适应。

修改webapp/view/App.view.xml, 增加Shell控件

<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true" xmlns="sap.m">
    <Shell>
    <App>
        <pages>
            <Page title="{i18n>title}">
                <content>
                    <Panel headerText="{i18n>helloPanelTitle}">
                        <content>
                            <Button text="{i18n>showHelloButtonText}" press=".onShowHello"/>
                            <Input value="{jsonModel>/recipient/name}" 
                                    description="Hello {jsonModel>/recipient/name}" 
                                    valueLiveUpdate="true" width="50%"/>
                        </content>
                    </Panel>
                </content>
            </Page>
        </pages>
    </App>
    </Shell>
</mvc:View>

 

 

执行