John.Wiley.and.Sons.Professional.Java.User.Interfaces.May
10:39 AM 8 March 2006
ffirs.fm
1.0
Main Patterns and Design Strategies organized by functional layer
2:9 PM 10 March 2006
front_inter_cover.fm
1.0
Main principles
•
GUI design and overall development
– User-centered design (44)
A design approach for building highly usable user interfaces, putting the emphasis
on the user.
– Cost-driven design (81)
GUI design comes first, with an eye on development complexity. For example,
avoid using ad-hoc components (81) in your GUI as far as possible.
– Iterative GUI development (169)
Iterate: GUI design and implementation, profiling, software and usability testing.
•
Implementation
– The principle of Single Functional Responsibility (227)
Provide only one functional responsibility per class/method.
– Object lifecycle management – a general mindset (281)
Instantiate lazily and dispose eagerly, avoid garbage collector bottlenecks.
– Don’t go against the flow (284)
GUI toolkits are complex beasts, so don’t ignore them and implement fancy
designs counter to the architecture or style of the underlying GUI toolkits and
infrastructure (RCP).
Visual refactorings
Other refactorings are discussed in Chapter 5.
•
Extract explicit panel (195), Extract stand-alone panel (196), and Composable units (292)
Extract the code of an existing GUI panel into a separate implementation to enhance
modularity and reusability.
•
Merge panel (197)
Merge different implementations representing the same panel into a common one.
•
Add parameter to panel (197) and Remove parameter from panel (198)
Add parameters to customize a panel and its opposite refactoring, Remove parameter
from panel (198).
•
Parameterize panel (199)
Implement two slightly different panels with a unique code base.
•
Replace parameter with panel (200)
Instead of adding a parameter, separate the implementation of the two panels.
•
Rename panel (201)
Change the name of a panel.
12:20 PM 8 March 2006
front_inner_paper.fm
1.0
Cheat Sheet
An extremely simplified and by no means exhaustive basic reference to some of the topics
discussed in the book.
GUI Design
•
How do I signal to the user my GUI is busy?
Change mouse pointer to hour glass for any operation that lasts more than two
seconds, always use progress indicators, and update progress every five seconds.
•
How do I validate my GUI?
Involve users in design, use prototyping, software testing, memory profiling
(Chapter 5), questionnaire evaluation (Appendices A and B), and usability testing.
•
How do I organize the GUI window area?
Use the Area Organization design strategy (120).
•
How do I allow the user to select or create information in a GUI?
Use the Chooser design strategy, 126.
•
How do I deploy my GUI?
Use Java Web Start when the user population is confident with approving certificates,
as for internal software. Use installers in other cases, and for large installation
bundles. Consider also using applets!
Software Design
•
How do I keep my GUI responsive to user interaction during long-running
operations?
Use the Active Object pattern, 280 (for Swing, the SwingWorker class) for any operation that might last more than one second.
•
How do I implement control (reaction to user interaction) in my GUI?
Depending on the number of items to be controlled by control rules, use:
– Scattered control (260) – few items, reactive-only control rules.
– Centralized control, the Mediator pattern (263) – many items, any kind of control
rule.
– Explicit Control State (260) – complex control rules, need for flexibility.
•
How do I implement undo/redo in a GUI?
Build a queue or stack of edits (587), use the Command pattern (258) for user actions.
•
How do I implement role-based authorization/security in my GUI?
Build a dedicated authorization manager class using Adaptation (272).
12:30 PM 8 March 2006
back_inner_paper.fm
1.0
•
How do I implement user customization and user profiles in my GUI?
Build a dedicated profile manager class using Adaptation (272).
•
How do I reuse existing panels in my GUI?
Use visual refactorings (194).
•
How do I organize implementation for modularity and extensibility in a large or
complex GUI?
Define and implement a Composable Unit strategy, 292.
•
How do I implement content assembly – adding components to a screen or panel – in
a GUI?
Depending on the features you want use:
– Static assembly (229), for simple layouts, no reusability.
– Simple Builders (229), for ease of use, separation of concerns, limited flexibility.
– Create and use Domain-specific or Little languages, 466 – good separation, maximum
flexibility.
•
How do I organize complex event-based interactions among objects in my GUI?
Use an Event Arbitrator (245) to:
– Avoid event loops and rationalize chains of observers-observables.
– Shield client classes from low-level events.
– Forward events to complex data structures based on the Composite pattern.
•
How do I handle large data collections?
Depending on the context of the problem, use:
– Eager disposal (281) of objects that are no longer needed – simple references,
extremely large trees.
– Weak or soft references, for cached objects and data that can be created or fetched
on the fly.
– Paging (281) for loading a few pages at time, discarding old ones, such as large
table models or large collections of expensive objects.
•
How do I communicate data remotely in a modular way?
Separate screen data state from domain objects using Data Transfer Objects (234).
•
How do I handle data represented in widgets?
Define Screen Data State (SDS, 330) and the widgets that will interface SDS to the
user. For synchronization with domain objects data (if any) use:
– Manual synchronization of SDS and data, for simple, small GUIs.
– Data binding support, for medium to large, complex GUIs.
12:30 PM 8 March 2006
back_inner_cover.fm
1.0
Professional Java User
Interfaces
10:39 AM 8 March 2006
ffirs.fm
1.0
10:39 AM 8 March 2006
ffirs.fm
1.0
Professional Java User
Interfaces
Mauro Marinilli
10:39 AM 8 March 2006
ffirs.fm
1.0
Copyright © 2006
John Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester,
West Sussex PO19 8SQ, England
Telephone
(+44) 1243 779777
Email (for orders and customer service enquiries): [email protected]
Visit our Home Page on www.wiley.com
All Rights Reserved. No part of this publication may be reproduced, stored in a retrieval system or transmitted in
any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except under
the terms of the Copyright, Designs and Patents Act 1988 or under the terms of a licence issued by the Copyright
Licensing Agency Ltd, 90 Tottenham Court Road, London W1T 4LP, UK, without the permission in writing of the
Publisher. Requests to the Publisher should be addressed to the Permissions Department, John Wiley & Sons Ltd,
The Atrium, Southern Gate, Chichester, West Sussex PO19 8SQ, England, or emailed to [email protected], or faxed
to (+44) 1243 770620.
Designations used by companies to distinguish their products are often claimed as trademarks. All brand names
and product names used in this book are trade names, service marks, trademarks or registered trademarks of their
respective owners. The Publisher is not associated with any product or vendor mentioned in this book.
This publication is designed to provide accurate and authoritative information in regard to the subject matter
covered. It is sold on the understanding that the Publisher is not engaged in rendering professional services. If
professional advice or other expert assistance is required, the services of a competent professional should be sought.
Other Wiley Editorial Offices
John Wiley & Sons Inc., 111 River Street, Hoboken, NJ 07030, USA
Jossey-Bass, 989 Market Street, San Francisco, CA 94103-1741, USA
Wiley-VCH Verlag GmbH, Boschstr. 12, D-69469 Weinheim, Germany
John Wiley & Sons Australia Ltd, 33 Park Road, Milton, Queensland 4064, Australia
John Wiley & Sons (Asia) Pte Ltd, 2 Clementi Loop #02-01, Jin Xing Distripark, Singapore 129809
John Wiley & Sons Canada Ltd, 22 Worcester Road, Etobicoke, Ontario, Canada M9W 1L1
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be
available in electronic books.
Library of Congress Cataloging-in-Publication Data
Marinilli, Mauro.
Professional Java user interfaces / Mauro Marinilli.
p. cm.
Includes bibliographical references and index.
ISBN 0-471-48696-5 (pbk. : alk. paper)
1. Java (Computer program language) 2. User interfaces (Computer
systems) I. Title.
QA76.73.J38M34954 2006
005.13'3--dc22
2006004498
British Library Cataloguing in Publication Data
A catalogue record for this book is available from the British Library
ISBN 13: 978-0-471-48696-5
ISBN 10: 0-471-48696-5
Typeset in 10/13.5pt Palatino by Laserwords Private Limited, Chennai, India
Printed and bound in Great Britain by Bell & Bain, Glasgow
This book is printed on acid-free paper responsibly manufactured from sustainable forestry in which at least two
trees are planted for each one used for paper production.
To the person who keeps alive in his daily work
the Spirit of Wonder of the early days.
10:38 AM 8 March 2006
fdedic.fm
1.0
Brief Contents
Brief Contents
Acknowledgements
xxi
Introduction
xxiii
1 Putting GUI Development into Context
Part I
1
User Interface Design
2 Introduction to User Interface Design
31
3 Java GUI Design
77
4 Recurring User Interface Designs
119
Part II Software Design
5 Iterative GUI Development with Java
169
6 Implementation Issues
223
7 Code Organization
287
8 Form-Based Rich Clients
323
9 Web-Based User Interfaces
359
10 J2ME User Interfaces
375
11 Java Tools and Technologies
393
12 Advanced Issues
447
Part III Examples
13 Rich Client Platforms
471
14 The Personal Portfolio Application
497
15 An Example OO User Interface
535
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Brief Contents
viii
16 An Example Ad-Hoc Component
567
A A Questionnaire for Evaluating Java User Interfaces
607
B A Questionnaire for Evaluating J2ME Applications
613
References
621
Index
629
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
Contents
Acknowledgements
xxi
Introduction
xxiii
The interactivity thrill
Usable GUIs and usable books
The organization of the book
Three levels of advice
Conventions used in the book
Source code
Reader feedback
Book readers and personas
Lars, a Java intermediate programmer
Keiichi, a tech lead
Shridhar, a professor in computer science
Melinda (Mellie), a manager
William, a first year student in a Master in CS course
Karole, a business analyst
Juan, an experienced programmer
xxiii
xxiv
xxv
xxvii
xxviii
xxviii
xxix
xxix
xxx
xxx
xxxi
xxxi
xxxii
xxxiii
xxxiii
1 Putting GUI Development into Context
1.1
1.2
1.3
1.4
1.5
1.6
1
Introduction
Focusing on users
A functional decomposition for user interfaces
Tool selection: the Java singularity
Of running little green men and wrong choices
Organizational aspects
People and GUIs
Team composition
Early design
Use case diagrams and GUIs
modified 6:9 PM 16 March 2006
ftoc.fm
2
2
3
6
7
7
8
10
12
12
1.0
Contents
x
1.7
1.8
1.9
Lifecycle models, processes and approaches
Rational Unified Process
Extreme Programming and other Agile approaches
LUCID methodology
Evolutionary Prototyping process
UML notation
Class diagrams
Sequence diagrams
State diagrams
Summary
14
15
20
22
24
26
26
28
29
30
Part IV User Interface Design
2 Introduction to User Interface Design
31
2.1
32
2.2
2.3
2.4
2.5
2.6
The human factor
A model of interactive systems – seven stages
and two gulfs
Developers are part of the design process
Short term memory and cognitive modeling
Interacting with human beings
User-centered design
Simplified thinking aloud
Display organization
Esthetic considerations
Abstract-Augmented Area for GUIs
Interaction styles
Menu selection
Form filling
Language-based styles
Direct manipulation
Conceptual frameworks for UI design
Entity-based approaches to UI design
Metaphor-based approaches to UI design
Function-based approaches to UI design
‘Null’ approach to UI design
Object-oriented user interfaces
Assessing the quality of a GUI
Usability heuristics
Summary
modified 6:9 PM 16 March 2006
ftoc.fm
32
34
36
39
44
46
47
49
51
57
57
59
62
63
64
65
66
67
67
69
72
73
75
1.0
Contents
xi
3 Java GUI Design
3.1
3.2
3.3
3.4
3.5
3.6
77
Java technology for GUIs
Assembling the components
Three levels of component cost
Cost-driven design
Ad-hoc versus custom – the difference between ‘run’ and ‘ride’
When ad-hoc is the only way to go
Exploring the design space for a point chooser
Standard designs
Ad-hoc designs
Mixed designs
Conclusions
Design guidelines for the Java platform
Introduction to the guidelines
J2SE user interface design guidelines
The Java look and feel design guidelines
Some definitions
The Java ‘look’
The Java ‘feel’
Some terminology
An example – applying the guidelines for designing dialogs
Summary
77
77
79
81
81
83
86
88
91
97
99
100
100
103
108
109
109
110
112
114
117
4 Recurring User Interface Designs
119
4.1
120
120
121
123
124
126
127
128
131
133
133
134
134
135
4.2
4.3
4.4
GUI area organization
Terminology
Main frames
Multiple document interfaces
Wizards
Choosers
Chooser activation mechanisms
Chooser interaction styles
Broadening the choice
Conclusions
Memory components
Input history
Saving user preferences
Lazy initialization
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xii
4.5
4.6
4.7
4.8
4.9
4.10
4.11
4.12
4.13
4.14
4.15
4.16
Preference dialogs
Preference dialogs styles
Waiting strategies
Flexible layout
Common dialogs
The ‘About’ dialog
Log-in dialog
First-time message dialogs
Splash window
Command components
Graphic conventions
Toolbar composition
Command composition
Accessibility
Testing the final product for accessibility
Conclusions
Navigation and keyboard support
Keyboard shortcuts
Tab traversal
Internationalization
Help support
Icons and images
Leveraging object-oriented programming
Summary
137
138
141
144
146
146
149
150
151
152
156
157
158
160
161
161
161
161
162
163
164
165
166
167
Part V Software Design
5 Iterative GUI Development with Java
169
5.1
5.2
171
173
174
176
177
177
178
179
179
182
5.3
Iterating wisely
Introduction to prototyping
Uses for prototyping
The two dimensions of prototyping
Competitors’ product as ready-made prototypes
Prototyping as a philosophy for development
Prototypes and customers
Prototyping alternatives
Different types of prototypes
Storyboards
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xiii
5.4
5.5
5.6
5.7
5.8
5.9
5.10
5.11
GUI builders
Reusable prototyping widgets
A tree prototype utility class
A visual container prototype utility class
GUI refactoring
Some classic refactorings
Some GUI-specific refactorings
Failing with style
Introduction to user interface testing
Test-driven development
What’s first – GUI design or implementation?
Software testing of Java GUIs
How to test – GUI software test approaches
What to test – test coverage criteria
Usability testing of Java GUIs
JRE runtime management
Introduction to profiling
Common problems
Continuous profiling
A posteriori profiling
Summary
184
187
187
190
191
191
194
201
203
204
204
206
206
210
211
214
214
216
219
220
221
6 Implementation Issues
223
6.1
224
226
227
228
229
229
231
231
233
233
234
235
236
239
240
242
6.2
6.3
6.4
6.5
Revisiting the abstract model
Testing the various layers
The principle of Single Functional Responsibility
Isolating presentation details
Content
Content assembly
Explicit navigation
Business domain
Data input-output
A comprehensive data IO design strategy
Some design patterns
Remote communication design
Security issues
Making objects communicate
The Observer pattern
Swing events
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xiv
6.6
6.7
6.8
6.9
6.10
SWT events
Design-time class decoupling with events
Event Arbitrator
Misuses of event-based messaging
Alternatives to event-based communication mechanisms
Separating data from views
Model-View-Controller
Interaction and control
Representing user actions with the Command pattern
Control issues
A state-oriented approach to GUI control
Some design patterns for GUIs
Adaptation
Composite Context
Active Object
Object lifecycle management – a general mindset
Value Model
GUI complexity boosters
Summary
243
243
245
248
250
251
252
257
257
260
265
271
271
277
279
280
282
283
285
7 Code Organization
287
7.1
287
289
292
294
295
296
297
298
299
300
301
303
304
305
306
306
309
7.2
7.3
7.4
Introducing software architectures
Taming references
Composable units
Evolving order and appropriate architectures
Some common GUI architectures
The smart GUI antipattern
A semi-smart GUI architecture
A three-layer architecture
A four-layer architecture
A three-layer organization for GUI code
Overview
The presentation layer
The application layer
The service layer
Two examples of a three-layer implementation
An MP3 player
An electronic circuit simulator and editor
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xv
7.5
7.6
The service layer
Overview
Persistence services
Factory services
Other services
Summary
Key ideas
314
314
319
319
320
321
322
8 Form-Based Rich Clients
323
8.1
323
324
325
326
326
327
329
329
332
339
343
344
346
350
353
357
358
8.2
8.3
8.4
8.5
Introduction
Defining rich clients
Java rich clients
GUI design for rich clients: the Third Way
Reference functional model
Distributing behavior between client and server
Common problems
Runtime data model
Validation
When to validate and notify
The cake-ordering application, the XP way
Setting up the first Iteration
Content first
Data second
Commands third
Closing the loop with the server
Summary
9 Web-Based User Interfaces
359
9.1
9.2
359
361
361
362
362
365
368
368
369
370
9.3
An overview of Web user interfaces
GUI design for the Web
Fine graphics details
Area organization
Levels of client-side control
Navigation issues
Implementing Web applications with Java
The typical architecture of a Web application
Basic Java Web GUI technologies
Java applets
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xvi
9.4
9.5
From Web applications to rich clients
Different development habits
Summary
371
372
373
10 J2ME User Interfaces
375
10.1
375
376
379
379
379
379
382
384
385
387
388
389
391
392
10.2
10.3
10.4
10.5
10.6
10.7
10.8
Introduction to the MID profile
Main UI concepts
Main UI limitations
Cost-driven design for J2ME GUIs
The MIDP UI API
UI widgets
Designing MIDP GUIs
Abstract GUI designs
Designing navigation
An example custom item
An example ad-hoc item
An example application
The code
Summary
11 Java Tools and Technologies
393
11.1
11.2
394
394
396
397
397
403
409
410
411
412
413
413
414
415
415
418
420
421
11.3
11.4
11.5
11.6
11.7
Introduction to tool selection
Evaluating open source software
Open Source Maturity Model
SWT or Swing?
The toolkits
Choosing a toolkit
Mix and match
Other GUI technologies
Utility libraries
Security tools
Deployment tools
Glazed Lists
JGoodies Swing Suite
L2FProd Common Components
Other OSS component libraries
Some commercially-available Swing components
Test tools
Profiling tools
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xvii
11.8
11.9
GUI builders
Presentation layer technologies
Assessing a look and feel
Swing look and feels
SWT Presentation
11.10 Declarative GUIs with Java
XML-based formats
11.11 Summary
422
424
425
426
442
443
443
445
12 Advanced Issues
447
12.1
447
448
451
454
455
457
459
463
464
465
466
468
469
12.2
12.3
12.4
12.5
12.6
12.7
Building on top of existing libraries
Attributes
Roll your own framework
Memory management for complex GUIs
A practical case
Restructuring existing GUI code
Porting an old applet – a case study
Long-life GUIs
Providing new deployment support
Exploiting technology
Domain-specific and Little languages
The future of Java GUIs
Summary
Part VI Examples
13 Rich Client Platforms
471
13.1
471
472
473
474
474
475
476
477
477
478
479
482
13.2
13.3
13.4
Introduction to Java rich client platforms
The case for RCP applications
What’s in an RCP
GUI design guidelines and RCPs
The NetBeans RCP
NRCP architecture
The Spring RCP
The Eclipse RCP
Eclipse plug-in architecture
Eclipse RCP plug-ins
The workbench – the building blocks of ERCP GUIs
GUI design guidelines for ERCP applications
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xviii
13.5
13.6
13.7
13.8
Choosing the best RCP for your needs
When to employ an RCP
Legal issues
Eclipse
Netbeans
An example Eclipse RCP application
The application
Introducing client-side modular architectures
The Snooper application architecture
Summary
483
484
485
485
486
486
487
489
492
496
14 The Personal Portfolio Application
497
14.1
497
498
499
499
503
504
505
505
506
506
508
511
512
513
515
516
516
524
525
525
525
526
529
529
529
14.2
14.3
14.4
14.5
14.6
14.7
14.8
14.9
The scenario
A note on lifecycle models
Analysis
Early analysis
Some scenarios
A refined use case diagram
Individuating boundary classes
Choosing a technology
An initial GUI design
An initial GUI paper mock-up
A second GUI paper mock-up
A throw-away GUI prototype
Validating the throw-away prototype
The final GUI
Implementation
Software requirements
The software architecture
Resources
Localization bundles
Images
The code
The remote explorer director
The prototype
Deployment issues
Server support
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xix
14.10 An alternative, cost-driven implementation
Choosing a higher-level starting point
A cost-driven prototype using JDNC
A brief introduction to JDNC
14.11 Summary
530
530
531
531
533
15 An Example OO User Interface
535
15.1
536
536
537
538
542
542
543
544
544
546
546
549
550
551
555
558
559
560
563
565
15.2
15.3
15.4
15.5
15.6
15.7
15.8
15.9
Introduction
A matter of style
Implementing object-oriented user interfaces
The Viewable interface
Some utility classes
Brief views
Making collections viewable
Configuration views
A utility class
Interacting with the user
The Commandable interface
Managing user commands
An example application
OOUI objects
The code
Libraries
Some GUI design considerations
Control issues
An alternative implementation using Naked Objects
Summary
16 An Example Ad-Hoc Component
567
16.1
16.2
568
569
570
573
575
575
575
579
16.3
16.4
Introduction
The Drawing Sandbox application
The application
The Sandbox architecture
The Sandbox component
Top-down refinement of functional organization
Organizing object communication
Graphical objects
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xx
16.5
User interaction
Command composition
The Action framework
The Actions class
Undo-redo support
The Edit class
Recording edits
Memory issues
16.6 Control
The Director class
Managing actions
Enforcing logical constraints on actions
16.7 The whole picture
16.8 Stressing the software design
Adding objects and commands
The design’s weak points
16.9 Introducing JHotdraw
16.10 Summary
Key ideas
582
582
583
584
587
588
589
590
592
594
595
596
597
598
599
600
601
605
605
A A Questionnaire for Evaluating Java User Interfaces
607
B A Questionnaire for Evaluating J2ME Applications
613
References
621
General advice on usability and GUI design
Java-specific links
626
627
Index
modified 6:9 PM 16 March 2006
629
ftoc.fm
1.0
Acknowledgements
Acknowledgements
I have been working on this book for more than five years, in one way or another.
It is by no means the result of a single person (the author). A very large number
of people shaped it, so many that it will be impossible to name them all.
I should first thank Sally Tickner and the management at John Wiley and Sons, for
allowing me to deliver the manuscript after such a huge delay, which was mostly
caused – only a partial excuse – by my never-ceasing joy of working on and
taming new and complex adventures, rather than lack of interest in the subject.
It’s easy to remember Steve Rickaby of WordMongers, whose expert hand made
this book readable and sometimes even enjoyable. If it wasn’t for his help this
gigantic work would have been very different.
A special thanks too to my students, who kept the fire of honest enthusiasm and
the Spirit of Wonder high, and who were extremely patient with my shameful
schedule. I hope I gave them back at least a small portion of what they gave to me.
I wish also to thank the reviewers for their careful work, the many clients and
colleagues for the countless lessons that I tried to put together in the book, and all
the people who spent precious time out of their lives putting into written form
their hard-won experience, often without any economic return.
Last but not least, my biggest thanks go to my family, my Bella, and my closest
friends. Without their presence, patience, and constant support, this book
wouldn’t have been possible.
10:37 AM 8 March 2006
fack.fm
0.1
Introduction
Introduction
This introduction is structured as follows:
The interactivity thrill talks about the magic of the first time and other things.
The organization of the book discusses the book’s contents and organization.
Book readers and personas provides a more user-centered approach to the contents
of the book.
The interactivity thrill
Current software technology allows developers to build graphical user interfaces
(GUIs) for only the cost of the labor, and with greater simplicity than ever before.
Despite that, GUIs, and Java GUIs among them, are often totally frustrating and
disappointing. In the words of Alan C. Kay1:
“A twentieth century problem is that technology has become too ‘easy.’
When it was hard to do anything, whether good or bad, enough time was
taken so that the result was usually good. Now we can make things
almost trivially, especially in software, but most of the designs are trivial
as well. This is inverse vandalism: the making of things because you can.
Couple this to even less sophisticated buyers and you have generated an
exploitation marketplace similar to that set up for teenagers. A counter to
this is to generate enormous dissatisfaction with one’s designs using the
entire history of human art as a standard and goal. Then the trick is to
decouple the dissatisfaction from self worth – otherwise it is either too
depressing or one stops too soon with trivial results.”
Basically, inverse vandals don’t care about their work and its impact on the lives of
users and the many others affected by their work, which is a pity. Software has a
sort of magic in itself, and interactive software provides a concrete, vivid example
of such a magic. Whether you are a teenager playing a video game or an old guy
fiddling with an early computer in your garage, there was probably a moment in
your life when you were totally amazed by a piece of software – otherwise you
would probably have chosen another career.
1.
5:8 PM 9 March 2006
The Early History of Smalltalk,
http://gagne.homedns.org/~tgagne/contrib/EarlyHistoryST.html
fintro.fm
0.1
Introduction
xxiv
Such a feeling alone, and perhaps a rather selfish and self-gratifying one, is not
enough to provide reliable, professional results. There is a need to study and
apply a wide array of subjects in depth, filtering user’s needs through experience
and the relentless application of ambitious but sensible designs and solutions,
both on the GUI side and in its implementation. Despite all this hard work – or
possibly because of it – the fun still remains, and I hope you can see it between the
lines of this book. Finally, some words about my professional background, that
could help in providing a better understanding and a more critical view of the
book’s contents.
My long experience is mostly on internal projects, that is, building software for
customers, and also spans a few products building shrink-wrapped software. As
far as Java is concerned, I started working with Java GUIs in 1998, trying to focus
on client-side aspects whenever possible. I worked on a couple of large and
complex GUIs, and on other projects that ranged from the weather forecasting
system for the Italian air force to large multinational corporate ERPs, various Web
sites, a large GUI framework for advanced enterprise clients – on various aspects
still unmatched on the market – and more recently have been hopping on and off
planes throughout Europe and US as a consultant while trying to find the time for
a number of EU and academic research projects.
Usable GUIs and usable books
Writing a book like this is in many ways similar to GUI development1. The
author has a target audience, at least in his mind (end users), and many little
daily hindrances. He needs to work to earn his keep, trying to maintain a
private life and struggle with mundane things like mastery of the English
language (GUI design guidelines), the wrong dpi settings in scanned pictures
(API inconsistencies), ever-newer technologies, and all the rest. Luckily he is
not alone. He is the less-experienced part of a great team of professionals (the
development team), good-willed reviewers (user representatives), and wonderful
private-life supporters. Nevertheless, new ideas and existing content that
should be better addressed seem never-ending (feature creep), and the manuscript keeps growing (deadlines shifting). The author is constrained by
deadlines and wants to deliver something useful (at least within his definition
of usefulness). There are different kinds of GUI development. There are shrinkwrapped products, where there is competition and users can easily opt for your
product or a competing one, as in the case of a shareware music player, and
various forms of internal projects where users have no choice but to read the
1.
5:8 PM 9 March 2006
The term development is meant to indicate the general process of building a GUI, including
GUI design and implementation.
fintro.fm
0.1
Introduction
xxv
book/use the application. A documentation manual fits the latter category1:
unfortunately for me, this book falls into the first category.
All the above has a common denominator: the end user. The ultimate objective is
to write a book that you would like to read, in which the message comes across as
smoothly and as richly as possible and as you expect, saving you time and effort,
while possibly providing you with a pleasant experience. This book – and the next
application you are going to create – will be effective and useful as long as its very
inception, its design and writing, focuses on end users.
The organization of the book
The book is organized in three parts. The first part introduces HCI and GUI
design, starting from general concepts and concluding with recurring GUI
designs. The second part, from Chapter 5 to Chapter 12, discusses general implementation advice. The third part, from Chapter 13 to Chapter 16, discusses some
examples applications, from analysis and GUI design to the software architecture
and the implementation – something rather rare to find in literature. Finally, two
appendices provide evaluation questionnaires specifically targeted at Java GUIs.
The following gives a brief description of the book’s contents.
GUI Design
Part
Chapter
Title
Description
1
Putting GUI Development
into Context
Framing GUI development in the wider context
of software development, introducing a general
reference functional model for GUIs, and UML
diagrams.
2
Introduction to User Interface A basic introduction to some key themes of
HCI and user-centered, general user interface
Design
design.
3
Java GUI Design
Practical GUI design for the Java platform with
some practical examples, introducing the Java
Look and Feel design guidelines.
4
Recurring User Interface
Designs
Recurring design solutions in desktop applications, with reusable code.
1.
5:8 PM 9 March 2006
In real-world situations users have another popular choice: skip reading the manual
altogether.
fintro.fm
0.1
Introduction
xxvi
Implementation
Part
Chapter
Title
Description
5
Iterative GUI Development
with Java
Building GUIs iteratively using OOP. Introducing software testing, usability testing for
Java GUIs, and GUI-specific refactorings.
6
Iterative GUI Development
with Java
Introduction to software design strategies and
OOP design patterns for GUIs.
7
Code Organization
Main software architectures for GUI applications and some reusable utility classes.
8
Form-Based Rich Clients
An example iterative, test-driven GUI
development.
9
Web-Based User Interfaces
Web GUI design basics and related Java
technologies.
10
J2ME User Interfaces
An introduction to J2ME GUI technologies and
GUI design for wireless devices, with some
example code for MIDP.
11
Java Tools and Technologies A review of the main tools and technologies
available for Java application development,
with particular focus on open source software.
12
Advanced Issues
5:8 PM 9 March 2006
Some topics of interest for complex GUIs:
building custom frameworks, usability applied
to API design, memory management, legacy
GUI code, and domain-specific languages for
GUIs.
fintro.fm
0.1
Introduction
Appendixes
Examples
Part
xxvii
Chapter
Title
Description
13
Rich Client Platforms
Introduction to Rich Client Platforms (RCP)
and Eclipse RCP GUI design guidelines, with
an example service-oriented GUI for the
Eclipse RCP.
14
The Personal Portfolio
Application
Design and development of an example application using use cases. An alternative design
using JDNC is also discussed.
15
An Example OO User
Interface
Using the OOUI approach to design and implement an example application, compared with
the use of the Naked Objects framework.
16
An Example Ad-Hoc
Component
An example ad-hoc component and its
comparison with the JHotDraw framework.
A
A Questionnaire for Evaluating Java User Interfaces
B
A Questionnaire for Evaluating J2ME Applications
Three levels of advice
Building a usable, cost-effective, professional-quality GUI is a complex and multidisciplinary process that involves mastery of many different skills. In this book we
will cover three different perspectives: the design of the user interface, the software architecture behind it, and the tactics related to the source code, as shown in
the figure below.
The three level of advice in the book
Professional GUIs are carefully designed and implemented pieces of software. For
this reason special attention is given in this book to implementation details, especially at the design and architectural level – in my experience the only way to
absorb reliably the sort of complexity-by-accretion that real world GUIs exhibit.
Source code listings and code-level tactics are mentioned only briefly, to save
space and reduce the danger of sending my copy-editor to sleep.
5:8 PM 9 March 2006
fintro.fm
0.1
Introduction
xxviii
Conventions used in the book
Throughout the book notes are represented using the graphical convention below.
This is a note.
All references are gathered in a reference section and represented following the
Chicago Manual of Style, fourteenth edition, University of Chicago Press, 1993.
Source code
Source code is provided on my Web site at:
http://www.marinilli.com/books/b1/b1.html
or you can start from the home page at http://www.marinilli.com and follow
the links from there. It is organized into separated bundles for each chapter, and
a single file containing the code for all the chapters is also available. Sources are
provided with Ant build files and with Eclipse projects.
Some of the example applications can also be launched on line using JNLP links,
available at:
http://www.marinilli.com/books/b1/b1.html
5:8 PM 9 March 2006
fintro.fm
0.1
Introduction
xxix
The JNLP client will ask for authorization prior to installing the application.
Reader feedback
A book is an inherently limited means of communication, at least when compared
with computer-based interactive tools. In order to balance this unfair equilibrium,
a public forum will be available on my Web site for readers to give feedback, pose
questions, download the source code, or start a discussion.
Book readers and personas
You might have bought this book, and I do thank you for that. Unfortunately, it is
more than 707 pages long and you could not have the time or will to read it all from
end to end, neither would it be a time-efficient thing to do. The objective of this
section is to help you save your valuable time getting quickly to your point, gaining
also a first glimpse of techniques for focusing the design around end users.
The book can be used in a number of ways: it is useful for experienced developers
that want to explore ideas on GUI development, and can be used in courses on
practical GUI design and implementation. Intermediate developers can take
advantage of the many examples provided to explore sample implementations.
The book has been designed with three types of reader in mind:
i.
Those that have better things to do in life than fiddling with theoretical
issues, and just need to put together something that works, now.
ii. Novice readers who want to explore the complexity of professional GUI
development.
iii. Those that are experienced and critical about ready-made solutions, and
would like a critical and wider discussion of the major issues for GUI development in Java.
The following sections describe a set of fictitious readers, built with the persona
technique1. If you are lucky enough to recognize yourself as one of them, or somewhere in between, their approach to the book might suit you. Alternatively, if you
are one of those brave, tough, developers who think all this Lars and Melinda stuff
is a bit silly, skip the following section and jump directly to the first chapter.
1.
5:8 PM 9 March 2006
These user representations are called Personae and were introduced by A. Cooper in
(Cooper 1999). They are useful for defining the user population clearly to designers, even
for a book.
fintro.fm
0.1
Introduction
xxx
Lars, a Java intermediate programmer
Lars, 24, doesn’t have time to waste. In his first glance at the book he sees
many interesting things, but he needs to deliver a small (twenty-some screens)
form-based corporate rich client application within five weeks. He needs to
interface with an existing J2EE application and with a third-party Web service.
After a quick look on the Web, he remains a bit confused by the many technologies and options available: he wants to look at some working code and get a
clear understanding of how it works, together with some advice to help him
to build a bigger picture of the best choices available, without wasting time on
other fancy details.
Lars will then…
•
Take a bird’s eye view of Chapter 6 and an even quicker glimpse at Chapter 7
to see about client tier architectures.
•
Perhaps take a look at Chapter 5, to see if there is some useful technique he
can take advantage of in his project.
•
Read the discussion about SWT vs. Swing in Chapter 11, opting for SWT and
the Eclipse RCP for his project.
•
Consequently focus his attention on Chapter 13 (RCP), and Chapter 8 (Formbased GUIs).
•
Use the quick references on the book’s reverse covers as required.
•
After his project is completed, get back to the rest of the book…
Keiichi, a tech lead
Keiichi is a technical leader in a medium-sized software company in Japan who
wants to explore new ideas about GUI development. He is starting a new project
and has some spare time that wants to spend on refreshing his knowledge about
GUI design and development. He is particularly interested in the architecture of
complex desktop GUIs that provide undo/redo support, complex validation,
role-based fine-grained authorization, and more.
Keiichi will then…
•
Read Chapter 1.
•
Read parts of Chapter 2 and Chapter 3 to get an idea of GUI design.
•
Browse Chapter 4 for a quick look at recurring GUI designs in desktop
applications.
•
Read Chapter 5 about iterative GUI development – a subject in which he is
quite interested.
5:8 PM 9 March 2006
fintro.fm
0.1
Introduction
xxxi
•
Have a look at Chapter 6 for some implementation strategies and common
issues related to complex GUI development.
•
Take a quick look at Chapter 7 and Chapter 8 for completing his introduction
to the implementation of complex rich client GUIs with Java.
•
Read Chapter 12 about advanced issues and ideas for implementing nontrivial GUIs.
•
Browse the example applications in the third part of the book.
•
After adding notes and bookmarks, put back the book on his shelf, promising himself to get back to it when the new project has started…
Shridhar, a professor in computer science
Shridhar is an assistant professor in a university in Kanpur, India. He is 35,
married with two children. He is preparing a course on the practical development
of complex GUIs. He wants to include the essentials of user interface design,
advanced software design patterns, and many case studies that will form the
backbone of the course. He bought the book on line to evaluate its adoption as a
reference textbook for the course, integrating the parts in which he is more interested with other material. Shridhar finds some companion material for the book
on line and plans to use it for his course. In particular, he is interested in using
SWT for an interesting research project.
Shridhar will then…
•
Organize his course content around the functional model introduced in
Chapter 1.
•
Plan to devote the first part of the course to GUI design issues, based on
Chapters 2 and 3.
•
Use Chapter 6 as the theoretical base for the second part of his course, about
implementation of complex GUIs in Java.
•
Use the examples in Chapters 13–16 for the case studies. He plans to extract
software design patterns and architecture contents from these chapters to use
in the hands-on part of his course.
•
Think about creating assignments based on the ideas provided in the various
chapters he has read. Because he is interested in the Eclipse RCP and SWT, he
will focus on the ideas discussed in Chapter 8.
Melinda (Mellie), a manager
Mellie has a technical background and a basic overview of object-oriented technology. She wants to have an overview of current technology for GUI
development with OOP, and feels that she needs to refresh her knowledge of
5:8 PM 9 March 2006
fintro.fm
0.1
Introduction
xxxii
current state-of-the-art development of client-side software. She worked in software testing back in the 1980s, and is now a senior group manager in the IT
department of a medium-sized insurance company that does some in-house development. She wants to get a basic, high-level understanding of the latest trends in
GUI design and development.
Mellie will then…
•
Read Chapter 1 about the development context of GUI design and
implementation.
•
Interested by the topic of GUI design, move to study Chapter 2 for an introduction to basic user interface design.
•
Read Chapter 3 for an example of an OOP GUI technology stack, showing
guidelines, practical GUI design examples, and other technology-oriented
topics that can also be used outside the Java world.
•
Take a look at the pictures in Chapter 4, to see the most commonly-used GUI
designs in real world applications, and try to match them with her daily
practice of software applications (a mix of Microsoft Project, the Microsoft
Office suite, and some corporate intranet applications).
•
Have a look at Chapter 5 to get an idea of iterative GUI development.
•
Note a few useful terms to be inserted in her next presentation, such as
usability inspections, continuous profiling, and more.
•
Eventually, put the book in her ‘favorites’ pile, hoping to have more time for
it another day.
William, a first year student in a Master in CS course
William has just moved to Vancouver and is excited about starting his masters
program in Computer Science and eager to become a proficient software developer. He already has some exposure to Java and the Swing toolkit, and he knows
that he is going to have some courses about these topics. He wants to know more
about software architectures and how complex desktop GUIs are built, possibly
starting his own open source project.
William will then…
•
Start reading the example applications, looking for interesting situations and
trying to understand the proposed solutions.
•
As he is interested in the Sandbox application discussed in Chapter 16,
download and compile the source code, tweaking it to add new features.
5:8 PM 9 March 2006
fintro.fm
0.1
Introduction
xxxiii
•
Jump to Chapter 6 for the theoretical background behind the implementations proposed in the example applications.
•
Turn his interest to the qText application in Chapter 6, studying its simple
architecture, downloading the code, and adding new commands to the
editor.
•
Browse the rest of the book as he needs to.
Karole, a business analyst
Karole has a degree in programming and works for a software company. While
working as a full-time analyst on her current project, she discovers that she enjoys
dealing with customers. She feels she would like to work more on the GUI side of
software development and move into GUI design. She would like to get a wider
picture of GUI development, using Java as a practical example, but also be exposed
to more general concepts.
Karole will then…
•
Read Chapter 1 about the development context for GUI design and
implementation.
•
Study Chapter 2 for an introduction to basic GUI design advice.
•
Read Chapter 3 for a discussion of GUI guidelines, practical GUI design
examples, and other technology-oriented topics that can also be used outside
the Java world.
•
Study Chapter 4, to understand the most commonly-used GUI designs and
the rationale behind them.
•
Perhaps read Chapters 5 and 8 to gain a better grasp of the latest iterative
development techniques for client applications.
•
Snoop around the rest of the book as required.
Juan, an experienced programmer
Juan is an experienced programmer in his late twenties living in Schaumburg, IL.
He has just bought the book in a bookshop and is excited about it. He has some
spare time, an hour or two, on a Saturday morning. He wants to browse the book
for something fun, taking it easy, while sipping his favorite blend of Cappuccino in
a café while waiting for his fiancé Francene, who is having her nails done. Juan is
looking for cool new technologies, interesting application architectures, exciting
techniques, or just a cartoon or fancy pictures before a long shopping session with
Francene1.
5:8 PM 9 March 2006
fintro.fm
0.1
Introduction
xxxiv
Juan will then…
•
Browse Chapter 4 for a quick glimpse of common GUI design issues, such as
choosers, area organization, and so on.
•
Have a look at some of the pictures of the various look and feels in Chapter 11.
•
Look at Chapter 10 for information about J2ME GUIs, and have a quick look
at Chapter 9 for Web Java GUIs.
•
Have a glimpse at some of the techniques discussed in Chapter 12.
•
Take a look at the various pictures of the example applications in the third
part of the book.
•
Then, when he has more time, get back to this section to find another fictitious user who matches his needs, so that he can start seriously reading the
book.
1.
This is not a spurious use of a technical book, as it might seem at first. Establishing a positive emotional relationship with something we need in our work life is always a win-win
situation. Working with something pleasant will make us feel better, being more productive, and perhaps sparing precious energy for something other than dull work.
5:8 PM 9 March 2006
fintro.fm
0.1
1
Putting GUI Development
into Context
Putting GUI Development into Context
This chapter provides a comprehensive introduction to the design and development of Java applications with non-trivial user interfaces. After introducing a
general-purpose reference model that will guide our discussion in the remainder
of the book, we introduce the organizational aspects related to UI development,
discussing the role of people in the entire software lifecycle process for GUI software. We then consider the issue of early design, where we briefly introduce the
delicate and often overlooked transition from analysis to UI design. A section is
devoted to some interesting lifecycle models and the way they support the
process of building professional user interfaces. The chapter concludes with a
minimal introduction to some useful UML notation that will be used throughout
the book.
The chapter is structured as follows:
1.1, Introduction briefly discusses the current state of GUI technologies and the use
made of them by developers.
1.2, Focusing on users discusses user-centered design and development throughout
the software lifecycle.
1.3, A functional decomposition for user interfaces introduces an abstract model for
GUIs that is used throughout the book.
1.4, Tool selection: the Java singularity discusses the selection of a set of ingredient
libraries technologies, many of them open source, to speed up GUI development.
1.5, Organizational aspects introduces some of the issues related to the management
of the multidisciplinary teams that are common in GUI development.
1.6, Early design introduces requirements and use cases for professional GUIs.
1.7, Lifecycle models, processes and approaches briefly introduces some software lifecycle models: Rational Unified Process, Extreme Programming and other Agile
ffirs.fm
1.0
Main Patterns and Design Strategies organized by functional layer
2:9 PM 10 March 2006
front_inter_cover.fm
1.0
Main principles
•
GUI design and overall development
– User-centered design (44)
A design approach for building highly usable user interfaces, putting the emphasis
on the user.
– Cost-driven design (81)
GUI design comes first, with an eye on development complexity. For example,
avoid using ad-hoc components (81) in your GUI as far as possible.
– Iterative GUI development (169)
Iterate: GUI design and implementation, profiling, software and usability testing.
•
Implementation
– The principle of Single Functional Responsibility (227)
Provide only one functional responsibility per class/method.
– Object lifecycle management – a general mindset (281)
Instantiate lazily and dispose eagerly, avoid garbage collector bottlenecks.
– Don’t go against the flow (284)
GUI toolkits are complex beasts, so don’t ignore them and implement fancy
designs counter to the architecture or style of the underlying GUI toolkits and
infrastructure (RCP).
Visual refactorings
Other refactorings are discussed in Chapter 5.
•
Extract explicit panel (195), Extract stand-alone panel (196), and Composable units (292)
Extract the code of an existing GUI panel into a separate implementation to enhance
modularity and reusability.
•
Merge panel (197)
Merge different implementations representing the same panel into a common one.
•
Add parameter to panel (197) and Remove parameter from panel (198)
Add parameters to customize a panel and its opposite refactoring, Remove parameter
from panel (198).
•
Parameterize panel (199)
Implement two slightly different panels with a unique code base.
•
Replace parameter with panel (200)
Instead of adding a parameter, separate the implementation of the two panels.
•
Rename panel (201)
Change the name of a panel.
12:20 PM 8 March 2006
front_inner_paper.fm
1.0
Cheat Sheet
An extremely simplified and by no means exhaustive basic reference to some of the topics
discussed in the book.
GUI Design
•
How do I signal to the user my GUI is busy?
Change mouse pointer to hour glass for any operation that lasts more than two
seconds, always use progress indicators, and update progress every five seconds.
•
How do I validate my GUI?
Involve users in design, use prototyping, software testing, memory profiling
(Chapter 5), questionnaire evaluation (Appendices A and B), and usability testing.
•
How do I organize the GUI window area?
Use the Area Organization design strategy (120).
•
How do I allow the user to select or create information in a GUI?
Use the Chooser design strategy, 126.
•
How do I deploy my GUI?
Use Java Web Start when the user population is confident with approving certificates,
as for internal software. Use installers in other cases, and for large installation
bundles. Consider also using applets!
Software Design
•
How do I keep my GUI responsive to user interaction during long-running
operations?
Use the Active Object pattern, 280 (for Swing, the SwingWorker class) for any operation that might last more than one second.
•
How do I implement control (reaction to user interaction) in my GUI?
Depending on the number of items to be controlled by control rules, use:
– Scattered control (260) – few items, reactive-only control rules.
– Centralized control, the Mediator pattern (263) – many items, any kind of control
rule.
– Explicit Control State (260) – complex control rules, need for flexibility.
•
How do I implement undo/redo in a GUI?
Build a queue or stack of edits (587), use the Command pattern (258) for user actions.
•
How do I implement role-based authorization/security in my GUI?
Build a dedicated authorization manager class using Adaptation (272).
12:30 PM 8 March 2006
back_inner_paper.fm
1.0
•
How do I implement user customization and user profiles in my GUI?
Build a dedicated profile manager class using Adaptation (272).
•
How do I reuse existing panels in my GUI?
Use visual refactorings (194).
•
How do I organize implementation for modularity and extensibility in a large or
complex GUI?
Define and implement a Composable Unit strategy, 292.
•
How do I implement content assembly – adding components to a screen or panel – in
a GUI?
Depending on the features you want use:
– Static assembly (229), for simple layouts, no reusability.
– Simple Builders (229), for ease of use, separation of concerns, limited flexibility.
– Create and use Domain-specific or Little languages, 466 – good separation, maximum
flexibility.
•
How do I organize complex event-based interactions among objects in my GUI?
Use an Event Arbitrator (245) to:
– Avoid event loops and rationalize chains of observers-observables.
– Shield client classes from low-level events.
– Forward events to complex data structures based on the Composite pattern.
•
How do I handle large data collections?
Depending on the context of the problem, use:
– Eager disposal (281) of objects that are no longer needed – simple references,
extremely large trees.
– Weak or soft references, for cached objects and data that can be created or fetched
on the fly.
– Paging (281) for loading a few pages at time, discarding old ones, such as large
table models or large collections of expensive objects.
•
How do I communicate data remotely in a modular way?
Separate screen data state from domain objects using Data Transfer Objects (234).
•
How do I handle data represented in widgets?
Define Screen Data State (SDS, 330) and the widgets that will interface SDS to the
user. For synchronization with domain objects data (if any) use:
– Manual synchronization of SDS and data, for simple, small GUIs.
– Data binding support, for medium to large, complex GUIs.
12:30 PM 8 March 2006
back_inner_cover.fm
1.0
Professional Java User
Interfaces
10:39 AM 8 March 2006
ffirs.fm
1.0
10:39 AM 8 March 2006
ffirs.fm
1.0
Professional Java User
Interfaces
Mauro Marinilli
10:39 AM 8 March 2006
ffirs.fm
1.0
Copyright © 2006
John Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester,
West Sussex PO19 8SQ, England
Telephone
(+44) 1243 779777
Email (for orders and customer service enquiries): [email protected]
Visit our Home Page on www.wiley.com
All Rights Reserved. No part of this publication may be reproduced, stored in a retrieval system or transmitted in
any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except under
the terms of the Copyright, Designs and Patents Act 1988 or under the terms of a licence issued by the Copyright
Licensing Agency Ltd, 90 Tottenham Court Road, London W1T 4LP, UK, without the permission in writing of the
Publisher. Requests to the Publisher should be addressed to the Permissions Department, John Wiley & Sons Ltd,
The Atrium, Southern Gate, Chichester, West Sussex PO19 8SQ, England, or emailed to [email protected], or faxed
to (+44) 1243 770620.
Designations used by companies to distinguish their products are often claimed as trademarks. All brand names
and product names used in this book are trade names, service marks, trademarks or registered trademarks of their
respective owners. The Publisher is not associated with any product or vendor mentioned in this book.
This publication is designed to provide accurate and authoritative information in regard to the subject matter
covered. It is sold on the understanding that the Publisher is not engaged in rendering professional services. If
professional advice or other expert assistance is required, the services of a competent professional should be sought.
Other Wiley Editorial Offices
John Wiley & Sons Inc., 111 River Street, Hoboken, NJ 07030, USA
Jossey-Bass, 989 Market Street, San Francisco, CA 94103-1741, USA
Wiley-VCH Verlag GmbH, Boschstr. 12, D-69469 Weinheim, Germany
John Wiley & Sons Australia Ltd, 33 Park Road, Milton, Queensland 4064, Australia
John Wiley & Sons (Asia) Pte Ltd, 2 Clementi Loop #02-01, Jin Xing Distripark, Singapore 129809
John Wiley & Sons Canada Ltd, 22 Worcester Road, Etobicoke, Ontario, Canada M9W 1L1
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be
available in electronic books.
Library of Congress Cataloging-in-Publication Data
Marinilli, Mauro.
Professional Java user interfaces / Mauro Marinilli.
p. cm.
Includes bibliographical references and index.
ISBN 0-471-48696-5 (pbk. : alk. paper)
1. Java (Computer program language) 2. User interfaces (Computer
systems) I. Title.
QA76.73.J38M34954 2006
005.13'3--dc22
2006004498
British Library Cataloguing in Publication Data
A catalogue record for this book is available from the British Library
ISBN 13: 978-0-471-48696-5
ISBN 10: 0-471-48696-5
Typeset in 10/13.5pt Palatino by Laserwords Private Limited, Chennai, India
Printed and bound in Great Britain by Bell & Bain, Glasgow
This book is printed on acid-free paper responsibly manufactured from sustainable forestry in which at least two
trees are planted for each one used for paper production.
To the person who keeps alive in his daily work
the Spirit of Wonder of the early days.
10:38 AM 8 March 2006
fdedic.fm
1.0
Brief Contents
Brief Contents
Acknowledgements
xxi
Introduction
xxiii
1 Putting GUI Development into Context
Part I
1
User Interface Design
2 Introduction to User Interface Design
31
3 Java GUI Design
77
4 Recurring User Interface Designs
119
Part II Software Design
5 Iterative GUI Development with Java
169
6 Implementation Issues
223
7 Code Organization
287
8 Form-Based Rich Clients
323
9 Web-Based User Interfaces
359
10 J2ME User Interfaces
375
11 Java Tools and Technologies
393
12 Advanced Issues
447
Part III Examples
13 Rich Client Platforms
471
14 The Personal Portfolio Application
497
15 An Example OO User Interface
535
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Brief Contents
viii
16 An Example Ad-Hoc Component
567
A A Questionnaire for Evaluating Java User Interfaces
607
B A Questionnaire for Evaluating J2ME Applications
613
References
621
Index
629
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
Contents
Acknowledgements
xxi
Introduction
xxiii
The interactivity thrill
Usable GUIs and usable books
The organization of the book
Three levels of advice
Conventions used in the book
Source code
Reader feedback
Book readers and personas
Lars, a Java intermediate programmer
Keiichi, a tech lead
Shridhar, a professor in computer science
Melinda (Mellie), a manager
William, a first year student in a Master in CS course
Karole, a business analyst
Juan, an experienced programmer
xxiii
xxiv
xxv
xxvii
xxviii
xxviii
xxix
xxix
xxx
xxx
xxxi
xxxi
xxxii
xxxiii
xxxiii
1 Putting GUI Development into Context
1.1
1.2
1.3
1.4
1.5
1.6
1
Introduction
Focusing on users
A functional decomposition for user interfaces
Tool selection: the Java singularity
Of running little green men and wrong choices
Organizational aspects
People and GUIs
Team composition
Early design
Use case diagrams and GUIs
modified 6:9 PM 16 March 2006
ftoc.fm
2
2
3
6
7
7
8
10
12
12
1.0
Contents
x
1.7
1.8
1.9
Lifecycle models, processes and approaches
Rational Unified Process
Extreme Programming and other Agile approaches
LUCID methodology
Evolutionary Prototyping process
UML notation
Class diagrams
Sequence diagrams
State diagrams
Summary
14
15
20
22
24
26
26
28
29
30
Part IV User Interface Design
2 Introduction to User Interface Design
31
2.1
32
2.2
2.3
2.4
2.5
2.6
The human factor
A model of interactive systems – seven stages
and two gulfs
Developers are part of the design process
Short term memory and cognitive modeling
Interacting with human beings
User-centered design
Simplified thinking aloud
Display organization
Esthetic considerations
Abstract-Augmented Area for GUIs
Interaction styles
Menu selection
Form filling
Language-based styles
Direct manipulation
Conceptual frameworks for UI design
Entity-based approaches to UI design
Metaphor-based approaches to UI design
Function-based approaches to UI design
‘Null’ approach to UI design
Object-oriented user interfaces
Assessing the quality of a GUI
Usability heuristics
Summary
modified 6:9 PM 16 March 2006
ftoc.fm
32
34
36
39
44
46
47
49
51
57
57
59
62
63
64
65
66
67
67
69
72
73
75
1.0
Contents
xi
3 Java GUI Design
3.1
3.2
3.3
3.4
3.5
3.6
77
Java technology for GUIs
Assembling the components
Three levels of component cost
Cost-driven design
Ad-hoc versus custom – the difference between ‘run’ and ‘ride’
When ad-hoc is the only way to go
Exploring the design space for a point chooser
Standard designs
Ad-hoc designs
Mixed designs
Conclusions
Design guidelines for the Java platform
Introduction to the guidelines
J2SE user interface design guidelines
The Java look and feel design guidelines
Some definitions
The Java ‘look’
The Java ‘feel’
Some terminology
An example – applying the guidelines for designing dialogs
Summary
77
77
79
81
81
83
86
88
91
97
99
100
100
103
108
109
109
110
112
114
117
4 Recurring User Interface Designs
119
4.1
120
120
121
123
124
126
127
128
131
133
133
134
134
135
4.2
4.3
4.4
GUI area organization
Terminology
Main frames
Multiple document interfaces
Wizards
Choosers
Chooser activation mechanisms
Chooser interaction styles
Broadening the choice
Conclusions
Memory components
Input history
Saving user preferences
Lazy initialization
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xii
4.5
4.6
4.7
4.8
4.9
4.10
4.11
4.12
4.13
4.14
4.15
4.16
Preference dialogs
Preference dialogs styles
Waiting strategies
Flexible layout
Common dialogs
The ‘About’ dialog
Log-in dialog
First-time message dialogs
Splash window
Command components
Graphic conventions
Toolbar composition
Command composition
Accessibility
Testing the final product for accessibility
Conclusions
Navigation and keyboard support
Keyboard shortcuts
Tab traversal
Internationalization
Help support
Icons and images
Leveraging object-oriented programming
Summary
137
138
141
144
146
146
149
150
151
152
156
157
158
160
161
161
161
161
162
163
164
165
166
167
Part V Software Design
5 Iterative GUI Development with Java
169
5.1
5.2
171
173
174
176
177
177
178
179
179
182
5.3
Iterating wisely
Introduction to prototyping
Uses for prototyping
The two dimensions of prototyping
Competitors’ product as ready-made prototypes
Prototyping as a philosophy for development
Prototypes and customers
Prototyping alternatives
Different types of prototypes
Storyboards
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xiii
5.4
5.5
5.6
5.7
5.8
5.9
5.10
5.11
GUI builders
Reusable prototyping widgets
A tree prototype utility class
A visual container prototype utility class
GUI refactoring
Some classic refactorings
Some GUI-specific refactorings
Failing with style
Introduction to user interface testing
Test-driven development
What’s first – GUI design or implementation?
Software testing of Java GUIs
How to test – GUI software test approaches
What to test – test coverage criteria
Usability testing of Java GUIs
JRE runtime management
Introduction to profiling
Common problems
Continuous profiling
A posteriori profiling
Summary
184
187
187
190
191
191
194
201
203
204
204
206
206
210
211
214
214
216
219
220
221
6 Implementation Issues
223
6.1
224
226
227
228
229
229
231
231
233
233
234
235
236
239
240
242
6.2
6.3
6.4
6.5
Revisiting the abstract model
Testing the various layers
The principle of Single Functional Responsibility
Isolating presentation details
Content
Content assembly
Explicit navigation
Business domain
Data input-output
A comprehensive data IO design strategy
Some design patterns
Remote communication design
Security issues
Making objects communicate
The Observer pattern
Swing events
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xiv
6.6
6.7
6.8
6.9
6.10
SWT events
Design-time class decoupling with events
Event Arbitrator
Misuses of event-based messaging
Alternatives to event-based communication mechanisms
Separating data from views
Model-View-Controller
Interaction and control
Representing user actions with the Command pattern
Control issues
A state-oriented approach to GUI control
Some design patterns for GUIs
Adaptation
Composite Context
Active Object
Object lifecycle management – a general mindset
Value Model
GUI complexity boosters
Summary
243
243
245
248
250
251
252
257
257
260
265
271
271
277
279
280
282
283
285
7 Code Organization
287
7.1
287
289
292
294
295
296
297
298
299
300
301
303
304
305
306
306
309
7.2
7.3
7.4
Introducing software architectures
Taming references
Composable units
Evolving order and appropriate architectures
Some common GUI architectures
The smart GUI antipattern
A semi-smart GUI architecture
A three-layer architecture
A four-layer architecture
A three-layer organization for GUI code
Overview
The presentation layer
The application layer
The service layer
Two examples of a three-layer implementation
An MP3 player
An electronic circuit simulator and editor
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xv
7.5
7.6
The service layer
Overview
Persistence services
Factory services
Other services
Summary
Key ideas
314
314
319
319
320
321
322
8 Form-Based Rich Clients
323
8.1
323
324
325
326
326
327
329
329
332
339
343
344
346
350
353
357
358
8.2
8.3
8.4
8.5
Introduction
Defining rich clients
Java rich clients
GUI design for rich clients: the Third Way
Reference functional model
Distributing behavior between client and server
Common problems
Runtime data model
Validation
When to validate and notify
The cake-ordering application, the XP way
Setting up the first Iteration
Content first
Data second
Commands third
Closing the loop with the server
Summary
9 Web-Based User Interfaces
359
9.1
9.2
359
361
361
362
362
365
368
368
369
370
9.3
An overview of Web user interfaces
GUI design for the Web
Fine graphics details
Area organization
Levels of client-side control
Navigation issues
Implementing Web applications with Java
The typical architecture of a Web application
Basic Java Web GUI technologies
Java applets
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xvi
9.4
9.5
From Web applications to rich clients
Different development habits
Summary
371
372
373
10 J2ME User Interfaces
375
10.1
375
376
379
379
379
379
382
384
385
387
388
389
391
392
10.2
10.3
10.4
10.5
10.6
10.7
10.8
Introduction to the MID profile
Main UI concepts
Main UI limitations
Cost-driven design for J2ME GUIs
The MIDP UI API
UI widgets
Designing MIDP GUIs
Abstract GUI designs
Designing navigation
An example custom item
An example ad-hoc item
An example application
The code
Summary
11 Java Tools and Technologies
393
11.1
11.2
394
394
396
397
397
403
409
410
411
412
413
413
414
415
415
418
420
421
11.3
11.4
11.5
11.6
11.7
Introduction to tool selection
Evaluating open source software
Open Source Maturity Model
SWT or Swing?
The toolkits
Choosing a toolkit
Mix and match
Other GUI technologies
Utility libraries
Security tools
Deployment tools
Glazed Lists
JGoodies Swing Suite
L2FProd Common Components
Other OSS component libraries
Some commercially-available Swing components
Test tools
Profiling tools
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xvii
11.8
11.9
GUI builders
Presentation layer technologies
Assessing a look and feel
Swing look and feels
SWT Presentation
11.10 Declarative GUIs with Java
XML-based formats
11.11 Summary
422
424
425
426
442
443
443
445
12 Advanced Issues
447
12.1
447
448
451
454
455
457
459
463
464
465
466
468
469
12.2
12.3
12.4
12.5
12.6
12.7
Building on top of existing libraries
Attributes
Roll your own framework
Memory management for complex GUIs
A practical case
Restructuring existing GUI code
Porting an old applet – a case study
Long-life GUIs
Providing new deployment support
Exploiting technology
Domain-specific and Little languages
The future of Java GUIs
Summary
Part VI Examples
13 Rich Client Platforms
471
13.1
471
472
473
474
474
475
476
477
477
478
479
482
13.2
13.3
13.4
Introduction to Java rich client platforms
The case for RCP applications
What’s in an RCP
GUI design guidelines and RCPs
The NetBeans RCP
NRCP architecture
The Spring RCP
The Eclipse RCP
Eclipse plug-in architecture
Eclipse RCP plug-ins
The workbench – the building blocks of ERCP GUIs
GUI design guidelines for ERCP applications
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xviii
13.5
13.6
13.7
13.8
Choosing the best RCP for your needs
When to employ an RCP
Legal issues
Eclipse
Netbeans
An example Eclipse RCP application
The application
Introducing client-side modular architectures
The Snooper application architecture
Summary
483
484
485
485
486
486
487
489
492
496
14 The Personal Portfolio Application
497
14.1
497
498
499
499
503
504
505
505
506
506
508
511
512
513
515
516
516
524
525
525
525
526
529
529
529
14.2
14.3
14.4
14.5
14.6
14.7
14.8
14.9
The scenario
A note on lifecycle models
Analysis
Early analysis
Some scenarios
A refined use case diagram
Individuating boundary classes
Choosing a technology
An initial GUI design
An initial GUI paper mock-up
A second GUI paper mock-up
A throw-away GUI prototype
Validating the throw-away prototype
The final GUI
Implementation
Software requirements
The software architecture
Resources
Localization bundles
Images
The code
The remote explorer director
The prototype
Deployment issues
Server support
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xix
14.10 An alternative, cost-driven implementation
Choosing a higher-level starting point
A cost-driven prototype using JDNC
A brief introduction to JDNC
14.11 Summary
530
530
531
531
533
15 An Example OO User Interface
535
15.1
536
536
537
538
542
542
543
544
544
546
546
549
550
551
555
558
559
560
563
565
15.2
15.3
15.4
15.5
15.6
15.7
15.8
15.9
Introduction
A matter of style
Implementing object-oriented user interfaces
The Viewable interface
Some utility classes
Brief views
Making collections viewable
Configuration views
A utility class
Interacting with the user
The Commandable interface
Managing user commands
An example application
OOUI objects
The code
Libraries
Some GUI design considerations
Control issues
An alternative implementation using Naked Objects
Summary
16 An Example Ad-Hoc Component
567
16.1
16.2
568
569
570
573
575
575
575
579
16.3
16.4
Introduction
The Drawing Sandbox application
The application
The Sandbox architecture
The Sandbox component
Top-down refinement of functional organization
Organizing object communication
Graphical objects
modified 6:9 PM 16 March 2006
ftoc.fm
1.0
Contents
xx
16.5
User interaction
Command composition
The Action framework
The Actions class
Undo-redo support
The Edit class
Recording edits
Memory issues
16.6 Control
The Director class
Managing actions
Enforcing logical constraints on actions
16.7 The whole picture
16.8 Stressing the software design
Adding objects and commands
The design’s weak points
16.9 Introducing JHotdraw
16.10 Summary
Key ideas
582
582
583
584
587
588
589
590
592
594
595
596
597
598
599
600
601
605
605
A A Questionnaire for Evaluating Java User Interfaces
607
B A Questionnaire for Evaluating J2ME Applications
613
References
621
General advice on usability and GUI design
Java-specific links
626
627
Index
modified 6:9 PM 16 March 2006
629
ftoc.fm
1.0
Acknowledgements
Acknowledgements
I have been working on this book for more than five years, in one way or another.
It is by no means the result of a single person (the author). A very large number
of people shaped it, so many that it will be impossible to name them all.
I should first thank Sally Tickner and the management at John Wiley and Sons, for
allowing me to deliver the manuscript after such a huge delay, which was mostly
caused – only a partial excuse – by my never-ceasing joy of working on and
taming new and complex adventures, rather than lack of interest in the subject.
It’s easy to remember Steve Rickaby of WordMongers, whose expert hand made
this book readable and sometimes even enjoyable. If it wasn’t for his help this
gigantic work would have been very different.
A special thanks too to my students, who kept the fire of honest enthusiasm and
the Spirit of Wonder high, and who were extremely patient with my shameful
schedule. I hope I gave them back at least a small portion of what they gave to me.
I wish also to thank the reviewers for their careful work, the many clients and
colleagues for the countless lessons that I tried to put together in the book, and all
the people who spent precious time out of their lives putting into written form
their hard-won experience, often without any economic return.
Last but not least, my biggest thanks go to my family, my Bella, and my closest
friends. Without their presence, patience, and constant support, this book
wouldn’t have been possible.
10:37 AM 8 March 2006
fack.fm
0.1
Introduction
Introduction
This introduction is structured as follows:
The interactivity thrill talks about the magic of the first time and other things.
The organization of the book discusses the book’s contents and organization.
Book readers and personas provides a more user-centered approach to the contents
of the book.
The interactivity thrill
Current software technology allows developers to build graphical user interfaces
(GUIs) for only the cost of the labor, and with greater simplicity than ever before.
Despite that, GUIs, and Java GUIs among them, are often totally frustrating and
disappointing. In the words of Alan C. Kay1:
“A twentieth century problem is that technology has become too ‘easy.’
When it was hard to do anything, whether good or bad, enough time was
taken so that the result was usually good. Now we can make things
almost trivially, especially in software, but most of the designs are trivial
as well. This is inverse vandalism: the making of things because you can.
Couple this to even less sophisticated buyers and you have generated an
exploitation marketplace similar to that set up for teenagers. A counter to
this is to generate enormous dissatisfaction with one’s designs using the
entire history of human art as a standard and goal. Then the trick is to
decouple the dissatisfaction from self worth – otherwise it is either too
depressing or one stops too soon with trivial results.”
Basically, inverse vandals don’t care about their work and its impact on the lives of
users and the many others affected by their work, which is a pity. Software has a
sort of magic in itself, and interactive software provides a concrete, vivid example
of such a magic. Whether you are a teenager playing a video game or an old guy
fiddling with an early computer in your garage, there was probably a moment in
your life when you were totally amazed by a piece of software – otherwise you
would probably have chosen another career.
1.
5:8 PM 9 March 2006
The Early History of Smalltalk,
http://gagne.homedns.org/~tgagne/contrib/EarlyHistoryST.html
fintro.fm
0.1
Introduction
xxiv
Such a feeling alone, and perhaps a rather selfish and self-gratifying one, is not
enough to provide reliable, professional results. There is a need to study and
apply a wide array of subjects in depth, filtering user’s needs through experience
and the relentless application of ambitious but sensible designs and solutions,
both on the GUI side and in its implementation. Despite all this hard work – or
possibly because of it – the fun still remains, and I hope you can see it between the
lines of this book. Finally, some words about my professional background, that
could help in providing a better understanding and a more critical view of the
book’s contents.
My long experience is mostly on internal projects, that is, building software for
customers, and also spans a few products building shrink-wrapped software. As
far as Java is concerned, I started working with Java GUIs in 1998, trying to focus
on client-side aspects whenever possible. I worked on a couple of large and
complex GUIs, and on other projects that ranged from the weather forecasting
system for the Italian air force to large multinational corporate ERPs, various Web
sites, a large GUI framework for advanced enterprise clients – on various aspects
still unmatched on the market – and more recently have been hopping on and off
planes throughout Europe and US as a consultant while trying to find the time for
a number of EU and academic research projects.
Usable GUIs and usable books
Writing a book like this is in many ways similar to GUI development1. The
author has a target audience, at least in his mind (end users), and many little
daily hindrances. He needs to work to earn his keep, trying to maintain a
private life and struggle with mundane things like mastery of the English
language (GUI design guidelines), the wrong dpi settings in scanned pictures
(API inconsistencies), ever-newer technologies, and all the rest. Luckily he is
not alone. He is the less-experienced part of a great team of professionals (the
development team), good-willed reviewers (user representatives), and wonderful
private-life supporters. Nevertheless, new ideas and existing content that
should be better addressed seem never-ending (feature creep), and the manuscript keeps growing (deadlines shifting). The author is constrained by
deadlines and wants to deliver something useful (at least within his definition
of usefulness). There are different kinds of GUI development. There are shrinkwrapped products, where there is competition and users can easily opt for your
product or a competing one, as in the case of a shareware music player, and
various forms of internal projects where users have no choice but to read the
1.
5:8 PM 9 March 2006
The term development is meant to indicate the general process of building a GUI, including
GUI design and implementation.
fintro.fm
0.1
Introduction
xxv
book/use the application. A documentation manual fits the latter category1:
unfortunately for me, this book falls into the first category.
All the above has a common denominator: the end user. The ultimate objective is
to write a book that you would like to read, in which the message comes across as
smoothly and as richly as possible and as you expect, saving you time and effort,
while possibly providing you with a pleasant experience. This book – and the next
application you are going to create – will be effective and useful as long as its very
inception, its design and writing, focuses on end users.
The organization of the book
The book is organized in three parts. The first part introduces HCI and GUI
design, starting from general concepts and concluding with recurring GUI
designs. The second part, from Chapter 5 to Chapter 12, discusses general implementation advice. The third part, from Chapter 13 to Chapter 16, discusses some
examples applications, from analysis and GUI design to the software architecture
and the implementation – something rather rare to find in literature. Finally, two
appendices provide evaluation questionnaires specifically targeted at Java GUIs.
The following gives a brief description of the book’s contents.
GUI Design
Part
Chapter
Title
Description
1
Putting GUI Development
into Context
Framing GUI development in the wider context
of software development, introducing a general
reference functional model for GUIs, and UML
diagrams.
2
Introduction to User Interface A basic introduction to some key themes of
HCI and user-centered, general user interface
Design
design.
3
Java GUI Design
Practical GUI design for the Java platform with
some practical examples, introducing the Java
Look and Feel design guidelines.
4
Recurring User Interface
Designs
Recurring design solutions in desktop applications, with reusable code.
1.
5:8 PM 9 March 2006
In real-world situations users have another popular choice: skip reading the manual
altogether.
fintro.fm
0.1
Introduction
xxvi
Implementation
Part
Chapter
Title
Description
5
Iterative GUI Development
with Java
Building GUIs iteratively using OOP. Introducing software testing, usability testing for
Java GUIs, and GUI-specific refactorings.
6
Iterative GUI Development
with Java
Introduction to software design strategies and
OOP design patterns for GUIs.
7
Code Organization
Main software architectures for GUI applications and some reusable utility classes.
8
Form-Based Rich Clients
An example iterative, test-driven GUI
development.
9
Web-Based User Interfaces
Web GUI design basics and related Java
technologies.
10
J2ME User Interfaces
An introduction to J2ME GUI technologies and
GUI design for wireless devices, with some
example code for MIDP.
11
Java Tools and Technologies A review of the main tools and technologies
available for Java application development,
with particular focus on open source software.
12
Advanced Issues
5:8 PM 9 March 2006
Some topics of interest for complex GUIs:
building custom frameworks, usability applied
to API design, memory management, legacy
GUI code, and domain-specific languages for
GUIs.
fintro.fm
0.1
Introduction
Appendixes
Examples
Part
xxvii
Chapter
Title
Description
13
Rich Client Platforms
Introduction to Rich Client Platforms (RCP)
and Eclipse RCP GUI design guidelines, with
an example service-oriented GUI for the
Eclipse RCP.
14
The Personal Portfolio
Application
Design and development of an example application using use cases. An alternative design
using JDNC is also discussed.
15
An Example OO User
Interface
Using the OOUI approach to design and implement an example application, compared with
the use of the Naked Objects framework.
16
An Example Ad-Hoc
Component
An example ad-hoc component and its
comparison with the JHotDraw framework.
A
A Questionnaire for Evaluating Java User Interfaces
B
A Questionnaire for Evaluating J2ME Applications
Three levels of advice
Building a usable, cost-effective, professional-quality GUI is a complex and multidisciplinary process that involves mastery of many different skills. In this book we
will cover three different perspectives: the design of the user interface, the software architecture behind it, and the tactics related to the source code, as shown in
the figure below.
The three level of advice in the book
Professional GUIs are carefully designed and implemented pieces of software. For
this reason special attention is given in this book to implementation details, especially at the design and architectural level – in my experience the only way to
absorb reliably the sort of complexity-by-accretion that real world GUIs exhibit.
Source code listings and code-level tactics are mentioned only briefly, to save
space and reduce the danger of sending my copy-editor to sleep.
5:8 PM 9 March 2006
fintro.fm
0.1
Introduction
xxviii
Conventions used in the book
Throughout the book notes are represented using the graphical convention below.
This is a note.
All references are gathered in a reference section and represented following the
Chicago Manual of Style, fourteenth edition, University of Chicago Press, 1993.
Source code
Source code is provided on my Web site at:
http://www.marinilli.com/books/b1/b1.html
or you can start from the home page at http://www.marinilli.com and follow
the links from there. It is organized into separated bundles for each chapter, and
a single file containing the code for all the chapters is also available. Sources are
provided with Ant build files and with Eclipse projects.
Some of the example applications can also be launched on line using JNLP links,
available at:
http://www.marinilli.com/books/b1/b1.html
5:8 PM 9 March 2006
fintro.fm
0.1
Introduction
xxix
The JNLP client will ask for authorization prior to installing the application.
Reader feedback
A book is an inherently limited means of communication, at least when compared
with computer-based interactive tools. In order to balance this unfair equilibrium,
a public forum will be available on my Web site for readers to give feedback, pose
questions, download the source code, or start a discussion.
Book readers and personas
You might have bought this book, and I do thank you for that. Unfortunately, it is
more than 707 pages long and you could not have the time or will to read it all from
end to end, neither would it be a time-efficient thing to do. The objective of this
section is to help you save your valuable time getting quickly to your point, gaining
also a first glimpse of techniques for focusing the design around end users.
The book can be used in a number of ways: it is useful for experienced developers
that want to explore ideas on GUI development, and can be used in courses on
practical GUI design and implementation. Intermediate developers can take
advantage of the many examples provided to explore sample implementations.
The book has been designed with three types of reader in mind:
i.
Those that have better things to do in life than fiddling with theoretical
issues, and just need to put together something that works, now.
ii. Novice readers who want to explore the complexity of professional GUI
development.
iii. Those that are experienced and critical about ready-made solutions, and
would like a critical and wider discussion of the major issues for GUI development in Java.
The following sections describe a set of fictitious readers, built with the persona
technique1. If you are lucky enough to recognize yourself as one of them, or somewhere in between, their approach to the book might suit you. Alternatively, if you
are one of those brave, tough, developers who think all this Lars and Melinda stuff
is a bit silly, skip the following section and jump directly to the first chapter.
1.
5:8 PM 9 March 2006
These user representations are called Personae and were introduced by A. Cooper in
(Cooper 1999). They are useful for defining the user population clearly to designers, even
for a book.
fintro.fm
0.1
Introduction
xxx
Lars, a Java intermediate programmer
Lars, 24, doesn’t have time to waste. In his first glance at the book he sees
many interesting things, but he needs to deliver a small (twenty-some screens)
form-based corporate rich client application within five weeks. He needs to
interface with an existing J2EE application and with a third-party Web service.
After a quick look on the Web, he remains a bit confused by the many technologies and options available: he wants to look at some working code and get a
clear understanding of how it works, together with some advice to help him
to build a bigger picture of the best choices available, without wasting time on
other fancy details.
Lars will then…
•
Take a bird’s eye view of Chapter 6 and an even quicker glimpse at Chapter 7
to see about client tier architectures.
•
Perhaps take a look at Chapter 5, to see if there is some useful technique he
can take advantage of in his project.
•
Read the discussion about SWT vs. Swing in Chapter 11, opting for SWT and
the Eclipse RCP for his project.
•
Consequently focus his attention on Chapter 13 (RCP), and Chapter 8 (Formbased GUIs).
•
Use the quick references on the book’s reverse covers as required.
•
After his project is completed, get back to the rest of the book…
Keiichi, a tech lead
Keiichi is a technical leader in a medium-sized software company in Japan who
wants to explore new ideas about GUI development. He is starting a new project
and has some spare time that wants to spend on refreshing his knowledge about
GUI design and development. He is particularly interested in the architecture of
complex desktop GUIs that provide undo/redo support, complex validation,
role-based fine-grained authorization, and more.
Keiichi will then…
•
Read Chapter 1.
•
Read parts of Chapter 2 and Chapter 3 to get an idea of GUI design.
•
Browse Chapter 4 for a quick look at recurring GUI designs in desktop
applications.
•
Read Chapter 5 about iterative GUI development – a subject in which he is
quite interested.
5:8 PM 9 March 2006
fintro.fm
0.1
Introduction
xxxi
•
Have a look at Chapter 6 for some implementation strategies and common
issues related to complex GUI development.
•
Take a quick look at Chapter 7 and Chapter 8 for completing his introduction
to the implementation of complex rich client GUIs with Java.
•
Read Chapter 12 about advanced issues and ideas for implementing nontrivial GUIs.
•
Browse the example applications in the third part of the book.
•
After adding notes and bookmarks, put back the book on his shelf, promising himself to get back to it when the new project has started…
Shridhar, a professor in computer science
Shridhar is an assistant professor in a university in Kanpur, India. He is 35,
married with two children. He is preparing a course on the practical development
of complex GUIs. He wants to include the essentials of user interface design,
advanced software design patterns, and many case studies that will form the
backbone of the course. He bought the book on line to evaluate its adoption as a
reference textbook for the course, integrating the parts in which he is more interested with other material. Shridhar finds some companion material for the book
on line and plans to use it for his course. In particular, he is interested in using
SWT for an interesting research project.
Shridhar will then…
•
Organize his course content around the functional model introduced in
Chapter 1.
•
Plan to devote the first part of the course to GUI design issues, based on
Chapters 2 and 3.
•
Use Chapter 6 as the theoretical base for the second part of his course, about
implementation of complex GUIs in Java.
•
Use the examples in Chapters 13–16 for the case studies. He plans to extract
software design patterns and architecture contents from these chapters to use
in the hands-on part of his course.
•
Think about creating assignments based on the ideas provided in the various
chapters he has read. Because he is interested in the Eclipse RCP and SWT, he
will focus on the ideas discussed in Chapter 8.
Melinda (Mellie), a manager
Mellie has a technical background and a basic overview of object-oriented technology. She wants to have an overview of current technology for GUI
development with OOP, and feels that she needs to refresh her knowledge of
5:8 PM 9 March 2006
fintro.fm
0.1
Introduction
xxxii
current state-of-the-art development of client-side software. She worked in software testing back in the 1980s, and is now a senior group manager in the IT
department of a medium-sized insurance company that does some in-house development. She wants to get a basic, high-level understanding of the latest trends in
GUI design and development.
Mellie will then…
•
Read Chapter 1 about the development context of GUI design and
implementation.
•
Interested by the topic of GUI design, move to study Chapter 2 for an introduction to basic user interface design.
•
Read Chapter 3 for an example of an OOP GUI technology stack, showing
guidelines, practical GUI design examples, and other technology-oriented
topics that can also be used outside the Java world.
•
Take a look at the pictures in Chapter 4, to see the most commonly-used GUI
designs in real world applications, and try to match them with her daily
practice of software applications (a mix of Microsoft Project, the Microsoft
Office suite, and some corporate intranet applications).
•
Have a look at Chapter 5 to get an idea of iterative GUI development.
•
Note a few useful terms to be inserted in her next presentation, such as
usability inspections, continuous profiling, and more.
•
Eventually, put the book in her ‘favorites’ pile, hoping to have more time for
it another day.
William, a first year student in a Master in CS course
William has just moved to Vancouver and is excited about starting his masters
program in Computer Science and eager to become a proficient software developer. He already has some exposure to Java and the Swing toolkit, and he knows
that he is going to have some courses about these topics. He wants to know more
about software architectures and how complex desktop GUIs are built, possibly
starting his own open source project.
William will then…
•
Start reading the example applications, looking for interesting situations and
trying to understand the proposed solutions.
•
As he is interested in the Sandbox application discussed in Chapter 16,
download and compile the source code, tweaking it to add new features.
5:8 PM 9 March 2006
fintro.fm
0.1
Introduction
xxxiii
•
Jump to Chapter 6 for the theoretical background behind the implementations proposed in the example applications.
•
Turn his interest to the qText application in Chapter 6, studying its simple
architecture, downloading the code, and adding new commands to the
editor.
•
Browse the rest of the book as he needs to.
Karole, a business analyst
Karole has a degree in programming and works for a software company. While
working as a full-time analyst on her current project, she discovers that she enjoys
dealing with customers. She feels she would like to work more on the GUI side of
software development and move into GUI design. She would like to get a wider
picture of GUI development, using Java as a practical example, but also be exposed
to more general concepts.
Karole will then…
•
Read Chapter 1 about the development context for GUI design and
implementation.
•
Study Chapter 2 for an introduction to basic GUI design advice.
•
Read Chapter 3 for a discussion of GUI guidelines, practical GUI design
examples, and other technology-oriented topics that can also be used outside
the Java world.
•
Study Chapter 4, to understand the most commonly-used GUI designs and
the rationale behind them.
•
Perhaps read Chapters 5 and 8 to gain a better grasp of the latest iterative
development techniques for client applications.
•
Snoop around the rest of the book as required.
Juan, an experienced programmer
Juan is an experienced programmer in his late twenties living in Schaumburg, IL.
He has just bought the book in a bookshop and is excited about it. He has some
spare time, an hour or two, on a Saturday morning. He wants to browse the book
for something fun, taking it easy, while sipping his favorite blend of Cappuccino in
a café while waiting for his fiancé Francene, who is having her nails done. Juan is
looking for cool new technologies, interesting application architectures, exciting
techniques, or just a cartoon or fancy pictures before a long shopping session with
Francene1.
5:8 PM 9 March 2006
fintro.fm
0.1
Introduction
xxxiv
Juan will then…
•
Browse Chapter 4 for a quick glimpse of common GUI design issues, such as
choosers, area organization, and so on.
•
Have a look at some of the pictures of the various look and feels in Chapter 11.
•
Look at Chapter 10 for information about J2ME GUIs, and have a quick look
at Chapter 9 for Web Java GUIs.
•
Have a glimpse at some of the techniques discussed in Chapter 12.
•
Take a look at the various pictures of the example applications in the third
part of the book.
•
Then, when he has more time, get back to this section to find another fictitious user who matches his needs, so that he can start seriously reading the
book.
1.
This is not a spurious use of a technical book, as it might seem at first. Establishing a positive emotional relationship with something we need in our work life is always a win-win
situation. Working with something pleasant will make us feel better, being more productive, and perhaps sparing precious energy for something other than dull work.
5:8 PM 9 March 2006
fintro.fm
0.1
1
Putting GUI Development
into Context
Putting GUI Development into Context
This chapter provides a comprehensive introduction to the design and development of Java applications with non-trivial user interfaces. After introducing a
general-purpose reference model that will guide our discussion in the remainder
of the book, we introduce the organizational aspects related to UI development,
discussing the role of people in the entire software lifecycle process for GUI software. We then consider the issue of early design, where we briefly introduce the
delicate and often overlooked transition from analysis to UI design. A section is
devoted to some interesting lifecycle models and the way they support the
process of building professional user interfaces. The chapter concludes with a
minimal introduction to some useful UML notation that will be used throughout
the book.
The chapter is structured as follows:
1.1, Introduction briefly discusses the current state of GUI technologies and the use
made of them by developers.
1.2, Focusing on users discusses user-centered design and development throughout
the software lifecycle.
1.3, A functional decomposition for user interfaces introduces an abstract model for
GUIs that is used throughout the book.
1.4, Tool selection: the Java singularity discusses the selection of a set of ingredient
libraries technologies, many of them open source, to speed up GUI development.
1.5, Organizational aspects introduces some of the issues related to the management
of the multidisciplinary teams that are common in GUI development.
1.6, Early design introduces requirements and use cases for professional GUIs.
1.7, Lifecycle models, processes and approaches briefly introduces some software lifecycle models: Rational Unified Process, Extreme Programming and other Agile