diff --git a/docs/ARIA_Event_Handling_79a9c51.md b/docs/ARIA_Event_Handling_79a9c51.md index f9e12937..42c71bf3 100644 --- a/docs/ARIA_Event_Handling_79a9c51.md +++ b/docs/ARIA_Event_Handling_79a9c51.md @@ -24,7 +24,7 @@ The affected regions of the UI should have the property `aria-live` set to `true ### Event Handling -Accessible events are designed as a signaling mechanism for screen readers. An example for this is when parts of the UI update, either as a result of a direct user action \(such as performing a selection\) or by software \(such as “*incoming mail*” messages or popups\). Events like a dialog showing up or content updates of parts of the screen are handled by assigning specific roles and properties of the UI elements \(for example, an HTML `` element, would need role=“dialog” or property `aria-live` set accordingly\). Screen readers then listen to accessible events raised by browsers for these UI parts and react accordingly. +Accessible events are designed as a signaling mechanism for screen readers. An example for this is when parts of the UI update, either as a result of a direct user action \(such as performing a selection\) or by software \(such as "*incoming mail*" messages or popups\). Events like a dialog showing up or content updates of parts of the screen are handled by assigning specific roles and properties of the UI elements \(for example, an HTML `` element, would need `role="dialog"` or property `aria-live` set accordingly\). Screen readers then listen to accessible events raised by browsers for these UI parts and react accordingly. -When the app is loading or fetching information, the ARIA property aria-busy=“true” should be set for the corresponding region. +When the app is loading or fetching information, the ARIA property `aria-busy="true"` should be set for the corresponding region. diff --git a/docs/ARIA_Mapping_for_Tooltips_and_Textual_Alternatives_f9e14b3.md b/docs/ARIA_Mapping_for_Tooltips_and_Textual_Alternatives_f9e14b3.md index ae1cd8a2..2286441f 100644 --- a/docs/ARIA_Mapping_for_Tooltips_and_Textual_Alternatives_f9e14b3.md +++ b/docs/ARIA_Mapping_for_Tooltips_and_Textual_Alternatives_f9e14b3.md @@ -31,5 +31,5 @@ All images and icons must have a textual explanation that the screen reader can - The screen reader information must be available at the focus points \(axis values, dialog info, legend\) -You should hide image controls or controls with background CSS images used for pure decoration purposes by using the aria-hidden=“true” property. +You should hide image controls or controls with background CSS images used for pure decoration purposes by using the `aria-hidden="true"` property. diff --git a/docs/Basic_Example_How_to_Use_Gherkin_4b0c519.md b/docs/Basic_Example_How_to_Use_Gherkin_4b0c519.md index 6806dbf6..db42977b 100644 --- a/docs/Basic_Example_How_to_Use_Gherkin_4b0c519.md +++ b/docs/Basic_Example_How_to_Use_Gherkin_4b0c519.md @@ -180,7 +180,7 @@ Try executing the test now. You should see something like this: Step 1 is green because a matching step definition was found in the steps file. In Gherkin, the test harness always checks for the existence of the step definition first before executing the step definition's function. After Gherkin finds a step definition, it executes the step definition's function, and thus executes any QUnit assertions inside the function. -In step 2, notice how the text "This test will fail!" is copied from the steps file. You can use this functionality to make it easier to debug your test. We recommend that you start any QUnit assertion comment with the word “Verified” to make it easier to read your test executions. +In step 2, notice how the text "This test will fail!" is copied from the steps file. You can use this functionality to make it easier to debug your test. We recommend that you start any QUnit assertion comment with the word "Verified" to make it easier to read your test executions. *** diff --git a/docs/Behavior_driven_Development_with_Gherkin_45ac9f1.md b/docs/Behavior_driven_Development_with_Gherkin_45ac9f1.md index 38d082e9..b9961167 100644 --- a/docs/Behavior_driven_Development_with_Gherkin_45ac9f1.md +++ b/docs/Behavior_driven_Development_with_Gherkin_45ac9f1.md @@ -26,7 +26,7 @@ Since writing integration tests can be time-consuming, it's better to use unit t ### Gherkin -Gherkin is written in JavaScript and is fully compatible with OpenUI5, OPA, and QUnit. It is based on the “cucumber” tool. +Gherkin is written in JavaScript and is fully compatible with OpenUI5, OPA, and QUnit. It is based on the "cucumber" tool. The advantages of using Gherkin are: diff --git a/docs/Keyboard_Usage_of_ARIA_Role_Mapped_Controls_e6cd547.md b/docs/Keyboard_Usage_of_ARIA_Role_Mapped_Controls_e6cd547.md index 180c24e6..600491a2 100644 --- a/docs/Keyboard_Usage_of_ARIA_Role_Mapped_Controls_e6cd547.md +++ b/docs/Keyboard_Usage_of_ARIA_Role_Mapped_Controls_e6cd547.md @@ -42,7 +42,7 @@ Screen readers offer lists that group certain types of elements. These lists eas - The panel heading hierarchy must be logical \(for example, nested panels must have higher hierarchy levels\). - - Headings must be referenced by the containers they belong to \(using aria-labelledby = “HEADING_ID”\). + - Headings must be referenced by the containers they belong to \(using `aria-labelledby = "HEADING_ID"`\). - **Links** @@ -65,7 +65,7 @@ Screen readers offer lists that group certain types of elements. These lists eas - Sometimes list items may need special roles \(for example `menuitem`\). - - For lists with a specific number of items, speech output should always be “*Current item number of N total items*”. No matter how many items are visible, if the total number is not known, speech output should always be “*Current item number*”. + - For lists with a specific number of items, speech output should always be "*Current item number of N total items*". No matter how many items are visible, if the total number is not known, speech output should always be "*Current item number*". - **Tables** @@ -74,7 +74,7 @@ Screen readers offer lists that group certain types of elements. These lists eas - Tables must have titles. - - Layout tables for presentational purposes must be coded as such \(using ARIA role=“presentation”\). Then they are not displayed in the table list. + - Layout tables for presentational purposes must be coded as such \(using ARIA `role="presentation"`\). Then they are not displayed in the table list. - Editable and active cells may require special interaction models. During navigation, all screen reader relevant information must be available at the focus location. @@ -82,7 +82,7 @@ Screen readers offer lists that group certain types of elements. These lists eas - In case there are no visible headers, but information is organized in a table-like layout with individual columns/cells, a respective row/column identifier has to be provided. - - For tables with a specific number of rows, speech output should always be “*Current row of N total rows*”. No matter how many rows are visible, if the total number is not known, speech output should always be “*Current row*”. + - For tables with a specific number of rows, speech output should always be "*Current row of N total rows*". No matter how many rows are visible, if the total number is not known, speech output should always be "*Current row*". diff --git a/docs/Migrating_from_Component_Metadata_to_Manifest_e282db2.md b/docs/Migrating_from_Component_Metadata_to_Manifest_e282db2.md index 8fdc502d..ec74d8e8 100644 --- a/docs/Migrating_from_Component_Metadata_to_Manifest_e282db2.md +++ b/docs/Migrating_from_Component_Metadata_to_Manifest_e282db2.md @@ -15,7 +15,7 @@ Overview, how the component metadata are mapped to the manifest \(descriptor for For compatibility reasons, the mapping to the `manifest.json` file is done automatically. If a metadata property has been defined, it can also be consumed via the corresponding property of the `manifest.json` file. For a detailed step-by-step guide, see [Creating a Manifest File for Existing Apps](Creating_a_Manifest_File_for_Existing_Apps_3a9baba.md). > ### Note: -> To benefit from the performance improvements that can be achieved by using “manifest first”, we recommend to migrate the component metadata to the `manifest.json` file. For more information about manifest first, see the *Manifest First Function* section in [Manifest \(Descriptor for Applications, Components, and Libraries\)](Manifest_Descriptor_for_Applications_Components_and_Libraries_be0cf40.md). +> To benefit from the performance improvements that can be achieved by using "manifest first", we recommend to migrate the component metadata to the `manifest.json` file. For more information about manifest first, see the *Manifest First Function* section in [Manifest \(Descriptor for Applications, Components, and Libraries\)](Manifest_Descriptor_for_Applications_Components_and_Libraries_be0cf40.md). **Mapping Table** diff --git a/docs/Navigation_and_Routing_Tutorial_1b6dcd3.md b/docs/Navigation_and_Routing_Tutorial_1b6dcd3.md index 77feb685..454625a8 100644 --- a/docs/Navigation_and_Routing_Tutorial_1b6dcd3.md +++ b/docs/Navigation_and_Routing_Tutorial_1b6dcd3.md @@ -59,10 +59,10 @@ In this step we will modify the app and introduce routing. Instead of having the 3. [Step 3: Catch Invalid Hashes](Step_3_Catch_Invalid_Hashes_e047e05.md "Sometimes it is important to display an indication that the requested resource was not found. To give you an example: If a user tries to access an invalid pattern which does not match any of the configured routes, the user is notified that something went wrong. You - might also know this as a “404” or Not Found Page from + might also know this as a "404" or Not Found Page from traditional web pages. In this step, we will implement a feature that detects invalid hashes and visualizes this in a nice way.") -Sometimes it is important to display an indication that the requested resource was not found. To give you an example: If a user tries to access an invalid pattern which does not match any of the configured routes, the user is notified that something went wrong. You might also know this as a “404” or *Not Found Page* from traditional web pages. In this step, we will implement a feature that detects invalid hashes and visualizes this in a nice way. +Sometimes it is important to display an indication that the requested resource was not found. To give you an example: If a user tries to access an invalid pattern which does not match any of the configured routes, the user is notified that something went wrong. You might also know this as a "404" or *Not Found Page* from traditional web pages. In this step, we will implement a feature that detects invalid hashes and visualizes this in a nice way. 4. [Step 4: Add a Back Button to Not Found Page](Step_4_Add_a_Back_Button_to_Not_Found_Page_66670b0.md "When we are on the Not Found page because of an invalid hash, we want to get back to our app to select another page. Therefore, we will add a Back button to the Not Found view and make @@ -81,24 +81,24 @@ In this step, we'll create a second button on the home page, with which we can n mandatory parameters to identify objects in an app.") In this step, we implement a feature that allows the user to click on an employee in the list to see additional details of the employee. A route pattern can have one or more mandatory parameters to identify objects in an app. 8. [Step 8: Navigate with Flip Transition](Step_8_Navigate_with_Flip_Transition_3e5f6f3.md "In this step, we want to illustrate how to navigate to a page with a custom - transition animation. Both forward and backward navigation will use the “flip” + transition animation. Both forward and backward navigation will use the "flip" transition but with a different direction. We will create a simple link on the Employee view that triggers a flip navigation to a page that displays the resume data of a certain employee. Pressing the Back button will navigate back to the Employee view with a reversed flip transition.") -In this step, we want to illustrate how to navigate to a page with a custom transition animation. Both forward and backward navigation will use the “flip” transition but with a different direction. We will create a simple link on the *Employee* view that triggers a flip navigation to a page that displays the resume data of a certain employee. Pressing the *Back* button will navigate back to the *Employee* view with a reversed flip transition. +In this step, we want to illustrate how to navigate to a page with a custom transition animation. Both forward and backward navigation will use the "flip" transition but with a different direction. We will create a simple link on the *Employee* view that triggers a flip navigation to a page that displays the resume data of a certain employee. Pressing the *Back* button will navigate back to the *Employee* view with a reversed flip transition. 9. [Step 9: Allow Bookmarkable Tabs with Optional Query Parameters](Step_9_Allow_Bookmarkable_Tabs_with_Optional_Query_Parameters_b8561ff.md "The resume view contains four tabs as we have seen in the previous steps. However, when the user navigates to the resume page, only the first tab is displayed initially. Navigating directly to a specific tab or bookmarking a tab is not yet supported in our current app.") The `resume` view contains four tabs as we have seen in the previous steps. However, when the user navigates to the `resume` page, only the first tab is displayed initially. Navigating directly to a specific tab or bookmarking a tab is not yet supported in our current app. -10. [Step 10: Implement Lazy Loading](Step_10_Implement_Lazy_Loading_cdab0a1.md "In the previous steps, we have implemented a Resume view that +10. [Step 10: Implement "Lazy Loading"](Step_10_Implement_Lazy_Loading_cdab0a1.md "In the previous steps, we have implemented a Resume view that uses tabs to display data. The complete content of the tabs is loaded once, no matter which tab is currently displayed. We can increase the performance of our app by avoiding to load - content that is not visible. Therefore, we implement a “lazy loading” feature that only + content that is not visible. Therefore, we implement a "lazy loading" feature that only loads the view and data when requested by the user. ") -In the previous steps, we have implemented a *Resume* view that uses tabs to display data. The complete content of the tabs is loaded once, no matter which tab is currently displayed. We can increase the performance of our app by avoiding to load content that is not visible. Therefore, we implement a “lazy loading” feature that only loads the view and data when requested by the user. +In the previous steps, we have implemented a *Resume* view that uses tabs to display data. The complete content of the tabs is loaded once, no matter which tab is currently displayed. We can increase the performance of our app by avoiding to load content that is not visible. Therefore, we implement a "lazy loading" feature that only loads the view and data when requested by the user. 11. [Step 11: Assign Multiple Targets](Step_11_Assign_Multiple_Targets_b01840e.md "In this step, we will add a new button to the home page to illustrate the usage of multiple targets for a route. When the button is pressed, a new page opens that contains two parts: a header part at the top and a content part. The content part displays a table of diff --git a/docs/Step_10_Implement_Lazy_Loading_cdab0a1.md b/docs/Step_10_Implement_Lazy_Loading_cdab0a1.md index d6f1324b..360e7993 100644 --- a/docs/Step_10_Implement_Lazy_Loading_cdab0a1.md +++ b/docs/Step_10_Implement_Lazy_Loading_cdab0a1.md @@ -8,9 +8,9 @@ view on: [demo kit nightly build](https://sdk.openui5.org/nightly/#/topic/cdab0a1123514cc08cf2c8deb22f312e) | [demo kit latest release](https://sdk.openui5.org/topic/cdab0a1123514cc08cf2c8deb22f312e) -## Step 10: Implement “Lazy Loading” +## Step 10: Implement "Lazy Loading" -In the previous steps, we have implemented a *Resume* view that uses tabs to display data. The complete content of the tabs is loaded once, no matter which tab is currently displayed. We can increase the performance of our app by avoiding to load content that is not visible. Therefore, we implement a “lazy loading” feature that only loads the view and data when requested by the user. +In the previous steps, we have implemented a *Resume* view that uses tabs to display data. The complete content of the tabs is loaded once, no matter which tab is currently displayed. We can increase the performance of our app by avoiding to load content that is not visible. Therefore, we implement a "lazy loading" feature that only loads the view and data when requested by the user. *** @@ -151,7 +151,7 @@ sap.ui.define([ Now we extend the `resume` controller a little and add additional logic to the part of the `_onRouteMatched` function where a new tab has been selected and validated. In case the `selectedKey` matches `Hobbies` or `Notes` we call `this.getRouter().getTargets().display("resumeTab" + oQuery.tab)` to display the corresponding target manually. Here the valid targets are `resumeTabHobbies` and `resumeTabNotes` as we have changed the behavior for these two tabs by creating separate views. -These lines of code make sure that the targets are only loaded when they are needed \(“lazy loading”\). But the router does not know the new targets yet, so let's create them in our routing configuration. +These lines of code make sure that the targets are only loaded when they are needed \("lazy loading"\). But the router does not know the new targets yet, so let's create them in our routing configuration. *** @@ -220,7 +220,7 @@ These lines of code make sure that the targets are only loaded when they are nee We add the `resumeTabHobbies` and `resumeTabNotes` targets to the descriptor file with additional fields that override the default configuration as we now want to display the targets locally inside the `IconTabBar` control and not as pages of the app. -The `resumeTabHobbies` target sets the parent property to `employeeResume`. The parent property expects the name of another target. In our case, this makes sure that the view from the parent target `employeeResume` is loaded before the target `resumeTabHobbies` is displayed. This can be considered as a “view dependency”. By setting the `controlId` and `controlAggregation` properties the router places the view `ResumeHobbies` into the `content` aggregation of the `IconTabFilter` control with ID `hobbiesTab`. We also set a parameter `id` to a custom ID to illustrate how you could overrule a hard-coded ID inside a view. +The `resumeTabHobbies` target sets the parent property to `employeeResume`. The parent property expects the name of another target. In our case, this makes sure that the view from the parent target `employeeResume` is loaded before the target `resumeTabHobbies` is displayed. This can be considered as a "view dependency". By setting the `controlId` and `controlAggregation` properties the router places the view `ResumeHobbies` into the `content` aggregation of the `IconTabFilter` control with ID `hobbiesTab`. We also set a parameter `id` to a custom ID to illustrate how you could overrule a hard-coded ID inside a view. > ### Note: > Each target can define only one parent with its parent property. This is similar to the OpenUI5 control tree where each control can have only one parent control \(accessed with the method `getParent()` of `sap.ui.base.ManagedObject`\). The `controlId` property always references a control inside the parent view that is specified with the `parent` target. diff --git a/docs/Step_11_Assign_Multiple_Targets_b01840e.md b/docs/Step_11_Assign_Multiple_Targets_b01840e.md index 123ba770..dba4b496 100644 --- a/docs/Step_11_Assign_Multiple_Targets_b01840e.md +++ b/docs/Step_11_Assign_Multiple_Targets_b01840e.md @@ -484,7 +484,7 @@ Add the new texts to the `properties` file. **Parent topic:**[Navigation and Routing Tutorial](Navigation_and_Routing_Tutorial_1b6dcd3.md "OpenUI5 comes with a powerful routing API that helps you control the state of your application efficiently. This tutorial will illustrate all major features and APIs related to navigation and routing in OpenUI5 apps by creating a simple and easy to understand mobile app. It represents a set of best practices for applying the navigation and routing features of OpenUI5 to your applications.") -**Next:**[Step 10: Implement Lazy Loading](Step_10_Implement_Lazy_Loading_cdab0a1.md "In the previous steps, we have implemented a Resume view that uses tabs to display data. The complete content of the tabs is loaded once, no matter which tab is currently displayed. We can increase the performance of our app by avoiding to load content that is not visible. Therefore, we implement a “lazy loading” feature that only loads the view and data when requested by the user.") +**Next:**[Step 10: Implement "Lazy Loading"](Step_10_Implement_Lazy_Loading_cdab0a1.md "In the previous steps, we have implemented a Resume view that uses tabs to display data. The complete content of the tabs is loaded once, no matter which tab is currently displayed. We can increase the performance of our app by avoiding to load content that is not visible. Therefore, we implement a "lazy loading" feature that only loads the view and data when requested by the user.") **Previous:**[Step 12: Make a Search Bookmarkable](Step_12_Make_a_Search_Bookmarkable_e85da53.md "In this step we will make the search bookmarkable. This allows users to search for employees in the Employees table and they can bookmark their search query or share the URL.") diff --git a/docs/Step_2_A_First_Unit_Test_b81736e.md b/docs/Step_2_A_First_Unit_Test_b81736e.md index 2964f76d..ecd9bc1e 100644 --- a/docs/Step_2_A_First_Unit_Test_b81736e.md +++ b/docs/Step_2_A_First_Unit_Test_b81736e.md @@ -169,7 +169,7 @@ Whenever we run the tests, we will implicitly check that the feature is still wo Let's have a look at the implementation of the unit tests now: We add our unit tests to the `webapp/test/unit/model/formatter.js` file. The path below the app and the test folder is similar so it can easily associate the test with the tested functionality. There are already formatter functions for the number unit conversion defined in the code - you can have a quick look before we add our own tests. -We add a new QUnit module for our price state tests after the number unit conversion tests. We could write a test checking the result of the formatter for each of these cases but we do not want to repeat ourselves \(“DRY”\) – neither in the tests nor in the application coding – so we create a reuse function called `priceStateTestCase`. In this function, we call the formatter with the arguments provided as `oOptions` and make a `strictEqual` assertion for the expected parameter. +We add a new QUnit module for our price state tests after the number unit conversion tests. We could write a test checking the result of the formatter for each of these cases but we do not want to repeat ourselves \("DRY"\) – neither in the tests nor in the application coding – so we create a reuse function called `priceStateTestCase`. In this function, we call the formatter with the arguments provided as `oOptions` and make a `strictEqual` assertion for the expected parameter. > ### Note: > There must be at least one assertion per QUnit test. If the actual value matches the expected value then the test is successful. However, if there are more assertions in a test case and a subsequent assertion fails, the whole test fails with the error message of the failed assertion. diff --git a/docs/Step_2_Enable_Routing_cf3c57c.md b/docs/Step_2_Enable_Routing_cf3c57c.md index e27eee17..e87a78fa 100644 --- a/docs/Step_2_Enable_Routing_cf3c57c.md +++ b/docs/Step_2_Enable_Routing_cf3c57c.md @@ -90,7 +90,7 @@ You can view and download all files in the *Samples* in the Demo Kit at [Routing ``` -Single-page applications based on OpenUI5 can use a so-called “router” to dispatch hash-based URLs to one or more views of the app. Therefore, the router needs to know how to address and show the views. In OpenUI5, we can simply add a `routing` section to our existing `sap.ui5` section in the descriptor file to configure the router. There are three properties that can be used to configure the routing of your application: +Single-page applications based on OpenUI5 can use a so-called "router" to dispatch hash-based URLs to one or more views of the app. Therefore, the router needs to know how to address and show the views. In OpenUI5, we can simply add a `routing` section to our existing `sap.ui5` section in the descriptor file to configure the router. There are three properties that can be used to configure the routing of your application: - `config` @@ -219,7 +219,7 @@ Create a file `Home.controller.js` in the `webapp/controller` folder. The contro **Next:**[Step 1: Set Up the Initial App](Step_1_Set_Up_the_Initial_App_df245bd.md "We start by setting up a simple app for this tutorial. The app displays mock data only and mimics real OData back-end calls with the mock server as you have seen in the Walkthrough tutorial.") -**Previous:**[Step 3: Catch Invalid Hashes](Step_3_Catch_Invalid_Hashes_e047e05.md "Sometimes it is important to display an indication that the requested resource was not found. To give you an example: If a user tries to access an invalid pattern which does not match any of the configured routes, the user is notified that something went wrong. You might also know this as a “404” or Not Found Page from traditional web pages. In this step, we will implement a feature that detects invalid hashes and visualizes this in a nice way.") +**Previous:**[Step 3: Catch Invalid Hashes](Step_3_Catch_Invalid_Hashes_e047e05.md "Sometimes it is important to display an indication that the requested resource was not found. To give you an example: If a user tries to access an invalid pattern which does not match any of the configured routes, the user is notified that something went wrong. You might also know this as a "404" or Not Found Page from traditional web pages. In this step, we will implement a feature that detects invalid hashes and visualizes this in a nice way.") **Related Information** diff --git a/docs/Step_3_Catch_Invalid_Hashes_e047e05.md b/docs/Step_3_Catch_Invalid_Hashes_e047e05.md index 50afdf9e..0edd4b0e 100644 --- a/docs/Step_3_Catch_Invalid_Hashes_e047e05.md +++ b/docs/Step_3_Catch_Invalid_Hashes_e047e05.md @@ -10,7 +10,7 @@ view on: [demo kit nightly build](https://sdk.openui5.org/nightly/#/topic/e047e0 ## Step 3: Catch Invalid Hashes -Sometimes it is important to display an indication that the requested resource was not found. To give you an example: If a user tries to access an invalid pattern which does not match any of the configured routes, the user is notified that something went wrong. You might also know this as a “404” or *Not Found Page* from traditional web pages. In this step, we will implement a feature that detects invalid hashes and visualizes this in a nice way. +Sometimes it is important to display an indication that the requested resource was not found. To give you an example: If a user tries to access an invalid pattern which does not match any of the configured routes, the user is notified that something went wrong. You might also know this as a "404" or *Not Found Page* from traditional web pages. In this step, we will implement a feature that detects invalid hashes and visualizes this in a nice way. *** diff --git a/docs/Step_4_Add_a_Back_Button_to_Not_Found_Page_66670b0.md b/docs/Step_4_Add_a_Back_Button_to_Not_Found_Page_66670b0.md index 76b92ba5..650316a4 100644 --- a/docs/Step_4_Add_a_Back_Button_to_Not_Found_Page_66670b0.md +++ b/docs/Step_4_Add_a_Back_Button_to_Not_Found_Page_66670b0.md @@ -47,7 +47,7 @@ You can view and download all files in the *Samples* in the Demo Kit at [Routing ``` -In the `NotFound` view, we set the property `showNavButton` of the `MessagePage` control to `true` to automatically display the *Back* button. We also add an event handler function `onNavBack` to the `navButtonPress` event of the control. The `onNavBack` function will handle the actual back navigation. We could directly add this function to the view's controller. However, we are smart enough to anticipate that we might need the same handler function for different views. DRY \(“Don't Repeat Yourself”\) is the right approach for us, so let's create a `BaseController` from which all other controllers will inherit. +In the `NotFound` view, we set the property `showNavButton` of the `MessagePage` control to `true` to automatically display the *Back* button. We also add an event handler function `onNavBack` to the `navButtonPress` event of the control. The `onNavBack` function will handle the actual back navigation. We could directly add this function to the view's controller. However, we are smart enough to anticipate that we might need the same handler function for different views. DRY \("Don't Repeat Yourself"\) is the right approach for us, so let's create a `BaseController` from which all other controllers will inherit. *** @@ -166,7 +166,7 @@ The same applies to our home controller, we also extend it with the base control **Parent topic:**[Navigation and Routing Tutorial](Navigation_and_Routing_Tutorial_1b6dcd3.md "OpenUI5 comes with a powerful routing API that helps you control the state of your application efficiently. This tutorial will illustrate all major features and APIs related to navigation and routing in OpenUI5 apps by creating a simple and easy to understand mobile app. It represents a set of best practices for applying the navigation and routing features of OpenUI5 to your applications.") -**Next:**[Step 3: Catch Invalid Hashes](Step_3_Catch_Invalid_Hashes_e047e05.md "Sometimes it is important to display an indication that the requested resource was not found. To give you an example: If a user tries to access an invalid pattern which does not match any of the configured routes, the user is notified that something went wrong. You might also know this as a “404” or Not Found Page from traditional web pages. In this step, we will implement a feature that detects invalid hashes and visualizes this in a nice way.") +**Next:**[Step 3: Catch Invalid Hashes](Step_3_Catch_Invalid_Hashes_e047e05.md "Sometimes it is important to display an indication that the requested resource was not found. To give you an example: If a user tries to access an invalid pattern which does not match any of the configured routes, the user is notified that something went wrong. You might also know this as a "404" or Not Found Page from traditional web pages. In this step, we will implement a feature that detects invalid hashes and visualizes this in a nice way.") **Previous:**[Step 5: Display a Target Without Changing the Hash](Step_5_Display_a_Target_Without_Changing_the_Hash_d9efab3.md "In this step, you will learn more about targets and how to display a target from the routing configuration manually.") diff --git a/docs/Step_6_A_First_OPA_Test_1b47457.md b/docs/Step_6_A_First_OPA_Test_1b47457.md index 9614e9fc..a2d53c1b 100644 --- a/docs/Step_6_A_First_OPA_Test_1b47457.md +++ b/docs/Step_6_A_First_OPA_Test_1b47457.md @@ -37,7 +37,7 @@ All integration tests are located in the `webapp/test/integration` folder and ca We write integration tests with OPA5 – a tool that is integrated and delivered with SAPUI5. It is the short name for One-Page Acceptance tests for SAPUI5. "One-Page" here means that OPA5 is designed for single-page Web applications, i.e. applications that consist only of one HTML file. OPA5 runs in the same browser window as the application to be tested. > ### Note: -> There is also a stand-alone version of OPA5 called “OPA” available that can be used for testing any kind of single-page Web application and that does not provide any OpenUI5-specific functionality. In this tutorial, “OPA” always refers to OPA5. It includes functionality for easily finding and matching OpenUI5 controls as well as their properties and aggregations. +> There is also a stand-alone version of OPA5 called "OPA" available that can be used for testing any kind of single-page Web application and that does not provide any OpenUI5-specific functionality. In this tutorial, "OPA" always refers to OPA5. It includes functionality for easily finding and matching OpenUI5 controls as well as their properties and aggregations. @@ -45,9 +45,9 @@ We write integration tests with OPA5 – a tool that is integrated and delivered ![](images/loio596ebcf8996a4a838c0ab4189ddf1804_LowRes.png "Integration test infrastructure in the project") -For structuring integration tests with OPA we use “journeys”. A test journey contains all test cases for a specific view or use case, for example the navigation journey simulates user interaction with the app. +For structuring integration tests with OPA we use "journeys". A test journey contains all test cases for a specific view or use case, for example the navigation journey simulates user interaction with the app. -The journey uses another structuring element of OPA called “page object” that encapsulates actions and assertions needed to describe the journey. Typically those are related to a view in the app but there can also be stand-alone pages for browsers or common functionality. +The journey uses another structuring element of OPA called "page object" that encapsulates actions and assertions needed to describe the journey. Typically those are related to a view in the app but there can also be stand-alone pages for browsers or common functionality. > ### Note: > When you first start writing tests, you may find it difficult to figure out the correct control locators. The *Test Recorder* tool can suggest a solution in the form of a code snippet. For most controls, it can find a combination of matchers that match a single control. Then, all you need to do is copy the code snippet to your OPA5 page object. For more information, see [Test Recorder](Test_Recorder_2535ef9.md). diff --git a/docs/Step_6_Navigate_to_Routes_with_Hard_Coded_Patterns_782aac0.md b/docs/Step_6_Navigate_to_Routes_with_Hard_Coded_Patterns_782aac0.md index 1c51c34c..329982fe 100644 --- a/docs/Step_6_Navigate_to_Routes_with_Hard_Coded_Patterns_782aac0.md +++ b/docs/Step_6_Navigate_to_Routes_with_Hard_Coded_Patterns_782aac0.md @@ -158,7 +158,7 @@ The view that we are about to create has to be placed in the `webapp/view/employ > ### Note: > We could also have left out the `path` property to use the default `path` defined in the `config` section. In that case, we would have to change the `name` to `employee.EmployeeList` to achieve the same effect. -Setting the `level` to `2` helps the router to determine how to animate the \(in our case\) `slide` transition. For us, this means that a navigation from the home page to the `employees` target will be animated with a “Slide to Left” animation. In contrast to that, the back navigation from the `employees` target to the home page will be animated with a “Slide to Right” animation. This behavior is due to the fact that the home page has a lower `level` than the `employees` target. +Setting the `level` to `2` helps the router to determine how to animate the \(in our case\) `slide` transition. For us, this means that a navigation from the home page to the `employees` target will be animated with a "Slide to Left" animation. In contrast to that, the back navigation from the `employees` target to the home page will be animated with a "Slide to Right" animation. This behavior is due to the fact that the home page has a lower `level` than the `employees` target. *** diff --git a/docs/Step_7_Navigate_to_Routes_with_Mandatory_Parameters_f96d252.md b/docs/Step_7_Navigate_to_Routes_with_Mandatory_Parameters_f96d252.md index e0300f4a..ec238bb5 100644 --- a/docs/Step_7_Navigate_to_Routes_with_Mandatory_Parameters_f96d252.md +++ b/docs/Step_7_Navigate_to_Routes_with_Mandatory_Parameters_f96d252.md @@ -339,7 +339,7 @@ That's it. You can go to `webapp/index.html#/employees` and click on any list it **Next:**[Step 6: Navigate to Routes with Hard-Coded Patterns](Step_6_Navigate_to_Routes_with_Hard_Coded_Patterns_782aac0.md "In this step, we'll create a second button on the home page, with which we can navigate to a simple list of employees. This example illustrates how to navigate to a route that has a hard-coded pattern.") -**Previous:**[Step 8: Navigate with Flip Transition](Step_8_Navigate_with_Flip_Transition_3e5f6f3.md "In this step, we want to illustrate how to navigate to a page with a custom transition animation. Both forward and backward navigation will use the “flip” transition but with a different direction. We will create a simple link on the Employee view that triggers a flip navigation to a page that displays the resume data of a certain employee. Pressing the Back button will navigate back to the Employee view with a reversed flip transition.") +**Previous:**[Step 8: Navigate with Flip Transition](Step_8_Navigate_with_Flip_Transition_3e5f6f3.md "In this step, we want to illustrate how to navigate to a page with a custom transition animation. Both forward and backward navigation will use the "flip" transition but with a different direction. We will create a simple link on the Employee view that triggers a flip navigation to a page that displays the resume data of a certain employee. Pressing the Back button will navigate back to the Employee view with a reversed flip transition.") **Related Information** diff --git a/docs/Step_8_Navigate_with_Flip_Transition_3e5f6f3.md b/docs/Step_8_Navigate_with_Flip_Transition_3e5f6f3.md index 791814ff..ae37adae 100644 --- a/docs/Step_8_Navigate_with_Flip_Transition_3e5f6f3.md +++ b/docs/Step_8_Navigate_with_Flip_Transition_3e5f6f3.md @@ -10,7 +10,7 @@ view on: [demo kit nightly build](https://sdk.openui5.org/nightly/#/topic/3e5f6f ## Step 8: Navigate with Flip Transition -In this step, we want to illustrate how to navigate to a page with a custom transition animation. Both forward and backward navigation will use the “flip” transition but with a different direction. We will create a simple link on the *Employee* view that triggers a flip navigation to a page that displays the resume data of a certain employee. Pressing the *Back* button will navigate back to the *Employee* view with a reversed flip transition. +In this step, we want to illustrate how to navigate to a page with a custom transition animation. Both forward and backward navigation will use the "flip" transition but with a different direction. We will create a simple link on the *Employee* view that triggers a flip navigation to a page that displays the resume data of a certain employee. Pressing the *Back* button will navigate back to the *Employee* view with a reversed flip transition. *** @@ -319,7 +319,7 @@ Create a file `Resumee.controller.js` in the `webapp/controller/employee` folder Create a file `ResumeProjects.view.xml` in the `webapp/view/employee` folder. This view does not have a controller as we don't need it. It just displays a `Text` control with the projects text of the selected employee. It illustrates that using nested views works just fine in combination with navigation and routing in OpenUI5. > ### Note: -> For more complex applications, the performance is significantly increased if parts of the UI are only loaded when the user is actively selecting it. In this example, the view is always loaded even though the user never decided to display the project information. In the next steps, we will extend the UI so that the content is loaded “lazy” by OpenUI5 only when the filter item is clicked. The back-end service will fetch the data only on request and the UI will only have to be updated with the selected data instead of loading all data. +> For more complex applications, the performance is significantly increased if parts of the UI are only loaded when the user is actively selecting it. In this example, the view is always loaded even though the user never decided to display the project information. In the next steps, we will extend the UI so that the content is loaded "lazy" by OpenUI5 only when the filter item is clicked. The back-end service will fetch the data only on request and the UI will only have to be updated with the selected data instead of loading all data. *** diff --git a/docs/Step_9_Allow_Bookmarkable_Tabs_with_Optional_Query_Parameters_b8561ff.md b/docs/Step_9_Allow_Bookmarkable_Tabs_with_Optional_Query_Parameters_b8561ff.md index 14595f0d..4d156629 100644 --- a/docs/Step_9_Allow_Bookmarkable_Tabs_with_Optional_Query_Parameters_b8561ff.md +++ b/docs/Step_9_Allow_Bookmarkable_Tabs_with_Optional_Query_Parameters_b8561ff.md @@ -234,9 +234,9 @@ When you click on any tab you will see that the hash in the URL changes immediat **Parent topic:**[Navigation and Routing Tutorial](Navigation_and_Routing_Tutorial_1b6dcd3.md "OpenUI5 comes with a powerful routing API that helps you control the state of your application efficiently. This tutorial will illustrate all major features and APIs related to navigation and routing in OpenUI5 apps by creating a simple and easy to understand mobile app. It represents a set of best practices for applying the navigation and routing features of OpenUI5 to your applications.") -**Next:**[Step 8: Navigate with Flip Transition](Step_8_Navigate_with_Flip_Transition_3e5f6f3.md "In this step, we want to illustrate how to navigate to a page with a custom transition animation. Both forward and backward navigation will use the “flip” transition but with a different direction. We will create a simple link on the Employee view that triggers a flip navigation to a page that displays the resume data of a certain employee. Pressing the Back button will navigate back to the Employee view with a reversed flip transition.") +**Next:**[Step 8: Navigate with Flip Transition](Step_8_Navigate_with_Flip_Transition_3e5f6f3.md "In this step, we want to illustrate how to navigate to a page with a custom transition animation. Both forward and backward navigation will use the "flip" transition but with a different direction. We will create a simple link on the Employee view that triggers a flip navigation to a page that displays the resume data of a certain employee. Pressing the Back button will navigate back to the Employee view with a reversed flip transition.") -**Previous:**[Step 10: Implement Lazy Loading](Step_10_Implement_Lazy_Loading_cdab0a1.md "In the previous steps, we have implemented a Resume view that uses tabs to display data. The complete content of the tabs is loaded once, no matter which tab is currently displayed. We can increase the performance of our app by avoiding to load content that is not visible. Therefore, we implement a “lazy loading” feature that only loads the view and data when requested by the user.") +**Previous:**[Step 10: Implement "Lazy Loading"](Step_10_Implement_Lazy_Loading_cdab0a1.md "In the previous steps, we have implemented a Resume view that uses tabs to display data. The complete content of the tabs is loaded once, no matter which tab is currently displayed. We can increase the performance of our app by avoiding to load content that is not visible. Therefore, we implement a "lazy loading" feature that only loads the view and data when requested by the user.") **Related Information** diff --git a/docs/URL_List_Validation_91f3768.md b/docs/URL_List_Validation_91f3768.md index 5a6bdd2a..7c99644d 100644 --- a/docs/URL_List_Validation_91f3768.md +++ b/docs/URL_List_Validation_91f3768.md @@ -12,7 +12,7 @@ view on: [demo kit nightly build](https://sdk.openui5.org/nightly/#/topic/91f376 The OpenUI5 framework provides a client-side API to manage allowed URLs using the `URLListValidator`. It can be used to validate arbitrary URLs. -Internal examples of controls that use this feature are controls which accept arbitrary HTML content, such as `sap.ui.core.HTML`. This control uses the `URLListValidator` to perform a check \(sanitization\) on the content. URLs inside their content are then automatically removed, unless they are allowed by the `URLListValidator`. The option to sanitize the content can be enabled or disabled in the respective control via the property `HTML.sanitizeContent`. For the HTML control it is disabled by default. When adding a path to the allowed URLs in the `URLListValidator`, make sure to add “/” as path prefix if necessary, for example “/index.epx” instead of “index.epx”. The last example below shows this. +Internal examples of controls that use this feature are controls which accept arbitrary HTML content, such as `sap.ui.core.HTML`. This control uses the `URLListValidator` to perform a check \(sanitization\) on the content. URLs inside their content are then automatically removed, unless they are allowed by the `URLListValidator`. The option to sanitize the content can be enabled or disabled in the respective control via the property `HTML.sanitizeContent`. For the HTML control it is disabled by default. When adding a path to the allowed URLs in the `URLListValidator`, make sure to add "/" as path prefix if necessary, for example "/index.epx" instead of "index.epx". The last example below shows this. ***