Fiori2.0学习笔记-Pages&panels

SAPUI5常用布局有两种
Page布局 由头部、副标题、内容区域和尾部四部分组成
Panel布局 由若干个标题+展开收起内容组成

page的常用属性及事件
showNavButton 是否显示返回按钮
showHeader、showFooter 是否显示Header、Footer
navButtonPress 按钮点击事件
floatingFooter 使footer浮动起来
contentOnlyBusy true局部的loading false全局的loading
busyIndicatorDelay loading延迟时间，若不设置会默认2s的等待时间
enableScrolling 判断当前页面允不允许滚动
navButtonTooltip 按钮提示

标签内可以为header设置多个按钮
标签内可以设置一个搜索框SearchField

下面是Page的view页，具体的属性上面都有

补充一点：在page标签加上navButtonTap编辑器会显示报错，但依然可以跑起来，这是因为这个方法在1.12.2版本后就不用了，用navButtonPress代替了。因为版本更新，有很多属性和方法都被deprecated掉了，就是新版本开始不用了，但是不会影响页面加载

<App>
    <pages>
        <Page id="myPage" title="page" class="sapUiContentPadding" showNavButton="true" showHeader="true" showFooter="true" navButtonPress="onBack" floatingFooter="true" enableScrolling="true" navButtonTap="Last Page">
            <headerContent>
                <Button icon="sap-icon://action" tooltip="share" press="showLoading"/>
            </headerContent>
            <subHeader>
                <Toolbar>
                    <SearchField/>
                </Toolbar>
            </subHeader>
            <content>
                <VBox>
                    <Text text="Before you start using SAPUI5 , please read the important information in the section. Here you read everything you need to know about supported library combinations, the supported browsers and platforms, and so on."/>
                </VBox>
                <VBox id="After">
                <Text  text="After you start using SAPUI5 , please read the important information in the section. Here you read everything you need to know about supported library combinations, the supported browsers and platforms, and so on."/>
                </VBox>
                <VBox>
                <Text text="Before you start using SAPUI5 , please read the important information in the section. Here you read everything you need to know about supported library combinations, the supported browsers and platforms, and so on."/>
                </VBox>
    </content>
    <footer>
        <Toolbar>
            <ToolbarSpacer/>
            <Button text="Accept" type="Accept"/>
            <Button text="Reject" type="Reject"/>    
            <Button text="Enit" />     
            <Button text="Delect" type="Default"/>
        </Toolbar>
    </footer>
</Page>
</pages>

下面我们实现一下onBack这个点击事件

onBack:function(event){
    var myPage = this.getView().byId('myPage');//获取当前页
    // myPage.scrollTo(0,1000);//自动跳转到头部位置，第二个数字是秒数
    var After = this.getView().byId('After');//获取到ID为After
    myPage.scrollToElement(After,200);//跳转到ID的位置

}

实现Loading

showLoading:function(){
    var myPage = this.getView().byId('myPage');
    myPage.setBusy(true);
}

panel的常用属性
expandable 当前panel是否可以展开
expanded 默认情况下panel是展开还是关闭
headerText panel标题，但是不推荐使用这个方式，因为这个方式只能加一个标题，不能更加丰富，所以我们一般都用toolbar

下面是一个demo。
其中可以注意一点 就是这个panel不需要APP这个容器，加上反而会导致显示不全。这点编者也他妈不明白，明明就是个m库下的东西还不需要容器，加了容器反而报错。

<Panel expandable="true" expanded="true" width="auto" class="sapUiResponsiveMargin">
    <content>
        <Text text="fore you start using SAPUI5 , please read the important information in the section. Here you read everything you need to know about supported library combinations, the supported browsers and platforms, and so on."/>

    </content>
</Panel> 
    <Panel expandable="true" expanded="false" width="auto" class="sapUiResponsiveMargin">
        <headerToolbar>
            <Toolbar>
            <Title text="Coumnl the row"/>
            <ToolbarSpacer/>
            <Button icon="sap-icon://settings"/>
            <Button icon="sap-icon://drop-down-list"/>
            </Toolbar>
        </headerToolbar>
    <content>
        <Text text="Before you start using SAPUI5 , please read the important information in the section. Here you read everything you need to know about supported library combinations, the supported browsers and platforms, and so on."/>

    </content>
</Panel>