THE EXPERT’S VOICE ® IN JAVA™ TECHNOLOGY Covers Covers the the full full JavaFX™™ 1.2 platform Pro JavaFX ™ Platform ™ Script, Desktop and Mobile RIA with Java Technology James L Weaver, Weiqi Gao, Ph.D., Stephen Chin, and Dean Iverson Foreword by Danny Coward Chief Architect, Client Software, Sun Microsystems Download at Boykma.Com Pro JavaFX™ Platform Script, Desktop and Mobile RIA with Java™ Technology / First Edition James L Weaver, Weiqi Gao, Ph.D., Stephen Chin, and Dean Iverson Download at Boykma.Com Pro JavaFX™ Platform: Script, Desktop and Mobile RIA with Java™ Technology Copyright © 2009 by James L Weaver, Weiqi Gao, Ph.D., Stephen Chin, and Dean Iverson All rights reserved No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher ISBN-13 (pbk): 978-1-4302-1875-3 ISBN-13 (electronic): 978-1-4302-1876-0 Printed and bound in the United States of America Trademarked names may appear in this book Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark Java™ and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc., in the US and other countries Apress, Inc., is not affiliated with Sun Microsystems, Inc., and this book was written without endorsement from Sun Microsystems, Inc Lead Editor: Steve Anglin Development Editor: Matthew Moodie Editorial Board: Clay Andres, Steve Anglin, Mark Beckner, Ewan Buckingham, Tony Campbell, Gary Cornell, Jonathan Gennick, Michelle Lowman, Matthew Moodie, Jeffrey Pepper, Frank Pohlmann, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Project Manager: Richard Dal Porto Copy Editors: Liz Welch, Ami Knox Associate Production Director: Kari Brooks-Copony Production Editor: Kelly Gunther Compositor: Patrick Cunningham Proofreader: Nancy Sixsmith Indexer: Brenda Miller Artist: April Milne Cover Designer: Kurt Krames Manufacturing Director: Tom Debolski Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013 Phone 1-800-SPRINGER, fax 201-348-4505, e-mail kn`ano)juu*O=HAO[N=JG _]packnu6 ?]packnu*>KKGO gauskn`o6 gauskn`o i]tNaoqhpo6 1, kjNaoqhpo=r]eh]^ha6 bqj_pekj$ epaio6EpaiWY % w eb $jkp oa]n_d*_]j_aha`% w ejoanp epaio ejpk oa]n_dNaoqhpo7 y y kj@kja6 bqj_pekj$% w eb $jkp oa]n_d*_]j_aha`% w _qnnajpOa]n_d 9 jqhh7 y y y C H A P T E R N B U I LD I N G A P R O F E S S I O N A L JA V A F X A P P LI C A T I O N _qnnajpOa]n_d 9 oa]n_d7 _qnnajpOa]n_d*op]np$%7 y y You can see a new web service request wrapper in use named =i]vkjEpaiOa]n_d Just like the =i]vkjPklOahhano class that was described previously, this is another thin wrapper around an =i]vkjDpplNamqaop It uses another Java-based enum called Oknp>u to specify the desired sorting of the results It also allows the developer to specify the maximum number of search results to return Amazon will only return ten results at a time Because a maximum of 50 results is specified, the one request that we declare is actually performing up to five HTTP requests Each set of 10 results takes about second to process In order to display the results to the user as quickly as possible, the kjNaoqhpo=r]eh]^ha variable holds a callback function that passes results back to the caller as they are returned from each HTTP request The Cart Page The cart page simply contains a placeholder graphic that was converted to a FXZ file from an SVG source file The SVG graphic is a public domain graphic that came from Open Clip Art Library (dppl6++klaj_hel]np*knc), which has some great stuff This particular graphic had one group element at the root of the document, but it did not have an e` attribute In order to make it usable, the file had to be edited, and an e` attribute of ikjau was added SVG Converter then converted the file to the FXZ format, and it was added to the bookstore application’s NetBeans project A UI stub was created by right-clicking the FXZ file in NetBeans and choosing the Generate UI stub option This UI stub is shown in Listing 9-20 This FXZ file contains only one graphic, so it is a very simple class NetBeans generated a public variable named ikjau that corresponds to the group with the ikjau attribute from the SVG file When the Ikjau>]cQE class is instantiated, the ql`]pa method is called, and the ikjau variable obtains a reference to the graphic residing in the FXD file embedded inside the FXZ archive Listing 9-20 The UI Stub for the Money Bag Graphic lq^he_ _h]oo Ikjau>]cQE atpaj`o BT@Jk`a w kranne`a lq^he_ r]n qnh 9 w[[@EN[[ynao+ikjau>]c*btv 7 lq^he_)na]` lnkpa_pa` r]n ikjau6 Jk`a7 kranne`a lnkpa_pa` bqj_pekj _kjpajpHk]`a`$% 6 Rke` w ikjau9capJk`a$ ikjau %7 y lnkpa_pa` kranne`a bqj_pekj capK^fa_p$ e`6Opnejc% 6 K^fa_p w r]n k^f 9 oqlan*capK^fa_p$e`%7 eb $ k^f 99 jqhh% w Ouopai*ann*lnejphj$ S=NJEJC6 Ahaiajp sepd e` we`y jkp bkqj` ej wqnhy %7 y napqnj k^f7 y y 491 492 CH A P TER N B U IL DING A P R OFES S IO N A L JA V A F X A P P LI C A T I O N Once a Ikjau>]cQE object is instantiated, any JavaFX class can use the ikjau variable just like any other node In this case, the node is added to the scene graph as part of the cart page’s UI The result is shown in Figure 9-6 Figure 9-6 The former SVG graphic as it appears on the cart page Summary Congratulations, you made it! This chapter showed several techniques that can be used to write real JavaFX applications by using the SDK, some useful third-party libraries, and leveraging the power of the underlying Java platform We have covered C H A P T E R N B U I LD I N G A P R O F E S S I O N A L JA V A F X A P P LI C A T I O N Ê UÊ / iÊDpplNamqaop class and how to use it to send requests to servers on the Internet Ê UÊ / iÊLqhhL]noan class and how to use it to parse both JSON and XML documents Ê UÊ / iÊ«iiÌ>ÌÊvÊ>ÊëiÊÌiÀiÌÊ>««V>ÌÊÌÊ`ë>ÞÊiLiÀÃÊvÊV}ÀiÃÃÊ for a particular ZIP code Ê UÊ ÜÊÌÊ>`Ê}À>« VÃÊÌ >ÌÊ >ÛiÊLiiÊiÝ«ÀÌi`ÊvÀÊ`LiÊ* Ìà «ÊÀÊÕÃÌÀ>ÌÀÊÀÊ have been converted from an SVG file Ê UÊ / iÊÕÃiÊvÊÌ iÊ>âÊÃÃV>ÌiÃÊ7iLÊ-iÀÛViÊÌÊÀiÌÀiÛiÊvÀ>ÌÊ>LÕÌÊÌiÃÊ listed for sale on Amazon’s website Ê UÊ 1Ã}Ê>>ÌÊLÕÌÊÌÊÌÊÕV t®ÊÌÊ>iÊÞÕÀÊ>««V>ÌÊViÊ>Ûi Ê UÊ / iÊÕÃiÊvÊÌ À`«>ÀÌÞÊ>ÞÕÌÊVÌ>iÀÃÊÃÕV Ê>ÃÊIecH]ukqp to make easy work of complex layouts Ê UÊ ÜÊÌÊÌ>iÊ>`Û>Ì>}iÊvÊÌ iÊ«ÜiÀÊvÊÌ iÊ>Û>ÊV>ÃÃÊLÀ>ÀiÃÊÌÊ«iiÌÊ>Ê>}iÊ cache for a JavaFX platform Ê UÊ / iÊÕÃiÊvÊ>Û>ÊiÕÊV>ÃÃiÃÊÌÊ}iÌÊÌÞ«iÃ>viÊiÕiÀ>ÌÃÊÊ>Û>8 Ê UÊ ÜÊÌÊÃ>ÛiÊiÀÞÊ>`ÊÃViiÊ}À>« Ê>`ÊLÞÊ«iiÌ}Ê>ÊÃVÀ>LiÊÃÌÊÜÌ Ê>Ê minimal number of nodes Only one more chapter to go! In the next chapter, we will discuss how to take your JavaFX programming expertise and apply it to a mobile platform You will see how to take one of the example programs in this book and get it ready to run on a mobile device! Resources For additional information on JSON, check out these sites: Ê UÊ dppl6++sss*fokj*knc Ê UÊ dppl6++aj*segela`e]*knc+sege+FOKJ Go here for addition information on XML: Ê UÊ dppl6++sss*s/*knc+TIH Ê UÊ dppl6++aj*segela`e]*knc+sege+TIH Ê UÊ dppl6++sss*s/o_dkkho*_ki+TIH+tih[sd]peo*]ol You’ll find additional tools and information on the JavaFX Production Suite here: Ê UÊ dppl6++sss*f]r]bt*_ki (Download the JavaFX Production Suite from this site.) Ê UÊ dppl6++f]r]bt*_ki+`k_o+cappejcop]npa`+lnk`q_pekj[oqepa+ Ê UÊ dppl6++sss*ejgo_]la*knc+o_naajodkpo+ej`at*ldl;h]jc9aj Ê UÊ dppl6++sss*klaj_hel]np*knc Ê UÊ dppl6++p]jck*bnaa`aogpkl*knc+P]jck[@aogpkl[Lnkfa_p 493 494 CH A P TER N B U IL DING A P R OFES S IO N A L JA V A F X A P P LI C A T I O N For additional information on the Amazon Associates Web Service, try these sites: Ê UÊ dppl6++]so*]i]vkj*_ki+]ook_e]pao+ Ê UÊ dppl6++`k_o*]i]vkjsa^oanre_ao*_ki+=SOA?kiian_aOanre_a+.,,5),-),2+@C+ CHAPTER 10 Developing JavaFX Mobile Applications Simple things should be simple and complex things should be possible —Alan Kay T he Java language was originally developed back in 1991 by a small team called “the Green Project” led by James Gosling Their mission was to create a device-independent language that could be used in embedded applications such as set-top boxes or other consumer devices After limited success in an immature market, the Java language was repurposed as a network operating system for the World Wide Web The rest is history with the explosive growth of Java in the Web, on the desktop, and in enterprise server applications led by the powerful branding of “Write once, run anywhere.” Fast-forward to 2009 Handheld smartphones are the new Internet with faster processors, larger screens, and high-speed network connections Set-top boxes are pervasive and provide even more advanced capabilities, from high-definition television to digital video recording Most importantly, over 2.6 billion of these consumer devices are already running Java ME, a lightweight version of Java JavaFX Mobile is the technology that will finally bring the original vision of Java full circle It lets you take full-featured rich Internet applications that use media, graphics, animation, and web services and seamlessly run them on cell phones and set-top boxes This chapter will show you how you can write applications that run on both the desktop and mobile platform with exactly the same code 495 496 CH A P TER 10 N DEVEL OP ING J A VA FX M O B I LE A P P LI C A T I O N S The Vision of JavaFX Mobile JavaFX Mobile is one the most exciting features of the JavaFX platform, because it allows the same applications you write for the desktop to run on mobile devices as well Following an initial beta, the first public release of JavaFX Mobile came with JavaFX 1.2 on February 12, 2009, in preparation for the market rollout at Mobile World Congress Eric Klein, VP of Java Marketing, and Jeet Kaul, VP of Java Engineering, did a video announcement for the release, as shown in Figure 10-1 Figure 10-1 Announcement of JavaFX Mobile on the JavaFX launch page NTip Both Terrence Barr and Hinkmond Wong’s blogs are excellent places to learn about the latest advances in JavaFX Mobile technology URLs can be found in the Resources section at the end of this chapter C H A P T E R N D E V E LO P I N G JA V A F X M O B I LE A P P LI C A T I O N S JavaFX Mobile is built on top of the Java ME platform, so it has a very broad range of devices that it can be run on, while also taking advantage of mobile-specific features such as GPSs, accelerometers, and touch screens Since JavaFX is a software platform, not an OS, it can be ported to run on almost any type of device, from feature phones to Linux or Windowsbased smartphones Several handset partners are already lined up to produce JavaFX Mobile–enabled phones Both Sony Ericsson and LG Electronics have announced partnerships with Sun, and there are expected to be more device manufacturers in the near future Sun has announced the availability of handsets that come preinstalled with JavaFX Mobile These phones will first be made available to developers so they can build mobileenabled applications, and will later be generally available for end users to purchase The JavaFX 1.2 release comes with a Mobile Emulator that can be used to develop and test JavaFX Mobile applications today with no special hardware We will use the emulator throughout the rest of this chapter to demonstrate some of the capabilities of the JavaFX Mobile platform Mobile Hello Earthrise The first example of JavaFX development presented in this book was a rich user interface with text, graphics, and animation In this section we will show you how to enhance that application so it is fully mobile compatible, while still retaining its ability to run on the desktop There are four primary differences in mobile application development that need to be taken into account: Ê UÊ Screen size: Mobile devices have much smaller screen resolution than their desktop counterparts This means that your application has to be capable of running within a resolution of 320240 or possibly even smaller, and needs to adapt to different screen sizes based on the device Ê UÊ Common Profile: Mobile applications are limited to the JavaFX APIs that are part of the Common Profile, which is a subset of the Desktop Profile This limits some available functionality, but also provides a solid foundation where components will behave the same on mobile and desktop devices Ê UÊ User input: Many mobile devices not support touch screens, so to support a wide range of devices your application needs to be fully navigable by the keypad alone Even where a touch screen is available, there is no mouse pointer, so hover and the related mouse events will not work Ê UÊ Performance: Mobile applications run on much less powerful devices, so they have fewer CPU and memory resources available to work with This means that you have to pay particular attention to the performance and resource usage of your application To convert the Hello Earthrise application, we will go through the code to address each of these issues so that it runs equally well on mobile devices as well as the desktop Listing 10-1 shows the original code of the Hello Earthrise application, with lines that are dependent on either screen size or features of the Desktop Profile highlighted in bold 497 498 CH A P TER 10 N DEVEL OP ING J A VA FX M O B I LE A P P LI C A T I O N S Listing 10-1 Original Hello Earthrise Application r]n patpNab6Patp7 ++ Lnkre`ao pda ]jei]pa` o_nkhhejc ^ad]rekn bkn pda patp r]n pn]joPn]joepekj 9 Pn]joh]paPn]joepekj w `qn]pekj6 31o jk`a6 ^ej` patpNab pkU6 )4., ++ `alaj`ajp kj sej`ks oeva ejpanlkh]pkn6 Ejpanlkh]pkn*HEJA=N nala]p?kqjp6 Peiaheja*EJ@ABEJEPA y Op]ca w pepha6 Dahhk A]npdneoa o_aja6 O_aja w _kjpajp6 W Ei]caReas w ++ ei]ca pkk h]nca bkn ] ik^eha `eolh]u $1-2t/43% ei]ca6 Ei]ca w qnh6 dppl6++lnkf]r]bt*_ki+ei]cao+a]npdneoa*flc y y( Cnkql w h]ukqpT6 1, ++ `alaj`ajp kj sej`ks oeva h]ukqpU6 -4, ++ `alaj`ajp kj sej`ks oeva _kjpajp6 W patpNab 9 Patp w h]ukqpU6 -,, patpKnecej6 PatpKnecej*PKL patp=hecjiajp6 Patp=hecjiajp*FQOPEBU sn]llejcSe`pd6 /4, ++ `alaj`ajp kj sej`ks oeva ++ Jkpa pd]p pdeo oujp]t _na]pao kja hkjc opnejc kb patp _kjpajp6 A]npdneoa ]p ?dneopi]o6 WBknpuY ua]no ]ck pdeo ?dneopi]o( ] pqn^qhajp sknh` hkkga` pk pda da]rajo bkn ] qjemqa reas kb kqn dkia lh]jap* Pdeo ldkpk kb A]npdneoa kran pda hqj]n dknevkj s]o p]gaj ^u pda =lkhhk 4 _nas ej @a_ai^an -524( odksejc A]npd bkn pda benop peia ]o ep ]lla]no bnki `aal ol]_a* =opnkj]qpo Bn]jg >kni]j( Fei Hkrahh ]j` Sehhe]i =j`ano d]` ^a_kia pda benop dqi]jo pk ha]ra A]npd kn^ep( ajpanejc hqj]n kn^ep kj ?dneopi]o Ara* Ej ] deopkne_ hera ^nk]`_]op pd]p jecdp( pda _nas pkkg pqnjo na]`ejc bnki pda >kkg kb Cajaoeo( _hkoejc sepd ] dkhe`]u seod bnki ?kii]j`an >kni]j6 X Sa _hkoa sepd ckk` jecdp( ckk` hq_g( ] Iannu ?dneopi]o( ]j` Ck` ^haoo ]hh kb ukq )) ]hh kb ukq kj pda ckk` A]npd*X C H A P T E R N D E V E LO P I N G JA V A F X M O B I LE A P P LI C A T I O N S ++ Pda ]llnktei]pa _khkn qoa` ej pda o_nkhhejc Op]n S]no ejpnk behh6 ?khkn*nc^$-43( -51( -,3% bkjp6 Bkjp*bkjp$ O]joOaneb ( BkjpSaecdp*>KH@( .0%7 ++ bkjp skj#p bep y Y _hel6 Na_p]jcha w se`pd6 0/, ++ `alaj`ajp kj sej`ks oeva daecdp6 41 y y Y y y ++ Op]np lh]uejc ]j ]q`ek _hel Ia`e]Lh]uan w ]qpkLh]u6 pnqa nala]p?kqjp6 Ia`e]Lh]uan*NALA=P[BKNARAN ia`e]6 Ia`e] w okqn_a6 dppl6++lnkf]r]bt*_ki+]q`ek+v]n]pdqopn]*ie` y y ++ Op]np pda patp ]jei]pekj pn]joPn]joepekj*lh]u$%7 Fortunately, there is nothing in this example that is not a part of the Common Profile We will go over the differences between the Desktop and Common Profiles in more detail in the next section, but with over 80 percent of the JavaFX API covered in the Common Profile, there is only a small set of functions that cannot be used On the other hand, there are lots of places where the application will break on a smaller screen, including absolute positioning of components, fixed widths, and an image that is too large for the mobile display While any dependencies on the Desktop Profile would prevent the code from compiling on mobile devices, the other changes will not prevent the application from running, so you can try to run it as a mobile application right out of the box Running in the Mobile Emulator The easiest way to run an application in the Mobile Emulator is to use an IDE that supports mobile development For example, running a mobile application from NetBeans is as simple as changing the Run setting in the Project Properties screen, as shown in Figure 10-2 Once you have configured your project to run in the Mobile Emulator, all compilations will use the mobile profile and all project runs will fire off the Mobile Emulator It is also possible to run mobile applications directly from the command line The first step is to tell the f]r]btl]_g]can application to compile your code using the Mobile Profile by passing in the following option: )lnkbeha IK>EHA 499 500 CH A P TER 10 N DEVEL OP ING J A VA FX M O B I LE A P P LI C A T I O N S This will tell the f]r]btl]_g]can to limit the application compilation to only use functions available in the Mobile and Common profiles, preverify the JAR file, and also package up the application as a MIDlet The MIDlet consists of a JAR file containing all the class and resource files for your application and a Java Application Descriptor (JAD) file preconfigured to run your JavaFX Mobile application Figure 10-2 Project Properties Run settings in NetBeans configured for mobile To run the application within the Mobile Emulator, you have to run the aiqh]pkn executable under the aiqh]pkn+^ej directory of the JavaFX distribution with your application JAD file as the argument: 8L]pd pk F]r]BT O@G:+aiqh]pkn+^ej+aiqh]pkn*ata )T`ao_nelpkn68L]pd pk Lnkfa_p:£ +`eop+DahhkA]npdNeoa*f]` You can also pass in a device via the )T`are_a option; otherwise, the default JavaFX phone will be used The unmodified Hello Earthrise application running in the Mobile Emulator is shown in Figure 10-3 Congratulations, you have successfully run your first JavaFX mobile application! C H A P T E R N D E V E LO P I N G JA V A F X M O B I LE A P P LI C A T I O N S Figure 10-3 Hello Earthrise application running in the Mobile Emulator Fitting Applications on the Mobile Screen From the screenshot at the end of the previous section, it is clear that there is a little work to in order to make the Hello Earthrise application fit the mobile screen size As we explained earlier, there are various places in the code that either use absolute positioning or fixed widths or depend on the image size 501 502 CH A P TER 10 N DEVEL OP ING J A VA FX M O B I LE A P P LI C A T I O N S One of the most important considerations for mobile development is that you really not know the size of the mobile screen While a lot of JavaFX samples hard-code the 320240 screen size of the emulator, here are some reasons why this is a bad practice: Ê UÊ vviÀiÌÊLiÊ`iÛViÃÊ >ÛiÊ`vviÀiÌÊÃVÀiiÊÃâiðÊ/ ÃÊÃÊiÃÃiÌ>ÊvÊÜ>ÌÊÌÊÌ>À}iÌÊ>Ê broad range of mobile devices and protect your application against future innovations, such as the Sony XPERIA with a massive 800480 resolution Ê UÊ / iÊ>Û>>LiÊÃVÀiiÊÃâiÊ>ÞÊLiÊÃ>iÀÊÌ >ÊÌ iÊ« ÞÃV>ÊÃVÀiiÊÀiÃÕÌ°ÊÃÊ>Ê example, Windows CE devices often reserve space at the top and bottom for menus and keyboard controls, so the usable height given to your application is reduced Ê UÊ / iÊÃVÀiiÊ>ÞÊLiÊÛiÀÌV>ÊÀÊ ÀâÌ>°Ê >ÞÊiÜÊ« iÃÊV>Ê`iÌiVÌÊÌ iÊÀiÌ>ÌÊ of the device and will automatically rotate the display If your application is hard-coded for a vertically oriented layout, it may break when the phone is rotated Fortunately, JavaFX provides an easy facility to check the available size of the screen allocated to the application The dimensions of the Op]ca and O_aja are both set to the available screen space upon initialization, and can be bound to trigger change dimensions or trigger actions when the display is rotated As an example of this, it is possible to dynamically change the amount of border on the left and right of the text in the Hello Earthrise application by using the following: r]n o_aja6O_aja7 `ab ^kn`anSe`pd 9 ^ej` o_aja*se`pd + -,7 Op]ca w pepha6 Dahhk A]npdneoa o_aja6 o_aja 9 O_aja w *** Cnkql w h]ukqpT6 ^ej` ^kn`anSe`pd Now you can continue to replace the rest of the hard-coded positions and widths so the program is fully size independent However, in order to have the program continue to work on the desktop there is one other special case that needs to be considered The primary difference in O_aja and Op]ca size is as follows: Ê UÊ Mobile O_aja/Op]ca: The width and height are fixed according to the screen resolution Ê UÊ Desktop O_aja/Op]ca: The width and height are calculated to fit the contents This dichotomy introduces a problem with our approach of basing the component width and height on the scene For example, if we center the image in the middle of the scene it will work great on the mobile device; however, since the image is used to calculate the size of the scene on the desktop it will initially center on the origin (0, 0), causing the window to size too small ... lesson about JavaFX NNote JavaFX is the short name for the technology created by Sun called the JavaFX Rich Client platform Components of this platform include a programming language named JavaFX Script,... Pro JavaFX Platform Script, Desktop and Mobile RIA with Java™ Technology / First Edition James L Weaver, Weiqi Gao, Ph.D., Stephen Chin, and Dean Iverson Download at Boykma.Com Pro JavaFX Platform: ... Source: Sun’s JavaFX Web Sites Accessing the JavaFX SDK API Obtaining the JavaFX SDK JavaFX Production