Written by Liron Blecher JavaFX Written by Liron Blecher

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

If you get lost - Important Links JavaFX Tutorial: 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/

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

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.)

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 Used in freaking NASA: https://weblogs.java.net/blog/seanmiphillips/archive/2013/11/08/voice-ground-control

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

UI Frameworks Concepts - 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 Handler or 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 them The parameter passed to the interfaces methods is called an Event object

examples.events demo

GUI Frameworks Concepts - MVC MVC (Model – View – Controller) A model that represents the data and 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

GUI Frameworks Concepts – GUI Thread GUI runs in another thread (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

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.

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

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)

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.

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.

Scene – con’t The javafx.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

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)

JavaFX and NetBeans 7.4 BUG ! There is a bug in NetBeans 7.4 (and in previous versions as well) that does not re-build JavaFX Application Projects after changes are mode in the code. Workaround - after you make changes in your code, close your application (if open) and then choose to Build your project (F11 or Menu: Run  Build Project or right click the project in the Projects Tree and choose Build)

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

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

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

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

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

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

examples.javafx.layout demo

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)

examples.javafx.complexlayout demo

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

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

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

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

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 JavaFX knows 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).

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 }

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

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

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.

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

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

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

Scene Builder – con’t Important Tip! If after updating a FXML file you see errors in the file 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"

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

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

examples.javafx.LostExmaple demo