14
Practical Oracle JET Developing Enterprise Applications in JavaScript Daniel Curtis

Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

  • Upload
    others

  • View
    6

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

Practical Oracle JETDeveloping Enterprise Applications

in JavaScript

Daniel Curtis

Page 2: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

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

Page 3: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

Dedicated to all my family, friends, and Charlotte.

To Berni, your spirit and determination continue to influence us all.

Page 4: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

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

Page 5: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

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

Page 6: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

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

Page 7: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

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

Page 8: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

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

Page 9: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

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

Page 10: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

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

Page 11: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

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.

Page 12: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

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.

Page 13: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

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.

Page 14: Practical Oracle JET978-1-4842-4346-6/1.pdf · Practical Oracle JET: Developing Enterprise Applications in JavaScript ISBN-13 (pbk): 978-1-4842-4345-9 ISBN-13 (electronic): 978-1-4842-4346-6

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).