dynamic window box creation

[shesh91]

<canvas height="300" >
<include href="lz/" />

<modaldialog name="RootWindow" height="80" width="80">
<button name="winbutton" text="Test">
<method event="onclick">
var c = new PopupWindow(canvas, {title:'popupbutton', height:200, width:200});
</method>
</button>
</modaldialog>

<class name="MainWindow" extends="windowpanel" height="80" width="80">
<button name="winbutton" text="Test">
<method event="onclick">
</method>
</button>
</class>

<class name="PopupWindow" extends="windowpanel" width="160" height="160">
<view align="right" layout="axis:y">
<edittext id="textbox"></edittext>
<button isdefault="true">OK
<method event="onclick">
canvas.mywindow.winbutton.setAttribute('text', textbox.getText());
parent.parent.close();
</method>
</button>
<button>Child
<method event="onclick">
var c = new window(canvas, {title:'popupbutton', height:200, width:200} );
parent.parent.close();
</method>
</button>
</view>
<simplelayout spacing="5"/>
</class>


<button name="b1" text="Create Root" x="30" y="50">
<method event="onclick">
canvas.RootWindow.open();
</method>
</button>

</canvas>

Hi All,

I have coded this code snippet.
My actual requirement is..
1) On click of CreateRoot Button a window should open
Say for ex "Root"
2) The window ie Root will be having a button in that.
3) On clicking the button of that window a new Pop up window should appear and that window will have a textbox and two boxes "OK" and "Child"
4) On providing some text in the text button and on clicking OK that text should be set to the button in the Root window.
5)On clicking on "Child" another window should open which will have the similar functionality as Root.
ie I can name that window and from that window can populate another window and so on.

As creating of Windows are dynamic I thought that I can use new Operator to create instance of windows on some action.

Anyone please provide some solution to this..

With Regards
Sesh

[antun]

I just changed your modal window to a regular window (since modal windows retain modality until they're closed). I also re-addressed


<canvas width="1000" height="1000" debug="true">
<include href="lz/" />
<window name="RootWindow"
height="80"
width="80"
visible="false">
<button name="winbutton"
text="Test">
<method event="onclick">var c = new PopupWindow(canvas,
{title:'popupbutton', height:200, width:200});</method>
</button>
</window>

<class name="PopupWindow"
extends="windowpanel"
width="160"
height="160">
<view align="right"
layout="axis:y">
<edittext name="textbox"></edittext>
<button isdefault="true">OK
<method event="onclick">
var newText = parent.textbox.getText();
RootWindow.winbutton.setAttribute('text', newText);
parent.parent.setVisible( false );
</method>
</button>
<button>Child
<method event="onclick">
var c = new window(canvas, {title:'popupbutton',
height:200, width:200} );
parent.parent.close();
</method>
</button>
</view>
<simplelayout spacing="5" />
</class>
<button name="b1"
text="Create Root"
x="30"
y="50">
<method event="onclick">
canvas.RootWindow.setVisible( true );
</method>
</button>
</canvas>


By the way, if you instantiate a view from script, e.g.


var foo = new view();


foo is a pointer to that view. You can also reference a view using its parent's subviews array:


var pointerToView = canvas.subviews[0];


I belive you can give a view a name when you instatiate it in the object that contains parameters. To refer to a view by name, I think you can reference it by associative array (canvas['myview']).

-Antun

[shesh91]

Thanks Antun for that code snippet..
Now I have recoded the same.

But I am not able to fulfill one requirement in this.
As I mentioned earlier,
1) Click event of Root button will create a Window say MainWindow with a button in it.
2) On click of that Root button a pop up window with a Text Field and 2 buttons OK and CHILD will appear.
3) The value of the text provided will be assigned to the button in the MainWindow after clicking on the OK button.
4) When we click on CHILD another window should appear which will be similar to that of MainWindow.
In the same way this will also have a pop up property so that we can name this child window and/or create child windows from this.

Yesterdays code snippet only set the value to the MainWindow even if you provide the value in the popup window of the child. This is because we have hard coded that saying
RootWindow.winbutton.setAttribute('text', newText);
But thats not the actual thing required.
The pop up window of child must be used to assign a name to the child and not for the parent.

I tried few things to fulfill the requirement, but not able to.
Here the code snippet is not setting the text value to the window.
I want that to be a generalized thing.

Hope you understood my requirement.

<canvas width="1000" height="1000" debug="true">
<include href="lz/" />

<class name="ChildWindow" extends="window" width="80" height="80">
<button name="winbutton1">
<method event="onclick">
var c = new PopupWindow(canvas, {height:200, width:200});
</method>
</button>
</class>

<class name="PopupWindow"
extends="windowpanel"
width="160"
height="160">
<view align="right"
layout="axis:y">
<edittext name="textbox"></edittext>
<button name="okbutton" isdefault="true">OK
<method event="onclick">
var newText = parent.textbox.getText();
debug.write(this.parent.parent);
parent.parent.setVisible( false );
</method>
</button>
<button>Child
<method event="onclick">
var c = new ChildWindow(canvas, {title:'popupbutton',height:80, width:80} );
parent.parent.close();
</method>
</button>
</view>
<simplelayout spacing="5" />
</class>

<button name="b1" text="Root" x="70" y="50">
<method event="onclick">
var c = new ChildWindow(canvas, {title:'popupbutton',height:80, width:80} );
</method>
</button>
</canvas>

With Regards
Sesh

[antun]

Now I understand what the problem is. You want to know how to pass pointers to views around in LZX.

There's a couple of ways you could do that in this scenario:

1) The "right" way. In the PopupWindow class declare an attribute that will be a pointer to some view:


<class name="PopupWindow"
extends="windowpanel"
width="160"
height="160">
<attribute name="viewToAffect" type="expression" />
...


Then when you instantiate that class, pass a pointer to the view into its constructor function:


var c = new PopupWindow(canvas, {title:'popupbutton',
height:200,
width:200,
viewToAffect:RootWindow.winbutton});


Then you could reference the view that was passed in from anywhere in the PopupWindow class:


classroot.viewToAffect.setAttribute('text', newText);


Now if you had just instantiated that the RootWindow class, you could pass the variable b into the constructor function for the PopupWindow:


var b = new window( canvas, {height:80,width:80} );
var c = new PopupWindow(canvas, {title:'popupbutton',
height:200,
width:200,
viewToAffect:b});


2) The quick 'n easy way: You could always store a pointer as a global variable, e.g.


canvas.targetWindow = new window( canvas, {height:80,width:80} );

or

canvas.targetWindow = RootWindow.winbutton;


Finally, don't forget that you can also give a view a name no matter how you instantiate it (whether you use the constructor function or the tag), and reference it as follows:


<canvas debug="true">
<script>
var foo = new LzView( canvas, {width:50, height:50,
x:50, y:100,
bgcolor: "red",
name:"myview"} );
</script>

<button>Make window red
<method event="onclick">
var nameOfView = "myview";
canvas[nameOfView].setAttribute( 'bgcolor', 0xff0000 );
</method>
</button>
</canvas>


Just to reiterate: LZX is designed to be a declarative language, so instantiating views from script is not the recommended method for creating Laszlo apps. Of course, from time to time you need to create views on-the-fly, and that's why it is supported.

-Antun

[jsundman]

Running the last program above shows a black square, not a red one. The color asignment

bgcolor: "red";

doesn't work. In fact, whatever color name you put there will show up as black.

To set the bgcolor in script, use the CSS color number, without quotation marks. For example,

bgcolor: 0xcccc00

(which is an ugly yellow:p )