About Trees
In the normal case only 3 - 4 commands are needed to build a tree structure. The commands
TreeElement...Push... have an additional value parameter to mark an element as selected.
These functions return 1 when this node is open and 0 when it is closed. If the return value is 1 then the content should be drawn. So it is recommended to include these commands in an if query. After the content has been drawn an open node must be closed with '
TreeStatePop'.
The original documentation about Trees can be found here.
Funktionsübersicht (Plugin - .DLL/.SO)
- Integer TreePush(type as Integer, title as String, state as Integer)
- Integer TreePushID(type as Integer, title as String ,state as Integer, id as Integer)
- Integer TreePushHashed(type as Integer, title as String, state as Integer, hash as String, len as Integer, seed as Integer)
- Integer TreeImagePush(type as Integer, image_slot as Integer, title as String, state as Integer)
- Integer TreeImagePush(type as Integer, image_name as String, title as String, state as Integer)
- Integer TreeImagePushID(type as Integer, image_slot as Integer, title as String, state as Integer, id as Integer)
- Integer TreeImagePushID( type as Integer, image_name as String, title as String, state as Integer, id as Integer)
- Integer TreeImagePushHashed(type as Integer, image_slot as Integer, title as String, state as Integer, hash as String, len as Integer, seed as Integer)
- Integer TreeImagePushHashed(type as Integer, image_name as String, title as String, state as Integer, hash as String, len as Integer, seed as Integer)
- Integer TreeStatePush(type as Integer, title as String, state as Integer)
- Integer TreeStateImagePush(type as Integer, image_name as String, title as String, state as Integer)
- TreeStatePop()
- Integer TreeElementPushID(type as Integer, title as String, state as Integer, value as Integer, id as Integer)
- Integer TreeElementPushHashed(type as Integer, title as String, state as Integer, value as Integer, hash as String, len as Integer, seed as Integer)
- Integer TreeElementImagePushID(type as Integer, image_slot as Integer, title as String, state as Integer, value as Integer, id as Integer)
- Integer TreeElementImagePushID(type as Integer, image_name as String, title as String, state as Integer, value as Integer, id as Integer)
- Integer TreeElementImagePushHashed(type as Integer, image_slot as Integer, title as String, state as Integer, value as Integer, hash as String ,len as Integer, seed as Integer)
- Integer TreeElementImagePushHashed(type as Integer, image_name as String, title as String, state as Integer, value as Integer, hash as String, len as Integer, seed as Integer)
- Integer TreeGetLastElementValue()
Parameter (Plugin)
- type
A value either NK_TREE_NODE or NK_TREE_TAB. As a highlighted collapsible UI section (NK_TREE_TAB) or as a tree node (NK_TREE_NODE).
- title
Text in the tree header.
- state
Initial value of the tree state, either NK_MINIMIZED or NK_MAXIMIZED.
- id
Loop counter, if this function is called in a loop.
- hash
String to generate the ID.
- len
Size of the passed string in hash.
- seed
Seed, if this function is called in a loop. Otherwise it can be 0.
- image_slot
A previously created image slot.
- image_name
A previously created connection to an image.
- value
A value 0 or 1, whether the header is selected
In the example you can see that the tree nodes can also be used to create submenus for the menu bar.
Previous topic (About Menus) ———— Table of contents
Example:
#import_plugin Nuklear as nk
// show all errors
SetErrorMode(2)
// set window properties
SetWindowTitle( "First Nuklear Window" )
SetWindowSize( 1024, 768, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window
// set display properties
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 0, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts
#insert "../Nuklear.agc"
// basic nuklear initialization
nkInit()
parent_node as integer = nk_false
child_node as integer = nk_false
child_items as integer[3]
parent_items as integer[7]
selected as String
do
// pass agk inputs to nuklear
nk.HandleInput()
if nk.WindowBegin("Tree Window", 80, 50, 400, 240, NK_WINDOW_BORDER||NK_WINDOW_MOVABLE||NK_WINDOW_TITLE||NK_WINDOW_SCALABLE)
// First tree node. With the flag NK_TREE_TAB the node is slightly
// highlighted. With NK_MINIMIZED the initial state of the node
// is set, in this case minimized/collapsed.
if (nk.TreePush(NK_TREE_TAB, "Root Tree", NK_MINIMIZED))
// This is a child's node. The node type is set to NK_TREE_NODE.
// The title of the node is not highlighted. The initial state
// is also minimized/colapsed.
if nk.TreePush(NK_TREE_NODE, "Selectable Tree", NK_MINIMIZED)
// Another child node in the child node. However, this node
// is selectable. The selected state is passed with the
// variable parent_node. The last parameter is an ID so that
// Nuklear can identify the control element. This should
// be unique. After executing the TreeElementPushID function,
// TreeGetLastElementValue can be used to query the last
// state of the tree node.
if nk.TreeElementPushID(NK_TREE_NODE, "Parent Tree Node", NK_MINIMIZED, parent_node, 0)
sel as integer = nk_false
parent_node = nk.TreeGetLastElementValue()
// Again a child's node. Parameters as before only
// with different ID.
if nk.TreeElementPushID(NK_TREE_NODE, "Child Tree Node", NK_MINIMIZED, child_node, 1)
child_node = nk.TreeGetLastElementValue()
// Fill 'Child Tree Node' with selectable widgets
nk.LayoutRowStatic(18,100,1)
if parent_node then child_node = parent_node
for i=0 to child_items.length
sel = child_items[i]
if child_node then sel = child_node
if sel then selected = "Selected" else selected = "Unselected"
sel = nk.SelectableSymbolLabel(NK_SYMBOL_CIRCLE_SOLID, selected, NK_TEXT_RIGHT, sel)
if sel = nk_false
child_node = nk_false
parent_node = nk_false
endif
child_items[i] = sel
next
nk.TreeElementPop()
endif
// Fill 'Parent Tree Node' with selectable widgets
nk.LayoutRowStatic(18,100,1)
for i=0 to parent_items.length
sel = parent_items[i]
if parent_node then sel = parent_node
if sel then selected = "Selected" else selected = "Unselected"
sel = nk.SelectableSymbolLabel(NK_SYMBOL_CIRCLE_SOLID, selected, NK_TEXT_RIGHT, sel)
if sel = nk_false then parent_node = nk_false
parent_items[i] = sel
next
nk.TreeElementPop()
endif
nk.TreePop()
endif
// This is a sibling node to 'Selectable Tree'. The parameters
// are similar to there.
if nk.TreePush(NK_TREE_NODE, "Common Tree", NK_MINIMIZED)
// And also this one gets a child's node. In this node
// the area is divided into three sections with LayoutRow.
// Each section gets a group and is filled with buttons.
if nk.TreePush(NK_TREE_NODE, "Node filled with buttons!", NK_MINIMIZED)
// The three sections.
nk.LayoutRowDynamic(250, 3)
// First group/section/column is filled with 8 buttons.
nk.GroupBegin("group 1", NK_WINDOW_NO_SCROLLBAR)
nk.LayoutRowDynamic(20, 1)
for i=0 to 7
nk.ButtonLabel("Button "+str(i))
next
nk.GroupEnd()
// Second group/section/column is also filled with buttons but with different order
nk.GroupBegin("group 2", NK_WINDOW_NO_SCROLLBAR)
nk.LayoutRowDynamic(20, 1)
nk.ButtonLabel("button 0")
nk.LayoutRowDynamic(20, 2)
nk.ButtonLabel("button 1")
nk.ButtonLabel("button 2")
nk.LayoutRowDynamic(20, 3)
nk.ButtonLabel("button 3")
nk.ButtonLabel("button 4")
nk.ButtonLabel("button 5")
nk.LayoutRowStatic(20, 50, 2)
for i=6 to 13
nk.ButtonLabel("Button "+str(i))
next
nk.GroupEnd()
// Third group/section/column that has a menu bar.
// Yes, it does not have to be at the top of the window.
// Here you can see how to create a submenu in a menu.
nk.GroupBegin("group 3", NK_WINDOW_NO_SCROLLBAR)
nk.MenubarBegin()
nk.LayoutRowBegin(NK_STATIC, 25, 1)
nk.LayoutRowPush(45)
if nk.MenuBeginLabel("File", NK_TEXT_CENTERED, 150, 150)
nk.LayoutRowDynamic(20, 1)
if nk.TreePush(NK_TREE_TAB, "New", NK_MINIMIZED)
nk.MenuItemLabel("Document", NK_TEXT_LEFT)
nk.MenuItemLabel("Project", NK_TEXT_LEFT)
endif
nk.Label("~~~~~~~~~~~~~~~~~~~~~~~~", NK_TEXT_CENTERED)
if nk.MenuItemLabel("Exit", NK_TEXT_LEFT) then exit
nk.MenuEnd()
endif
nk.MenubarEnd()
nk.GroupEnd()
nk.TreePop()
endif
nk.TreePop()
endif
nk.TreePop()
endif
endif
nk.WindowEnd()
nkSync()
loop
