TREEVIEW Widget and OCX Replacement¶

1. Microsoft's TreeView 6.0 from the Windows Common Control library
2. dxTreeList by DevExpress

Use the following XML attributes in your *.ext-hints file:

1. target-widget="treeview" at xpath /extension/ocx for MS TreeView 6.0
2. target-widget="treelist" at xpath /extension/ocx for dxTreeList by DevExpress

TREEVIEW¶

To simplify the modernization of applications that use tree OCX components, which are bound to the Windows OS and can't be easily moved in the web, we implemented a TREEVIEW widget as an extension to the 4GL language. The widget can be used as any other 4GL widget, see below for an example.

DEFINE VAR h AS HANDLE.
DEFINE VAR hNode AS HANDLE.

DEFINE FRAME f.

CREATE TREEVIEW h
    ASSIGN
        FRAME = FRAME f:HANDLE
        WIDTH = 20
        HEIGHT = 10
        VISIBLE = TRUE.

hNode = h:NODES:ADD-LAST-NODE("node 1", "This is a root node").
hNode:NODES:ADD-LAST-NODE("node 2", "This is a child node").

The extension only exists in FWD, it doesn't work in OpenEdge. The API of the TREEVIEW widget was influenced by the Microsoft's TreeView from the Windows Common Control and dxTreeList by DevExpress. This is to make the conversion process more straightforward.

Attributes¶

Methods¶

Id    Image
0     Default expanded icon.
1     Default collapsed icon.
2     Default leaf-node icon.

Events¶

Standard 4GL members¶

Besides the members introduced in FWD, the widget also supports the following standard 4GL members. Please consult the official OpenEdge documentation.

BGCOLOR
COLUMN
FGCOLOR
FONT
FRAME
FRAME-COL
FRAME-ROW
FRAME-X
FRAME-Y
HEIGHT-CHARS
HEIGHT-PIXELS
HELP
HIDDEN
INSTANTIATING-PROCEDURE
LABEL
LABEL-FONT
LOAD-MOUSE-POINTER
MENU-KEY
MENU-MOUSE
MOUSE-POINTER
MOVE-AFTER-TAB
MOVE-TO-BOTTOM
MOVE-TO-TOP
NAME
NEXT-SIBLING
NEXT-TAB-ITEM
PARENT
POPUP-MENU
PREV-SIBLING
PREV-TAB-ITEM
PRIVATE-DATA
ROW
SCREEN-VALUE
SENSITIVE
SIDE-LABEL-HANDLE
TAB-POSITION
TAB-STOP
TYPE
VISIBLE
WIDGET-ID
WIDTH
WIDTH-CHARS
WIDTH-PIXELS
WINDOW
X
Y

Examples¶

Create TREEVIEW widget¶

CREATE TREEVIEW hTree
    ASSIGN
        FRAME = FRAME f:HANDLE
        WIDTH = 20
        HEIGHT = 10
        VISIBLE = TRUE.

Add new nodes¶

hNode = hTree:NODES:ADD-LAST-NODE("node 1", "This is a root node").
hNode:NODES:ADD-LAST-NODE("node 2", "This is a child node").
iNode = hTree:CREATE-SUB-NODE(hNode:NODE-ID, "node 3", "Leaf node at third level", FALSE, ?, ?).

Find a node¶

hNode = hTree:FIND-NODE(iNode).

Remove a node¶

hTree:REMOVE-NODE(hNode:NODE-ID).

Complex example¶

Source codeSource code

define var hTree as handle.
define var hNode as handle.
define var hNode1 as handle.
define var hTemp as handle.
define var chKey as character.
define var i as integer.
define var j as integer.
define var k as integer.
define var img1 as integer.
define var img2 as integer.
define var img3 as integer.

define button bAdd label "Create Node".
define button bRemove label "Remove Node".

define frame f
    bAdd at column 1 row 16
    bRemove at column 15 row 16
    with size 80 by 25 title "TreeView Demo".

create treeview hTree assign
    frame = frame f:handle
    width = 40
    height = 15
    .

default-window:width = 101.
default-window:height = 30.

enable all with frame f.

img1 = hTree:create-image("treeview-sample-icon1.png").
img2 = hTree:create-image("treeview-sample-icon2.png").
img3 = hTree:create-image("treeview-sample-icon3.png").

do i = 1 to 5:
   chKey = "Node " + string(i).
   hNode = hTree:nodes:add-last-node(chKey, chKey).
   hNode:node-icon = img1.
   hNode:expand-node-icon = img2.
   do j = 1 to 5:
       chKey = "Node " + string(i) + "." + string(j).
       hNode1 = hNode:nodes:add-last-node(chKey, chKey).
       hNode1:node-icon = img3.
       hNode1:expand-node-icon = img3.

       do k = 1 to 5:
           chKey = "Node " + string(i) + "." + string(j) + "." + string(k).
           hNode1:nodes:add-last-node(chKey, chKey).
       end.
   end.
end.

on value-changed of hTree do:
   message "Previously selected node:" hTree:trigger-node:node-key "selected node:" hTree:selected-node:node-key.
end.

on default-action of hTree do:
   message "Default action on node:" hTree:trigger-node:node-key.
end.

on node-expanding of hTree do:
   message "Expanding node:" hTree:trigger-node:node-key.
end.

on node-expanded of hTree do:
   message "Expanded node:" hTree:trigger-node:node-key.
end.

on node-collapsing of hTree do:
   message "Collapsing node:" hTree:trigger-node:node-key.
end.

on node-collapsed of hTree do:
   message "Collapsed node:" hTree:trigger-node:node-key.
end.

on choose of bAdd do:
   def var chFile as char.
   def var chKey as char.
   def var iNodeId as int.
   def var iImg as int.

   message "Enter node label" set chKey.
   if chKey = ? then return.
   if length(trim(chKey)) = 0 then return.
   SYSTEM-DIALOG GET-FILE chFile.
   if chFile <> ? then iImg = hTree:create-image(chFile).

   hNode = hTree:selected-node.

   if hNode <> ? then iNodeId = hNode:node-id.
   hTree:create-sub-node(iNodeId, chKey, chKey, true, iImg, iImg).
end.

on choose of bRemove do:
   hNode = hTree:selected-node.
   if hNode <> ? then
      hTree:remove-node(hNode:node-id).
end.

wait-for close of this-procedure.

Conversion¶

FWD is capable to automatically convert the usages of DevExpress dxTreeList and Microsoft's Treeview from the Windows Common Controls library. Note that only subset of the dxTreeList and Treeview API is currently supported.

To enable the conversion create the file <procedurefile.p>.ext-hints with the following structure.

<extension>
   <ocx control-frame="CtrlFrame" control-frame-handle="chCtrlFrame" com-handle="chCtrlFrame:tree" target-handle="hTree" target-widget="treeview" />
</extension>

The xml element ocx defines the CONTROL-FRAME hosting the treeview control (control-frame), the com handle (control-frame-handle) of the control frame,
com handle property (com-handle) for referencing the treeview in the control frame and the handle (target-handle) for the converted treeview widget.

To give an example, the following code sample will convert with the xml configuration given above.

define variable CtrlFrame as widget-handle no-undo.
define variable chCtrlFrame as component-handle no-undo.

procedure control_load :
define variable UIB_S    as logical    no-undo.
define variable OCXFile  as character  no-undo.

OCXFile = search( "tree.wrx":U ).
  assign
    chCtrlFrame = CtrlFrame:com-handle
    UIB_S = chCtrlFrame:LoadControls( OCXFile, "CtrlFrame":U)
  .
end procedure.

run control_load.
chCtrlFrame:tree:CreateSubNode (...).

procedure CtrlFrame.tree.OnClick.
   ...
end procedure.

Pure 4GL Tree Control¶

DON'T USE THIS. This documentation is just being kept around for historical purposes. Trying this approach will be harder to implement/integrate than the FWD TreeView control AND it will be SLOWER.

There is a 4GL-only (no OCX) implementation of tree control written by one of our customers using ADM2 and SDO. It was implemented before we made the TREEVIEW widget available as an 4GL extension. The customer made that code available as a sample and we have integrated it into the Hotel GUI Demo Application. Download the code and use the notes below as a guide to reusing the tree control.

The core tree code can be seen in abl/common/ftreefr0.w. It relies upon multiple Possenet include files and super procedures.

The expand/collapse icons, the dotted lines for the tree and the tree nodes are drawn using images. The graphics for these can be found in abl/common/graphics/treeview/.

There is no documentation for this code. The only way to use it is to examine a program where it is used. Please see abl/add-rooms-dialog.w. In particular, look at PROCEDURE adm-create-objects and PROCEDURE createObjects. These handle the initialization. From there you must look deeper in the SDO (abl/roomtypedo.w) and the ADM2 implementation of ftreefr0.w itself.

© 2018-2019 Golden Code Development Corporation. ALL RIGHTS RESERVED.