JAVA 8 COMPACT PROFILES 56 | GRADLE INTERNALS 60 | MESSAGING WITH MQTT 46

MARCH/APRIL 2017

magazine

By and for the Java community

UI Tools 17 24 30 40 SCRIPTING VISUAL DESIGN MVC 1.0: BUILDING WEB UI JAVAFX WITH WITH SCENE WITH THE MVC CONSTRUCTION FXML BUILDER ARCHITECTURE WITH ORACLE JET

ORACLE.COM/JAVAMAGAZINE //table of contents /

24 30 40 SCENE BUILDER: THE MVC 1.0: A FRESH, BUILDING BROWSER- JAVAFX UI DESIGN TOOL NEW FRAMEWORK BASED UIs WITH By Johan Vos FOR ENTERPRISE APPS ORACLE JET The interactive UI design tool By Josh Juneau By John Brock originally developed by Oracle A look at a remarkably flexible Using Oracle’s open source continues to advance in the framework that builds on JAX-RS JavaScript toolkit 17 open source community. ENHANCED FXML USING THE FXMLLOADER

By Andrés Almiray Gain greater flexibility in defining JavaFX UIs declaratively by exploiting the FXMLLoader mechanism.

COVER ART BY BOB MORRIS

04 46 60 59 From the Editor IoT Build User Groups The demanding economic model for JVM Simple Messaging with MQTT Gradle’s Java Philly JUG languages to be successful means that By Gastón Hillar Library Management 65 few will ever be widely adopted. Use the principal IoT messaging protocol By Peter Ledbrook to asynchronously send and receive data Java Proposals of Interest 06 As builds become more complex— JSR 372: JSF 2.3 from devices—in this case, from drones. consider monolithic repos—library Letters to the Editor 71 Comments, questions, suggestions, 56 dependencies present a special and kudos The Road to Java 9 challenge that build tools such as Contact Us Gradle are working at solving. Have a comment? Suggestion? 09 Exploring Compact Profiles Want to submit an article proposal? By Ben Evans 66 Events Need smaller executables? Migrate to Here’s how. Upcoming Java conferences and events Fix This Java 9. Can’t migrate? Then consider By Simon Roberts 14 Java 8’s Compact Profiles. Our latest code quiz Review Review of Java 8 refactoring video 01

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 EDITORIAL PUBLISHING Editor in Chief Publisher Andrew Binstock Jennifer Hamilton +1.650.506.3794 Managing Editor Associate Publisher and Audience Claire Breen Development Director Copy Editors Karin Kinnear +1.650.506.1985 Karen Perkins, Jim Donahue Audience Development Manager Technical Reviewer Jennifer Kurtz Stephen Chin ADVERTISING SALES DESIGN Sales Director Senior Creative Director Tom Cometa The brightest minds in Francisco G Delgadillo Account Manager Design Director Mark Makinney Richard Merchán Mailing-List Rentals tech are coming to Austin. Senior Designer Contact your sales representative. Arianna Pucherelli Designer RESOURCES Jaime Ferrand Oracle Products Senior Publication Designer +1.800.367.8674 (US/Canada) Sheila Brennan Oracle Services Production Designer +1.888.283.0591 (US) Kathy Cygnarowicz

ARTICLE SUBMISSION If you are interested in submitting an article, please email the editors. SUBSCRIPTION INFORMATION Subscriptions are complimentary for qualified individuals who complete the subscription form. Learn which open source models are right MAGAZINE CUSTOMER SERVICE [email protected] Phone +1.847.763.9635 for all—or even part—of your business at OSCON. PRIVACY Oracle Publishing allows sharing of its mailing list with selected third parties. If you prefer that your mailing address or email address not be included in this program, contact May 8– 11, 2017 Customer Service. oscon.com Copyright © 2017, Oracle and/or its affiliates. All Rights Reserved. No part of this publication may be reprinted or otherwise reproduced without permission from the editors. JAVA MAGAZINE IS PROVIDED ON AN “AS IS” BASIS. ORACLE EXPRESSLY DISCLAIMS ALL WARRANTIES, WHETHER EXPRESS OR IMPLIED. IN NO EVENT SHALL ORACLE BE LIABLE FOR ANY DAMAGES OF ANY KIND ARISING FROM YOUR USE OF OR RELIANCE ON ANY INFORMATION PROVIDED HEREIN. Opinions expressed by authors, editors, and interviewees—even if they are Oracle employees—do not necessarily reflect the views of Oracle. The information is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied JAVA MAGAZINE READERS GET upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle. Oracle and Java are registered trademarks of Oracle Corporation and/or its 20% OFF WITH CODE JAVA affiliates. Other names may be trademarks of their respective owners. Java Magazine is published bimonthly and made available at no cost to qualified subscribers by Oracle, 500 Oracle Parkway, MS OPL-3A, Redwood City, CA 94065-1600. 02

ORACLE.COM/JAVAMAGAZINE /////////////////////////////////////////// MARCH/APRIL 2017 Performance-Focused Developer Tool lets you see request breakdowns, IO queries, logs and exceptions without leaving the window or your webapp. Real time insight, 14 DAY FREE TRIAL! faster apps //from the editor /

The Best Resource The Rise and Fall of JVM Languages for Modern A viable business model is key to language adoption. Cloud Dev

The Oracle Developer or the last 18 months, we at Java Magazine guages (such as the JRuby port of Ruby and the Gateway is the best place F have been covering all sorts of interesting JVM Jython port of Python) and those that are built to jump-start your modern languages—from the well known to the obscure. from the ground up for the JVM (Groovy, Kotlin, cloud development skills There is no doubt we could continue doing this Scala, Golo, Fantom, and many others). Those in with free trials, downloads, for another couple of years without covering the the latter group often position themselves as an tutorials, documentation, same language twice. That’s in many ways the improved alternative to Java the language. And and more. glory of the JVM: it is a great platform for language indeed these languages do provide features or back ends. syntax that Java has not implemented—often Trials. Downloads. The benefits of the JVM include performance, for specific reasons. Other times, the languages Tutorials. Start here: wide availability and familiarity, excellent tools, lead to Java’s adoption of features, in which case developer.oracle.com and thorough documentation. In addition, there’s the Java team has the benefit of examining those a high level of confidence that the JVM will con- implementations when formulating its own. That tinue to be widely used, so languages that depend Oracle sees value in this dialogue is apparent on it won’t suddenly need to find a new platform in its longtime production of the JVM Language (as those that targeted Adobe Flash, for example, Summit at midyear, where JVM language design- developer.oracle.com were forced to do). ers come together to compare notes among them- JVM languages generally fall into two major selves and with the Java team members. categories: those that are ports of existing lan- Because of our long coverage of JVM lan- #developersrule

PHOTOGRAPH BY BOB ADLER/VERBATIM 04

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //from the editor /

guages, I am occasionally asked to cross the chasm as Groovy did— lents are developing and promot- which of them will become popu- that is, without serious financial ing Kotlin. lar enough to “cross the chasm.” backing. Writing a language is a In the process, Kotlin has This term, which originated in very expensive proposition, as morphed into more than just Geoffrey Moore’s book of the same is promoting it. While originally an efficiency tool for JetBrains. name, refers to an increase in an academic creation, Scala was Its intensely pragmatic orienta- popularity that drives a technol- backed by the startup Typesafe tion has strongly resonated with ogy from the exclusive domain of until the company realized—as a significant and active commu- Level Up at visionaries and early adopters into Pivotal did with Groovy—that nity, which accelerates its move- the wider embrace of pragmatists there is no revenue to be made ment across the chasm. Kotlin Oracle Code and especially of businesses. I in selling a new language. As a thereby enables JetBrains to bring believe there are only three lan- result, Typesafe changed its name new developers into its tool eco- Step up to modern cloud guages that are capable of this to Lightbend and refocused on its system. But the growing user development. At the crossing or have already done so: nonlanguage products. The break base also presents the company Oracle Code roadshow, Groovy, Scala, and Kotlin. from being the “Scala company” with the challenge that success- expert developers lead Groovy found success as a was so clean that the press release ful languages often face: manag- labs and sessions on PaaS, quirky scripting language that announcing the name change did ing the demands of users versus Java, mobile, and more. has filled numerous niches where not even mention the language in the company’s own desires for quick but expressive coding is the body of the announcement. the language. Get on the list needed. It is the scripting language As I said, there’s just no money Because economics support for event updates: for many testing frameworks and in languages. Kotlin’s evolution and JetBrains’ go.oracle.com/oraclecoderoadshow is used for writing build scripts Kotlin relies on a rather dif- longstanding knowledge of devel- in Gradle. It is also unique among ferent model. The language was opers will help it work with the the primary JVM languages (the devised in part for JetBrains’ community, I expect that within three mentioned above plus Java) internal use. Its design is prag- the next few years Kotlin will in that it did not require corporate matic and aimed at helping the fully cross the chasm and emerge sponsorship to become popular. company reduce costs in develop- as a—or possibly the—primary (Even though Pivotal did support it ing its extensive line of developer non-Java JVM language, so prov- for a few years, Groovy was popu- tools. The benefits of developing ing yet again the robustness of the lar long before Pivotal’s acquisi- and promoting Kotlin outweigh JVM ecosystem. tion and has continued to be since its costs and, crucially, JetBrains developer.oracle.com Pivotal stopped sponsorship.) This derives its income from products Andrew Binstock, Editor in Chief is testament to the community other than Kotlin. The costs, how- [email protected] #developersrule skills of the project’s longtime ever, are significant. According to @platypusguy leader, Guillaume Laforge. Andrey Breslav at JetBrains, more Today, no language can hope than two dozen full-time equiva- 05

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //letters to the editor /

| | JavaScript in Java Magazine guages are compiling to JavaScript. It has been exactly LOCAL-VARIABLE TYPE INFERENCE 60 SCALA 47 BLOCKCHAIN 36 JANUARY/FEBRUARY 2017 We received more than 30 replies to our request in the two years since Scala.js went from a science proj- magazine January/February issue (“The Polyglot Future”) for com- ect to something the Scala community is actively By and for the Java community ments about regular coverage of JavaScript. The replies promoting. And Kotlin is gunning to be both a Java boiled down to three principal points of view, as articulated replacement and a TypeScript replacement, which in the following three notes. has meant making Kotlin’s type system able to TOOLS impersonate JavaScript. 17 22 29 Lots of It! I’m not an Android developer, but my wife is an POLYGLOT: INSIDE THE BUILD YOUR OWN MOVING MAVEN ARCHITECTURE JVM DEBUGGING PAST XML OF BUILD TOOLS TOOLS Yes, please include a regular column on JavaScript. It iOS developer who works closely with Android and

ORACLE.COM/JAVAMAGAZINE can be arbitrarily large! web developers to keep their code in sync. Naturally JANUARY/FEBRUARY 2017 I have been a Java programmer for 16 years. Two they use JavaScript on all three platforms, and I’ve years ago, I landed in a job that required client-side suggested they look into React Native to help unify JavaScript coding. After a frustrating six months, I the codebase. React is something you could cover learned to respect JavaScript: it is a language and an without even mentioning JavaScript. ecosystem capable of producing quality software and If anything, the argument against covering fantastic tooling. JavaScript is that there’s just too much to do it justice. Despite seeing the elegance of libraries and per- It seems that every time you dip your toe in, some formance of runtimes like Node, I am wondering how new framework has taken over. Blink and you miss it. “large”-scale development is possible with a language I’d be fascinated to see a deep dive comparing the that does not have interfaces, like Java has. tradeoffs between JITs from HotSpot, Dalvik, and the I feel really curious to learn how Java program- various JavaScript JITs. But maybe that’s just me. mers with a similar mindset find their place in a —David Leppik world without interfaces and without a threading API (another topic that fascinates me). No JavaScript at All —Csaba Koncz I suggest “Absolutely None” for the introduction of other programming languages in Java Magazine. At Some JavaScript, Please the same time, I suggest another magazine that cov- My first thought after reading your editorial was, “I’d ers the polyglot issues discussed in the editorial, with read it, but I don’t know how much other JVM devel- topics involving basic and advanced programming opers want to hear about the JavaScript ecosystem.” integrated with some database, such as Oracle and But the more I think about it, the more I think it MySQL, as well as other programming languages. would be a disservice not to cover JavaScript. There’s a fine line between focusing on one thing and pretend- —Marcos André Pisching ing everything else doesn’t exist. Professor de Informática no Campus Lages do IFSC That’s especially true when JVM-focused lan- Brazil 06

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //letters to the editor /

Editor Andrew Binstock responds: “All told, the responses that, in turn, refer to multiple settings.gradle files.” were more than 75 percent in favor of inclusion of The only way you would be referring to multiple JavaScript on a regular basis. Based on this, we’ll begin settings.gradle files is if you’re working with mul- regular coverage of it in the next few issues. In the mean- tiple projects, even multiple multimodule projects. time, a JavaScript article that was scheduled long ago is However, each project, whether a standalone project or included in this issue. As we move forward, we’ll be care- a multi­module project, only ever has a single settings ful to keep in mind the recommendation of reader William .gradle file. McKenzie, who upon reassurance that JavaScript would not In addition, the text makes it seem like this “new come to dominate the content, kindly replied: ‘That sounds approach” of Kobalt is the only one that makes it pos- appropriate to me. I love [Java Magazine] and don’t want sible to “define multiple projects in one build file.” it to lose itself.’” This is also possible in Gradle, and it’s quite common. I certainly think it’s likely that Kotlin is going Blockchain Blockage to be the main scripting language for Gradle I liked the article “Blockchain: Using Cryptocurrency (Kobalt will likely contribute ideas for that), but it’s with Java,” in the January/February 2017 issue, but on important to be accurate and fair in comparisons page 44 the call of the method of existing procedures. —David Michael Karr Greeter.deploy(web3j, credentials, BigInteger.ZERO, new Utf8String("...")) Author Cédric Beust responds: “You are correct that most projects usually have one settings.gradle file, but that file is is not complete because you need to set the gasLimit. pretty much the only way to have multiple modules. Here What is the value of the gasLimit when the gasPrice is the typical way to do this from Gradle’s project itself.” is set to zero? —Elton DePaula Contact Us We welcome comments, suggestions, grumbles, kudos, Author Conor Svensson responds: “It’s best if you refer to article proposals, and chocolate chip cookies. All but the accompanying code in the GitHub repository. You can the last two might be edited for publication. If your see the correct values to use at this link. If you have any note is private, please indicate this in your message. further questions, you can also join the web3j community Please write to us at [email protected]. For on Gitter to get assistance.” other ways to reach us, see the last page of this issue.

Being Fair to Gradle Builds In his article on build tools (“The Design and Con­ struction of Modern Build Tools”), in the January/ February 2017 issue, Cédric Beust wrote, “With Gradle, you need to manipulate multiple build.gradle files 07

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017

//events /

JavaLand gies, frameworks, and tech- MARCH 28–30 niques. Past presentations BRÜHL, GERMANY have included “Introduction to This annual conference fea- Reactive Applications, Reactive tures more than 100 lectures Streams, and Options for the on subjects such as core Java JVM,” as well as “Microservice and JVM languages, enter- Standardization.” prise Java and cloud tech- nologies, IoT, front-end and JAX DevOps mobile computing, and much APRIL 3 AND 6, WORKSHOPS more. Scheduled presenta- APRIL 4 AND 5, CONFERENCE tions include “Multiplexing LONDON, ENGLAND and Server Push: HTTP/2 This event for software in Java 9,” “The Dark and experts features in-depth Light Side of JavaFX,” knowledge of the latest tech- “JDK 8 Lambdas: Cool Code nologies and methodologies that Doesn’t Use Streams,” for lean businesses. The focus “Migrating to Java 9 Modules,” is on accelerated delivery and “Java EE 8: Java EE cycles, faster changes in func- Security API.” tionality, and increased quality in delivery. Conference tracks O’Reilly Software include agile and company Architecture Conference culture, cloud platforms, con- GREAT INDIAN DEVELOPER SUMMIT APRIL 2–3, TRAINING tainer technologies, continu- APRIL 25–28 APRIL 3–5, TUTORIALS ous delivery and automation, BANGALORE, INDIA AND CONFERENCE microservices, and real-world The Great Indian Developer Summit (GIDS), now in its 10th year, offers NEW YORK, NEW YORK case studies. The conference four days of content grouped by theme. April 26 focuses on Java and This event promises four is preceded and followed by JVM languages. Other days focus on web, mobile, DevOps, and big data. days of in-depth professional a day of workshops. There’s Register for each day separately. training that covers software also a two-in-one conference architecture fundamentals; package that provides free real-world case studies; and access to a parallel conference, the latest trends in technolo- JAX Finance.

PHOTOGRAPH BY AMITH NAG PHOTOGRAPHY/GETTY IMAGES 09

ORACLE.COM/JAVAMAGAZINE /////////////////////////////////////////// MARCH/APRIL 2017 //events /

and Office,” examines all aspects development models, and DevOps. of the smart home or office: con- Workshops are offered on the trol of lighting, temperature con- day preceding and the day follow- trol, appliances, and security locks ing the conference. (No English for gates and doors. The Things page available.) Network—a global community whose mission is to build a global Devoxx UK IoT data network—is hosting its MAY 11–12 popular hackathon at the confer- LONDON, ENGLAND ence again this year. Devoxx returns to the UK with a focus on Java, web, mobile, JVM Java Day Istanbul 2017 languages, architecture, big data, MAY 6 and security. Attracting more than ISTANBUL, TURKEY 1,200 attendees, the conference With the slogan “By developers, includes more than 120 sessions, for developers,” this conference with 50-minute conference ses- organized by the Istanbul Java sions, three-hour hands-on labs, User Group explores Java, web, and many quickie presentations. mobile, big data, cloud, DevOps, and more. It also provides the Riga Dev Days 2017 Devoxx France topics ranging from web security opportunity for developers to MAY 15–17 APRIL 5, WORKSHOPS to cloud computing. (No English network with tech companies RIGA, LATVIA APRIL 6–7, CONFERENCE page available.) and startups. The biggest tech conference in PARIS, FRANCE the Baltic States, this three-day Devoxx France presents work- IoT Tech Day 2017 JAX 2017 event is a joint project of Google shops, tutorials, and keynotes APRIL 19 MAY 9–11, CONFERENCE Developer Group Riga, Java User from prestigious speakers, fol- UTRECHT, THE NETHERLANDS MAY 8 AND 12, WORKSHOPS Group Latvia, and Oracle User lowed by a cycle of eight mini Machine learning and AI, secu- MAINZ, GERMANY Group Latvia. By and for software conferences every 50 minutes. rity, wearables, and other smart More than 200 internationally developers, Riga Dev Days focuses You can build your own calendar technologies are among the top- renowned speakers give practical on the most-relevant topics and and follow the sessions as you ics investigated in Europe’s big- and performance-oriented lec- technologies for that audience wish. Founded by developers for gest IoT-centered conference. One tures on topics such as Java, Scala, with more than 50 sessions on developers, Devoxx France covers timely track, “Connected Living Android, web technologies, agile Java, web, and cloud programming.

PHOTOGRAPH BY GUILHEM VELLUT/FLICKR 10

ORACLE.COM/JAVAMAGAZINE /////////////////////////////////////////// MARCH/APRIL 2017 //events /

GeeCON 2017 ference in Eastern Europe. The tion, web, mobile, and interactive QCon New York MAY 17–19 annual conference focuses on developers, as well as engineers, JUNE 26–28, CONFERENCE KRAKOW, POLAND Java technologies for application architects, and UI/UX designers. JUNE 29–30, WORKSHOPS The GeeCON conference focuses development. This year offers five Training days and tutorials round NEW YORK, NEW YORK on Java and JVM-based tech- tracks and more than 50 speak- out the conference experience. QCon is a practitioner-driven con- nologies, with special attention ers with an emphasis on practical ference for technical team leads, to dynamic languages such as experience and development of EclipseCon 2017 architects, engineering directors, Groovy and Ruby. More than 80 real projects. Topics include mod- JUNE 20, “UNCONFERENCE” and project managers who influ- conference sessions cover topics ern approaches in the develop- JUNE 21–22, CONFERENCE ence innovation in their teams. such as enterprise architectures, ment of distributed, highly loaded, TOULOUSE, FRANCE The conference covers many dif- design patterns, distributed com- scalable enterprise systems with EclipseCon is all about the Eclipse ferent developer topics, frequently puting, software craftsmanship, Java, among others. ecosystem. Contributors, adopt- including entire Java tracks. mobile, and more. ers, extenders, service provid- jPrime ers, consumers, and business and JCrete J On The Beach MAY 30–31 research organizations gather to JULY 16–21 MAY 17, WORKSHOPS SOFIA, BULGARIA share their expertise. The two- KOLYMBARI, GREECE MAY 18–19, TALKS jPrime is a relatively new con- day conference is preceded by an This loosely structured “uncon- MALAGA, SPAIN ference, with two days of talks “Unconference” gathering. ference” involves morning ses- JOTB is an international rendez- on Java, JVM languages, mobile sions discussing all things Java, vous for developers interested in and web programming, and best Devoxx Poland combined with afternoons spent big data technologies. JVM and practices. The event is run by the JUNE 21–23 socializing, touring, and enjoy- .NET technologies, embedded and Bulgarian Java User Group and KRAKOW, POLAND ing the local scene. There is also a IoT development functional pro- provides opportunities for hack- For three days, 100 Java Cham­ JCrete4Kids component for intro- gramming, and data visualization ing and networking. pions, evangelists, and thought ducing youngsters to program- will all be discussed. Scheduled leaders inspire 2,500 developers ming and Java. Attendees often speakers include longtime Java O’Reilly Fluent Conference from 20 different countries at bring their families. Champion Martin Thompson and JUNE 19–20, TRAINING this installment of the popular Director of Developer Experience JUNE 20–22, TUTORIALS Devoxx conferences. Tracks on ÜberConf at Red Hat Edson Yanaga. AND CONFERENCE server-side Java, cloud and big JULY 18–21 SAN JOSE, CALIFORNIA data, JVM languages, web and DENVER, COLORADO JEEConf Fluent offers practical train- HTML5, and more are on offer. ÜberConf 2017 will be held at the MAY 26–27 ing for building sites and apps Hacking and networking round Westin Westminster in down- KIEV, UKRAINE for the modern web. This event out the experience. town Denver. Topics include JEEConf is the largest Java con- is designed to appeal to applica- Java 8, microservice architectures, 11

ORACLE.COM/JAVAMAGAZINE /////////////////////////////////////////// MARCH/APRIL 2017 //events /

Docker, cloud, security, Scala, JavaOne Groovy, Spring, Android, iOS, OCTOBER 1–5 Oracle Code Events NoSQL, and much more. SAN FRANCISCO, CALIFORNIA Oracle Code is a free event for Whether you are a seasoned developers to learn about the JavaZone 2017 coder or a new Java programmer, latest development technologies, SEPTEMBER 12, WORKSHOPS JavaOne is the ultimate source of SEPTEMBER 13–14, CONFERENCE technical information and learn- practices, and trends, including OSLO, NORWAY ing about Java. For five days, Java containers, microservices and API JavaZone is a conference for developers gather from around applications, DevOps, databases, Java developers created by the the world to talk about upcom- open source, development tools and low-code platforms, Norwegian Java User Group, ing releases of Java SE, Java EE, machine learning, AI, and chatbots. In addition, Oracle javaBin. The conference has and Java FX; JVM languages; new Code includes educational sessions for developing soft- existed since 2001 and now con- development tools; insights into ware in Java, Node.js, and other programming languages sists of around 200 speakers and recent trends in programming; and frameworks using Oracle Database, MySQL, and 7 parallel tracks over 2 days, plus and tutorials on numerous related NoSQL databases. an additional day of workshops Java and JVM topics. beforehand. You will be joined by US AND CANADA ASIA PACIFIC approximately 3,000 of your fel- Are you hosting an upcoming MARCH 27, Washington DC MAY 10, New Delhi, India low Java developers. Included in Java conference that you would the ticket price is a membership like to see included in this cal- APRIL 18, Toronto, Ontario, MAY 18, Tokyo, Japan in javaBin. endar? Please send us a link Canada JULY 14, Beijing, China and a description of your event JUNE 22, Atlanta, Georgia JULY 18, Sydney, Australia NFJS Boston at least 90 days in advance at AUGUST 4, Bangalore, India SEPTEMBER 29–OCTOBER 1 EUROPE AND MIDDLE EAST [email protected]. Other AUGUST 30, Seoul, South BOSTON, MASSACHUSETTS APRIL 20, London, England ways to reach us appear on the Korea Since 2001, the No Fluff Just Stuff last page of this issue. APRIL 24, Berlin, Germany (NFJS) Software Symposium Tour APRIL 28, Prague, Czech LATIN AMERICA has delivered more than 450 Republic events with more than 70,000 JUNE 27, São Paulo, Brazil attendees. This event in Boston MAY 22, Moscow, Russia JUNE 29, Mexico City, Mexico covers the latest trends within JUNE 6, Brussels, Belgium the Java and JVM ecosystem, JULY 11, Tel Aviv, Israel DevOps, and agile development environments. 12

ORACLE.COM/JAVAMAGAZINE /////////////////////////////////////////// MARCH/APRIL 2017

// review /

REFACTORING TO MODERN JAVA: GETTING THE MOST FROM JAVA 8 (LiveLessons video) By Trisha Gee Pearson/InformIT LiveLessons

Although this column regularly developers, and if you don’t know fully understand her point because focuses on books, in this issue we the syntax for lambdas or under- you’re still trying to catch up with look at a training video sold com- stand what functional interfaces are, what she said 15 seconds ago. My mercially by the InformIT divi- you’ll quickly find yourself stum- other complaint is that Gee lets the sion of Pearson, the company bling as you try to follow along. In IDE (IntelliJ) find refactorings and behind Addison-Wesley and other this sense, the video is tremen- implement them, so they’re too respected imprints. dously satisfying precisely because it often done in the blink of an eye. This video is a downloadable avoids introductory material. That is, She helpfully shows before and product (priced around US$100) that you must know Java 8 going in. after code in some examples, but consists of DRM-free MP4 files. All After presenting the refactor­ it would be easier to follow if we told, they represent several hours of ings, Gee cleverly spends a signifi- saw her make the changes manu- high-quality instruction. I watched cant amount of time assessing the ally rather than see code instantly the videos on my desktop and performance impact of the code transformed by a keystroke. In this opened the window to fill the screen changes. She does this using the Java regard, although Gee claims that so that I could read the code and see Microbenchmarking Harness (JMH) all the refactorings are available in the changes easily. and shows that some but not all other IDEs, I found that some were The lecturer is Java Champion refactorings improve performance. not available in NetBeans. I did not Trisha Gee, who is a frequent and It’s kind of a fascinating process verify Eclipse. well-respected speaker at confer- to watch. Overall, my reservations are ences. Here she presents a variety Despite the high production about details, not about content, of refactorings that are available values of the video and Gee’s prac- which is uniformly highly instruc­ because of the innovations intro- ticed delivery (she never stutters tive and full of immediately appli- duced in Java 8. Gee focuses primar- or repeats and easily moves back- cable information. Gee has posted a ily on lambdas, streams, Optionals, ward and forward through subjects less intense and shorter version of and several lesser features. To follow to explain a given topic), the video this video on YouTube, so you can along, you will need to understand has a few aspects that could bear sample the goods before buying these features. The video is squarely improvement. At times Gee speaks this. I expect you’ll be as impressed aimed at intermediate to advanced very fast, which makes it hard to as I am.—Andrew Binstock 14

ORACLE.COM/JAVAMAGAZINE /////////////////////////////////////////// MARCH/APRIL 2017

UI TOOLS Building User Interfaces

SCRIPTING JAVAFX 17 | DRAG-AND-DROP DESIGN 24 | MVC 1.0 30 | JAVASCRIPT UI WITH ORACLE JET 40

epending on how your genes are wired, you either love build- FXML. Scene Builder was originally an Oracle tool that was released to open ing UIs or find it to be the most annoying task in program- source and taken over by Gluon, which has been maintaining it ever since. ming—surpassing even fixing Aunt Thelma’s printer because, Front ends to web applications have their own unique needs, and we you know, you’re the computer wizard. Regardless of your cover those too in a pair of articles: one on MVC 1.0 (page 30), a web view of UI development, there can be no denying the now framework that at one time was considered for inclusion in Java EE 8, Dparamount importance of the UI or, put more lavishly, the UX (that is, and another on a JavaScript toolkit, Oracle JET (page 40), which provides the user experience). Even the among many resources a large most jaded developers recognize palette of useful controls with the need for attractive apps with easy ways to wire them together. intuitive interfaces. As a result, If UIs are not your favorite most of us are now accustomed topic, we have you covered with to designers sitting in on product a detailed discussion (page 46) and app creation and providing of using MQTT, one of the main feedback and direction as the messaging protocols in IoT. project unfolds. You’ll also find an interesting Coding UIs used to be an awful dive (page 60) into how the up- chore, with endless minute and-coming build tool Gradle adjustments having to be con- uses libraries. And finally, we stantly recoded. Fortunately, revisit a topic we’ve covered JavaFX greatly facilitated UI before: compact profiles in construction by scripting it with Java 8 (page 56). In addition, of FXML, which is discussed in our course, we offer our usual quiz— first article page( 17). Our sec- this time with the inclusion of ond article (page 24) explores questions from the entry-level the drag-and-drop design tool exam—as well as plenty of other Scene Builder, which can generate goodness. Enjoy!

ART BY BOB MORRIS 16

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools / Enhanced FXML Using the FXMLLoader Gain greater flexibility in defining JavaFX UIs declaratively by exploiting ANDRÉS ALMIRAY the FXML loader mechanism.

he JavaFX UI toolkit delivers a refreshing and modern You have probably seen FXML before, but in case you T set of APIs that can be used to build desktop and mobile haven’t, here’s a quick sample. The following code snippet applications that target the JVM. Similar to its predecessor, defines a grid in which six UI elements are placed in a Swing, JavaFX provides a standard widget set, as well as the two-column layout: means to extend this widget set with custom components and new behavior. sample/app.fxml JavaFX also adds new capabilities such as property bind- ings, styling support via CSS, and a UI description format named FXML. As the name implies, it’s an XML-based format that enables developers to define user interfaces in a declara- tive way, as opposed to defining interfaces by procedural means—that is, by directly using the JavaFX APIs. The following benefits are some of the advantages of choosing FXML over the programmatic API: a hierarchical structure given that it represents the UI ele- relates to a graphical element, such as a button, label, or text archy in FXML than in plain code. dynamic UI elements to be added/created at specific points ■■ In many cases, writing FXML results in shorter UI definitions.

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

GridPane.columnIndex="1" GridPane.rowIndex="2"/> For now, you only need to tell FXMLLoader the location of the FXML resource that you want to load. It’s important to remember that the action of creating UI elements and attach- Figure 1 shows how the application looks when running. ing them to the SceneGraph must happen inside the UI thread Note that, as in Java code, you must specify import state- (known as the FX application thread). Bad things can happen ments for the types that are used in the FXML file. These when you do not follow this rule. Fortunately, the base type import statements serve as a hint to the FXML loading Application provides a basic lifecycle that ensures code can mechanism that’s in charge of interpreting the declarative be called inside such a thread. In this particular case, the UI description and turning it into a proper SceneGraph with start method is guaranteed to be called inside the UI thread, the UI elements in it. This loading mechanism is known as which means everything is OK. FXMLLoader. Using FXMLLoader is straightforward, as shown by the following code: Node Properties If you look closely at the FXML snippet in the first example, sample/App.java you’ll see that the FXML nodes Label and Button define a package sample; text attribute. This attribute is in turn mapped to a JavaBean property found in the matching type. Thus when FXMLLoader import javafx.application.Application; instantiates the first Label it encounters, it sets the label’s import javafx.fxml.FXMLLoader; text property to the exact value of the text attribute. In other import javafx.scene.Scene; words, it’s as if FXMLLoader invoked the following code on import javafx.stage.Stage; your behalf:

import java.net.URL; Label label = new Label(); label.setText("Username:"); public class App extends Application{ // insert label into SceneGraph @Override public void start(Stage stage) throws Exception { That’s quite a short snippet, and this functionality doesn’t URL fxml = getClass().getClassLoader() seem to be much of an advantage right now; however, take .getResource("sample/app.fxml"); into consideration that UI elements may have several prop- FXMLLoader fxmlLoader = new FXMLLoader(fxml);

stage.setScene(new Scene(fxmlLoader.load())); stage.sizeToScene(); stage.show(); } } Figure 1. Login screen using FXML 18

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

erties that you might want to set. As you continue to define You can use the Node type as the first argument because it’s more nodes and attributes, the benefits of FXML will become the supertype of all JavaFX UI elements. This allows GridPane apparent. It’s worth noting that the node type (Label, in this to work with any kind of UI element, both those coming from case) must define properties matching the JavaBeans conven- the standard widget set and those provided by third-party tion, resulting in a pair of methods that can be used to query libraries. You’ll note that the previous method definitions (the getter) and mutate (the setter) the property. The property take an integer as a second argument; however, the FXML becomes invisible to FXMLLoader if either of these methods file defines the corresponding values as literals. That works is missing. This should be your first clue to understanding because FXMLLoader is capable of applying type conversions. why a particular FXML snippet doesn’t work in the way you It does so for all basic types and for enums. One more con- expect—it could be that the property you’re attempting to set cern would be storing the value in relation to the supplied is not a properly defined JavaBeans property. node. Again, the JavaFX API comes to your aid because the You might also be wondering about the additional prop- base type Node has a handy properties map that can be used erties on all six elements that need to be specified to use to store any kind of value, and that’s precisely what these GridPane as a namespace. These properties do not exist on methods do. the target nodes themselves, yet they affect the nodes. You Armed with this new knowledge, you can create your can verify the previous statement by changing the values of own synthetic properties. Synthetic properties are properties columnIndex and rowIndex; depending on the new values, you that are not explicitly defined in the target type; rather, might end up with a funny layout. they relate to the target type by external means, such as a What’s going on then? As it turns out, these properties contextual dictionary. Suppose you had the requirement to are defined by the GridPane class and not the target nodes. limit the number of characters a user may type into either This is why the name of the class appears as a namespace. the Username or Password field. You could create a new util- These two properties happen to be defined as static methods ity class that defines a pair of methods that take a Node and on the GridPane class, which means they are not JavaBeans a number, using the provided number as a limit. The utility properties per se, but part of a convention that FXML class could look like this: enables. As before, each property must have a getter and a setter pair of methods. Additionally each method must have package sample; the static modifier. One last part of the convention is that the methods must take the target node as their first argu- import javafx.scene.control.TextInputControl; ment. This results in the following method definitions found in GridPane: public final class InputControlUtils { private static final String LIMIT = " limit"; public static void setColumnIndex(Node node, int index); public static void setMaxTextLimit( public static int getColumnIndex(Node node); TextInputControl control, int maxLength) { public static void setRowIndex(Node node, int index); control.getProperties().put(LIMIT, maxLength); public static int getRowIndex(Node node); control.textProperty() 19

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

.addListener((ov, oldValue, newValue) -> { if (control.getText().length() > maxLength) { String s = control.getText() .substring(0, maxLength); } TextInputControl control) { if (value instanceof Number) {

} } } There are two other features to be mentioned when deal­ Note that this code does not take into account any invalid ing with properties in FXML. The first is the ability to values (such as maxLength being equal or less than zero), define the name of a default property, which allows you to nor does it provide the means to unregister the listener if omit the property name when defining the hierarchy. The the setMaxTestLimit method is called more than once with name of the property must be defined in code by apply- the same target node. This code is for illustration purposes ing the @javafx.beans.DefaultProperty annotation to and should not be used “as is” in production without the target type. Many of the UI elements in the stan- addi­tional tweaks. dard JavaFX widget set use this annotation. For exam- Moving on, you only need to update the FXML definitions ple, the javafx.scene.layout.Pane type, which is the to look like this: base type for many widget containers, is annotated with @DefaultProperty("children"). This allows you to write sample/app.fxml FXML as shown in the previous example instead of this: sample/app.fxml 20

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

this.top = top; this.right = right; this.bottom = bottom; } public Insets(@NamedArg("topRightBottomLeft") double topRightBottomLeft) { this.top = topRightBottomLeft; FXML support in popular IDEs is so well integrated that this.right = topRightBottomLeft; the IDEs can point out if there’s a default property that can this.bottom = topRightBottomLeft; be used instead of having it spelled out in the FXML file. this.left = topRightBottomLeft; Speaking of tooling, it’s worth mentioning that you can write } FXML by hand, or you can use a free visual tool named Scene Builder, which is described in the accompanying article on This use of annotations enables you to define instances in page 24. either of the following ways: I should also mention that you have the ability to supply additional hints to FXMLLoader when you are instantiating a type. So far, I’ve shown only types that follow the JavaBeans conventions by providing a no-argument constructor. This is or what FXMLLoader expects by default. However, sometimes you might encounter a node that defines a constructor that takes arguments. Without the ability to supply additional hints, FXMLLoader would simply fail to instantiate the node. You can That’s all I can say about properties support in FXML for now. help it by supplying a name for the constructor arguments Next, let’s examine how to configure the FXMLLoader itself, as if they were regular properties. To do this, you use the using internationalization as an example. @javafx.beans.NamedArg annotation. You must define a name for the argument, and you may define a default value for it Configuring FXMLLoader for Internationalization if the attribute is omitted in the FXML file. Here’s a concrete Many languages are spoken in the world today. As a devel- example found in the standard JavaFX API—the Insets class oper, you must take into account the target audience of the defines the following constructors: applications you build. Sometimes users speak a different language than you speak, so you must be ready to provide a public Insets(@NamedArg("top") double top, version that’s suitable for their needs. @NamedArg("right") double right, JavaFX widgets are aware of the locale and other regional @NamedArg("bottom") double bottom, settings exposed by the JVM, which results in widgets being @NamedArg("left") double left) { rendered in right-to-left or left-to-right order depending 21

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

on the situation. But you can’t say the same about the string You also must change the FXML file to reflect the keys of the literals you add to the application. It would be great if you properties you just defined. The convention is to use % as a could somehow externalize those literals and have the FXML prefix to distinguish a key value from a literal value. Your IDE files refer to them. Fortunately, FXMLLoader has just what might even be able to suggest key completions. you need to solve this problem. You may supply it a Resource Bundle at construction time or set the bundle as a property in any way you see fit. My little example, sample/App.java, ClassLoader cl = getClass().getClassLoader(); String resource = "sample/messages_en.properties" ResourceBundle bundle =

FXMLLoader fxmlLoader = new FXMLLoader(fxml, bundle); You also define the following pair of properties files: one using English (en) as the default locale and another using If you run the application again, you should see the same German (de): visuals as in Figure 1. Now, change the code to load the German version of the properties file, and you’ll notice the sample/messages_en.properties file: application looks like Figure 2. Great! These are the first steps to get localization sup- username.label=Username: port in an application. As mentioned earlier, you can create password.label=Password: the ResourceBundle in many ways that are commonly used in action.cancel.label=Cancel regular Java programming. A further step would be to make action.login.label=Login

sample/messages_de.properties file:

username.label=Benutzername: password.label=Passwort: action.cancel.label=Abbrechen action.login.label=Anmeldung Figure 2. German login screen 22

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

the application react to locale changes at runtime. If you choose to do this, you’ll need to find a way to let the widgets know that a change of locale has occurred and that the new key values must be fetched again. I’m afraid that FXMLLoader alone is not enough, but you have all the basic blocks to get started.

Conclusion The brightest minds in tech FXML provides a quick and easy way to define UIs declara- tively. The tooling support (IDEs and SceneBuilder) is good are coming to New York. enough to get you started writing FXML with ease. Many of the node types that you can use inside FXML are straight- forward, because they follow the JavaBeans conventions. But when they don’t, there’s still a way to use them with FXML given that the format provides useful extensions and hints to its loading mechanism, FXMLLoader. You can also configure localization concerns on widgets via FXML, enabling a wider audience for your applications. In an upcoming article, I’ll examine the mechanism exposed by FXMLLoader and FXML to further customize and bind the widgets defined in the FXML file—for example, features such as the fx:controller attribute and the @FXML annotation.

Andrés Almiray is a Java and Groovy developer and a Java Practical training in the tools, techniques, Champion with more than 17 years of experience in software de- and leadership skills you need for the evolving sign and development. He has been involved in web and desktop world of software architecture. application development since the early days of Java. He is a true believer in open source and has participated in popular projects April 2– 5, 2017 such as Groovy, JMatter, Asciidoctor, and others. He’s a founding member and current project lead of the Griffon framework, and he softwarearchitecturecon.com/ny is the specification lead for JSR 377.

JAVA MAGAZINE READERS GET learn more 20% OFF WITH CODE JAVA Oracle’s tutorial on FXML 23

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools / Scene Builder: The JavaFX UI Design Tool The interactive UI design tool originally developed by Oracle continues to JOHAN VOS advance in the open source community.

cene Builder is a popular tool that enables developers to How It Works Screate Java user interfaces (UIs) using an intuitive drag- On the JavaFX code side, the FXMLLoader class loads an FXML and-drop approach. It was initially created and maintained file from the JAR containing the application file or from the by Oracle and open-sourced. Since March 2015, Gluon has classpath: distributed the releases of Scene Builder for Mac, Linux, and Windows systems. In that time, there have been more than FXMLLoader.load(getClass().getResource("FXML.fxml")); 400,000 downloads of the tool. Gluon continues to develop Scene Builder. In this article, I discuss how to use the tool. The connection between your Java code and the UI elements For readers familiar with Scene Builder from the days when that are declared in the FXML file is made by a controller Oracle distributed it, this will serve as both a refresher and class. This is a regular Java class that may contain annota- an update. tions linking the UI elements to Java classes. This approach separates the UI declaration from the behavior of the applica- About Scene Builder tion, while still allowing the application to access the UI ele- UIs for Java client applications can be created programmati- ments directly. cally using JavaFX code, or declaratively, using FXML code. The loader will find the name of the controller class, as The declarative approach requires FXML, which is a for- specified by fx:controller="your.package.name.FXML mat based on XML and well documented by Oracle. While Controller" in the FXML file. Then the loader creates an it is possible to create complete UIs writing directly FXML instance of that class, in which it tries to inject all the objects code, it is a tedious process. Fortunately, you can design a that have an fx:id tag in the FXML file and are marked with UI interactively using Scene Builder, which then translates the @FXML annotation in the controller class. Finally, when the your UI into FXML that can be used together with other whole FXML file has been loaded, the FXMLLoader will call the JavaFX code. controller’s initialize method. In practice, many applications contain both JavaFX code Although the FXML file can be edited within any IDE as a and FXML code. The JavaFX APIs and the FXML constructs are regular XML file, this practice is not recommended, because PHOTOGRAPH BY TON HENDRIKS designed to work together. the IDE provides only basic syntax checking and autocomple- 24

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

tion but not visual guidance. A better approach is to open the installing it on Windows. (This is a new feature available in FXML file with Scene Builder. Scene Builder 8.3.0.) Once you have installed Scene Builder, open your IDE so you can set its location and you can open Installing Scene Builder any FXML file from your IDE: You can install Scene Builder by downloading it. Make sure to ■■ On NetBeans, select Tools -> Options (or Preferences on download the right version for your operating system. Then Mac) -> Java -> JavaFX, and click Browse to find the main follow the platform-specific instructions for installing it in Scene Builder folder. the default location, or select a custom location if you are ■■ On IntelliJ, select File -> Settings (or Preferences on Mac)

Figure 1. Adding containers and controls 25

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

-> Languages & Frameworks -> JavaFX, and browse for the If you want to have interactions between the FXML file application path. and your Java code, you need to specify the name of the con- ■■ On Eclipse, select Window -> Preferences (or Preferences on troller class. This name should be added to the FXML file in Mac) -> JavaFX, and browse for the application path. the Controller panel. You open the Controller panel by click- Whenever you have an FXML file, you will be able to edit it ing the widget in the lower left corner. with Scene Builder simply by right-clicking it and selecting If you want to access UI elements from your Java code (via Open with Scene Builder. the controller class), you need to make sure the value provided in the fx:id tag is exactly the same as the value of the @FXML Creating a Basic Interface annotation for the corresponding field in the controller class. You can open an existing FXML file with Scene Builder, or To make this easier for the developer, and to avoid typos, you can open the Scene Builder application and create a new Scene Builder can generate a sample controller skeleton for FXML file. you. This sample controller is auto-generated Java code that Creating a UI with Scene Builder is easy. You can drag and contains FXML-annotated fields for all UI elements that are drop containers and controls to your view. Let’s step through tagged with fx:id. an example. You can easily copy the different nodes to the controller To begin with, open Scene Builder, and select Start New by selecting View -> Show Sample Controller Skeleton. Click Project from the Welcome menu. For mobile projects, a built- the Copy button, and on your IDE paste the content into the in Gluon Mobile theme is set. If you want to create a regular controller class. JavaFX project, you can do this by selecting the Modena Typical code will look like Listing 1. theme from Preview -> JavaFX theme -> Modena (FX8). Add a main container for your scene. In this example, I Listing 1. Sample Skeleton will add a BorderPane. You can drag a BorderPane from the import com.gluonhq.charm.glisten.control.AppBar; Containers left panel to the middle of the screen or to the import com.gluonhq.charm.glisten.control.Avatar; hierarchy panel. import javafx.fxml.FXML; In a similar way, you can drag and drop any JavaFX built- import javafx.scene.control.ScrollPane; in container or control (see Figure 1, previous page). You can import javafx.scene.layout.StackPane; use the Library Manager to include libraries containing cus- tom controls. The online documentation can help with any- public class GluonFXMLSampe { thing that’s not intuitive. A Hierarchy panel is available. It shows the hierarchy @FXML of containers and controls. If you want to use containers private AppBar appBar; and controls in your Java code, you need to tag them with fx:id. This can be done in the Code right panel. This fx:id @FXML tag is a very important concept, because it bridges the world private StackPane stackPane; of the designer using Scene Builder with the developer code in an IDE. @FXML 26

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

private ScrollPane scrollPane; You can easily add CSS to the scene by providing a CSS file that can be included using the Stylesheets option in the @FXML Properties panel on the right. You can add inline styling also, private Avatar avatar; by providing style rules to any node on the scene. You can apply new or existing style classes to any node as well. } Features related to layout, such as position, dimensions, margin, padding, and transforms (translation, rotation,

Figure 2. Defining anchor pane constraints in the Layout panel 27

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

scaling, and so forth), can be set in the Layout right panel, as @FXML shown in Figure 2. private HBox hBox; At any moment, you can preview the created scene by clicking Preview -> Show Preview in Window. A resizable private Label label; dialog box with the designed scene will be shown. By resizing it, you can make sure every node behaves as expected. public void initialize() { label = new Label(); Integrate the Basic Interface in a Java App and Show It hBox.getChildren().add(label); Once the FXML is ready, you can integrate it into your Java titledPane1.expandedProperty() application by calling FXMLLoader to load it. Here’s how: .addListener((obs, ov, nv) -> { if (nv) { public class GluonSceneBuilder extends Application { label.setText("TitledPane1"); } @Override }); public void start(Stage stage) throws Exception { . . . Parent root = FXMLLoader.load(getClass() } .getResource("GluonFXML.fxml")); In a controller class, you can annotate not only fields repre- Scene scene = new Scene(root); senting controls with the @FXML annotation, but also meth- stage.setScene(scene); ods. As an example, I define the following event handler in stage.show(); the controller: } } @FXML void buttonClicked(ActionEvent event) { In the controller class, you can add the required action han- label.setText("Button"); dlers and the response to the user interaction. You can create } new controls as well, and combine them with those injected by the FXMLLoader. Notice that for the controls you add pro- This event handler simply sets the text of the Label to grammatically, you need to create new instances. This is "Button". Because the event handler annotated it with @FXML, not needed for controls that are declared in the FXML file, Scene Builder will find it and can assign it to a corresponding because the FXMLLoader already creates them for you. The action for a node. code snippet below shows a piece of a controller class that works with two controls: an HBox control defined in the FXML Integrate the Interface with Your Favorite IDE file, and a Label that is not created in the FXML file. The HBox Scene Builder is a standalone application. When FXML is instance does not need to be created in the controller class, being edited outside Scene Builder (by directly modifying it but the Label instance does. in your IDE, for example), Scene Builder reacts to the changes 28

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

made in the FXML itself or in the CSS files after those trols during design time. This ability makes it much easier to changes are saved. Scene Builder also manages to find the work on complex controls, such as controls that at runtime controller and the different nodes annotated with@FXML . require connections to external resources and databases that If you prefer to use Scene Builder fully integrated with are not available at design time. One of the most commonly your preferred IDE, IntelliJ offers this option by using the ver- requested functionalities is better integration with third- sion of Scene Builder installed in your system. Note that not party libraries that are available via public repositories. In all options are supported. For example, there is no support for the past, developers had to manually upload those libraries menus, and custom controls are not allowed. in Scene Builder. Starting with Gluon Scene Builder 8.2, the For Eclipse, there is no built-in integration, but there is Maven Central repository is fully supported, allowing search- a Preview option. On Window -> Show View -> Other select ing, downloading, and installing for any third-party library JavaFX -> JavaFX Preview. That option works like the Preview available in Maven Central or even private repositories. You option on Scene Builder, and you can interact with it. In addi- can access these features by selecting the JAR/FXML Manager tion, by toggling the Load controller button, it applies the option, as shown in Figure 3. controller and works as if you were running the application Scene Builder then inspects those libraries, and the embedded in the Preview panel. However, it doesn’t work controls it finds in the libraries are added to the Custom left with custom controls. panel so they can be easily included in the FXML file.

Community Enhancements in Scene Builder Conclusion Although most of the Scene Builder code was contributed by Scene Builder is a tool originally developed by Oracle that Oracle, the end product is really a synergy between Oracle enables developers to create UIs using an intuitive drag-and- and the JavaFX community. The code for Scene Builder is drop interface. Thanks to the @FXML annotation and the ability now being maintained by Gluon, but it contains contributions to assign identifiers and event handlers to controls in Scene from many individuals and companies in Builder, the workflow between Scene Builder and your JavaFX the JavaFX community. application code is easy. As a consequence, many major and minor bug fixes have been applied in Scene Johan Vos (@johanvos) started working with Java in 1995. He Builder, and new functionality has been was part of the Blackdown team, porting Java to Linux. In 2015, he added. As with any open source project, cofounded Gluon, which enables enterprises to create mobile Java anyone can report a bug or submit a pull client applications leveraging their existing back-end infrastruc- request with a proposed feature or fix. ture. Gluon received a Duke’s Choice Award in 2015. Vos is a Java Among the most recent improvements Champion and a member of the BeJUG steering group, the Devoxx steering group, and the JCP. He is the lead author of Pro JavaFX 8 to Scene Builder are that it now works with (Apress, 2014). an optimized set of imports, and other new features such as a design-time flag. The design-time flag allows developers to Figure 3. The JAR/FXML Manager menu provide different behavior for their con- 29

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools / MVC 1.0: A Fresh, New Framework for Enterprise Apps A look at a remarkably flexible framework that builds on JAX-RS JOSH JUNEAU

pplications can be built using several different design Why MVC 1.0? A architectures. Developers have come a long way from For many of years, the most popular MVC framework for use developing web applications using a single JSP page and with Java EE has been JavaServer Faces (JSF), which follows embedding Java source code directly into the page. Main­ the MVC architecture and cleanly separates each of the three tenance on such applications was miserable, and they were categories. The JSF framework makes web application devel­ not much fun to develop. Nowadays, developers have learned opment easy, because it takes much of the guesswork out of that it makes sense to separate code into different portions to the design and, thus, allows the developer to focus on the promote easier maintenance and development. business logic. That said, JSF makes some assumptions for the One of the most popular application design architectures developer and is not very flexible in some areas. For instance, is model-view-controller (MVC). This architectural pattern JSF is very targeted with regard to scoping, and each request separates logic into three distinct categories. The model per­ follows a complex set of phases through which validation and tains to the database and any code that is used to bind data; other tasks occur. JSF can be customized, but there are certain the view is the code that is used to generate the front end; and ceremonies that must be followed in order to do so. the controller pertains to the application business logic and One of the key features of JSF is the bundled component intermediate code between the data and the web view. The architecture, which allows web components to be bundled MVC 1.0 framework follows the MVC design architecture, and and made portable for other JSF applications. This abstracts it puts the developer into the driver’s seat for making low- the details of the JavaScript and CSS from the developer, so a level design choices and developing custom web controls. tag can simply be placed into the view to render a fully imple­ MVC 1.0 was considered for inclusion in Java EE 8 (as mented component. JSF has a large ecosystem of component JSR 371). Since that time, Oracle has instead sought to move libraries available, which provide many options. control of the project to the community. In this article, I exam­ MVC 1.0 does not contain any components, leaving the ine this new framework and explain why I like it, even though view completely up to the developer. However, this design there are many other great choices. I also develop an applica­ does not mean options are not available, because MVC allows tion from the ground up using MVC 1.0 in the NetBeans IDE, just about any view technology to be used to create a front allowing you to follow along each step of the way. end. The new framework does not contain request phases, 30

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

because requests are handled completely by the implementa­ ect site and deploy it along with your tion of controller methods. Given that view options are abun­ WAR file to a valid container, such as An MVC 1.0 dant and the request/response is completely open to custom GlassFish 4.1. For the purposes of this application is development, the MVC framework promises to deliver a very example, I deploy to the GlassFish 5 simply a JAX-RS flexible web development option. Where JSF is component- nightly build, and I include Ozark based and handles much of the session management for the 1.0.0 -m02 and MVC API 1.0-edr2 application that developer, MVC leaves the developer to create applications as dependencies in the POM file of consists of one or using just about any view technology, and it hands over full the project. more resources control of the session management. Server and Project annotated with Building a Project with MVC 1.0 To get started, create a new NetBeans @Controller. The MVC framework reference implementation, named Maven web application project, and Ozark, was defined in JSR 371. This framework is layered on name it DukeIssueTracker. Once the top of JAX-RS. If you are familiar with JAX-RS, you will find it project has been generated, add the easy to use. If you are not familiar with JAX-RS, you can learn required dependencies to the POM, as shown in Listing 1. both MVC and JAX-RS reading this article, because they both Configure the application to run on JDK 8 and the GlassFish or function very much the same way. Payara server of your choice. In this article, I walk through the development of the Duke Issue Tracker application, illustrating the basics of the Listing 1. MVC framework along the way. To follow along, you need to have a solid understanding of how Java EE applications are javax.mvc built. I use NetBeans 8.2 here, which already provides sup­ javax.mvc-api port for MVC 1.0, but you can follow along with the IDE of 1.0-edr2 your choice. provided Duke Issue Tracker is used to create and view issues for Duke’s application. The initial view of the application lists all of the open issues in the upper half of the UI and displays an org.glassfish.ozark issue -creation form on the lower half. An Apache Derby data­ ozark base is used to store the data, and this article demonstrates 1.0.0-m02 how to use JAX-RS web services and Enterprise JavaBeans provided (EJBs) to read, create, and update data. MVC is not quite a production-ready framework. Even though it is fairly developed at this point, it has not yet been Next, I have created a small set of tables that needs to be completed, nor has it been released as part of any produc­ installed into the local Apache Derby database or the database tion application server. This means you will need to obtain of your choice. To do so, run the create.sql file that is pack­ the Ozark reference implementation JAR file from the proj­ aged with the source code against the database. 31

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

The application requires a beans.xml Contexts and Listing 3. Dependency Injection (CDI) configuration file to be placed package org.mvc.dukeissuetrackermvc; within the WEB-INF folder. The beans.xml file should con­ figure all beans to be automatically discoverable, as shown in import java.util.HashMap; Listing 2. import java.util.Map; import javax.mvc.security.Csrf; Listing 2. import javax.ws.rs.ApplicationPath; } Entity Classes and RESTful Client The views for the application are placed inside the WEB- This application uses entity classes that are mapped to the INF folder because MVC 1.0 searches for view files there and database tables that have been generated for the Apache because the contents of WEB-INF are protected by the con­ Derby database. For the purposes of this application, I use the tainer. Create a folder named views within WEB-INF in which JAX -RS client API to invoke RESTful web services that will to place the view files. For the purposes of this article, I use provide the data for the application. Use NetBeans wizards Facelets for the view engine, but you can opt for JSP or other to easily generate entity classes from the database and the view languages if you choose. RESTful application infrastructure. An MVC 1.0 application is simply a JAX-RS applica­ Once the entity classes and web services have been tion that consists of one or more resources annotated with generated, create a service class that uses a JAX-RS client to @Controller. Because the MVC framework is based upon read from the web services to obtain data. Create a class in JAX-RS, application configuration must provide the URL a new package named org.mvc.dukeissuetracker.service, pattern that will be used to access the controller methods and name the class DukeIssueTrackerService. This class is or JAX-RS resources. I create a new Java class in a pack­ a CDI ApplicationScoped bean, and it creates a new JAX-RS age named org.dukeissuetrackermvc.config, and I name client in a method annotated with @PostConstruct so that the class ApplicationConfig. The class should extend the the client is generated when the class is constructed. Once javax.ws.rs.core.Application class. I annotate the class the client is created, it will be used to load the data from the with @ApplicationPath("tracker") to indicate that “tracker” RESTful web service into a locally defined list of DukeIssues should be applied to the end of the application path URL to objects. The full listing (due to its length, available from Java access RESTful or MVC resources. Listing 3 contains the com­ Magazine’s download area) contains the complete source code plete code for this class. for the DukeIssueTrackerService class, which also includes 32

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

accessor methods that make the but it is also possible for the return type to be declared via the JAX -RS client available to the rest of A controller class @Produces annotation. the application. is instantiated The code in Listing 4 demonstrates a simple controller and initialized class, which navigates to the issues.xhtml view when the Controllers URL http://localhost:8080/DukeIssueTracker/tracker/ Controllers are responsible for han­ for each request, issues is used. dling web requests and responses for so there is no state an MVC application. In other words, saved in between Listing 4. they bind the view to the data model @Path("/issues") and provide the necessary business requests. @Controller logic for the application. A controller public class IssuesController { class is a CDI-managed plain old Java @GET object (POJO) that contains both a public String displayIssues() { @Path and a @Controller (javax.mvc.annotation.Controller) //Perform processing and set Model annotation at the class level, or has at least one method return "issues.xhtml"; annotated with @Path and @Controller. It should also have at } least one method annotated as a resource method, using @GET, } @PUT, or @POST. A controller is very much the same as a JAX-RS class, The return type of a controller method determines how except that it uses different annotations to signify that the the request is processed. Various return types are possible, controller class or method is used for MVC rather than for including Viewable, JAX-RS Response, Redirect, and String. JAX -RS. If @Controller is placed at the class level, all meth­ As mentioned before, the default return type is String, but ods of the class must be used as MVC controllers. However, a the @View annotation can also be used to indicate the view to controller class can be made hybrid by placing the annotation which the browser should be directed after processing. If it is at the method level. Hybrid classes can contain both MVC and placed on a method, the return type should be void. Redirects JAX -RS resource methods. are possible via the use of the JAX-RS Response object’s A controller class is instantiated and initialized for each seeOther() method, or the client redirect prefix (return request, so there is no state saved in between requests. To redirect:see/here). save state or data to display in views, you must use models, Building the controller. I now create a class in a new org which I cover in the next section. .dukeissuetrackermvc.web package named IssuesController. The @Path annotation is used to determine which con­ This class is annotated with @Controller, and it contains each troller class and method is invoked when the URL including of the issue tracker resource methods. the indicated pattern is navigated to from within a browser. Next, I create a method annotated with @GET (from The return type of a controller method returns the String javax.ws.rs.GET) that will be used for retrieving all active name of the view to which the browser will navigate upon issues in the tracker. I name the method displayIssues() return. The default return type of a controller is text/html, and provide a return type of String. The @GET annotation is 33

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

used to denote a method that returns data to the view. In this } case, the database will be queried using the JAX-RS client, return issue; which invokes the RESTful endpoint to obtain the issues and } stores them in a request-scoped CDI bean named IssuesBean (see Listing 5). /** * @param issue the issue to set Listing 5. */ @Named public void setIssue(Issue issue) { @RequestScoped this.issue = issue; public class IssuesBean { }

private Issue issue; }

/** Listing 6 shows the entire code, this far, for the * @return the issueList IssuesController class. */ public List getIssueList() { Listing 6. return issueList; @Controller } @Path("/issues") public class IssuesController { /** * @param issueList the issueList to set @Inject */ private DukeIssueTrackerService public void setIssueList( dukeIssueTrackerService; List issueList) { this.issueList = issueList; @Inject } private IssuesBean issuesBean;

private List issueList; @GET public String displayIssues(){ /** issuesBean.setIssueList( * @return the issue dukeIssueTrackerService.getIssueList()); */ return "issues.xhtml"; public Issue getIssue() { } if(issue == null){ } issue = new Issue(); 34

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

The issues.xhtml view will be displayed in the browser after In the case of a CDI bean, the name of the bean or the value the IssuesBean is loaded with data. provided to the @Named annotation is used to reference the data within a view. Models The model of the application refers to the data binding Views between the data store and the application logic. In the case The view pertains to the presentation layer of the applica­ of MVC 1.0, data can be made available to the application tion or the web views. The MVC framework supports two controller, and subsequently to the views, by the injection standard view engines out of the box—JSP and Facelets— of a standard javax.mvc.Models map or via CDI beans. The although others are available. You can also create a new view preferred technique to make data available is via CDI-based engine to support any view technology that is not already models, which is the technique I use here. However, all MVC covered by generating a view engine that implements the 1.0 implementations support the Models instance as well. javax.mvc.engine.ViewEngine interface. A view engine is The Models map allows data objects to be made avail­ used to locate and load views, prepare required models, and able to the views via a series of key/value pairs in the render the views back to the client. This application uses the Models map. Much like a standard HashMap, Facelets view engine, along with PrimeFaces UI components. the key can be used to access the object, which is the value Building the view. I create a folder within the WEB-INF folder of the map. In an MVC 1.0 view, the key can be used to obtain and name it views. All the views for the application are placed access to the data that has been placed into the Models object. within this folder, because this is the place where the frame­ In the following case, the data would be available via the view work searches for view files. Next, I create a new Facelet view by referencing the dukeIssues key: named issues.xhtml within the newly generated folder. Facelets is not enabled by default, so to enable it, a web … .xml deployment descriptor or a faces-config.xml file must @Inject be created for the application. Once that is generated, add private Models models; the configuration shown in Listing 7 to enable the Facelets … view engine. public String displayIssues(){ … Listing 7. models.put("dukeIssues",data); return "issues.xhtml"; Faces Servlet } javax.faces.webapp.FacesServlet The default technique, CDI-based models, relies upon the generation and proper scoping of CDI beans to hold 1 data that will be made available to views. IssuesBean, shown in Listing 5, is used by DukeIssueTracker to hold the List object and make it available to the views. Faces Servlet 35

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

*.xhtml shows an abbreviated form of the completed class. Once it is created, the Issue class is passed as a parameter to the createIssue() method, and it is annotated with @BeanParam to I open the newly created issues.xhtml file and add the denote that parameter fields are contained within the class. markup contained in Listing 8. (Due to its length, Listing 8 should be downloaded from Java Magazine’s download area Listing 9. or from the projects GitHub repository, which is shown in the import java.math.BigDecimal; links at the end of this article.) import javax.validation.constraints.Size; By taking a look at the code, you can see that I can use import javax.ws.rs.FormParam; the CDI bean containing the issues by referencing it via public class Issue { issuesBean.issueList, as shown here: @FormParam(value="id") private String status;

Finishing Up @FormParam(value="priority") I’ve now built the first part of the application successfully. private int priority; That is, if the application is deployed and the URL http:// localhost:8080/DukeIssueTracker/tracker/issues is vis­ @FormParam(value="requestorFirstName") ited, the displayIssues() method in IssuesController is private String requestorFirstName; invoked, and the issues.xhtml view is rendered, displaying the list of issues. The form to submit a new issue has not yet @FormParam(value="requestorLastName") been attached to the IssuesController, so that needs to be private String requestorLastName; done next. Looking at the markup in issues.xhtml, a form is @FormParam(value="requestorEmail") used to make submissions to http://localhost:8080/ private String requestorEmail; DukeIssueTracker/tracker/issues/create, so a resource method annotated with @Path("/create") must be added @Size(max = 150) to IssuesController. I name the method createIssue and @FormParam(value="subject") provide a String return type. The MVC framework uses the private String subject; @FormParam annotation to bind HTML values to Java fields, just like JAX-RS. Therefore, I create a new Java class named Issue @Size(max = 2000) within the org.mvc.dukeissuetracker.web package, and cre­ @FormParam(value="description") ate fields to map against the issue-creation form. Listing 9 private String description; 36

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

... public String createItem(@BeanParam Issue form) { //Accessor methods DukeIssues entity = new DukeIssues(); ... entity.setId(new Long( } dukeIssueTrackerService.getIssueList().size() + 1));

To implement the creation, a DukeIssues object should entity.setDescription(form.getDescription()); be instantiated within the createIssue() method of entity.setSubject(form.getSubject()); IssuesController, and the fields should be populated with DukeUser user = new DukeUser(); those fields from the Issue class. Corresponding DukeUser, user.setId(Long.valueOf( DukePriority, and DukeStatus objects should also be instan­ dukeUserFacade.count()+1)); tiated and populated accordingly. Finally, a DukeIssuesFacade user.setEmail(form.getRequestorEmail()); EJB createItem() method is called upon to persist the new user.setFirstName(form.getRequestorFirstName()); record. Listing 10 shows the source code for the method. user.setLastName(form.getRequestorLastName()); entity.setRequestor(user); Listing 10. DukePriority priority = new DukePriority(); @POST priority.setId(Long.valueOf( @Path("/create") dukePriorityFacade.count()+1)); @Controller priority.setPriority(form.getPriority()); entity.setPriority(priority); DukeStatus status = new DukeStatus(); status.setId(Long.valueOf( dukeStatusFacade.count()+1)); status.setStatus("OPEN"); entity.setStatus(status); // Create record dukeIssuesFacade.create(entity); // Initialize issue list dukeIssueTrackerService.setIssueList(null); issuesBean.setIssueList( dukeIssueTrackerService.getIssueList());

return "issues.xhtml";

}

Figure 1. Duke Issue Tracker main view The final product should look like Figure 1. 37

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

Validation Listing 11. Validation can be performed in several ways. Bean valida­ import javax.inject.Inject; tion is performed within the Duke Issue Tracker, because import javax.mvc.Models; the fields of the Issue class are annotated with suitable bean import javax.ws.rs.core.Response; validation annotations. During the creation of an issue, if a import javax.ws.rs.ext.ExceptionMapper; field does not pass validation requirements specified in the import javax.ws.rs.ext.Provider; bean validation constraints, the creation will fail. Annotating a resource method argument as @Valid triggers the validation @Provider of the bean on every form post. public class GenericExceptionMapper implements However, controller methods can be executed even if ExceptionMapper { validation errors are found, as long as they are declared as capable of handling the errors. The javax.mvc.binding @Inject .BindingResult can be injected into a controller class to private Models models; indicate that they are capable. The BindingResult provides detailed information regarding any validation errors that are @Override encountered. Therefore, custom validation algorithms can be public Response toResponse(Exception exception) { coded into the resource methods if needed. models.put("message", exception.getMessage());

Exception Handling return Response.status( Exceptions can be handled on a case-by-case basis using Response.Status.BAD_REQUEST) standard try/catch methodology. Often, returning a JAX-RS .entity("/WEB-INF/error.xhtml") Response object with an error code—as shown below—is .build(); the best way to provide the user with information regarding } the exception: }

Return Response.status( Listing 11 also demonstrates a clean way of adding messages to Response.Status.BAD_REQUEST) the Models map to display within the view. .entity("error.xhtml").build(); Security It can become cumbersome if the same exception occurs MVC 1.0 controllers are required to support cross-site request multiple times in an application. In such cases, a global forgery (CSRF) validation of tokens. The Csrf object can be exception handler can be created by generating a class that injected via the MvcContext type or via #{mvc.csrf} within implements the javax.ws.rs.ext.ExceptionMapper class. expression language (EL). A form can be protected by using Listing 11 demonstrates a global exception handler for java EL to embed a Csrf object into a form, and it will be vali­ .lang.Exception. dated upon submission. The HTTP header can also be used to propagate the Csrf object. Automatic validation is enabled by 38

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

setting the property CsrfOptions.IMPLICIT, or manual Observers can be used for logging or other work that must validation can be configured by setting the property be done when a particular event occurs. An observer can be CsrfOptions.EXPLICIT and annotating resource methods configured by using the @Observes annotation on a resource with @CsrfValid. method parameter, followed by the CDI event to observe.

Additional Items public void onBeforeProcessView There are several ways to pass parameters to resource (@Observes BeforeProcessViewEvent e) { methods, and this article covered only @FormParam. Other // do some work techniques are the use of query and path parameters. A } query parameter is passed to the method at the end of the URL using the following notation: Note that CDI observers are fired in a synchronous manner, so long -running tasks should not be handled within an observer. /controller?param1=value¶m2=value Conclusion Path parameters are passed to the resource method as part The MVC 1.0 framework provides a very flexible solution, of the URL using the following notation: worthy of serious consideration for enterprise apps. There are numerous excellent posts on MVC 1.0, and I recommend per­ /controller/param1/param2 forming web searches to read the bevy of content and exam­ ples already available on this new framework. Query parameters can be indicated using the @QueryParam annotation, and path parameters can be indicated using the Josh Juneau (@javajuneau) is a Java Champion and an applica- @PathParam annotation within the resource method signa­ tion developer, system analyst, and database administrator. He is a ture. Listing 12 demonstrates how to use a path parameter in technical writer for Oracle Technology Network and Java Magazine, a resource method. and he has written several books on Java and Java EE for Apress. Juneau is also a JCP expert group member for JSRs 372 and 378. Listing 12. @POST @Path("/date/{year}/{month}") public String pathParamDate( learn more @PathParam("year") int year, @PathParam("month") int month) { GitHub project source code models.put("specifiedDate", month + "/" + year); Ozark project site return "showDate.xhtml"; MVC specification } Adding MVC to GlassFish 39

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools / Building Browser-Based UIs with Oracle JET A look inside Oracle’s open source JavaScript toolkit JOHN BROCK

racle JavaScript Extension Toolkit, or Oracle JET as it’s installed on your system. (Note that Node.js is required only Omore commonly called, is a modular toolkit based on a for the installation.) collection of open source libraries and open source code con- To install and create your own Oracle JET application, tributed by Oracle. It helps JavaScript developers build pure open a terminal or command-prompt window and follow the client-side user interfaces that consume and interact with web steps below. services such as REST and WebSocket. The toolkit is designed Using npm, install the following libraries: so you can use as little or as much as you need. It’s as non­ prescriptive in nature as possible. npm install –g bower grunt-cli yo Why should a Java developer even care about a JavaScript npm install –g generator-oraclejet toolkit? With the increasing demand each year for develop- ers to be versed in more aspects of the application stack, it’s Once you have the supporting libraries installed, you are becoming critical for Java developers to understand the client ready to generate your first Oracle JET application by typing space as well as the traditional server space. Whether you are the following: responsible for developing REST services that an application will integrate with or the full application, you will inevitably yo oraclejet --template=navdrawer need to know something about how that JavaScript client is written. It could be only for testing purposes, but you will This command will create a subdirectory with the that you provided and then install and configure all some point. the required files for the Oracle JET application, using one of Oracle JET is designed to be a comfortable toolkit for many sample application shells as a template. In this case, it the traditional JavaScript developer. Installation is provided will use an application shell that works on both desktop and through the Node.js npm and bower modules, while starter mobile web browsers. If everything goes correctly, you should templates are provided by using a Yeoman generator. The see a prompt with wording similar to: steps that follow assume that you are familiar with JavaScript and with Node.js, and that you already have Node.js and Git Oracle JET: Your app is ready! Change to your new app 40

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

directory [application name] and try grunt build The browser opens automatically (on localhost at port 8000). and serve… The application should show a mostly empty dashboard win- dow when the browser opens. Now that you have your application shell created, you can run If you resize the browser window or use the browser tools the sample app and see how it looks in a browser. To do this to render the content in mobile mode, you will see that the from the terminal or command-prompt window, type the application shell is already configured as a responsive appli- following commands in your application’s root directory: cation and will change layout depending on the viewport size. Figure 1 shows this same dashboard in a simulated device grunt build environment (here, the “device toolbar” in the Developer grunt serve Tools menu of Google Chrome).

Figure 1. The sample application in a simulated mobile environment Figure 2. Cookbook samples 41

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

Getting started is always the tricky part for anything The input field will take a city name; the selection menu will new. With Oracle JET, you can use a helpful feature of the allow you to select a state; and the button will call a REST ser- Oracle JET website called the Cookbook, which has recipes vice to get all of the fueling stations offering alternative fuels for all kinds of display components and widgets. Figure 2 in that city and state. The chart will display the returned data. shows some samples. The code in the Cookbook is live, so Using radio buttons, you can select whether you want to see you can make changes to HTML, JavaScript, or CSS and see the results as a bar chart or a pie chart. You will also be able the changes with a simple click of the Apply button. This is a to click any of the items in the legend of the chart to show or great way to learn about the API and various options for dif- hide that particular item. Figure 3 is what the final application ferent UI components. looks like. Once you are ready to add to your own code, you can Note that out of the box, all Oracle JET UI components simply copy and paste the HTML and JavaScript to your own meet the Web Content Accessibility Guidelines (WCAG) 2.0 application and continue your development. at the AA level. While this might not mean much to some For this example, I am going to add one text input field, developers, it should be a goal of all developers to write soft- a selection menu, a button, a radio button set, and a chart. ware that can be used by persons with or without disabilities. Beyond this just being the right thing to do, it’s also a requirement for many gov- ernment and public sector customers, as well as many enterprises around the world. Let’s take a look at the code behind the sample application. The architec- tural structure of an Oracle JET application follows the Model-View-View model (MVVM) pattern. MVVM is derived from the model- view-controller (MVC) pat- tern and is designed to sepa- rate development of the view layer (usually HTML) from the business logic and data layers (usually JavaScript and JSON, respectively). The Figure 3. What the sample application will look like toolkit is designed to be as 42

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

modular as possible, thereby allowing developers to use as CSS in their respective /js and little or as much of it as they like. It provides a two-way data /css folders. Build scripts are Because Oracle JET binding method based on the open source library Knockout kept separate in their own is a pure client-side .js. While Knockout is not required by Oracle JET, it is used /scripts folder. All the main toolkit, the only way to heavily in samples and documentation as a default bind­ application code is placed under ing mechanism. UI components are wrapped as jQuery UI the /src folder so you can sepa- consume and interact widgets, and a custom Knockout binding integrates those rate what would be included for with remote data is via components into the larger source code management from web services such as MVVM pattern. jQuery UI what would be platform-specific. was chosen because of the The starter templates pro- REST or WebSocket. hundreds of third-party UI vided by Oracle JET are set up components available for to allow you to build for mul- it on the internet. These tiple platforms. You can build a third-party components web or mobile hybrid application from the same source code. can be used with few issues Currently Android, iOS, and Windows are supported mobile in any Oracle JET–based platforms. At build time, native themes are added for the application. platform that you have selected, so the application’s form The inclusion of elements and other platform-specific theming automatically RequireJS with Oracle JET is look like those of a native app. You can see a lot of this in to provide lazy loading of action by changing the themes in the Cookbook on the Oracle resources through the use of JET website. the Asynchronous Module In addition to the accessibility features mentioned earlier Definition (AMD) API. With (which also carry over to mobile apps), all Oracle JET UI com- large enterprise-ready ponents are touch- and gesture-enabled out of the box. If you applications, which might have a touchscreen on your laptop, Oracle JET–based applica- have hundreds of JavaScript tions will work properly. libraries, it is critical to per- Looking at the code itself, you will notice that the index formance to have the ability .html file provides the shell of the application, while the to manage the dependen- main content is actually loaded using a feature called cies among those librar- ojModule. This design enables developers to think of their ies as well as to load only pages as separate modules that are loaded into the content specific libraries when they area asynchronously when they are needed. This approach are needed. allows for more-distributed work on an application, because The directory structure different teams can work on different modules without step- Figure 4. The default directory shown in Figure 4 is a com- ping on each other’s code. An ojModule binding consists of its structure mon one with JavaScript and own HTML (view) and JavaScript (viewModel) file. As shown 43

ORACLE.COM/JAVAMAGAZINE //////////////////////////////////////////// MARCH/APRIL 2017 //ui tools /

in Figure 4, there are separate directories for views and view- Notice that the getData method is bound to the click event Models as part of the app structure. In this sample applica- for the Search button. The values for the input field and tion, all code was added to the dashboard module (dashboard selection menu are also bound to values that are defined in .html and dashboard.js files). the viewModel. This data binding functionality is provided The dashboard view file is where you focus on writing by Knockout. your HTML code. Oracle JET is what is often referred to as an Looking at the viewModel, you can see that the Knockout HTML forward toolkit. This means that you use the semantics observables are defined, along with their default values in the of HTML5 itself to provide layout and structure to your appli- following code: cation. This is in contrast to a JavaScript forward framework, where you would write JavaScript to generate your HTML. The self.handleActivated = function (info) { business logic is handled in the dashboard viewModel file. self.cityVal = ko.observable('San Jose'); The following code excerpt is an example of what the self.chartType = ko.observable('pie'); view looks like: self.selectVal = ko.observableArray(['CA']); self.pieSeriesValue = ko.observableArray([]);

self.groupsValue = ko.observableArray(['Fuel Types']); Enter City and State self.seriesValue = ko.observable();

the value of one of these variables, anything bound to it on fied and updated as well. This is what two-way data bind-

The getData() method that is called when the Search button is clicked is shown in the following code: