In below steps we are going to cover, how to create your first hello world application with SAPUI5:

Step 1.Open the eclipse IDE–> click on File–>New–>other

 

 

Step 2.Now select SAPUI5 Application Development,under that select Application Project.

 

Step 3.Click on Next –> Enter the Project Name,which will be stored inside workspace folder.Workspace is the place where all the files,components related to the working project will be stored.Now select the library as sap.m .Next moving to the options section, we can see that Create an initial view is checked by default,which means that eclipse will automatically generate some controller & view for us.If we do not want the automated views & controllers then we can uncheck it.

 

Step 4.Click on next,Select Javascript, because it’s quite flexible to work on.Click on next, it will be showing all the list of libraries which will be added to the application.Next, click on finish to create the application.

 

Step 5.Great we have created a simple project structure !

Now we can see the three files(index.html,demo.controller.js & demo.view.js) which are by default opened, that are present in a folder named my first app(the name of our project).Under the folder web content, there is an index file(index.html) where all the action is happening, to run our application we will be running the index.html file.

 

Now we will edit the title inside the demo.view.js, by default it will be “title” we will change it to “Hello World!!”.Save the file by pressing ctrl+s.
Step 6.Finally, we will be running the index.html page to see the output of our first Hello World!! application.Right click on index.html–>Run As–>Select Web App Preview.As we are only related to HTML5,CSS related artifacts so its good to choose Web App Preview.

 

Step 7.Yay !

Here comes the output !

You can see that a new tab called index.html is opened with the text as Hello World!

 

Step 8.We can copy the URL & open it in chrome browser, we can see the same output on chrome as we have seen in eclipse.

 

 

You have successfully created your first UI5 application.

Thank You ! Stay tuned for more 🙂

 

 

In this blog, we will look at how to set-up the development environment before starting development of your applications.

 

• We will be requiring eclipse luna IDE(Integrated Development Environment) which can be downloaded from here, you have to select the flavor(32/64bit) of the IDE as per your system configuration which can be found out by right clicking the My Computer and going to properties.You may also use sublime-text(free) and cloud9 ide(quick app development).
• Make sure that Java is already installed on your machine because eclipse required Java to run.If it is not installed just install it from here.
• Now we will see the UI5 tools repository URL which will be required to enter in eclipse as the steps given below to install all the required libraries to make available within eclipse.
• Now click on Help –>Install New Software. As per the eclipse version(Mars/Luna) you have installed,choose the URL to be copied from here .Then paste it inside Install New Software.
• After this, you will see a list of components asking for installation,but as we are focussing on UI5 so select the same from the last down(UI Development Toolkit for HTML5).Go ahead and press Next, accept all the license agreements.Then finally it will install the software within few minutes.

Now you have successfully setup your development environment …Yepi !

Stay tuned for more posts ahead !

 
 

 

What is SAPUI5?

SAPUI5 (SAP user interface for HTML5) is a JavaScript library created by SAP. This library will be using to create HTML5 based applications, which will also be using CSS3 & AJAX too. The most interesting part of developing these type of application is, they will take its own visibility or appearances, when opened either on a desktop, mobile devices,tablets,web browsers etc. so the look and feel will not be hampered due to the responsiveness of the UI5 components.

What is the difference between OpenUI5 and SAPUI5 ?

OpenUI5(the Open-Source-licensed version of SAPUI5) comes with an APACHE2 license and SAPUI5 comes with an SAP license. OpenUI5 library does not require any permission to use it.We can get more details about the library on here.

What are the prerequisites technology to get started to learn UI5,or how many levels of knowledge one should have to get started with SAPUI5?

The prerequisites technology are

• HTML5
• CSS3
• JavaScript
• jQuery
• oData

The level of knowledge required to get started with SAPUI5:-

HTML5 : You need not required to be an expertise with it, but yes you need to know the basic knowledge/syntax’s i.e. the tags of HTML at least and when to use them.

CSS3  : Yes, you need to have a pretty good knowledge of CSS, because in the project you will be working in will demand an in-depth knowledge of CSS.

JavaScript : We will be using in JavaScript to build our applications. So having a good sound knowledge in the same will help you to go ahead with it.

jQuery : If you do not have knowledge of jQuery,it may be managed, but we will be using it while integrating some third party libraries as and when required while developing the application.

oData : It deals with the JSON(JavaScript Object Notation)objects which will be acting as the data that will be coming from the back-end server.

 

So these are some pretty basic questions which, stay tuned for more !