Skip to content

Update bootstrap configuration option #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 10, 2024
Merged

Update bootstrap configuration option #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a8bd072
Update bootstrap configuration option naming
margopolo Oct 8, 2024
527aa17
Merge branch 'main' into kebab-case-notation-update
petermuessig Oct 10, 2024
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
12 changes: 6 additions & 6 deletions steps/02/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,13 +125,13 @@ We initialize the core modules with the following configuration options:

- The OpenUI5 controls support different themes. With setting the `data-sap-ui-theme` attribute of the `<script>` tag to "sap_horizon" we specify the Horizon theme as our default theme.

- To make use of the most recent functionality of OpenUI5 we specify the `data-sap-ui-compatVersion` attribute as `edge`.
- To make use of the most recent functionality of OpenUI5 we specify the `data-sap-ui-compat-version` attribute as `edge`.

- We configure the bootstrapping process to run asynchronously by setting the `data-sap-ui-async` attribute to "true". This means that the OpenUI5 resources can be loaded simultaneously in the background for performance reasons.

- The `data-sap-ui-onInit` attribute is used in OpenUI5 to specify the name of a module that should be executed when the framework is fully loaded and initialized. This approach provides a way to avoid directly including executable JavaScript code in the HTML file, which improves the security of our application. To specify the name of the module, you need to provide the module name as the value of `the data-sap-ui-onInit` attribute. The module name should be in the format of a module path, which is a dot-separated string that represents the location of the module within the application's folder structure. When specifying the path to a module within the current project, it's important to include the namespace (explained below) and omit the file extension. We specify the `index.ts` script to the `data-sap-ui-onInit` attribute.
- The `data-sap-ui-on-init` attribute is used in OpenUI5 to specify the name of a module that should be executed when the framework is fully loaded and initialized. This approach provides a way to avoid directly including executable JavaScript code in the HTML file, which improves the security of our application. To specify the name of the module, you need to provide the module name as the value of the `data-sap-ui-on-init` attribute. The module name should be in the format of a module path, which is a dot-separated string that represents the location of the module within the application's folder structure. When specifying the path to a module within the current project, it's important to include the namespace (explained below) and omit the file extension. We specify the `index.ts` script to the `data-sap-ui-on-init` attribute.

- The `data-sap-ui-resourceroots` attribute lets you map a namespace to a specific path. We define the `ui5.walkthrough` namespace and map it relative to the location of `index.html`. This way, we tell OpenUI5 core that resources in the `ui5.walkthrough` namespace are located in the same folder as `index.html`.
- The `data-sap-ui-resource-roots` attribute lets you map a namespace to a specific path. We define the `ui5.walkthrough` namespace and map it relative to the location of `index.html`. This way, we tell OpenUI5 core that resources in the `ui5.walkthrough` namespace are located in the same folder as `index.html`.

```html
<!DOCTYPE html>
Expand All @@ -143,10 +143,10 @@ We initialize the core modules with the following configuration options:
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/02/webapp/index-cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="https://sdk.openui5.org/1.129.0/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/02/webapp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
10 changes: 5 additions & 5 deletions steps/03/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ All controls of OpenUI5 have a fixed set of properties, aggregations, and associ

### webapp/index.html

We replace the `<div>` tag in our `webapp/index.html` file with a `<body>` tag and assign it the ID `content`. The body tag of the HTML document thus becomes the target node for the text control we defined in the `index.ts` script.
We replace the `<div>` tag in our `webapp/index.html` file with a `<body>` tag and assign it the ID `content`. The body tag of the HTML document thus becomes the target node for the text control we defined in the `index` script.

We also add the `sapUiBody` class, which provides additional theme-dependent styles.

Expand All @@ -72,10 +72,10 @@ We also add the `sapUiBody` class, which provides additional theme-dependent sty
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand All @@ -85,7 +85,7 @@ We also add the `sapUiBody` class, which provides additional theme-dependent sty
</html>
```

In the example above, the callback of the `onInit` event is where we now instantiate an OpenUI5 text control.
In the example above, the callback of the `on-init` event is where we now instantiate an OpenUI5 text control.

***

Expand Down
6 changes: 3 additions & 3 deletions steps/03/webapp/index-cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="https://sdk.openui5.org/1.129.0/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/03/webapp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/04/webapp/index-cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="https://sdk.openui5.org/1.129.0/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/04/webapp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/05/webapp/index-cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="https://sdk.openui5.org/1.129.0/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/05/webapp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/06/webapp/index-cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="https://sdk.openui5.org/1.129.0/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/06/webapp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/07/webapp/index-cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="https://sdk.openui5.org/1.129.0/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/07/webapp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/08/webapp/index-cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="https://sdk.openui5.org/1.129.0/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/08/webapp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/09/webapp/index-cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="https://sdk.openui5.org/1.129.0/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/09/webapp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:ui5/walkthrough/index"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
8 changes: 4 additions & 4 deletions steps/10/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export default class Component extends UIComponent {

Let's explore how we can create a component in a simple and straightforward way directly in the HTML markup of our `index.html` file. To do this, we need to make a few changes in our HTML document.

First, we need to remove the reference to the `ui5/walkthrough/index` module from the `data-sap-ui-onInit` attribute. Instead, we set it to the `sap/ui/core/ComponentSupport` module. Next, we add a `div` tag to the body of our HTML file. Inside this `div` tag, we add a special data attribute called `data-sap-ui-component`. This attribute is important because the `sap/ui/core/ComponentSupport` module scans the HTML elements with this attribute. Any element marked with this attribute will be considered a container element into which a `sap/ui/core/ComponentContainer` is inserted. We can also use additional data attributes to define the constructor arguments for the `ComponentContainer` instance. We transfer the arguments used to configure the `CompontentContainer `instance in the `index.ts` file to data attributes on our `div` tag.
First, we need to remove the reference to the `ui5/walkthrough/index` module from the `data-sap-ui-on-init` attribute. Instead, we set it to the `sap/ui/core/ComponentSupport` module. Next, we add a `div` tag to the body of our HTML file. Inside this `div` tag, we add a special data attribute called `data-sap-ui-component`. This attribute is important because the `sap/ui/core/ComponentSupport` module scans the HTML elements with this attribute. Any element marked with this attribute will be considered a container element into which a `sap/ui/core/ComponentContainer` is inserted. We can also use additional data attributes to define the constructor arguments for the `ComponentContainer` instance. We transfer the arguments used to configure the `CompontentContainer `instance in the `index.ts` file to data attributes on our `div` tag.

It's worth noting that the `ComponentSupport` module enforces asynchronous loading of the respective component, so we don't need to set the `async` attribute to "true" in this case. It also sets the `autoPrefixId` property to "true" by default, so we don't need to set this attribute here either.

Expand All @@ -201,10 +201,10 @@ It's worth noting that the `ComponentSupport` module enforces asynchronous loadi
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/10/webapp/index-cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="https://sdk.openui5.org/1.129.0/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/10/webapp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/11/webapp/index-cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="https://sdk.openui5.org/1.129.0/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/11/webapp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/12/webapp/index-cdn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="https://sdk.openui5.org/1.129.0/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
6 changes: 3 additions & 3 deletions steps/12/webapp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatVersion="edge"
data-sap-ui-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
data-sap-ui-resourceroots='{
data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
Expand Down
Loading