Skip to Content
Previous

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.

Details


Step 1: Create folders

Create a weather_app folder underneath the webapp folder.

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

Please log in to access this content.
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.

Project explorer for UI5 view
Please log in to access this content.
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.

Please log in to access this content.
Step 4: Replace index file contents

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

Please log in to access this content.
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.

App example showing weather info for a specific city

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

Please log in to access this content.

Next Steps

Updated 03/22/2017

Time to Complete

15 min

Intermediate

Tags

Next
Back to top