Java FX Written by Liron Blecher Agenda Important

Java. FX Written by Liron Blecher

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

If you get lost - Important Links Java. FX Tutorial: http: //docs. oracle. com/javafx/ Java. FX Architecture: http: //docs. oracle. com/javafx/2/architecture/jfxpubarchitecture. htm Nice Java. FX Tutorial: http: //edu. makery. ch/projects/learnjavafx/ 3

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

Java. FX - 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. ) 5

Java. FX - History Java. FX 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 6

Agenda • Important Links • AWT, Swing and Java. FX 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 8

examples. events DEMO 9

GUI Frameworks Concepts - 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 10

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 11

GUI Thread in Java. FX runs in two or more threads • Java. FX application thread: This is the primary thread used by Java. FX 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 Java. FX 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 Java. FX application thread. 12

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

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

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 Java. FX application can have multiple Stages. 15

Scene • A Scene (also called Scene Graph) is the starting point for constructing a Java. FX 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. 16

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 17

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

Java. FX and Net. Beans 7. 4 BUG ! There is a bug in Net. Beans 7. 4 (and in previous versions as well) that does not re-build Java. FX Application Projects after changes are mode in the code. • 19 Workaround - after you make changes in your code, close your application (if open) and then choose to Build your project (F 11 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 20

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

UI Controls Nodes There a lot of UI controls that come out-of-the-box in Java. FX: 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

Agenda • Important Links • AWT, Swing and Java. FX 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 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 Border. Pane that contains Flow. Panes) 27

examples. javafx. complexlayout DEMO 28

Agenda • Important Links • AWT, Swing and Java. FX 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/docfiles/cssref. html Tutorial: http: //docs. oracle. com/javafx/2/css_tutorial/jfxpubcss_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 recompiling 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 Java. FX application • In a CSS file you write one or more design rules • A Design Rule consists of two parts: 32 • 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 #id 1 were id 1 is a unique id (represented as a string) of a Node • Class Selector – written as. class 1 ; 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 Java. FX knows how to merge properties from several CSS rules (for example, a Button with an id of “save. Button” will have properties from both. button and #save. Button 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: 16 px; -fx-font-weight: bold; -fx-opacity: 0. 5 } #login. Button { -fx-backgound-color: blue } 34

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

Agenda • Important Links • AWT, Swing and Java. FX 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/docfiles/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-topass-object-created-in-fxml-controller 1 -to-controller 2 of-inner-fxml-cont 39

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

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 Net. Beans as a text file (right click -> Edit) and edit your root element (usually some Pane) as follows: 1. Remove these attributes: xmlns: fx="http: //javafx. com/fxml/1" xmlns="http: //javafx. com/javafx/2. 2" 2. Add this attribute instead: xmlns: fx="http: //javafx. com/fxml" 41

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

More Stuff! There a lot of more stuff to explore and use in Java. FX (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. Lost. Exmaple DEMO 44