SlideShare a Scribd company logo
Université catholique de Louvain (UCL)
Belgian Laboratory of Computer-Human Interaction (BCHI)
Place des Doyens, 1
B-1348 Louvain-la-Neuve (Belgium)
Presented by
Attach me, Detach me, Assemble
me like You Work
Donatien Grolaux, Jean Vanderdonckt
donatien.grolaux@ichec.be
Jean.vanderdonckt@uclouvain.be
Outline
 Demonstration
 Migration principles: DEMIPLAT
 Other goals
 Architecture overview
 Conclusion
Demonstration
Demonstration using two computers
Example using a Pocket PC
UI Migration: DEMIPLAT
 Detach
UI Migration: DEMIPLAT
 Detach - Migrate
UI Migration: DEMIPLAT
 Detach - Migrate - Plastify
UI Migration: DEMIPLAT
 Detach - Migrate - Plastify - Attach
This is not a floating toolbar
Process
Computer B
Process
This is migration !
Process
Computer A
Other goals
 Migration mechanism at the application level
– Not at the OS/Windowing system level
– Full control of what is migratable and what is not
– Full control on how the user migrates stuff
– Cross-platform (VM on Windows, Linux, OSX, Solaris, …)
 Development cost as minimal as possible
– No perceivable difference between stationary and migratable
UIs from the application’s perspective
 Infrastructure cost as minimal as possible
– The application creating a migratable UI acts as a server for
this particular UI.
– The application attaching a migratable UI to its own acts as a
client for this particilar UI.
– No extra infrastructure or configuration required.
Display Site
Architecture overview
 Transparent proxy mechanisms
– Proxies are empty shells relaying messages to actual widgets
– Proxies react as the actual widget from the application’s
perspective
Application Site
Communication ManagerFunctional Core Widget 1 Proxy
Widget 2 Proxy
Widget … Proxy
Widget N Proxy
Widget 1
Widget 2
Widget …
Widget N
User Interface
(using TCP)
Display Site
Architecture overview
 Transparent proxy mechanisms
– Proxies relay event bindings from the functional core
– Widgets trigger these events inside the CM at the display site
– The CM relays and triggers the event at the application site
– Proxies store all their event bindings
Application Site
Communication ManagerFunctional Core Widget 1 Proxy
Widget 2 Proxy
Widget … Proxy
Widget N Proxy
Widget 1
Widget 2
Widget …
Widget N
User Interface
(using TCP)
Event
Listener
Event
Triggerer
Display Site
Architecture overview
 Transparent proxy mechanisms
– Proxies act as storage when migrating away from a site
– All visual aspects of all the widgets are stored by their proxies
Application Site
Communication ManagerFunctional Core
Widget Proxy
•Event bindings
•Attribute values
Widget
User Interface
(using TCP)
Attr1
Attr2
AttrN
Display Site
Architecture overview
 Transparent proxy mechanisms
– When arriving at a site, all widgets are created
– Their visual aspects are restored
– Their event bindings are restored
Application Site
Communication ManagerFunctional Core
Widget Proxy
•Event bindings
•Attribute values
Widget
User Interface
(using TCP)
Attr1
Attr2
AttrN
Application Programming Interface
 A window is either stationary or migratable
– Decided at creation time, and once for all
– Migratable windows are migrated with all their contents along
– One can use composition to split a stationary window into a
combination of several stationary/migratable sub-windows
 A migratable window can return a universal reference
– A text string (encoding the IP address, a socket number, and
an internal memory address)
– Can be passed along using any medium
 New widget: receiver
– Has a method to import a migratable window from its
universal reference
Composition principle
3 independent
parts that we want
to migrate
How is it possible to turn an already existing stationary application into a
(partly/fully) migratable one ?
Composition principle
They are turned into 3
different migratable
windows
Composition principle
The space these
migratable windows used
to occupy are replaced
by receiver widgets
receiver
receiver
receiver
Composition principle
At the application start-
up, the migratable
windows are placed into
their corresponding
receiver widgetreceiver
receiver
receiver
Composition principle
The application looks
exactly the same as when
we started, but now the
three green parts are
migratable.
QTkDraw example
 ~5k lines of code for the original
stationary version
 50 lines of code to enable the toolbars
migration
 The receiving palette application is also
around 50 lines of code
 Nothing in the functional core of the
application had to change !
A word on Oz, Mozart, and QTk
 Research platform: www.mozart-oz.org
 Support for OO programming style
– OO binding for Tcl/Tk as the backend toolkit
 Support for high level data structures
– Oz record is expressively equivalent to XML
– The QTk binding uses a mixed declarative/imperative
approach for building and running the UI
• QTk is part of the standard Mozart/Oz distribution
 Support for functional programming style
– Well suited for manipulating records
– UI can be (partly) calculated dynamically
– Well suited for adaptive UIs
 Support for concurrency and distributed programming
– Reduces greatly the cost of developing the distributed
communication manager
Conclusion and future work
 This version is a proof of concept prototype, hacked
over an already existing binding for the Tcl/Tk toolkit
– Works well enough for demo applications, but not for real
applications
– Proof of concept this is a nice approach for minimizing
development cost when adding migration support to an
(already existing) application
 Currently working on a newer version
– Will support different rendering engines (Tcl/Tk, GTk, Web
Browser, …)
– Proxies are no more empty shells, they can (at least partly)
function when not connected to an actual widget
– Support for P2P networks
– Support for more adaptation mechanisms
– Robust implementation

More Related Content

PDF
eTrice introduction and demo
Henrik Rentz-Reichert
 
PPT
A MDA-Compliant Environment for Developing User Interfaces of Information Sys...
Jean Vanderdonckt
 
PPT
WebQuilt: Capturing and Visualizing the Web Experience at WWW10
Jason Hong
 
PPT
Chapter 3-Processes.ppt
sirajmohammed35
 
PPTX
Chap-3- Process.pptx distributive system
Tofikmohammed5
 
PPT
Three Challenges in Reliable Data Transport over Heterogeneous ...
Videoguy
 
PPT
Migrating Interactive Legacy Systems To Web Services
Porfirio Tramontana
 
PDF
A CASE STUDY ON ONLINE TICKET BOOKING SYSTEM PROJECT.pdf
Kamal Acharya
 
eTrice introduction and demo
Henrik Rentz-Reichert
 
A MDA-Compliant Environment for Developing User Interfaces of Information Sys...
Jean Vanderdonckt
 
WebQuilt: Capturing and Visualizing the Web Experience at WWW10
Jason Hong
 
Chapter 3-Processes.ppt
sirajmohammed35
 
Chap-3- Process.pptx distributive system
Tofikmohammed5
 
Three Challenges in Reliable Data Transport over Heterogeneous ...
Videoguy
 
Migrating Interactive Legacy Systems To Web Services
Porfirio Tramontana
 
A CASE STUDY ON ONLINE TICKET BOOKING SYSTEM PROJECT.pdf
Kamal Acharya
 

Similar to Attach Me, Detach Me, Assemble Me like you Work (20)

PPTX
Social Photos - My presentation at Microsoft Tech Day
TechMaster Vietnam
 
KEY
Architectures for Inclusive Design
colinbdclark
 
PPTX
L11 Application Architecture
Ólafur Andri Ragnarsson
 
PDF
Nippon lugano multitouch
Silvia Zicca
 
PDF
Download
Valar Mathi
 
PPT
Designing Powerful Web Applications - Monterey
Dave Malouf
 
PDF
A CASE STUDY ON ONLINE TICKET BOOKING SYSTEM PROJECT.pdf
Kamal Acharya
 
PPT
Components of client server application
Ashwin Ananthapadmanabhan
 
PPTX
Dos1
Avinash Buddana
 
PDF
SMARCOS CNR Paper Engineering
Smarcos Eu
 
PDF
Smart Client Development
Tamir Khason
 
PPT
A Toolkit for Peer-to-Peer Distributed User Interfaces: Concepts, Implementat...
Jean Vanderdonckt
 
PPTX
Formal Definition of Collaborative Spaces
Jean Vanderdonckt
 
PPT
0.Web Application Architecture.ppt
anoopkumarm
 
PDF
Designing Enterprise IT Systems with REST - QCon San Francisco 2008
Stuart Charlton
 
KEY
Web frameworks don't matter
Tomas Doran
 
PPS
Ch2
Ronak Patel
 
PPT
Ch2_Ed7_Network_Applications.ppt
FernandoLipardoJr
 
PDF
Scalable system operations presentation
james tong
 
PPT
Reverse Engineering Web Applications
Porfirio Tramontana
 
Social Photos - My presentation at Microsoft Tech Day
TechMaster Vietnam
 
Architectures for Inclusive Design
colinbdclark
 
L11 Application Architecture
Ólafur Andri Ragnarsson
 
Nippon lugano multitouch
Silvia Zicca
 
Download
Valar Mathi
 
Designing Powerful Web Applications - Monterey
Dave Malouf
 
A CASE STUDY ON ONLINE TICKET BOOKING SYSTEM PROJECT.pdf
Kamal Acharya
 
Components of client server application
Ashwin Ananthapadmanabhan
 
SMARCOS CNR Paper Engineering
Smarcos Eu
 
Smart Client Development
Tamir Khason
 
A Toolkit for Peer-to-Peer Distributed User Interfaces: Concepts, Implementat...
Jean Vanderdonckt
 
Formal Definition of Collaborative Spaces
Jean Vanderdonckt
 
0.Web Application Architecture.ppt
anoopkumarm
 
Designing Enterprise IT Systems with REST - QCon San Francisco 2008
Stuart Charlton
 
Web frameworks don't matter
Tomas Doran
 
Ch2_Ed7_Network_Applications.ppt
FernandoLipardoJr
 
Scalable system operations presentation
james tong
 
Reverse Engineering Web Applications
Porfirio Tramontana
 
Ad

More from Jean Vanderdonckt (20)

PPTX
https://dl.acm.org/doi/10.1145/3715336.3735706
Jean Vanderdonckt
 
PPTX
TapStrapGest: Elicitation and Recognition of Ring-based Multi-Finger Gestures
Jean Vanderdonckt
 
PPTX
Congruent and Hierarchical Gesture Set Design
Jean Vanderdonckt
 
PPTX
Paired Sketching of Distributed User Interfaces:Workflow, Protocol, Software ...
Jean Vanderdonckt
 
PPTX
Comparative Testing of 2D Stroke Gesture Recognizers in Multiple Contexts of Use
Jean Vanderdonckt
 
PPTX
Human-AI Interaction in Space: Insights from a Mars Analog Mission with the H...
Jean Vanderdonckt
 
PPTX
Gestural Interaction in Virtual/Augmented Reality
Jean Vanderdonckt
 
PPTX
User-controlled Form Adaptation by Unsupervised Learning
Jean Vanderdonckt
 
PPTX
Engineering Touchscreen Input for 3-Way Displays: Taxonomy, Datasets, and Cla...
Jean Vanderdonckt
 
PPTX
To the end of our possibilities with Adaptive User Interfaces
Jean Vanderdonckt
 
PPTX
Engineering the Transition of Interactive Collaborative Software from Cloud C...
Jean Vanderdonckt
 
PPTX
UsyBus: A Communication Framework among Reusable Agents integrating Eye-Track...
Jean Vanderdonckt
 
PPTX
µV: An Articulation, Rotation, Scaling, and Translation Invariant (ARST) Mult...
Jean Vanderdonckt
 
PPTX
RepliGES and GEStory: Visual Tools for Systematizing and Consolidating Knowle...
Jean Vanderdonckt
 
PPTX
Gesture-based information systems: from DesignOps to DevOps
Jean Vanderdonckt
 
PPTX
Engineering Slidable User Interfaces with Slime
Jean Vanderdonckt
 
PPTX
Evaluating Gestural Interaction: Models, Methods, and Measures
Jean Vanderdonckt
 
PPTX
Conducting a Gesture Elicitation Study: How to Get the Best Gestures From Peo...
Jean Vanderdonckt
 
PPTX
Designing Gestural Interaction: Challenges and Pitfalls
Jean Vanderdonckt
 
PPTX
Fundamentals of Gestural Interaction
Jean Vanderdonckt
 
https://dl.acm.org/doi/10.1145/3715336.3735706
Jean Vanderdonckt
 
TapStrapGest: Elicitation and Recognition of Ring-based Multi-Finger Gestures
Jean Vanderdonckt
 
Congruent and Hierarchical Gesture Set Design
Jean Vanderdonckt
 
Paired Sketching of Distributed User Interfaces:Workflow, Protocol, Software ...
Jean Vanderdonckt
 
Comparative Testing of 2D Stroke Gesture Recognizers in Multiple Contexts of Use
Jean Vanderdonckt
 
Human-AI Interaction in Space: Insights from a Mars Analog Mission with the H...
Jean Vanderdonckt
 
Gestural Interaction in Virtual/Augmented Reality
Jean Vanderdonckt
 
User-controlled Form Adaptation by Unsupervised Learning
Jean Vanderdonckt
 
Engineering Touchscreen Input for 3-Way Displays: Taxonomy, Datasets, and Cla...
Jean Vanderdonckt
 
To the end of our possibilities with Adaptive User Interfaces
Jean Vanderdonckt
 
Engineering the Transition of Interactive Collaborative Software from Cloud C...
Jean Vanderdonckt
 
UsyBus: A Communication Framework among Reusable Agents integrating Eye-Track...
Jean Vanderdonckt
 
µV: An Articulation, Rotation, Scaling, and Translation Invariant (ARST) Mult...
Jean Vanderdonckt
 
RepliGES and GEStory: Visual Tools for Systematizing and Consolidating Knowle...
Jean Vanderdonckt
 
Gesture-based information systems: from DesignOps to DevOps
Jean Vanderdonckt
 
Engineering Slidable User Interfaces with Slime
Jean Vanderdonckt
 
Evaluating Gestural Interaction: Models, Methods, and Measures
Jean Vanderdonckt
 
Conducting a Gesture Elicitation Study: How to Get the Best Gestures From Peo...
Jean Vanderdonckt
 
Designing Gestural Interaction: Challenges and Pitfalls
Jean Vanderdonckt
 
Fundamentals of Gestural Interaction
Jean Vanderdonckt
 
Ad

Recently uploaded (20)

PDF
Protecting the Digital World Cyber Securit
dnthakkar16
 
PDF
What to consider before purchasing Microsoft 365 Business Premium_PDF.pdf
Q-Advise
 
PPTX
PFAS Reporting Requirements 2026 Are You Submission Ready Certivo.pptx
Certivo Inc
 
PPTX
Visualising Data with Scatterplots in IBM SPSS Statistics.pptx
Version 1 Analytics
 
PPTX
Web Testing.pptx528278vshbuqffqhhqiwnwuq
studylike474
 
PDF
WatchTraderHub - Watch Dealer software with inventory management and multi-ch...
WatchDealer Pavel
 
PDF
Applitools Platform Pulse: What's New and What's Coming - July 2025
Applitools
 
PPTX
GALILEO CRS SYSTEM | GALILEO TRAVEL SOFTWARE
philipnathen82
 
PPTX
Can You Build Dashboards Using Open Source Visualization Tool.pptx
Varsha Nayak
 
PDF
Teaching Reproducibility and Embracing Variability: From Floating-Point Exper...
University of Rennes, INSA Rennes, Inria/IRISA, CNRS
 
PDF
Appium Automation Testing Tutorial PDF: Learn Mobile Testing in 7 Days
jamescantor38
 
PPTX
Explanation about Structures in C language.pptx
Veeral Rathod
 
PDF
On Software Engineers' Productivity - Beyond Misleading Metrics
Romén Rodríguez-Gil
 
PPTX
Role Of Python In Programing Language.pptx
jaykoshti048
 
PPTX
Contractor Management Platform and Software Solution for Compliance
SHEQ Network Limited
 
PDF
Exploring AI Agents in Process Industries
amoreira6
 
PDF
Key Features to Look for in Arizona App Development Services
Net-Craft.com
 
PPTX
Presentation about variables and constant.pptx
kr2589474
 
PPTX
Presentation about Database and Database Administrator
abhishekchauhan86963
 
PDF
Balancing Resource Capacity and Workloads with OnePlan – Avoid Overloading Te...
OnePlan Solutions
 
Protecting the Digital World Cyber Securit
dnthakkar16
 
What to consider before purchasing Microsoft 365 Business Premium_PDF.pdf
Q-Advise
 
PFAS Reporting Requirements 2026 Are You Submission Ready Certivo.pptx
Certivo Inc
 
Visualising Data with Scatterplots in IBM SPSS Statistics.pptx
Version 1 Analytics
 
Web Testing.pptx528278vshbuqffqhhqiwnwuq
studylike474
 
WatchTraderHub - Watch Dealer software with inventory management and multi-ch...
WatchDealer Pavel
 
Applitools Platform Pulse: What's New and What's Coming - July 2025
Applitools
 
GALILEO CRS SYSTEM | GALILEO TRAVEL SOFTWARE
philipnathen82
 
Can You Build Dashboards Using Open Source Visualization Tool.pptx
Varsha Nayak
 
Teaching Reproducibility and Embracing Variability: From Floating-Point Exper...
University of Rennes, INSA Rennes, Inria/IRISA, CNRS
 
Appium Automation Testing Tutorial PDF: Learn Mobile Testing in 7 Days
jamescantor38
 
Explanation about Structures in C language.pptx
Veeral Rathod
 
On Software Engineers' Productivity - Beyond Misleading Metrics
Romén Rodríguez-Gil
 
Role Of Python In Programing Language.pptx
jaykoshti048
 
Contractor Management Platform and Software Solution for Compliance
SHEQ Network Limited
 
Exploring AI Agents in Process Industries
amoreira6
 
Key Features to Look for in Arizona App Development Services
Net-Craft.com
 
Presentation about variables and constant.pptx
kr2589474
 
Presentation about Database and Database Administrator
abhishekchauhan86963
 
Balancing Resource Capacity and Workloads with OnePlan – Avoid Overloading Te...
OnePlan Solutions
 

Attach Me, Detach Me, Assemble Me like you Work

  • 1. Université catholique de Louvain (UCL) Belgian Laboratory of Computer-Human Interaction (BCHI) Place des Doyens, 1 B-1348 Louvain-la-Neuve (Belgium) Presented by Attach me, Detach me, Assemble me like You Work Donatien Grolaux, Jean Vanderdonckt [email protected] [email protected]
  • 2. Outline  Demonstration  Migration principles: DEMIPLAT  Other goals  Architecture overview  Conclusion
  • 5. Example using a Pocket PC
  • 7. UI Migration: DEMIPLAT  Detach - Migrate
  • 8. UI Migration: DEMIPLAT  Detach - Migrate - Plastify
  • 9. UI Migration: DEMIPLAT  Detach - Migrate - Plastify - Attach
  • 10. This is not a floating toolbar Process
  • 11. Computer B Process This is migration ! Process Computer A
  • 12. Other goals  Migration mechanism at the application level – Not at the OS/Windowing system level – Full control of what is migratable and what is not – Full control on how the user migrates stuff – Cross-platform (VM on Windows, Linux, OSX, Solaris, …)  Development cost as minimal as possible – No perceivable difference between stationary and migratable UIs from the application’s perspective  Infrastructure cost as minimal as possible – The application creating a migratable UI acts as a server for this particular UI. – The application attaching a migratable UI to its own acts as a client for this particilar UI. – No extra infrastructure or configuration required.
  • 13. Display Site Architecture overview  Transparent proxy mechanisms – Proxies are empty shells relaying messages to actual widgets – Proxies react as the actual widget from the application’s perspective Application Site Communication ManagerFunctional Core Widget 1 Proxy Widget 2 Proxy Widget … Proxy Widget N Proxy Widget 1 Widget 2 Widget … Widget N User Interface (using TCP)
  • 14. Display Site Architecture overview  Transparent proxy mechanisms – Proxies relay event bindings from the functional core – Widgets trigger these events inside the CM at the display site – The CM relays and triggers the event at the application site – Proxies store all their event bindings Application Site Communication ManagerFunctional Core Widget 1 Proxy Widget 2 Proxy Widget … Proxy Widget N Proxy Widget 1 Widget 2 Widget … Widget N User Interface (using TCP) Event Listener Event Triggerer
  • 15. Display Site Architecture overview  Transparent proxy mechanisms – Proxies act as storage when migrating away from a site – All visual aspects of all the widgets are stored by their proxies Application Site Communication ManagerFunctional Core Widget Proxy •Event bindings •Attribute values Widget User Interface (using TCP) Attr1 Attr2 AttrN
  • 16. Display Site Architecture overview  Transparent proxy mechanisms – When arriving at a site, all widgets are created – Their visual aspects are restored – Their event bindings are restored Application Site Communication ManagerFunctional Core Widget Proxy •Event bindings •Attribute values Widget User Interface (using TCP) Attr1 Attr2 AttrN
  • 17. Application Programming Interface  A window is either stationary or migratable – Decided at creation time, and once for all – Migratable windows are migrated with all their contents along – One can use composition to split a stationary window into a combination of several stationary/migratable sub-windows  A migratable window can return a universal reference – A text string (encoding the IP address, a socket number, and an internal memory address) – Can be passed along using any medium  New widget: receiver – Has a method to import a migratable window from its universal reference
  • 18. Composition principle 3 independent parts that we want to migrate How is it possible to turn an already existing stationary application into a (partly/fully) migratable one ?
  • 19. Composition principle They are turned into 3 different migratable windows
  • 20. Composition principle The space these migratable windows used to occupy are replaced by receiver widgets receiver receiver receiver
  • 21. Composition principle At the application start- up, the migratable windows are placed into their corresponding receiver widgetreceiver receiver receiver
  • 22. Composition principle The application looks exactly the same as when we started, but now the three green parts are migratable.
  • 23. QTkDraw example  ~5k lines of code for the original stationary version  50 lines of code to enable the toolbars migration  The receiving palette application is also around 50 lines of code  Nothing in the functional core of the application had to change !
  • 24. A word on Oz, Mozart, and QTk  Research platform: www.mozart-oz.org  Support for OO programming style – OO binding for Tcl/Tk as the backend toolkit  Support for high level data structures – Oz record is expressively equivalent to XML – The QTk binding uses a mixed declarative/imperative approach for building and running the UI • QTk is part of the standard Mozart/Oz distribution  Support for functional programming style – Well suited for manipulating records – UI can be (partly) calculated dynamically – Well suited for adaptive UIs  Support for concurrency and distributed programming – Reduces greatly the cost of developing the distributed communication manager
  • 25. Conclusion and future work  This version is a proof of concept prototype, hacked over an already existing binding for the Tcl/Tk toolkit – Works well enough for demo applications, but not for real applications – Proof of concept this is a nice approach for minimizing development cost when adding migration support to an (already existing) application  Currently working on a newer version – Will support different rendering engines (Tcl/Tk, GTk, Web Browser, …) – Proxies are no more empty shells, they can (at least partly) function when not connected to an actual widget – Support for P2P networks – Support for more adaptation mechanisms – Robust implementation