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

Tutorial directory

• SAP UI5 The construction of local development environment

• SAP UI5 One of the application development tutorials ：Hello World

• SAP UI5 Application development tutorial II ：SAP UI5 The guiding process of Bootstrap

• SAP UI5 Application development tutorial 3 ： Start touching the first SAP UI5 Control

• SAP UI5 Application Development Tutorial 4 ：XML View

• SAP UI5 Application development tutorial 5 ： View controller

• SAP UI5 Application development tutorial 6 - understand SAP UI5 Module (Module) Concept

• SAP UI5 Application development tutorial 7 - JSON A preliminary study of the model

• SAP UI5 Application development tutorial 8 - Multilingual support

• SAP UI5 Application Development Tutorial 9 - Create the first one Component

• SAP UI5 Application development tutorial 10 - What is? SAP UI5 Applied descriptor Descriptor

• SAP UI5 Application development tutorial 11 ：SAP UI5 Container class control Page and Panel

• SAP UI5 Application development tutorial 12 - Use CSS Class to UI Further beautification

• SAP UI5 Application development tutorial 13 - How to add custom CSS class

• SAP UI5 Application development tutorial 14 - How embedded views are used

• SAP UI5 Application development tutorial 15 - Dialog box and Fragments How to use

• SAP UI5 Application development tutorial 16 - Icon icon Use

• SAP UI5 Application development tutorial 17 - Aggregate binding in UI5 Use in composite controls

• SAP UI5 Application development tutorial 18 - SAP UI5 Special symbols in data binding Syntax , And a detailed explanation of the concepts of absolute binding and relative binding

• SAP UI5 Application development tutorial 19 - SAP UI5 Data types and complex data binding

• SAP UI5 Application development tutorial 20 - SAP UI5 Explanation of expression binding usage

• SAP UI5 Application development tutorial 21 - SAP UI5 Custom formatter Custom Formatter

• SAP UI5 Application development tutorial 22 - filter filter The development and use of

• SAP UI5 Application development tutorial 23 - Sorting of list controls Sort And grouping Group

• SAP UI5 Application development tutorial 24 - How to use OData Data model

• SAP UI5 Application development tutorial 25 - Use proxy server to solve SAP UI5 Application access remote OData Cross domain issues of services

• SAP UI5 Application development tutorial 26 - OData Service cooperation Mock Detailed explanation of the use steps of the server

• SAP UI5 Application development tutorial 27 - SAP UI5 Applied unit testing tools QUnit Introduce

• SAP UI5 Application development tutorial 28 - SAP UI5 Application integration test tool OPA Introduce

• SAP UI5 Application development tutorial 29 - SAP UI5 Introduction to routing and navigation functions of

• SAP UI5 Application development tutorial 30 - SAP UI5 Parameter transfer in the routing process of

• SAP UI5 Application development tutorial 31 - SAP UI5 Routing history and routing fallback (Routing back and history)

• SAP UI5 Application development tutorial 32 - How to create a custom SAP UI5 Control

• SAP UI5 Course 33 application development - SAP UI5 Responsive layout features of the application (Responsiveness)

• SAP UI5 Application development tutorial 34 - SAP UI5 Apply the page adaptation function based on the device type (Device Adaptation)

• SAP UI5 Application development tutorial 35 - How to put locally developed SAP UI5 Application deployment to ABAP Server

• SAP UI5 Application development tutorial 36 - Use Chrome Developer tools Elements Dynamic modification of labels CSS class

• SAP UI5 Application development tutorial 37 - Use Chrome Developer tools Console Panel element review

• SAP UI5 Application development tutorial 38 - Use Chrome The developer tool checks the context information when the program executes an error

• SAP UI5 Application development tutorial 39 - SAP UI5 Some common errors and analysis methods of application white screen are shared

• SAP UI5 Application development tutorial 40 - How to make includes component-preload.js Inside SAP UI5 The release

• SAP UI5 Application development tutorial 41 - Chrome Expand UI5 Inspector Offline installation and use of

• SAP UI5 Application development tutorial 42 - SAP UI5 Self contained Diagnostics Introduction to the use of diagnostic tools

• SAP UI5 Application development tutorial 43 - SAP UI5 Self contained Support Assistant How to use the tool

• SAP UI5 Application development tutorial - Label and Input Cause analysis and solution of control text without horizontal alignment

• SAP UI5 Application development tutorial 45 - How to be in SAP UI5 In the application jQuery And the original DOM API

• SAP UI5 Application development tutorial 46 - Use Message Manager Realize out of the box verification (Validation) The message is thrown out

• SAP UI5 Application development tutorial - How to customize SAP UI5 Verification logic of string type input field

• SAP UI5 Application development tutorial 48 - How to be in SAP UI5 Develop barcode scanning function in the application

• SAP UI5 Application development tutorial - How to debug running on the mobile phone on the desktop computer SAP UI5 application

• SAP UI5 Application development tutorial 50 - How to use Cordova take SAP UI5 The application generates one that can be used in Android Hybrid apps installed on mobile phones

• SAP UI5 Application development tutorial 51 - How to use Chrome Debug the... Running on the mobile phone SAP UI5 Cordova Hybrid applications

• SAP UI5 Application development tutorial 52 - How to use SAP UI5 Standard control combination Cordova The plug-in calls the mobile camera to scan the barcode

• SAP UI5 Application development tutorial 53 - How to customize SAP UI5 data type (Data Type)

• SAP UI5 Application development tutorial 54 - How to SAP UI5 Apply configuration to local Fiori Launchpad in

• SAP UI5 Application development tutorial 55 - How to SAP UI5 Application passed Node.js Express Deploy to public network

• SAP UI5 Application development tutorial - SAP UI5 Tree control (tree) Development of

• SAP UI5 Application development of course 57 - be based on OData Annotated Smart Field Use the method to learn

• SAP UI5 Application development tutorial - Use the factory method to dynamically create different types of list line item controls at run time

• SAP UI5 Application development tutorial - How to be in SAP UI5 Show world map in app

• SAP UI5 Application development tutorial 60 - SAP UI5 Some advanced uses of map controls

• SAP UI5 Application development tutorial - stay SAP UI5 Draw Gantt chart in application Gantt Chart

• SAP UI5 Application development tutorial - be based on OData V4 Of SAP UI5 How to use table controls

• SAP UI5 Application development tutorial 63 - be based on OData V4 The local Mock Server In depth introduction of implementation

• SAP UI5 Application development tutorial 64 - be based on OData V4 Of SAP UI5 How to implement the table control filter( Filter ) and sort( Sort ) function

• SAP UI5 Application development tutorial 65 - be based on OData V4 Of SAP UI5 How to create a table control , Edit and save functions

• SAP UI5 Application development tutorial 66 - be based on OData V4 Of SAP UI5 How to realize the deletion function of table control

• SAP UI5 Application development tutorial 67 - be based on OData V4 Of SAP UI5 List-Detail( list - Detailed ) How to realize the layout

• SAP UI5 Application development tutorial 68 - How to achieve SAP UI5 Show custom when routing fails NOT Found page

• SAP UI5 Application development tutorial 69 - How to go from SAP UI5 Not Found The page jumps back to the normal application page

• SAP UI5 Application development tutorial 70 - How to use button control to trigger page route jump

• SAP UI5 Application development tutorial 71 - SAP UI5 Nested routing of pages

• SAP UI5 Application development tutorial 72 - SAP UI5 Animation effect setting of page routing

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 A tutorial for beginners , 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 be easy to understand , Easy SAP UI5 Beginners understand .

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 Beginners who know little , 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 .

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 .

Follow the steps before this tutorial manifest.json In file , We are routing Area to set the route of the page , You can see something called transition Properties of . actually , It is this property that controls SAP UI5 The animation effect used when jumping between different pages , The default value is slide, I.e. routing target The interface adopts the sliding effect from right to left , To replace the original page that initiated the route .

except slide outside ,SAP UI5 And support show,flip,fade And so on . This article will explain one by one through practical examples .

These optional routing effect values , In the file sap/m/NavContainer.js Define them one by one .

below This is a detailed analysis step .