What is SAP Web IDE, SAPUI5 and OpenUI5?
According the Andreas Kunz from blogs.sap.com SAPUI5 is;
And OpenUI5 is the open source version of this library. If you want to dig more you can always check the Github page for OpenUI5.
To start developing apps first of all you have to download WebIDE using link below.
You can choose one of these platform mentioned in webpage. I’ll continue with Windows version but procedure is the same on all systems.
After downloading suitable version of your IDE just extract the content into a folder. In this folder you will see executable application named as ‘orion’.
You can find the link and details about ABAP Development tools in the link below.
You can still use Eclipse for your projects but for usability and easier integration, I highly recommend Web IDE for development.
After clicking ‘orion’, a command line application will popup and wait after finishing configuration. Because of Web IDE is web-based application, Orion configures suitable environment for our usage. You just need to open your favourite IDE and type the url below;
This url will redirect you into the landing page of your local Orion instance. From this point you have to create user and password for your local workspace.
There are lots of options after you log in Web IDE, we will get in deep most of them but for this tutorial we’ll just create sample page with labels.
Click on ‘New Project From Template’ button.
You can choose few different templates for your project, feel free to try all of them. For this tutorial we will use SAPUI5 application template.
And our first application is ready!
As you now SAPUI5 is a MVC framework. MVC is one of the most used design pattern in the world of programming. Just check the diagram below to realise how simple it is.
In this case I will just show you view part of our application, but in next chapters we will deep dive in details.
Go ahead and enter MainView.view.xml and change title of application to ‘Hello SAPUI5!’ and add label tag between content tags.
Save and click on green play button to review your app.
And here is your first app! Congratulations!
Thank you and happy coding! 🙂
Thanks for this great post to start with. I have created the app described as below but my title is coming in the top left corner, how can I align it in the centre.
Thanks for this amazing post.
Could you please let us know where is the rest of the content for this topic like routing etc. for the WebIDE personal Edition.
You must be logged in to reply to this topic.