Skip to Content

Implement a responsive UI using OpenUI5

Previous

Implement a responsive UI using OpenUI5

By Jim Jaquet

Implement a responsive UI using OpenUI5

Details

You will learn

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.

Project explorer for UI5 view
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.

Step 4: Replace index file contents

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.

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 05/06/2018

Contributors Provide Feedback

QR Code

Time to Complete

15 min

Intermediate

Tags

Intermediate Java Cloud SAP Cloud Platform

Prerequisites

Next Steps

Next
Back to top