Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions steps/01/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## Step 1: Hello World!

As you know, OpenUI5 is all about HTML5. Let's get started with building a first "Hello World" with only HTML. In addition we'll initialize the UI5 Tooling, so we can benefit from it from the beginning.
As you know, OpenUI5 is all about HTML5. Let's get started with building a first "Hello World" with only HTML. In addition we'll initialize the UI5 CLI, so we can benefit from it from the beginning.

 

Expand Down Expand Up @@ -68,7 +68,7 @@ In our webapp folder, we create a new HTML file named `index.html` and copy the

### webapp/manifest.json \(New\)

The manifest serves as a crucial configuration file for applications, components, and libraries. For applications, the manifest file is stored in the `webapp` folder and is read by OpenUI5 to instantiate a component. Although we haven't created a component yet (which is part of [Step 9: Component Configuration](../09/README.md)), creating the manifest now is necessary due to the UI5 Tooling requirements for development.
The manifest serves as a crucial configuration file for applications, components, and libraries. For applications, the manifest file is stored in the `webapp` folder and is read by OpenUI5 to instantiate a component. Although we haven't created a component yet (which is part of [Step 9: Component Configuration](../09/README.md)), creating the manifest now is necessary due to the UI5 CLI requirements for development.

Let's start by creating a new file named `manifest.json` in the webapp folder and define its essential attributes:

Expand Down Expand Up @@ -113,9 +113,9 @@ Since we want our app to support not only the latest OpenUI5 version but rather

***

### UI5 Tooling
### Development Environment

The following steps are tailored for using this project with [UI5 Tooling](https://sap.github.io/ui5-tooling/stable/pages/CLI/#local-vs-global-installation).
The following steps are tailored for using this project with [UI5 CLI](https://ui5.github.io/cli/stable/pages/CLI/#local-vs-global-installation).

***

Expand Down Expand Up @@ -144,13 +144,13 @@ Next, we install the UI5 CLI and add it as development dependency to our project
npm install --save-dev @ui5/cli
```

Finally, we initialize the UI5 Tooling configuration for our project by executing the following command on the app root folder:
Finally, we initialize the UI5 CLI configuration for our project by executing the following command on the app root folder:

```sh
ui5 init
```

This will generate a `ui5.yaml` file in the app root directory, which is essential for using UI5 Tooling with our project.
This will generate a `ui5.yaml` file in the app root directory, which is essential for using UI5 CLI with our project.
 

To start the web server, execute the following command:
Expand Down Expand Up @@ -185,4 +185,4 @@ This will open a new browser window hosting your newly created `index.html`.

[App Development](https://sdk.openui5.org/topic/b1fbe1a22f8d4a5bbb601591e27b68d1 "There are several ways to develop OpenUI5 applications. Select the one that meets the requirements of your projects and your expectations best.")

[UI5 Tooling: Getting Started](https://sap.github.io/ui5-tooling/stable/pages/GettingStarted/)
[UI5 CLI: Getting Started](https://ui5.github.io/cli/stable/pages/GettingStarted/)
26 changes: 13 additions & 13 deletions steps/02/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,23 +31,23 @@ You can download the solution for this step here: [📥 Download step 2](https:/
</details>
***

### UI5 Tooling
### Development Environment

First, let's set up our UI5 Tooling to use the OpenUI5 framework for our project. We also need to add the necessary OpenUI5 libraries as dependencies to the project's UI5 Tooling configuration.
First, let's set up our UI5 CLI to use the OpenUI5 framework for our project. We also need to add the necessary OpenUI5 libraries as dependencies to the project's UI5 CLI configuration.

We open a terminal in the root folder of our app and execute the following command:

```sh
ui5 use OpenUI5
```

This command tells the UI5 Tooling to use the OpenUI5 framework to build and run the application. Next, we configure some runtime dependencies by executing the following command:
This command tells the UI5 CLI to use the OpenUI5 framework to build and run the application. Next, we configure some runtime dependencies by executing the following command:

```sh
ui5 add sap.ui.core themelib_sap_horizon
```

The `ui5 add` command adds specific libraries as dependency to the projects UI5 Tooling configuration. In this case, we'e adding the `sap.ui.core` library, which provides core functionality of the OpenUI5 framework. This library is essential for bootstrapping OpenUI5. Additionally, we're adding the `themelib_sap_horizon` library which provides the visual styles for the Horizon theme. We'll use this theme with our application.
The `ui5 add` command adds specific libraries as dependency to the projects UI5 CLI configuration. In this case, we'e adding the `sap.ui.core` library, which provides core functionality of the OpenUI5 framework. This library is essential for bootstrapping OpenUI5. Additionally, we're adding the `themelib_sap_horizon` library which provides the visual styles for the Horizon theme. We'll use this theme with our application.


<details class="ts-only">
Expand Down Expand Up @@ -174,7 +174,7 @@ We initialize the core modules with the following configuration options:

***

### UI5 Tooling
### Development Environment

Let's enhance our tooling setup once again by installing some custom middleware for the ui5-server. This will help us handle our development project more efficiently.

Expand All @@ -198,19 +198,19 @@ When you run the command, npm will download the specified packages from the npm

Let's break down what each package does:

- `ui5-middleware-livereload` is a middleware plugin for the UI5 Tooling that enables live reloading of your application in the browser. Live-reloading means that whenever you make changes to your code, the browser automatically refreshes and displays the updated version without requiring manual refreshes (e.g. upon *Save*).
- `ui5-middleware-livereload` is a middleware plugin for the UI5 CLI that enables live reloading of your application in the browser. Live-reloading means that whenever you make changes to your code, the browser automatically refreshes and displays the updated version without requiring manual refreshes (e.g. upon *Save*).

- `ui5-middleware-serveframework` is another middleware plugin for the UI5 Tooling that provides a web server to serve your OpenUI5 project during development. It allows you to easily serve the necessary OpenUI5 libraries and resources required by your application from your development environment.
- `ui5-middleware-serveframework` is another middleware plugin for the UI5 CLI that provides a web server to serve your OpenUI5 project during development. It allows you to easily serve the necessary OpenUI5 libraries and resources required by your application from your development environment.

<details class="ts-only">

- `ui5-tooling-transpile` is a plugin for the UI5 Tooling that transpiles modern JavaScript (ES6+) and TypeScript into a compatible version for OpenUI5. OpenUI5 is based on older versions of JavaScript, so this plugin allows you to take advantage of the latest language features and syntax while ensuring that your code remains compatible with OpenUI5.
- `ui5-tooling-transpile` is a plugin for the UI5 CLI that transpiles modern JavaScript (ES6+) and TypeScript into a compatible version for OpenUI5. OpenUI5 is based on older versions of JavaScript, so this plugin allows you to take advantage of the latest language features and syntax while ensuring that your code remains compatible with OpenUI5.

</details>

### ui5.yaml

Next, we have to configure the tooling extension we installed from npm to our UI5 Tooling setup, so we can use them in our project. To hook a custom task into a certain build phase of a project, it needs to reference another task that will get executed before or after it. The same applies for a custom middleware:
Next, we have to configure the tooling extension we installed from npm to our UI5 CLI setup, so we can use them in our project. To hook a custom task into a certain build phase of a project, it needs to reference another task that will get executed before or after it. The same applies for a custom middleware:
<details class="ts-only">

- For the `ui5-tooling-transpile-task` we specify that this should happen after the`replaceVersion` task.
Expand Down Expand Up @@ -279,13 +279,13 @@ Now you can benefit from live reload on changes and built framework resources at

**Next:** [Step 3: Controls](../03/README.md "Now it's time to build our first little UI by replacing the Hello World text in the HTML body by the OpenUI5 control sap.m.Text. In the beginning, we will use the TypeScript control API to set up the UI, the control instance is then placed into the HTML body‚")

**Previous:** [Step 1: Hello World!](../01/README.md "As you know OpenUI5 is all about HTML5. Let's get started with building a first Hello World with only HTML. In addition we will initialize the UI5 Tooling, so we can benefit from it from the beginning.")
**Previous:** [Step 1: Hello World!](../01/README.md "As you know OpenUI5 is all about HTML5. Let's get started with building a first Hello World with only HTML. In addition we will initialize the UI5 CLI, so we can benefit from it from the beginning.")

***

**Related Information**

[UI5 Tooling: Consuming OpenUI5 Libaries](https://sap.github.io/ui5-tooling/v3/pages/OpenUI5/)
[UI5 CLI: Consuming OpenUI5 Libaries](https://ui5.github.io/cli/stable/pages/OpenUI5/)

[SAP Fiori with Horizon](https://experience.sap.com/fiori-design-web/sap-fiori/#sap-fiori-with-horizon)

Expand All @@ -301,6 +301,6 @@ Now you can benefit from live reload on changes and built framework resources at

[NPM Package: `ui5-tooling-transpile`](https://www.npmjs.com/package/ui5-tooling-transpile)

[UI5 Tooling: Custom Tasks](https://sap.github.io/ui5-tooling/v3/pages/extensibility/CustomTasks/)
[UI5 CLI: Custom Tasks](https://ui5.github.io/cli/stable/pages/extensibility/CustomTasks/)

[UI5 Tooling: Custom Server Middleware](https://sap.github.io/ui5-tooling/v3/pages/extensibility/CustomServerMiddleware/)
[UI5 CLI: Custom Server Middleware](https://ui5.github.io/cli/stable/pages/extensibility/CustomServerMiddleware/)
6 changes: 3 additions & 3 deletions steps/03/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ You can download the solution for this step here: [📥 Download step 3](https:/

<details class="ts-only">

### UI5 Tooling
### Development Environment

To get the type definitions for OpenUI5, we need to install them to our project. We open a terminal in the root folder of our app and exectue the following command:

Expand Down Expand Up @@ -128,9 +128,9 @@ In the example above, the callback of the `on-init` event is where we now instan
***


### UI5 Tooling
### Development Environment

As we now use the `sap.m` library with our app, we need to add the dependency to this library to our UI5 Tooling setup.
As we now use the `sap.m` library with our app, we need to add the dependency to this library to our UI5 CLI setup.

We open a terminal in the root folder of our app and exectue the following command:

Expand Down
2 changes: 1 addition & 1 deletion steps/10/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ helloMsg=Hello {0}

### webapp/manifest.json

As mentioned in [Step 1](../01/README.md#webappmanifestjson-new), the manifest is used by OpenUI5 to instantiate the component. We have already configured the essential attributes of the file so that it can be used with the UI5 Tooling. Now, we'll add further attributes that are important for creating a proper UI component in OpenUI5.
As mentioned in [Step 1](../01/README.md#webappmanifestjson-new), the manifest is used by OpenUI5 to instantiate the component. We have already configured the essential attributes of the file so that it can be used with the UI5 CLI. Now, we'll add further attributes that are important for creating a proper UI component in OpenUI5.

We enhance the **`sap.app`** namespace by adding configuration for the following application-specific attributes:

Expand Down
8 changes: 4 additions & 4 deletions steps/25/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ You can download the solution for this step here: [📥 Download step 25](https:
</details>
***

### UI5 Tooling
### Development Environment

In this step, we want to use the publicly available Northwind OData service located at `https://services.odata.org/V2/Northwind/Northwind.svc/`. Therefore, our URI points to the official Northwind OData service. In order to avoid cross-origin resource sharing, the typical procedure is to use a proxy in UI5 Tooling and maintain only a path in the `URI` property of the data source of our app.
In this step, we want to use the publicly available Northwind OData service located at `https://services.odata.org/V2/Northwind/Northwind.svc/`. Therefore, our URI points to the official Northwind OData service. In order to avoid cross-origin resource sharing, the typical procedure is to use a proxy in UI5 CLI and maintain only a path in the `URI` property of the data source of our app.

A bunch of proxy solutions are available from the UI5 community as [UI5 Tooling custom middleware extensions](https://bestofui5.org/#/packages?tokens=proxy:tag).
A bunch of proxy solutions are available from the UI5 community as [UI5 CLI custom middleware extensions](https://bestofui5.org/#/packages?tokens=proxy:tag).

In this tutorial we'll use [ui5-middleware-simpleproxy](https://bestofui5.org/#/packages/ui5-middleware-simpleproxy).

Expand All @@ -51,7 +51,7 @@ Open a new terminal window in your app root folder and execute `npm i -D ui5-mid

### ui5.yaml

We now configure the `ui5-middleware-simpleproxy` in the `ui5.yaml` file, so the proxy is used with the UI5 Tooling when serving the app.
We now configure the `ui5-middleware-simpleproxy` in the `ui5.yaml` file, so the proxy is used with the UI5 CLI when serving the app.

We schedule the simpleproxy middleware after the `compression` middleware, right after the livereload middleware. The `mountPath` property configures which URLs will be caught by the proxy. The `configuration/baseUri` property stores the real server address.

Expand Down
2 changes: 1 addition & 1 deletion steps/26/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ This approach is perfect for local testing, even without any network connection.

From this point on, we have two different entry pages: One for the real “connected” app \(`index.html`\) and one for local testing \(`test/mockServer.html`\). You can freely decide if you want to do the next steps on the real service data or on the local data within the app. Try calling the app with the `index.html` file and the `mockServer.html` file to see the difference. If the real service connection cannot be made, for example when there is no network connection, you can always fall back to the local test page.

### UI5 Tooling
### Development Environment

### package.json (optional)

Expand Down
2 changes: 1 addition & 1 deletion steps/38/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,4 +98,4 @@ You've completed the walkthrough, good job! You should now be familiar with all

**Related Information**

[UI5 Tooling documentation](https://sap.github.io/ui5-tooling/stable/)
[UI5 CLI documentation](https://ui5.github.io/cli/stable/)