Creating Tree Structure using Laszlo

[shesh91]

Please find the attached file which comprise of few questions which we are in required.

[antun]

Hi there

I've copied and answered your questions below:


1. I went through the tutorials and documents. But still not able to figure out which object I have to extend to get a box like structure. Over that only the end user is going to set the properties for that box, which is not a pre-defined one. Adding to that how can I link a parent node with a child node.

On Right Click we have to set the properties for that box including its Name.

Here Increase Profits is the Parent Node and Increase Revenue is the Child Node. And relation is shown using the arrowed line.

These things have to happen in the Client side.

How we can achieve this using Laszlo. Some sample code on this will help us for better understanding.


From the photo in the document you attached, it looks like what you want is a dialog box. You could use a <window />:

http://www.laszlosystems.com/lps-2.1/docs/lzx-reference/?lz-window.html

You could also create your own dialog box. All you would need is a resource (PNG, GIF, JPG or SWF) for the background.


2. As per discussions at present Laszlo doesn't support us to embed MS_Objects. But while explaining this the technical team of Laszlo suggested that we can achieve this by scripts and html coding. A sample code will be helpful for us.


I don't understand. What exactly do you mean by MS_Object?


3. Same as above how we can embed graphs and charts to Laszlo. One more to add to this is, its not just for display purpose, User will also be able to play on with that. As per discussion, Laszlo’s present version is not supporting this. Any alternative approach for this.


You can draw bar charts and scatter graphs fairly easily in Laszlo, for example:


<canvas debug="true">
<dataset name="myds">
<myrootnode>
<mybar color="0xff0000" val="100" />
<mybar color="0x00ff00" val="75" />
<mybar color="0x0000ff" val="32" />
<mybar color="0xffccaa" val="65" />
<mybar color="0x00ffff" val="80" />
</myrootnode>
</dataset>


<class name="bar" width="40" bgcolor="yellow">
<method event="ondata">
var bgcol = parseInt( this.datapath.p.getAttr("color") );
this.setAttribute( "bgcolor", bgcol );
</method>
</class>


<view datapath="myds:/myrootnode" height="100" x="20" y="20">
<simplelayout axis="x" spacing="10" />
<bar datapath="mybar" valign="bottom" height="$path{'@val'}" />
</view>
</canvas>


Since the chart is bound to data, it will update if the data is changed, and you could write it so that it can be manipulated at run-time by the user.

If you wanted more complex charting abilities, you could use a server-side chart generation tool, that returned a grapic file. You could then load that into your app at run-time using view.setSource(). That would not allow you to play with the graph however.

-Antun

[antun]

Adding to that how can I link a parent node with a child node.

Do you mean data nodes or LZX nodes?

-Antun

[shesh91]

Thanks Antun for your response and solution.

1) Regarding the construction of Tree. You have mentioned that we can use <Window> to get the desired result. Yeah its possible for me to draw a dialog box like that. The main thing is the requirement is some what hectic. Let me explain the requirement process in steps..

Step 1) The client will first see only an empty page with a single button saying create Root
Step 2) On clicking on the Create Root a box should appear in the screen, which will be the Root Node. On clicking on the Box a Pop up window must appear on which we will have some pre defined properties that can be set to that box. Also the box is named using the Pop up menu.
Step 3)Now on right click on the Box again we have to open a pop up menu which will say Create a child node.
Step 4) On selection of that, another box should appear and again we can set properties for that box.This box is the Child Node.
Step 5) When the Child node is created a linkage(a arrowed line) must be created between the Root node and the Child node automatically. Root Node, Child Node and the linkage line must be grouped so that if user drags the nodes the line should not break.
Step 6) In the same way User can create multiple nodes on the screen.

So as per the requirement creation of this Tree structure happens on the Client Side. How I can create such a Tree Structure in Client side without hitting the server again and again using Laszlo.
I hope us understood the requirment.

2)I want to embed Excel Sheet and PowerPointPresentations in my application. On some action we have to open those. And one main thing is, we will perform some calculations on the excel sheet and those values must be captured back by our Laszlo application after such calculations.

3) Regarding graphs.... I need to show line diagrams with fetching datas from the database. So the actual requirement is at a time I will show two or more line graphs and those graphs will help in generating a new graph on the client side which will take data from the other graphs displayed.

I hope I have explained my requirements in detail.
The main concern in my requirement is everything has to be done on the client side. Its not just fetching data from server and displaying something to the user.
User is going to do everything dynamically.
So it would be nice if some one gives me idea how I can go on with this and if so some code snippet will be helpful.

With Regards
Sesh

[Anusha]

Hi,

If you want to create a tree stucture in the client side, then it is possible only by using client side coding such as javascript.
But I think, its really a cumbersome to create such a thing.
Again adding to that, the question is how we can incorporate javascript with Laszlo to get the Laszlo look and feel..

Any idea from Lazlo Experts...?

Anush

[ankitrastogi]

Hi ,


In this thread above Antun mentioned --

"If you wanted more complex charting abilities, you could use a server-side chart generation tool, that returned a grapic file. You could then load that into your app at run-time using view.setSource(). That would not allow you to play with the graph however.
-Antun"

Which are such chart generation tools.

I would like to know how at runtime should I render such an image which is generated using jfreecharts at that instant based on some previous client request. It uses savedToPNG format and placed in the local folder of my machine running tomcat container +LPS. The servlet which does all this responds with a xml conatining the name and path of png image created.

My problem is how to do setSource() to such a resource in laslzo code. I think setSource expects it on http. while it is in filesystem

Here is my code.
<?xml version="1.0" encoding="UTF-8" ?>
<canvas width="400" height="300" debug="true">
<dataset name="Graph" src="http://localhost:8080/testWeb/ChartTest" request="false"/>
<datapointer xpath="Graph:/*[1]">
<method event="ondata">
<![CDATA[
Debug.write("fetching image path");
var img = this.xpathQuery('/imagexml/filepath/text()');
Debug.write("image path retreived",img);
canvas.mainView.imageView.setSource(img);
]]>
</method>
</datapointer>
<view name="mainView" x="10" y="50" bgcolor="0xd5b1da">
<simplelayout axis="y" spacing="10"/>
<button text="Click me">
<method event="onclick">
Graph.doRequest();
Debug.write("image created");
</method>
</button>
<view name="imageView"/>
<view height="10" bgcolor="0x369fde"/>
</view>
</canvas>

thanks,
Ankit.

[antun]

Please note that things have changed since this thread was originally started. OpenLaszlo 3.1.1 (the current release) has graphing components.

I don't know any open source graphing packages off the top of my head, but all the financial sites (Yahoo, etc.) use server-side graph generation.

Which are such chart generation tools.

Yes, setSource must take an HTTP path, although it can be relative.

My problem is how to do setSource() to such a resource in laslzo code. I think setSource expects it on http. while it is in filesystem

Take care,

Antun

[ankitrastogi]

Thanks for the reply Antun.

When I set a relative path to setSource for a view it prepends context root in that path and doesn't understand relative ../.. or .. kind of path.

e.g

<dataset name="Graph" src="http://localhost:8080/testWeb/ChartTest" request="false"/>
<datapointer xpath="Graph:/*[1]">
<method event="ondata">
<![CDATA[Debug.write("fetching image path");
var name = this.xpathQuery('/imagexml/filepath/text()');
Debug.write("image name retrieved",name);
var imgpath='../../Server/tomcat-5.0.24/temp/'+ name;
Debug.write("image path created",imgpath);
canvas.mainView.imageView.setSource(imgpath);
]]>
</method>
</datapointer>

Here in Debug window i get data source error stating --

http://localhost:8080/laszloWeb/../../Server/tomcat-5.0.24/temp/jfreechart1234.png


So the relative path directly appends to the current context root as such and I am unable to reach to a dir e.g C:\Program Files\OpenLaszlo Server 3.1\Server\tomcat-5.0.24\temp from it.

Regards,
Ankit.