Sigma Php Ajax framework, Ajax Components, GUI Builder

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
<h1>Hello, the world</h1> <p>this is my first sample of longoo</p>
to
[     ["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 header("Content-Type:text/javascript; charset=utf-8"); echo "["; echo "    [\"sub11\",\"sub12\",\"sub13\",\"sub14\"],"; echo "    [\"sub21\",\"sub22\",\"sub23\",\"sub24\"]"; echo "]"; ?>

2. Drag a [treeGrid] to design area，set 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 it，click 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
function (profile, e, src, value) { }
6. In the handler, we will call linb.request.
linb.request(             "http://localhost/hello.php",             null,             function(rep){                                //you will get result of hello.php in varble 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).
_.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.
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
        function (profile, e, src, value) {             me = this;             linb.request(               "http://localhost/hello.php",               null,               function(rep){                 var obj = _.unserialize(rep);                  me.treegrid1.setRows(obj);               }             );         }
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.

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');

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 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); ?>

Thanks for the nice tutorial.
How can we kow about various controls propeties?
such as, accessing/setting the properties and methods?
is there any manual descrbing all thecontrols with examples?
please help me.

Sigma Visual components are designed very simply. Just keep in mind
1. control have many properties
2. there are two methods for one property, setter and getter. Take "caption" of "Panel" for example, there must be two methods setCaption and getCaption.
3. You can get directly to definition by double clicking on the property in the "Config Window"
4. You can get API definition as well as samples at http://www.sigmawidgets.com/products/sigma_visual/API/.

You are kindly suggested to watch the training video first

Hi,
I found this tool very interesting and kudos to the maker of this tool!  ;)

My question is after testing this Tutorial #4, data is displayed in the grid alright but when I checked out the Tools->Error Console (in Firefox) I see that there is a syntax error like this:
  Error: syntax error
Source File: http://localhost/users.php
Line: 1, Column: 1
Source Code:
[[\'sub11\',\'sub12\',\'sub13\'],[\'sub21\',\'sub22\',\'sub23\']]

and an arrow pointing to the 2nd '['

any clue how to remove this?
thanks