Server side Tree Structure Programming

The tree structure is often used in user interface of web applications. The tree UI is very useful and often used to make comprehensive UI. In this section, we are going to learn how to make the server side program of the tree UI by 2 examples.

Summary

Tree UI is used to show data with tree structure. The jQuery supports rich user interface (UI) applications.

In addition to front end support by Javascript and jQuery, the Alinous-Core supports server side programming by the Domain Specific Language.

Alinous-Core support server side program

Alinous-Core has library module of the server side program for tree structured data. It cooperates with the Tree UI Javascript module, like jqTree.

On actual web application, the tree node has other data than the tree structure. The library support such a data structure.

As one of the example, The Alinous Document CMS uses the library.

Http Cookie support usability of Rich User Interface

The usability of  web application with rich user interface is very important. Especially the state of the UI control is important.

On the case of Tree UI control, the state of the nodes, whether it is closed or opened, should be remembered when the user refresh the web page.

The library also supports Tree UI with Table UI

The Tree Table UI is user interface using both Tree and Table UI. But the main structure is Tree, therefore the server side program library for tree data structure is available for it.

jqTree example

The jqTree is excellent Javascript library to show tree structure. It can load data dynamically from the server side program using data in json format.

jqTree dynamic load

Main program and show data in tree structure

The main part of using jqTree with dynamic data load from server side program.

Tree Data manipulation

On this jqTree widget, we can manipulate the elements on the tree. We can delete, move and add those elements. When the element of the trees changes, the server side program have to know that and synchronize the database.

Following page shows the server side program component to save the change of tree elements.

Usage in the Content Management System

This program handling tree structure data is used frequently in the Alinous Document CMS.

Tree Table Example

Table UI is used to show record data to the web user. It is often used with Tree UI. And on the Wysiwyg Html Content Editor, you can use table tag and edit it.

Tree Table User interface Component

The Tree Table programming example is available. This UI is also used in the CMS application's code debugger. When you handle a lot of data using table interface and it is not proper to show all of the records in the table, the UI is effective.

The Tree Table is user interface using both tree UI and table UI. This UI is used in Alinous Document CMS on showing Dom variables of the script debugger.

Tree Table UI

The example is to show the tree data, clear them, and get new data from ajax script.


Go to Top