PaletteScreen.java

package org.uberfire.client.screens.hellolienzo;

import javax.annotation.PostConstruct;
import javax.inject.Inject;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;
import org.jboss.errai.ioc.client.api.AfterInitialization;
import org.jboss.errai.ioc.client.container.IOCBeanManager;
import org.uberfire.client.annotations.WorkbenchPartTitle;
import org.uberfire.client.annotations.WorkbenchScreen;

@WorkbenchScreen(identifier = "PaletteScreen")
public class PaletteScreen
        extends Composite {

    interface ViewBinder
            extends
            UiBinder<Widget, PaletteScreen> {

    }

    private static ViewBinder uiBinder = GWT.create( ViewBinder.class );

    @UiField
    SimplePanel panel;

    @Inject
    private IOCBeanManager iocManager;

    @PostConstruct
    public void init() {
        initWidget( uiBinder.createAndBindUi( this ) );
        panel.add( iocManager.lookupBean( ShapesGroup.class ).getInstance() );

    }

    @AfterInitialization
    public void setup() {
//        com.google.gwt.user.client.Window.alert( "PaletteScreenAfterInitialization" );
    }

    @WorkbenchPartTitle
    public String getTitle() {
        return "Palette";
    }

}

PaletteScreen.ui.xml

<!--
  ~ Copyright 2012 JBoss Inc
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~       http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
             xmlns:g="urn:import:com.google.gwt.user.client.ui"
             xmlns:b="urn:import:com.github.gwtbootstrap.client.ui" >

<g:SimplePanel>
    <b:Accordion>
        <b:AccordionGroup heading="Shapes"  defaultOpen="true">
            <g:SimplePanel ui:field="panel"/>
        </b:AccordionGroup>
        <b:AccordionGroup heading="Connections">
        </b:AccordionGroup>
    </b:Accordion>
</g:SimplePanel>

</ui:UiBinder>

ShapesGroup.java

package org.uberfire.client.screens.hellolienzo;

import javax.annotation.PostConstruct;
import javax.enterprise.context.Dependent;
import javax.enterprise.event.Event;
import javax.enterprise.event.Observes;
import javax.inject.Inject;

import com.emitrom.lienzo.client.core.event.NodeMouseClickEvent;
import com.emitrom.lienzo.client.core.event.NodeMouseClickHandler;
import com.emitrom.lienzo.client.core.shape.Layer;
import com.emitrom.lienzo.client.core.shape.Rectangle;
import com.emitrom.lienzo.client.widget.LienzoPanel;
import com.emitrom.lienzo.shared.core.types.Color;
import com.google.gwt.dom.client.Style;
import com.google.gwt.dom.client.Style.Position;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.dom.client.MouseDownEvent;
import com.google.gwt.event.dom.client.MouseDownHandler;
import com.google.gwt.event.dom.client.MouseMoveEvent;
import com.google.gwt.event.dom.client.MouseMoveHandler;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.RootPanel;

@Dependent
public class ShapesGroup extends Composite {

    @Inject
    private Event<ShapeAddEvent> shapeAddEvent;

    private Layer layer;

    private LienzoPanel panel;

    public void myResponseObserver( @Observes ShapeAddEvent shapeAddEvent ) {
        //        Shape shape = shapeAddEvent.getShape();
        //        shape.getLayer().remove(shape);
        //        shape.setX( shapeAddEvent.getX() - panel.getAbsoluteLeft() );
        //        shape.setY( shapeAddEvent.getY() - panel.getAbsoluteTop() );
        //        layer.add( shape );
        //        layer.draw();
        com.google.gwt.user.client.Window.alert( "ShapeAddEvent3" );
    }

    @PostConstruct
    public void init() {
        panel = new LienzoPanel( 200, 300 );
        initWidget( panel );

        layer = new Layer();
        panel.add( layer );

        final Rectangle rectangle = new Rectangle( 30, 30 );
        rectangle.setX( 5 ).setY( 5 )
                .setStrokeColor( Color.rgbToBrowserHexColor( 255, 0, 0 ) )
                .setStrokeWidth( 3 )
                .setFillColor( Color.rgbToBrowserHexColor( 0, 255, 255 ) )
                .setDraggable( false );
        layer.add( rectangle );
        layer.draw();

        rectangle.addNodeMouseClickHandler( new NodeMouseClickHandler() {
            @Override
            public void onNodeMouseClick( NodeMouseClickEvent event ) {
                final Layer floatingLayer = new Layer();
                final LienzoPanel floatingPanel = new LienzoPanel( 30, 30 );
                final Style style = floatingPanel.getElement().getStyle();
                style.setPosition( Position.ABSOLUTE );
                style.setLeft( panel.getAbsoluteLeft() + event.getX(), Unit.PX );
                style.setTop( panel.getAbsoluteTop() + event.getY(), Unit.PX );
                style.setZIndex( 100 );

                final Rectangle floatingShape = new Rectangle( 30, 30 );
                floatingShape.setX( 0 ).setY( 0 )
                        .setStrokeColor( Color.rgbToBrowserHexColor( 255, 0, 0 ) )
                        .setStrokeWidth( 3 )
                        .setFillColor( Color.rgbToBrowserHexColor( 0, 255, 255 ) )
                        .setDraggable( false );
                floatingLayer.add( floatingShape );
                floatingPanel.add( floatingLayer );
                floatingLayer.draw();

                RootPanel.get().add( floatingPanel );

                final HandlerRegistration[] handlerRegs = new HandlerRegistration[ 2 ];

                handlerRegs[ 0 ] = RootPanel.get().addDomHandler( new MouseMoveHandler() {
                    public void onMouseMove( MouseMoveEvent mouseMoveEvent ) {
                        style.setLeft( mouseMoveEvent.getX(), Unit.PX );
                        style.setTop( mouseMoveEvent.getY(), Unit.PX );
                    }
                }, MouseMoveEvent.getType() );

                handlerRegs[ 1 ] = RootPanel.get().addDomHandler( new MouseDownHandler() {
                    public void onMouseDown( MouseDownEvent mouseDownEvent ) {
                        handlerRegs[ 0 ].removeHandler();
                        handlerRegs[ 1 ].removeHandler();
                        RootPanel.get().remove( floatingPanel );
                        com.google.gwt.user.client.Window.alert( "ShapeAddEvent1" );
                        shapeAddEvent.fire( new ShapeAddEvent( mouseDownEvent.getX(), mouseDownEvent.getY() ) );
                        com.google.gwt.user.client.Window.alert( "ShapeAddEvent2" );
                    }
                }, MouseDownEvent.getType() );
            }
        } );
    }
}