From 0 to 1: JavaFX and Swing for Awesome Java UIs

An intensely practical, comprehensive and quirky look at JavaFX and Swing. Instructors are ex-Google, Stanford.
3.7 (37 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,512 students enrolled
$19
$50
62% off
Take This Course
  • Lectures 47
  • Length 12.5 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2015 English

Course Description

  • Prerequisites: Basic understanding of Java
  • Taught by a Stanford-educated, ex-Googler, husband-wife team
  • Hundreds of lines of source code with hundreds of lines of code - just download and open in your IDE

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.

  • This course is a definitive guide to JavaFX: every important part of the framework is covered in great detail, with sophisticated examples and context
  • The course is a comprehensive guide to Swing: you will be able to build sophisticated, clean Swing apps, and employ every important technique.
  • The course is intensely practical, packed with dozens of examples and hundreds of lines of included source code.
  • The course is also quirky. The examples are irreverent. Lots of little touches: repetition, zooming out so we remember the big picture, active learning with plenty of quizzes. There’s also a peppy soundtrack, and art - all shown by studies to improve cognition and recall.

What's Covered:

  • JavaFX: JavaFX as the evolutionary successor of Swing; Javascript and CSS support; FXML and SceneBuilder; how FXML and Dependency Injection work; zippy synching with Properties and Bindings; 3D Animations; 2D Animations (Transitions and Timelines); Charting - for the first time in Java; Media support, and building a real Media Player; Image handling and animated GIF construction; multi-threading in JavaFX; plus all the standard stuff: menus, trees, browser controls;
  • Swing: Framework basics; JFrames, JPanels and JComponents; Menus and menu handling; Trees and their nuances; File choosers, buttons, browser controls
  • Design: The MVC Paradigm, Observer and Command Design Patterns; Dependency Injection via FXML

Programming Drills (code-alongs, with source code included)

  • A News Curation app to summarise newspaper articles into a concise email snippet
  • Animated GIF generation, using Java Image libraries as well multi-threading support
  • A fully fledged Media Player to play MP3 and MP4 files; complex wiring up of UI elements to make sure the little details (volume control, position sliders) work right
  • 2D Animations to rival those available in Powerpoint and other presentation software
  • 3D Animations including moving cameras, rotation and transition of 3D shapes
  • Bubble Charts and Tables to represent revenue, market valuation and growth of a set of companies - a business app as good as Excel
  • Javascript and CSS examples that show how these incredibly powerful tools can be used inside a Java UI app
  • SceneBuilder and FXML support, so that design and implementation can be divvied up between designers and software engineers

Talk to us!

  • Mail us about anything - anything! - and we will always reply :-)

What are the requirements?

  • Programming expertise at the level of a Programming 101 Class, preferably in Java.

What am I going to get from this course?

  • Build sophisticated user interfaces in Java, both in JavaFX and in Swing
  • Use menus, trees, buttons, tables and all the important standard UI-building techniques - both in JavaFX and in Swing
  • Use Scenebuilder and FXML to effortlessly create UIs using dependency injection
  • Blur the lines between web and app development by using JavaScript and CSS
  • Build business apps with charts and tables that rival spreadsheets like MS-Excel
  • Leverage the power of Properties and Bindings to get the little details right
  • Build 3D animations in JavaFX
  • Use JavaFX Media support - build an entire, fully functional media player, and also know the limits of Java media capabilities
  • Understand the MVC paradigm and the observer and command patterns that underpin virtually all modern UI frameworks

What is the target audience?

  • Yep! UI engineers looking for a definitive resource on JavaFX, the future of Java UI programming
  • Yep! UI engineers looking for a comprehensive first-principles guide to Swing, the most popular UI programming framework right now
  • Yep! Back-end engineers seeking a one-stop-shop course for building awesome front-ends
  • Nope! This course is not right for you if you are looking for a Programming 101 course. You should have a good grasp of programming, ideally in Java, to benefit from this course
  • Nope! This course is probably not right for you if you are a product manager or tech investor - this course is pretty much exclusively focused on the "how", not the "what"

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Why learn JavaFX and Swing?
05:02

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.

Section 2: Swing
16:58

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.


08:18

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

18:35

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.

Section 3: JavaFX Introduced
11:01

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.


10:16

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.

04:21

The basic building blocks in a JavaFX program - Stage, Scene and Node.

11:20

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.

04:13

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.

Section 4: Properties And Bindings
17:24

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.

14:51

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.

12:43

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.

10:31

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.

17:57

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.

Section 5: FXML and SceneBuilder
11:49

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.

14:09

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

15:40

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.

15:14

This lecture talks about important and useful features of FXML files - specifying a stylesheet (CSS File support), localizing your content (localization support through location resolution), property binding inside FXML using the '${..}' notation, nested FXML files (one FXML file inside another FXML file) and using javascript inside FXML files.

12:20

We continue exploring intricate details of FXML - property binding inside FXML using the '${..}' notation, javascript support inside FXML files

05:24

JavaFX allows us to nest one FXML file inside the other. This allows us to build up our UI in logical blocks.

Section 6: Shapes and Drawing
16:39

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.

16:31

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

Section 7: Animation
18:10

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.

13:46

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.

Section 8: Media
10:36

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

15:34

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.

17:49

Build your very own Media Player from scratch - and put in all the functionality you would expect - Play, Pause, Stop, Volume and Position controls

16:33

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.

Section 9: Charts and Tables
17:36

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.

04:29

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.

12:49

Code up a table in JavaFX. Use it represent financial data of some Fortune 500 companies

07:10

Code up a bubblechart in JavaFX and use it to represent the financials of some Fortune 500 companies

Section 10: 3D
11:17

Before we get into learning about 3D, we take a detour and remind ourselves of JavaFX support for drawing 2D shapes

12:57

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.

10:24

We code up our first set of 3D shapes and explore the different properties of 3D shapes in JavaFX (Material, Drawmode and CullFace)

05:34

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

Section 11: Swing Practical Exercise
17:19

We build a serious Swing application - the News Curation App: The objective of the drill is to build an application that helps in curating news snippets and quickly summarizing articles. We will use helper classes to write to an HTML file, set up the Model portion of the MVC paradigm. This stores the underlying data for the application.

15:18

We continue with our News Curation Swing App. This class focuses on the View portion of the MVC paradigm. We will set up the UI of our drill in this video using JTree, JEditorPane and JTextArea. We learn the use of scrollpanes to set up scroll bars in our UI when content overflows its container.

16:14

As part of our News Curation Swing app - we setup a tree structure for navigation. In Swing this can be done using the JTree class which renders the view. The JTree requires a corresponding model and a bunch of listeners to set it up completely. This drill looks at wiring up the tree completely - no mean task!

17:45

We continue with our News Curation Swing App. This class focuses on the Controller portion of the MVC paradigm. We wire up a whole bunch of events listeners, for the File->Save menu, tree navigation and selection listeners, text area change listeners and the Go! button click listener.


Section 12: JavaFX Practical Exercise
17:31

We'll rebuild the News Curator app from our Swing exercise, this time using JavaFX. The model and the view are very similar to the Swing code, although the UI is set up with JavaFX classes. You'll see how much simpler they are in most cases!

18:57

We continue building the News Curator app. The controller in the JavaFX version is very different from Swing. Thanks to the user of properties and bindings wiring up listeners is far simpler and involves very little boilerplate code.

Section 13: FXML Practical Exercise
12:08

We return to our favorite News Curator App and this time build it using Scenebuilder and FXML. Scenebuilder is a powerful tool that allows UX designers to set up the UI without writing any code.

07:49

We continue with our News Curator app - this time integrating the fxml with the java code. The link is forged by two key elements, the @FXML annotation and the fx:id tag

15:12

Wiring up listeners is a breeze using FXML. We'll see how to wire up the listeners for the News Curator App.

Section 14: Properties and Bindings Practical Exercise
17:11

This class looks at code for defining, listening on and binding to a property. We'll introduce the ObservableValue<T> interface and see how it differs from the old Observer interface.

18:11

We code up a preview pane as an extension to the news curation app in JavaFX using properties and bindings. This allows us to see how the HTML page will look in real-time. This involves extensively using properties and the observable collections.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Loony Corn, A 4-person team;ex-Google; Stanford, IIM Ahmedabad, IIT

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

Ready to start learning?
Take This Course