There are two common layouts for SAPUI5
Page layout consists of four parts: head, subtitle, content area and tail.
The Panel layout consists of several headings + unfolded folded content
Common attributes and events of page
Does showNavButton Display the Return Button
Show Header, Show Footer Display Header, Footer
navButtonPress button click event
Floating Footer floats footer
LOCAL loading false AND GLOBAL loading OF CONTENTONLY BUSINESS TRUE
BusyIndicator Delay loading delay time, default 2s wait time if not set
enableScrolling determines that the current page is not allowed to scroll
NavButton Tooltip button prompt
Multiple buttons can be set for header in the label
A search box SearchField can be set in the label
Below is Page's view page, with specific attributes on it.
<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>
Now let's implement the onBack click event
onBack:function(event){
var myPage = this.getView().byId('myPage');//Get the current page
// myPage.scrollTo(0,1000); // automatically jump to the head position, the second number is seconds.
var After = this.getView().byId('After');//Get ID After
myPage.scrollToElement(After,200);//Jump to the ID position
}
Implementing Loading
showLoading:function(){
var myPage = this.getView().byId('myPage');
myPage.setBusy(true);
}
Common attributes of panel
Is the current panel expandable
Expanded panel is expanded or closed by default
headerText panel title, but this method is not recommended, because this method can only add a title, not more rich, so we generally use toolbar.
Here's a demo.
One thing to note is that this panel does not need the APP container, and it will cause incomplete display instead. The editor doesn't understand this, either. It's obvious that there's nothing under the m library that doesn't need containers. Instead of adding containers, the editor makes an error.
<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>