layout-and-design-$11.lzx

<canvas width="100%">
  <!-- A draggable floating view -->
  <class name="floater" height="20" bgcolor="0x93A5FF" visible="false">
    <dragstate name="dragger"/>
    <text name="txt" width="100"/>
    <method name="showFloater" args="xpos, ypos, itemwidth, itemlabel">
      myfloater.bringToFront();
      this.setAttribute("x", xpos);
      this.setAttribute("y", ypos);
      this.setAttribute("width", itemwidth);
      this.txt.setAttribute("text", itemlabel);
      this.gm = new LzDelegate(this, "cancelFloater", lz.GlobalMouse, "onmouseup");
      this.setAttribute("visible", true);
      this.dragger.apply();
    </method>

    <method name="cancelFloater" args="v">
      this.dragger.remove();
      this.setAttribute("visible", false);
    </method>
  </class>
  
  <!-- An instance of the floater -->
  <floater id="myfloater"/>
  
  <!-- An item that will get clicked and dragged -->
  <class name="imageRow" bgcolor="0x93A5FF" width="$once{parent.width}" height="20">
    <attribute name="text" type="text"/>
    <text name="txt" text="${parent.text}" resize="true"/>
    <handler name="onmousedown">
      myfloater.showFloater(this.getAttributeRelative("x", canvas),
                            this.getAttributeRelative("y", canvas),
                            this.width,
                            this.txt.text);
    </handler>
  </class>

 <view>
  <view name="stage" width="400" height="300" x="20" bgcolor="0xeaeaea">
    <!-- Area for viewing images -->
    <text>Stage</text>
    <!-- ... -->
  </view>
  
  <view name="listOfImages" width="200" height="300" x="500" bgcolor="0xffff00">
    <!-- Data-replicated list of images -->
    <simplelayout axis="y" spacing="2"/>
    <imageRow>One</imageRow>
    <imageRow>Two</imageRow>
    <imageRow>Three</imageRow>
  </view>
  
  <view name="trash" width="200" height="75" x="500" y="310" bgcolor="0xff0000">
    <!-- Trash for disposing of images -->
    <text>Trash</text>
    <!-- ... -->
  </view>
 </view>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2008 - 2009-2011 Laszlo Systems, Inc.  All Rights Reserved.            *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->