← Understanding SAPUI5 app architecture, Views, Pages and Navigation between pages
In my previous blog I explained about MVC pattern, implementation of MVC pattern in SAPUI5 apps. We also saw how Pages are created and how we can achieve Navigation between pages. As we start writing more and more lines of codes, code starts getting messy, it is important to maintain a code in structured way. General way of structuring code in sapui5 is, creating a view, binding a controller to the view (That is one view has one controller). Also each view can have one or more pages in it, but it is recommended to have one page per View.
We can create these views and controllers code manually, how ever it is repetitive task, and we can have Integrated Development Environment (IDE's) doing this job for us. How ever if you are starting out with UI5 and want to understand how you can create these views, pages, app etc you can refer my blog getting started with sapui5 or openui5. I strongly recommend you to understand what IDE generated code does. Once you understand the code generated by IDE's you can start using IDE's for rapid development.
Let's get started with IDE's available for SAPUI5 development. There are 3 development environment available for SAPUI5
- Eclipse based development tools
- SAP Web IDE, you dont have to install any softwares for this in your comp, you can just get started if you have any sophisticated modern browser with you
- Nodejs based development environment.
1. Eclipse based development tools
This IDE is used for creating UI5 apps for simple use cases. Eclipse based tools provide you with the project wizard for creating basic folder structure contaning views and controllers required for SAPUI5 apps.
You can go through detailed SAP guide on installation and configuration of the SAPUI5 eclipse IDE here.
Also detailed guide to work with SAPUI5 eclipse IDE are documented here.
2. SAP Web IDE
SAP Web IDE is a web based development tool to create complex SAPUI5 apps, also it can be used to extend Fiori apps or to develop mobile apps.
Key features are
Develop new SAP Fiori and SAPUI5 apps
Extend SAP Fiori apps
Develop SAPUI5 mobile hybrid apps (HAT plug-in)
Extend the SAP Web IDE with new plug-ins and templates
You can host web IDE on your own, which runs on the Orion server. To install Orion server you would need 64 bit machine and JRE or JDK running in that system.
If you don't want to manage Orion server installation, you can head to https://account.hanatrial.ondemand.com/ and get a trial version of the cloud platform where you can get SAP Web IDE for development. This also provides other services for free like HANA instance, Mobile secure services etc.
Click on register on the above link, if you don't have the trial account already.
Once you are logged into the HANA cloud platform cockpit, look for "HTML5 applications" in the left pane, click on it.
In the right hand side of above screen shot, you see "New Application" click on it and provide the app name (all in lower case) and click on save.
Your app gets created in the Cockpit, click on pencil symbol to open this app in SAP Web IDE.
You will receive an popup to clone the app repositotry as below, fill in the required info and say ok.
Now your app shoud open in web IDE, you can start development from here.
3. Nodejs based (Grunt-cli) development environment
Used for modifying OpenUI5. The environment is based on Node.js, used as a server, with a build process that is based on Grunt. This section provides information for the initial setup, development roundtrip, and tests execution.
Go to this link to understand the installation of Nodejs based development environment here
Thats all about setting up the dev environment for SAPUI5.