In this tutorial you will implement a simple responsive, mobile-compatible user interface using OpenUI5.
Step 1: Create folders
Create a weather_app folder underneath the webapp folder.
In that weather_app folder create another sub-folder called view.
Step 2: Create JavaScript and XML files
Next create the following JavaScript and XML files:
/weather_app/view/App.view.xml
/weather_app/view/Details.controller.js
/weather_app/view/Details.view.xml
/weather_app/view/List.controller.js
/weather_app/view/List.view.xml
/weather_app/Component.js
/weather_app/util/formatter.js
Note that Component.js is in the weather_app directory, not the weather_app/view directory, and you must create the util directory for the formatter.js file.
Step 3: Add file content
Copy and paste the content from GitHub into the respective files and familiarize yourself with the content of the individual files.
Replace the content of the index.html file to match this version in GitHub.
Step 5: Deploy your app
Publish/deploy your updated app and navigate your browser to the root URL: http://localhost:8080/weatherapp. After successful authentication you should see a fully operational UI.
Note: Feel free beautify the UI by applying formatters and respective icons etc.