SplitPane, List

[binil]

Hi all,

I am very new to Laszlo; I have installed it after seeing the TSS announcement on it being open-sourced and have been reading through the documentation since then.

I have now started working on a prototype application to evaluate the power of this new tool. I am putting up a GUI for an inhouse tool I am working on. I have a (simple?) question.

How do I make a split-pane? I am looking for something on the lines of JSplitPane from the JFC/Swing library. As of now, I have implemented a split pane using three views whose width and position are inter-dependant contraints. This works fine, except for a lack of smoothness when the "splitter" view is dragged. So my question is, is there a "standard" split-pane component? If not, am I doing it the right way? Kindly advise.

Thanks,
Binil

[adam]

the most efficient way to express this kind of relationship would be with a layout. you can take a look at the code for the layouts that ship with the product (like simplelayout.lzx)

here's the doc for the layout baseclass http://www.laszlosystems.com/lps-2.2/docs/reference/index.html

[antun]

There isn't a standard split-pane component, but your approach is intuitive and it should work well. What do you mean by a lack of smoothness - can you elaborate?

-Antun

[binil]

Thanks for replying, Antun & Adam.

What I mean by lack of smoothness is that when I drag the "splitter", for a brief period of time, it shows up as a zig-zag line .. I mean, it does move along as a whole. When I release the mouse (at the end of the drag motion), it becomes a straight line again though.

Thanks,
Binil

[antun]

Could you post some of your splitter code?

-Antun

[binil]

Thanks Antun for your interest. Here is the code :

<canvas width="1000" height="500" bgcolor="white" debug="true">
<debug/>
<view width="${canvas.width}" height="${canvas.height}">
<view id="left" bgcolor="yellow"
width="${splitter.x}"
height="${parent.height}"/>

<view id="splitter" bgcolor="gray"
width="8" height="${parent.height}"
x="250" y="0"
onmousedown="this.dragger.apply()"
onmouseup="this.dragger.remove()">
<dragstate name="dragger"
drag_min_x="0"
drag_max_x="$once{canvas.width - splitter.width}"
drag_axis="x"/>
</view>

<view id="right" bgcolor="blue"
x="255" height="${parent.height}" options="releasetolayout"/>

<resizelayout axis="x"/>
</view>
</canvas>


Thanks,
Binil

[adam]

You've taken a sensible approach, but I bet the problem is that both the layout and the dragstate are setting the x position of the splitter.

The easiest way to fix this would be to delete the layout and use an additional constraint on the right side, like this:

<view id="right" bgcolor="blue"
height="${parent.height}"
x="${splitter.x + splitter.width}"
width="${ parent.parent.width - x}"/>