Walkthrough
In this tutorial we will introduce you to all major development paradigms of SAPUI5.
Despite the simplicity of the UI, we strive for a proper setup of modules, structuring of application code and adherence to code conventions. As such this tutorial represents a best practice for building apps with SAPUI5.
The UI might be a bit inconsistent in some places – don’t take it as a UI design guideline. We'll show you around using minimal code changes in each step.
Some steps of this tutorial use features that are only available as of SAPUI5 version 1.30. If you use a lower version of the library you might not be able to see the expected result. Whenever suitable, we point out alternatives for lower releases.
We first introduce you to the basic development paradigms like Model-View-Controller and establish the basic structure of our application. We'll do this along the classic example of “Hello World” and start a new app from scratch. Next, we'll introduce the fundamental data binding concepts of SAPUI5 and extend our app to show a list of invoices. We'll continue to add more functionality by adding navigation, extending controls, and making our app responsive.Finally we'll look at the testing features and the built-in support tools of SAPUI5.
You don't have to do all tutorial steps sequentially, you can also jump directly to any step you want. Just download the code from the previous step, copy it to your workspace and make sure that the application runs by calling the webapp/index.html file.
You can view and download the files for all steps in the Explored app in the demo kit under Walkthrough. Depending on your development environment you might have to adjust resource paths and configuration entries.