Geertjan's Blog

  • May 27, 2010

Custom Layouts in Visual Library Scenes

Geertjan Wielenga
Product Manager
Let's say you want a widget-based window where you have different regions, as shown here:

The above widgets, within a Visual Library scene, are created as a result of parsing the following file, which is available in the "Text" tab of the multiview component:

How to create these two regions? (Everything else in the scenario above has recently been described in this blog, from multiview component to parsing the XML file to serialization.)

To create the above 50/50 split in the scene, do the following (copied directly from an e-mail from David Kaspar who created the Visual Library):

  1. Add a new LayerWidget.

  2. Add two Widgets into it. Widget should be opaque=true, with different background-colors.

  3. Add the LayerWidget as the first layer in the scene.

  4. Create a new class which extends Layout and implement it like this:
    class MyLayout implements Layout {
    public void layout (Widget widget) {
    for (Widget child : widget.getChildren ()) {
    child.resolveBounds (null, null);
    public boolean requiresJustification (Widget widget) {
    return true;
    public void justify (Widget widget) {
    Rectangle bounds = widget.getClientArea ();
    List<Widget> children = widget.getChildren ();
    children.get(0).resolveBounds (null,
    new Rectangle (bounds.x, bounds.y, bounds.width/2, bounds.height));
    children.get(1).resolveBounds (null,
    new Rectangle (bounds.x + bounds.width/2, bounds.y,
    bounds.width - bounds.width/2, bounds.height));
  5. Assign the MyLayout instance to your new LayerWidget.

Also see Toni Epple's simple grid layout.

After creating your layout and assigning it to the LayerWidget, create a MoveProvider for the widget. The MoveProvider should, in the "movementFinished", check the new location of the widget. With the new location, you know where the widget is (i.e., in the "inbox" or "outbox" above), giving you the info you need for serializing the XML file with the new data.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.