Skip to content

Commit 62484cb

Browse files
margopolomargopolo
committed
Add JS/TS switches to Step 1-10
1 parent d1a968d commit 62484cb

File tree

10 files changed

+473
-64
lines changed

10 files changed

+473
-64
lines changed

‎steps/01/README.md‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,23 @@ As you know OpenUI5 is all about HTML5. Let's get started with building a first
1515

1616
You can access the live preview by clicking on this link: [🔗 Live Preview of Step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/build/01/index.html).
1717

18-
Download solution for step 1 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01-js.zip).
19-
2018
***
2119

2220
### Coding
2321

22+
<details class="ts-only">
23+
24+
You can download the solution for this step here: [📥 Download step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01.zip).
25+
26+
</details>
27+
28+
<details class="js-only">
29+
30+
You can download the solution for this step here: [📥 Download step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01-js.zip).
31+
32+
</details>
33+
34+
2435
### webapp \(New\)
2536

2637
We create a folder on our local machine which will contain all the sources of the app we're going to build. We'll refer to this folder as the “app root directory".

‎steps/02/README.md‎

Lines changed: 70 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,23 @@ Before we can do something with OpenUI5, we need to load and initialize it. This
1515

1616
You can access the live preview by clicking on this link: [🔗 Live Preview of Step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/build/02/index-cdn.html).
1717

18-
Download solution for step 2 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02-js.zip).
19-
2018
***
19+
### Coding
20+
21+
<details class="ts-only">
22+
23+
You can download the solution for this step here: [📥 Download step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02.zip).
24+
25+
</details>
26+
27+
<details class="js-only">
2128

22-
### Tooling
29+
You can download the solution for this step here: [📥 Download step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02-js.zip).
30+
31+
</details>
32+
33+
34+
### UI5 Tooling
2335

2436
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.
2537

@@ -37,26 +49,27 @@ ui5 add sap.ui.core themelib_sap_horizon
3749

3850
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.
3951

40-
***
4152

42-
### package.json
53+
<details class="ts-only">
54+
4355

4456
To work with TypeScript, we must install it in our project. To do this, we execute the following command in the terminal:
4557

58+
4659
```sh
4760
npm install typescript --save-dev
4861
```
4962

5063
By running this command, npm will download the TypeScript package from the npm registry and install it in our project's "node_modules" directory. It will also add an entry for TypeScript in the "devDependencies" section of our package.json file, so that other developers working on the project can easily install the same version of TypeScript.
5164

52-
***
5365

5466
### tsconfig.json \(New\)
5567

5668
As a next step, we need to create the file `tsconfig.json` in the app root directory to indicate that this folder is the root of a TypeScript project. This file specifies various compiler options and project settings that affect how TypeScript code is compiled into JavaScript.
5769

5870
We specify the compiler options as follow:
5971

72+
6073
```json
6174
{
6275
"compilerOptions": {
@@ -101,17 +114,19 @@ Let's go through the compiler options specified in the file:
101114

102115
***
103116

104-
### Coding
117+
</details>
105118

106-
### webapp/index.ts \(New\)
119+
### webapp/index.?s \(New\)
107120

108-
Now let's move on to the UI work. We create a new `index.ts` script in the webapp folder. In this script, we add a native `alert()` method with the message "UI5 is ready".
121+
Now let's move on to the UI work. We create a new `index.?s` script in the webapp folder. In this script, we add a native `alert()` method with the message "UI5 is ready".
109122

110123
```ts
111124
alert("UI5 is ready");
112125
```
113126

114-
***
127+
```js
128+
alert("UI5 is ready");
129+
```
115130

116131
### webapp/index.html
117132

@@ -157,22 +172,30 @@ We initialize the core modules with the following configuration options:
157172
</html>
158173
```
159174

160-
> 📝 **Note:**
175+
> 📝 **Note:**<br>
161176
> The namespace is a unique identifier for your application file. It helps prevent naming conflicts with other modules or libraries.
162177
163178
***
164179

165-
### Tooling
166-
167-
### package.json
180+
### UI5 Tooling
168181

169182
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.
170183

171184
We open a terminal and navigate to the root folder of our app. Then, we execute the following command:
172185

186+
<details class="ts-only">
187+
173188
```sh
174189
npm install ui5-middleware-livereload ui5-middleware-serveframework ui5-tooling-transpile --save-dev
175190
```
191+
</details>
192+
193+
<details class="js-only">
194+
195+
```sh
196+
npm install ui5-middleware-livereload ui5-middleware-serveframework --save-dev
197+
```
198+
</details>
176199

177200
When you run the command, npm will download the specified packages from the npm registry and store them in a folder called `node_modules` within your project directory. The `--save-dev` flag instructs npm to save these packages as development dependencies in the `devDependencies` section of the `package.json` file. Development dependencies are packages that are only needed during development and not in production. By separating them from production dependencies, we can keep our project clean and ensure that only the required packages are included when deploying the application.
178201

@@ -182,21 +205,28 @@ Let's break down what each package does:
182205

183206
- `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.
184207

208+
<details class="ts-only">
209+
185210
- `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.
186211

187-
***
212+
</details>
188213

189214
### ui5.yaml
190215

191216
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:
217+
<details class="ts-only">
192218

193219
- For the `ui5-tooling-transpile-task` we specify that this should happen after the`replaceVersion` task.
194220

221+
</details>
222+
195223
- All our custom middleware extensions will be called after the `compression` middleware.
196224

197225
> 📌 **Important:** <br>
198226
> Middleware configurations are applied in the order in which they are defined.
199227
228+
<details class="ts-only">
229+
200230
```yaml
201231
framework:
202232
name: OpenUI5
@@ -219,7 +249,31 @@ server:
219249
```
220250
Now you can benefit from live reload on changes, built framework resources at development time, and make use of TypeScript in OpenUI5.
221251
222-
> 📝 **Note:** <br>
252+
</details>
253+
254+
<details class="js-only">
255+
256+
```yaml
257+
framework:
258+
name: OpenUI5
259+
version: "1.132.1"
260+
libraries:
261+
- name: sap.ui.core
262+
- name: themelib_sap_horizon
263+
builder:
264+
server:
265+
customMiddleware:
266+
- name: ui5-middleware-serveframework
267+
afterMiddleware: compression
268+
- name: ui5-middleware-livereload
269+
afterMiddleware: compression
270+
```
271+
Now you can benefit from live reload on changes and built framework resources at development time.
272+
273+
</details>
274+
275+
<br>
276+
> 📝 **Note:**<br>
223277
> During its initial run, the `ui5-middleware-serveframework` middleware will build the framework, which can take a while. In all following steps, the build will not happen again and the framework is served from the built resources.
224278

225279
&nbsp;

‎steps/03/README.md‎

Lines changed: 59 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## Step 3: Controls
22

3-
Now it is 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.
3+
Now it is 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 create an OpenUI5 control instance and place into the HTML body.
44

55
&nbsp;
66

@@ -15,13 +15,23 @@ Now it is time to build our first little UI by replacing the “Hello World” t
1515

1616
You can access the live preview by clicking on this link: [🔗 Live Preview of Step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/build/03/index-cdn.html).
1717

18-
Download solution for step 3 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03-js.zip).
19-
2018
***
19+
### Coding
20+
<details class="ts-only">
21+
22+
You can download the solution for this step here: [📥 Download step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03.zip).
23+
24+
</details>
2125

22-
### Tooling
26+
<details class="js-only">
2327

24-
### package.json
28+
You can download the solution for this step here: [📥 Download step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03-js.zip).
29+
30+
</details>
31+
32+
<details class="ts-only">
33+
34+
### UI5 Tooling
2535

2636
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:
2737

@@ -31,13 +41,32 @@ npm install @types/openui5 --save-dev
3141

3242
***
3343

34-
### Coding
44+
</details>
45+
46+
### webapp/index.?s
47+
48+
<details class="ts-only">
49+
50+
We will replace the native script in our file with the OpenUI5 Text control displaying "Hello Word".
51+
For this, we will create a new instance of the Text control, setting its `text` property to "Hello World" by passing it as an object to the constructor.
52+
53+
</details>
54+
55+
<details class="js-only">
56+
57+
We will replace the native script in our file with the OpenUI5 Text control displaying "Hello Word".
58+
For this, we will first use OpenUI5's module definition `sap.ui.define` to create a module. To instantiate and render the Text control, we will define the `sap/m/Text` module as a dependency to this module. We will then create a new instance of the Text control and set its `text` property to "Hello World".
3559

36-
### webapp/index.ts
60+
</details>
3761

38-
Now we make some changes to our `index.ts` file: We remove the alert method and instantiate an OpenUI5 text control instead. We create an instance of the text control by passing its options as a TypeScript object to the constructor. In our case, we want the text control to display the message "Hello World", so we'll set the `text` property accordingly.
62+
To place the text control to our HTML document, we chain the constructor call of the control with the `placeAt` method. This method is used to position OpenUI5 controls. In our case, we add the Text control to the DOM element with the ID `content`.
3963

40-
To place the text control to our HTML document, we chain the constructor call of the control with the `placeAt` method. This method is used to position OpenUI5 controls. In our case, we add the text control to the DOM element with the ID `content`.
64+
<details class="js-only">
65+
66+
> 📌 **Important:** <br>
67+
> It is best practice to use of Anynchronous Module Loading (AMD) style for defining modules and their dependencies. This ensures better performance, proper dependency tracking between modules and helps avoid issues related to loading order.
68+
69+
</details>
4170

4271
```ts
4372
import Text from "sap/m/Text";
@@ -47,7 +76,15 @@ new Text({
4776
}).placeAt("content");
4877
```
4978

50-
Controls are used to define appearance and behavior of parts of the screen.
79+
```js
80+
sap.ui.define(["sap/m/Text"], function (Text) {
81+
"use strict";
82+
83+
new Text({
84+
text: "Hello World"
85+
}).placeAt("content");
86+
});
87+
```
5188

5289
All controls of OpenUI5 have a fixed set of properties, aggregations, and associations for configuration. You can find their descriptions in the Demo Kit. In addition, each control comes with a set of public functions that you can look up in the API reference.
5390

@@ -112,8 +149,6 @@ ui5 add sap.m
112149

113150
**Related Information**
114151

115-
[TypeScript definitions for OpenUI5](https://www.npmjs.com/package/@types/openui5)
116-
117152
[Working with Controls](https://sdk.openui5.org/topic/91f0a22d6f4d1014b6dd926db0e91070.html "Controls are used to define the appearance and behavior of screen areas.")
118153

119154
[API Reference: `sap.m.Text`](https://sdk.openui5.orgapi/sap.m.Text)
@@ -125,3 +160,15 @@ ui5 add sap.m
125160
[API Reference: `sap.ui.core.Element`](https://sdk.openui5.orgapi/sap.ui.core.Element)
126161

127162
[API Reference: `sap.ui.base.ManagedObject`](https://sdk.openui5.orgapi/sap.ui.base.ManagedObject)
163+
164+
<details class="ts-only">
165+
166+
[TypeScript definitions for OpenUI5](https://www.npmjs.com/package/@types/openui5)
167+
168+
</details>
169+
170+
<details class="js-only">
171+
172+
[Best Practices for Loading Modules](https://sdk.openui5.org/topic/00737d6c1b864dc3ab72ef56611491c4 "This section provides best practices for OpenUI5 module loading patterns.")
173+
174+
</details>

‎steps/04/README.md‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,23 @@ When working with OpenUI5, we recommend the use of XML views, as this produces t
1616

1717
You can access the live preview by clicking on this link: [🔗 Live Preview of Step 4](https://sap-samples.github.io/ui5-typescript-walkthrough/build/04/index-cdn.html).
1818

19-
Download solution for step 4 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04-js.zip).
20-
2119
***
2220

2321
### Coding
2422

23+
<details class="ts-only">
24+
25+
You can download the solution for this step here: [📥 Download step 4](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04.zip).
26+
27+
</details>
28+
29+
<details class="js-only">
30+
31+
You can download the solution for this step here: [📥 Download step 4](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04-js.zip).
32+
33+
</details>
34+
35+
2536
### webapp/view/App.view.xml \(New\)
2637

2738
We create a new folder called `view` inside the `webapp` folder. This folder will hold all our XML view files. Inside the `view` folder, we create a new file called `App.view.xml`. In OpenUI5, the root node of an XML view is the `<mvc:View>` tag. To use this tag, we need to declare the XML namespace `mvc`, which corresponds to the `sap.ui.core.mvc` namespace. This namespace provides classes for creating and working with views and other Model-View-Controller \(MVC\) assets. Additionally, we declare the default XML namespace to the `sap.m` namespace. This namespace contains the majority of OpenUI5's UI assets, including the `Text` control that we want to use with our view.
@@ -46,9 +57,9 @@ We have created an XML view that displays a text control with the text "Hello Wo
4657
4758
***
4859

49-
### webapp/index.ts
60+
### webapp/index.?s
5061

51-
As a next step, we are going to replace the `sap/m/Text` control in our `index.ts` file with the app view that we've just created. To do this, we utilize the `XMLView.create` function, which is a part of the `sap/ui/core/mvc/View` module. This function needs a `viewName` property, which indicates the resource that needs to be loaded. The `viewName` is a combination of the namespace defined in the bootstrap and the path to the app view, but without the ".view.xml" extension. In addition, we set the `id` property to "app". Providing a stable ID is beneficial as it offers an easy and consistent way to identify and refer to specific views and elements in your code, thus helping to keep your code organized.
62+
As a next step, we are going to replace the `sap/m/Text` control in our `index.?s` file with the app view that we've just created. To do this, we utilize the `XMLView.create` function, which is a part of the `sap/ui/core/mvc/View` module. This function needs a `viewName` property, which indicates the resource that needs to be loaded. The `viewName` is a combination of the namespace defined in the bootstrap and the path to the app view, but without the ".view.xml" extension. In addition, we set the `id` property to "app". Providing a stable ID is beneficial as it offers an easy and consistent way to identify and refer to specific views and elements in your code, thus helping to keep your code organized.
5263

5364
```ts
5465
import XMLView from "sap/ui/core/mvc/XMLView";
@@ -61,6 +72,21 @@ XMLView.create({
6172
});
6273

6374
```
75+
76+
```js
77+
sap.ui.define(["sap/ui/core/mvc/XMLView"], function (XMLView) {
78+
"use strict";
79+
80+
XMLView.create({
81+
viewName: "ui5.walkthrough.view.App",
82+
id: "app"
83+
}).then(function (view) {
84+
view.placeAt("content");
85+
});
86+
});
87+
88+
```
89+
6490
We have now embed our app view to the body of the HTML document.
6591

6692
> 💡 **Tip:** <br>

0 commit comments

Comments
 (0)