Table of Contents

• Title and Copyright Information
• Preface
  • Audience
  • Documentation Accessibility
  • Diversity and Inclusion
  • Related Resources
  • Conventions
• 1 Get Started with Oracle JavaScript Extension Toolkit (JET)
  • The Oracle JET Model-View-ViewModel Architecture
  • What's Included in Oracle JET
  • Third Party Libraries Used by Oracle JET
  • Choose a Development Environment for Oracle JET
    • Choose a Development Environment
    • Install Oracle JET Tooling
      • Install Node.js
      • Install the Oracle JET Command-Line Interface
      • Use the npx Node.js Package Runner
      • Yarn Package Manager
    • Configure Oracle JET Apps for TypeScript Development
  • Work with the Oracle JET Starter Templates
    • About the Starter Templates
    • About Modifying Starter Templates
    • Modify Starter Template Content
  • Work with the Oracle JET Cookbook
  • Optimize App Startup Using Oracle CDN and Oracle JET Libraries
• 2 Understand the Web App Workflow
  • Scaffold a Web App
    • About ojet create Command Options for Web Apps
    • About Scaffolding a Web App
    • About the Web App File Structure
    • Modify the Web App’s File Structure
    • Add Hybrid Mobile Features to Web Apps
    • Add Progressive Web App Support to Web Apps
  • Build a Web App
    • About ojet build Command Options for Web Apps
  • Serve a Web App
    • About ojet serve Command Options and Express Middleware Functions
    • Serve a Web App to a HTTPS Server Using a Self-signed Certificate
    • Serve a Web App Using Path-based Routing
  • Customize the Web App Tooling Workflow
    • About the Script Hook Points for Web Apps
    • About the Process Flow of Script Hook Points
    • Change the Hooks Subfolder Location
    • Create a Hook Script for Web Apps
    • Pass Arguments to a Hook Script for Web Apps
  • Use Webpack in Oracle JET App Development
• 3 Understand the Hybrid Mobile App Workflow
  • Install the Mobile Tooling
    • Install Apache Cordova
    • Install Android Development Tools
      • Install an Emulator Accelerator
      • Create an Android Virtual Device
      • Set Up Your Android Device to Install an App from Your Development Machine
      • Install Gradle and Configure Gradle Proxy Settings
      • Configure Environment Variables to Reference JDK and Android SDK Installations
    • Install iOS Development Tools
  • Create a Hybrid Mobile App Using the Oracle JET Command-Line Interface
    • Scaffold a Hybrid Mobile App
      • About ojet create Command Options for Mobile Hybrid Apps
      • About the Hybrid Mobile App File Structure
      • Modify the Hybrid Mobile App’s File Structure
      • Add Web Browser Capability to Hybrid Mobile Apps
    • Build a Hybrid Mobile App
      • About ojet build Command Options for Hybrid Mobile Apps
    • Serve a Hybrid Mobile App
      • About ojet serve Command Options for Hybrid Mobile Apps
    • Review Your App Settings in the config.xml File
    • Change the Splash Screen and App Launcher Icon
    • Customize the Hybrid Mobile App Tooling Workflow
      • About the Script Hook Points for Hybrid Mobile Apps
      • About the Process Flow of Script Hook Points
      • Change the Hooks Subfolder Location
      • Create a Hook Script for Hybrid Mobile Apps
      • Pass Arguments to a Hook Script for Hybrid Mobile Apps
  • Use Cordova Plugins to Access Mobile Device Services
    • About Apache Cordova and Cordova Plugins
    • Use a Plugin in Your App
    • Use a Different Web View in Your JET Hybrid Mobile App
• 4 Design Responsive Apps
  • Oracle JET and Responsive Design
  • Media Queries
  • Oracle JET Flex, Grid, Form, and Responsive Helper Class Naming Convention
  • Oracle JET Flex Layouts
    • About Modifying the flex Property
    • About Wrapping Content with Flex Layouts
    • About Customizing Flex Layouts
  • Oracle JET Grids
    • About the Grid System
    • The Grid System and Printing
    • Grid Convenience Classes
  • Responsive Form Layouts
  • Add Responsive Design to Your App
  • Use Responsive JavaScript
    • The Responsive JavaScript Classes
    • Change a Custom Element’s Attribute Based on Screen Size
    • Conditionally Load Content Based on Screen Size
    • Create Responsive Images
  • Use the Responsive Helper Classes
  • Create Responsive CSS Images
  • Change Default Font Size
    • Change Default Font Size Across the App
    • Change Default Font Size Based on Device Type
  • Control the Size and Generation of the CSS
• 5 Use RequireJS for Modular Development
  • About Oracle JET and RequireJS
    • About Oracle JET Module Organization
    • About RequireJS in an Oracle JET App
  • Use RequireJS in an Oracle JET App
  • Add Third-Party Tools or Libraries to Your Oracle JET App
  • Troubleshoot RequireJS in an Oracle JET App
  • About JavaScript Partitions and RequireJS in an Oracle JET App
• 6 Create Single-Page Apps
  • Design Single-Page Apps Using Oracle JET
    • Understand Oracle JET Support for Single-Page Apps
    • Create a Single-Page App in Oracle JET
  • Use the oj-module Element
    • Work with oj-module’s ViewModel Lifecycle
• 7 Understand Oracle JET User Interface Basics
  • About the Oracle JET User Interface
    • Identify Oracle JET UI Components, Patterns, and Utilities
    • About Common Functionality in Oracle JET Components
    • About Oracle JET Reserved Namespaces and Prefixes
  • About Binding and Control Flow
    • Use oj-bind-text to Bind Text Nodes
    • Bind HTML attributes
    • Use oj-bind-if to Process Conditionals
    • Use oj-bind-for-each to Process Loop Instructions
    • Bind Style Properties
    • Bind Event Listeners to JET and HTML Elements
    • Bind Classes
  • Add an Oracle JET Component to Your Page
    • Add Animation Effects
    • Manage the Visibility of Added Component
• 8 Work with Oracle JET User Interface Components
  • Work with Collections
    • Choose a Table, Data Grid, or List View
    • About DataProvider Filter Operators
  • Work with Controls
  • Work with Forms
  • Work with Layout and Navigation
  • Work with Visualizations
    • Choose a Data Visualization Component for Your App
    • Use Attribute Groups With Data Visualization Components
• 9 Work with Oracle JET Web Components
  • Design Custom Web Components
  • About Web Components
    • Web Component Files
    • Web Component Slotting
    • Web Component Template Slots
    • Web Component Events
    • Web Component Examples
  • Best Practices for Web Component Creation
    • Recommended Standard Patterns and Coding Practices
    • CSS and Theming Standards
    • Version Numbering Standards
  • Create Web Components
    • Create Standalone Web Components
    • Create JET Packs
    • Create Resource Components for JET Packs
    • Create Reference Components for Web Components
  • Theme Web Components
    • About Web Component Theming
    • Guidelines for Web Component Theming
    • Theme a Web Component
    • Consolidate CSS for JET Packs
    • Optimize CSS to Allow Consuming Apps to Provide Styles
    • Incorporate Themed Components into a Consuming App
  • Test Web Components
  • Add Web Components to Your Page
  • Build Web Components
  • Package Web Components
  • Create a Project to Host a Shared Oracle Component Exchange
  • Publish Web Components to Oracle Component Exchange
  • Upload and Consume Web Components on a CDN
• 10 Use Oracle JET REST Data Provider APIs
  • About the Oracle JET REST Data Provider
  • About the Oracle JET REST Tree Data Provider
  • Create a CRUD App Using Oracle JET REST Data Providers
    • Define the Data Model for REST Data Provider
    • Read Records
    • Create Records
    • Update Records
    • Delete Records
• 11 Use the Common Model and Collection API
  • About Oracle JET Data Binding
  • About the Oracle JET Common Model and Collection Framework
    • About the Oracle JET Common Model and Collection API
    • About Oracle JET Data Binding and Knockout
    • Use the Oracle JET Common Model and Collection API
  • Integrate REST Services
    • About Oracle JET Support for Integrating REST Services
    • Pass Custom AJAX Options in Common Model CRUD API calls
    • Supply a customURL Callback Function
    • Replace sync or ajax Functions
  • Create a CRUD App Using Oracle JET
    • Define the ViewModel
    • Read Records
    • Create Records
    • Update Records
    • Delete Records
• 12 Validate and Convert Input
  • About Oracle JET Validators and Converters
    • About Validators
      • About the Oracle JET Validators
      • About Oracle JET Component Validation Attributes
      • About Oracle JET Component Validation Methods
    • About Converters
      • About Oracle JET Component Converter Options
  • About Oracle JET Converters
    • Use Oracle JET Converters with Oracle JET Components
    • About Oracle JET Converters Lenient Parsing
    • Understand Time Zone Support in Oracle JET
    • Use Custom Converters in Oracle JET
    • Use Oracle JET Converters Without Oracle JET Components
  • About Oracle JET Validators
    • Use Oracle JET Validators with Oracle JET Components
    • Use Custom Validators in Oracle JET
    • About Asynchronous Validators
• 13 Work with User Assistance
  • Understand Oracle JET's Messaging APIs on Editable Components
    • About Oracle JET Editable Component Messaging Attributes
    • About Oracle JET Component Messaging Methods
  • Understand How Validation and Messaging Works in Oracle JET Editable Components
    • Understand How an Oracle JET Editable Component Performs Normal Validation
      • About the Normal Validation Process When User Changes Value of an Editable Component
      • About the Normal Validation Process When Validate() is Called on Editable Component
    • Understand How an Oracle JET Editable Component Performs Deferred Validation
      • About the Deferred Validation Process When an Oracle JET Editable Component is Created
      • About the Deferred Validation Process When value Property is Changed Programmatically
  • Use Oracle JET Messaging
    • Notify an Oracle JET Editable Component of Business Validation Errors
      • Use the messages-custom Attribute
      • Use the showMessages() Method on Editable Components
    • Understand the oj-validation-group Component
      • Track the Validity of a Group of Editable Components Using oj-validation-group
    • Create Page and Section Level Messaging
  • Configure an Editable Component's oj-label Help Attribute
  • Configure an Editable Component's help.instruction Attribute
  • Control the Display of Hints, Help, and Messages
• 14 Develop Accessible Oracle JET Apps
  • About Oracle JET and Accessibility
  • About the Accessibility Features of Oracle JET Components
  • Create Accessible Oracle JET Pages
    • Configure WAI-ARIA Landmarks
    • Configure High Contrast Mode
      • Understand Color and Background Image Limitations in High Contrast Mode
      • Add High Contrast Mode to Your Oracle JET App
      • Add High Contrast Images or Icon Fonts
      • Test High Contrast Mode
    • Hide Screen Reader Content
    • Use ARIA Live Region
• 15 Internationalize and Localize Oracle JET Apps
  • About Internationalizing and Localizing Oracle JET Apps
  • Internationalize and Localize Oracle JET Apps
    • Use Oracle JET's Internationalization and Localization Support
    • Enable Bidirectional (BiDi) Support in Oracle JET
    • Set the Locale and Direction Dynamically
    • Work with Currency, Dates, Time, and Numbers
  • Work with Oracle JET Translation Bundles
    • About Oracle JET Translation Bundles
    • Add Translation Bundles to Oracle JET
• 16 Use CSS and Themes in Oracle JET Apps
  • About the Redwood Theme Included with Oracle JET
  • CSS Files Included with the Redwood Theme
  • Create an App with the Redwood Theme
  • Best Practices for Using CSS and Themes
    • DOCTYPE Requirement
    • Set the Text Direction
  • Work with Images
    • Image Considerations
    • Icon Font Considerations
  • Work with Custom Themes and Component Styles
    • About CSS Variables and Custom Themes in Oracle JET
    • Add Custom Theme Support with the JET CLI
    • Modify the Custom Theme with the JET CLI
    • Modify the Custom Theme with Theme Builder
    • Optimize the CSS in a Custom Theme
    • Style Component Instances with CSS Variables
    • Disable JET Styling of Base HTML Tags
• 17 Secure Oracle JET Apps
  • About Securing Oracle JET Apps
    • Oracle JET Components and Security
    • Oracle JET Security and Developer Responsibilities
    • Oracle JET Security Features
    • Oracle JET Secure Response Headers
      • Content Security Policy Headers
  • Use OAuth in Your Oracle JET App
    • Initialize OAuth
    • Verify OAuth Initialization
    • Obtain the OAuth Header
    • Use OAuth with Oracle JET Common Model
      • Embed OAuth in Your Application's ViewModel
      • Add OAuth as a Plugin in Your ViewModel
    • Integrate OAuth with Oracle Identity Management (iDM) Server
  • About Securing Hybrid Mobile Apps
    • Manage Authentication in JET Hybrid Mobile Apps
    • Manage App Configuration for JET Hybrid Mobile Apps
  • About Cross-Origin Resource Sharing (CORS)
• 18 Configure Data Cache and Offline Support
  • About the Oracle Offline Persistence Toolkit
  • Install the Offline Persistence Toolkit
• 19 Optimize Performance of Oracle JET Apps
  • About Performance and Oracle JET Apps
  • Add Performance Optimization to an Oracle JET App
  • About Configuring the App for Oracle CDN Optimization
    • Configure Bundled Loading of Libraries and Modules
    • Configure Individual Loading of Libraries and Modules
  • Understand the Path Mapping Script File and Configuration Options
• 20 Audit Oracle JET App Files
• 21 Test and Debug Oracle JET Apps
  • Test Oracle JET Apps
    • Test Apps
    • Test Hybrid Mobile Apps
    • Use BusyContext API in Automated Testing
  • Debug Oracle JET Applications
    • Debug Web Applications
    • Debug Hybrid Mobile Apps
• 22 Package and Deploy Oracle JET Apps
  • Package Web Apps
  • Deploy Web Apps
  • About Packaging and Publishing Hybrid Mobile Applications
  • Package a Hybrid Mobile App on Android
  • Package a Hybrid Mobile App on iOS
  • Remove and Restore Non-Source Files from Your JET App
• A Troubleshooting
• B Oracle JET App Migration for Release 13.0.0
  • Migrate Redwood-themed Apps from Releases 9.x.0 to Release 13.0.0
  • Migrate to the Redwood Theme CSS
  • Migrate Alta-themed Apps from Releases Prior to 8.3.0 to Release 13.0.0
• C Oracle JET References
  • Oracle Libraries and Tools
  • Third-Party Libraries and Tools
• D Properties in the oraclejetconfig.json File