Interface building with Morfik: A hierarchical data representation

In the wake of my previous post I decided to show my dear readers another interesting thing you can do with Morfik, in creating an interface. 

It is quite common for applications to have the need to present users with information that is organized in a hierarchical structure. In creating a desktop application we would use a Treeview control to display this kind of data.  I’ve actually seen quite a few people asking for Morfik to incorporate just such a control.

Well, it isn’t really strictly necessary to have a specialized control to get this sort of representation.   The following picture shows a treeview-like data representation created with simple forms and very little glue code.

 Observe that in this picture the nodes for the tree representation vary in height, allowing for non-cryptic presentation of the information as it does not really need to be abbreviated.  You can, of course, also create more sophisticated hierarchical representations of your data.  The following picture shows a similar representation but with the nodes being color tagged.
This representation can be achieved though the usage of form that opens a new instance of itself in a subform that it contains.  It is essentially a simple recursive algorithm.  In the case of the second picture all that was really necessary was to design the form and write about 25 lines of code.  Sure using a treeview control might require less lines of code, but I sincerely  doubt that you could design a Treeview control have variable color and height nodes, without manually coding the necessary changes.
As soon as I can make the time I’ll write a two or three form application to provide a model or template that you can use to quickly make your own hierarchical views.
This entry was posted in Visual Design. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>