Brief Contents

Acknowledgements xxi

Introduction

1 Putting GUI Development into Context

xxiii

1

Part I User InterfaceDesign

2 Introduction to User Interface Design

3 Java GUI Design

4 Recurring User Interface Designs

31

77

119

Part II Software Design

5 Iterative GUI Development with Java

6 Implementation Issues

7 Code Organization

8 Form-Based Rich Clients

9 Web-Based User Interfaces

10 J2ME User Interfaces

11 Java Tools and Technologies

12 Advanced Issues

169

223

287

323

359

375

393

447

Part III Examples

13 Rich Client Platforms

14 The Personal Portfolio Application

15 An Example 00 User Interface

471

497

535

viii

16 An Example Ad-Hoc Component

A A Questionnaire for Evaluating Java User Interfaces

B A Questionnaire for Evaluating J2ME Applications

References

Index

Brief Contents

567

607

613

621

629

Contents

Acknowledgements xxi

Introduction xxiii

The interactivity thrillUsable GUls and usable books

The organization of the bookThree levels of advice

Conventions used in the book

Source codeReader feedback

Book readers and personasLars, 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 courseKarole, a business analyst

Juan, an experienced programmer

xxiiixxiv

xxv

xxviixxviii

xxviiixxix

xxixxxx

xxx

xxxixxxi

xxxiixxxiii

xxxiii

1 Putting GUI Development into Context

1.1 Introduction

1.2 Focusing on users

1.3 A functional decomposition for user interfaces

1.4 Tool selection: the Java singularity

Of running little green men and wrong choices

1.5 Organizational aspectsPeople and GUls

Team composition

1.6 Early designUse case diagrams and GUls

1

2

2

3

6

7

7

8

10

12

12

Contents

1.7 Lifecycle models, processes and approachesRational Unified Process

Extreme Programming and other Agile approachesLUCID methodologyEvolutionary Prototyping process

UML notation

Class diagramsSequence diagramsState diagrams

Summary

14152022242626282930

1.8

1.9

Part IV User Interface Design

2 Introduction to User Interface Design.2.1 The human factor

A model of interactive systems - seven stagesand two gulfs

Developers are part of the design processShort term memory and cognitive modelingInteracting with human beingsUser-centered designSimplified thinking aloud

2.2 Display organizationEsthetic considerations

Abstract-Augmented Area for GUls2.3 Interaction styles

Menu selection

Form fillingLanguage-based stylesDirect manipulation

2.4 Conceptual frameworks for UI designEntity-based approaches to UI designMetaphor-based approaches to UI designFunction-based approaches to UI design'Null' approach to UI designObject-oriented user interfaces

2.5 Assessing the quality of a GUIUsability heuristics

2.6 Summary

31

32

3234363944464749515757596263646566676769727375

:ontents

3 Java GUI Design

3.1 Java technology for GUlsAssembling the componentsThree levels of component cost

3.2 Cost-driven designAd-hoc versus custom - the difference between 'run' and 'ride'

When ad-hoc is the only way to go3.3 Exploring the design space for a point chooser

Standard designsAd-hoc designsMixed designsConclusions

3.4 Design guidelines for the Java platformIntroduction to the guidelinesJ2SE user interface design guidelines

3.5 The Java look and feel design guidelinesSome definitionsThe Java 'look'The Java 'feel'

Some terminologyAn example - applying the guidelines for designing dialogs

3.6 Summary

4 Recurring User Interface Designs

4.1 GUI area organizationTerminologyMain frames

Multiple document interfacesWizards

4.2 ChoosersChooser activation mechanisms

Chooser interaction stylesBroadening the choiceConclusions

4.3 Memory componentsInput historySaving user preferences

4.4 Lazy initialization

xi

77

7777798181838688919799

100100103108109109110112114117

119

120120121123124126127128131133133134134135

xii Contents

4.5 Preference dialogsPreference dialogs styles

Waiting strategiesFlexible layoutCommon dialogs

The 'About' dialogLog-in dialogFirst-time message dialogsSplash window

4.9 Command componentsGraphic conventionsToolbar compositionCommand composition

4.10 AccessibilityTesting the final product for accessibilityConclusions

4.11 Navigation and keyboard supportKeyboard shortcutsTab traversal

4.12 Internationalization

4.13 Help support4.14 Icons and images4.15 Leveraging object-oriented programming4.16 Summary

137138141144146146149150151152156157158160161161161161162163164165166167

4.64.74.8

Part V Software Design

5 Iterative GUI Development with Java

5.1 Iterating wisely5.2 Introduction to prototyping

Uses for prototypingThe two dimensions of prototypingCompetitors' product as ready-made prototypesPrototyping as a philosophy for developmentPrototypes and customers

5.3 Prototyping alternativesDifferent types of prototypesStoryboards

169

171173174176177177178179179182

Contents xiii

5.4 GUI builders

5.5 Reusable prototyping widgetsA tree prototype utility classA visual container prototype utility class

5.6 GUI refactoringSome classic refactoringsSome GUI-specific refactoringsFailing with style

5.7 Introduction to user interface testingTest-driven developmentWhat's first - GUI design or implementation?

5.8 Software testing of Java GUlsHow to test - GUI software test approachesWhat to test - test coverage criteria

5.9 Usability testing of Java GUls5.10 JRE runtime management

Introduction to profilingCommon problemsContinuous profilingA posteriori profiling

5.11 Summary

184187187190191191194201203204204206206210211214214216219220221

6 Implementation Issues

6.1 Revisiting the abstract modelTesting the various layersThe principle of Single Functional ResponsibilityIsolating presentation details

6.2 Content

Content assemblyExplicit navigation

6.3 Business domain

6.4 Data input-outputA comprehensive data 10 design strategySome design patternsRemote communication designSecurity issues

6.5 Making objects communicateThe Observer patternSwing events

223

224226227228229229231231233233234235236239240242

)(iv

SWT events

Design-time class decoupling with eventsEvent Arbitrator

Misuses of event-based messagingAlternatives to event-based communication mechanisms

6.6 Separating data from viewsModel-View-Controller

6.7 Interaction and control

Representing user actions with the Command patternControl issues

A state-oriented approach to GUI control6.8 Some design patterns for GUls

AdaptationComposite ContextActive ObjectObject lifecycle management - a general mindsetValue Model

6.9 GUI complexity boosters6.10 Summary

7 Code Organization

7.1 Introducing software architecturesTaming referencesComposable unitsEvolving order and appropriate architectures

7.2 Some common GUI architectures

The smart GUI antipatternA semi-smart GUI architecture

A three-layer architectureA four-layer architecture

7.3 A three-layer organization for GUI codeOverview

The presentation layerThe application layerThe service layer

7.4 Two examples of a three-layer implementationAn MP3 playerAn electronic circuit simulator and editor

Contents

243243245248250251252257257260265271271277279280282283285

287

287289292294295296297298299300301303304305306306309

Contents xv

7.5 The service layerOverviewPersistence services

Factory servicesOther services

SummaryKey ideas

314314319319320321322

7.6

8 Form-Based Rich Clients

8.1 Introduction

Defining rich clientsJava rich clients

GUI design for rich clients: the Third Way8.2 Reference functional model

Distributing behavior between client and serverCommon problems

8.3 Runtime data modelValidation

When to validate and notify8.4 The cake-ordering application, the XP way

Setting up the first IterationContent firstData secondCommands third

Closing the loop with the server8.5 Summary

9 Web-Based User Interfaces

323

323324325326326327329329332339343344346350353357358

9.19.2

An overview of Web user interfaces

GUI design for the WebFine graphics detailsArea organizationlevels of client-side control

Navigation issuesImplementing Web applications with Java

The typical architecture of a Web applicationBasic Java Web GUI technologiesJava applets

359

359361361362362365368368369370

9.3

xvi Contents

9.4 From Web applications to rich clientsDifferent development habits

Summary

3713723739.5

10 J2ME User Interfaces

10.1 Introduction to the MID profileMain UI conceptsMain Ullimitations

Cost-driven design for J2ME GUls10.2 The MIDP UI API

UI widgets10.3 Designing MIDP GUls

Abstract GUI designs10.4 Designing navigation10.5 An example custom item10.6 An example ad-hoc item10.7 An example application

The code

10.8 Summary

375

375376379379379379382384385387388389391392

11 Java Tools and Technologies11.1 Introduction to tool selection

11.2 Evaluating open source softwareOpen Source Maturity Model

11.3 SWT or Swing?The toolkits

Choosing a toolkitMix and match

11.4 Other GUI technologies11.5 Utility libraries

Security toolsDeployment toolsGlazed Lists

JGoodies Swing SuiteL2FProd Common ComponentsOther ass component librariesSome commercially-available Swing components

11.6 Test tools

11.7 Profiling tools

393

394394396397397403409410411412413413414415415418420421

Contents xvii

11.8 GUI builders

11.9 Presentation layer technologiesAssessing a look and feelSwing look and feelsSWT Presentation

11.10 Declarative GUls with JavaXML-based formats

11.11 Summary

422424425426442443443445

12 Advanced Issues

12.1 Building on top of existing librariesAttributes

Roll your own framework12.2 Memory management for complex GUls

A practical case12.3 Restructuring existing GUI code

Porting an old applet - a case studyLong-life GUlsProviding new deployment support

12.4 Exploiting technology12.5 Domain-specific and Little languages12.6 The future of Java GUls

12.7 Summary

447

447448451454455457459463464465466468469

Part VI Examples

13 Rich Client Platforms

13.1 Introduction to Java rich client platformsThe case for RCP applicationsWhat's in an RCP

GUI design guidelines and RCPs13.2 The NetBeans RCP

NRCP architecture

13.3 The Spring RCP13.4 The Eclipse RCP

Eclipse plug-in architectureEclipse RCP plug-insThe workbench - the building blocks of ERCP GUlsGUI design guidelines for ERCP applications

471

471472473474474475476477477478479482

xviii Contents

13.5 Choosing the best RCP for your needsWhen to employ an RCP

13.6 Legal issuesEclipseNetbeans

13.7 An example Eclipse RCP applicationThe applicationIntroducing client-side modular architecturesThe Snooper application architecture

13.8 Summary

483

484485485

486486

487489492496

14 The Personal Portfolio Application

14.1 The scenario

A note on lifecycle models

14.2 AnalysisEarly analysisSome scenarios

A refined use case diagramIndividuating boundary classes

14.3 Choosing a technology14.4 An initial GUI design

An initial GUI paper mock-upA second GUI paper mock-up

A throw-away GUI prototypeValidating the throw-away prototype

14.5 The final GUI

14.6 ImplementationSoftware requirementsThe software architecture

14.7 ResourcesLocalization bundles

Images14.8 The code

The remote explorer director

The prototype14.9 Deployment issues

Server support

497

497498499499503504505505506506508511512

513515516516524525525525526529529529

Contents xix

14.10 An alternative, cost-driven implementation

Choosing a higher-level starting pointA cost-driven prototype using JDNCA brief introduction to JDNC

14.11 Summary

530

530531531533

15 An Example 00 User Interface

15.1 Introduction

A matter of style15.2 Implementing object-oriented user interfaces

The Viewable interface

15.3 Some utility classesBrief views

Making collections viewable15.4 Configuration views

A utility class15.5 Interacting with the user

The Commandable interface

15.6 Managing user commands15.7 An example application

OOUI objectsThe codeLibraries

Some GUI design considerationsControl issues

15.8 An alternative implementation using Naked Objects

15.9 Summary

535

536536537538542542543544544546

546549550551555558559560563

565

16 An Example Ad-Hoc Component

16.1 Introduction

16.2 The Drawing Sandbox applicationThe application

16.3 The Sandbox architecture

16.4 The Sandbox component

Top-down refinement of functional organizationOrganizing object communicationGraphical objects

567

568569

570573575575575

579

16.5 User interaction

Command compositionThe Action frameworkThe Actions class

Undo-redo supportThe Edit class

Recording editsMemory issues

16.6 ControlThe Director class

Managing actionsEnforcing logical constraints on actions

16.7 The whole picture16.8 Stressing the software design

Adding objects and commandsThe design's weak points

16.9 Introducing JHotdraw16.10 Summary

Key ideas

A A Questionnaire for Evaluating Java User Interfaces

B A Questionnaire for Evaluating J2ME Applications

References

General advice on usability and GUI designJava-specific links

Index

Contents

582582583584587588589590592594595596597598599600601605605

607

613

621

626627

629