The tree tutorial has several parts, this first part will create the tree component itself and its model objects with a simple SQL query. And later in the following parts we will add an event to the tree component and evolve the query to supply more nodes to the tree. At the end of these series of tutorials, we will be able to display all departments and add new ones with some of the Formspider components. Now, lets start.
Open Formspider IDE and click “New Application” under the “File” menu. A New Application dialog will show up. Enter “TreeApp” as the name of the application and ”HR” as its Datasource Schema name. If you are using Formspider Online, you do not need to enter database schema name since your account is already configured to use your online database. And your preconfigured database schema contains HR tables. You can see your online database connection parameters under the “Tools>User Settings” in the menu. Leave other fields empty and click OK. This creates the “TreeApp” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).
As the first step , open “Containers” navigation tree and expand “Panels” node. Double click “mainPanel” to open its design XML. Replace the text “<panel/>” in the Editor with the following XML.
<panel> <tableLayout> <row> <cell hAlign="Full" vAlign="Full"> <tree name="tree1"></tree> </cell> </row> </tableLayout> </panel>
This XML places a simple tree component, named “tree1”, to the “mainPanel“.
PS: If you run the application at this moment you will see an empty window, because there is no root node in the tree component.
Create a new Datasource Definition (DSD) that will be used to supply nodes to the tree. Expand the Datasource Definition accordion and click the Datasource Definitions node. Click the “+” button above the navigation tree or right click the node and click the New from popup menu.
The new Datasource Definition dialog will show up. Enter “treeDSD” as its name and select “Query” from “Based On” section to create the query based DSD.
Then click the “Query” node from the DSD navigation tree. Copy/paste the following query to the query text area. There are two columns in query, named as “id” and “name”.
select 'DEPARTMENTS' as id, 'Departments' as name from dual
Here is the description of the ID and NAME columns:
|Table Column||Tree Attribute||Description|
|ID||nodeKeyColumn||ID of each node. This value must be unique for each node in the tree properly.|
|NAME||displayColumn||Display value of the node.|
Click the OK button and to create the Datasource Definition. Note that Formspider created the “treeDSD” as well as the datasource “treeDSD1”.
Now, bind the “tree1” component to the columns of “treeDSD1” datasource. Add missing attributes to tree component or replace the current tree tag with the following one in “mainPanel” XML.
<tree name="tree1" dataSource="treeDSD1" displayColumn="NAME" nodeKeyColumn="ID" ></tree>
We are ready to run the application. Click the Run button or press F7 key. Here is the preview of the application.