https://sapui5.hana.ondemand.com/#/topic/3b9d9f84930d43df90ad0789d99bd4a3

为了使页面更加美观，可以增加Panel控件，对数据进行分组。

 

修改webapp/view/App.view.xml，增加Panel的使用（在这里我们发现sapui5中，有的组件是大写字母开头，有的都是小写字母。小写字母表示该组件是一个聚合组件，里面可以放置多个其他组件，如pages组件

<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">
    <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>
</mvc:View>

修改 webapp/i18n/i18n.properties

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

showHelloButtonText=说点啥
helloMsg=说 {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World

 

执行