Oracle® JavaScript Extension Toolkit (Oracle JET) Developing Applications with Oracle JET 7.0.0 F17700-01 May 2019 Oracle JavaScript Extension Toolkit (Oracle JET) Developing Applications with Oracle JET, 7.0.0 F17700-01 Copyright © 2014, 2019, Oracle and/or its affiliates. All rights reserved. Primary Author: Ralph Gordon Contributing Authors: Walter Egan, Krithika Gangadhar 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 installed on the hardware, and/or documentation, delivered to U.S. Government end users are "commercial computer software" pursuant to the applicable Federal Acquisition Regulation and agency- specific supplemental regulations. As such, use, duplication, disclosure, modification, and adaptation of the programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, shall be subject to license terms and license restrictions applicable to the programs. 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 Xeon 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, Opteron, the AMD logo, and the AMD Opteron 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 xv Documentation Accessibility xv Related Resources xv Conventions xvi What’s New in This Guide for Release 7.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-8 Install Node.js 1-8 Install the Oracle JET Command-Line Interface 1-8 Develop Oracle JET Applications with TypeScript 1-9 Work with the Oracle JET Starter Templates 1-11 About the Starter Templates 1-11 About Modifying Starter Templates 1-13 Modify Starter Template Content 1-14 Work with the Oracle JET Base Distribution 1-17 About the Oracle JET Base Distribution 1-17 Add Oracle JET to an Existing JavaScript Application 1-18 Optimize Application Startup Using Oracle CDN and Oracle JET Libraries 1-19 2 Understanding the Web Application Workflow Create a Web Application Using the Oracle JET Command-Line Interface 2-2 iii Scaffold a Web Application 2-2 About ojet create Command Options for Web Applications 2-3 About Scaffolding a Web Application 2-4 About the Web Application File Structure 2-6 Modify the Web Application’s File Structure 2-7 Add Hybrid Mobile Features to Web Applications 2-8 Build a Web Application 2-10 About ojet build Command Options for Web Applications 2-10 Customize the Web Application’s Build Steps 2-11 Serve a Web Application 2-13 About ojet serve Command Options for Web Applications 2-14 Customize the Web Application’s Serve Steps 2-15 Customize the Web Application Tooling Workflow 2-16 About the Build and Serve Hook Points for Web Applications 2-17 Change the Hooks Subfolder Location 2-18 Create a Build or Serve Hook Script for Web Applications 2-19 Pass Arguments to a Build or Serve Hook Script for Web Applications 2-20 Create a Web Application Using the oraclejet.zip Download 2-22 Download the Oracle JET Zip File 2-22 Include References to CSS Files in Your Oracle JET Application 2-22 Use RequireJS to Manage Library, Link, and Script References 2-23 Create a Web Application Using the Oracle JET Starter Templates 2-23 Download Oracle JET with a Starter Template 2-23 Load the Oracle JET Starter Templates 2-24 Create an Application in the NetBeans IDE with a Site Template 2-24 Run the Oracle JET Starter Templates in NetBeans 2-27 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 iv 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-13 About the Hybrid Mobile Application File Structure 3-14 Modify the Hybrid Mobile Application’s File Structure 3-16 Build a Hybrid Mobile Application 3-17 About ojet build Command Options for Hybrid Mobile Applications 3-18 Customize the Hybrid Mobile Application’s Build Steps 3-19 Serve a Hybrid Mobile Application 3-21 About ojet serve Command Options for Hybrid Mobile Applications 3-22 Customize the Hybrid Mobile Application’s Serve Steps 3-25 Review Your Application Settings in the config.xml File 3-26 Change the Splash Screen and App Launcher Icon 3-28 Customize the Hybrid Mobile Application Tooling Workflow 3-29 About the Build and Serve Hook Points for Hybrid Mobile Applications 3-30 Change the Hooks Subfolder Location 3-31 Create a Build or Serve Hook Script for Hybrid Mobile Applications 3-32 Pass Arguments to a Build or Serve Hook Script for Hybrid Mobile Applications 3-33 Use Cordova Plugins to Access Mobile Device Services 3-35 About Apache Cordova and Cordova Plugins 3-35 Use a Plugin in Your App 3-36 Cordova Plugins Recommended by Oracle JET 3-37 Use a Different Web View in your JET Hybrid Mobile App 3-37 Use the Native Platform’s Date Picker UI in your JET Hybrid Mobile App 3-38 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 v The Grid System and Printing 4-9 Grid Convenience Classes 4-11 Responsive Layout and Content Design Patterns 4-13 Responsive Form Layouts 4-17 Add Responsive Design to Your Application 4-17 Use Responsive JavaScript 4-18 The Responsive JavaScript Classes 4-18 Change a Custom Element’s Attribute Based on Screen Size 4-19 Conditionally Load Content Based on Screen Size 4-20 Create Responsive Images 4-21 Use the Responsive Helper Classes 4-22 Create Responsive CSS Images 4-23 Change Default Font Size 4-24 Change Default Font Size Across the Application 4-24 Change Default Font Size Based on Device Type 4-24 Control the Size and Generation of the CSS 4-25 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