docs

Step 1: Setting Up the Initial App

We start by setting up a basic OpenUI5 app for this tutorial.

The structure in this step will be used throughout the rest of this tutorial. The basic OpenUI5 app created in this step will be extended in the subsequent steps to illustrate the main FlexibleColumnLayout features.


Preview

The basic OpenUI5 app

Preview of the basic app showing an empty page with a toolbar at the top.


Setup

  1. To set up your project for this tutorial, download the files at Flexible Column Layout App - Step 1.

  2. Extract the downloaded .zip file at the desired location on your local machine.
  3. Open a shell in the extracted folder and execute npm install.
  4. Execute npm start to start the web server and to open a new browser window hosting index.html.

You should have the same files as displayed in the following figure:

Folder structure with downloaded files

Project folder structure showing the downloaded files.

Parent topic:Flexible Column Layout App Tutorial

Previous:Step 2: Creating an Empty Flexible Column Layout