Component TREENODE

Overview

The component TREENODE represents one tree node. It is typically arranged as cell component of a grid.

Attribute summary

Typically used attributes

All attributes are

Positioning

Used inside: GRIDCOL

Using inside: ACTIVEX, ADAPTIVEGRIDLAYOUTPANE, ADAPTIVESPLITAREA, ADAPTIVETILECONTAINER, ADAPTIVETOOLBAR, ANIMATEDPANE, ANIMATEICON, AREASELECTOR, ARRAYGRID, AUTOCOMPLETE, AVATARICON, AWESOMEFONTICON, BLOCKABLEAREA, BOX, BROWSER, BUTTON, BUTTONCOPYPASTEACTIVATION, BUTTONMENU, BUTTONPOPUP, BUTTONPOPUPMENU, BUTTONVERTICAL, CALENDAR, CALENDARFIELD, CAMERA, CAMERARECORDER, CHARTJS, CHECKBOX, CLIENTFILEEXPLORER, CLOCK, CODEEDITOR, COLDISTANCE, COLLINE, COLORFIELD, COLORICON, COLSYNCHEDPANE, COMBOBOX, COMBOFIELD, CUBEROTATOR, DIRECTHTMLINSERT, DRAWAREA, DYNAMICCONTENT, FIELD, FILECHOOSER, FILEDOWNLOADBUTTON, FILEDOWNLOADLINK, FILEUPLOAD, FILEUPLOADBUTTON, FILEUPLOADBUTTONASYNCHRONOUS, FILEUPLOADLINK, FILEUPLOADLINKASYNCHRONOUS, FIXGRID, FIXGRIDTOUCHBUTTON, FIXGRIDWITHGROUPING, FLYINCONTENTAREA, FOLDABLEPANE, FOLDABLEPOPUPINCLUDE, FOLDABLEVERTICALPANE, FONTICON, FORMATTEDFIELD, FULLSCREENBUTTON, FXCHART, GRIDHEADERLABEL, GRIDLAYOUTPANE, HELPICON, HEXIMAGE, HEXIMAGEMAP, HIDEABLE, HYPERLINK, ICON, ICONSEPTEXT, IFRAMEINCLUDE, IMAGE, IMAGEANONYMIZER, IMAGEANONYMIZERDIRECT, IMAGEMAP, IMAGESHAKER, JRVIEWER, KEYBOARDSCANNER, KEYSELECTOR, LABEL, LABELCONTAINER, LABELMULTILINE, LABELVERTICAL, LAYEREDPANE, LINK, LINKVERTICAL, LIST, LONGTEXTFIELD, MEDIAPLAYER, MENUBAR, MULTILABEL, OSMVIEWER, OUTLOOKBAR, OVERLAYAREA, PAGEBEANCOMPONENT, PAGEBEANINCLUDE, PAINTAREA, PANE, PARENTEXIT, PASSWORD, PDFRENDERER, PDFRENDERERVIAURL, PICKLIST, POOLEDBROWSER, PROGRESSBAR, QRCODESCANNERJSQR, RADIAL, RADIOBUTTON, RADIOBUTTONGROUP, REPEAT, RGRAPH, ROLLINGCONTAINERAREA, ROTATECONTENTAREA, SCALEPANE, SCANFIELD, SCENEJS, SCHEDULE, SCROLLANCHOR, SCROLLBAR, SCROLLNOTIFIER, SCROLLPANE, SHIFTCONTAINER, SIMPLEHTMLEDITOR, SIZEABLEPANE, SIZEABLEPANEHORIZONTAL, SIZEANIMATIONAREA@, SLIDECONTAINER, SLIDER, SLIDERRANGE, SMARTLABEL, SMARTTEXTAREA, SPANGRID, SPINNER, SPLITPANE, STABLEAREAMANAGER, STABLEAREAPLACEHOLDER, SUBPAGE, SVGVIEWER, SYSTEMICON, TABBEDLINE, TABBEDLINECONTAINER, TABBEDLINEVERTICAL, TABBEDPANE, TEXTAREA, TEXTAREAWITHCOMMENT, TEXTEDITOR, TEXTPANE, TEXTPANEVERTICAL, TEXTWITHCONTROLS, TEXTWITHLINKS, TILEDAREA, TIMEPICKER@, TOGGLE, TOUCHFIELD, TOUCHFIELDNUMERIC, TOUCHSELECTOR, TOUCHSIGNATURE, TOUCHVIRTUALKEYBOARD, VIDEO, WINDOWSIZER, WORKPLACEPERSPECTIVESELECTOR

Attribute details

accessiblename

Text that is passed as control content to the accessible support devices (e.g. screen readers).

actionListener

Binding to server side method that processes the events coming from this component.

The attribute value must be an expression.

#{methodBinding}Method binding

adapterbinding

Special binding to component adapter object instance on server side. The component adapter must be an instance of IComponentAdapterBinding. For some components (e.g. FIXGRID) there is an extended interface (e.g. IFIXGRIDComponentAdapterBinding).

The attribute value must be an expression.

#{tobedefined}Binding to IComponentAdapter instance

attributemacro

Name of macro that is used for generating certain attributes of this component. Please pay attention: the value of this attribute is read one time for each control and cannot be changed afterwards.

The attribute value must not be changed once the component is created.

background

Background color of the component. Any RGB value can be chosen using format #rrggbb.

#FFFFFFWhite
#000000Black
#FF0000Red
#00FF00Green
#0000FFBlue
#0000FF30Blue with a transparency of x30.

bgpaint

Background paint commands. There is a sequence of paint commands which can be executed one after the other by listing them as semicolon separated list. - By appending certain suffixes to a command you can define that the command is only executed in a certain situation. Available suffixes are: _empty (content of component is empty), _focus, _nofocus, _enabled, _disabled, _mouseover. Multiple suffixes can be used in parallel (e.g. write_empty_focus).

---------- bgpaint commands for all clients -----
error()Component indicates error.
mandatory()Component indicates mandatory input. Only is shown if component does not have any content yet.
bgbackground(#FF0000)Background with one color
bgbackground(#FF0000,#0000FF,vertical)Background as gradient of two colors
bgimage(left,/images/xyz.png)Image at certain position
bgwrite(left,...text...)Text at certain position
bgwrite(left,...text...,#800000,12)Text at certain position with defined color and size
---------- bgpaint commands for Java clients -----
rectangle(0,0,100%,100%,#FF0000)Red rectangle
rectangle(20,20,100,100,#FF0000)Red rectangle from 20,20 to 120,120
rectangle(20,20,100%-40,100%-40,#FF0000)Minus absolute values is allowed after percentage definitions
rectangle(0,0,100%,100%,#FF0000,#00FF00,vertical)Rectangle with color changing from red to green in vertical direction
roundedrectangle(0,0,100%,100%,10,10,#FF0000,#00FF00,vertical)Rectangle with color changing from red to green in vertical direction
line(0,0,100%,100%,1,#00FF00)Green line crossing the whole rectangle, from coordinate 0,0 to coordinat 100%,100%, thickness of line is 1
image(0,0,/images/xyz.png,lefttop)Image output x,y,image,position (lefttop/centermiddle/rightbottom...)
image(0,0,200,100,/images/xyz.png,lefttop)Image output x,y,width,heigh,image,position (lefttop/centermiddle/rightbottom...)
scaledimage(0,0,200,100,/images/xyz.png,lefttop)Scaled image output, the width/height ration is kept while scaling : x,y,width,heigh,image,position (lefttop/centermiddle/rightbottom...)
heximage(0,0,08FF40324672849CDFE...,lefttop)Image output x,y,hexadecimal image,position (lefttop/centermiddle/rightbottom...)
heximage(0,0,200,100,08FF40324672849CDFE...,lefttop)Image output x,y,width,height,hexadecimal image,position (lefttop/centermiddle/rightbottom...)
scaledheximage(0,0,200,100,08FF40324672849CDFE...,lefttop)Scaled image output x,y,width,height,hexadecimal image,position (lefttop/centermiddle/rightbottom...)
border(0,0,100%,100%,#C0C0C0,2)Rectangular border with thickness 2
roundedborder(0,0,100%,100%,10,10,#C0C0C0,2)Rounded border with thickness 2
write(0,0,Some text,lefttop)Some text in the left top corner
write(50%,50%,Some text,20,#00FF00,centermiddle)Some text in the left center, font size 20, font color green
write(50%,50%,Some text,20,#00FF00,bold,centermiddle)Some text in the left center, font size 20, font color green,bold
write(50%,50%,Some text,20,#00FF00,italic,centermiddle)Some text in the left center, font size 20, font color green,italic
write(50%,50%,Some text,20,#00FF00,normal,centermiddle)Some text in the left center, font size 20, font color green,normal
write(0,100%,Some text,20,#00FF00,default,lefttop,90)Some text in the left bottom corner, font size 20, font color green, 90 degrees rotated
write(20,100%,Some text,20,#00FF00,default,lefttop,90,-1,1)Some text in the left bottom corner, font size 20, font color green, 90 degrees rotated. x scaling -1, y scaling 1
write(20,100%,Some text,20,#00FF00,bold,lefttop,90,-1,1)Some text in the left bottom corner, font size 20, font color green, 90 degrees rotated. x scaling -1, y scaling 1
writeifempty(0,0,Some text,lefttop)Same as write-command, but now only visible if component contains data
writeifempty(50%,50%,Some text,20,#00FF00,centermiddle)Same as write-command, but now only visible if component contains data
writemultiline(0,0,100%,100%,Some text)Some text into the defined rectangle. Only fully supported with FX client, in Swing client the text will be output as one line.
writemultiline(0,0,100%,100%,Some text,20,#FF0000,bold)Some text into the defined rectangle. In additional font size, text color and text style (normal,bold,italic) are passed. Only fully supported with FX client, in Swing client the text will be output as one line.
oval(0,0,100%,100%,#FF0000)Red ellipse
oval(0,0,100%,100%,#FF0000,#00FF00,vertical)Red ellipse with color changing from red to green
ovalborder(0,0,100%,100%,#FF0000,2)Red ellipse border, red, 2 pixels thick
grid(100,#00000020)Grid with line distance 100, black line color - with transparency
nodisabled()Switches off the automated shading of disabled input components
background(#FF0000)Sets the background of the painted area.
backgroundnofocus(#FF0000)Sets the background of the painted area - which is only drawn if the component does not hold the focus.
repeatimage(/images/xyz.png)The image is repeated and drawn all over the available space.

border

Defintion of border of control. Either defined as straight color value, with then having a border of 1 pixel. Or: an explicit per-side definition as comma separated list of border definition values.

#8080801 pixel border in color dark gray.
top:1;color:#808080top:1;color:#808080 : border only on top, 1 pixel height, color #808080
top:1;bottom:1;left:1;right:1;color:#FF0000top:1;bottom:1;left:1;right:1;color:#FF0000 : red border of 1 pixel size
top:1;bottom:1;left:1;right:1;color:#FF0000;dashing:5,2top:1;bottom:1;left:1;right:1;color:#FF0000 : red border of 1 pixel size, dashed with segments of 5 pixesl and 2 pixels; dashing only supported with FX Client!
noborderDefines that no border is painted - esp. in cases when empty borders are normally added (e.g. in grid cells)

clientname

Name that is assigned to the component at client side: there is no specific function associated with the name - but it can be used on client side to describe the component in a clearer way. The name is e.g. used by UI test tools that replay certain user interaction sequences - and that reference components via their name.

comment

Comment that can be asigned to any component. The comment is not operationally used.

Any textAny text

configinfo

Configuration information that is attached to this component. This information is not functionally used by CaptainCasa, but may be used for any application specific purpose.

dragroundtrip

If set to true then an event is triggered on server side when the user starts a drag operation. The event is of type BaseActionEventDragStarted.

falseNo event triggered (default)
trueEvent triggered

dragsend

Description of object that can be dragged from this component. The description consists out of a type and and id. A component may have multiple objects that can be associated.

article:4711Example: article
file:harry.txt;content:Hello world!Example: Multiple object descriptions

droprastertext

Text that is shown when dragging over the component. The text is only shown if a drop is possible (DROPRECEIVE definition).

 (default) No text shown
 pixel(5) Current drop pixel position - in steps of 5 (or any other value)
 pixelX(5) Current drop pixel position - only the x-position
 pixelY(5) Current drop pixel position - only the y-position
 percentage(5) Current drop pixel position as percentage number - in steps of 5 (or any other value)
 percentageX(5) Current drop pixel position as percentage number - only the x-position
 percentageY(5) Current drop pixel position as percentage number - only the y-position
 textX(0,left,25,middle,75,right) Text that is shown depending from percentage x-position

dropreceive

Semicolon separated list of object types that can be dropped onto this component.

articleExample: articles can be dropped
article;customerExample: articles and customers can be dropped

dropshape

enabled

Indicator if component is enabled or not.

trueComponent is enabled.
falseComponent is not enabled.

fixstatusimageclosed

Image that is drawn as status imagefor a closed tree node.

The attribute value must not be changed once the component is created.

/images/abc.pngImage /images/abc.png
/images/svg/def.svgImage /images/svg/def.svg

fixstatusimageendnode

Image that is drawn as status imagefor an end tree node.

The attribute value must not be changed once the component is created.

/images/abc.pngImage /images/abc.png
/images/svg/def.svgImage /images/svg/def.svg

fixstatusimageopened

Image that is drawn as status imagefor an opened tree node.

The attribute value must not be changed once the component is created.

/images/abc.pngImage /images/abc.png
/images/svg/def.svgImage /images/svg/def.svg

focusable

Defines if the component is focusable. The default depends on the component: typical input components (field, check box, ...) are focusable by default, while typical structure components (pane, label, ...) are not focusable by default.

trueFocusable
falseNot focusable

focusnexthotkey

Hotkey definition that is used als alternative to the tab-key for moving the focus into the next component.

 No keyboard association (default)
ctrl-83Control key + s
alt-83Alt key + s
shift-83Shift key + s
ctrl-shift-83Control key + Shift key + s
10return
32space
37cursor left
38cursor up
39cursor right
40cursor down
33page up
34page down
36Begin
35End
27escape
127Del
65a
66b
67c
68d
69e
70f
71g
72h
73i
74j
75k
76l
77m
78n
79o
80p
81q
82r
83s
84t
85u
86v
87w
88x
89y
90z
480
491
502
513
524
535
546
557
568
579
112F1
113F2
114F3
115F4
116F5
117F6
118F7
119F8
120F9
121F10
122F11
123F12

focusprevioushotkey

Hotkey definition that is used als alternative to the tab-key for moving the focus into the previous component.

 No keyboard association (default)
ctrl-83Control key + s
alt-83Alt key + s
shift-83Shift key + s
ctrl-shift-83Control key + Shift key + s
10return
32space
37cursor left
38cursor up
39cursor right
40cursor down
33page up
34page down
36Begin
35End
27escape
127Del
65a
66b
67c
68d
69e
70f
71g
72h
73i
74j
75k
76l
77m
78n
79o
80p
81q
82r
83s
84t
85u
86v
87w
88x
89y
90z
480
491
502
513
524
535
546
557
568
579
112F1
113F2
114F3
115F4
116F5
117F6
118F7
119F8
120F9
121F10
122F11
123F12

focussequence

Explicit definition of tab sequence. The format of the definition is GROUP/SEQUENCENUMBER. You can define any number of tab-groups within one page. If the user tabs into a component with a FOCUSSEQUENCE definition then the next tab will focus the next component belonging to the same GROUP and holding the next SEQUENCENUMBER. - By default the FOCUSSEQUENCE value is prefixed with some page-id before being sent to the client so that definitions of one page do not affect definitions of another page. You can explicitly avoid this prefixing by using the naming convention ccfix_GROUP/SEQUENCENUMBER.

---------- Examples -----
A/1Example: group A, sequence 1
A/2Example: group A, sequence 2

font

Semicolon separated list of font attributes. Valid attributes are: faces (font family), size (integer number), weight (bold), posture (italic)

family:Arialfamily:Arial
family:Courierfamily:Courier
size:12size:12
weight:boldweight:bold
size:12;weight:boldsize:12;weight:bold
size:12;posture:italicsize:12;posture:italic

foreground

Foreground color of the component. Any RGB value can be chosen using format #rrggbb.

#FFFFFFWhite
#000000Black
#FF0000Red
#00FF00Green
#0000FFBlue
#0000FF30Blue with a transparency of x30.

height

Height of the control. Either defined as absolute value or as percentage value. Pay attention when using percentage sizing: the size refers to what is given from the components above. When using percentage sizing then you may use an extended syntax: "xxx%;<min>;<max>": in this case the minimum and maximum definitions are respected. If using absolute sizes you may append a "+" to define, that the size is extended if required by the component. - Please note: the sizing may be completely taken over by the parent component (e.g. if a component is used in a grid cell), in this case the size definintions on this component level are obsolete.

100100 pixels
120120 pixels
200200 pixels
50%50 percents
100%Full available height
100%;100Full available height, minimum 100 pixels
100%;100;500Full available height, minimum 100 pixels, maximum 500 pixels
100%;;500Full available height, maximum 500 pixels

helpid

Help id that is part of the online help management.

helpidId pointing to a server side online help file.
ccnof1helpExplicitly switching off default F1 help. This is sometimes required in case you want to explicitly react on F1-key as hotkey.

image

Reference to image within your web application. The image is defined in an absolute way (e.g. /images/abc.png) - the root directory for absolute addressing is the directory of the web application.

/images/abc.pngImage /images/abc.png
/images/svg/def.svgImage /images/svg/def.svg

level

levelwidth

Width in pixels that the treenode is indented per hierarchy level.

2020 pixels (default)
3030 pixels
4040 pixels

linedrawing

INERNAL USE. Sequence of X and blank characters that indicates which vertical lines to draw for the current tree node.

onlyshowsubcomponent

By default the tree node shows some text and (optionally) some additional image. If setting ONLYSHOWSUBCOMPONENT to true then text and image are not rendered, but the whole available space is passed to the subcomponent of the tree node.

falseTree node with text and optional image (default)
trueNo text rendered - all space assigned to subcomponent.

popupmenu

Reference to the id of a POPUPMENU definition that is available either in this page or in a page that includes this page.

popupmenuloadroundtrip

If set to true, then an explicit roundtrip is triggered when the user presses the right mouse button in order to open a popup menu. As result you can define the popup menu dynamically (using DYNAMICCONTENT) and prepare the popup menu at this point of time when the user want to open it.

falseMenu is already defined in layout, no roundtrip (default)
trueMenu is dynamically created, roundtrip is triggered

reference

Reference to an outside object that is the content behind the component. E.g. a field is representing a certain field of a database table: in this case you could define the value table;column. The reference plays a siginficant role within the attributemacro management.

The attribute value must not be changed once the component is created.

refOne reference
ref1;ref2Two references
ref1;ref2;ref3Three references

requestfocus

Indicator, by which you can control the focus to be moved into this component.

creationComponent requests focus when created.
...int value...Counter coming from server side. Please check Developers Guide.

requestfocushotkey

Hotkey definition that is used request the focus for this component. The hotkey is globally available within the corresponding dialog.

 No keyboard association (default)
ctrl-83Control key + s
alt-83Alt key + s
shift-83Shift key + s
ctrl-shift-83Control key + Shift key + s
10return
32space
37cursor left
38cursor up
39cursor right
40cursor down
33page up
34page down
36Begin
35End
27escape
127Del
65a
66b
67c
68d
69e
70f
71g
72h
73i
74j
75k
76l
77m
78n
79o
80p
81q
82r
83s
84t
85u
86v
87w
88x
89y
90z
480
491
502
513
524
535
546
557
568
579
112F1
113F2
114F3
115F4
116F5
117F6
118F7
119F8
120F9
121F10
122F11
123F12

rounding

Rounding radius of edges of border/background. This is optical rounding - so has nothing to do with mathematical rounding... The definition is either made for all corners - or as semicolon separated variant for each corner.

0Straight edges
5Rounding with radius 5
10Rounding with radius 10
0;5;5;0indiviual per corner: left top, right top, right bottom, left bottom
0;50%;5;2indiviual per corner: any mixing is allowed..

status

statusimage

Image that is drawn as status image. Use this attribute and pass an expression pointing into your tree node object in order to completely dynamically assign a status image to the node.

/images/abc.pngImage /images/abc.png
/images/svg/def.svgImage /images/svg/def.svg

styleseq

Style class names that are applied to this component.

stylevariant

In CaptainCasa you can define styles definitions for components. A style definition is a definition of a set of default attribute values that are applied to the component. In case you want to differenciate between different usage types of the component you can apply multiple styles - and use the stylevariant attribute to select between.

suppressiconfocus

By default the toggle-icon causes a focussing (and by this a selection) of the component and of the corresponding row. You can switch off this behavior: as result you can toggle the tree node without at the same point of time selecting the corresponding grid row.

falsefocussing of tree node (default)
trueno focussing of tree node

text

Text that is shown and (dependent from the component type) edited inside the component. The terminator is a decimal byte value.

tooltip

Text that is shown as hint when the user stays with the mouse on top of the control for a while.

...anytext...Text that is displayed as tooltip.
server:trueIndicator that tooltip for the component is managed on server side. The actionListener will be invokde with events BaseActionEventTooltipStarted and BaseActionEventTooltipEnde. On server side you may implement some modeless popup in order to show some more complex tooltip
server:true;opendelay:1000Duration in milliseconds after which a tooltip event is triggered when the user moves the mouse on top of this component

tooltipdefaulted

Definition if tooltip should be set automatically out of existing text information (e.g. text of component)

trueTooltip is defaulted (default)
falseTooltip is not defaulted

transform

2 dimensional transformation that is applied to the component.

 no transformation (default)
rotate(10deg)Rotation by 10 degrees
rotate(-10deg)Rotation by -10 degrees
skewX(-10deg)Skew in horizontal direction by -10 degrees
skewY(10deg)Skew in vertical direction by 10 degrees
skew(10deg,20deg)Skew in both horizontal (10 degrees) and vertical (20 degrees) direction

usesmartlabel

If set to true then a SMARTLABEL is user for rendering the text. This allows you to pass smart text definitions as text.

The attribute value must not be changed once the component is created.

falseNormal label used (default)
trueSmart label used (single line)
multilineSmart label used (multi line)

width

Width of the control. Either defined as absolute value or as percentage value. Pay attention when using percentage sizing: the size refers to what is given from the components above. When using percentage sizing then you may use an extended syntax: "xxx%;<min>;<max>": in this case the minimum and maximum definitions are respected. - Please note: the sizing may be completely taken over by the parent component (e.g. if a component is used in a grid cell), in this case the size definintions on this component level are obsolete.

100100 Pixels
120120 Pixels
200200 Pixels
50%50 percents
100%Full available width
100%;100Full available width, minimum 100 pixels
100%;100;500Full available width, minimum 100 pixels, maximum 500 pixels
100%;;500Full available width, maximum 500 pixels

withfocusevent

If set then corresponding focus events are triggered if the component gains/looses the focus.

false(default) no focus events
truewith focus events
focusgainedwith focus events but only for gaining the focus
focuslostwith focus events but only for loosing the focus

withlinedrawing

When true then the tree is rendered with vertical lines in front of the nodes.

falseNo vertical lines (default)
trueWith vertical lines