Oracle® JavaScript Extension Toolkit (Oracle JET) Developing Applications with Oracle JET 10.0.0 F35950-02 February 2021 Oracle JavaScript Extension Toolkit (Oracle JET) Developing Applications with Oracle JET, 10.0.0 F35950-02 Copyright © 2014, 2021, Oracle and/or its affiliates. Primary Author: Ralph Gordon Contributing Authors: Walter Egan This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited. The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report them to us in writing. If this is software or related documentation that is delivered to the U.S. Government or anyone licensing it on behalf of the U.S. Government, then the following notice is applicable: U.S. GOVERNMENT END USERS: Oracle programs (including any operating system, integrated software, any programs embedded, installed or activated on delivered hardware, and modifications of such programs) and Oracle computer documentation or other Oracle data delivered to or accessed by U.S. Government end users are "commercial computer software" or "commercial computer software documentation" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, the use, reproduction, duplication, release, display, disclosure, modification, preparation of derivative works, and/or adaptation of i) Oracle programs (including any operating system, integrated software, any programs embedded, installed or activated on delivered hardware, and modifications of such programs), ii) Oracle computer documentation and/or iii) other Oracle data, is subject to the rights and limitations specified in the license contained in the applicable contract. The terms governing the U.S. Government’s use of Oracle cloud services are defined by the applicable contract for such services. No other rights are granted to the U.S. Government. This software or hardware is developed for general use in a variety of information management applications. It is not developed or intended for use in any inherently dangerous applications, including applications that may create a risk of personal injury. If you use this software or hardware in dangerous applications, then you shall be responsible to take all appropriate fail-safe, backup, redundancy, and other measures to ensure its safe use. Oracle Corporation and its affiliates disclaim any liability for any damages caused by use of this software or hardware in dangerous applications. Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners. Intel and Intel Inside are trademarks or registered trademarks of Intel Corporation. All SPARC trademarks are used under license and are trademarks or registered trademarks of SPARC International, Inc. AMD, Epyc, and the AMD logo are trademarks or registered trademarks of Advanced Micro Devices. UNIX is a registered trademark of The Open Group. This software or hardware and documentation may provide access to or information about content, products, and services from third parties. Oracle Corporation and its affiliates are not responsible for and expressly disclaim all warranties of any kind with respect to third-party content, products, and services unless otherwise set forth in an applicable agreement between you and Oracle. Oracle Corporation and its affiliates will not be responsible for any loss, costs, or damages incurred due to your access to or use of third-party content, products, or services, except as set forth in an applicable agreement between you and Oracle. Contents Preface Audience xiv Documentation Accessibility xiv Related Resources xiv Conventions xv What’s New in This Guide for Release 10.0.0 1 Getting Started with Oracle JavaScript Extension Toolkit (JET) The Oracle JET Architecture 1-1 What's Included in Oracle JET 1-5 Third Party Libraries Used by Oracle JET 1-5 Typical Workflow for Getting Started with Oracle JET Application Development 1-6 Choose a Development Environment for Oracle JET 1-7 Choose a Development Environment 1-7 Install Oracle JET Tooling 1-9 Install Node.js 1-9 Install the Oracle JET Command-Line Interface 1-9 Configure Oracle JET Applications for TypeScript Development 1-10 Work with the Oracle JET Starter Templates 1-12 About the Starter Templates 1-12 About Modifying Starter Templates 1-15 Modify Starter Template Content 1-16 Work with the Oracle JET Base Distribution 1-19 About the Oracle JET Base Distribution 1-20 Add Oracle JET to an Existing JavaScript Application 1-20 Optimize Application Startup Using Oracle CDN and Oracle JET Libraries 1-21 2 Understanding the Web Application Workflow Scaffold a Web Application 2-1 iii About ojet create Command Options for Web Applications 2-3 About Scaffolding a Web Application 2-4 About the Web Application File Structure 2-5 Modify the Web Application’s File Structure 2-7 Add Hybrid Mobile Features to Web Applications 2-8 Add Progressive Web App Support to Web Applications 2-9 Build a Web Application 2-11 About ojet build Command Options for Web Applications 2-12 Serve a Web Application 2-12 About ojet serve Command Options and Express Middleware Functions 2-13 Serve a Web Application to a HTTPS Server Using a Self-signed Certificate 2-15 Serve a Web Application Using Path-based Routing 2-18 Customize the Web Application Tooling Workflow 2-20 About the Script Hook Points for Web Applications 2-21 About the Process Flow of Script Hook Points 2-23 Change the Hooks Subfolder Location 2-25 Create a Hook Script for Web Applications 2-26 Pass Arguments to a Hook Script for Web Applications 2-28 3 Understanding the Hybrid Mobile Application Workflow Install the Mobile Tooling 3-1 Install Apache Cordova 3-2 Install Android Development Tools 3-2 Install an Emulator Accelerator 3-3 Create an Android Virtual Device 3-3 Set Up Your Android Device to Install an App from Your Development Machine 3-4 Install Gradle and Configure Gradle Proxy Settings 3-4 Configure Environment Variables to Reference JDK and Android SDK Installations 3-5 Install iOS Development Tools 3-7 Install Windows Development Tools 3-7 Enable Developer Mode on Windows 10 3-7 Install Visual Studio 3-8 Configure Environment Variable to Reference Microsoft Build Tools 3-9 Install a Personal Information Exchange File in Your Computer’s Certificate Store 3-9 Create a Hybrid Mobile Application Using the Oracle JET Command-Line Interface 3-11 Scaffold a Hybrid Mobile Application 3-11 About ojet create Command Options for Mobile Hybrid Applications 3-14 About the Hybrid Mobile Application File Structure 3-15 iv Modify the Hybrid Mobile Application’s File Structure 3-16 Add Web Browser Capability to Hybrid Mobile Applications 3-17 Build a Hybrid Mobile Application 3-18 About ojet build Command Options for Hybrid Mobile Applications 3-19 Serve a Hybrid Mobile Application 3-21 About ojet serve Command Options for Hybrid Mobile Applications 3-22 Review Your Application Settings in the config.xml File 3-25 Change the Splash Screen and App Launcher Icon 3-26 Customize the Hybrid Mobile Application Tooling Workflow 3-28 About the Script Hook Points for Hybrid Mobile Applications 3-28 About the Process Flow of Script Hook Points 3-31 Change the Hooks Subfolder Location 3-33 Create a Hook Script for Hybrid Mobile Applications 3-34 Pass Arguments to a Hook Script for Hybrid Mobile Applications 3-36 Use Cordova Plugins to Access Mobile Device Services 3-37 About Apache Cordova and Cordova Plugins 3-38 Use a Plugin in Your App 3-39 Use a Different Web View in Your JET Hybrid Mobile App 3-40 4 Designing Responsive Applications Typical Workflow for Designing Responsive Applications in Oracle JET 4-1 Oracle JET and Responsive Design 4-2 Media Queries 4-2 Oracle JET Flex, Grid, Form, and Responsive Helper Class Naming Convention 4-4 Oracle JET Flex Layouts 4-5 About Modifying the flex Property 4-6 About Wrapping Content with Flex Layouts 4-7 About Customizing Flex Layouts 4-7 Oracle JET Grids 4-8 About the Grid System 4-8 The Grid System and Printing 4-9 Grid Convenience Classes 4-11 Responsive Form Layouts 4-13 Add Responsive Design to Your Application 4-13 Use Responsive JavaScript 4-14 The Responsive JavaScript Classes 4-14 Change a Custom Element’s Attribute Based on Screen Size 4-15 Conditionally Load Content Based on Screen Size 4-16 Create Responsive Images 4-17 Use the Responsive Helper Classes 4-18 v Create Responsive CSS Images 4-19 Change Default Font Size 4-20 Change Default Font Size Across the Application 4-20 Change Default Font Size Based on Device Type 4-20 Control the Size and Generation of the CSS 4-21 5 Using RequireJS for Modular Development Typical Workflow for Using RequireJS 5-1 About Oracle JET and RequireJS 5-2 About Oracle JET Module Organization 5-2 About RequireJS in an Oracle JET Application 5-7 Use RequireJS in an Oracle JET Application 5-8 Add Third-Party Tools or Libraries to Your Oracle JET Application 5-9 Troubleshoot RequireJS in an Oracle JET Application 5-12 About JavaScript Partitions