JavaFX

1. JavaFX Written by Liron Blecher

2. Important Links • AWT, Swing and JavaFX History • GUI Frameworks Concepts • Application, Stage, Scene, Node • UI Controls • Layout • CSS • FXML • Binding, Collections and more! Agenda

3. If you get lost - Important Links • JavaFXTutorial: http://docs.oracle.com/javafx/ • JavaFX Architecture:http://docs.oracle.com/javafx/2/architecture/jfxpub-architecture.htm • Nice JavaFX Tutorial:http://edu.makery.ch/projects/learn-javafx/

4. Important Links • AWT, Swing and JavaFX History • GUI Frameworks Concepts • Application, Stage, Scene, Node • UI Controls • Layout • CSS • FXML • Binding, Collections and more! Agenda

5. JavaFX - History • UI  Platform specific • AWT (Advanced Windows Toolkit) was platform specific • Delegated creation of UI components to the OS • Heavy • Not customizable • Swing • Extends (some of) AWT • Draws its own components • Light weight • Very customizable • All classes start with ‘J’ (JPanel, JButton, etc.)

6. JavaFX - History • JavaFX 1.0 – Released on 2008 • Was a scripting language to write GUI applications that was complied to Java Byte Code • Was NOT widely adopted by the Java community • Java FX 2.0 – Released on 2011 • Returned to Java code • Better API and tools than Swing • Underlying engines use native capabilities

7. Important Links • AWT, Swing and JavaFX History • GUI Frameworks Concepts • Application, Stage, Scene, Node • UI Controls • Layout • CSS • FXML • Binding, Collections and more! Agenda

8. UI Frameworks Concepts - Events • Events • A way for components (in general) to communicate with each other asynchronously (meaning, without directly calling methods on each other or using polling) • In java, it simply means that you register an interface (usually called a Listener) to an event generator (usually a component or a model) and when an event generator wants to notify all the registered listeners it iterates over them and calls methods define in themThe parameter passed to the interfaces methods is called an Event object

9. examples.events demo

10. GUI Frameworks Concepts - MVC • MVC (Model – View – Controller) • A model that represents the dataand logic for the application • The view that is the visual representation of that data • A controller that takes user input from the view and translates that to changes in the model and vise versa http://www.oracle.com/technetwork/articles/javase/index-142890.html

11. GUI Frameworks Concepts – GUI Thread • GUI runs in anotherthread (not the “main” thread) • This is done in order to make the GUI responsive • Separate UI code from Business Logic code • User code can run in the GUI thread, but for long loops and actions (like network operations, database operations, etc.) it is usually preferred to run the code in another thread

12. GUI Thread in JavaFX JavaFX runs in two or more threads • JavaFX application thread: This is the primary thread used by JavaFX application developers. A scene graph can be created and manipulated in a background thread, but when its root node is attached to any live object in the scene, that scene graph must be accessed from the JavaFX application thread. • Prism render thread: This thread handles the rendering separately from the event dispatcher. • Media thread: This thread runs in the background and synchronizes the latest frames through the scene graph by using the JavaFX application thread.

13. Important Links • AWT, Swing and JavaFX History • GUI Frameworks Concepts • Application, Stage, Scene, Node • UI Controls • Layout • CSS • FXML • Binding, Collections and more! Agenda

14. Application • Unlike regular Java programs, JavaFX are not started using main but instead using a wrapper launcher class called Application • To create a new JavaFX application, subclass Application and override the start method – this method will be called after the JavaFX runtime is loaded and before the application starts. • You can use the main method to start a JavaFX application by calling the launch method (which is defined in the Application class)

15. Stage • A Stage is the top level container of the application – usually, an OS Window. • The main stage is created as part of the application launch and it is passed as an argument in the start method. • You can use the stage to set the application’s title, icon, size, screen mode etc. • A single JavaFX application can have multiple Stages.

16. Scene • A Scene (also called Scene Graph) is the starting point for constructing a JavaFX application. It is a hierarchical tree of nodes that represents all of the visual elements of the application's user interface. It can handle input and can be rendered.

17. Scene – con’t • Thejavafx.scene API allows the creation and specification of several types of content, such as: • Nodes: Shapes (2-D and 3-D), images, media, embedded web browser, text, UI controls, charts, groups, and containers • State: Transforms (positioning and orientation of nodes), visual effects, and other visual state of the content • Effects: Simple objects that change the appearance of scene graph nodes, such as blurs, shadows, and color adjustment

18. Node • A single element in a scene graph is called a Node. • Each node has an ID, style class, and bounding volume. • Each node in a scene graph has a single parent and zero or more children(except the root node of a scene graph that does not have a parent). • Nodes can also have the following: • Effects, such as blurs and shadows • Event handlers (such as mouse, key and input method)

19. examples.javafx.helloworld http://docs.oracle.com/javafx/2/get_started/hello_world.htm demo

20. Important Links • AWT, Swing and JavaFX History • GUI Frameworks Concepts • Application, Stage, Scene, Node • UI Controls • Layout • CSS • FXML • Binding, Collections and more! Agenda

21. UI Controls Nodes • There are a lot of UI controls that come out-of-the-box in JavaFX: • The list of controls can be found here: http://docs.oracle.com/javafx/2/ui_controls/jfxpub-ui_controls.htm

22. examples.javafx.welcome http://docs.oracle.com/javafx/2/get_started/jfxpub-get_started.htm demo

23. Important Links • AWT, Swing and JavaFX History • GUI Frameworks Concepts • Application, Stage, Scene, Node • UI Controls • Layout • CSS • FXML • Binding, Collections and more! Agenda

24. Layout Nodes • Layout Nodes inherit from class Pane and are used to group together nodes and other layout nodes. • Each Pane has an algorithm which automatically sets the size and location of its child nodes. • The list of Layout Nodes can be found here: http://docs.oracle.com/javafx/2/layout/jfxpub-layout.htm

25. examples.javafx.layout demo

26. Complex Layout • A pane that contains child panes • When it resizes – all of its child panes will be resized as well and then re-layout their child nodes (or panes) recursively • You can mix different types of panes algorithms (for example: a BorderPane that contains FlowPanes)

27. examples.javafx.complexlayout demo

28. Important Links • AWT, Swing and JavaFX History • GUI Frameworks Concepts • Application, Stage, Scene, Node • UI Controls • Layout • CSS • FXML • Binding, Collections and more! Agenda

29. CSS • Reference: • http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html • Tutorial: http://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm

30. CSS • CSS is a technology widely used in web development • A CSS file is a text file that contains design rules which can be applied to a number of nodes. • Using CSS you can specify design properties (colors, fonts, sizes, etc.) to multiple nodes without the need to set each instance separately. • Furthermore, changes in design will not require re-compiling the application – only changing the file. • Lastly, CSS files can be developed by designers while the application itself is developed by developers

31. CSS • We will be covering CSS in more detail later in the course, in the meantime lets review the following subjects: • You can attached one or more CSS to a JavaFX application • In a CSS file you write one or more design rules • A Design Rule consists of two parts: • Selector – determines which nodes will the rule apply to • Design Properties – one or more design properties (font, size, color, background, border, etc.) and their values

32. CSS Selectors • We’ll discuss two types of selectors (there are many more): • ID Selector – written as #id1 were id1 is a unique id (represented as a string) of a Node • Class Selector – written as .class1 ; a lot of Nodes instances might have the same class (for example, .label is the class name of all Label Nodes). • The CSS engine in JavaFXknows how to merge properties from several CSS rules (for example, a Button with an id of “saveButton” will have properties from both .button and #saveButton CSS rules).

33. CSS Properties • There are some properties which are shared for all types of nodes (-fx-background-image) and some that are unique to a class or an ID. • Examples: • .button { -fx-font-size: 16px; • -fx-font-weight: bold; • -fx-opacity: 0.5 } • #loginButton { -fx-backgound-color: blue }

34. examples.javafx.welcome.css http://docs.oracle.com/javafx/2/get_started/css.htm demo

35. Important Links • AWT, Swing and JavaFX History • GUI Frameworks Concepts • Application, Stage, Scene, Node • UI Controls • Layout • CSS • FXML • Binding, Collections and more! Agenda

36. FXML • Reference: • http://docs.oracle.com/javafx/2/api/javafx/fxml/doc-files/introduction_to_fxml.html • FXML enables the developer to create a static Scene using an XML file and at runtime load the XML file and create instances of Nodes according to its content. • It is similar in nature to how HTML and Android work. • The benefits are that a designer can work on the GUI while a developer can work on the logic without the need to work on the same file.

37. examples.javafx.welcome.fxml http://docs.oracle.com/javafx/2/get_started/fxml_tutorial.htm demo

38. FXML • Another feature of FXML is the ability to specify in the FXML file itself the name of a class (usually called Controller) which will be implementing all the events handlers defined in the FXML itself – thus reducing the amount of boilerplate code needed in order to create and register Nodes. • Some great tips can be found here: • http://stackoverflow.com/questions/9717852/how-to-pass-object-created-in-fxml-controller1-to-controller2-of-inner-fxml-cont

39. Scene Builder • The Scene Builder is an external editor for FXML files. • It can be integrated with NetBeans in order to open FXML file directly from the IDE. • http://docs.oracle.com/javafx/scenebuilder/1/overview/jsbpub-overview.htm

40. Scene Builder – con’t • Important Tip! • If after updating a FXML file you see errors in it and your code won’t compile – open the FXML in side NetBeans as a text file (right click -> Edit)and edit your root element (usually some Pane) as follows: • Remove these attributes: xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" • Add this attribute instead: xmlns:fx="http://javafx.com/fxml"

41. Important Links • AWT, Swing and JavaFX History • GUI Frameworks Concepts • Application, Stage, Scene, Node • UI Controls • Layout • CSS • FXML • Binding, Collections and more! Agenda

42. More Stuff! • There are a lot of more stuff to explore and use in JavaFX (that make life more convenient for the developer): • Builders for all types of Nodes and Panes • Observable Properties • Binding • Collections • Animations • A lot of free, open source components libraries

43. examples.javafx.LostExmaple demo