CMPE212 - Prof. McLeod 1

Today

• Assn 3 posted. Due March 13.• Quiz 2 solutions posted.• Assignment 2 sample solution is posted.

• Introduce Event-Driven Programming and GUI Design.

Winter 2015

Winter 2015 CMPE212 - Prof. McLeod 2

Hierarchy Example - GUI Components

• Many of these are part of the Component hierarchy in javax.swing

• Swing is a modern improvement, built on the older, AWT (“Abstract Windows Toolkit”) classes.

• The following diagram is a simplified summary of the structure:

Winter 2015 CMPE212 - Prof. McLeod 3

Component GridLayoutBorderLayout FlowLayout

Container

Abstract Class

Concrete ClassObject

Window

Frame

JFrame JComponent

java.awt

javax.swing

Winter 2015 CMPE212 - Prof. McLeod 4

AbstractButton

JMenuItem

JLabel

JMenuBar

JPanel

JTextArea

JFrame JComponentjavax.swing

JMenu

JButton

JTextComponent

JTextField

Aside - JavaFX

• Oracle would like us to start using these classes instead of swing classes.

• Swing was developed mostly for enterprise/business use, not for personal use and certainly not for mobile devices.

• Available in the API since Java 7.• The latest is called JavaFX 8.• There are 30 javafx.* packages in the API.• Jazzier controls, more support for portable

devices.

Winter 2015 CMPE212 - Prof. McLeod 5

CMPE212 - Prof. McLeod 6

“Client Technologies”

• For lots of links on JavaFX and Swing see:

http://docs.oracle.com/javase/8/javase-clienttechnologies.htm

• It would be fun to learn JavaFX right away, but we need to “walk” before we can “run”!

Winter 2015

Winter 2015 CMPE212 - Prof. McLeod 7

Event-Driven Programming

• So far, for assignments, you have written “batch” programs – the coder (you!) controls the flow of execution.

• For event-driven programs, the user controls the flow by initiating events.

• A GUI interface consists of components contained within a frame (or “window”). Components and even the frame itself can respond to events.

Winter 2015 CMPE212 - Prof. McLeod 8

Possible Events

• Some things that can trigger code execution:– Left mouse click down on a command button.– Left mouse click down on any component.– Similarly for any mouse button.– Similarly for holding a mouse button down.– Similarly for mouse button up.– Double click on a component…– Cursor over a component.– Cursor leaving a component.– Cursor hovering over a component.– Component has focus or has lost focus.– Component contents have changed.– Alt-key or Cntrl-key or Shift-key, etc…

Winter 2015 CMPE212 - Prof. McLeod 9

Events, Cont.

• Most events you ignore – your interface does not have to respond to every possible keyboard and mouse initiated event – that would be crazy!!

• To respond to an event in code, you attach an ActionListener object to a component. When an event occurs the listener receives an object which contains information about the source of the event (which mouse button, etc.)

• You decide which events are of interest and what you want your program to do when these events occur.

GUI Construction

• Construction of a Graphical User Interface involves:– Creating the design of the window – choosing

components (buttons, labels, text boxes, etc.) and where they are positioned in the window.

– Changing properties, including appearance properties, of the components.

– Adding and linking functionality to events, where needed.

– Repeating these steps for each window!– Connecting the program flow between windows.

Winter 2015 CMPE212 - Prof. McLeod 10

Winter 2015 CMPE212 - Prof. McLeod 11

GUI Design

• Interface design is a BIG topic – beyond the scope of this course.

• IDE (Integrated Development Environment) 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 2015 CMPE212 - Prof. McLeod 12

GUI Design, Cont.

• We are going to start building GUI’s the hard way (by ignoring any Visual Editor tools).

• Speaking of Visual Editors – the best one for Eclipse right now is “WindowBuilder Pro”, written by Google and donated to the Eclipse Foundation. Now it is included with Eclipse already – you don’t have to install it. You won’t need to use the VE for anything, but you might like to try it out!

• Let’s take a peek!

Winter 2015 CMPE212 - Prof. McLeod 13

Interface Hall of Shame!

• This site is dated (circa 1999), but the points it raises are still valid.

• And many of the examples are humorous!

http://interfacehallofshame.eu

• Also has links to other resources on interface design.

Winter 2015 CMPE212 - Prof. McLeod 14

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 2015 CMPE212 - Prof. McLeod 15

“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 2015 CMPE212 - Prof. McLeod 16

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 2015 CMPE212 - Prof. McLeod 17

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 2015 CMPE212 - Prof. McLeod 18

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 2015 CMPE212 - Prof. McLeod 19

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 2015 CMPE212 - Prof. McLeod 20

Google Web Page Design

• See:

http://www.youtube.com/watch?v=697KX4Ciiws

Skip the first few minutes – start at about 2:40

Winter 2015 CMPE212 - Prof. McLeod 21

Web Usability

• See

http://www.usability.gov

• Good on-line books:

http://www.webstyleguide.com/

http://www.usabilityinstitute.com/resources/userInYourFace/userInYourFace.htm

Books (whatever they are…)

• “GUI Bloopers 2.0”, by Jeff Johnson

(also see http://www.gui-bloopers.com)• “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 2015 CMPE212 - Prof. McLeod 22

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 2015 CMPE212 - Prof. McLeod 23

Winter 2015 CMPE212 - Prof. McLeod 24

Creating a Frame

• Two ways to do it:– Instantiating a JFrame object directly.– Instantiating an object that extends JFrame.

• Which is better?

• The second technique is how we are supposed to use Java!

• The first technique is like carrying out an operation on someone over a telephone…

Winter 2015 CMPE212 - Prof. McLeod 25

Creating a Frame

• See SimpleFrame.java and JFrameDemo.java for a simple example.

• What behaviour is inherited from JFrame?• What attributes have to be set?

• A few optional attributes of the frame can be changed in this example.

• No components are being added – yet…

Winter 2015 CMPE212 - Prof. McLeod 26

JFrame Tutorial

http://download.oracle.com/javase/tutorial/uiswing/components/frame.html

• This is also linked out of the API documentation for the JFrame class.

CMPE212 - Prof. McLeod 27

Java 7 Changes to Swing

• See:

http://docs.oracle.com/javase/7/docs/technotes/guides/swing/enhancements-7.html

• See Java7Frame.java and Java7FrameDemo.java for a demonstration of a non-rectangular frame shape and the use of transparency.

Winter 2015

Java 8 Changes to Swing?

• There aren’t any…

• Java GUI enhancements will now be added to JavaFX.

• Essentially swing components will be depreciated…

• See JavaFXDemo.java

Winter 2015 CMPE212 - Prof. McLeod 28