Introduction to JavaFX 2

Transcript

1. Introduction to JavaFX 2 Thierry Wasylczenko @twasyl
2. me.getInfo(); Software & quality engineer @ GE Healthcare JFXtras contributor OpenJFX in progress Former Java Full Professor & teacher @ SUPINFO Speaker
3. Desktop apps in Java Abstract Window Toolkit (AWT) Swing Event Dispatch Thread (EDT) Complex L&F Old looking Nimbus Synthetica, JGoodies Looks, SWT Ribbon, Quaqua, Substance, ...
4. The big button syndrome
5. Some tools "helped" us ... Visual Editor Eclipse plugin How many JARs do I need to start creating a UI??!! NetBeans
6. ... or not ! So much junk code !! Not even editable Except outside the IDE
7. A hope shined ... JavaOne 2007 JavaFX is announced Rich Internet Applications (RIA) "Seems" promising
8. ... but ... Java + Flash + Flex = JavaFX = ???
9. I am a Java developer !! Scripting language Similar to Flash scripting language Unusable Java API JARs? What's that? Hey, I'm a Java developer !!
10. Look through the Windows Windows Presentation Foundation (WPF) Works above DirectX Introduced with .NET 3.0 XAML Hey, I'm still a Java developer ! eface
11. And now ...
12. JavaFX 2 EOL of JavaFX 1.2 & 1.3 December, 20th 2012
13. JavaFX architecture
14. Base classes Application The entry point of your app Application.launch() Override start() Scene Like the content pane in Swing Hosts a root element Stage = JFrame Contains a scene stage.show();
15. Base classes p u b l i c c l a s s T w e e t W a l l F X e x t e n d s A p p l i c a t i o n { p u b l i c s t a t i c v o i d m a i n ( S t r i n g [ ] a r g s ) { A p p l i c a t i o n . l a u n c h ( T w e e t W a l l F X . c l a s s , a r g s ) ; } @ O v e r r i d e p u b l i c v o i d s t a r t ( S t a g e s t a g e ) t h r o w s E x c e p t i o n { / / D o y o u r s t u f f h e r e S c e n e s c e n e = n e w S c e n e ( . . . ) ; s t a g e . s e t S c e n e ( s c e n e ) ; s t a g e . s h o w ( ) ; } }
16. FXML M VC Markup­based language CSS styling JavaScript capabilities Component binding Controller concept URL locator I18N
17. FXML < ? x m l v e r s i o n = " 1 . 0 " e n c o d i n g = " U T F - 8 " ? > < ? i m p o r t j a v a . l a n g . * ? > < ? i m p o r t j a v a f x . s c e n e . * ? > < ? i m p o r t j a v a f x . s c e n e . e f f e c t . * ? > < ? i m p o r t j a v a f x . s c e n e . i m a g e . * ? > < ? i m p o r t j a v a f x . s c e n e . c o n t r o l . * ? > < ? i m p o r t j a v a f x . s c e n e . l a y o u t . * ? > < A n c h o r P a n e x m l n s : f x = " h t t p : / / j a v a f x . c o m / f x m l " i d = " m a i n P a n e l " f x : i d = " a n c h o r P a n e " p r e f H e i g h t = " 7 6 8 " p r e f W i d t h = " 1 0 2 4 " f x : c o n t r o l l e r = " c o m . t w a s y l . t w e e t w a l l f x . c o n t r o l l e r s . T w e e t W a l l F X C o n t r o l l e r " s t y l e = " - f x - b a c k g r o u n d - c o l o r : l i n e a r - g r a d i e n t ( # 6 9 B 4 E 4 0 % , # 0 0 7 0 B 9 1 0 0 % ) ; " > < c h i l d r e n > < I m a g e V i e w i d = " t w i t t e r S t i c k e r " f i t W i d t h = " 1 2 8 " f i t H e i g h t = " 1 2 8 " l a y o u t X = " 3 0 " l a y o u t Y = " 3 0 " > < i m a g e > < I m a g e u r l = " @ / c o m / t w a s y l / t w e e t w a l l f x / r e s o u r c e s / i m a g e s / t w i t t e r S t i c k e r . p n g " / > < / i m a g e > < / I m a g e V i e w > < L a b e l t e x t = " T w e e t W a l l F X " p r e f W i d t h = " 1 0 2 4 " s t y l e = " - f x - f o n t - s i z e : 1 0 0 p t ; - f x - t e x t - f i l l : w h i t e ; - f x - f o n t - w e i g h t : b o l d ; " l a y o u t Y = " 3 0 " / > < B u t t o n i d = " b u t t o n " t e x t = " S e a r c h " o n A c t i o n = " # s t a r t T w e e t W a l l " s t y l e = " - f x - f o n t - s i z e : 2 0 p t ; " / > < / c h i l d r e n > < / A n c h o r P a n e >
18. JavaFX CSS Properties prefixed with ­fx ­fx­text­fill ­fx­background­color ... linear­gradient radial­gradient rgb / rgba Effects dropshadow & innershadow
19. JavaFX CSS Inline CSS < L a b e l t e x t = " T w e e t W a l l F X " p r e f W i d t h = " 1 0 2 4 " s t y l e = " - f x - f o n t - s i z e : 1 0 0 p t ; - f x - t e x t - f i l l : w h i t e ; - f x - f o n t - w e i g h t : b o l d ; " l a y o u t Y = " 3 0 " / >
20. JavaFX CSS Stylesheets and CSS classes < A n c h o r P a n e . . . > < s t y l e s h e e t s > < U R L v a l u e = " @ / c o m / t w a s y l / D e f a u l t . c s s " / > < / s t y l e s h e e t s > < c h i l d r e n > < L a b e l s t y l e C l a s s = " c o o l - c l a s s " / > < L a b e l > < s t y l e C l a s s > < S t r i n g f x : v a l u e = " v e r y - c o o l - c l a s s " / > < S t r i n g f x : v a l u e = " a m a z i n g - c l a s s " / > < / s t y l e C l a s s > < / L a b e l > < c h i l d r e n > < / A n c h o r P a n e >
21. JavaFX CSS Java code m y B u t t o n . g e t S t y l e C l a s s ( ) . a d d A l l ( " c o o l - c l a s s " , " v e r y - c o o l - c l a s s " ) ; m y B u t t o n . s e t S t y l e ( " - f x - b a c k g r o u n d - c o l o r : w h i t e " ) ;
22. Controller Similar to master pages in ASP Similar to a Managed Bean Used to manage events update the view dynamically ... Referenced by fx:controller in the FXML Initializable Used to initialize the controller after the root element
23. Controller p u b l i c c l a s s T w e e t W a l l F X C o n t r o l l e r i m p l e m e n t s I n i t i a l i z a b l e { / / . . . @ O v e r r i d e p u b l i c v o i d i n i t i a l i z e ( U R L a r g 0 , R e s o u r c e B u n d l e a r g 1 ) { / / . . . } }
24. @FXML Component binding Like JSF Each attribute must be strictly named as the fx:id in the FXML Controller Method Event handler onAction, onClosed, ... attributes Referenced with # in FXML
25. @FXML The controller / / . . . @ F X M L p r i v a t e P a n e a n c h o r P a n e ; @ F X M L p u b l i c v o i d s t a r t T w e e t W a l l ( A c t i o n E v e n t e ) { / / . . . } / / . . .
26. @FXML The FXML < A n c h o r P a n e . . . f x : i d = " a n c h o r P a n e " . . . f x : c o n t r o l l e r = " c o m . t w a s y l . t w e e t w a l l f x . c o n t r o l l e r s . T w e e t W a l l F X C o n t r o l l e r " . . . > < c h i l d r e n > < B u t t o n i d = " b u t t o n " o n A c t i o n = " # s t a r t T w e e t W a l l " . . . / > < / c h i l d r e n > < / A n c h o r P a n e >
27. FXMLLoader Load a FXML file ResourceBundle can be defined Get the controller
28. FXMLLoader U R L f x m l U R L = g e t C l a s s ( ) . g e t R e s o u r c e ( " / m y / p a c k a g e / m y F i l e . f x m l " ) ; F X M L L o a d e r f x m l = n e w F X M L L o a d e r ( f x m l U R L ) ; / / G e t t h e r o o t e l e m e n t o f t h e f i l e P a r e n t r o o t = ( P a r e n t ) f x m l . l o a d ( ) ; / / G e t t h e c o n t r o l l e r a s s o c i a t e d t o t h e F X M L M y C o n t r o l l e r m c = ( M y C o n t r o l l e r ) f x m l . g e t C o n t r o l l e r ( ) ;
29. Properties Expand & improve the JavaBeans concept "Observe" a value Event delivery Listeners Convention private property fields public final getter / setter for the value public getter for the property
30. Properties p u b l i c c l a s s F o o { p r i v a t e D o u b l e P r o p e r t y l i t e r s O f C o f f e e = n e w S i m p l e D o u b l e P r o p e r t y ( ) ; p u b l i c f i n a l d o u b l e g e t L i t e r s O f C o f f e e ( ) { r e t u r n t h i s . l i t e r s O f C o f f e e . g e t ( ) ; } p u b l i c f i n a l v o i d s e t L i t e r s O f C o f f e e ( d o u b l e v a l u e ) { t h i s . l i t e r s O f C o f f e e . s e t ( v a l u e ) ; } p u b l i c D o u b l e P r o p e r t y l i t e r s O f C o f f e e P r o p e r t y ( ) { r e t u r n t h i s . l i t e r s O f C o f f e e ; } }
31. Bindings Observes dependencies Properties Updates itself according changes High­Level API Low­Level API Kind of Observer / Observable pattern Example: Could be used to synchronize the UI and the business Refresh a chart data
32. Bindings I n t e g e r P r o p e r t y n u m 1 = n e w S i m p l e I n t e g e r P r o p e r t y ( 1 0 ) ; I n t e g e r P r o p e r t y n u m 2 = n e w S i m p l e I n t e g e r P r o p e r t y ( 2 0 ) ; I n t e g e r P r o p e r t y n u m 3 = n e w S i m p l e I n t e g e r P r o p e r t y ( 3 0 ) ; I n t e g e r P r o p e r t y n u m 4 = n e w S i m p l e I n t e g e r P r o p e r t y ( 4 0 ) ; N u m b e r B i n d i n g o p e r a t i o n = B i n d i n g s . a d d ( n u m 1 . m u l t i p l y ( n u m 4 ) , n u m 2 . d i v i d e ( n u m 3 ) ) ; S y s t e m . o u t . p r i n t l n ( " H o w m u c h ? " + o p e r a t i o n . g e t V a l u e ( ) ) ; n u m 1 . s e t V a l u e ( 1 0 0 ) ; S y s t e m . o u t . p r i n t l n ( " A n d n o w ? " + o p e r a t i o n . g e t V a l u e ( ) ) ;
33. Bindings How much? 400.67 And now? 4000.67
34. Bindings
35. FXCollections Extension of Collections Observable Interfaces ObservableList, ObservableMap Listeners ListChangeListener, MapChangeListener FXCollections Utility class
36. FXCollections L i s t < S t r i n g > s t r i n g L s t = n e w A r r a y L i s t < S t r i n g > ( ) ; / / C r e a t e a n o b s e r v a b l e l i s t O b s e r v a b l e L i s t < S t r i n g > s t r i n g O b s L s t 1 = F X C o l l e c t i o n s . o b s e r v a b l e L i s t ( s t r i n g L s t ) ; O b s e r v a b l e L i s t < S t r i n g > s t r i n g O b s L s t 2 = F X C o l l e c t i o n s . o b s e r v a b l e L i s t ( ) ; s t r i n g O b s L s t 1 . a d d L i s t e n e r ( n e w L i s t C h a n g e L i s t e n e r < S t r i n g > ( ) { @ O v e r r i d e p u b l i c v o i d o n C h a n g e d ( C h a n g e < ? e x t e n d s S t r i n g > e v e n t ) { w h i l e ( e v e n t . n e x t ( ) ) { i f ( e v e n t . w a s A d d e d ( ) ) { / / . . . } e l s e i f ( e v e n t . w a s R e m o v e d ( ) ) { / / . . . } } } }
37. Chart API
38. Chart API
39. Animation
40. Animation KeyValue Represent a "fixed" position of a Node KeyFrame A duration Some KeyValues Animation Could contain some KeyFrames (Timeline) Play
41. Animation N o d e n o d e = . . . ; K e y V a l u e k v = n e w K e y V a l u e ( n o d e . l a y o u t X P r o p e r t y ( ) , 1 0 0 ) ; K e y F r a m e k f = n e w K e y F r a m e ( n e w D u r a t i o n ( 5 0 0 0 ) , k v ) ; T i m e l i n e t i m e l i n e = n e w T i m e l i n e ( k f ) ; t i m e l i n e . s e t C y c l e C o u n t ( A n i m a t i o n . I N D E F I N I T E ) ; t i m e l i n e . s e t O n F i n i s h e d ( . . . ) ; t i m e l i n e . p l a y ( ) ;
42. Effects Lot of effects available Blur, blend, reflection, shadows, ... Input property Chain of effects
43. Media Long way from JMF Audio MP3, AIFF, WAV, AAC, m4a Video FLV, MPEG­4 (H.264/AVC) Metadata Listeners
44. Media F i l e m y S o n g = n e w F i l e ( " / m y S o n g . m p 3 " ) ; M e d i a m y M e d i a = n e w M e d i a ( m y S o n g . t o U R I ( ) . t o S t r i n g ( ) ) ; M e d i a P l a y e r p l a y e r = n e w M e d i a P l a y e r ( m y M e d i a ) ; p l a y e r . s e t O n E n d O f M e d i a ( n e w R u n n a b l e ( ) { . . . } ) ; p l a y e r . v o l u m e P r o p e r t y ( ) . a d d L i s t e n e r ( . . . ) ; p l a y e r . p l a y ( ) ; / / . . . i f ( p l a y e r . s t a t u s P r o p e r t y ( ) . g e t ( ) = = S t a t u s . P L A Y I N G ) { / / . . . }
45. SceneBuilder UI builder tool Useful for RAD FXML generation CSS support Previewer
46. SceneBuilder
47. Scenic View Understand current state of your application Manipulation of the scenegraph Manipulation of properties
48. Scenic View
49. Tools / API JFXtras FX Experience tool Theming e(fx)clipse GroovyFX ScalaFX ...
50. Useful resources http://thierrywasyl.wordpress.com http://docs.oracle.com/javafx/index.html https://forums.oracle.com/forums/forum.jspa?forumID=1385 http://fxexperience.com http://jfxtras.org
51. Thank you