Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise...
Transcript of Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise...
Practical Oracle JETDeveloping Enterprise Applications
in JavaScript
Daniel Curtis
Practical Oracle JET: Developing Enterprise Applications in JavaScript
ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6https://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 SpahrAcquisitions Editor: Jonathan GennickDevelopment Editor: Laura BerendsonCoordinating 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 [email protected], 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
Daniel CurtisBirmingham, UK
Dedicated to all my family, friends, and Charlotte.
To Berni, your spirit and determination continue to influence us all.
v
About the Author ��������������������������������������������������������������������������������������������������� xiii
About the Technical Reviewer ���������������������������������������������������������������������������������xv
Acknowledgments �������������������������������������������������������������������������������������������������xvii
Introduction ������������������������������������������������������������������������������������������������������������xix
Table of Contents
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
vi
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
vii
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
Table of ConTenTs
viii
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
Table of ConTenTs
ix
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
Table of ConTenTs
x
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�css ������������������������������������������������������������������������������������������������������ 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
Table of ConTenTs
xi
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
Table of ConTenTs
xiii
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.
xv
About the Technical Reviewer
Geertjan Wielenga is an open source enthusiast working at Oracle and, before that, Sun
Microsystems. Since starting at Sun Microsystems in Prague, 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
Java applications, as well as introductions to the NetBeans APIs and the development
of large Java Swing 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.
xvii
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.
xix
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 basic 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).