You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: steps/01/README.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
## Step 1: Hello World!
2
2
3
-
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.
3
+
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.
4
4
5
5
6
6
@@ -68,7 +68,7 @@ In our webapp folder, we create a new HTML file named `index.html` and copy the
68
68
69
69
### webapp/manifest.json \(New\)
70
70
71
-
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.
71
+
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.
72
72
73
73
Let's start by creating a new file named `manifest.json` in the webapp folder and define its essential attributes:
74
74
@@ -113,9 +113,9 @@ Since we want our app to support not only the latest OpenUI5 version but rather
113
113
114
114
***
115
115
116
-
### UI5 Tooling
116
+
### Development Environment
117
117
118
-
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).
118
+
The following steps are tailored for using this project with [UI5 CLI](https://ui5.github.io/cli/stable/pages/CLI/#local-vs-global-installation).
119
119
120
120
***
121
121
@@ -144,13 +144,13 @@ Next, we install the UI5 CLI and add it as development dependency to our project
144
144
npm install --save-dev @ui5/cli
145
145
```
146
146
147
-
Finally, we initialize the UI5 Tooling configuration for our project by executing the following command on the app root folder:
147
+
Finally, we initialize the UI5 CLI configuration for our project by executing the following command on the app root folder:
148
148
149
149
```sh
150
150
ui5 init
151
151
```
152
152
153
-
This will generate a `ui5.yaml` file in the app root directory, which is essential for using UI5 Tooling with our project.
153
+
This will generate a `ui5.yaml` file in the app root directory, which is essential for using UI5 CLI with our project.
154
154
155
155
156
156
To start the web server, execute the following command:
@@ -185,4 +185,4 @@ This will open a new browser window hosting your newly created `index.html`.
185
185
186
186
[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.")
Copy file name to clipboardExpand all lines: steps/02/README.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,23 +31,23 @@ You can download the solution for this step here: [📥 Download step 2](https:/
31
31
</details>
32
32
***
33
33
34
-
### UI5 Tooling
34
+
### Development Environment
35
35
36
-
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.
36
+
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.
37
37
38
38
We open a terminal in the root folder of our app and execute the following command:
39
39
40
40
```sh
41
41
ui5 use OpenUI5
42
42
```
43
43
44
-
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:
44
+
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:
45
45
46
46
```sh
47
47
ui5 add sap.ui.core themelib_sap_horizon
48
48
```
49
49
50
-
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.
50
+
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.
51
51
52
52
53
53
<detailsclass="ts-only">
@@ -174,7 +174,7 @@ We initialize the core modules with the following configuration options:
174
174
175
175
***
176
176
177
-
### UI5 Tooling
177
+
### Development Environment
178
178
179
179
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.
180
180
@@ -198,19 +198,19 @@ When you run the command, npm will download the specified packages from the npm
198
198
199
199
Let's break down what each package does:
200
200
201
-
-`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*).
201
+
-`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*).
202
202
203
-
-`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.
203
+
-`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.
204
204
205
205
<detailsclass="ts-only">
206
206
207
-
-`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.
207
+
-`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.
208
208
209
209
</details>
210
210
211
211
### ui5.yaml
212
212
213
-
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:
213
+
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:
214
214
<detailsclass="ts-only">
215
215
216
216
- For the `ui5-tooling-transpile-task` we specify that this should happen after the`replaceVersion` task.
@@ -279,13 +279,13 @@ Now you can benefit from live reload on changes and built framework resources at
279
279
280
280
**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‚")
281
281
282
-
**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.")
282
+
**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.")
Copy file name to clipboardExpand all lines: steps/03/README.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,7 +32,7 @@ You can download the solution for this step here: [📥 Download step 3](https:/
32
32
33
33
<detailsclass="ts-only">
34
34
35
-
### UI5 Tooling
35
+
### Development Environment
36
36
37
37
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:
38
38
@@ -128,9 +128,9 @@ In the example above, the callback of the `on-init` event is where we now instan
128
128
***
129
129
130
130
131
-
### UI5 Tooling
131
+
### Development Environment
132
132
133
-
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.
133
+
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.
134
134
135
135
We open a terminal in the root folder of our app and exectue the following command:
Copy file name to clipboardExpand all lines: steps/10/README.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -51,7 +51,7 @@ helloMsg=Hello {0}
51
51
52
52
### webapp/manifest.json
53
53
54
-
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.
54
+
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.
55
55
56
56
We enhance the **`sap.app`** namespace by adding configuration for the following application-specific attributes:
Copy file name to clipboardExpand all lines: steps/25/README.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -35,11 +35,11 @@ You can download the solution for this step here: [📥 Download step 25](https:
35
35
</details>
36
36
***
37
37
38
-
### UI5 Tooling
38
+
### Development Environment
39
39
40
-
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.
40
+
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.
41
41
42
-
A bunch of proxy solutions are available from the UI5 community as [UI5 Tooling custom middleware extensions](https://bestofui5.org/#/packages?tokens=proxy:tag).
42
+
A bunch of proxy solutions are available from the UI5 community as [UI5 CLI custom middleware extensions](https://bestofui5.org/#/packages?tokens=proxy:tag).
43
43
44
44
In this tutorial we'll use [ui5-middleware-simpleproxy](https://bestofui5.org/#/packages/ui5-middleware-simpleproxy).
45
45
@@ -51,7 +51,7 @@ Open a new terminal window in your app root folder and execute `npm i -D ui5-mid
51
51
52
52
### ui5.yaml
53
53
54
-
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.
54
+
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.
55
55
56
56
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.
Copy file name to clipboardExpand all lines: steps/26/README.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -279,7 +279,7 @@ This approach is perfect for local testing, even without any network connection.
279
279
280
280
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.
0 commit comments