JavaFX in Action Part I

1.235 visualizaciones

Publicado el

My lecture slides in Advanced Programming with Java course in K.N. Toosi University of Technology about JavaFX.
In this slides I described the basic concept of JavaFX like Shapes, Observer Pattern, Even-Driven Programming and more.
In the Part II I'll describe more advanced topic like FXML applications and CSS styling and more... .

Publicado en: Tecnología
0 comentarios
1 recomendación
  • Sé el primero en comentar

Sin descargas
Visualizaciones totales
En SlideShare
De insertados
Número de insertados
Insertados 0
No insertados

No hay notas en la diapositiva.

JavaFX in Action Part I

  1. 1. 1 JavaFX in Action Part I Hossein Rimaz K.N. Toosi University of Technology
  2. 2. 2 Table of Contents • Why JavaFX and Use Cases • JavaFX App Architecture • Hello World • JavaFX Shapes • Recursive Graphic • Quick Introduction to Java 8 Lambda • Event-Driven Programming • Design Patterns and Observer • Properties & Bindings • Simple Graph Editor
  3. 3. 3 Why JavaFX and Use Cases
  4. 4. 4 History of JavaFX Using Google Trends JavaFX Script 1.0 JavaFX 2.0 JavaFX 8
  5. 5. 5 Where can you use JavaFX? Basically everywhere! ● Desktop Applications ● Mobile (with Gluon Mobile) ● Web Application (require plug-ins but JPro doesn’t need any!) ● Embedded System (even ARM)
  6. 6. 6 JavaFX App Architecture
  7. 7. 7 JavaFX Application Life cycle Each JavaFX application needs to extend the javafx.application.Application class, which defines the life cycle of an application. • Application.init() can be used to define and prepare everything before the application starts. • Application.start(Stage stage) is called to start the application. This method should be used to define the complete application and its view by adding a scene that defines the main window of the application. • Application.stop() is called once the application is closed.
  8. 8. 8 Structure of a JavaFX Application
  9. 9. 9 Strange Names? Not at all! Think about it as a theater stage! You have a stage; actors (Nodes) come into the scene and going out of it. And well this is a play, scene goes in and goes out! Just as simple as it is!
  10. 10. 10 Hello World
  11. 11. 11 Creating a JavaFX Application
  12. 12. 12
  13. 13. 13
  14. 14. 14 Final Result That was a simple hello world that probably you have no idea about it! But the result is actually pretty!
  15. 15. 15 JavaFX Shapes
  16. 16. 16 JavaFX Shapes Well, let’s start a little bit simpler. ● Let’s just draw lines!
  17. 17. 17 Be careful about what package you are importing!
  18. 18. 18 JavaFX Shapes How about adding some loops?
  19. 19. 19 Final Result
  20. 20. 20 More Shapes
  21. 21. 21 Recursive Graphics
  22. 22. 22 Recursive Graphics ● You learned recursive programming and now you can apply those techniques to achieve stunning visual arts!
  23. 23. 23 Drawing a Tree Source code at:
  24. 24. 24 Sierpinski Carpet Source code at :
  25. 25. 25 Quick Introduction to Java 8 Lambda
  26. 26. 26 Java 8 New Features ● Lambda expressions ● Method references ● Default Methods (Defender methods) ● A new Stream API. ● Optional ● A new Date/Time API. ● Nashorn, the new JavaScript engine ● Removal of the Permanent Generation ● and more…
  27. 27. 27 Lambda Expression ● A primary goal of lambdas is to help address the lack in the Java language of a good way to express functional programming concepts.
  28. 28. 28 Syntax ● There are two ways to specify lambda expressions. The following simple examples illustrate the general forms: (param1, param2, ...) -> expression; (param1, param2, ...) -> { /* code statements */ }; ● Another thing to note is that parameters can be optionally typed. The compiler will infer the type of the parameters depending on the context.
  29. 29. 29 Why Lambda? ● In event handling lambda expressions will makes our codes shorter and more expressive. ● Now you can understand NetBeans starter code better.
  30. 30. 30 Event-Driven Programming
  31. 31. 31 What is Event-Driven Programming? ● Until now, you may only wrote your programs in imperative way. Your code flow was deterministic and run line after another. ● Event-driven programming is a programming paradigm in which the flow of the program is determined by events such as user actions (mouse clicks, key presses), sensor outputs, or messages from other programs/threads. ● Event-driven programming is the dominant paradigm used in graphical user interfaces and other applications that are centered on performing certain actions in response to user input.
  32. 32. 32 Simple Example ● Simple scenario: mouse goes in, performs a double click and goes out.
  33. 33. 33 Design Patterns and Observer
  34. 34. 34 What is Design Pattern? ● In software engineering, a design pattern is a general repeatable solution to a commonly occurring problem in software design. A design pattern isn't a finished design that can be transformed directly into code. It is a description or template for how to solve a problem that can be used in many different situations. ● Design patterns can speed up the development process by providing tested, proven development paradigms. ● In addition, patterns allow developers to communicate using well- known, well understood names for software interactions.
  35. 35. 35 GoF 23 Design Patterns Creational patterns – Abstract Factory – Builder – Factory Method – Prototype – Singleton Structural patterns – Adapter – Bridge – Composite – Decorator – Façade – Flyweight – Proxy Behavioral patterns – Chain of responsibility – Command – Interpreter – Iterator – Mediator – Memento – Observer – State – Strategy – Template method – Visitor
  36. 36. 36 Design Pattern and JavaFX ● Well you’ve used many of them in your development without knowing their names. ● Knowing about observer design pattern can help you to understand JavaFX Properties & Bindings and It’s Observable collections better. ● If you want to learn more Please read this book: Java Design Patterns by Vaskaran Sarcar
  37. 37. 37 Observer Design Pattern ● GoF Definition: Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically. ● Concept: In this pattern, there are many observers (objects) which are observing a particular subject (object). Observers are basically interested and want to be notified when there is a change made inside that subject. So, they register themselves to that subject. When they lose interest in the subject they simply unregister from the subject. Sometimes this model is also referred to as the Publisher-Subscriber model.
  38. 38. 38 Computer World Example ● In the world of computer science, consider a simple UI-based example, where this UI is connected with some database (or business logic). A user can execute some query through that UI and after searching the database, the result is reflected back in the UI. In most of the cases we segregate the UI with the database. If a change occurs in the database, the UI should be notified so that it can update its display according to the change.
  39. 39. 39 UI Patterns ● Graphical user interfaces have become a familiar part of our software landscape, both as users and as developers. Looking at it from a design perspective they represent a particular set of problems in system design - problems that have led to a number of different but similar solutions. ● When developing GUI applications you will inevitably encounter UI architectural framework concepts such as model view controller (MVC), model view presenter (MVP), or model view view-model (MVVM).
  40. 40. 40 Properties & Bindings
  41. 41. 41 Properties & Bindings ● Properties are basically wrapper objects for JavaFX-based object attributes such as String or Integer. Properties allow developers to add listener code to respond when the wrapped value of an object has changed or is flagged as invalid. Also, property objects can be bound to one another. ● Binding behavior allows properties to update or synchronize their values based on a changed value from another property.
  42. 42. 42 Types of JavaFX Properties ● Read/Writable ● Read-Only ● JavaFX’s properties are wrapper objects holding actual values while providing change support, invalidation support, and binding capabilities. ● Some Property Classes: – – – – – –
  43. 43. 43 Example Output: StringProperty Value = password1 observable = StringProperty [value: 1234] oldValue = password1 newValue = 1234
  44. 44. 44 Bindings ● binding has the idea of at least two values (properties) being synchronized. This means that when a dependent variable changes, the other variable changes. ● JavaFX provides many binding options that enable the developer to synchronize between properties in domain objects and GUI controls.
  45. 45. 45 Types of JavaFX Bindings ● Simple Binding ● Bidirectional Binding
  46. 46. 46 Example ● Binding String length to a Integer Property
  47. 47. 47 Simple Graph Editor Source code at: