Table of Contents

• Title and Copyright Information
• Preface
  • Audience
  • Documentation Accessibility
  • Related Resources
  • Conventions
• What’s New in This Guide for Release 5.2.0
• 1 About Oracle JavaScript Extension Toolkit (JET)
  • The Oracle JET Architecture
  • What's Included in Oracle JET
• 2 Getting Started with Oracle JET Application Development
  • Typical Workflow for Getting Started with Oracle JET Application Development
  • Prerequisites for Developing Applications with Oracle JET
    • Prerequisite Knowledge for Working with Oracle JET
    • Choose a Development Environment
    • Install the Prerequisite Packages
      • Install Node.js
      • Install the Oracle JET Command-Line Interface
  • Getting Started with Oracle JET Web Application Development
    • Create a Web Application Using the Oracle JET Command-Line Interface
      • Scaffold a Web Application with the Oracle JET CLI
        • Modify the Web Application’s File Structure
        • Add Hybrid Mobile Features to Web Applications
      • Build a Web Application with the Oracle JET CLI
        • Customize the Web Application’s Build Steps
      • Serve a Web Application with the Oracle JET CLI
        • Customize the Web Application’s Serve Steps
      • Customize the Web Application Tooling Workflow Using Hook Points
        • Create a Web Application Build or Serve Hook Script for Web Applications
    • Create a Web Application Using the oraclejet.zip Download
      • Download the Oracle JET Zip File
      • Include References to CSS Files in Your Oracle JET Application
      • Use RequireJS to Manage Library, Link, and Script References
    • Create a Web Application Using the Oracle JET Starter Templates
      • Downloading Oracle JET with a Starter Template
      • Loading the Oracle JET Starter Templates
        • Create an Application in the NetBeans IDE with a Site Template
        • Run the Oracle JET Starter Templates in NetBeans
    • Add Oracle JET to an Existing JavaScript Application
  • Getting Started with Oracle JET Hybrid Mobile Application Development
    • 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
      • Install Windows Development Tools
        • Enable Developer Mode on Windows 10
        • Install Visual Studio
        • Install a Personal Information Exchange File in Your Computer’s Certificate Store
    • Create a Hybrid Mobile Application
      • Scaffold a Hybrid Mobile Application with the Oracle JET CLI
        • Hybrid Mobile Directory Structure
        • Modify the Hybrid Mobile Application’s File Structure
      • Build a Hybrid Mobile Application with the Oracle JET CLI
        • Customize the Hybrid Mobile Application’s Build Steps
      • Customize the Hybrid Mobile Application Tooling Workflow Using Hook Points
        • Create a Web Application Build or Serve Hook Script for Hybrid Mobile Applications
      • Serve a Hybrid Mobile Application with the Oracle JET CLI
        • Customize the Hybrid Mobile Application’s Serve Steps
      • Review Your Application Settings in the config.xml File
      • Change the Splash Screen and App Launcher Icon
    • Accessing Mobile Device Services Using Cordova Plugins
      • About Apache Cordova and Cordova Plugins
      • Using a Plugin in Your App
      • Cordova Plugins Recommended by Oracle JET
      • Using a Different Web View in your JET Hybrid Mobile App
      • Using the Native Platform’s Date Picker UI in your JET Hybrid Mobile App
  • Working with the Oracle JET Starter Templates
    • About the Starter Templates
    • Modifying Starter Template Content
  • Optimizing Application Startup Using Oracle CDN and Oracle JET Libraries
• 3 Designing Responsive Applications
  • Typical Workflow for Designing Responsive Applications in Oracle JET
  • Oracle JET and Responsive Design
  • Media Queries
  • Oracle JET Flex, Grid, Form, and Responsive Helper Class Naming Convention
  • Oracle JET Flex Layouts
  • Oracle JET Grids
    • About the Grid System
    • The Grid System and Printing
    • Grid Convenience Classes
  • Responsive Layout and Content Design Patterns
  • Responsive Form Layouts
  • Adding Responsive Design to Your Application
  • Using Responsive JavaScript
    • The Responsive JavaScript Classes
    • Changing a Custom Element’s Attribute Based on Screen Size
    • Conditionally Loading Content Based on Screen Size
    • Creating Responsive Images
  • Using the Responsive Helper Classes
  • Creating Responsive CSS Images
  • Changing Default Font Size
    • Changing Default Font Size Across the Application
    • Changing Default Font Size Based on Device Type
  • Controlling the Size and Generation of the CSS
• 4 Using RequireJS for Modular Development
  • Typical Workflow for Using RequireJS
  • Oracle JET and RequireJS
    • Oracle JET Module Organization
  • Using RequireJS in an Oracle JET Application
  • Adding Third-Party Tools or Libraries to Your Oracle JET Application
  • Troubleshooting RequireJS in an Oracle JET Application
  • Using JavaScript Partitions and RequireJS in an Oracle JET Application
• 5 Creating Single-Page Applications
  • Typical Workflow for Creating Single-Page Applications in Oracle JET
  • Designing Single-Page Applications Using Oracle JET
    • Understanding Oracle JET Support for Single-Page Applications
    • Creating a Single-Page Application in Oracle JET
  • Using the oj-module Element
    • Working with oj-module’s ViewModel Lifecycle
  • Using ojModule Binding
    • Working with ojModule’s ViewModel Lifecycle
• 6 Understanding Oracle JET User Interface Basics
  • Typical Workflow for Working with the Oracle JET User Interface
  • About the Oracle JET User Interface
    • Identifying Oracle JET UI Components, Patterns, and Utilities
    • Common Functionality in Oracle JET Components
    • Oracle JET Reserved Namespaces and Prefixes
  • About Binding and Control Flow
    • Using oj-bind-text to Bind Text Nodes
    • Binding HTML attributes
    • Using oj-bind-if to Process Conditionals
    • Using oj-bind-for-each to Process Loop Instructions
    • Binding Style Properties
    • Binding Event Listeners to JET and HTML Elements
    • Binding Classes
  • Adding an Oracle JET Custom Element to Your Page
    • Adding Animation Effects
• 7 Working with Oracle JET User Interface Components
  • Typical Workflow for Working with Oracle JET UI Components
  • Working with Collections
    • Choosing a Table, Data Grid, or List View
    • Working with Data Grids
      • Working with oj. CubeDataGridDataSource
    • Working with List Views
      • Understanding Data Requirements for List Views
      • Working with List Views and Inline Templates
    • Working with Pagination
    • Working with Row Expanders
    • Working with Tables
      • Understanding Data Requirements for Table
      • Understanding oj-table and Sorting
      • Working with Tables and Inline Templates
    • Working with Tree Views
  • Working with Controls
    • Working with Buttons
    • Working with Button Sets
    • Working with Conveyor Belts
    • Working with File Picker
    • Working with Film Strips
      • Configuring Film Strips
    • Working with Menus
      • Working with oj-menu
      • Working with Menu Buttons
      • Working with Context Menus
      • Working with Submenus
    • Working with Progress Indicators
    • Working with Tags
    • Working with Toolbars
    • Working with Trains
  • Working with Forms
    • Working with Checkbox and Radio Sets
    • Working with Color Pickers
      • Working with oj-color-palette
      • Working with oj-color-spectrum
    • Working with Comboboxes
      • Understanding oj-combobox-one Search
    • Working with Form Controls
    • Working with Form Layout Features
      • Working with oj-form-layout
    • Working with Input Components
    • Working with Labels
    • Working with Select
    • Working with Sliders
      • About the oj-slider Component
      • Creating Sliders
      • Formatting Tips for oj-slider
    • Working with Switches
    • Working with Validation and User Assistance
  • Working with Layout and Navigation
    • Working with Accordions
    • Working with Collapsibles
    • Working with Dialogs
    • Working with Masonry Layouts
      • Configuring Masonry Layouts
      • Understanding the oj-masonry-layout Layout Process
      • oj-masonry-layout Size Style Classes
    • Working with Nav Lists
      • Understanding Data Requirements for Nav Lists
      • Working with Nav Lists and Knockout Templates
    • Working with offCanvasUtils
      • Configuring an Off-Canvas Partition
    • Working with Panels
    • Working with Popups
      • Working with oj-popup
      • Working with the Oracle JET Popup Framework
    • Working with Tab Bars
      • Understanding Data Requirements for Tab Bars
  • Working with Visualizations
    • Choosing a Data Visualization Component for Your Application
    • Using Attribute Groups With Data Visualization Components
• 8 Working with Oracle JET Composite Components
  • Typical Workflow for Working with Oracle JET Composite Components
  • About Composite Components
  • Creating Composite Components
  • Best Practices for Composite Component Creation
    • Recommended Standard Patterns and Coding Practices
    • CSS and Theming Standards
  • Testing Composite Components
  • Adding Composite Components to Your Page
  • Optimizing Composite Component Files
    • Creating an Optimizer Script for a Single Composite Component
    • Consuming an Optimized Composite Component
• 9 Using the Common Model and Collection API
  • Typical Workflow for Binding Data in Oracle JET
  • About Oracle JET Data Binding
  • Using the Oracle JET Common Model and Collection Framework
    • About the Oracle JET Common Model and Collection API
    • About Oracle JET Data Binding and Knockout
    • Using the Oracle JET Common Model and Collection API
  • Integrating REST Services
    • About Oracle JET Support for Integrating REST Services
    • Passing Custom AJAX Options in Common Model CRUD API calls
    • Supplying a customURL Callback Function
    • Replacing oj.sync or oj.ajax Functions
  • Creating a CRUD Application Using Oracle JET
    • Defining the ViewModel
    • Reading Records
    • Creating Records
    • Updating Records
    • Deleting Records
• 10 Validating and Converting Input
  • Typical Workflow for Validating and Converting Input
  • About Oracle JET Validators and Converters
    • About Validators
      • Oracle JET Validators
      • Oracle JET Component Validation Attributes
      • Oracle JET Component Validation Methods
    • About Converters
      • Oracle JET Component Converter Options
  • Using Oracle JET Converters
    • Using Oracle JET Converters with Oracle JET Components
    • Understanding Oracle JET Converters Lenient Parsing
    • Understanding Time Zone Support in Oracle JET
    • Using Custom Converters in Oracle JET
    • Using Oracle JET Converters Without Oracle JET Components
  • Using Oracle JET Validators
    • Using Oracle JET Validators with Oracle JET components
    • Using Custom Validators in Oracle JET
    • What are Asynchronous Validators?
• 11 Working with User Assistance
  • Typical Workflow for Working with User Assistance
  • Understanding Oracle JET's Messaging APIs on Editable Components
    • Oracle JET Editable Component Messaging Attributes
    • Oracle JET Component Messaging Methods
  • Understanding How Validation and Messaging Works in Oracle JET Editable Components
    • Understanding How an Oracle JET Editable Component Performs Normal Validation
      • Normal Validation Process When User Changes Value of an Editable Component
      • Normal Validation Process When Validate() is Called on Editable Component
    • Understanding How an Oracle JET Editable Component Performs Deferred Validation
      • Deferred Validation Process When an Oracle JET Editable Component is Created
      • Deferred Validation Process When value Property is Changed Programmatically
  • Using Oracle JET Messaging
    • Notifying an Oracle JET Editable Component of Business Validation Errors
      • Using the messages-custom Attribute
      • Using the showMessages() Method on Editable Components
    • Understanding the oj-validation-group Component
      • Tracking Validity of a Group of Editable Components Using oj-validation-group
    • Creating Page Level Messaging
      • Create Messages with oj-message
  • Configuring an Editable Component's oj-label Help Attribute
  • Configuring an Editable Component's help.instruction Attribute
  • Controlling the Display of Hints, Help, and Messages
• 12 Developing Accessible Applications
  • Typical Workflow for Developing Accessible Oracle JET Applications
  • Oracle JET and Accessibility
  • Using the Accessibility Features of Oracle JET Components
  • Creating Accessible Oracle JET Pages
    • Configuring WAI-ARIA Landmarks
    • Configuring High Contrast Mode
      • Understanding Color and Background Image Limitations in High Contrast Mode
      • Adding High Contrast Mode to Your Oracle JET Application
      • Adding High Contrast Images or Icon Fonts
      • Testing High Contrast Mode
    • Hiding Screen Reader Content
    • Using ARIA Live Region
• 13 Internationalizing and Localizing Applications
  • Typical Workflow for Internationalizing and Localizing Oracle JET Applications
  • About Internationalizing and Localizing Oracle JET Applications
  • Internationalizing and Localizing Oracle JET Applications
    • Using Oracle JET's Internationalization and Localization Support
    • Enabling Bidirectional (BiDi) Support in Oracle JET
    • Setting the Locale Dynamically
    • Working with Currency, Dates, Time, and Numbers
  • Working with Oracle JET Translation Bundles
    • About Oracle JET Translation Bundles
    • Adding Translation Bundles to Oracle JET
• 14 Theming Applications
  • Typical Workflow for Theming an Oracle JET Application
  • CSS Files Included With Oracle JET
    • DOCTYPE Requirement
    • ThemeUtils
    • Understanding the Color Palette
    • Setting Text Direction
  • Best Practices for Using CSS and Themes
  • Customizing Themes Using the Tooling
  • Sass Files, Variables, and Tools
    • SCSS File Organization and Naming Convention
    • SCSS Variables
      • Using Variables to Control CSS Content
      • Understanding Right-to-Left Behavior
      • Understanding Oracle JET Theming For Compatibility
        • Using Tag Selectors or Classes
        • Using REM
        • Using Normalize
    • SCSS Tools
  • Working with Images
    • Image Considerations
    • Icon Fonts
    • Image Files
• 15 Securing Applications
  • Typical Workflow for Securing Oracle JET Applications
  • About Securing Oracle JET Applications
    • Oracle JET Components and Security
    • Oracle JET Security and Developer Responsibilities
    • Oracle JET Security Features
    • Oracle JET Secure Response Headers
      • Content Security Policy Headers
  • Using oj.OAuth in Your Oracle JET Application
    • Initializing oj.OAuth
    • Verifying oj.OAuth Initialization
    • Obtaining the OAuth Header
    • Using oj.OAuth with Oracle JET Common Model
      • Embedding oj.OAuth in Your Application's ViewModel
      • Adding oj.OAuth as a Plugin in Your ViewModel
    • Integrating oj.OAuth with Oracle Identity Management (iDM) Server
  • About Securing Hybrid Mobile Applications
    • Managing Authentication in JET Hybrid Mobile Apps
    • Managing App Configuration for JET Hybrid Mobile Apps
  • Dealing With Cross-Origin Resource Sharing (CORS)
• 16 Configuring Data Cache and Offline Support
  • About the Oracle Offline Persistence Toolkit
  • Installing the Offline Persistence Toolkit
• 17 Optimizing Performance
  • Typical Workflow for Optimizing Performance of Oracle JET Applications
  • About Performance and Oracle JET Applications
  • Adding Performance Optimization to an Oracle JET Application
  • Configuring the Application for Oracle CDN Optimization
  • Understanding the Path Mapping Script File and Configuration Options
• 18 Testing and Debugging
  • Typical Workflow for Testing and Debugging an Oracle JET Application
  • Testing Oracle JET Applications
    • Testing Applications
    • Testing Hybrid Mobile Applications
    • Using oj.BusyContext API in Automated Testing
  • Debugging Oracle JET Applications
    • Debugging Web Applications
    • Debugging Hybrid Mobile Applications
• 19 Packaging and Deploying Applications
  • Typical Workflow for Packaging and Deploying Applications
  • Packaging and Deploying Web Applications
    • Packaging Web Applications
    • Deploying Web Applications
  • Packaging and Publishing Hybrid Mobile Applications
    • About Packaging and Publishing Hybrid Mobile Applications
    • Packaging a Hybrid Mobile App on Android
    • Packaging a Hybrid Mobile App on iOS
    • Packaging a Hybrid Mobile App on Windows
      • How to Create the Build Configuration File to Package Your App on Windows
      • How to Build Your App for Windows
  • Removing and Restoring Non-Source Files from Your JET Application
• A Troubleshooting
• B Oracle JET v5.2.0 Tooling Migration
  • Migrating a v4.x.0 Application to v5.2.0
  • Migrating a v5.x.0 Application to v5.2.0
• C Oracle JET References
  • Oracle Libraries and Tools
  • Third-Party Libraries and Tools