openui5

OpenUI5: UI Development Toolkit for HTML5

OpenUI5 Version for the OpenUI5 Demo Kit
• OpenUI5: UI Development Toolkit for HTML5
– What’s New in OpenUI5
• What’s New in OpenUI5 1.71
– Read Me First
• Compatibility Rules
• Browser and Platform Support
– Visual Degradations
• Supported Library Combinations
• Supported Combinations of Themes and Libraries
• Versioning of OpenUI5
• Upgrading
– Upgrading from a Version Below 1.40
– Upgrading from a Version Below 1.38
• Deprecated Themes and Libraries
• SAPUI5 vs. OpenUI5
– Get Started: Setup and Tutorials
• Development Environment
– App Development Using OpenUI5
– App Development Using SAP Web IDE
• Get a Trial Account and Access SAP Web IDE
• Start SAP Web IDE
• Create a neo-app.json Project Configuration File
• Create an index.html File
• Run the App
• Create a Northwind Destination
 – App Development Using SAPUI5 Tools for Eclipse
• Installing SAPUI5 Tools for Eclipse
• Using SAPUI5 Tools for Eclipse
– Create an SAPUI5 Application Project
– Add a Control to Your View
– Implement a Method in the Controller
– Create an Additional View
– Integrate a New View
– JavaScript Code Completion
– Linking your Eclipse Editor to the Demo Kit
– Use JavaScript and XML Templates
– SAPUI5 Snippets
– Running an App in the Application Preview
• Use a SimpleProxyServlet for Testing to
Avoid Cross-domain Requests
– Developing OpenUI5
– Development for Hybrid Web Containers
• Quick Start
– Step 1: Ready…
– Step 2: Steady…
– Step 3: Go!
• Walkthrough
– Step 1: Hello World!
– Step 2: Bootstrap
– Step 3: Controls
– Step 4: XML Views
– Step 5: Controllers
– Step 6: Modules
– Step 7: JSON Model
– Step 8: Translatable Texts
– Step 9: Component Configuration
– Step 10: Descriptor for Applications
– Step 11: Pages and Panels
– Step 12: Shell Control as Container
– Step 13: Margins and Paddings
– Step 14: Custom CSS and Theme Colors
– Step 15: Nested Views
– Step 16: Dialogs and Fragments
– Step 17: Fragment Callbacks
– Step 18: Icons
– Step 19: Reuse Dialogs
 – Step 20: Aggregation Binding
– Step 21: Data Types
– Step 22: Expression Binding
– Step 23: Custom Formatters
– Step 24: Filtering
– Step 25: Sorting and Grouping
– Step 26: (Optional) Remote OData Service
– Step 27: Mock Server Configuration
– Step 28: Unit Test with QUnit
– Step 29: Integration Test with OPA
– Step 30: Debugging Tools
– Step 31: Routing and Navigation
– Step 32: Routing with Parameters
– Step 33: Routing Back and History
– Step 34: Custom Controls
– Step 35: Responsiveness
– Step 36: Device Adaptation
– Step 37: Content Density
– Step 38: Accessibility
• Troubleshooting
– Step 1: Browser Developer Tools
– Step 2: Technical Information Dialog
– Step 3: Support Assistant
– Step 4: Diagnostics Window
– Step 5: UI5 Inspector
– First-Aid Kit
• An Empty Page Comes Up
• Content or Control Is Not Visible
• Request Fails Due to Same-Origin Policy (Cross-Origin
Resource Sharing - CORS)
• App or Control Looks Odd
• Data Binding
– Step 1: No Data Binding
– Step 2: Creating a Model
– Step 3: Create Property Binding
– Step 4: Two-Way Data Binding
– Step 5: One-Way Data Binding
– Step 6: Resource Models
– Step 7: (Optional) Resource Bundles and Multiple Languages
– Step 8: Binding Paths: Accessing Properties in Hierarchically
Structured Models
 – Step 9: Formatting Values
– Step 10: Property Formatting Using Data Types
– Step 11: Validation Using the Message Manager
– Step 12: Aggregation Binding Using Templates
– Step 13: Element Binding
– Step 14: Expression Binding
– Step 15: Aggregation Binding Using a Factory Function
• OData V4
– Step 1: The Initial App
– Step 2: Data Access and Client-Server Communication
– Step 3: Automatic Data Type Detection
– Step 4: Filtering, Sorting, and Counting
– Step 5: Batch Groups
– Step 6: Create and Edit
– Step 7: Delete
– Step 8: OData Operations
• Navigation and Routing
– Step 1: Set Up the Initial App
– Step 2: Enable Routing
– Step 3: Catch Invalid Hashes
– Step 4: Add a Back Button to Not Found Page
– Step 5: Display a Target Without Changing the Hash
– Step 6: Navigate to Routes with Hard-Coded Patterns
– Step 7: Navigate to Routes with Mandatory Parameters
– Step 8: Navigate with Flip Transition
– Step 9: Allow Bookmarkable Tabs with Optional Query
Parameters
– Step 10: Implement “Lazy Loading”
– Step 11: Assign Multiple Targets
– Step 12: Make a Search Bookmarkable
– Step 13: Make Table Sorting Bookmarkable
– Step 14: Make Dialogs Bookmarkable
– Step 15: Reuse an Existing Route
– Step 16: Handle Invalid Hashes by Listening to Bypassed Events
– Step 17: Listen to Matched Events of Any Route
• Testing
– Step 1: Overview and Testing Strategy
– Step 2: A First Unit Test
– Step 3: Adding the Price Formatter
– Step 4: Testing a New Module
– Step 5: Adding a Flag Button
 – Step 6: A First OPA Test
– Step 7: Changing the Table to a Growing Table
– Step 8: Testing Navigation
– Step 9: Adding the Post Page
– Step 10: Test Suite and Automated Testing
– Step 11: Testing User Input
– Step 12: Adding a Search
– Step 13: Testing User Interaction
– Step 14: Adding Tabs
– Step 15: Writing a Short Date Formatter Using TDD
– Step 16: Adding the Date Formatter
• Mock Server
– Step 1: Initial App Without Data
– Step 2: Creating a Mock Server to Simulate Data
– Step 3: Handling Custom URL Parameters
– Step 4: Calling a Function Import
• Worklist App
– Step 1 (Option 1): Creating the Initial App with an App Template
in SAP Web IDE
– Step 1 (Option 2): Downloading the Code
– Step 1 (Result): The Initial App
– Step 2: Custom Mock Data
– Step 3: Extending the Worklist Table
– Step 4: Quick Filter for the Worklist
– Step 5: Adding Actions to the Worklist
– Step 6: Extending the Detail Page
– Step 7: Adding a Comments Section
• SAP Fiori 2.0 App
– Step 1: Setting Up the Initial App
– Step 2: Creating an Empty Flexible Column Layout
– Step 3: Using Dynamic Page for the Master View
– Step 4: Adding a Detail Page
– Step 5: Using Object Page Layout as a Detail Page
– Step 6: Adding a Floating Footer
– Step 7: Routing
– Step 8: Enhancing the Detail Page
– Step 9: Adding a Detail-Detail Page
– Step 10: Adding More Pages
– Step 11: Using the Flexible Column Layout Semantic Helper
– Step 12: Starting with Two Columns
– Step 13: Setting the Master-Detail Pattern
 • Demo Apps
• Best Practices for App Developers
– Load Only What You Really Need
– Use the MVC Concept
– Keep Your Views Short and Simple
– Make Your App CSP Compliant
– Use Asynchronous Loading
– Is Your Application Ready for Asynchronous Loading?
– Essentials
• Bootstrapping: Loading and Initializing
– Standard Variant for Bootstrapping
– Variant for Bootstrapping from Content Delivery Network
– noJQuery Variant for Bootstrapping
– Initialization Process
• Loading of Additional Resources During Bootstrap
• Dynamic Loading of Libraries
– Configuration of the OpenUI5 Runtime
• Configuration Options and URL Parameters
• Compatibility Version Information
• Structuring: Components and Descriptor
– Components
• Component.js File
– Component Metadata
– Methods Controlling the Initial Instantiation
• Using and Nesting Components
• Declarative API for Initial Components
• Handling IDs in UI Components
• Advanced Concepts for OpenUI5 Components
– Descriptor for Applications, Components, and Libraries
• Migrating from Component Metadata to Descriptor
• Descriptor for Libraries
• Descriptor for Components (Inside Libraries)
• Resources.json File
• Creating a Descriptor File for Existing Apps
– Migration Information for Upgrading the
Descriptor File
• Descriptor Dependencies to Libraries and Components
• Manifest Model Preload
• Enabling the Automatic SAP Fiori 2.0 Header Adaptation
in the Descriptor
• Model View Controller (MVC)
 – Models
– Views
• XML View
– Namespaces in XML Views
– Aggregation Handling in XML Views
– Control Properties and Associations in XML Views
– Using Native HTML in XML Views
– Using CSS Style Sheets in XML Views
– Handling Events in XML Views
– Preprocessing XML Views
– XML View Cache
– Require Modules in XML View and Fragment
• JSON View
• JS View
• HTML View
• Instantiating Views
• View Cloning
– Controller
• Using Controller Extension
– File Names and Locations (View and Controller)
– Typed Views and Controllers
– Support for Unique IDs
• Data Binding
– Binding Types
• Property Binding
• Context Binding (Element Binding)
• List Binding (Aggregation Binding)
– Using Factory Functions
– Sorting, Grouping, and Filtering for List Binding
– Lifecycle of Binding Templates
– Extended Change Detection
– Binding Syntax
• Binding Path
• Composite Binding
• Expression Binding
• Property Metadata Binding
• Examples for Data Binding in Different View Types
– Formatting, Parsing, and Validating Data
• Simple Data Types
– sap.ui.model.type.Boolean
 – sap.ui.model.type.Date
– sap.ui.model.type.DateTime
– sap.ui.model.type.Float
– sap.ui.model.type.Integer
– sap.ui.model.type.String
– sap.ui.model.type.Time
– sap.ui.model.type.DateTimeInterval
• Formatter Classes
– Date Format
– Number Format
– File Size Format
– Unit Formatting
– Currency Formatting
– Models
• OData V2 Model
– Creating the Model Instance
– Service Metadata
– Adding Additional URL Parameters
– Custom HTTP Headers
– Addressing Entities: Binding Path Syntax
– Accessing Data from an OData Model
– Creating Entities
– CRUD Operations
– Concurrency Control and ETags
– XSRF Token
– Refreshing the Model
– Batch Processing
– Two-Way Binding
– Binding-specific Parameters
– Optimizing Dependent Bindings
– Function Import
– Language
– Meta Model for OData V2
• OData V4 Model
– Model Instantiation and Data Access
– Bindings
• Creating Bindings
• Path Syntax
• Initialization and Read Requests
• Parameters
 • Binding Collection Inline Count
• Type Determination
• Binding Modes
• Suspend and Resume
• Context API
• Accessing Data in Controller Code
• Automatic determination of $expand and
$select
– Binding Events
– Filtering
– Sorting
– Value Lists
– OData Operations
– Batch Control
– Meta Model for OData V4
• OData V4 Metadata JSON Format
– Performance Aspects
– Unsupported Superclass Methods and Events
– Changes Compared to OData V2 Model
– Additional Annotation Files
– Creating an Entity
– Deleting an Entity
– Consuming OData V2 Services with the OData V4
Model
– Extension for Data Aggregation
– Server Messages in OData V4 Model
– Currencies and Units
• JSON Model
– Sorting and Filtering in JSON Models
– Binding Path Syntax for JSON Models
• XML Model
– Sorting and Filtering in XML Models
– XML Namespace Support
– Binding Path Syntax for XML Models
• Resource Model
– Binding Path Syntax for Resource Models
– Binding Texts to a Resource Bundle
• Custom Model
• Assigning the Model to the UI
• Setting the Default Binding Mode
– Using Data Binding for Data Export
• Reusing UI Parts: Fragments
– HTML Fragments
– XML Fragments
– JS Fragments
– Instantiation of Fragments
• Programmatically Instantiating JS Fragments
• Programmatically Instantiating XML Fragments
• Programmatically Instantiating HTML Fragments
• Instantiating Fragments in Declarative Views
• Using Other Objects Instead of Controllers
• Inline Definition and Instantiation of Fragments
– Unique IDs
• IDs in Declarative XML or HTML Fragments
• IDs in JS Fragments
• IDs of Fragments in Views
• Retrieving Control Instances by Their ID
• Example: JS Fragments Used in XML Views
– Dialogs and other Popups as Fragments
• Defining Dialogs as Fragments
• Using Dialogs Defined as Fragments
– Fragments with Multiple Root Nodes
• XML Templating
– Preprocessing Instructions
• with
• repeat
• if
• alias
• require
• Replacement of Bindings
• XML Fragments
• Extension Points
– Annotation Helper
– Debugging
• Working with Controls
– Custom Data - Attaching Data Objects to Controls
• Writing Data to the HTML DOM as DATA-* Attribute
– Using Predefined CSS Margin Classes
– Using Container Content Padding CSS Classes
• Responsive Paddings Enablement
– Field Groups
• Declarative Support
– Enabling Declarative Support
– Defining Controls
– Declarative Support: Properties
– Declarative Support: Associations
– Declarative Support: Events
– Declarative Support: Aggregations
– Declarative Support: Data Binding
– Compiling Declarative HTML
• Error, Warning, and Info Messages
– Validation Messages
– OData V2 Messages
– Message Model
– Implementing Your Own OData V2 Message Parser
• Routing and Navigation
– Routing Configuration
– Methods and Events for Navigation
– Initializing and Accessing a Routing Instance
– Working with Multiple Targets
– Using the title Property in Targets
– Enabling Routing in Nested Components
• Modules and Dependencies
– Loading a Module
– Multiple Module Locations
– Best Practices for Loading Modules
• Troubleshooting for Loading Modules
– Adapting to the Modularization of the Core
• Legacy jQuery.sap Replacement
• Legacy Factories Replacement
• Troubleshooting
• Optimizing Applications
– Resource Handling: Modularization and Localization
• OpenUI5 Library Location Used for Testing
– Cache Buster for OpenUI5
– Application Cache Buster
• Application Cache Buster: Index File
• Application Cache Buster: Configuration
• Application Cache Buster: Request Flow
• Application Cache Buster: Enhanced Concept
• Adapting to Operating Systems And Devices
 – The Device API
– Controls with Built-In Device Adaptation
– Checking the Operating System your Application is Running on
– Content Densities
• How to Use Densities for Controls
– Options for Further Adaptation
• Testing
– Unit Testing with QUnit
• Creating a QUnit Test Page
• Executing a QUnit Test
• Code Coverage Measurement
• Sinon.JS: Spies, Stubs, Mocks, Faked Timers, and XHR
• How to Test OpenUI5 Controls with QUnit
– Cookbook for Testing Controls with QUnit
– Integration Testing with One Page Acceptance Tests (OPA5)
• Getting Started with OPA5
• Cookbook for OPA5
• Retrieving Controls
• Structuring OPA Tests With Page Objects
• Using the autoWait Parameter
• Extensions for OPA5
• Test Libraries for OPA5
• Simulating User Interactions on Controls
• Pitfalls and Troubleshooting
– Mock Server
• OData Features Supported by Mock Server
• Mock Server: Frequently Asked Questions
• Using Mock Data
– Test Automation
• Installing Karma for Automated Testing
• Continuous Integration With Headless Chrome
• Code Coverage with Istanbul and OPA5
– Behavior-driven Development with Gherkin
• Feature Files
– Additional Options for Feature Files
• Basic Example How to Use Gherkin
• Gherkin and OPA Page Objects
• Code Coverage
• Logging
• Frequently Asked Questions
• Theming
– Setting Themes
– Enhanced Theming Concepts
– Creating Themable User Interfaces
– CSS Classes for Theme Parameters
• List of Supported CSS Classes
– Theming FAQ
• Localization
– Identifying the Language Code / Locale
– Resource Bundles
– Use of Localized Texts in Applications
• Accessibility
– Keyboard Handling for OpenUI5 UI Elements
– Screen Reader Support for OpenUI5 Controls
– High Contrast Themes for OpenUI5 Controls
• Drag and Drop
– Drag-and-Drop Configuration
– Drag-and-Drop Metadata
– Drag-and-Drop Limitations
• Troubleshooting
– Debugging
• Loading Debug Sources
• Switching the OpenUI5 Version
• Setting Breakpoints
• Breakpoints on the Class Level
• Breakpoints on the Object Level
– Logging and Tracing
– Technical Information Dialog
• Loading Debug Sources
• Technical Information Dialog on Mobile Devices
– Diagnostics
• Technical Information
• Control Tree
• Breakpoints on the Object Level
• Debugging
• Switching the OpenUI5 Version
• Breakpoints on the Class Level
• XML View and Templating Support Tools
• Visualizing User Interaction
– Support Assistant
 • Using the Support Assistant
– Rules Management
– Results and Analysis
– Execution Scope
– Analysis Report
– Integrating the Rules in OPA Tests
– Support Assistant API
– Running the Support Assistant on an Older
OpenUI5 Version
– Troubleshooting the Support Assistant
• Rule Development Guide
– Create a Ruleset for a Library
– Create a Rule
– Test a Rule
– Common Rule Patterns
– Guidelines and Best Practices
– UI5 Inspector
– Performance Measurement Using
sap/ui/performance/Measurement Module
– Interaction Tracking for Performance Measurement
– First-Aid Kit
• An Empty Page Comes Up
• Content or Control Is Not Visible
• Request Fails Due to Same-Origin Policy (Cross-Origin
Resource Sharing - CORS)
• App or Control Looks Odd
– Developing Apps
• Continuous Integration: Ensure Code Quality
• App Templates: Kick Start Your App Development
– Worklist Template
• Navigation
• Busy Indication
• Model Instantiation
• Send Email
• Testing
• Device Adaptation
• Stable IDs
– Master-Detail Template
• Navigation
• Busy Indication
• Model Instantiation
 • Master List Filtering
• Send Email
• Testing
• Device Adaptation
• Stable IDs
– Basic Template
• App Overview: The Basic Files of Your App
• App Initialization: What Happens When an App Is Started?
• Folder Structure: Where to Put Your Files
• Device Adaptation: Using Device Models for Your App
• Performance: Speed Up Your App
• Stable IDs: All You Need to Know
• Reacting on User Input Events
• Coding Issues to Avoid
– JavaScript Code Issues
– CSS Styling Issues
– Performance Issues
• Securing Apps
– Browser Security
– Transport Security
– Server Security
– Third-Party Libraries
– Secure Programming Aspects
– Cross-Site Scripting
– URL Whitelist Filtering
– Whitelist Service
– Frame Options
– Content Security Policy
• Right-to-Left Support
– API Properties for Right-to-Left Support in Text-Displaying
Controls
• Accessibility
– General Recommendations
– Text Size and Fonts
– Colors and Theming
– Keyboard Handling
– Fast Navigation
– Screen Reader Support
• Control-Specific Behavior
– Dialog Controls
– User Action Controls
 – User Input Controls
– Container Controls
– Display Controls
– List Controls
– Composite Controls
– Labeling and Tooltips
– Extending Apps
• Using Component Configuration
– Example: Component Configuration
– Providing Hooks in the Standard Controller
– View Extension
– View Modification
– View Replacement
– Controller Replacement
• Localized Texts for Extended Apps
• Limitations
• Caveats Regarding Stability Across Application Upgrades
• Supportability
– Developing Controls
• Development Conventions and Guidelines
– JavaScript Coding Guidelines
• JavaScript Namespaces
• Example for Defining a Class
– OpenUI5 Control Development Guidelines
• Control Development Guidelines: Theming/CSS
– Product Standards and Acceptance Criteria
• Annotations in Translation Files
– File Names and Encoding
– Git Guidelines
– JSDoc Guidelines
• Common Pitfalls in JSDoc
– Tools
• ESLint Code Checks
• ESLint Configuration File
• The library.js File
• Creating Control and Class Modules
• Defining the Control Metadata
– Object Metadata and Implementation
– Defining Control Properties
• Adding Method Implementations
 – Normal Methods
– init() Method
– exit() Method
– Event Handler Methods
– Browser Events
– Mobile Events
– Windows 8 Support
• Windows 8 Support - Known Issues
• Adapting Event Handling to Support Windows 8 Devices
– Renderer Methods
• Device-specific Behavior of Controls
• Examples for Creating and Extending Controls
– Creating a Simple Control
– Creating a Simple Square Control
– Creating a Simple Container Control
– Extending Buttons with Additional Events
– Extending Input Rendering
• Writing a Control Renderer
– Prevention of Cross-site Scripting
• Implementing Animation Modes
• Implementing Focus Handling
– Convenience Functionality
• Item Navigation - Supporting Keyboard Handling in List-like Controls
– Integrating Item Navigation
• Right-to-Left Support in Controls
– Right-to-Left Support Guidelines for Control Development
– Programmatic Access to RTL
– Troubleshooting Common RTL Issues
• Defining Groups for Fast Navigation (F6)
• Composite Controls
– Standard Composite Controls
– XML Composite Controls
• Example of a Simple XML Composite Control
• Properties and Property Bindings
• Events
• Aggregations
– Aggregation Forwarding
• Accessibility Aspects
– Keyboard Handling for OpenUI5 Controls for Developers
• Keyboard Handling for Basic Navigation
 • Keyboard Handling for One-Dimensional Navigation
• Keyboard Handling for Two-Dimensional Navigation
• Keyboard Handling for Triggering Actions on Item Level
• Keyboard Handling for Item Selection
• Keyboard Handling for Value Help and Auto-Complete
– Screen Reader Support for OpenUI5 Controls
• ARIA Attribute Mapping
• Keyboard Usage of ARIA Role Mapped Controls
• ARIA Mapping for Tooltips and Textual Alternatives
• ARIA Event Handling
• ARIA Labeling
• Best Practices for ARIA Labeling
• Writing a Control: FAQ
– More About Controls
• Busy Indicators
• Cards
• Date and Time Related Controls: Data Binding
• Grid Controls
– sap.f.GridContainer
– sap.f.GridList
– sap.ui.layout.cssgrid.CSSGrid
– sap.ui.layout.Grid
• Hyphenation for Text Controls
• Semantic Pages
– Semantic Page (sap.f)
– Semantic Page (sap.m)
• Tables: Which One Should I Choose?
• sap.f
– Building an App with the Flexible Column Layout and Related
Classes
• Flexible Column Layout
– Control Structure
– Types of Layout
– Layout Arrows
– Reacting to Layout Changes
– Changing the Layout and Loading Views (Best
Practices)
• Flexible Column Layout Semantic Helper
– Main Methods
• Router
• sap.m
– App and Nav Container
• Events Fired Centrally by the App or the NavContainer
• Events Fired on the Pages
• Passing Data when Navigating
– Facet Filter
• Facet Filter: Simple Type
• Facet Filter: Light Type
• Facet Filter List and Facet Filter Item
• Events for Facet Filters
• Data Binding for Facet Filters
• Filter Search
• Facet Filter Selection
• Dependent Facets
– Feed Input
– Feed List Item
– Flex Box
• Getting Started With FlexBox
• Important FlexBox Layout Concepts
– Generic Tile
– Image
– List, List Item, and Table
• Lists
– Custom List Item
• Swipe for Action
– Aggregation
– Events
– Methods
– Properties
• Creating Tables
• Configuring Responsive Behavior of a Table
• Defining Column Width
• Table Design
• List and Table Events
• Growing Feature for Table and List
• Grouping in a Table
• Table Personalization
• Performance of Lists and Tables
– Message Handling
– Message Popover
– PDF Viewer
 – Personalization Dialog
– Scrolling
• Scrolling: Implementation Details
• Scrolling: Pull to Refresh
– Sliders
– Split App
– Text
– Upload Collection
– URL Helper
• Examples for Triggering Telephone, Text and E-Mail
Applications
• sap.tnt
• sap.ui.codeeditor
– Code Editor
• sap.ui.core
– Icon and Icon Pool
• sap.ui.table
• sap.uxap
– Object Page Layout
– Object Page Headers
• Object Page Classic Header
• Object Page Dynamic Header
• Object Page Headers Comparison
– Anchor Bar
– Object Page Blocks
– Creating Blocks
– Object Page Scrolling
– Glossary