<<

Practical Oracle JET Developing Enterprise Applications in JavaScript

Daniel Curtis Practical Oracle JET: Developing Enterprise Applications in JavaScript

Daniel Curtis Birmingham, UK

ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6 https://doi.org/10.1007/978-1-4842-4346-6 Library of Congress Control Number: 2019935824 Copyright © 2019 by Daniel Curtis This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image, we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the author nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Jonathan Gennick Development Editor: Laura Berendson Coordinating Editor: Jill Balzano Cover image designed by Freepik (www.freepik.com) Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer- sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science+Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail [email protected], or visit www.apress.com/ rights-permissions. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book’s product page, located at www.apress.com/9781484243459. For more detailed information, please visit www.apress.com/source-code. Printed on acid-free paper Dedicated to all my family, friends, and Charlotte. To Berni, your spirit and determination continue to influence us all. Table of Contents

About the Author ��������������������������������������������������������������������������������������������������� xiii About the Technical Reviewer ���������������������������������������������������������������������������������xv Acknowledgments �������������������������������������������������������������������������������������������������xvii Introduction ������������������������������������������������������������������������������������������������������������xix

Chapter 1: User Experience in Enterprise Applications �������������������������������������������� 1 Technology Architecture Limitations ��������������������������������������������������������������������������������������������� 2 Closed Source Usability ���������������������������������������������������������������������������������������������������������������� 4 Improving Usability ����������������������������������������������������������������������������������������������������������������������� 4 Summary �������������������������������������������������������������������������������������������������������������������������������������� 5

Chapter 2: Oracle JET As a Solution ������������������������������������������������������������������������� 7 RequireJS �������������������������������������������������������������������������������������������������������������������������������������� 8 define Example ������������������������������������������������������������������������������������������������������������������������ 9 Under the Hood of RequireJS ������������������������������������������������������������������������������������������������ 10 require vs. define ������������������������������������������������������������������������������������������������������������������� 11 Using RequireJS in JET ��������������������������������������������������������������������������������������������������������������� 11 Configuration ������������������������������������������������������������������������������������������������������������������������� 11 require Block ������������������������������������������������������������������������������������������������������������������������� 13 Architecture Pattern �������������������������������������������������������������������������������������������������������������������� 14 MVVM ������������������������������������������������������������������������������������������������������������������������������������ 14 Model ������������������������������������������������������������������������������������������������������������������������������������� 15 View ��������������������������������������������������������������������������������������������������������������������������������������� 15 ViewModel ����������������������������������������������������������������������������������������������������������������������������� 15 Advantages of MVVM over MVC ��������������������������������������������������������������������������������������������� 16

v Table of Contents

KnockoutJS ��������������������������������������������������������������������������������������������������������������������������������� 16 Automatic Dependency Propagation ������������������������������������������������������������������������������������� 17 Declarative Bindings �������������������������������������������������������������������������������������������������������������� 17 Templating ����������������������������������������������������������������������������������������������������������������������������� 19 What Are Web Components? ������������������������������������������������������������������������������������������������� 21 Using KnockoutJS Within JET ����������������������������������������������������������������������������������������������������� 21 View Code Example ��������������������������������������������������������������������������������������������������������������� 22 ViewModel Code Example ����������������������������������������������������������������������������������������������������� 23 Oracle JET Webpack Support ������������������������������������������������������������������������������������������������������ 24 BackboneJS (Common Model) ���������������������������������������������������������������������������������������������������� 24 Oracle JET Modules �������������������������������������������������������������������������������������������������������������������� 31 Summary ������������������������������������������������������������������������������������������������������������������������������������ 31

Chapter 3: Support Ticket Application �������������������������������������������������������������������� 33 Scope ������������������������������������������������������������������������������������������������������������������������������������������ 34 Page Skeleton ����������������������������������������������������������������������������������������������������������������������������� 36 Ticket List ������������������������������������������������������������������������������������������������������������������������������������ 37 Viewing a Ticket �������������������������������������������������������������������������������������������������������������������������� 38 Replying to Tickets ���������������������������������������������������������������������������������������������������������������������� 39 Closing and Rating Tickets ���������������������������������������������������������������������������������������������������������� 40 Creating a New Ticket ����������������������������������������������������������������������������������������������������������������� 42 Notifications �������������������������������������������������������������������������������������������������������������������������������� 43 Searching for Tickets ������������������������������������������������������������������������������������������������������������������ 44 Summary ������������������������������������������������������������������������������������������������������������������������������������ 45

Chapter 4: Hello World �������������������������������������������������������������������������������������������� 47 Environment Setup ���������������������������������������������������������������������������������������������������������������������� 48 Oracle JET CLI ����������������������������������������������������������������������������������������������������������������������� 50 Integrated Development Environment (IDE) ��������������������������������������������������������������������������� 50 Scaffolding an Application ���������������������������������������������������������������������������������������������������������� 51

Table of Contents

Application Structure ������������������������������������������������������������������������������������������������������������������ 53 oraclejetconfig.json ��������������������������������������������������������������������������������������������������������������� 54 package.json and package-lock.json ������������������������������������������������������������������������������������ 54 Gruntfile ��������������������������������������������������������������������������������������������������������������������������������� 56 scripts Directory �������������������������������������������������������������������������������������������������������������������������� 56 config ������������������������������������������������������������������������������������������������������������������������������������� 56 hooks ������������������������������������������������������������������������������������������������������������������������������������� 57 Source Directory (src) ����������������������������������������������������������������������������������������������������������������� 57 index.html ������������������������������������������������������������������������������������������������������������������������������ 58 Oracle JET Build Tools ����������������������������������������������������������������������������������������������������������������� 61 Building ��������������������������������������������������������������������������������������������������������������������������������� 61 Serving ���������������������������������������������������������������������������������������������������������������������������������� 63 Mock API Setup ��������������������������������������������������������������������������������������������������������������������������� 65 Summary ������������������������������������������������������������������������������������������������������������������������������������ 71

Chapter 5: Theming ������������������������������������������������������������������������������������������������ 73 Why Is Theming Important? �������������������������������������������������������������������������������������������������������� 73 Use of Default Theming ��������������������������������������������������������������������������������������������������������������� 74 Oracle-Supplied Themes ������������������������������������������������������������������������������������������������������������� 74 Oracle Skyros Theme ������������������������������������������������������������������������������������������������������������� 74 Oracle Alta Theme ����������������������������������������������������������������������������������������������������������������� 75 SASS and CSS Custom Properties ���������������������������������������������������������������������������������������������� 77 Working in SASS ������������������������������������������������������������������������������������������������������������������������� 77 Variables and Importing Partials ������������������������������������������������������������������������������������������� 78 Nesting ���������������������������������������������������������������������������������������������������������������������������������� 78 Extend ������������������������������������������������������������������������������������������������������������������������������������ 79 Mixins ������������������������������������������������������������������������������������������������������������������������������������ 80 Theme Builder ����������������������������������������������������������������������������������������������������������������������������� 81 Creating a New Theme ���������������������������������������������������������������������������������������������������������������� 81 Including Custom SASS Partials �������������������������������������������������������������������������������������������� 83 The Three-Step Theme Process �������������������������������������������������������������������������������������������������� 84 Summary ������������������������������������������������������������������������������������������������������������������������������������ 85 vii Table of Contents

Chapter 6: Creating the Page Skeleton ������������������������������������������������������������������� 87 Flexbox ���������������������������������������������������������������������������������������������������������������������������������������� 88 The Flex Attribute ������������������������������������������������������������������������������������������������������������������ 89 align-items ���������������������������������������������������������������������������������������������������������������������������� 89 justify-content ����������������������������������������������������������������������������������������������������������������������� 90 flex-direction ������������������������������������������������������������������������������������������������������������������������� 90 flex-wrap ������������������������������������������������������������������������������������������������������������������������������� 91 Flex Within Oracle JET ���������������������������������������������������������������������������������������������������������������� 91 Setting Up the Application Structure ������������������������������������������������������������������������������������������� 92 Including List Component in View ����������������������������������������������������������������������������������������� 94 Creating the List ViewModel �������������������������������������������������������������������������������������������������� 96 Adding a Search Placeholder ������������������������������������������������������������������������������������������������ 99 Creating a Tab View ��������������������������������������������������������������������������������������������������������������� 99 Welcome Message and Avatar �������������������������������������������������������������������������������������������� 103 Theming ������������������������������������������������������������������������������������������������������������������������������������ 104 Header Padding ������������������������������������������������������������������������������������������������������������������� 104 Removal of Oracle Logo ������������������������������������������������������������������������������������������������������� 104 Setting List Container Height ����������������������������������������������������������������������������������������������� 104 Adding Color ������������������������������������������������������������������������������������������������������������������������ 105 Further Container Classes ��������������������������������������������������������������������������������������������������� 106 Component Styling �������������������������������������������������������������������������������������������������������������� 107 Footer ���������������������������������������������������������������������������������������������������������������������������������� 108 Summary ���������������������������������������������������������������������������������������������������������������������������������� 109

Chapter 7: Viewing Tickets ����������������������������������������������������������������������������������� 111 API Setup ���������������������������������������������������������������������������������������������������������������������������������� 111 List View Selections ������������������������������������������������������������������������������������������������������������������ 118 Extending Tab Functionality ������������������������������������������������������������������������������������������������������ 121 Closing Open Tickets ����������������������������������������������������������������������������������������������������������� 122 Busy Context ������������������������������������������������������������������������������������������������������������������������ 123

viii Table of Contents

Creating the View Ticket Module ����������������������������������������������������������������������������������������������� 123 Implementing Ticket View ��������������������������������������������������������������������������������������������������������� 125 Ticket Replies ���������������������������������������������������������������������������������������������������������������������� 131 Tidying Up and Styling ��������������������������������������������������������������������������������������������������������� 134 Support Representative ������������������������������������������������������������������������������������������������������������ 136 Summary ���������������������������������������������������������������������������������������������������������������������������������� 139

Chapter 8: Replying to Tickets ������������������������������������������������������������������������������ 141 API Setup ���������������������������������������������������������������������������������������������������������������������������������� 141 Setting Up ��������������������������������������������������������������������������������������������������������������������������������� 142 Copying over the CSS ���������������������������������������������������������������������������������������������������������������� 143 Initializing the Editor ����������������������������������������������������������������������������������������������������������������� 144 File Picker ��������������������������������������������������������������������������������������������������������������������������������� 147 Sending the Reply ��������������������������������������������������������������������������������������������������������������������� 150 What Is a Promise? �������������������������������������������������������������������������������������������������������������� 150 Creating a Promise �������������������������������������������������������������������������������������������������������������� 151 Reply Toolbar Button ����������������������������������������������������������������������������������������������������������������� 155 Installing FontAwesome ������������������������������������������������������������������������������������������������������������ 156 Displaying File Attachments ������������������������������������������������������������������������������������������������������ 157 Adding Icons to Buttons ������������������������������������������������������������������������������������������������������������ 159 Summary ���������������������������������������������������������������������������������������������������������������������������������� 160

Chapter 9: Ticket Management ����������������������������������������������������������������������������� 161 API Setup ���������������������������������������������������������������������������������������������������������������������������������� 162 Understanding Signals �������������������������������������������������������������������������������������������������������������� 162 add �������������������������������������������������������������������������������������������������������������������������������������� 163 dispatch ������������������������������������������������������������������������������������������������������������������������������� 163 dispose �������������������������������������������������������������������������������������������������������������������������������� 163 remove ��������������������������������������������������������������������������������������������������������������������������������� 163 Ticket Closure and Priority Update �������������������������������������������������������������������������������������������� 164 Ticket Closure Dialog ����������������������������������������������������������������������������������������������������������� 167

ix Table of Contents

Signal Listeners ������������������������������������������������������������������������������������������������������������������������ 168 Adding Ticket Ratings ��������������������������������������������������������������������������������������������������������������� 170 Summary ���������������������������������������������������������������������������������������������������������������������������������� 173

Chapter 10: Search Component ���������������������������������������������������������������������������� 175 Why Components? �������������������������������������������������������������������������������������������������������������������� 175 Creating Your First Component ������������������������������������������������������������������������������������������������� 176 loader.js ������������������������������������������������������������������������������������������������������������������������������� 177 component.json ������������������������������������������������������������������������������������������������������������������� 178 Built-in Events ��������������������������������������������������������������������������������������������������������������������� 180 Events and Slots ������������������������������������������������������������������������������������������������������������������ 180 inline-search-viewModel.js ������������������������������������������������������������������������������������������������� 181 inline-search-view.html ������������������������������������������������������������������������������������������������������� 184 inline-search-styles. ������������������������������������������������������������������������������������������������������ 185 Consuming the New Component ����������������������������������������������������������������������������������������������� 185 Summary ���������������������������������������������������������������������������������������������������������������������������������� 188

Chapter 11: Ticket Creation ���������������������������������������������������������������������������������� 189 API Setup ���������������������������������������������������������������������������������������������������������������������������������� 189 Create a Ticket Module ������������������������������������������������������������������������������������������������������������� 190 Adding Animation ���������������������������������������������������������������������������������������������������������������������� 193 Building the Creation Form ������������������������������������������������������������������������������������������������������� 195 Adding Attachments and Form Submission ������������������������������������������������������������������������������ 198 New Status and Zero Replies ���������������������������������������������������������������������������������������������������� 205 Refactor Ticket Replies ������������������������������������������������������������������������������������������������������������� 206 Summary ���������������������������������������������������������������������������������������������������������������������������������� 207

Chapter 12: Logging, Messages, and Validation ��������������������������������������������������� 209 Logging ������������������������������������������������������������������������������������������������������������������������������������� 209 Messages ���������������������������������������������������������������������������������������������������������������������������������� 211 Ticket Priority Escalation and Closure ��������������������������������������������������������������������������������� 213 Ticket Replies ���������������������������������������������������������������������������������������������������������������������� 215 x Table of Contents

Validation ���������������������������������������������������������������������������������������������������������������������������������� 216 Summary ���������������������������������������������������������������������������������������������������������������������������������� 220

Chapter 13: Automated Unit Testing ��������������������������������������������������������������������� 221 Installing Karma and Jasmine �������������������������������������������������������������������������������������������������� 221 Karma Setup ����������������������������������������������������������������������������������������������������������������������������� 221 test-main Setup ������������������������������������������������������������������������������������������������������������������������ 225 Writing a Test ���������������������������������������������������������������������������������������������������������������������������� 228 Summary ���������������������������������������������������������������������������������������������������������������������������������� 230

Index ��������������������������������������������������������������������������������������������������������������������� 231

xi About the Author

Daniel Curtis is a front-end developer specializing in Oracle’s JavaScript Extension Toolkit (JET). He has had an interest in technology from an early age, particularly web development, for which he taught himself PHP, MySQL, and HTML back in 2008. This eventually led him to build web sites for customers, alongside his studies throughout A levels and university. Since graduating, he now has more than five years’ experience working with different Oracle front-end technologies, including Oracle’s Application Development Framework (ADF), WebCenter Portal, and WebCenter Sites. He works for Griffiths Waite, a company based in Birmingham, UK, developing solutions for a number of enterprise customers. Daniel has most recently been involved in modernizing applications in Oracle JET and has written articles on the technology for Medium, the Oracle developer publication.

xiii About the Technical Reviewer

Geertjan Wielenga is an open source enthusiast working at Oracle and, before that, . Since starting at Sun Microsystems in , Czech Republic, in 2004, he has primarily focused on writing documentation and training materials for the free and open source NetBeans IDE. Gradually, as he participated in conferences and began setting up workshops, especially on the use of NetBeans IDE for the development of applications, as well as introductions to the NetBeans APIs and the development of large Java desktop applications on top of the NetBeans platform, he grew into a developer advocacy and product management role and specialized in Java and the tooling requirements connected to NetBeans IDE in support of Java. When Oracle took over Sun Microsystems, and the developer ecosystem began to embrace JavaScript as a useful language and ecosystem for the development of enterprise applications, NetBeans IDE was repositioned to provide tooling for JavaScript as much as it had for Java. Oracle’s strategy for JavaScript was developed and expanded over the years into an in-house front-end technology stack called Oracle JET. When Oracle JET was made available for external use as a free and open source technology stack, Geertjan joined the related product management team at Oracle, focusing specifically on promoting Oracle JET to the Oracle ecosystem and beyond. In the meantime, Oracle decided to share the cost of ownership of NetBeans IDE and, accordingly, donated it to the Apache Software Foundation. Together with his focus on promoting Oracle JET, Geertjan has been leading the NetBeans IDE transition of NetBeans IDE to the Apache Software Foundation from within Oracle. Through his experiences with customers, partners, and conferences, Geertjan has seen the strengths of the JavaScript ecosystem, as well as its gaps in the enterprise ecosystem. He has seen time and again how enterprises value Oracle JET’s enterprise-­ grade features and functionalities, and this continues to enthuse him in his role as product manager for Oracle JET.

xv Acknowledgments

I would like to thank everyone who has been involved in the journey of putting this project together. A special thank you to my colleagues at Griffiths Waite for their support and guidance from the get-go, especially to Andrew Bennett and Rich Barber. Thank you to my amazing girlfriend, Charlotte, who has not only had to put up with the late nights of writing but also created the book illustrations and given much needed encouragement along the way. To my parents and family, thank you so much for your support always. Finally, a thank you to Nick Dobson, for pushing me to do this; to Ian Watson, for proofreading; and to Reece Jacques, Oliver Butler, and James Potts, for being the best support network anyone could ask for.

xvii Introduction

Practical Oracle JET will walk you through the process of developing a functional application, using Oracle’s JavaScript Extension Toolkit (JET). Rather than being a typical theoretical book, it will guide you through the practical creation of a complete support ticket system, using a variety of different components bundled with the toolkit, including lists, inputs, and visualizations. The skills acquired from reading this book and working the examples will equip you to build your own applications and take your understanding even further to more advanced topics. A knowledge of JavaScript is expected before proceeding with this book. The technologies that JET uses under the hood will be explored, and complete code will be given in a chapter-by-chapter format on GitHub or JSFiddle (where specified).

xix