A definitive guide to JavaFX, and a comprehensive guide to Swing are packed into this intensely practical, quirky guide to building awesome UIs in Java
Let’s parse that.
Programming Drills (code-alongs, with source code included)
Talk to us!
We - the course instructors - start with introductions. We are a husband-wife team, studied at Stanford, and spent several years working in top tech companies, including Google, Flipkart and Microsoft.
Next, we talk about the target audience for this course: experienced UI programmers who know Swing but now would like to master JavaFX; server-side programmers who know neither Swing nor JavaFX and would like to learn UI programming from 0 to 1, and folks who have done just a little bit of Swing but are not completely confident about their grasp on Java UI programming.
By the end of this class, students will be able to build sophisticated UIs in JavaFX and Swing; you will know how to build clean, maintainable and smooth user interfaces, and will be able to carry this knowledge over to any language or platform.
That's it for preliminaries - with this we plunge right in!
With all great user interfaces, there is a lot more than meets the eye. We start with an exploration of this idea.
This lecture is an intro to Swing - a Java framework used for building graphical user interfaces (GUI). It covers the building blocks used in Swing, the JFrame and JComponent classes and talks about the pros and cons of using Swing.
We plunge into Swing which is a prototypical UI programming framework. We start with the building blocks of Swing (JFrame and JComponent). Next - the idea of layouts which position controls on screen, and the border layout as an example. Then, JComponents(JTextArea, JTreeView, JMenuBar, JScrollPane, JPanel and JFileChooser).
This lesson explores the different classes that Swing provides for UI components such as menus (JMenuBar, JMenu, JMenuItem). Trees in Swing are pretty powerful but complicated to use, we learn how to deal with their intricacies.
We also learn how to capture and handle mouse events.
We introduce JavaFX, a new framework which is intended to replace Swing as the standard GUI library for Java. JavaFX features are much more powerful than Swing - stuff such as Properties and Bindings, CSS support pack a real whammy.
This course continues with JavaFX features which make it so powerful. Scenebuilder and FXML allow decoupling model and controller code from UI design and definition. Built in 3D effects (illumination, material textures and camera effects), support for animations, charting, audio and video media all make JavaFX a great choice for building user interfaces.
The basic building blocks in a JavaFX program - Stage, Scene and Node.
Properties and Bindings are a Java beans programming construct which allow wiring up of variables to express relationships between them. JavaFX uses this extensively within its framework to expose granular updates for various events.
We code up a short example to see properties and bindings in action. Two text areas that remain perfectly in sync with each other - changes in one reflect immediately in another.
Open questions on Properties and Bindings. Why are they special? What is the difference between Change Events and Invalidation Events? What are ReadOnly and ReadWrite properties? What are Property objects and Binding objects and how are they different? We answer these and more in this lecture.
How do properties announce changes in their values? They implement the ObservableValue interface and Observable interface. This means they accept both ChangeListeners and InvalidationListeners. We'll also see how ReadWrite properties are just writable ReadOnly properties by looking at the entire interface hierarchy.
This lecture talks about scenarios where bindings should be used instead of properties. Properties are useful in 1:1 relationships and bindings are useful to model 1:Many relationships. We'll cover specific examples of when Bindings are to be used over properties.
We saw when Bindings are useful in the previous class. There are few different ways of implementing bindings and this class takes about the most important ones - static methods in the Bindings class, extending a pre-existing Binding object and the fluent API.
JavaFX is powerful because virtually all classes expose their properties for others to bind to. But this might be overkill. We will talk about the benefits of Eager versus Lazy Evaluation of properties. We usually implement Lazy Evaluation of Properties using an InvalidationListener. We will then move on to Eager versus Lazy Instantiation of Properties.
We'll also take a brief look at FXCollections, which are are useful containers that announce when their value changes.
We'll introduce FXML and Scenebuilder. Scenebuilder is WYSIWYG tool to setup User Interfaces. FXML is a way to specify Java UI Elements in XML with no code at all. When you consider the MVC paradigm, FXML is a way to set up the view without writing all the boilerplate usually involved.
FXML is a way to specify UIs in XML. How is this understood by Java? This is classic dependency injection, the controller class in JavaFX is linked to the FXML file - the link relies on two bits of syntax - the @FXML annotation and the fx:id tag
The FXMLLoader is pretty amazing. It's the key element in converting an FXML file into a usable Java Object. It does a host of things including instantiating nodes, wiring up listeners etc. The FXMLLoader is the class which takes care of dependency injection in FXML.
JavaFX allows us to nest one FXML file inside the other. This allows us to build up our UI in logical blocks.
Shapes and Nodes are at the heart of drawing support in JavaFX. JavaFX provides a bunch of built-in Shape classes all of which can be animated easily. Rotation, translation, etc are easy to use transitions in JavaFX.
Create an animated GIF of all the fonts on your machine. We'll use the snapshot method thats implemented by all nodes and borrow some code from a kind soul who's done the work of converting images to GIFs
Learn what's at the base of creating some cool animations in JavaFX. The Animation class is at the core JavaFX built-in animation support. Transition animations are built-in and provide a variety of effects like Fade, Fill, moving a Node along a Path etc. Timeline Animations can be used to handcraft custom animations. KeyValues and KeyFrames are the trick to achieving this.
Write some code to we animate a text in a bunch of ways (path transition, fade transition, rotate transition, stroke and fill transitions and sequential transition) using JavaFX's built-in animation support.
JavaFX built-in media support is part-lame, part-awesome. Media Support is a great example of the Model-View-Controller (MVC) paradigm in action. JavaFX has built-in media classes to represent each of the Model, View and Controller
Get started with some common operations on media files - play, pause, stop etc. Setting up a volume slider for the mediaplayer is easy as pie, but a position slider is surprisingly complicated.
Build your very own Media Player from scratch - and put in all the functionality you would expect - Play, Pause, Stop, Volume and Position controls
We continue building our Media Player. Wiring up listeners to set up a position slider is surprisingly complicated. We'll use Platform.runlater() to keep the UI zippy and responsive.
JavaFX has great built-in support for Charts and Tables. Once again these are good examples of the Model-View-Controller (MVC) paradigm in action. Both require some adapter code to be written - the adapter for tables is kind of cool and unlike anything you've seen before.
JavaFX has built-in support for a variety of charts (PieChart, BarChart, LineChart, StackedAreaChart, BubbleChart and more). All these derive from the Chart base class. Wiring up charts requires us to write some adapter code.
Code up a table in JavaFX. Use it represent financial data of some Fortune 500 companies
Code up a bubblechart in JavaFX and use it to represent the financials of some Fortune 500 companies
Before we get into learning about 3D, we take a detour and remind ourselves of JavaFX support for drawing 2D shapes
Shape3D class is at the heart of 3D rendering in JavaFX. Built-in shapes Sphere, Box and Cylinder derive from Shape3D class. 3D Shapes in JavaFX have 3 important properties : Material, Drawmode and Cullface. 3D representations are created in JavaFX using rotations and 3D animations are created using camera movements.
We code up our first set of 3D shapes and explore the different properties of 3D shapes in JavaFX (Material, Drawmode and CullFace)
Handcraft a 3D timeline animation in JavaFX - we learn how to use KeyValues and KeyFrames. Use a Camera to create depth movements in a 3D animation
Loonycorn is us, Janani Ravi, Vitthal Srinivasan, Swetha Kolalapudi and Navdeep Singh. Between the four of us, we have studied at Stanford, IIM Ahmedabad, the IITs and have spent years (decades, actually) working in tech, in the Bay Area, New York, Singapore and Bangalore.
Janani: 7 years at Google (New York, Singapore); Studied at Stanford; also worked at Flipkart and Microsoft
Vitthal: Also Google (Singapore) and studied at Stanford; Flipkart, Credit Suisse and INSEAD too
Swetha: Early Flipkart employee, IIM Ahmedabad and IIT Madras alum
Navdeep: longtime Flipkart employee too, and IIT Guwahati alum
We think we might have hit upon a neat way of teaching complicated tech courses in a funny, practical, engaging way, which is why we are so excited to be here on Udemy!
We hope you will try our offerings, and think you'll like them :-)