当前位置：网站首页>SAP ui5 application development tutorial 107 - trial version of SAP ui5 overflow toolbar container control introduction

SAP ui5 application development tutorial 107 - trial version of SAP ui5 overflow toolbar container control introduction

2022-07-05 00:48:00 【Wang Zixi】

One suit SAP UI5 A step-by-step learning tutorial for beginners

Author's brief introduction

Jerry Wang,2007 After graduating from the University of Electronic Science and technology with a master's degree in computer science, he joined SAP Chengdu Research Institute has worked so far .Jerry yes SAP Community mentors ,SAP Chinese technical Ambassador . In a 15 Year of SAP Standard product development career ,Jerry Once participated in SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud( E-commerce cloud ) And other standard products .

Jerry Use in work ABAP, Java, JavaScript and TypeScript Development , Yes, including SAP UI5 More than one SAP Self research framework has in-depth research .

Tutorial directory

explain

Jerry from 2014 To join in SAP Chengdu Research Institute CRM Fiori After that, the development team began to contact SAP UI5, Once in the SAP Communities and “ Wang Zixi ” There are many articles on WeChat official account SAP UI5 Working principle and source code analysis article .

stay Jerry This article Yes SAP UI5 A novice who knows nothing , Which materials are better to start with ？ It was mentioned that ,Jerry Also from the SAP UI5 Rookies come all the way , Knowing that only ABAP Developers with development background , towards SAP UI5 It is not easy to transform the development field , So I designed this job in my spare time SAP UI5 Different levels Learning tutorials for learners , Develop a complete SAP UI5 Application process , Split into several steps , Make every effort to , Cover all the knowledge points involved in .

These knowledge points may not be like mine UI5 The source code analysis series is so in-depth , But try to explain in simple terms , Important knowledge points are accompanied by detailed screenshots to assist the text introduction , Facilitate the understanding of tutorial learners .

The source code for each step of this tutorial , All stored in my Github On , Use folders separately 01,02,03 Wait to identify , For example, steps 1 The source code of is here .

Each step is based on the previous step , Added several new features . Suggest zero basis or to SAP UI5 Little known SAP UI5 beginner , Learn step by step from the first step in order , Download the code locally , With the text explanation of the tutorial , Do it yourself , To deepen understanding .

For already There is a certain foundation Of SAP UI5 Developer , You can use the contents of this article , Skip the previous basic chapter , Direct selection is related to your work project , Or include some knowledge points and chapters that you haven't mastered yet to study pertinently .

If you have any questions about each step of the tutorial , Welcome to give me comments in the corresponding step article of the tutorial , Leave a message . Although I am usually busy with development , But I promise I will check the comments you left me regularly , For the technical questions involved , I will Take time to answer .

This step continues to be based on SAP UI5 Master-Detail Layout application continues ：

Separate the left and right sides of the screen Master and Detail page , Pass respectively sap.f.DynamicPage and sap.uxap.ObjectPageLayout Realization .

These two controls , Have a name footer The aggregation of , You can use what this article introduces in aggregation OverflowToolbar, Place several buttons horizontally .

OverflowToolbar Inherited from ordinary sap.m.Toolbar, Compared with the latter , As the name implies , Located inside Button Elements , It can be run according to the size of the screen , Dynamically determine its own display position .

Look at a practical example .

Click the respectively Master Page and Detail The page is shown after the highlighted button in the figure below , You can see the dynamic display at the bottom of these two pages OverflowToolbar appearance , As shown in the black area at the bottom of the figure ：

When OverflowToolbar Is not wide enough to display all the buttons it contains , Then start from left to right , Buttons that cannot be completely displayed at the end , Will be folded in a Popover Control . Click on OverflowToolbar The most the right side ... Icon , You can open Popover Control , See all the buttons folded inside . The green highlighted area below is an example .

Click the red navigation arrow , It can make Master The view occupies the screen 60% Width , here OverflowToolbar All in Button Are displayed ：

Let's adjust Chrome Browser window size , It is found that when the screen width decreases to a certain extent , Even if Master In the view OverflowToolbar All other buttons in the are folded to Popover Inside , But one named Button5 Of Radio Button, Still displayed in OverflowToolbar Normal position .