Covers JavaFX v1.2 IN ACTION Simon Morris MANNING JavaFX in Action JavaFX in Action SIMON MORRIS MANNING Greenwich (74° w. long.) For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. Sound View Court 3B Greenwich, CT 06830 email: [email protected] ©2010 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15% recycled and processed without the use of elemental chlorine. Development Editor: Tom Cirtin Manning Publications Co. Copyeditor: Linda Recktenwald Sound View Court 3B Proofreader: Elizabeth Martin Greenwich, CT 06830 Typesetter: Gordan Salinovic Cover designer: Leslie Haimes ISBN 978-1-933988-99-3 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – MAL – 14 13 12 11 10 09 To my father, the coolest folk singer this side of the Mersey. (Be honest, Dad, if you’d known how obsessed I was going to get, would you have agreed to buy my first computer?) contents preface xiii acknowledgments xv about this book xvii about the title xxi about the cover illustration xxii Welcome to the future: introducing JavaFX 1 1 1.1 Introducing JavaFX 2 Why do we need JavaFX Script? The power of a DSL 2 ■ Back to the future: the rise of the cloud 4 ■ Form follows function: the fall and rebirth of desktop Java 6 1.2 Minimum effort, maximum impact: a quick shot of JavaFX 8 1.3 Comparing Java and JavaFX Script: “Hello JavaFX!” 10 1.4 Comparing JavaFX with Adobe AIR, GWT, and Silverlight 11 Adobe AIR and Flex 11 ■ Google Web Toolkit 11 ■ Microsoft Silverlight 12 ■ And by comparison, JavaFX 12 1.5 But why should I buy this book? 12 1.6 Summary 13 vii viii CONTENTS JavaFX Script data and variables 15 2 2.1 Annotating code with comments 16 2.2 Data types 17 Static, not dynamic, types 17 ■ Value type declaration 17 Initialize-only and reassignable variables (var, def) 20 Arithmetic on value types (+, -, etc.) 21 ■ Logic operators (and, or, not, <, >, =, >=, <=, !=) 22 ■ Translating and checking types (as, instanceof) 23 2.3 Working with text, via strings 24 String literals and embedded expressions 24 ■ String formatting 25 ■ String localization 26 2.4 Durations, using time literals 28 2.5 Sequences: not quite arrays 29 Basic sequence declaration and access (sizeof) 29 ■ Sequence creation using ranges ([..], step) 30 ■ Sequence creation using slices ( [..<] ) 31 ■ Sequence creation using a predicate 32 Sequence manipulation (insert, delete, reverse) 32 ■ Sequences, behind the scenes 34 2.6 Autoupdating related data, with binds 34 Binding to variables (bind) 35 ■ Binding to bound variables 36 Binding to a sequence element 36 ■ Binding to an entire sequence (for) 37 ■ Binding to code 37 ■ Bidirectional binds (with inverse) 38 ■ The mechanics behind bindings 39 ■ Bound functions (bound) 40 ■ Bound object literals 42 2.7 Working nicely with Java 43 Avoiding naming conflicts, with quoted identifiers 43 ■ Handling Java native arrays (nativearray of) 44 2.8 Summary 45 JavaFX Script code and structure 46 3 3.1 Imposing order and control with packages (package, import) 47 3.2 Developing classes 48 Scripts 48 ■ Class definition (class, def, var, function, this) 49 Object declaration (init, postinit, isInitialized(), new) 52 ■ Object declaration and sequences 54 ■ Class inheritance (abstract, extends, override) 55 ■ Mixin inheritance (mixin) 58 Function types 61 ■ Anonymous functions 62 ■ Access modifiers (package, protected, public, public-read, public-init) 64 CONTENTS ix 3.3 Flow control, using conditions 67 Basic conditions (if, else) 67 ■ Conditions as expressions 68 Ternary expressions and beyond 69 3.4 Sequence-based loops 70 Basic sequence loops (for) 70 ■ For loops as expressions (indexof) 71 ■ Rolling nested loops into one expression 71 Controlling flow within for loops (break, continue) 72 ■ Filtering for expressions (where) 73 3.5 Repeating code with while loops (while, break, continue) 73 3.6 Acting on variable and sequence changes, using triggers 74 Single-value triggers (on replace) 74 ■ Sequence triggers (on replace [..]) 75 3.7 Trapping problems using exceptions (try, catch, any, finally) 76 3.8 Summary 78 Swing by numbers 79 4 4.1 Swing time: Puzzle, version 1 82 Our initial puzzle data class 82 ■ Our initial GUI class 83 Building the buttons 85 ■ Model/View/Controller, JavaFX Script style 87 ■ Running version 1 88 4.2 Better informed and better looking: Puzzle, version 2 88 Making the puzzle class clever, using triggers and function types 88 ■ Group checking up close: function types 90 ■ Firing the update: triggers 92 ■ Better-looking GUI: playing with the underlying Swing component 92 ■ Running version 2 94 4.3 Game on: Puzzle, version 3 95 Adding stats to the puzzle class 96 ■ Finishing off the puzzle grid GUI 98 ■ Adding a status line to our GUI with a label 101 ■ Running version 3 102 4.4 Other Swing components 103 4.5 Bonus: using bind to validate forms 103 4.6 Summary 105 Behind the scene graph 106 5 5.1 What is a scene graph? 107 Nodes: the building blocks of the scene graph 108 ■ Groups: graph manipulation made easy 108 x CONTENTS 5.2 Getting animated: LightShow, version 1 109 Raindrop animations 109 ■ The RainDrop class: creating graphics from geometric shapes 110 ■ Timelines and animation (Timeline, KeyFrame) 112 ■ Interpolating variables across a timeline (at, tween, =>) 113 ■ How the RainDrop class works 115 ■ The LightShow class, version 1: a stage for our scene graph 115 ■ Running version 1 118 5.3 Total transformation: LightShow, version 2 118 The swirling lines animation 118 ■ The SwirlingLines class: rectangles, rotations, and transformations 119 ■ Manipulating node rendering with transformations 121 ■ The LightShow class, version 2: color animations 124 ■ Running version 2 127 5.4 Lost in translation? Positioning nodes in the scene graph 128 5.5 Bonus: creating hypertext-style links 129 5.6 Summary 130 Moving pictures 132 6 6.1 Taking control: Video Player, version 1 134 The Util class: creating image nodes 134 ■ The Button class: scene graph images and user input 135 ■ The GridBox class: lay out your nodes 140 ■ The Player class, version 1 142 ■ Running version 1 144 6.2 Making the list: Video Player, version 2 145 The List class: a complex multipart custom node 146 ■ The ListPane class: scrolling and clipping a scene graph 149 ■ Using media in JavaFX 152 ■ The Player class, version 2: video and linear gradients 154 ■ Creating varying color fills with LinearGradient 159 ■ Running version 2 161 6.3 Bonus: taking control of fonts 161 6.4 Summary 163 Controls, charts, and storage 165 7 7.1 Comments welcome: Feedback, version 1 166 The Record class: a bound model for our UI 167 ■ The Feedback class: controls and panel containers 168 ■ Running version 1 175 7.2 Chart topping: Feedback, version 2 175 Cross-platform persistent storage 176 ■ How Storage manages its files 179 ■ Adding pie and bar charts 180 ■ Taking control of chart axes 187 ■ Other chart controls (area, bubble, line, and scatter) 188 ■ Running version 2 190 CONTENTS xi 7.3 Bonus: creating a styled UI control in JavaFX 190 What is a stylesheet? 191 ■ Creating a control: the Progress class 192 ■ Creating a skin: the ProgressSkin class 193 Using our styled control with a CSS document 196 ■ Further CSS details 199 7.4 Summary 200 Web services with style 202 8 8.1 Our project: a Flickr image viewer 203 The Flickr web service 204 ■ Getting registered with Flickr 204 8.2 Using a web service in JavaFX 205 Calling the web service with HttpRequest 205 ■ Parsing XML with PullParser 208 ■ A recap 212 ■ Testing our web service code 212 8.3 Picture this: the PhotoViewer application 213 Displaying thumbnails from the web service: the GalleryView class 214 ■ The easy way to animate: transitions 220 ■ The main photo desktop: the PhotoViewer class 221 ■ Running the application 228 8.4 Size matters: node bounds in different contexts 228 8.5 Summary 229 From app to applet 230 9 9.1 The Enigma project 231 The mechanics of the Enigma cipher 231 9.2 Programmer/designer workflow: Enigma machine, version 1 232 Getting ready to use the JavaFX Production Suite 233 Converting SVG files to FXZ 234 ■ The Rotor class: the heart of the encryption 236 ■ A quick utility class 238 ■ The Key class: input to the machine 239 ■ The Lamp class: output from the machine 241 ■ The Enigma class: binding the encryption engine to the interface 243 ■ Running version 1 246 ■ Shortcuts using NetBeans, Photoshop, or Illustrator 246 9.3 More cryptic: Enigma machine, version 2 247 The Rotor class, version 2: giving the cipher a visual presence 248 The Paper class: making a permanent output record 251 ■