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>