Instantiating views with script

[antun]

Views (and just about any other LZX element) can be instantiated using the new keyword from script:


<canvas>
<class name="mySmiley" resource="smiley.png" />

<simplelayout axis="y" spacing="5" />

<view id="container" width="400" height="300" />

<button>
Add a Smiley
<method event="onclick">
var newX = getRandomPosition( container.width );
var newY = getRandomPosition( container.height );
var smileyPointer = new mySmiley( container, { x: newX } );
smileyPointer.setAttribute( 'y', newY );
</method>

<method name="getRandomPosition" args="max">
return Math.round( Math.random() * max );
</method>
</button>
</canvas>


Attributes can either be declared in the curly braces, or you can use the pointer that the new keyword returns (that's why the x and y attributes are set differently in the above example).

Remember that you may need to explicitly include ready-made components if you instantiate them with script.

Enjoy!

[tspratt]

In your example, you "new" a class (MySmiley).

But I can't "new" a view. The following des not work:
var lznodeNew = new view(canvas,
{
id : "test",
x : "10",
y : "10",
width : "200",
height : "200",
bgcolor : 0xC0C0C0
}
);

However, if I change it to: ... new LZView(... it works.

What are the rules and limitations? Can I "new" "text", "inputtext", etc?

[antun]

You can new a view, just like you discovered (LzView). If you look at the LZX Reference page for view, you'll see that LzView is the script representation of the <view> tag.

Most of the Laszlo Foundation Classes that have both a tag and a class work like this. The classes that you write yourself (and components), which are built using LFCs, can be instantiated by whatever name you gave them.

-Antun

[tspratt]

Thanks!

[sniemetz]

Views (and just about any other LZX element) can be instantiated using the new keyword from script:


Antun - got that -- but how do I dynamically create nested elements? Ie, a view, then place a text element inside it?

[Jabberwock]

(This might be a little late, but...) Just specify the view you just created.

Say you're building the first view on the canvas.

new LzView(canvas, {name:"foo", width:"40", height:"40", x:"2", y:"10"});
new LzText(canvas.foo, {text:"Hello.", width:"40", height:"10", x:"10"});