Skip to content

Latest commit

 

History

History
124 lines (84 loc) · 9 KB

Get_Started_Setup_Tutorials_and_Demo_Apps_8b49fc1.md

File metadata and controls

124 lines (84 loc) · 9 KB
loio
8b49fc198bf04b2d9800fc37fecbb218

view on: demo kit nightly build | demo kit latest release

Get Started: Setup, Tutorials, and Demo Apps

Set up your development environment and go through our tutorials. They introduce you to all major development paradigms of OpenUI5 using practical examples in an interactive format. The demo apps show OpenUI5 in action.

Prerequisites and Setup

  • You should be familiar with JavaScript.

  • Set up your Development Environment. We recommend UI5 Tooling , but you could also use other development environments.

  • Set up a folder where you would place the application content. We will refer to this folder as the "app root folder".

Learning Path

The tutorials are ordered with regard to increasing proficiency, starting with the basic Walkthrough and Concept tutorials and concluding with the specialised App and Control tutorials.

Downloading Code for a Tutorial Step

To download the code from the Demo Kit, follow these steps:

  1. Follow the link in the Coding section of the tutorial step or find the code in the Samples section of the Demo Kit (filter by "Tutorial" to get a list of the tutorials that are available).

  2. Download a zip file to your local machine (find the Download button on the top right).

  3. Extract the project folder to a desired location on your local machine.

  4. If you use UI5 Tooling (recommended): At your chosen location, open a new shell and execute npm install. After all dependencies have been installed, enter npm start to start the development server. (Note: if they're not already present, you may have to create and adapt some project configuration files first; see the Walkthrough Tutorial (JavaScript) for an example.)

  5. Test your project setup by opening one of its HTML pages in your development environment and making sure that the app displays the features exactly as shown in the preview of the step.

Troubleshooting

If you get stuck, check the Troubleshooting section under Essentials, or refer to the Troubleshooting tutorial.

If you can't fix the problem, try downloading the solution of the previews or current step. This should get your project fixed again, just don't forget to check the resource path and the project configuration files again.

See OpenUI5 in Action - Our Demo Apps

If you want to see some practical examples for OpenUI5 apps, check out our Demo Apps. These are fully-functional apps that showcase certain floorplans, control libraries, or other OpenUI5 features. You can also download the source code of each demo app to find out how everything works together. Feel free to explore!

  • Quickstart Tutorial
    Unleash your OpenUI5 skills with this simple three-step tutorial. We start with a simple "Hello World" example, and convert it to a minimalist two-page app.
  • Walkthrough Tutorial (JavaScript)
    In this tutorial we will introduce you to all major development paradigms of OpenUI5.
  • Walkthrough Tutorial (TypeScript)
    In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.
  • Troubleshooting Tutorial
    In this tutorial, we will show you some tools that will help you if you run into problems with your OpenUI5 app.
  • Data Binding Tutorial
    In this tutorial, we explain the concepts of data binding in OpenUI5.
  • OData V4 Tutorial
    In this tutorial, we explore how features of OData V4 can be used in OpenUI5. We write a small app that consumes data from an OData V4 service to understand how to access, modify, aggregate, and filter data in an OData V4 model.
  • Navigation and Routing Tutorial
    OpenUI5 comes with a powerful routing API that helps you control the state of your application efficiently. This tutorial will illustrate all major features and APIs related to navigation and routing in OpenUI5 apps by creating a simple and easy to understand mobile app. It represents a set of best practices for applying the navigation and routing features of OpenUI5 to your applications.
  • Testing Tutorial
    In this tutorial we will test application functionality with the testing tools that are delivered with OpenUI5. At different steps of this tutorial you will write tests using QUnit, OPA5, and the OData V2 mock server. Additionally, you will learn about testing strategies, Test Driven Development (TDD), and much more.
  • OData V2 Mock Server Tutorial
    In this tutorial, we will explore some advanced features of the OData V2 mock server.
  • Worklist App Tutorial
    In this tutorial we will build an app using OpenUI5 that, for example, a shop owner can use to manage his product stock levels.
  • Flexible Column Layout App Tutorial
    In this tutorial, we showcase how to structure your OpenUI5 app using the layout patterns that comply with the SAP Fiori design guidelines.
  • Demo Apps
    With the Demo Kit, we deliver some demo apps that show you how you can use the various features and controls of OpenUI5.
  • Best Practices for Developers
    This page is a good starting point for you to ensure your code bases, specifically your OpenUI5 applications and libraries, are ready for the future and won't become outdated.

Related Information

Demo Apps