Implementation support Introduction chapter 8

• programming tools How does HCI affect of the programmer? – levels of services for programmers • windowing systems Advances in coding have elevated programming – core support for separate and simultaneous user- hardware specific system activity → interaction-technique specific • programming the application and control of dialogue Layers of development tools • interaction toolkits – windowing systems (operating systems) – bring programming closer to level of user perception – interaction toolkits • user interface management systems – user interface management systems – controls relationship between presentation and functionality 1 2

Elements of windowing systems roles of a

Device independence programming the abstract terminal device drivers image models for output and (partially) input Resource sharing achieving simultaneity of user tasks system supports independent processes isolation of individual applications

3 4 Architectures of windowing The client-server architecture systems

Need not be three possible architectures on same machine – all assume device driver is separate – differ in how multiple application management is implemented 1. each application manages all processes – everyone worries about synchronization – reduces portability of applications 2. management role within kernel of operating system – applications tied to operating system 3. management role as separate application maximum portability

5 6

Programming the application Programming the application read-evaluation loop (macs) notification-based

void main(String[] args) { menu = new Menu(); menu.setOption(“Save”); menu.setOption(“Quit”); menu.setAction(“Save”,mySave) menu.setAction(“Quit”,myQuit) ... repeat } read-event(myevent) case myevent.type int mySave(Event e) { type_1: // save the current file do type_1 processing } type_2: do type_2 processing int myQuit(Event e) { ... // close down type_n: } do type_n processing end case end repeat 7 8 going with the grain Using toolkits

• system style affects the interfaces Interaction objects – modal dialogue box – input and output intrinsically linked • easy with event-loop (just have extra read-) • hard with notification (need lots of mode flags) – non-modal dialogue box • hard with event-loop (very complicated main loop) move press release move • easy with notification (just add extra handler) Toolkits provide this level of abstraction – programming with interaction objects (or beware! – techniques, widgets, gadgets) if you don’t explicitly design it will just happen – promote consistency and generalizability – through similar look and feel implementation should not drive design – amenable to object-oriented programming

9 10

UI development environment interfaces in Java (UIDE)

• Java toolkit – AWT (abstract windowing toolkit) • e.g. Visual Studio, Delphi – Provide high level of support for • Java classes for buttons, menus, etc. programmer • Notification based; •but – AWT 1.0 – need to subclass basic widgets – Usually operating system specific – AWT 1.1 and beyond -– callback objects

•Swing toolkit – built on top of AWT – higher level features – uses MVC architecture (see later)

11 12 User Interface Management UIMS as conceptual architecture Systems (UIMS)

• UIMS add another level above toolkits • separation between application semantics and – toolkits too difficult for non-programmers presentation •improves: • roles of UIMS – portability – runs on different systems – conceptual architecture – reusability – components reused cutting costs – implementation techniques – multiple interfaces – accessing same functionality – support infrastructure – customizability – by designer and user • These issues will be more important as ‘anytime anywhere’ computing becomes a reality

13 14

Seeheim model MVC model - view - controller

lexical syntactic semantic Dialogue Functionality view USERUSER Presentation (application APPLICATION Control interface) model

switch controller

– arose out of implementation experience • MVC is largely pipeline model: – but principal contribution is conceptual input → control → model → view → output – concepts part of ‘normal’ UI language • but in graphical interface – input only has meaning in relation to output e.g. mouse click –need to know what was clicked e.g. the lower box, the switch – controller has to decide what to do with click • needed for implementation – but view knows what is shown where! • in practice controller ‘talks’ to view • but not conceptual – separation not complete

15 16 PAC PAC model presentation - abstraction - control

A P A P • PAC model closer to Seeheim C C – abstraction – logical state of component – presentation – manages input and output – control – mediates between them

abstraction presentation • manages hierarchy and multiple views – control part of PAC objects communicate

control • PAC cleaner in many ways … but MVC used more in practice (e.g. Java Swing) A P C A P C 17 18

Implementation of UIMS graphical specification

• Techniques for dialogue controller • what it is • menu networks • state transition diagrams – draw components on screen • grammar notations • event languages – set actions with script or links to program • declarative languages • constraints • graphical specification • in use – with raw programming most popular technique – for most of these see chapter 16 – e.g. Visual Basic, Dreamweaver, Flash

• N.B. constraints • local vs. global – instead of what happens say what should be true – hard to ‘see’ the paths through system – used in groupware as well as single user interfaces – focus on what can be seen on one screen (ALV -abstraction–link–view)

see chapter 16 for more details on several of19 these 20 Trend Summary The drift of dialogue control

• internal control Levels of programming support tools (e.g., read-evaluation loop) •Windowing systems – device independence –multiple tasks • external control • Paradigms for programming the application (independent of application semantics or presentation) – read-evaluation loop – notification-based • presentation control • Toolkits – programming interaction objects (e.g., graphical specification) •UIMS – conceptual architectures for separation – techniques for expressing dialogue

21 22