Contents

Title and Copyright Information

Preface

• Audience
• Documentation Accessibility
• Related Resources
• Conventions

What’s New in This Guide for Release 4.1.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 a Web Application’s Build Behavior
    • Serve a Web Application with the Oracle JET CLI
      • Customize a Web Application’s Serve Behavior
  • Create a Web Application Using the oraclejet.zip Download
    • Download the Oracle JET Zip File
    • Create an Oracle JET Application in the NetBeans IDE
    • Include References to CSS Files in Your Oracle JET Application
    • Use RequireJS to Manage Library, Link, and Script References
    • Specify Library, Link, and Script References Without RequireJS
  • 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
    • Working with the Oracle JET Web Nav Drawer Starter Template
      • About the Web Nav Drawer Starter Template
      • Modifying the Web Nav Drawer Starter Template Content
  • 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
      • 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
      • Modify the Hybrid Mobile Application’s File Structure
    • Build a Hybrid Mobile Application with the Oracle JET CLI
      • Customize a Hybrid Mobile Application’s Build Behavior
    • Serve a Hybrid Mobile Application with the Oracle JET CLI
      • Customize a Hybrid Mobile Application’s Serve Behavior
    • 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
• Loading Oracle JET from CDN

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 ojModule
  • Working with ojModule’s ViewModel Life Cycle

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
• 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 or Data Grid
  • Working with Data Grids
    • Working with oj. CubeDataGridDataSource
  • Working with List Views
    • Understanding Data Requirements for List Views
    • Working with List Views and Knockout Templates
  • Working with Pagination
  • Working with Row Expanders
  • Working with Tables
    • Understanding oj-table and Sorting
  • 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 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
  • Working with Form Controls
  • Working with Form Layout Features
  • 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
• 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
  • Recommended Standard Patterns and Coding Practices
• Testing Composite Components
• Adding Composite Components to Your Page

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
• 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

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
• 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

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
  • Setting Text Direction
• 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
• Oracle JET Selectors
  • Component and Pattern Selectors
  • Marker Classes
• 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
• 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 App Configuration for JET Hybrid Mobile Apps
• Dealing With Cross-Origin Resource Sharing (CORS)

16 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

17 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

18 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 Build Output and Extraneous Files from Your JET Application’s Source

A Troubleshooting

B Oracle JET v4.1.0 Tooling Migration

• Migrating a v3.x.0 Application to v4.1.0
• Migrating a v4.0.0 Application to v4.1.0

C Oracle JET References

• Oracle Libraries and Tools
• Third-Party Libraries and Tools