OpenUI5 Documentation Update 09.09.2023

SAP · Sep 9, 2023 · a8133f2 · a8133f2
1 parent ce4e46f
commit a8133f2
Show file tree

Hide file tree

Showing 27 changed files with 484 additions and 301 deletions.
diff --git a/docs/Get_Started_Setup_Tutorials_and_Demo_Apps_8b49fc1.md b/docs/Get_Started_Setup_Tutorials_and_Demo_Apps_8b49fc1.md
@@ -58,7 +58,7 @@ To download the code from the Demo Kit, follow these steps:
 
 3.  Extract the project folder to a desired location on your local machine.
 
-4.  **If you use UI5 Tooling \(recommended\):** At your chosen location, open a new shell and execute `npm install`. After all dependencies have been installed, enter `npm start` to start the development server.
+4.  **If you use UI5 Tooling \(recommended\):** At your chosen location, open a new shell and execute `npm install`. After all dependencies have been installed, enter `npm start` to start the development server. \(**Note:** if they're not already present, you may have to create and adjust some project configuration files first; see the [Walkthrough Tutorial](Walkthrough_Tutorial_3da5f4b.md) for an example.\)
 
 5.  Test your project setup by opening one of its HTML pages in your development environment and making sure that the app displays the features exactly as shown in the preview of the step.
 

diff --git a/docs/More_About_Controls_3ec6808.md b/docs/More_About_Controls_3ec6808.md
@@ -55,7 +55,7 @@ This library contains the `CodeEditor` control.
 		and all its components, base classes for controls, components and the Model-View-Controller
 		(MVC) classes.")**  
 This library contains the jQuery plugins \(`jQuery.sap.*`\), the core and all its components, base classes for controls, components and the Model-View-Controller \(MVC\) classes.
--   **[sap.ui.mdc \(experimental\)](sap_ui_mdc_experimental_1dd2aa9.md "The sap.ui.mdc  library contains composite, metadata-driven controls
+-   **[sap.ui.mdc \(experimental\)](sap_ui_mdc_experimental_1dd2aa9.md "The sap.ui.mdc library contains composite, metadata-driven controls
 		that assemble UI elements with predefined user experience and various functionalities. The
 		controls can be used as a basis for scalable application development and can be implemented
 		for use with any OpenUI5 model

diff --git a/docs/Step_10_Descriptor_for_Applications_8f93bf2.md b/docs/Step_10_Descriptor_for_Applications_8f93bf2.md
@@ -31,22 +31,19 @@ The SAP Fiori launchpad acts as an application container and instantiates the ap
 
 You can view and download all files at [Walkthrough - Step 10](https://sdk.openui5.org/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrough.10).
 
-> ### Caution:  
-> Automatic model instantiation is only available as of OpenUI5 version 1.30. If you are using an older version, you can manually instantiate the resource bundle and other models of the app in the `init` method of the `Component.js` file as we did in [Step 9: Component Configuration](Step_9_Component_Configuration_4cfa608.md).
-
 ***
 
 ### webapp/manifest.json \(New\)
 
-```js
+```
 {
-  "_version": "1.12.0",
+  "_version": "1.58.0",
   "sap.app": {
-	"id": "sap.ui.demo.walkthrough",
-	"type": "application",
+	"id": "ui5.walkthrough",
 	"i18n": "i18n/i18n.properties",
 	"title": "{{appTitle}}",
 	"description": "{{appDescription}}",
+	"type": "application",
 	"applicationVersion": {
 	  "version": "1.0.0"
 	}
@@ -60,13 +57,8 @@ You can view and download all files at [Walkthrough - Step 10](https://sdk.openu
 	}
   },
   "sap.ui5": {
-	"rootView": {
-		"viewName": "sap.ui.demo.walkthrough.view.App",
-		"type": "XML",
-		"id": "app"
-	},
 	"dependencies": {
-	  "minUI5Version": "1.93",
+	  "minUI5Version": "1.108.0",
 	  "libs": {
 		"sap.ui.core": {},
 		"sap.m": {}
@@ -76,11 +68,16 @@ You can view and download all files at [Walkthrough - Step 10](https://sdk.openu
 	  "i18n": {
 		"type": "sap.ui.model.resource.ResourceModel",
 		"settings": {
-		  "bundleName": "sap.ui.demo.walkthrough.i18n.i18n",
+		  "bundleName": "ui5.walkthrough.i18n.i18n",
 		  "supportedLocales": [""],
 		  "fallbackLocale": ""
 		}
 	  }
+	},
+	"rootView": {
+		"viewName": "ui5.walkthrough.view.App",
+		"type": "XML",
+		"id": "app"
 	}
   }
 }
@@ -95,19 +92,19 @@ The content of the `manifest.json` file is a configuration object in JSON format
 
     The `sap.app` namespace contains the following application-specific attributes:
 
-    -   `id` \(mandatory\): The namespace of our application component
+    -   `id` \(mandatory\): The namespace of our application component.
 
         The ID must not exceed 70 characters. It must be unique and must correspond to the component ID/namespace.
 
-    -   `type`: Defines what we want to configure, here: an application
+    -   `type`: Defines what we want to configure; here: an application.
 
-    -   `i18n`: Defines the path to the resource bundle file
+    -   `i18n`: Defines the path to the resource bundle file. The `supportedLocales` and `fallbackLocale` properties are set to empty strings, as our demo app uses only one `i18n.properties` file for simplicity and we'd like to prevent the browser from trying to load additional `i18n_*.properties` files based on your browser settings and your locale.
 
-    -   `title`: Title of the application in handlebars syntax referenced from the app's resource bundle
+    -   `title`: Title of the application in handlebars syntax referenced from the app's resource bundle.
 
-    -   `description`: Short description text what the application does in handlebars syntax referenced from the app's resource bundle
+    -   `description`: Short description text what the application does in handlebars syntax referenced from the app's resource bundle.
 
-    -   `applicationVersion`: The version of the application to be able to easily update the application later on
+    -   `applicationVersion`: The version of the application to be able to update the application easily later on.
 
 
 -   **`sap.ui`**
@@ -147,28 +144,28 @@ The content of the `manifest.json` file is a configuration object in JSON format
 <html>
 <head>
 	<meta charset="utf-8">
-	<title>SAPUI5 Walkthrough</title>
+	<title>UI5 Walkthrough</title>
 	<script
 		id="sap-ui-bootstrap"
-		src="https://sdk.openui5.org/resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_belize"
-		data-sap-ui-resourceroots='{
-			"sap.ui.demo.walkthrough": "./"
-		}'
-		data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
+		src="resources/sap-ui-core.js"
+		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compatVersion="edge"
 		data-sap-ui-async="true">
+		data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
+		data-sap-ui-resourceroots='{
+			"ui5.walkthrough": "./"
+		}'
 	</script>
 </head>
 <body class="sapUiBody" id="content">
-	<div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
+	<div data-sap-ui-component data-name="ui5.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
 </body>
 </html>
 ```
 
-Now we declare our component in the body of our `index.html`. In the bootstrapping script of our `index.html`, we enable the `ComponentSupport` module and remove the `sap.m` library. Then, we declare our component in the body via a `div` tag. This will instantiate the component when the `onInit` event is executed.
+Now we declare our component in the body of our `index.html`. In the bootstrapping script of our `index.html`, we enable the `ComponentSupport` module. Then, we declare our component in the body via a `div` tag. This will instantiate the component when the `onInit` event is executed.
 
-We will no longer need our `index.js` from now on, because the descriptor takes care of everything.
+We can delete our `index.js`, because the descriptor now takes care of everything.
 
 ***
 
@@ -195,23 +192,26 @@ In the resource bundle we simply add the texts for the app and add comments to s
 sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/model/json/JSONModel"
-], function (UIComponent, JSONModel) {
+], (UIComponent, JSONModel) => {
    "use strict";
-   return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
+
+   return UIComponent.extend("ui5.walkthrough.Component", {
       metadata : {
             interfaces: ["sap.ui.core.IAsyncContentCreation"],
             manifest: "json"
       },
-      init : function () {
+
+      init() {
          // call the init function of the parent
          UIComponent.prototype.init.apply(this, arguments);
+
          // set data model
-         var oData = {
+         const oData = {
             recipient : {
                name : "World"
             }
          };
-         var oModel = new JSONModel(oData);
+         const oModel = new JSONModel(oData);
          this.setModel(oModel);
       }
    });

diff --git a/docs/Step_11_Pages_and_Panels_3b9d9f8.md b/docs/Step_11_Pages_and_Panels_3b9d9f8.md
@@ -24,13 +24,21 @@ After all the work on the app structure it’s time to improve the look of our a
 
 ***
 
+<a name="loio3b9d9f84930d43df90ad0789d99bd4a3__section_dkx_kp2_syb"/>
+
 ### Coding
 
 You can view and download all files at [Walkthrough - Step 11](https://sdk.openui5.org/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrough.11).
 
+***
+
+<a name="loio3b9d9f84930d43df90ad0789d99bd4a3__section_ekx_kp2_syb"/>
+
+### webapp/view/App.view.xml
+
 ```xml
 <mvc:View
-   controllerName="sap.ui.demo.walkthrough.controller.App"
+   controllerName="ui5.walkthrough.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
   displayBlock="true">
@@ -41,10 +49,10 @@ You can view and download all files at [Walkthrough - Step 11](https://sdk.openu
                <Panel
                   headerText="{i18n>helloPanelTitle}">
                   <content>
-
                      <Button
                         text="{i18n>showHelloButtonText}"
                         press=".onShowHello"/>
+
                      <Input
                         value="{/recipient/name}"
                         description="Hello {/recipient/name}"
@@ -60,7 +68,7 @@ You can view and download all files at [Walkthrough - Step 11](https://sdk.openu
 
 ```
 
-We put both the input field and the button inside a containing control called `sap.m.Page`. The page provides an aggregation to `0..N` other controls called `content`. It also displays the title attribute in a header section on top of the content. The page itself is placed into the `pages` aggregation of another control called `sap.m.App` which does the following important things for us:
+We put both the input field and the button inside a containing control called `sap/m/Page`. The page provides an aggregation to `0..N` other controls called `content`. It also displays the title attribute in a header section on top of the content. The page itself is placed into the `pages` aggregation of another control called `sap/m/App` which does the following important things for us:
 
 -   It writes a bunch of properties into the header of the `index.html` that are necessary for proper display on mobile devices.
 

diff --git a/docs/Step_12_Shell_Control_as_Container_4df1d91.md b/docs/Step_12_Shell_Control_as_Container_4df1d91.md
@@ -24,28 +24,38 @@ Now we use a shell control as container for our app and use it as our new root e
 
 ***
 
+<a name="loio4df1d914e52d4b1aa0805eb01522537e__section_qsr_xp2_syb"/>
+
 ### Coding
 
 You can view and download all files at [Walkthrough - Step 12](https://sdk.openui5.org/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrough.12).
 
+***
+
+<a name="loio4df1d914e52d4b1aa0805eb01522537e__section_rsr_xp2_syb"/>
+
+### webapp/view/App.view.xml
+
 ```xml
 <mvc:View
-	controllerName="sap.ui.demo.walkthrough.controller.App"
+	controllerName="ui5.walkthrough.controller.App"
 	xmlns="sap.m"
 	xmlns:mvc="sap.ui.core.mvc"
 	displayBlock="true">
-	<Shell>
 
+	<Shell>
 		<App>
 			<pages>
 				<Page title="{i18n>homePageTitle}">
 					<content>
 						<Panel
 							headerText="{i18n>helloPanelTitle}">
 							<content>
+
 								<Button
 									text="{i18n>showHelloButtonText}"
 									press=".onShowHello"/>
+
 								<Input
 									value="{/recipient/name}"
 									description="Hello {/recipient/name}"

diff --git a/docs/Step_13_Margins_and_Paddings_17b87fb.md b/docs/Step_13_Margins_and_Paddings_17b87fb.md
@@ -26,16 +26,25 @@ Instead of manually adding CSS to the controls, we will use the standard classes
 
 ***
 
+<a name="loio17b87fbafb5a4474982760d2a3a73e69__section_wl1_jq2_syb"/>
+
 ### Coding
 
 You can view and download all files at [Walkthrough - Step 13](https://sdk.openui5.org/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrough.13).
 
+***
+
+<a name="loio17b87fbafb5a4474982760d2a3a73e69__section_xl1_jq2_syb"/>
+
+### webapp/view/App.view.xml
+
 ```xml
 <mvc:View
-	controllerName="sap.ui.demo.walkthrough.controller.App"
+	controllerName="ui5.walkthrough.controller.App"
 	xmlns="sap.m"
 	xmlns:mvc="sap.ui.core.mvc"
 	displayBlock="true">
+
 	<Shell>
 		<App>
 			<pages>
@@ -46,14 +55,17 @@ You can view and download all files at [Walkthrough - Step 13](https://sdk.openu
 							class="sapUiResponsiveMargin"
 							width="auto">
 							<content>
+
 								<Button
 									text="{i18n>showHelloButtonText}"
 									press=".onShowHello"
 									class="sapUiSmallMarginEnd"/>
+
 								<Input
 									value="{/recipient/name}"
 									valueLiveUpdate="true"
 									width="60%"/>
+
 								<Text
 									text="Hello {/recipient/name}"
 									class="sapUiSmallMargin"/>

diff --git a/docs/Step_14_Custom_CSS_and_Theme_Colors_723f4b2.md b/docs/Step_14_Custom_CSS_and_Theme_Colors_723f4b2.md
@@ -24,14 +24,22 @@ Sometimes we need to define some more fine-granular layouts and this is when we
 					output text is bold")
 
 > ### Caution:  
-> As stated in the *Compatibility Rules*, the HTML and CSS generated by OpenUI5 is not part of the public API and may change in patch and minor releases. If you decide to override styles, you need to test and update your modifications each time OpenUI5 is updated. A prerequisite for this is that you have control over the version of OpenUI5 being used, for example in a standalone scenario.
+> As stated in the [Compatibility Rules](Compatibility_Rules_91f0873.md), the HTML and CSS generated by OpenUI5 is not part of the public API and may change in patch and minor releases. If you decide to override styles, you need to test and update your modifications each time OpenUI5 is updated. A prerequisite for this is that you have control over the version of OpenUI5 being used, for example in a standalone scenario.
 
 ***
 
+<a name="loio723f4b2334e344c08269159797f6f796__section_a55_pr2_syb"/>
+
 ### Coding
 
 You can view and download all files at [Walkthrough - Step 14](https://sdk.openui5.org/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrough.14).
 
+***
+
+<a name="loio723f4b2334e344c08269159797f6f796__section_b55_pr2_syb"/>
+
+### webapp/css/style.css \(New\)
+
 ```
 html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn {
    margin-right: 0.125rem
@@ -60,11 +68,11 @@ In an additional class `myCustomText` we define a bold text and set the display
 
 ### webapp/manifest.json
 
-```js
+```
 ...
   "sap.ui5": {
 	...	
-	"models": {
+	"rootView": {
 	  ...
 	},
 	"resources": {
@@ -86,10 +94,11 @@ In the `resources` section of the `sap.ui5` namespace, additional resources for
 
 ```xml
 <mvc:View
-	controllerName="sap.ui.demo.walkthrough.controller.App"
+	controllerName="ui5.walkthrough.controller.App"
 	xmlns="sap.m"
 	xmlns:mvc="sap.ui.core.mvc"
 	displayBlock="true">
+
 	<Shell>
 		<App class="myAppDemoWT">
 			<pages>
@@ -100,14 +109,17 @@ In the `resources` section of the `sap.ui5` namespace, additional resources for
 							class="sapUiResponsiveMargin"
 							width="auto">
 							<content>
+
 								<Button
 									text="{i18n>showHelloButtonText}"
 									press=".onShowHello"
 									class="myCustomButton"/>
+
 								<Input
 									value="{/recipient/name}"
 									valueLiveUpdate="true"
 									width="60%"/>
+
 								<FormattedText
 									htmlText="Hello {/recipient/name}"
 									class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>