Posted by Stephan Eggermont-3 on Jun 26, 2015; 3:55pm
URL: https://forum.world.st/Ann-DragPanels-Floating-palette-windows-with-drag-and-drop-in-Morphic-tp4834283.html

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:
                #('[hidden email]'
                '[hidden email]'
                '[hidden email]'
                '[hidden email]'
                '[hidden email]'
                '[hidden email]');
        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