1. CMPE212 – Stuff… Assn 3 sample solution is posted.
Winter 2018 CMPE212
11/11/2018
CMPE212 – Stuff…
Assn 3 sample solution is posted.
Assignment 4 due March 23 – this Friday.
Next (and last) quiz next week.
Winter 2018
CMPE212 - Prof. McLeod
Prof. Alan McLeod

2. Today Quick look at GUI Design. Intro to JavaFX. Winter 2018
CMPE212 - Prof. McLeod

3. GUI Design
Interface design is a BIG topic – beyond the scope of this course.
IDE (Integrated Development Environments) tools can make it easy to choose and position components on a frame – but is the design as user-friendly as possible?
Too many GUI programs have been slapped together without much thought as to their usability.
Winter 2018
CMPE212 - Prof. McLeod

4. Interface Hall of Shame!
This site is dated (circa 2000), but the points it raises are still valid.
And many of the examples are funny!
Also has links to other resources on interface design.
Also:
Winter 2018
CMPE212 - Prof. McLeod

5. Isys Information Architects Web Site
Part of their development philosophy:
“Software must assist the user perform a task, not become a task in itself.
Software must not make the user feel stupid.
Software must not make the computer appear to be stupid”.
Winter 2018
CMPE212 - Prof. McLeod

6. “Principles of Good GUI Design” by James Hobart (CCI)
(Corporate Computing International)
Avoid the Biggest Problems:
Forgetting the user.
Not allowing the user full control.
Putting too many features at the top level.
Understand People
Pattern/picture recognition – don’t expect a user to work from memory all the time.
Stay open to the different experiences and perspectives of your users.
Winter 2018
CMPE212 - Prof. McLeod

7. James Hobart, Cont. Design for Clarity and Consistency
Use consistent, self-explanatory terms for operations throughout the entire system.
(Enforced by Macintosh, but not Microsoft…)
Pay “homage” to common operational terms like “copy”, “paste”, “save”, “save as”, etc.
Provide Visual and Audible Feedback
Use progress bars for operations that take more than a few seconds.
Use sounds to warn users, but allow him to turn these off later…
Winter 2018
CMPE212 - Prof. McLeod

8. Aside – “Design Leadership”
From:
Winter 2018
CMPE212 - Prof. McLeod

9. James Hobart, Cont. Use Text Sparingly But Wisely
Text should be descriptive but concise and accurate.
Might be a task for a trained technical writer?
Provide Traceable Paths
The user should always know how he arrived at the current window and how to get back out again.
Not so easy to implement!
Winter 2018
CMPE212 - Prof. McLeod

10. James Hobart, Cont. Provide Keyboard Support
Challenge: Can a user navigate and use all of your program without using a mouse?
What operations should be mouse only?
Maintain a Consistent “Look and Feel”
Give a lot of thought to a single look and feel style that can be used throughout your project.
(Changing the style of your presentation later can be very time consuming!)
Winter 2018
CMPE212 - Prof. McLeod

11. James Hobart, Cont. Control Window Types and Numbers
You can use “modal” dialog boxes for finite tasks (such as getting a specific user input).
Otherwise try to keep the number of simultaneous modeless boxes to three or less.
(What is the difference between modal and modeless windows, anyways?)
Winter 2018
CMPE212 - Prof. McLeod

12. Google Web Page Design See: http://www.youtube.com/watch?v=697KX4Ciiws
Skip the first few minutes – start at about 2:40
Winter 2018
CMPE212 - Prof. McLeod

13. Web Usability See http://www.usability.gov Good on-line books:
Winter 2018
CMPE212 - Prof. McLeod

14. Paper-Based Books (whatever they are…)
“GUI Bloopers 2.0”, by Jeff Johnson
(also see
“Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules”, also by Jeff Johnson
“Don't Make Me Think: A Common Sense Approach to Web Usability”, 2nd Edition, by Steve Krug
Many others!
Winter 2018
CMPE212 - Prof. McLeod

15. Web Design vs. Application UI Design
What are the different design considerations between a web app, a PC app and (what the heck!) a portable app?
How about touch screens vs. a normal keyboard/mouse interface?
Winter 2018
CMPE212 - Prof. McLeod

16. JavaFX Overview
You can separate style and layout from functional code using *.css and *.fxml files. Very modern!
Contains a rich set of tools for:
Web browsing.
Media playing.
2D and 3D drawing and animation. Including many visual effects.
Taking advantage of hardware accelerated rendering.
Winter 2018
CMPE212 - Prof. McLeod

17. JavaFX Overview, Cont. Already contains separate threads for:
The main application.
Rendering.
Media playback.
Over 50 controls, built-in.
A dozen built-in chart types.
2D and 3D transformations as well as many other visual effects can be applied to most controls.
Winter 2018
CMPE212 - Prof. McLeod

18. Fall 2013 CMPE212
JavaFX - Installation
You need to add e(fx)clipse to eclipse in order to have the libraries and tools you need to write JavaFX code.
You don’t need SceneBuilder but might like to play with it later.
See the Resources page on the course web site.
The homepage for e(fx)clipse is:
Winter 2018
CMPE212 - Prof. McLeod
Prof. Alan McLeod

19. e(fx)clipse Version June, 2017: released version 3.0.0...
Current version is ….
This is currently in the “General Purpose Tools” in the “Available Software” dialog, and it seems to come from eclipse.org. So, you don’t have to identify a different download site for it.
Winter 2018
CMPE212 - Prof. McLeod

20. SceneBuilder Version
Latest installer build linked to the Gluon site is (Oct., 2017) for Java 9. (Java 8, use version 8.4.1)
A drag and drop visual editor that edits an *.fxml file in the background.
SceneBuilder can be invoked from within eclipse, but essentially runs outside of eclipse.
More later…
Winter 2018
CMPE212 - Prof. McLeod

21. New JavaFX Project Wizard
Sets up quite an elaborate structure for you!
Don’t have more than one JavaFX project per eclipse project.
Let’s have a look!
Winter 2018
CMPE212 - Prof. McLeod

22. New JavaFX Project Wizard, Cont.
Your GUI class needs to extend the javafx.application.Application class.
Your main() method must invoke the inherited launch() method to start the application. Supply the args from the main parameter list to launch().
The wizard overrides the start() method from Application and the parameter for start() is the Stage object for the window, called “primaryStage”.
Winter 2018
CMPE212 - Prof. McLeod

23. New JavaFX Project Wizard, Cont.
An item (layouts, controls, images, etc.) is called a “node”.
Nodes are added to the Nodes hierarchy (next, next slide), and the root node of this hierarchy is added to the Scene object when it is instantiated (and it is given a size in pixels).
The Scene object is then put on the stage using the .setScene() mutator.
When the scene is all constructed the “curtains are raised” by invoking .show() on the stage object.
Winter 2018
CMPE212 - Prof. McLeod

24. New JavaFX Project Wizard, Cont.
The wizard also adds a link to a CSS (“Cascading Style Sheet”) file for the scene, called “application.css”.
Initially the file is empty, but you can “skin” the scene using css style specifications for the window and any controls you are using.
You can do all this in your GUI class too, but using the css file allows you to separate style code from application code.
We’ll look into doing this a bit later. For now we’ll just use the default style (“Modena”).
Winter 2018
CMPE212 - Prof. McLeod

25. JavaFX Scene Graph Here is part of the existing Node hierarchy: Node
Parent
Region
Control
Pane
Labeled
Winter 2018
CMPE212 - Prof. McLeod

26. JavaFX Scene Graph, Cont.
Left-hand branch are containers – used to contain and organize other controls.
Right-hand branch are the controls.
Usually a container type object will be the “root”.
Winter 2018
CMPE212 - Prof. McLeod

27. JavaFX Scene Graph, Cont.
There are many more classes extending nodes in this hierarchy. For example, some classes extending from Labeled:
Labeled
ButtonBase
Label
Button
CheckBox
ToggleButton
See the JavaFX API Tree diagrams for all the classes.
RadioButton
Winter 2018
CMPE212 - Prof. McLeod

28. Aside - JavaFX API Docs
These used to be a separate from the regular Java API docs, but are now part of the “whole”.
Winter 2018
CMPE212 - Prof. McLeod

29. JavaFX Scene Graph, Cont.
Typically you build your GUI by first instantiating existing node objects. For example,
Label myLabel = new Label(“Hello!”);
In order to display the node in the window, you need to add the object you instantiated to the existing Scene Graph structure.
Winter 2018
CMPE212 - Prof. McLeod

30. JavaFX Scene Graph, Cont.
In order to be able to place your nodes (or “controls”) where you want them, you add them to a Pane object.
A Pane child object includes a layout manager that decides where nodes can be placed.
A Pane object can be added to different type Pane objects as if it was a node itself to give you a great deal of flexibility in your layout.
Finally, the root pane object becomes the root of the scene object and the entire Scene Graph that you have constructed can be displayed.
Winter 2018
CMPE212 - Prof. McLeod

31. Aside – Generating Import Statements
Eclipse is great at helping you generate a missing import statement if you try to use a class that you have not yet imported.
But: if you have a choice, make sure to choose the javafx one, rather than the class from javax.swing or java.awt.
Winter 2018
CMPE212 - Prof. McLeod