Skip to content

Commit 72be369

Browse files
committed
Add hints that help avoiding issues
1 parent b4618e7 commit 72be369

File tree

3 files changed

+11
-2
lines changed

3 files changed

+11
-2
lines changed

exercises/ex1/README.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,11 @@ After answering all questions (just press `Enter` to confirm the defaults), Yeom
3636
3737
## Exercise 1.2 - Open Your Application
3838
39-
Switch into new folder `com.myorg.myapp` and open the editor of your choice (e.g. [Visual Studio Code](https://code.visualstudio.com/)). In the project root of the UI5 TypeScript application you will find the `package.json` and `ui5.yaml` which indicate that this is a UI5 application project. Compared to the classic UI5 application projects, the characteristic of the UI5 TypeScript application project is that the sources can be found in the `src` folder instead of the `webapp` folder. Instead of a `Component.js` you will find a `Component.ts` next to the manifest:
39+
Switch into new folder `com.myorg.myapp` and open the editor of your choice (e.g. [Visual Studio Code](https://code.visualstudio.com/)).
40+
41+
> **REMARK**: make sure to open the folder `com.myorg.myapp` in the editor, not the folder above! Otherwise there may be errors indicating that `tsconfig.json` was not found!
42+
43+
In the project root of the UI5 TypeScript application you will find the `package.json` and `ui5.yaml` which indicate that this is a UI5 application project. Compared to the classic UI5 application projects, the characteristic of the UI5 TypeScript application project is that the sources can be found in the `src` folder instead of the `webapp` folder. Instead of a `Component.js` you will find a `Component.ts` next to the manifest:
4044
4145
```sh
4246
project-root

exercises/ex2/README.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ After completing this section, you will have a basic understanding of how UI5 ap
4545
4646
After completing this step, the data will be loaded. This is the first step where you actually write code. It will hence provide another glimpse of the benefits TypeScript provides.
4747
48+
> **REMARK**: whenever you completed a step in this tutorial and the result does not show up in the browser as expected, make sure you saved all changes! This sounds trivial, but is actually the most frequent cause for issues.
49+
4850
1. In the file `src/Component.ts`, find the `public init() : void {...` method and insert the following lines after the `super.init();` call. To experience how code completion works and makes development more efficient, we recommend that you type this block of code manually as described below and keep an eye on the suggestions provided by your IDE!
4951
5052
```js
@@ -172,8 +174,9 @@ After completing these steps, the main view will display a grid list of states i
172174
"sap.f": {},
173175
```
174176
177+
5. Even if you have `npm start` still active, which means the UI5 tools run in watch mode, reloading the browser on every code change, these changes to the UI5 project configuration (adding the sap.f library) require a full restart. Hence please stop the `npm start` process in case it is still running and launch it again.
175178
176-
The app now will display a grid list with the states of Germany (use `npm start` again if you stopped it).
179+
The app now will display a grid list with the states of Germany.
177180
178181
<img src="images/states.png" width="810">
179182

exercises/ex7/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ After completing these steps you will have created a custom Control (which will
1010

1111
1. Inside `src`, next to the `controller` directory, create a new directory named `control`.
1212

13+
> **REMARK**: make sure to create this directory in the correct location, as direct child of `src`! Otherwise the second page of the app will no longer show up and the browser console will display a failed attempt to load `com/myorg/myapp/control/LineChart.js`!
14+
1315
2. Inside this new `control` directory, create a new file named `ChartRecord.ts` with the following content.<br>
1416
It implements an element with the properties `label` and `value`.
1517
> **Remark:** `sap.ui.core.Element` is a base class of `sap.ui.core.Control` and is typically used for data binding when there is no need to produce HTML (because this can be done by the parent control). Hence, in most cases, elements do not have a renderer, and that's the main difference to a regular control.

0 commit comments

Comments
 (0)