<JSET CLASS="jset.client.data.view.JsDataTreeBox" STYLE="0x26658200c3a" NODE_CLASS="jset.gui.control.JsTreeItem">
	<RECT X="10" Y="10" W="180" H="450"/>
	<CONTENT DEF_STYLE="0x118"/>
</JSET>

You must also use the JsDataTreeBox for listboxes, and combos. A combo has an XML format with an additionnal EXPAND node in which you place JsDataTreeBox XML.

A tree sorter XML node can control how the tree is sorted for each level.
This SORTER works in conjunction with a set compare : setCmp(orderString); you can use within DATA CODE

The JsDataTreeBox can aslo have a NODE_CLASS="jset.gui.gadget.tree.JsExtendedTreeItem" instead of jset.gui.control.JsTreeItem
The JsExtendedTreeItem is much more powerfull than the JsTreeItem, with the following additional features:

  • A setIcons(opened,closed,empty); for use with DATA CODE is also available to override default plus/menus arrow that perform expand/collapse operations.
    The setIcons() parameters can be renders.

  • More styles are available (CONTENT_DEF), some of which can be used in code within DATA CODE, to treat tree items indidually.

  • Methods such as current.getParent() and current.getChildrenCount() become available.

MULTI levels tree data from ONE table
<JSET CLASS="jset.client.data.view.JsDataTreeBox" STYLE="0x6658200cba" NODE_CLASS="jset.gui.gadget.tree.JsExtendedTreeItem">
	<CONTENT DEF_STYLE="0x1c518"/>
	<RECT X="5" Y="5" W="150" H="400"/>
	<CONSTRAINT W="5" H="5"/>
	<FONT NAME="Verdana" SIZE="12"/>
	<COLOR CODE="0" RGB="0xFFFFFF"/>
	<COLOR CODE="6" RGB="0xd2d2FF"/>
	<COLOR CODE="8" RGB="0xd2d2FF"/>
	<COLOR CODE="9" RGB="0xE2E2FF"/>
	<VIEW NAME="VIEW_NAME" ORDER="fieldName" TABLE="TABLE_NAME" FROM="uidField" TO="parentUidField" ROOT_VALUE="0" SOURCE="Jset"/>
	<SORTER CLASS="jset.gui.control.JsTreeSorter" DEF_SORT="1" USE_COMPARE="1"/>
	<DATA CODE="
		setCmp(sortOrderValue);
		if(current.getParent()==null) setFg(0xFF0000); else setFg(0x000000);
		output=current['TABLE_NAME.fieldName'];
	"/>
</JSET>

TWO levels tree data from TWO tables
<JSET CLASS="jset.client.data.view.JsDataTreeBox" STYLE="0x6658200cba" NODE_CLASS="jset.gui.gadget.tree.JsExtendedTreeItem">
	<CONTENT DEF_STYLE="0x518"/>
	<RECT X="5" Y="5" W="150" H="400"/>
	<CONSTRAINT W="5" H="5"/>
	<FONT NAME="Verdana" SIZE="12"/>
	<COLOR CODE="0" RGB="0xFFFFFF"/>
	<COLOR CODE="6" RGB="0xd2d2FF"/>
	<COLOR CODE="8" RGB="0xd2d2FF"/>
	<VIEW NAME="VIEW_NAME" TABLE="CTN" CLAUSE="uid <> 2 and uid <> 7" FROM="uid" TO="ctnUid" SOURCE="Jset">
		<VIEW 
			TABLE="CTR" 
			CLAUSE="(isNat is null or isNat=1) AND (iso2 is not null AND iso2 <> 'AQ' AND iso2 <> 'BL'  AND iso2 <> 'JE' AND iso2 <> 'MF')"
			ORDER="ctrEN" 
			SOURCE="Jset"
		/>
	</VIEW>	
	<SORTER CLASS="jset.gui.control.JsTreeSorter" DEF_SORT="1" USE_COMPARE="1"/>
	<DATA LEVEL="0" CODE="
		s=new SymbolRender(0,0);
		opened=new ArrayRender(16,new SymbolRender(17,12));
		closed=new ArrayRender(16,new SymbolRender(16,12));
		empty=new ArrayRender(16,new SymbolRender(0,12));
		setIcons(opened,closed,empty);
		setCmp(current['CTN.ctnEN']);
		setFg(0xff9900);
		output=current['CTN.ctnEN']+' ('+current.getChildrenCount()+')';
	"/>
	<DATA LEVEL="1" CODE="
		// if(current['isActive'] == null || current['isActive'] == 0) skip; 
		cpyCtrIco=new ImageRender('/iset/ctr/'+current['uid']+'.gif');
		if(current['uid']==205) {cpyCtrIco=new ArrayRender(16,s,cpyCtrIco,s);cpyCtrIco.setSpace(2);}
		cpyCtrV=current['CTR.ctrEN'];
		if(cpyCtrV==null) cpyCtrV='';
		setCmp(cpyCtrV);
		setFg(0x000000);
		output=new ArrayRender(16,cpyCtrIco,cpyCtrV);
	"/>
</JSET>


Hex Common styles Style description
Border Shows a border (COLOR CODE 3)
Border 3d Shows a 3D border (COLOR CODE 3 & COLOR CODE 4)
Visible Shows / hides the component and its content
Enabled Enables / disables the component
Strech parent Will use all parent WIDTH and HEIGHT regardless of X, Y, W, H, CONSTRAINT W, and CONSTRAINT H.
Strech right Will use all parent WIDTH from X until (parent right border - (CONSTRAINT W)), regardless of W.
Strech bottom Will use all parent HEIGHT from Y until (parent bottom border - (CONSTRAINT H)), regardless of H.
Follow right Will stick to (parent component right border - CONSTRAINT W), regardless of X.
Follow bottom Will stick to (parent component bottom border - CONSTRAINT H), regardless of Y.
Hex Important styles Style description
Allow empty data Creates a first tree item to select nothing .
This is usefull when using a combo with a tree inside, and selection is not mandatory.
This way, a user can unselect a selected combo entry.
Block multi select Disables CTRL key for multi selection.
Double click Receives double click event.
H scroll Displays a horizontal scroll.
Keep selection Selected item keeps selected when component loses focus.
Keyfind entry Allows to select tree items by pressing a keyboard key.
Will not work if code output is different then text (such as renders).
Multi select always Performs multi tree items selection without having to hold the CTRL key.
No drag Disables draging of component.
No drop Disables droping of component.
Progressive Progressive expand / collpase effect.
Rollover Rollover effect.
Rollover always Keeps rollover even when component loses focus.
Select and rollover To have rollover and selected work simultaneously.
Select only leafs Will only allow selection of a tree item that does not have any chil, by disabling selection of a tree item if this item has at least one child.
V scroll Displays a vertical scroll.
0x6658200cba
"/>

Hex JsExtendedTreeItem (CONTENT_DEF) Style description
Box look & feel Renders tree with a box style menu effect.
Progressive Progressive expand / collapse effect.
Selectable Allows tree item selection
Single expand Expands only one branch at at time, expanding a new branch will collapse previous selected item branch.
Clic collapses Clicking on a tree item will collapse its branch.
Clic expands Clicking on a tree item will expand its branch.
Connecting dots Shows vertical line of connecting dots on the left of the branches.
No listbox style Selected & rollover effects will not start from the very beginning of the component (like in a combo with one level only) but will show a select / highlight effect that is applied on the item only (for multi trees that are not list boxes, since having more than one level).
No menu style Removes menu style look & feel.
No rollover Removes rollover.
Only branches Same as "select only leafs"
Select on collapse Selects a tree item when you click on its collapse render (setIcons(...)).
Select on expand Selects a tree item when you click on its expand render (setIcons(...)).
0x288500
"/>

CONTENT_DEF styles do not apply to component itself, but to its tree items.
Styles having green hex values can be changed in code from within DATA CODE to treat tree items individually, with setStyle(hex);
Attention, with CONTENT_DEF styles they must be all specified as there is no second true/false parameter (to add/remove style).

Style names in red means displayed state (true/false) differs from the default component state.

Code Name XML
0 Background
<COLOR CODE="0" RGB="0xD0D0D0"/>
1 Foreground
<COLOR CODE="1" RGB="0x000000"/>
2 Disabled foreground
<COLOR CODE="2" RGB="0xBEBEBE"/>
3 Dark border
<COLOR CODE="3" RGB="0x666666"/>
4 Bright border (with 3D style)
<COLOR CODE="4" RGB="0xFFFFFF"/>
5 Disabled background
<COLOR CODE="5" RGB="0xDCDCDC"/>
6 Selected foreground
<COLOR CODE="6" RGB="0xD2D2FF"/>
7 Arrow
(only when NODE="jset.gui.control.JsTreeItem")
<COLOR CODE="7" RGB="0x7C7C7C"/>
8 Kept selection (when loses focus)
<COLOR CODE="8" RGB="0xD2D2FF"/>
9 Rollover background
<COLOR CODE="9" RGB="0xE2E2FF"/>


All components receive EVENTS, which are declared after each others, within the component XML node, as follows:

<JSET CLASS="..." STYLE="..." NAME="..."/>
	<RECT .../>
	<COLOR .../>
	<EVENT built{...}>
	<EVENT create{...}>
	<EVENT ...{...}>
</JSET>


built event, for the top level component only (main)

<EVENT built{
	// test if event[0] equals 0 or 1
	if(event[0] == 1) trace('This is a new file instance, its state is the initial state');
	else trace('This is an existing file instance, its state is the last state in which it was');
	// test if event[1] param exists, see getFileInstance(path, param, reload);
	if(event[1] != null) param = event[1];
}>


create event, to know when a component is created.

<EVENT create{
	trace('component has been created');
}>


loaded event, to know when a dataCpn download has completed.

<EVENT action{
	record=getSlected();
	if(record != null)
	{
		uid=record.getAttribute('uid');
		lookupValue=record.getAttribute('LOOKUP_TABLE.lookupField');
	}
}>


action event, to retrieve dataCpn selected record values.

// action is one of the most important events
<EVENT action{
	type = getType(this);
	trace(type);
	type = type.lower();
	trace(type);
	if(type.index('data') != -1)
	{
		// component having this event is a data component.
		record = getSelected();
		if(record != null)
		{
			value=record['field'];
			lookupValue=record['LOOKUP_TABLE.lookupField'];
		}
	}
	else
	{
		if(type.index('tab') == -1)
		// component is a JsTab
		tabItem = getSelected();
		// get position of tab
		for(t=0; t < tabCpn.getTabs().length();t++)
		{
			tab = tabCpn.getTabs()[t];
			if(tab == tabItem) {tabItemPos = t; break;}
		}
	}
}>


dbl_click event, to receive dataCpn double clicks (style must be set).

// action is one of the most important events
<EVENT action{
	type = getType(this);
	trace(type);
	type = type.lower();
	trace(type);
	if(type.index('data') != -1)
	{
		// component having this event is a data component.
		record = getSelected();
		if(record != null)
		{
			value=record['field'];
			lookupValue=record['LOOKUP_TABLE.lookupField'];
		}
	}
	else
	{
		if(type.index('tab') == -1)
		// component is a JsTab
		tabItem = getSelected();
		// get position of tab
		for(t=0; t < tabCpn.getTabs().length();t++)
		{
			tab = tabCpn.getTabs()[t];
			if(tab == tabItem) {tabItemPos = t; break;}
		}
	}
}>




Method name Method description   Method name Method description
cpn.getColor(code); Returns a component color.   cpn.setColor(code, value); Changes a component color.
cpn.getRect(); Returns an array of 4 elements, X, Y , W, and H.   cpn.setRect(X,Y,W,H); Sets position and size of a component.
Use null to not modify one of the params.
cpn.hasStyle(style); Returns true if component has the style.   cpn.setStyle(style, true/false); Changes a component style.
Use true or 1 to add, false of 0 to remove.
dataCpn.getSelected(); Returns the selected record.   dataCpn.setSelected(viewObj.getByCol(field,value)); Selects a dataCpn depdending on view record.
Use dataCpn.setSelected(int) to select a record by its position.


All client side data components must have a view to display result sets. There are two ways to populate content of a data component.
You can declare the VIEW settings in the component XML node, in which case the data is automatically downloaded when an XML file is instance is loaded with getFileInstance() and added to a container with .add();

<JSET CLASS="...Data...." .../>
	<VIEW NAME="CONTACTS_VIEW" TABLE="CONTACTS" SOURCE="DatabaseDynamicServiceName" ASYNC="1" STYLE="0x1">
		<JOIN FROM="countryUid" TO="uid" TABLE="COUNTRIES">
			<JOIN FROM="continentUid" TO="uid" TABLE="CONTINENTS"/>
		</JOIN>
		<JOIN FROM="companyUid" TO="uid" TABLE="COMPANIES">
			<JOIN FROM="sectorUid" TO="uid" TABLE="SECTORS"/>
		</JOIN>
	</VIEW>
	<DATA CODE="..."/>
</JSET>

JOINS declared in XML format (on Dynamic services, see host config file) are LEFT JOINS. These JOINS are performed by the Jset server, and result sets updates are automatically reflected in real-time in the Jset client data components.

SQL views consists of defining the view information, vs. XML views which do represent the result sets themselves.

Views declared in XML format are the easiest to use, and download data

Hex View style Description
0x10 Allow empty new
0x1 Auto delete The view is deleted when it component is unloaded (such as with fileInstance.close(); or when closing a tab or a window)
0x4 Delay schema
0x2 Share select
0x8 Wait in load

View method Method description
getView(viewName); Returns a view object.
viewObj.getByCol(field,value[,field2,value2,...]); Returns a view record.
Ex:


Data components, text and number edits, and buttons can be binded to a form.
You do not need to place the binded component within the XML forms tags or at any special place, as forms are declared on the top of your XML file.

All you need to do is add the FORM_FIELD node to your component XML, with the FORM_NAME.fieldName.
The fieldName must be a field of the FORM VIEW main table, not a field of a lookup table.

...



Containers


 JsContainer

 JsExpand

 JsScrollContainer

 JsSplitContainer

 JsTab


 JsDialog

 JsWindow


Data (SQL & XML result sets)


 JsDataCombo

 JsDataGrid

 JsDataGridForm

 JsListBox

 JsDataPanel

 JsDataTreeBox


 JsDataForm


Text, number, &date


 JsWordPadEdit

 JsTextArea

 JsEdit

 JsXmlTextArea


 JsNumberEdit

 JsSpinEdit


 JsExpandCalendar

 JsDatePicker


Other components


 JsButton

 JsCheckbox

 JsGroupBox

 JsMenu

 JsProgressBar

 JsRadio

 JsStatic