Skip to Content

End-to-End Weather App Scenario Part 9

By akula86

Implement a responsive UI using OpenUI5

You will learn

In this tutorial you will implement a simple responsive, mobile-compatible user interface using OpenUI5.


  1. Create a weather_app folder underneath the webapp folder.

  2. In that weather_app folder create another sub-folder called view.

  3. 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.

    Project explorer for UI5 view

  4. Copy and paste the content from GitHub into the respective files and familiarize yourself with the content of the individual files.

  5. Replace the content of the index.html file to match this version in GitHub.

  6. 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.

    App example showing weather info for a specific city

    Note: Feel free beautify the UI by applying formatters and respective icons etc.

Next Steps

Updated 09/24/2016

Time to Complete

15 min



Back to top