This paper describes a model-based approach for designing distributed user interfaces (DUIs), i.e. graphical user interfaces that are distributed along one or many of the following dimensions: end user, display device, computing platform, and physical environment. The three pillars of this model-based approach are: (i) a Concrete User Interface model for DUIs incorporating the distribution dimensions and able to express in a XML-compliant format any DUI element until the granularity of an individual DUI element is reached, (ii) a specification language for DUI distribution primitives that have been defined in a user interface toolkit, and (iii), a step-wise method for modeling a DUI based on the concepts of distribution graph expressing a distribution scenario that can be played namely based on the distribution primitives. A distribution graph consists of a state transition diagram whose states represent significant distribution states of a DUI and whose transitions are labeled by an even-condition-action representation. The actions involved in this format may call any distribution primitive of the DUI toolkit. In order to exemplify this model-based approach, two simple DUIs are first designed: a DUI for the Pictionary game and a DUI for the Minesweeper game. They are then incorporated into a larger DUI game of the goose where cells may trigger the two other games.

1. A Model-Based Approach for Distributed User Interfaces Jérémie Melchior, Jean Vanderdonckt and Peter Van RoyUniversité catholique de Louvain EICS2011 - June 14, 2011

2. How to distributethings Motivations Drawbacks of Related Work Our solution Case Studies Demonstration Future Work and Conclusion ITEA UsiXML project #08026, 2009-2012 2

3. Motivations Mobile devices (iPad, iPhone,...) Smartphones are popular Distribution is often limited to algorithmic and researchers Limitations of the user's space Need of independence between the user interface and the application ITEA UsiXML project #08026, 2009-2012 3

4. Motivations ITEA UsiXML project #08026, 2009-2012 4

5. Drawbacks of RelatedWork Lack of customization Predefined distribution (wincuts) Lack of real-time distribution Lack of reusability of the techniques Lack of distribution modelling Lack of control on the distribution ITEA UsiXML project #08026, 2009-2012 5

6. Drawbacks of Related Work Predefined distribution ITEA UsiXML project #08026, 2009-2012 6

7. Our solution Model-based approach defining the distribution: CUI model in a XML-compliant format a specification language astep-wise method for modeling DUI Unification of the techniques through a toolkit Real-time controlon every single component of the UI Distribution of whole part custom group of widgets Multi-platform support (computer + tablets + smartphones) ITEA UsiXML project #08026, 2009-2012 7

8. Our solution CUI model in a XML-compliant format with: buttons labels layouts entry (text edit) windows canvas (drawing area) ... ITEA UsiXML project #08026, 2009-2012 8

9. Our solution a specification language e.g.: DISPLAY button(text:"Start" action:Start name:button_1) create a button with the text "Start" on it Start is the algorithm triggered by the button named this button_1 for distribution without specifying a platform: default platform COPYbutton_1 TO shared_display copy the existing button_1 to the platform "shared_display" ... ITEA UsiXML project #08026, 2009-2012 9

10. Our solution a step-wise method for modeling DUI new concept: Distribution Graph CUI widget Platform without CUI Platform with CUI ITEA UsiXML project #08026, 2009-2012 10

11. Our solution Unification of the techniques through a toolkit the toolkit is based on a catalog of primitives: Set, Display, Undisplay, Expose Copy, Move, Switch, Permute Merge, Separate, Replace, Distribute, Reset, Append, Transform Save, Restore, Import, Export ITEA UsiXML project #08026, 2009-2012 11

12. Case Studies Pictionary: a naturally distributed game Minesweeper: a non-naturally distributed game Game of the Goose: an evolutive game through real-time redistribution ITEA UsiXML project #08026, 2009-2012 12

13. Case Studies Pictionary: a naturally distributed game Minesweeper: a non-naturally distributed game Game of the Goose: an evolutive game through real-time redistribution ITEA UsiXML project #08026, 2009-2012 13

14. Pictionary Pictionary: a naturally distributed game ITEA UsiXML project #08026, 2009-2012 14

15. Pictionary Pictionary: a naturally distributed game ITEA UsiXML project #08026, 2009-2012 15

16. Pictionary Pictionary: a naturally distributed game ITEA UsiXML project #08026, 2009-2012 16

17. Pictionary Pictionary: a naturally distributed game ITEA UsiXML project #08026, 2009-2012 17

18. Pictionary Pictionary: a naturally distributed game ITEA UsiXML project #08026, 2009-2012 18

19. Pictionary: a naturally distributed game control on the UI Pictionary ITEA UsiXML project #08026, 2009-2012 19

20. Pictionary: a naturally distributed game control on the UI distribution scenario Pictionary ITEA UsiXML project #08026, 2009-2012 20

21. Pictionary: a naturally distributed game control on the UI distribution scenario UNDISPLAYcolor_bar, guess_wordTO pictionary_UIOF observers, guessers EXPOSEdraw_area TO pictionary_UIOF observers, guessers Pictionary ITEA UsiXML project #08026, 2009-2012 21

22. Case Studies Pictionary: a naturally distributed game Minesweeper: a non-naturally distributed game Game of the Goose: an evolutive game through real-time redistribution ITEA UsiXML project #08026, 2009-2012 22

23. Case Studies Pictionary: a naturally distributed game Minesweeper: a non-naturally distributed game Game of the Goose: an evolutive game through real-time redistribution ITEA UsiXML project #08026, 2009-2012 23

24. Case Studies Pictionary: a naturally distributed game Minesweeper: a non-naturally distributed game Game of the Goose: an evolutive game through real-time redistribution ITEA UsiXML project #08026, 2009-2012 24

25. Case Studies Pictionary: a naturally distributed game Minesweeper: a non-naturally distributed game Game of the Goose: an evolutive game through real-time redistribution ITEA UsiXML project #08026, 2009-2012 25

26. Case Studies Pictionary: a naturally distributed game Minesweeper: a non-naturally distributed game Game of the Goose: an evolutive game through real-time redistribution ITEA UsiXML project #08026, 2009-2012 26

27. Future Work and Conclusion Publication of the catalog Android performances Release the toolkit+ samples Integrationinto UsiXML (UsiDistrib tool) Behaviorbehind distribution ITEA UsiXML project #08026, 2009-2012 27