Skip to content

Commit f56c2aa

Browse files
petermuessigpetermuessig
committed
fix(tutorials): resolve rendering and consistency issues across tutorials
- build: copy each tutorial's top-level assets/ folder into dist/<tutorial>/assets/ so root README images (navigation, databinding) no longer 404 on GitHub Pages - navigation/odatav4/databinding: remove backticks from file-path headings that rendered as gray code spans, and shift the heading hierarchy down one level to match the walkthrough/quickstart outline (fence-aware; i18n code comments untouched) - walkthrough: replace project-structure screenshots in steps 09/26/27/28 with fenced ASCII folder trees, and delete the now-unused screenshot PNGs - quickstart: fix steps 02/03 headings to use the .ts/.js dual notation
1 parent 06abd78 commit f56c2aa

54 files changed

Lines changed: 479 additions & 348 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/databinding/steps/01/README.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11

2-
# Step 1: No Data Binding
2+
## Step 1: No Data Binding
33

44
In this step, we create a basic application and simply place some text on the screen using a standard `sap.m.Text` control. The text in this control is a hard-coded part of the control's definition; therefore, this is not an example of data binding!
55

6-
## Preview
6+
### Preview
77

88
![The browser shows the text "Hi, my name is Harry Hawk"](assets/Tutorial_Data_Binding_Step_1_6d391d5.png "The browser shows the text &quot;Hi, my name is Harry Hawk&quot;")
99

1010
You can view this step live: [🔗 Live Preview of Step 1](https://ui5.github.io/tutorials/databinding/build/01/index-cdn.html).
1111

12-
## Setup
12+
### Setup
1313

1414
Open a terminal and install UI5 Tooling globally on your machine by executing the following command:
1515

1616
```sh
1717
npm install --global @ui5/cli
1818
```
1919

20-
## Coding
20+
### Coding
2121

2222
You can download the solution for this step here: <span class="ts-only">[📥 Download step 1](https://ui5.github.io/tutorials/databinding/databinding-step-01.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 1](https://ui5.github.io/tutorials/databinding/databinding-step-01-js.zip)<span class="lang-suffix"> (JS)</span></span>.
2323

24-
### Folder structure for this step
24+
#### Folder structure for this step
2525

2626
```text
2727
webapp/
@@ -36,7 +36,7 @@ webapp/
3636

3737
2. Create a new file called `package.json` which will enable you to execute commands and consume packages from the [npm registry](https://www.npmjs.com/) via the npm command line interface. Enter the following content:
3838

39-
## package.json \(New\)
39+
### package.json \(New\)
4040

4141
```json
4242
{
@@ -55,7 +55,7 @@ webapp/
5555

5656
4. Create a new HTML file named `index.html` in your webapp folder and enter the following content:
5757

58-
## webapp/index.html \(New\)
58+
### webapp/index.html \(New\)
5959

6060
```html
6161
<!DOCTYPE html>
@@ -84,7 +84,7 @@ webapp/
8484

8585
5. Create a new file named `manifest.json` in the webapp folder; it's also known as the "app descriptor". All application-specific configuration options which we'll introduce in this tutorial will be added to this file. Enter the following content:
8686

87-
## webapp/manifest.json \(New\)
87+
### webapp/manifest.json \(New\)
8888

8989
```json
9090
{
@@ -129,7 +129,7 @@ webapp/
129129

130130
6. Create a new file named `Component.ts/.js` in the webapp folder. Enter the following content:
131131

132-
## `webapp/Component.ts/.js` \(New\)
132+
### webapp/Component.ts/.js \(New\)
133133

134134
```ts
135135
// webapp/Component.ts
@@ -162,7 +162,7 @@ sap.ui.define(["sap/ui/core/UIComponent"], function (UIComponent) {
162162

163163
7. Create a new folder named `view` in the webapp folder. Then, create a new file `App.view.xml` within the `view` folder. We start by placing the `sap.m.Text` control into the XML view. Since the value of the control's text property is hard-coded, it doesn't relate to any data that might exist within a model object. Therefore, data binding is **not** used here.
164164

165-
## webapp/view/App.view.xml \(New\)
165+
### webapp/view/App.view.xml \(New\)
166166

167167
```xml
168168
<mvc:View
@@ -182,7 +182,7 @@ sap.ui.define(["sap/ui/core/UIComponent"], function (UIComponent) {
182182

183183
12. Configure the tooling extensions we installed from npm in our UI5 Tooling setup, so we can use them in our project:
184184

185-
## ui5.yaml
185+
### ui5.yaml
186186

187187
```yaml
188188
specVersion: "4.0"

‎packages/databinding/steps/02/README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
# Step 2: Creating a Model
2+
## Step 2: Creating a Model
33

44
In this step, we create a model. It serves as a container for the data your application operates on.
55

@@ -24,17 +24,17 @@ An OData model, however, is a server-side model. This means that whenever an app
2424

2525
In this tutorial, we focus on JSON models since they're the simplest ones to work with.
2626

27-
## Preview
27+
### Preview
2828

2929
![The browser shows the text "Hi, my name is Harry Hawk"](assets/Tutorial_Data_Binding_Step_1_6d391d5.png "The browser shows the text &quot;Hi, my name is Harry Hawk&quot;")
3030

3131
You can view this step live: [🔗 Live Preview of Step 2](https://ui5.github.io/tutorials/databinding/build/02/index-cdn.html).
3232

33-
## Coding
33+
### Coding
3434

3535
You can download the solution for this step here: <span class="ts-only">[📥 Download step 2](https://ui5.github.io/tutorials/databinding/databinding-step-02.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 2](https://ui5.github.io/tutorials/databinding/databinding-step-02-js.zip)<span class="lang-suffix"> (JS)</span></span>.
3636

37-
### Folder structure for this step
37+
#### Folder structure for this step
3838

3939
```text
4040
webapp/
@@ -49,7 +49,7 @@ webapp/
4949

5050
1. Create a new folder named `model` in the `webapp` folder. In this folder, create a file called `data.json` with the following content:
5151

52-
## webapp/model/data.json \(New\)
52+
### webapp/model/data.json \(New\)
5353

5454
```json
5555
{
@@ -59,7 +59,7 @@ webapp/
5959

6060
2. Create a new JSON model in the `manifest.json` and set its path via a URI. This binds the model object to the app component and makes it globally available to all controls used within the application.
6161

62-
## webapp/manifest.json
62+
### webapp/manifest.json
6363

6464
```json
6565
{

‎packages/databinding/steps/03/README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11

2-
# Step 3: Create Property Binding
2+
## Step 3: Create Property Binding
33

44
Although there is no visible difference, the text on the screen is now derived from model data.
55

6-
## Preview
6+
### Preview
77

88
![The browser shows the text "Hi, my name is Harry Hawk"](assets/Tutorial_Data_Binding_Step_1_6d391d5.png "The browser shows the text &quot;Hi, my name is Harry Hawk&quot;")
99

1010
You can view this step live: [🔗 Live Preview of Step 3](https://ui5.github.io/tutorials/databinding/build/03/index-cdn.html).
1111

12-
## Coding
12+
### Coding
1313

1414
You can download the solution for this step here: <span class="ts-only">[📥 Download step 3](https://ui5.github.io/tutorials/databinding/databinding-step-03.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 3](https://ui5.github.io/tutorials/databinding/databinding-step-03-js.zip)<span class="lang-suffix"> (JS)</span></span>.
1515

16-
### Folder structure for this step
16+
#### Folder structure for this step
1717

1818
```text
1919
webapp/
@@ -28,7 +28,7 @@ webapp/
2828

2929
Assign the `text` property of the `sap.m.Text` control to the value `{/greetingText}`. The curly brackets enclosing a binding path \(binding syntax\) are automatically interpreted as a binding. These binding instances are called property bindings. In this scenario, the control's `text` property is bound to the `greetingText` property at the root of the default model. The slash \(`/`\) at the beginning of the binding path signifies an absolute binding path.
3030

31-
## webapp/view/App.view.xml
31+
### webapp/view/App.view.xml
3232

3333
```xml
3434
<mvc:View

‎packages/databinding/steps/04/README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11

2-
# Step 4: Two-Way Data Binding
2+
## Step 4: Two-Way Data Binding
33

44
In the examples we've looked at so far, we've displayed the value of a model property using a read-only field. We'll now change the user interface to display first and last name fields using `sap.m.Input` fields. We're also adding a check box control to enable or disable both input fields. This setup illustrates a feature known as "two-way data binding". As the view now contains more controls, we're also moving the view definition into an XML file.
55

6-
## Preview
6+
### Preview
77

8-
### Two input fields and a checkbox to enable or disable them
8+
#### Two input fields and a checkbox to enable or disable them
99

1010
![Two input fields and a checkbox to enable or disable them](assets/Tutorial_Data_Binding_Step_4_61d68f1.png "Two input fields and a checkbox to enable or disable them")
1111

1212
You can view this step live: [🔗 Live Preview of Step 4](https://ui5.github.io/tutorials/databinding/build/04/index-cdn.html).
1313

14-
## Coding
14+
### Coding
1515

1616
You can download the solution for this step here: <span class="ts-only">[📥 Download step 4](https://ui5.github.io/tutorials/databinding/databinding-step-04.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 4](https://ui5.github.io/tutorials/databinding/databinding-step-04-js.zip)<span class="lang-suffix"> (JS)</span></span>.
1717

18-
### Folder structure for this step
18+
#### Folder structure for this step
1919

2020
```text
2121
webapp/
@@ -30,7 +30,7 @@ webapp/
3030

3131
Replace the content of the `App.view.xml` file with the following content:
3232

33-
## webapp/view/App.view.xml
33+
### webapp/view/App.view.xml
3434

3535
```xml
3636
<mvc:View
@@ -75,7 +75,7 @@ Replace the content of the `App.view.xml` file with the following content:
7575
7676
Replace the content of the `data.json` file in the `model` folder with the following content:
7777

78-
## webapp/model/data.json
78+
### webapp/model/data.json
7979

8080
```json
8181
{

‎packages/databinding/steps/05/README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11

2-
# Step 5: One-Way Data Binding
2+
## Step 5: One-Way Data Binding
33

44
Unlike the two-way binding behavior we've seen, one-way data binding is also possible. In this case, data travels in one direction only: from the model, through the binding instance, to the consumer \(usually the property of a control\), but never in the other direction. Let's modify the previous example to use one-way data binding. This shows how you can switch off the flow of data from the user interface back to the model if needed.
55

6-
## Preview
6+
### Preview
77

8-
### Two input fields and a checkbox
8+
#### Two input fields and a checkbox
99

1010
![Two input fields and a checkbox](assets/Tutorial_Data_Binding_Step_4_61d68f1.png "Two input fields and a checkbox")
1111

1212
You can view this step live: [🔗 Live Preview of Step 5](https://ui5.github.io/tutorials/databinding/build/05/index-cdn.html).
1313

14-
## Coding
14+
### Coding
1515

1616
You can download the solution for this step here: <span class="ts-only">[📥 Download step 5](https://ui5.github.io/tutorials/databinding/databinding-step-05.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 5](https://ui5.github.io/tutorials/databinding/databinding-step-05-js.zip)<span class="lang-suffix"> (JS)</span></span>.
1717

18-
### Folder structure for this step
18+
#### Folder structure for this step
1919

2020
```text
2121
webapp/
@@ -30,7 +30,7 @@ webapp/
3030

3131
Insert the highlighted code into the `Component.ts/.js` file. The `init` function calls the init function of its parent, retrieves the default model instance bound to the component, and sets the default binding mode to one-way data binding.
3232

33-
## `webapp/Component.ts/.js`
33+
### webapp/Component.ts/.js
3434

3535
```ts
3636
// webapp/Component.ts

‎packages/databinding/steps/06/README.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11

2-
# Step 6: Resource Models
2+
## Step 6: Resource Models
33

44
Business applications often require language-specific \(translatable\) text used as labels and descriptions on the user interface.
55

66
The example we used at the start of this tutorial was quite simplistic as we stored language-specific text directly in a JSON model object. Generally speaking, unless language-specific text comes directly from a back-end system, it's not considered good programming practice to put translatable texts directly into a model. So, let's fix this by placing all translatable texts \(such as field labels\) into a resource bundle.
77

8-
## Preview
8+
### Preview
99

10-
### The texts are now derived from a resource model \(No visual change to last step\)
10+
#### The texts are now derived from a resource model \(No visual change to last step\)
1111

1212
![The texts are now derived from a resource model (No visual change to last step)](assets/Tutorial_Data_Binding_Step_4_61d68f1.png "The texts are now derived from a resource model (No visual change to last step)")
1313

1414
You can view this step live: [🔗 Live Preview of Step 6](https://ui5.github.io/tutorials/databinding/build/06/index-cdn.html).
1515

16-
## Coding
16+
### Coding
1717

1818
You can download the solution for this step here: <span class="ts-only">[📥 Download step 6](https://ui5.github.io/tutorials/databinding/databinding-step-06.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 6](https://ui5.github.io/tutorials/databinding/databinding-step-06-js.zip)<span class="lang-suffix"> (JS)</span></span>.
1919

20-
### Folder structure for this step
20+
#### Folder structure for this step
2121

2222
```text
2323
webapp/
@@ -36,7 +36,7 @@ Create a new entry in the `manifest.json` file under the `models` entry as shown
3636

3737
Also add the `i18n` property to the `sap.app` section and modify the `title` and `description` property to use the corresponding texts from the `i18n.properties` as shown below.
3838

39-
## webapp/manifest.json
39+
### webapp/manifest.json
4040

4141
```json
4242
...
@@ -89,7 +89,7 @@ Also add the `i18n` property to the `sap.app` section and modify the `title` and
8989
9090
Update the `i18n.properties` and add the code shown below.
9191

92-
## webapp/i18n/i18n.properties \(New\)
92+
### webapp/i18n/i18n.properties \(New\)
9393

9494
```properties
9595
# App Descriptor
@@ -111,7 +111,7 @@ Language-specific text stored in resource models obeys the Java convention for i
111111

112112
Modify the data binding for the panel header and the labels in `App.view.xml` to include the model name. Note that a "greater than" character separates the model name and the property name. Also, i18n property names **must not** start with a slash character.
113113

114-
## webapp/view/App.view.xml
114+
### webapp/view/App.view.xml
115115

116116
```xml
117117
<mvc:View
@@ -152,7 +152,7 @@ Modify the data binding for the panel header and the labels in `App.view.xml` to
152152

153153
Remove the line `panelHeaderText : "Data Binding Basics"` from the model data in the `data.json` file. This text has now been moved to the resource model.
154154

155-
## webapp/model/data.json
155+
### webapp/model/data.json
156156

157157
```json
158158
{
@@ -164,7 +164,7 @@ Remove the line `panelHeaderText : "Data Binding Basics"` from the model data in
164164

165165
Remove the `init` function and the import of `sap/ui/model/BindingMode` from `Component.ts/.js` as we do not want to set the one-way binding mode anymore.
166166

167-
## `webapp/Component.ts/.js`
167+
### webapp/Component.ts/.js
168168

169169
```ts
170170
// webapp/Component.ts

‎packages/databinding/steps/07/README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11

2-
# Step 7: \(Optional\) Resource Bundles and Multiple Languages
2+
## Step 7: \(Optional\) Resource Bundles and Multiple Languages
33

44
Resource bundles exist to enable an app to run in multiple languages without the need to change any code. To demonstrate this feature, let's create a German version of the app – in fact, all we need to do is create a German version of the resource bundle file. In our code, we activate the German locale for the ResourceModel.
55

6-
## Preview
6+
### Preview
77

8-
### The texts are now adapted for the German locale
8+
#### The texts are now adapted for the German locale
99

1010
![The texts are now adapted for the German locale](assets/Tutorial_Data_Binding_Step_7_d96cdf9.png "The texts are now adapted for the German locale")
1111

1212
You can view this step live: [🔗 Live Preview of Step 7](https://ui5.github.io/tutorials/databinding/build/07/index-cdn.html).
1313

14-
## Coding
14+
### Coding
1515

1616
You can download the solution for this step here: <span class="ts-only">[📥 Download step 7](https://ui5.github.io/tutorials/databinding/databinding-step-07.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 7](https://ui5.github.io/tutorials/databinding/databinding-step-07-js.zip)<span class="lang-suffix"> (JS)</span></span>.
1717

18-
### Folder structure for this step
18+
#### Folder structure for this step
1919

2020
```text
2121
webapp/
@@ -31,7 +31,7 @@ webapp/
3131
└── manifest.json
3232
```
3333

34-
## webapp/i18n/i18n\_de.properties \(New\)
34+
### webapp/i18n/i18n\_de.properties \(New\)
3535

3636
In the `i18n` folder, duplicate the `i18n.properties` file and rename its copy to `i18n`**`_de`**`.properties`. Replace the English text with the German text provided below. The suffix `de` represents the locale for the German language. Since the `de` locale is already set in the `supportedLocales` configuration of the `manifest.json`, it will be taken into account.
3737

0 commit comments

Comments
 (0)