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