Window Component... (setting the title at runtime, move constraints, etc...)

[TheCatWhisperer]

A couple questions:


Is there a way to set the title of a window component AFTER the app is on the screen (runtime)?? We need this for our app, is something we can currently do in JS.
Is there an easy way to constrain a window to nly be moved around the canvase, (ie not off the sides/bottom)???


/c

[antun]

In LZX, if an attribute does not have a setter method (i.e. setTitle()) you can use setAttribute to change that attribute:


mywin.setAttribute( "title", "My New Title" );


This will work in a well-made component, because the text in the text field that is the title will be constrained to the value of the title attribute.

I'm going to look into constraining the draggable area, and let you know.

-Antun

[antun]

OK, I've got it. There isn't a quick setting that you can do, but because of LZX'es object-oriented nature, it's not too hard to get this effect.

For a start, you should understand that all Laszlo components are written in LZX. There's no magic. That means you can look at the code to see how they were made. It also means that you can extend them, and overwrite different parts of them.

First of all, I decided that I wanted to keep all the default window behaviors and properties, but I just wanted to overwrite its drag behavior. I looked through a bunch of files in /WEB-INF/lps/components, and found that the core dragging behavior in the standard window is defined in the basewindow class in base/basewindow.lzx.

I copied and pasted that into a new class which exteds window, which causes it to overwrite the default dragstate behavior of my new class. I used the core Math object functions min() and max() to limit the drag x and y coordinates to within the bounding box of the canvas:


<canvas width="800" height="800">

<class name="mywin" extends="window">
<state name="_windowdrag">
<attribute name="starty" value="$once{this.y}"/>
<attribute name="startx" value="$once{this.x}"/>
<attribute name="ydoffset" value="this.getMouse( 'y' )"
when="once" />
<attribute name="xdoffset" value="this.getMouse( 'x' )"
when="once" />
<attribute name="y"
value="${Math.min(
canvas.height-this.height,
Math.max(
0,
setDragPos('y',this.immediateParent.getMouse('y'))
)
)}"/>
<attribute name="x"
value="${Math.min(
canvas.width-this.width,
Math.max(
0,
setDragPos('x',this.immediateParent.getMouse('x'))
)
)}"/>
<method name="setDragPos" args="xory, mousepos"> <![CDATA[
newpos = mousepos - this[xory + 'doffset'];
diff = this[xory] - this['start' + xory];
if (Math.abs(diff) > 3) {
setAttribute('state', 3);
}
return newpos;
]]> </method>
</state>
</class>

<mywin width="300" height="300" title="mywin">
<dragstate name="dragger" drag_axis="x"/>
</mywin>

</canvas>


Hope this helps!

-Antun

Originally posted by TheCatWhisperer
A couple questions:


Is there an easy way to constrain a window to nly be moved around the canvase, (ie not off the sides/bottom)???


/c

[metasarah]

Here's a shorter version:

<canvas width="800" height="800">

<class name="mywin" extends="window">
<dragstate name="_windowdrag"
drag_min_x="0"
drag_max_x="$once{canvas.width - this.width}"
drag_min_y="0"
drag_max_y="$once{canvas.height - this.height}"/>
</class>

<mywin width="300" height="300" title="mywin"/>

</canvas>

in v2, we've updated the dragstate to be more flexible so you can parameterize bounds or axis.

Sarah