Your SlideShare is downloading. ×
  • Like
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply



Bridging the Gap Between Morphic Visual Programming …

Bridging the Gap Between Morphic Visual Programming
and Smalltalk Code. Noury Bouraqadi, Serge Stinckwich. ESUG 2007, Lugano

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Bridging the Gap BetweenBridging the Gap Between MorphicMorphic Visual ProgrammingVisual Programming andand Smalltalk CodeSmalltalk Code Noury Bouraqadi École des Mines de Douai France Serge Stinckwich GREYC - CNRS / Univ. de Caen France ICDL - ESUG 2007 - Lugano, Switzerland
  • 2. 2 Context: Visual Programming in Squeak  GUI model named Morphic • Introduced first in Self • All GUI elements are objects named Morphs e.g. buttons, windows, menus, frames, … • Morph support visual manipulation e.g. Move, rotate, resize, clone, colors, layout…  EToys: A visual scripting on top of Morphic • Expressions = Tiles • Tiles may be assembled to get complex expressions • Scripts = sequences of tiles May be reactive or run in a loop
  • 3. 3 Motivations  Etoys is not suitable for complex applications • Restricted set of expressions (messages) • Limited reuse possibilities  GUI construction in Squeak is programmatic • Pure Smalltalk code • No direct connection to Morphic and Etoys visual programming capabilities
  • 4. 4 Requirements for a GUI Construction Environment 1. Visual GUI development by direct manipulation • GUI parts should be live application objects (not descriptions!) 2. Smalltlak "traditional" tools for business code • Smalltalk has a many powerful programming tools 3. Support GUI reuse • Reuse and compose existing GUIs 4. Storage of the GUI with the code • Avoid project scattering 5. Support GUI versioning • Allow rollbacks during project life-time
  • 5. 5 Overview of Easy Morphic GUI (EMG)  EMG = framework + Morphic extension  Development using EMG mediator morphmorphmorph morphmorph morph modelmodel modelmodelmodel Coded in Smalltalk Set up visually
  • 6. 6 Demo Steps for building a counter with a GUI 1. Building a model class: Counter 2. Building a mediator class: CounterGUI • Subclass of EMGGuiMorph • Both a mediator and a morph 3. Set up visually the prototypical instance of CounterGUI • CounterGUI is a container for other morphs
  • 7. 7 Demo Step 3: GUI visual assembling DEMO
  • 8. 8 EMG Visual Reuse Operators  Two levels of development • Smalltalk code • GUI visual construction  Need for an extra reuse level beside Smalltalk reuse facilities (inheritance, composition) • Subclassing a mediator class don't lead to GUI reuse ! Reminder : Mediator is also a container of morphs  Introduction of two visual reuse operators • Embed • Clone
  • 9. 9 EMG Visual Reuse Operators Embed operator sourceGUI destinationGUI sourceGUI destinationGUI Embed
  • 10. 10 EMG Visual Reuse Operators Clone operator  Static-Clone<sourceGUI, destinationGUI> • Empty destinationGUI • Copy submorphs of sourceGUI into destinationGUI • Link new submorphs to destinationGUI  Dynamic-Clone<sourceGUI, destinationGUI> • Static-Clone • Update destinationGUI whenever sourceGUI changes
  • 11. 11 Example of reuse by clone Building a circular counter with a GUI 1. Building a model class : CircularCounter • Circular counter = a counter which value loops between a min and a max 2. Building a mediator class CircularCounterGUI 3. Use the clone operator to set up the prototypical instance of CircularCounterGUI DEMO
  • 12. 12 EMG Relies on Different Design Patterns  Mediator • Link betwen model objects and morphs  Prototype • Each mediator class holds a GUI prototype  Null Object • A null object is used instead of missing morphs during early GUI development stage  Observer • Allow model changes reflect on the GUI
  • 13. 13 Summary EMG Does Meet our Requirements 1. Visual tools for GUI by direct manipulation • Use of Morphic and Etoys == direct manipulation of GUI objects 2. Smalltalk "traditional" tools for business code • Model objects are created and referenced by GUI objects 3. Support GUI reuse • Introduction of 2 reuse operators : "clone" and "embed" 4. Storage of the GUI with the code • A serialized version of a GUI is stored as string in a class method 5. Support GUI versioning • Use of existing method version management system • Use of existing project management system
  • 14. 14 Perspectives  Improve reliability and efficiency • On-going work  Better Integration with Morphic and Etoys • All morphs should support visual manipulation Menus, Halos, …  Visualization of references between morphs • Ease understanding and maintenance  Have a visual representation of model objects • Integration with Morphic Wrappers ?
  • 15. 15 Easy Morphic GUI  Mix the best of both worlds • Smalltalk + Morphic and Etoys • Developers use the most appropriate tool  Available for free download at: •  Submtited to the ESUG Awards 2007 • Vote for EMG