Understanding the Tree User Design Control in Visual LANSA V13

Date:13 February 2013
Product/Release:Visual LANSA V13
Abstract:An example of the Tree User Design Control usage in Visual LANSA V13
Submitted By:LANSA Technical Support

The Tree User Design Control (Prim_tree) allows the developer to utilize the power of LANSA lists while producing a user interface that can go far beyond the traditional columnar list appearance.

Like all user defined controls, Tree allows the developer to create a reusable part to act as the design for each of the items. This means there are no real restrictions as to what data is used, or how it can be displayed.

Example of the Prim_tree Design Control

Example:

Pre-requisite - This example makes use of repository objects that are part of the Visual LANSA DirectX demonstration material.

For the purposes of this example, tree is being used as though it were a standard list, with no child items being created. The items created show the data on two rows, rather than side by side in two columns. This is a common pattern seen in modern user interfaces, particularly those designed with a touch screen in mind. Rather than a wide thin strip of data, a formatted tile is used to show the data in a more organised, efficient and aesthetically pleasing way.

The first step is to create a design panel. This is really little more than a simple reusable part. However, to enable the tree to communicate effectively with the design instances, it is necessary for the design to implement the TreeDesign interface.

Begin_Com Role(*EXTENDS #Prim_panl *Implements #Prim_tree.iTreeDesign *ListFields #ListFields)
Group_By Name(#ListFields) Fields(#Givename #Surname #Empimg #Empno)

This provides a series of methods that can be redefined to allow the reusable part to perform some processing when the entry is added, selected, gets focus and so on.

To make data handling easier, the *ListFields parameter of the Begin_com can be used to specify the fields that will be automatically mapped in to the design when the list entry is added or updated.

Firstly, create a reusable part called TreeDesign and copy the code below. This will act as the design for each of the items.

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #Prim_Tree.iTreeDesign *ListFields #ListFields) Displayposition(1) Height(48) Layoutmanager(#Table) Left(0) Tabposition(1) Top(0) Width(403)

* Fields mapped in when the entry is added to the tree
Group_By Name(#ListFields) Fields(#Givename #Surname #Empno #Deptment #DeptDesc)

Define_Com Class(#prim_vs.style) Name(#Bold) Bold(True)

Define_Com Class(#PRIM_PANL) Name(#ImagePanel) Displayposition(1) Height(48) Image(#XDXImageEmployee32) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(48)
Define_Com Class(#PRIM_LABL) Name(#Employee) Caption('Employee') Displayposition(2) Ellipses(Word) Height(24) Left(48) Marginleft(2) Parent(#COM_OWNER) Style(#Bold) Tabposition(2) Tabstop(False) Top(0) Verticalalignment(Center) Width(355)
Define_Com Class(#PRIM_LABL) Name(#Department) Caption('Department') Displayposition(3) Ellipses(Word) Height(24) Left(48) Marginleft(2) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(24) Verticalalignment(Center) Width(355)

Define_Com Class(#Prim_tblo) Name(#Table)
Define_Com Class(#Prim_tblo.Column) Name(#Column1) Parent(#Table) Units(Pixels) Width(48)
Define_Com Class(#Prim_tblo.Column) Name(#Column2) Parent(#Table)
Define_Com Class(#Prim_tblo.Row) Name(#Row1) Parent(#Table)
Define_Com Class(#Prim_tblo.Row) Name(#Row2) Parent(#Table)

Define_Com Class(#Prim_tblo.item) Name(#Item1) Column(#Column1) Manage(#ImagePanel) Parent(#Table) Row(#Row1) Rowspan(2)
Define_Com Class(#Prim_tblo.item) Name(#Item2) Column(#Column2) Manage(#Employee) Parent(#Table) Row(#Row1)
Define_Com Class(#Prim_tblo.item) Name(#Item3) Column(#Column2) Manage(#Department) Parent(#Table) Row(#Row2)

Mthroutine Name(OnAdd) Options(*Redefine)

#Com_owner.Cursor <= #sys_appln.Cursors<Hand>

* Update the design labels using the field values passed in
#Employee := ("&1 &2 (&3)").Substitute( #GiveName #Surname #Empno )
#Department := ("&1 (&2)").Substitute( #Deptdesc #deptment )

* Use the default application MouseOver style
#Com_owner.MouseOverStyle <= #sys_appln.Appearance.TreeMouseOver

Endroutine

Mthroutine Name(OnItemGotFocus) Options(*Redefine)

* Apply the default appliction selection style to
#com_owner.style <= #sys_appln.Appearance.TreeSelected

Endroutine

Mthroutine Name(OnItemLostFocus) Options(*Redefine)

#com_owner.style <= *Null

Endroutine

End_Com

Secondly, create a new form called Tree and copy the code below. This defines the tree and the design that it will use. Compile both and execute the form, ensuring that you execute as DirectX.

Once you’ve seen it run, execute again in debug to see how the design instances are created and how they react with focus change.

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_FORM) Caption('User Designed Tree') Clientheight(579) Clientwidth(463) Height(617) Layoutmanager(#Layout) Left(138) Style(#Background) Top(195) Width(479)

* User Designed Control - Tree
* Individual items are made by adding entries as per typical LANSA list processing
* Fields in the list are defined by the *ListFields parameter of the Design being made

* Prim_Tree defines the Tree
* #TreeDesign defines the appearance of the items created
Define_Com Class(#PRIM_TREE<#TreeDesign>) Name(#UDCTree) Displayposition(1) Height(579) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(463)

Define_Com Class(#PRIM_ATLM) Name(#Layout)
Define_Com Class(#PRIM_ATLI) Name(#ATLI_1) Attachment(Center) Manage(#UDCTree) Parent(#Layout)

Define_Com Class(#prim_vs.Style) Name(#Background) Normbackcolor(White)

Evtroutine Handling(#Com_owner.CreateInstance)

Select Fields(#UDCTree) From_File(pslmst)

Fetch Fields(#Deptdesc) From_File(deptab) With_Key(#deptment)

* An instance of the design will be created when the entry is added.
Add_Entry To_List(#UDCTree)

Endselect

Endroutine

Evtroutine Handling(#UDCTree.ItemGotFocus)

* Update the form caption with the data from the current list item

#Com_owner.Caption := ("&1 &2 (&3)").Substitute( #GiveName #Surname #Empno )

Endroutine

End_Com