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

Winter 2015CMPE212 - Prof. McLeod2 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 2015CMPE212 - Prof. McLeod3 ComponentGridLayoutBorderLayoutFlowLayout Container Abstract Class Concrete Class Object Window Frame JFrameJComponent java.awt javax.swing

Winter 2015CMPE212 - Prof. McLeod4 AbstractButton JMenuItem JLabel JMenuBar JPanel JTextArea JFrameJComponent javax.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 2015CMPE212 - Prof. McLeod5

“Client Technologies” For lots of links on JavaFX and Swing see: clienttechnologies.htm It would be fun to learn JavaFX right away, but we need to “walk” before we can “run”! Winter 2015CMPE212 - Prof. McLeod6

Winter 2015CMPE212 - Prof. McLeod7 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 2015CMPE212 - Prof. McLeod8 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 2015CMPE212 - Prof. McLeod9 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 2015CMPE212 - Prof. McLeod10

Winter 2015CMPE212 - Prof. McLeod11 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 2015CMPE212 - Prof. McLeod12 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 2015CMPE212 - Prof. McLeod13 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! Also has links to other resources on interface design.

Winter 2015CMPE212 - Prof. McLeod14 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 2015CMPE212 - Prof. McLeod15 “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 2015CMPE212 - Prof. McLeod16 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 2015CMPE212 - Prof. McLeod17 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 2015CMPE212 - Prof. McLeod18 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 2015CMPE212 - Prof. McLeod19 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 2015CMPE212 - Prof. McLeod20 Google Web Page Design See: Skip the first few minutes – start at about 2:40

Winter 2015CMPE212 - Prof. McLeod21 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 2015CMPE212 - Prof. McLeod22

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

Winter 2015CMPE212 - Prof. McLeod24 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 2015CMPE212 - Prof. McLeod25 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 2015CMPE212 - Prof. McLeod26 JFrame Tutorial This is also linked out of the API documentation for the JFrame class.

Java 7 Changes to Swing See: enhancements-7.html See Java7Frame.java and Java7FrameDemo.java for a demonstration of a non-rectangular frame shape and the use of transparency. Winter 2015CMPE212 - Prof. McLeod27

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