splitpanel.lzx

<canvas>
  <text x="5" y="5">try dragging divider</text>
  
  <view id="divider" x="110" y="30" width="10" height="200" bgcolor="#666699" onmousedown="dragging.setAttribute('applied', true)" onmouseup="dragging.setAttribute('applied', false)">   
    <state name="dragging">
      <attribute name="x" value="${Math.min(parent.width-this.width,                                     Math.max(0, parent.getMouse('x')))}"/> 
    </state>
  </view>

  <!-- constrain width to x of 'divider' -->
  <view name="left" bgcolor="#999999" y="30" width="${divider.x}" height="200" clip="true">
    <text x="5" y="5">Left Panel</text>
  </view>
  
  <!-- constrain to properties of 'divider' -->
  <view name="right" bgcolor="#CAD0EC" y="30" x="${divider.x+divider.width}" width="${parent.width-this.x}" height="200" clip="true">
    <text x="5" y="5">Right Panel</text>
  </view>
</canvas>

Cross References

Named Instances