What is AJAX? AJAX = Asynchronous JavaScript and XML In this tutorial, we will make an application for asynchronous calling.

The simplest way for asynchronous calling in Sigma Visual is to use function linb.request. Its definition can be found at http://www.sigmawidgets.com/products/sigma_visual/API/index.html#linb.request. It's declared like the following line. JavaScript CodeCopy To Clipboard

request ( uri, query, onSuccess, onFail, threadid, options );

request ( uri, query, onSuccess

It's a little complex because it takes 6 parameters. Don't worry about that. For simple code, the first three parameters are enough.

uri: The URL of the request target. For example, "http://www.google.com/". query: This is web request parameters pairs. For example, "{para1:1,para2:2}".That will get the same result as we input http://www.google.com/?para1=1&para2=2 in the browser. onSuccess: A function to be executed whenever a request is done successfully. I will explain this function later. But now let's make an application first.

[Req Spec]

1. A dialog window and a button are needed. 2. When end user clicks button, content of another html file will be retrieved and put into dialog window.
[Do It Yourself]

1. Drag a [Dialog] to design areaset its alias to "dialog1"(Click dialog window to select it, type "dialog1" in [Component Config Window]->[alias]and strike [Enter] on keyboard. ) 2. Drag a [Button] to design area. 3. Prepare a file named hello.html to http://localhost/hello.html. It reads HTML CodeCopy To Clipboard

<h1>Hello, the world</h1> <p>this is my first AJAX application with Sigma Visual</p>

<h1>Hello, the world</h1> <p>this is my first AJAX applica

4. Add event handler for button being clicking. (Click button to select itclick on right side of [Component Config Window]->[events]->[onClick]a small button will appear. Click this button, a dialog box will pop up.) 5. You will see the following lines in the dialog

JavaScript CodeCopy To Clipboard

function (profile, e, src, value) { }

function (profile, e, src, value) { }

6. In the handler, we will call linb.request. Let's have a look of code snippet. JavaScript CodeCopy To Clipboard

linb.request( "http://localhost/hello.html", null, function(rep){ me.dialog1.setHtml(rep); });

null, function(rep){ me.dialog1.setHtml(r });

The first parameter, "http://localhost/hello.html", is what we will get synchronously. The second parameter, the url parameters pairs, is set to null because hello.html is a static html file, not a php file or something else. The third parameter is function, which will change inner html of dialog1 by calling setHtml(). Variable rep is the result of asynchronous calling to hello.html. 7. Something interesting is that we store variable this to a variable, me. It is a must because variable this in Javascript is quite different from the one in c++/java. You could get more knowledge by search "this in javascript" in google.The whole code looks like JavaScript CodeCopy To Clipboard

function (profile, e, src, value) { me = this; linb.request( "http://localhost/hello.html", null, function(rep, type){ me.dialog1.setHtml(rep); }); }

function (profile, e, src, value) { me = this; linb.request( "http://localhost/hello.ht

8. Click [OK] to close dialog. 9. Press [run] to see the result. Tutorial 3 - First Sight Of Sigma Visual Tree Grid on: January 21, 2009, 10:16:21 PM When it comes to database, we can't do without grid component. Sigma Visual builder offers a very powerful grid for data sorting, grouping, paging, filtering and so on. Let's drag a [treegrid] to design area. It brings grid header with 4 columns and 3 rows as example data when created. Let's have a look of table header. You can get/change header info like this.(Click [treegrid] to select itclick on right side of [Component Config Window]>[properties]->[header]a small button will appear. Click this button, a dialog box will pop up). The code in popup dialog reads JavaScript CodeCopy To Clipboard

[{ "id" : "col1", //id is an identifie "width" : 80, //width of one co /*this is for column edit.

[{ "id" : "col1", //id is an identifier of one column "width" : 80, //width of one column /*this is for column edit. It specified to "label" so end user can't edit it or to "input" or "comboinput" for editable.*/ "type" : "label", "caption" : "col1" //Caption of column }, ...]

Code above is for one column only, I omit the last three ones.Let't have a look of table rows. (Click [treegrid] to select itclick on right side of [Component Config Window]->[properties]->[header]a small button will appear. Click this button, a dialog box will pop up). The row code in popup dialog reads JavaScript CodeCopy To Clipboard

[{ "cells" : [{ "value" : "row1 col1" }, { "value" : "row1 col2" }, {


[{

"value" : "row1 col3" }, { "value" : "row1 col4" }], "id" : "d" } ... { "cells" : [{ "value" : "row3 col1" }, { "value" : "row3 col2" }, { "value" : "row3 col3" }, { "value" : "row3 col4" }], "sub" : [["sub1","sub2","sub3","sub4"]], "id" : "f" }]

"cells" : [{ "value" : "row1 col1" },

It looks a little complex because treegrid could support very complex data presentation. Let's simplfy it first. By far a 2d array is enough for us. Delete all the codes in code dialog. Just input the following 4 line. JavaScript CodeCopy To Clipboard

[ ["sub11","sub12","sub13","sub14"], ["sub21","sub22","sub23","sub24"] ]

[ ["sub11","sub12","sub13","sub1 ["sub21","sub22","sub23","sub2 ]

What happen after you close dialog by clicking [OK]. Content of treegrid changes. Only two lines left. Actually we could make this change by coding.Let's get started with this application.

[Req Spec] 1. A treegrid and a button are needed. 2. When end user click button, treegrid shows two rows. [Do It Yourself] Drag an [treeGrid] to design area, set [alias] to "treegrid1"(Click [input] to select it, type "treegrid1" in [Component Config Window]->[alias]and strike [Enter] on keyboard). 2. Drag a [Button] to design area. 3. Add event handler for button being clicking. (Click button to select itclick on right side of [Component Config Window]->[events]->[onClick]a small button will appear. Click this button, a dialog box will pop up.) 4. You will see the following lines in the dialog JavaScript CodeCopy To Clipboard

function (profile, e, src, value) { }

function (profile, e, src, value) { }

5.Add code like this. JavaScript CodeCopy To Clipboard

function (profile, e, src, value) { var mydata = [ ["sub11","sub12","sub13","sub14"], ["sub21","sub22","sub23","sub24"] ]; this.treegrid1.setRows(mydata); }

function (profile, e, src, value) { var mydata = [ ["sub11","sub12","sub13","su ["sub21","sub22","sub23","su

6. Click [OK] to close dialog. 7. Press [run] to see the result.

Tutorial 4 - Display Data In Real Database on: January 22, 2009, 12:51:39 AM With experience of Tutorial 2 & Tutorial 3, you may have some rough idea of how to display data in real database. You don't know? Let me give you some sparkles. If we change hello.html content from HTML CodeCopy To Clipboard

<h1>Hello, the world</h1> <p>this is my first sample of longoo</p>

<h1>Hello, the world</h1> <p>this is my first sample of lon

to JavaScript CodeCopy To Clipboard

[ ["sub11","sub12","sub13","su ["sub21","sub22","sub23","su ];

[ ["sub11","sub12","sub13","sub14"], ["sub21","sub22","sub23","sub24"] ];

Can you get it? Here we go.

[Req Spec]

1. A treegrid and a button are needed. 2. When end user click button, treegrid shows rows in database.
[Do It Yourself]

1. Firstly, prepare a file named hello.php to http://localhost/hello.php. It reads PHP CodeCopy To Clipboard

<?php header("Content-Type:text/javascript; charset=utf-8"); echo "["; echo " [\"sub11\",\"sub12\",\"sub13\",\"sub14\"],"; echo " [\"sub21\",\"sub22\",\"sub23\",\"sub24\"]"; echo "]"; ?>

<?php header("Content-Type:text/javas echo "["; echo " [\"sub11\",\"sub12\",\"s

2. Drag a [treeGrid] to design areaset its alias to "treegrid1"(Click dialog window to select it, type "treegrid1" in [Component Config Window]->[alias]and strike [Enter] on keyboard. ) 3. Drag a [Button] to design area. 4. Add event handler for button being clicking. (Click [input] to select itclick on right side of [Component Config Window]->[events]->[onClick]a small button will

appear. Click this button, a dialog box will pop up.) 5. You will see the following lines in the dialog JavaScript CodeCopy To Clipboard

function (profile, e, src, value) { }

function (profile, e, src, value) { }

6. In the handler, we will call linb.request. JavaScript CodeCopy To Clipboard

linb.request( "http://localhost/hello.php", null, function(rep){ //you will get result of hello.php in varble rep. });

linb.request( "http://localhost/hello.ph null, function(rep){

7. Do you remember function treegrid1.setRows? A very important thing I have to say is rep above is string in type. So we need to convert it to 2d array object. Function _.unserialize is introducted here (also see http://www.sigmawidgets.com/products/sigma_visual/API/index.html#_.unserialize). JavaScript CodeCopy To Clipboard

_.unserialize (str, dateformat)

_.unserialize (str, dateformat)

This function can help you convert string to Javascript object. It takes two parameters. We could ignore the second parameter because we have no date variables to deal with. Think of the following code. JavaScript CodeCopy To Clipboard

var str = "{name:'tom', age:25}"; var tom = _.unserialize(str); alert(tom.age);

var str = "{name:'tom', age:25}"; var tom = _.unserialize(str); alert(tom.age);

The lines will popup an alter box say 25. 8. After you understand unserialize, We could complete code look like JavaScript CodeCopy To Clipboard

function (profile, e, src, value) { me = this; linb.request( "http://localhost/hello.php", null, function(rep){ var obj = _.unserialize(rep); me.treegrid1.setRows(obj); } ); }
function (profile, e, src, val me = this; linb.request( "http://localhost/hello.

9. Click [OK] to close dialog. 10. Press [run] to see the result. The above sample show us a way to communicate with server side. The left thing is just change hello.php and retrieve real data from database. Simply create a database named testdb and execute the following sql. SQL CodeCopy To Clipboard

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; --- Database: `testdb` --- ---------------------------------------------------------- Table structure for table `tutorial4` -CREATE TABLE `tutorial4` ( `field1` varchar(15) NOT NULL, `field2` varchar(15) NOT NULL,

`field3` varchar(15) NOT NULL, `field4` varchar(15) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; --- Dumping data for table `tutorial4` -INSERT INTO `tutorial4` (`field1`, `field2`, `field3`, `field4`) VALUES ('value1-1', 'value1-2', 'value1-3', 'value1-4'), ('value2-1', 'value2-2', 'value2-3', 'value2-4');

SET SQL_MODE="NO_AUTO_ --- Database: `testdb`

And change hello.php to the following code. If you don't understand it, you need more knowledge on php instead of Sigma Visual builder. PHP CodeCopy To Clipboard

<?php header("Content-Type:text/javascript; charset=utf-8"); mysql_connect("localhost","root","") or die("Could not connect: " . mysql_error()); mysql_select_db("testdb") or die("Could not select database: " . mysql_error()); $sql = "select field1,field2,field3,field4 from tutorial4"; $handle = mysql_query($sql); $retArray = array(); while ($row = mysql_fetch_array($handle,MYSQL_NUM)) { $retArray[] = $row; } echo json_encode($retArray); ?>

<?php header("Content-Type:text/javas mysql_connect("localhost","root die("Could not connect: " . m

Last Edit: March 13, 2009, 12:51:30 AM by steven

Tutorial 5 - Drag & Drop on: January 22, 2009, 01:41:55 AM

Drag & Drop is a very interesting thing, I guess it could be a feature of web2.0. With Sigma Visual builder, you can add this feature without any code. Before we do something, we need to know two properties, dragKey and dropKeys. A lot of Sigma Visual components have these two properties. Just remember one thing, components with dragKey ABC could only be dragged into those components with dropKeys containing ABC. Take the following table for example ---------------------------|dragKey|dropKeys| --------------------------ComponentA|AA | | ---------------------------ComponentB| |AA | ---------------------------ComponentC| |AA:BB | ---------------------------ComponentD| |CC:BB | ---------------------------ComponentA can be dragged and dropped into ComponentB and ComponentC, but not into ComponentD. ComponentD accepts components with CC or BB as their dragKey.
[Req Spec]

1. Two lists are needed. 2. End user could drag one item from one to another.
[Do It Yourself]

1. Drag a to design areaset its dragKey to "apple"(Click to select it, type "apple" in [Component Config Window]->[properties]->[dragKey]and strike [Enter] on keyboard. ) 2. Drag another to design areaset its dropKeys to "apple:pear"(Click to select it, type "apple:pear" in [Component Config Window]->[properties]->[dropKeys]and strike [Enter] on keyboard. ) 3. Press [run] to see the result. You could drag item from first to second, but can't from second to first list.
[Conclusion]

1. dragKey could be any string without colon( : ). 2. dropKeys could be a combination of dragKey splitted by colon( : ). 3. components with dragKey ABC could only be dragged into those components with dropKeys containing ABC. 4. Dragging & dropping could be performed between different type of components, for instant, from list to radiobox.[/list][/list][/list][/list]

 Last Edit: March 13, 2009, 01:39:53 AM by steven -Tutorial 6 - Load Tree Node From Real Database Dynamically on: February 01, 2009, 09:39:31 PM With experience of Tutorial 4, you have known how to display data from real database in a grid. In this section, we will continue to learn how to load data from database into a tree.
[Req Spec]

1. A tree is needed. 2. When end user click on a node, its children nodes will be retrieved and displayed.
[Do It Yourself]

We need prepare a data table first. If you don't know how to store a tree in one data table, I can tell you. We assume every record in table is for one node. You need two columns for each record to describe their relationship. One is id, another is its parent id. Since root node has no parent, we assume its parent to be a negative value. Simply create a database named testdb and execute the following sql. SQL CodeCopy To Clipboard

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; --- Database: `testdb` --- -------------------------------------------------------CREATE TABLE `tutorial6` ( `id` smallint(6) NOT NULL auto_increment, `pid` smallint(6) NOT NULL, `sub` tinyint(1) NOT NULL default '0', `value` varchar(15) NOT NULL default '-', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT= --- Dumping data for table `tutorial6` -INSERT INTO `tutorial6` (`id`, `pid`, `sub`, `value`) VALUES (1, -1, 1, 'Computer'), (2, 1, 1, 'hardware'),

13 ;

(3, 1, 1, 'software'), (4, 2, 0, 'screen'), (5, 2, 0, 'keyboard'), (6, 2, 0, 'mouse'), (7, 2, 0, 'hard disk'), (8, 3, 0, 'Windows'), (9, 3, 1, 'Linux'), (10, 3, 0, 'Mac'), (11, 9, 0, 'read hat'), (12, 9, 0, 'blue point');

SET SQL_MODE="NO_AUTO_ --- Database: `testdb`

1. Firstly, prepare a file named treenode.php to http://localhost/treenode.php. This php script take a parent id as a parameter and return their children nodes. It reads PHP CodeCopy To Clipboard

<?php header("Content-Type:text/javascript; charset=utf-8"); mysql_connect("localhost","root","") or die("Could not connect: " . mysql_error()); mysql_select_db("testdb") or die("Could not select database: " . mysql_error()); $pid = $_GET["pid"]?$_GET["pid"]:-1; $sql = "select id, sub, value as caption from tutorial6 where pid =" . $pid; $handle = mysql_query($sql); $retArray = array(); while ($row = mysql_fetch_object($handle)) { $row->sub = ($row->sub==0)?false:true; $retArray[] = $row; } echo json_encode($retArray); ?>

<?php header("Content-Type:text/javas mysql_connect("localhost","root die("Could not connect: " . m

2. Drag a [treeBar] to design areaset its alias to "treebar1"(Click dialog window to select it, type "treebar1" in [Component Config Window]->[alias]and strike [Enter] on keyboard. ) 3. Change its initial nodes. (Click [treebar1] to select itclick on right side of

[Component Config Window]->[properties]->[items]a small button will appear. Click this button, a dialog box will pop up.) The popup is saying JavaScript CodeCopy To Clipboard

[{ "id" : "item a", "sub" : ["sub a1","sub a2","su "caption" : "item a"

[{ "id" : "item a", "sub" : ["sub a1","sub a2","sub a3","sub a4"], "caption" : "item a" }, { "id" : "item b", "sub" : ["sub b1","sub b2","sub b3","sub b4"], "caption" : "item b" }]

Change it to the following line. Make sure set "sub" to true. That means is a parent node, but its children info is not known. When end user expand this node, onGetContent will be fired. JavaScript CodeCopy To Clipboard

[{ "id" : "1", "sub" : true, "caption" : "Computer"

[{ "id" : "1", "sub" : true, "caption" : "Computer" }]

4. Add event handler for parent node being expanded. (Click [treebar1] to select itclick on right side of [Component Config Window]->[events]>[onGetContent]a small button will appear. Click this button, a dialog box will pop up.) 5. You will see the following lines in the dialog JavaScript CodeCopy To Clipboard

function (profile, item, callback, threadid) { }

function (profile, item, callback, }

6. In the handler, we will call linb.request. JavaScript CodeCopy To Clipboard

linb.request( "http://localhost/treenode.php", null, function(rep){ //you will get result of treenode.php in varble rep. });

linb.request( "http://localhost/treenod null, function(rep){

7. A very important thing I have to say is rep above is string in type. So we need to convert it to nodes array. Function _.unserialize is introducted here (also see http://www.sigmawidgets.com/products/sigma_visual/API/index.html#_.unserialize). _.unserialize (str, dateformat) This function can help you convert string to Javascript object. It takes two parameters. We could ignore the second parameter because we have no date variables to deal with. Think of the following code. JavaScript CodeCopy To Clipboard

var str = "{name:'tom', age:25}"; var tom = _.unserialize(str); alter(tom.age);

var str = "{name:'tom', age:25}"; var tom = _.unserialize(str); alter(tom.age);

The lines will popup an alter box saying 25. 8. After you understand unserialize, We could complete code look like JavaScript CodeCopy To Clipboard

function (profile, item, callback, threadid) { linb.request( "http://localhost/treenode.php", "pid="+ item.id, function(rep){ data = _.unserialize(rep); callback(data); }); }

function (profile, item, callb linb.request( "http://localhost/treenod "pid="+ item.id,

9. Click [OK] to close dialog. 10. Press [run] to see the result.