DragPanels: Floating palette windows with drag-and-drop in Morphic

Morphic offers everything needed to create highly interactive applications in Pharo. It is however, difficult to find out how to actually create those applications. Morphic tutorials provide a starting point, and are not very good at showing how the different features interact and are supposed to be used together. Morph has lots of methods, and some of them are not in the method category where you might expect them. The result is that most Morphs in Pharo do not use much of what Morphic has to offer.

Wouldn’t it be great if there would be some sample code, showing how Morphic can be used to great effect?

Well, here is some code that takes a first step towards that goal.
DragPanels shows how to create a floating palette, filled with
wells that support dragging a property towards a target. It shows how to combine drag-and drop with click: and context menu actions, and show  to give UI feedback when over a well and when holding the mouse down over an element that reacts to click:.

You can see the code in action here:
https://vimeo.com/131889858

The color panel shows some colors. If you don’t set the allowDropBlock,
it will work with any morph that responds to #color: (like the world).
By clicking on the plus, you can add more colors to the panel. The panel has a context menu to restore the default values.

ColorPanel withSevenPaleColors
allowDropBlock: [ :source :target |
target class = CardMorph ];
openInHand

The people panel shows avatars belonging to an email addres. By default it uses gravatar for them, and caches the images.

PeoplePanel new
defaultValues:
#(‘stephan@stack.nl
serge.stinckwich@gmail.com
nicolas.anquetil@inria.fr
thierry.goubier@gmail.com
stephane.ducasse@inria.fr
marcus.denker@inria.fr‘);
allowDropBlock: [ :source :target |
target class = CardMorph ];
openInHand

When dropping, the dragSource sends #color: resp. #email: to the  target by default. By setting the dropSelector of the DragWell this
can be overridden.

You can try the code by do-ing

Gofer new
smalltalkhubUser: ‘StephanEggermont’ project: ‘Dragpanels’
package: ‘DragPanels’;
load.

It is used in (a work in progress)

Gofer new
smalltalkhubUser: ‘StephanEggermont’ project: ‘Documentation’
package: ‘CardsMorphic’;
load.

Stephan

p.s.

On the wishlist are
– add more color palettes
– add a dark theme, refactoring the colors
– add a small close cross in the title bar of the palette
– define the dropSelector in the panel, not the well
– support different sized wells, refactoring the sizes
– make the mouseOver rectangle color content dependent
– add pharo contributors as an avatar source
– add a configuration

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: