layout-and-design-$12.lzx

<canvas width="100%">
  <!-- The data that provides the images -->
  <dataset name="ds_items">
    <items>
      <item description="One" src="one.jpg"/>
      <item description="Two" src="two.jpg"/>
      <item description="Three" src="three.jpg"/>
    </items>
  </dataset>
  
  <!-- A draggable floating view -->
  <class name="floater" height="20" bgcolor="0x93A5FF" visible="false" datapath="">
    <dragstate name="dragger"/>
    
    <text name="txt" datapath="@description" resize="true"/>
    <text name="imgurl" datapath="@src" resize="true" align="right"/>
    
    <method name="showFloater" args="xpos, ypos, itemwidth, dataNode">
      myfloater.bringToFront();
      this.setAttribute("x", xpos);
      this.setAttribute("y", ypos);
      this.setAttribute("width", itemwidth);
      this.datapath.setAttribute("p", dataNode);
      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" datapath="@description" resize="true"/>
    <handler name="onmousedown">
      myfloater.showFloater(this.getAttributeRelative("x", canvas),
                            this.getAttributeRelative("y", canvas),
                            this.width,
                            this.datapath.p);
    </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" datapath="ds_items:/items">
    <!-- Data-replicated list of images -->
    <simplelayout axis="y" spacing="2"/>
    <imageRow datapath="item"/>
  </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 Laszlo Systems, Inc.  All Rights Reserved.            *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->