Notices Assn 3 is posted – due tomorrow. Quiz marking underway (still – sigh…). Alternate solution code was added on Tuesday to the assignment 3 statement – uses the Class Object. Simpler and more elegant solution (IMHO). Winter 2016CMPE212 - Prof. McLeod1

Today GUI Design, Cont. Getting started with JavaFX: –Overview. –Configuring Eclipse. –Wizard generated project contents. –How it works – the basics. –Start Layout Managers. Winter 2016CMPE212 - Prof. McLeod2

Winter 2016CMPE212 - Prof. McLeod3 “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 2016CMPE212 - Prof. McLeod4 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…

Aside – “Design Leadership” From: leadership/ Winter 2016CMPE212 - Prof. McLeod5

Winter 2016CMPE212 - Prof. McLeod6 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 2016CMPE212 - Prof. McLeod7 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 2016CMPE212 - Prof. McLeod8 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 2016CMPE212 - Prof. McLeod9 Google Web Page Design See: Skip the first few minutes – start at about 2:40

Winter 2016CMPE212 - Prof. McLeod10 Web Usability See Good on-line books: urFace/userInYourFace.htm

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 2016CMPE212 - Prof. McLeod11

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 2016CMPE212 - Prof. McLeod12

Getting Started Using JavaFX - Topics Overview / Installation. Start by looking at the Scene/Stage model. What is a Scene Graph? How components are laid out using Pane-based layout managers. Look at the use of CSS style sheets. Attach events to components. Look at the use of FXML files and SceneBuilder. Drawing, images and animation. Winter 2016CMPE212 - Prof. McLeod13

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 2016CMPE212 - Prof. McLeod14

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 2016CMPE212 - Prof. McLeod15

Winter 2016CMPE212 - Prof. McLeod16 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:

e(fx)clipse Version Update March 3, 2016: released version The resources page provides the download link as: released/2.2.0/site Change “2.2.0” to “2.3.0” to get the latest. Winter 2016CMPE212 - Prof. McLeod17

SceneBuilder Version Latest installer build linked to the Gluon site is 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 2016CMPE212 - Prof. McLeod18

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 2016CMPE212 - Prof. McLeod19

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 2016CMPE212 - Prof. McLeod20

New JavaFX Project Wizard, Cont. An item (layouts, controls, images, etc.) is called a “node”. Nodes are added to 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 2016CMPE212 - Prof. McLeod21

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 2016CMPE212 - Prof. McLeod22

JavaFX Scene Graph Here is part of the existing Node hierarchy: Winter 2016CMPE212 - Prof. McLeod23 Node Parent Region Control PaneLabeled

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 2016CMPE212 - Prof. McLeod24

JavaFX Scene Graph, Cont. There are many more classes extending nodes in this hierarchy. For example, some classes extending from Labeled: Winter 2016CMPE212 - Prof. McLeod25 Labeled ButtonBaseLabel Button CheckBoxToggleButton RadioButton See the JavaFX API Tree diagrams for all the classes.

Aside - JavaFX API Docs These are separate from the regular Java API docs. You can download your own copy from: mentation/jdk8-doc-downloads html Let’s have a look! Winter 2016CMPE212 - Prof. McLeod26

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 2016CMPE212 - Prof. McLeod27

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 2016CMPE212 - Prof. McLeod28

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 2016CMPE212 - Prof. McLeod29

Pane Objects In order to design your window you need to understand how the different Pane objects work. From the JavaFX API Tree: Winter 2016CMPE212 - Prof. McLeod30