TreeItem

A TreeItem in action
A TreeItem helps you to browse hierarchical data.

Design

The above design has been realized using the following CSS settings:

.mailTree {
	padding-vertical: 3;
	treeitem-closed-indicator: url( arrowRight.png );
	treeitem-opened-indicator: url( arrowLeft.png );
}

.mailBox {
	margin: 3;
	padding: 2;
	padding-left: 9;
	padding-right: 9;
	background-color: #656565;
	font {
		style: bold;
		size: small;
		color: mailBoxFontColor;
	}
	layout: expand | left;
}

.mailBox:hover {
	margin: 0;
	background-color: white;
	font-color: black;
	border {
		type: drop-shadow;
		inner-color: #CC8D8D67;
		outer-color: #AA2D2D25;
		width: 3;
		orientation: all-sides;
	}
}

.mailSummary {
	padding: 4;
	padding-left: 9;
	padding-right: 9;
	background {
		type: round-rect;
		color: mailSummaryBgColor;
	}
	font {
		style: plain;
		size: small;
		color: mailSummaryFontColor;
	}
}

.mailSummary:hover {
	padding: 2;
	padding-left: 7;
	padding-right: 7;
	background-border-color: focusedBorderColor;
	background-border-width: 2;
}


.mailDetail {
	padding: 2;
	background {
		color: mailDetailBgColor;
	}
	font {
		style: plain;
		size: small;
		color: mailDetailFontColor;
	}
	label-style: .mailDetailLabel;
}

.mailDetailLabel extends label {
	font-color: white;
}

CSS Attributes for the TreeItem

You can use the following attributes for designing a TreeItem:

CSS Attribute  DefaultValuesExplanationSince
treeitem-closed-indicator - imageurl An image indicating the closed state of a tree node. 2.0
treeitem-node-style - style The style for nodes in a TreeItem. You can use any Container related styles for nodes. 2.0
treeitem-opened-indicator - imageurl An image indicating the opened state of a tree node. 2.0
Further CSS Attribute  DefaultValuesExplanationSince
after - imageurl The URL of the image that should be shown after the item in question. 1.3
after-include-background true true, false By default the background of an Item is painted underneath the after element. Use false to exclude the background. 2.3.1
after-width - dimension (px, %), e.g. 3.5% The width of the after element which defaults to the width of the after image. 2.3.1
always-include false true, false Defines if a style should always be included, even if not used. This is useful for programmatically accessed and for HTML browser styles. 2.0
background-anchor left | top left, horizontal-center, h-center, hcenter, center, right, top, vertical-center, v-center, vcenter, bottom The orientation of the background in case either it's width or height is different from the item's dimensions. 2.1
background - background definition The background of an item or screen. The default background for items is "none", the default background for screens is a simple white background. 1.0
background-height 0px dimension (px, %), e.g. 3.5% The height of the background in pixel or percent, if it should differ from the the item's width. 2.1
background-width 0px dimension (px, %), e.g. 3.5% The width of the background in pixel or percent, if it should differ from the the item's width. 2.1
before - imageurl The URL of the image that should be shown before the item in question. 1.3
before-include-background true true, false By default the background of an Item is painted underneath the before element. Use false to exclude the background. 2.3.1
bgborder - border The border of an item which is painted before the background. This needs to be a reference to a border defined in the borders section. 2.1
border - border definition The border of an item or screen. The default border is "none". 1.0
border-adjust - dimension (px, %), e.g. 3.5% Change the border width, height and position by specifying border-adjust. A positive value moves the border to the right and bottom. 2.2
item-content-border - border A border name from the borders section. The border covers only the content area of the item and is independent of the item's normal border. 2.4
bounce true true, false Allows to switch on the bouncing drag effect for a specific container. If you want to switch off bouncing for all containers set the preprocessing variable "polish.Container.ScrollBounce" to "false". 2.2
change-styles - string Changes the styles of child items. Use the notation '[style1]>[style2]', e.g. visible>invisible for defining the style names. 2.0
color black color A color attribute to be used for various needs and concerns 2.3
colspan 1 integer The number of columns wich are used by the item within a table. 1.3
columns-width normal columns-width Either "normal", "equal" or the width for each column in a comma separated list (e.g. "columns-width: 60,60,10"). 1.0
commands-style - style The style for the commands container of an item that is shown when an item is pressed/hold for a long time and when the preprocesing variable polish.Item.ShowCommandsOnHold is activated. 2.1.3
complete-background - background A background name from the backgrounds section. The background includes the label of the item and is independent of the item's normal background. 1.3
complete-background-padding - dimension (px, %), e.g. 3.5% The padding that is added to the complete-background and/or complete-border. Note that this does not change the size of the item, so you might need to adapt margins or normal paddings for your design. 2.0
complete-border - border A border reference from the borders section. The border includes the label of the item and is independent of the item's normal border. 2.0
content-visible true true, false Activates or deactives the visibility of the item's contents. When the content is not visible, only the label as well as before and after attributes are visible. 2.1
content-x-adjust 0px dimension (px, %), e.g. 3.5% The horizontal position adjustment of an item's content, use a negative value to move it to the left. 2.1
content-y-adjust 0px dimension (px, %), e.g. 3.5% The vertical position adjustment of an item's content, use a negative value to move it to the top. 1.3
customitem-inactive false true, false Can be used to deactivate a specific CustomItem permanently. Use this for creating a custom item that cannot be selected by the user. 1.3
expand-items false true, false Expands the items within a screen or container to the width of the largest item - in contrast to the expand layout not the full available width is being used. 2.0
filter - Defines a filter for the specified UI element. 2.1
focus-all false true, false Focusses all children items with their specific :hover style when the parent container is focused, even when those items are not interactive. 2.1
focused-style focused style The name of the style for the currently focused item, usually applied with a [style-name]:hover construct. 1.0
focused-style-first - style The focused style for the first item in an Screen, ChoiceGroup, List, Container. 2.0
focused-style-last - style The focused style for the last item in an Screen, ChoiceGroup, List, Container. 2.0
include-label false true, false Usually the label of an item is rendered separately of the item's content. You can expand the background and border over the label as well using this attribute. If you want to inline the label so that it sits on the same line as the content use inline-label instead. 1.3
inherit true true, false Defines if a style that extends this style should inherit all attributes. 1.3
item-content-background - background A background name from the backgrounds section. The background covers only the content area of the item and is independent of the item's normal background. 2.4
label-style label style The name of the style for the label of the corresponding Item. 1.0
before-layout left | top left, horizontal-center, h-center, hcenter, center, right, top, vertical-center, v-center, vcenter, bottom, horizontal-expand, h-expand, hexpand, expand, vertical-expand, v-expand, vexpand, horizontal-shrink, h-shrink, hshrink, vertical-shrink, v-shrink, vshrink, newline-after, newline-before The layout of the before element when if should differ from the the content layout. Note that the vertical layout is only applicable when the before element is higher than the actual content. 2.3.1
after-layout left | top left, horizontal-center, h-center, hcenter, center, right, top, vertical-center, v-center, vcenter, bottom, horizontal-expand, h-expand, hexpand, expand, vertical-expand, v-expand, vexpand, horizontal-shrink, h-shrink, hshrink, vertical-shrink, v-shrink, vshrink, newline-after, newline-before The layout of the after element when if should differ from the the content layout. Note that the vertical layout is only applicable when the after element is higher than the actual content. 2.3.1
before-width - dimension (px, %), e.g. 3.5% The width of the before element which defaults to the width of the before image. 2.3.1
inline-label false true, false Inlines the label of an item, so that the content will be on the same row (or at least start on the same row). The label can only occupy 90% or less of the available width, otherwise this setting is ignored. 2.1
landscape-style null style The name of the style for an item in landscape mode (when the screen is more wide than high). 2.1.1
max-height - dimension (px, %), e.g. 3.5% The maximum content height of an item. Note that in conformance with the web CSS standard for percentage values the available width is being used. If you would like to use the available height for measurements, please set the preprocessing variable 'polish.Item.useHeightInsteadOfWidth' to 'true'. 1.3
max-item-height - dimension (px, %), e.g. 3.5% The maximum complete height of an item. Note that in conformance with the web CSS standard for percentage values the available width is being used. If you would like to use the available height for measurements, please set the preprocessing variable 'polish.Item.useHeightInsteadOfWidth' to 'true'. 2.2
max-item-width - dimension (px, %), e.g. 3.5% The maximum complete width of an item. 2.2
max-width - dimension (px, %), e.g. 3.5% The maximum content width of an item. 1.3
min-height - dimension (px, %), e.g. 3.5% The minimum content height of an item. Note that in conformance with the web CSS standard for percentage values the available width is being used. If you would like to use the available height for measurements, please set the preprocessing variable 'polish.Item.useHeightInsteadOfWidth' to 'true'. 1.3
min-item-height - dimension (px, %), e.g. 3.5% The minimum complete height of an item. Note that in conformance with the web CSS standard for percentage values the available width is being used. If you would like to use the available height for measurements, please set the preprocessing variable 'polish.Item.useHeightInsteadOfWidth' to 'true'. 2.2
min-item-width - dimension (px, %), e.g. 3.5% The minimum complete width of an item. 2.2
min-width - dimension (px, %), e.g. 3.5% The minimum content width of an item. 1.3
opacity 100% dimension (px, %), e.g. 3.5% The opacity of an item between 0 (fully transparent) and 100% / 255 (fully opaque). 1.3
portrait-style null style The name of the style for an item in portrait mode (when the screen is more high than wide). 2.1.1
press-all false true, false Presses all children items with their specific :pressed style when the parent container is pressed even when those items are not interactive. 2.2
pressed-style - style The style which indicates that an item is being pressed, usually applied with a [style-name]:pressed construct. 2.0
rowspan 1 integer The number of rows wich are used by the item within a table. 1.3
scroll-duration 300ms time The duration of a scroll animation. 2.3
scroll-mode smooth normal, smooth Enables or disables the smooth scrolling function. 1.3
show-delay 0ms time Delays a show notification for the included items, this is typically used in combination with CSS animations that are triggered on show. 2.1
skip-set-clip false true, false Use this to deactivate the setting of the clipping for CustomItems. Usually the clip will be set for the exact content dimensions of the item. Deactivating it can be useful if you need to paint over the content area as well. 1.3
view-type - carousel, center, coverflow, fade-in, fade-out, fisheye, grayout, midp2, numbered, particle, scroll, shuffle, size-decrease, size-increase, slide, tabbed, text, verticalfixed Defines another visualization for an Item or a Screen. 1.3
view-type-auto-traversal false true, false Allows autotraversel for a container view. 2.0
view-type-sequential-traversal false true, false Defines if the cells of a table can only be traversered in sequential order. By default you can move to the next row by pressing down - when the sequential-traversal is enabled pressing down will move the focus to the next item instead. Only applicable when the columns attribute is being used. 2.0
visible true true, false Toggles the visibility of an item. When an item is invisible, it will not occupy any space. 2.0
visited-style null style The name of the style for an item that has been visited - meaning that it's default command has been triggered. This is usually applied with a [style-name]:visited style definition. 2.1.1
x-adjust 0px dimension (px, %), e.g. 3.5% The horizontal position adjustment of an item, use a negative value to move it to the left. 2.1
y-adjust 0px dimension (px, %), e.g. 3.5% The vertical position adjustment of an item, use a negative value to move it to the top. 2.1

Programming

The following example shows the use of a TreeItem:

public void createTree( Form form ) {
	//#style mailTree
	TreeItem tree = new TreeItem( null );
	//#style mailbox
	Item node = tree.appendToRoot("Inbox", null);
	addMessage(tree, node, "Bill Gates", "What's next?", "After conquering the world, what's left?" );
	addMessage(tree, node, "Stephen Hawkings", "Black Holes",  "They are my favourite!" );
	addMessage(tree, node, "David Byrne", "String Theory", "Or is it m-theory with multidimensional branes?!" );

	//#style mailbox
	node = tree.appendToRoot("Outbox", null);
	addMessage(tree, node, "Enough Software", "J2ME Polish",  "Powerful, Flexible, Extensible.");

	//#style mailbox
	node = tree.appendToRoot("Sent", null);
	addMessage(tree, node, "Steve Jobs", "iPhone?", "Gimme that phone, please :-)  - and don't forget the Java support!"  );

	form.append( tree );
}

private void addMessage(TreeItem tree, Item node, String from, String subject, String text ) {
	Item subjectItem;
	Item detailItem;
	//#style mailSummary
	subjectItem = tree.appendToNode(node, from, null );
	//#style mailDetail
	detailItem = new StringItem( "Subject: ", subject);
	tree.appendToNode( subjectItem, detailItem );
	//#style mailDetail
	detailItem = new StringItem( "Text: ", text);
	tree.appendToNode( subjectItem, detailItem );
}

Please refer to the "email" sample application for a working example.

JavaDoc