Full projects can be coded client side only, when using the Jset client. All interfaces (components with properties, styles, and colors) and SQL views are defined with XML only. Events (client side code) & methods can be coded using a simplified syntax, directly in the component XML node. From these events, you can calso call local functions (located at the top of your XML files, after your imports), or call functions located in imported libraries.

<JSET CLASS="jset.gui.JsContainer" ID="-1" STYLE="0x30">
	<RECT X="0" Y="0" W="400" H="400"/>
</JSET>

JsContainer  details >

<JSET CLASS="jset.gui.JsScrollContainer" ID="-1" STYLE="0x200030">
	<RECT X="0" Y="0" W="400" H="400"/>
	<EVENT create{
		requestArea(0,2000);
	}>
</JSET>

JsScrollContainer  details >

<JSET CLASS="jset.gui.control.JsSplitContainer" ID="-1" POS="200" STYLE="0x1700032">
	<RECT X="0" Y="0" W="400" H="400"/>
	<COMPONENT_1>
		<JSET CLASS="jset.gui.JsContainer" ID="-1" STYLE="0x1030">
		</JSET>
	</COMPONENT_1>
	<COMPONENT_2>
		<JSET CLASS="jset.gui.JsContainer" ID="-1" STYLE="0x1030">
		</JSET>
	</COMPONENT_2>
</JSET>

JsSplitContainer  details >

<JSET CLASS="jset.gui.control.JsTab" STYLE="0x600032" NAME="tabCpn"
	LEFT="10" 
	RIGHT="10" 
	TOP="5" 
	BOTTOM="7" 
	RIGHT_STEP="0" 
	LEFT_STEP="0" 
	STEP_OVER="3
">
	<RECT X="10" Y="10" W="500" H="300"/>
	<TAB ORDER="0" CAPTION="Basic text caption" SELECTED="1">
		<JSET CLASS="jset.gui.JsContainer" STYLE="0x1030">
			<COLOR CODE="0" RGB="0xf2f2f2"/>
			<TOOLTIP>"This tab item has a basic text caption"</TOOLTIP>
		</JSET>
	</TAB>
	<TAB ORDER="1">
		<JSET CLASS="jset.gui.JsContainer" STYLE="0x1030">
			<COLOR CODE="0" RGB="0xf2f2f2"/>
			<DATA>
				<JSET CLASS="jset.gui.gadget.JsArrayRenderItem">
					<DATA>
						<JSET CLASS="jset.gui.gadget.JsImageRenderItem" PATH="/addOn/iset/ico.png"/>
					</DATA>
					<DATA>
						<JSET CLASS="jset.gui.JsTextRenderItem" CAPTION="Text caption"/>
					</DATA>
				</JSET>
			</DATA>
			<TOOLTIP>"This tab item has an ArrayRender caption."</TOOLTIP>
		</JSET>
	</TAB>
</JSET>

JsTab  details >

 JsDataCombo jset.client.data.view.JsDataCombo


<JSET CLASS="jset.client.data.view.JsDataCombo" ID="-1" STYLE="0x86200034">
	<RECT X="10" Y="10" W="160" H="20"/>
	<CONTENT DEF_STYLE="0x118"/>
	<EXPAND STEPS="10" W="200" H="200"/>
</JSET>
Use the same component for listboxes.

 JsDataGrid jset.client.data.view.JsDataGrid


<JSET CLASS="jset.client.data.view.JsDataGrid" ID="-1" STYLE="0x1a02c002c6000b6">
	<RECT X="10" Y="10" W="300" H="300"/>
	<CONTENT/>
	<H_SCROLL CLASS="jset.gui.control.JsScrollbar" STYLE="0x220" ID="-1"/>
	<V_SCROLL CLASS="jset.gui.control.JsScrollbar" STYLE="0x100220" ID="-1"/>
</JSET>
Use the same component for listboxes.

 JsDataGridForm jset.client.data.view.form.JsDataGridForm


<JSET CLASS="jset.client.data.view.form.JsDataGridForm" ID="-1" STYLE="0x1a02c012c6000b6">
	<RECT X="10" Y="10" W="500" H="300"/>
	<CONTENT/>
	<H_SCROLL CLASS="jset.gui.control.JsScrollbar" STYLE="0x220" ID="-1"/>
	<V_SCROLL CLASS="jset.gui.control.JsScrollbar" STYLE="0x100220" ID="-1"/>
</JSET>
Use the same component for listboxes.

 JsListBox jset.gui.control.JsListBox


 JsDataPanel jset.client.data.view.JsDataPanel


<JSET CLASS="jset.client.data.view.JsDataPanel" ID="-1" STYLE="0x860003a">
	<RECT X="10" Y="10" W="500" H="500"/>
</JSET>
Use the same component for listboxes.

 JsDataTreeBox jset.client.data.view.JsDataTreeBox


<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>
Use the same component for listboxes.

 JsDataForm jset.client.data.view.form.JsDataForm

<!-- Jset Dialogs & Windows library -->
<IMPORT@CLIENT NAME="Windows" CLASS="jset.client.lib.Windows">
<!-- A JsDataForm must be declared at the top of your XML files, after IMPORTS, not in a container -->
<FORM CLASS="jset.client.data.view.form.JsDataForm" NAME="FORM_NAME" STYLE="0">
	<VIEW NAME="VIEW_NAME" TABLE="TABLE_NAME" SOURCE="SERVICE_NAME" ASYNC="1" STYLE="0x3">
		<JOIN FROM="statusUid" TO="uid" TABLE="OBJSTATUS"/>
		<JOIN FROM="broker_usrUid" TO="uid" TABLE="USR"/>
		<JOIN FROM="owner_usrUid" TO="uid" TABLE="USR"/>
		<JOIN FROM="catUid" TO="uid" TABLE="CAT"/>
		<JOIN FROM="sttUid" TO="uid" TABLE="STT">
			<JOIN FROM="ctrUid" TO="uid" TABLE="CTR"/>
		</JOIN>
	</VIEW>
	<EVENT ACTION{trace('triggered when a record is selected');}>
	<EVENT END_EDIT {
		trace('allows to abort insert or update of a record, or set some fields values before update.');
		trace('END_EDIT event is not null so user did not click on form cancel button.');
		trace(event);
	}>
	<EVENT CHANGE
	{
		trace('record has been modified or created.');
		trace(getControl(event).getData();
	}>
	<EVENT DELETE
	{
		trace('allows you to abort delete operation.');
		icon=Windows.MB_WARNING;
		buttons=Windows.MB_YESNO;
		dlg=new Windows.msgBox(caption,message,icon+buttons);
		btn=dlg.doModal();
		if(btn != ID_YES) return false;
	}>
</FORM>

go to first record loads first record in form

<JSET CLASS="jset.gui.control.JsButton" STYLE="0xb00132" FORM_FIELD="FORM_NAME.#first">
	<RECT X="0" Y="0" W="30" H="22"/>
	<CONSTRAINT W="0" H="0"/>
	<TOOLTIP>First record</TOOLTIP>
	<DATA>
		<JSET CLASS="jset.gui.gadget.JsImageRenderItem" PATH="form/first.gif"/>
	</DATA>
</JSET>

JsButton  details >

go to previous record loads previous record in form

<JSET CLASS="jset.gui.control.JsButton" STYLE="0xb00132" FORM_FIELD="FORM_NAME.#prev">
	<RECT X="35" Y="0" W="75" H="22"/>
	<CONSTRAINT W="0" H="0"/>
	<TOOLTIP>Previous record</TOOLTIP>
	<DATA>
		<JSET CLASS="jset.gui.gadget.JsArrayRenderItem">
			<DATA><JSET CLASS="jset.gui.gadget.JsImageRenderItem" PATH="/form/prev.gif"/></DATA>
			<DATA><JSET CLASS="jset.gui.JsTextRenderItem" CAPTION="Previous"/></DATA>
		</JSET>
	</DATA>
</JSET>

JsButton  details >

go to next record loads next record in form

<JSET CLASS="jset.gui.control.JsButton" STYLE="0xb00132" FORM_FIELD="FORM_NAME.#next">
	<RECT X="115" Y="0" W="75" H="22"/>
	<CONSTRAINT W="0" H="0"/>
	<TOOLTIP>Next record</TOOLTIP>
	<DATA>
		<JSET CLASS="jset.gui.gadget.JsArrayRenderItem">
			<DATA><JSET CLASS="jset.gui.JsTextRenderItem" CAPTION="Next"/></DATA>
			<DATA><JSET CLASS="jset.gui.gadget.JsImageRenderItem" PATH="/form/next.gif"/></DATA>
		</JSET>
	</DATA>
</JSET>

JsButton  details >

go to last record loads last record in form

<JSET CLASS="jset.gui.control.JsButton" STYLE="0xb00132" FORM_FIELD="FORM_NAME.#next">
	<RECT X="115" Y="0" W="75" H="22"/>
	<CONSTRAINT W="0" H="0"/>
	<TOOLTIP>Next record</TOOLTIP>
	<DATA>
		<JSET CLASS="jset.gui.gadget.JsArrayRenderItem">
			<DATA><JSET CLASS="jset.gui.JsTextRenderItem" CAPTION="Next"/></DATA>
			<DATA><JSET CLASS="jset.gui.gadget.JsImageRenderItem" PATH="/form/next.gif"/></DATA>
		</JSET>
	</DATA>
</JSET>

JsButton  details >

Copy record

<JSET CLASS="jset.gui.control.JsButton" STYLE="0xb00132" FORM_FIELD="FORM_NAME.#copy">
	<RECT X="255" Y="0" W="60" H="22"/>
	<CONSTRAINT W="0" H="0"/>
	<DATA>
		<JSET CLASS="jset.gui.gadget.JsArrayRenderItem">
			<DATA><JSET CLASS="jset.gui.gadget.JsImageRenderItem" PATH="/form/copy.gif"/></DATA>
			<DATA><JSET CLASS="jset.gui.JsTextRenderItem" CAPTION="Copy"/></DATA>
		</JSET>
	</DATA>
	<TOOLTIP>"Copy record"</TOOLTIP>
</JSET>

JsButton  details >

New record

<JSET CLASS="jset.gui.control.JsButton" STYLE="0xb00132" FORM_FIELD="FORM_NAME.#new">
	<RECT X="320" Y="0" W="60" H="22"/>
	<FONT SIZE="<: session['fontSizeXml']>"/>
	<DATA>
		<JSET CLASS="jset.gui.gadget.JsArrayRenderItem">
			<DATA><JSET CLASS="jset.gui.gadget.JsImageRenderItem" PATH="/form/new.gif"/></DATA>
			<DATA><JSET CLASS="jset.gui.JsTextRenderItem" CAPTION="New"/></DATA>
		</JSET>
	</DATA>
	<TOOLTIP>"New record"</TOOLTIP>
</JSET>

JsButton  details >

Paste record

<JSET CLASS="jset.gui.control.JsButton" STYLE="0xb00132" FORM_FIELD="FORM_NAME.#paste">
	<RECT X="390" Y="0" W="60" H="22"/>
	<CONSTRAINT W="0" H="0"/>
	<DATA>
		<JSET CLASS="jset.gui.gadget.JsArrayRenderItem">
			<DATA><JSET CLASS="jset.gui.gadget.JsImageRenderItem" PATH="/form/paste.gif"/></DATA>
			<DATA><JSET CLASS="jset.gui.JsTextRenderItem" CAPTION="Paste"/></DATA>
		</JSET>
	</DATA>
	<TOOLTIP>"Paste record"</TOOLTIP>
</JSET>

JsButton  details >

Delete record

<JSET CLASS="jset.gui.control.JsButton" STYLE="0xb00132" FORM_FIELD="FORM_NAME.#delete">
	<RECT X="480" Y="0" W="70" H="22"/>
	<CONSTRAINT W="0" H="0"/>
	<DATA>
		<JSET CLASS="jset.gui.gadget.JsArrayRenderItem">
			<DATA><JSET CLASS="jset.gui.gadget.JsImageRenderItem" PATH="/form/delete.gif"/></DATA>
			<DATA><JSET CLASS="jset.gui.JsTextRenderItem" CAPTION="Delete"/></DATA>
		</JSET>
	</DATA>
	<TOOLTIP>"Delete record"</TOOLTIP>
</JSET>

JsButton  details >

Save record

<JSET CLASS="jset.gui.control.JsButton" STYLE="0xb08132" FORM_FIELD="FORM_NAME.#save">
	<RECT X="-1" Y="0" W="70" H="22"/>
	<CONSTRAINT W="75" H="0"/>
	<DATA>
		<JSET CLASS="jset.gui.gadget.JsArrayRenderItem">
			<DATA><JSET CLASS="jset.gui.gadget.JsImageRenderItem" PATH="form/save.gif"/></DATA>
			<DATA><JSET CLASS="jset.gui.JsTextRenderItem" CAPTION="Save"/></DATA>
		</JSET>
	</DATA>
	<TOOLTIP>"Save record"</TOOLTIP>
</JSET>

JsButton  details >

Cancel (new or changes)

<JSET CLASS="jset.gui.control.JsButton" STYLE="0xb08132" FORM_FIELD="FORM_NAME.#cancel">
	<RECT X="-1" Y="0" W="70" H="22"/>
	<CONSTRAINT W="0" H="0"/>
	<DATA>
		<JSET CLASS="jset.gui.gadget.JsArrayRenderItem">
			<DATA><JSET CLASS="jset.gui.gadget.JsImageRenderItem" PATH="form/cancel.gif"/></DATA>
			<DATA><JSET CLASS="jset.gui.JsTextRenderItem" CAPTION="Cancel"/></DATA>
		</JSET>
	</DATA>
	<TOOLTIP>"Cancel changes"</TOOLTIP>
</JSET>

JsButton  details >


 Client side XML views client side XML views (for client side data components)


 Server side XML views server side XML result set (for client side data components)


 JsExpandCalendar jset.gui.gadget.JsExpandCalendar


<JSET CLASS="jset.gui.gadget.JsExpandCalendar" ID="-1" STYLE="0x240ea200034">
	<RECT X="10" Y="10" W="140" H="20"/>
	<EXPAND STEPS="10" W="100" H="100"/>
</JSET>

 JsDatePicker jset.gui.gadget.JsDatePicker


<JSET CLASS="jset.gui.gadget.JsDatePicker" ID="-1" STYLE="0x30">
	<RECT X="10" Y="10" W="150" H="150"/>
</JSET>

 JsNumberEdit jset.gui.gadget.JsNumberEdit


<JSET CLASS="jset.gui.gadget.JsNumberEdit" ID="-1" STYLE="0x6000000ba">
	<RECT X="10" Y="10" W="80" H="20"/>
	<DATA>
		"0"
	</DATA>
	<TAB>
		<JSET CLASS="jset.gui.control.JsSimpleTabPosition" SPACE="40"/>
	</TAB>
</JSET>

 JsSpinEdit jset.gui.gadget.JsSpinEdit


<JSET CLASS="jset.gui.gadget.JsSpinEdit" ID="-1" STYLE="0x38">
	<RECT X="10" Y="10" W="80" H="20"/>
	<DATA>
		"0"
	</DATA>
</JSET>

 JsWordPadEdit jset.client.ctrl.wordpad.JsWordPadEdit


<JSET CLASS="jset.client.ctrl.wordpad.JsWordPadEdit" ID="-1" STYLE="0x3c30c6000ba">
	<RECT X="10" Y="10" W="500" H="500"/>
	<H_SCROLL CLASS="jset.gui.control.JsScrollbar" STYLE="0x230" ID="-1" SCREEN="498.0"/>
	<TAB>
		<JSET CLASS="jset.client.ctrl.wordpad.JsWordPadTab"/>
	</TAB>
</JSET>

 JsTextArea jset.gui.control.JsTextArea


<JSET CLASS="jset.gui.control.JsTextArea" ID="-1" STYLE="0x20c6000ba">
	<RECT X="10" Y="10" W="150" H="80"/>
	<TAB>
		<JSET CLASS="jset.gui.control.JsSimpleTabPosition" SPACE="40"/>
	</TAB>
</JSET>

 JsEdit jset.gui.control.JsEdit


<JSET CLASS="jset.gui.control.JsEdit" ID="-1" STYLE="0x6000000ba">
	<RECT X="10" Y="10" W="170" H="20"/>
	<TAB>
		<JSET CLASS="jset.gui.control.JsSimpleTabPosition" SPACE="40"/>
	</TAB>
</JSET>

 JsXmlTextArea jset.client.ctrl.editor.JsXmlTextArea


<JSET CLASS="jset.client.ctrl.editor.JsXmlTextArea" ID="-1" STYLE="0x34c6000ba">
	<RECT X="10" Y="10" W="480" H="150"/>
	<H_SCROLL CLASS="jset.gui.control.JsScrollbar" ID="-1" SCREEN="306.0"/>
	<TAB>
		<JSET CLASS="jset.gui.control.JsSimpleTabPosition" SPACE="40"/>
	</TAB>
</JSET>

 JsDialog jset.client.window.JsDialog


<JSET CLASS="jset.client.window.JsDialog" ID="-1" STYLE="0x280800b3">
	<RECT X="10" Y="10" W="200" H="200"/>
</JSET>

 JsWindow jset.client.window.JsWindow


<JSET CLASS="jset.client.window.JsWindow" ID="-1" STYLE="0xec0800b1">
	<RECT X="10" Y="10" W="200" H="200"/>
</JSET>

 JsButton jset.gui.control.JsButton


<JSET CLASS="jset.gui.control.JsButton" ID="-1" STYLE="0xa00032">
	<RECT X="0" Y="0" W="80" H="20"/>
</JSET>

 JsCheckbox jset.gui.control.JsCheckbox


<JSET CLASS="jset.gui.control.JsCheckbox" ID="-1" STYLE="0x6e00132">
	<RECT X="10" Y="10" W="80" H="20"/>
</JSET>

 JsGroupBox jset.gui.control.JsGroupBox


<JSET CLASS="jset.gui.control.JsGroupBox" ID="-1" STYLE="0x138">
	<RECT X="20" Y="10" W="200" H="200"/>
	<DATA>
		"Title"
	</DATA>
</JSET>

 JsMenu jset.gui.control.JsMenu


<JSET CLASS="jset.gui.control.JsMenu" ID="-1" STYLE="0xc6000028">
	<RECT X="10" Y="10" W="80" H="20"/>
	<EXPAND STEPS="10" W="100" H="100"/>
</JSET>

 JsProgressBar jset.gui.gadget.JsProgressBar


<JSET CLASS="jset.gui.gadget.JsProgressBar" ID="-1" STYLE="0x30">
	<RECT X="10" Y="10" W="299" H="20"/>
</JSET>

 JsRadio jset.gui.control.JsRadio


<JSET CLASS="jset.gui.control.JsRadio" STYLE="0xae00132" ID="-1" GROUP="root_default">
	<RECT X="10" Y="10" W="80" H="20"/>
	<DATA>
		"label"
	</DATA>
</JSET>

 JsStatic jset.gui.control.JsStatic


<JSET CLASS="jset.gui.control.JsStatic" ID="-1" STYLE="0x800130">
	<RECT X="10" Y="10" W="80" H="20"/>
</JSET>

 JsTreeSorter jset.gui.control.JsTreeSorter


 COMPONENTS PROPERTIES

You can dynamically get/set the data of a non JsData componment. For example, you can set in code the caption of a JsButton.

  JsTextRenderItem

<DATA>
	<JSET CLASS="jset.gui.JsTextRenderItem" CAPTION="Go to home"/>
</DATA>

  JsImageRenderItem

<DATA>
	<JSET CLASS="jset.gui.gadget.JsImageRenderItem" PATH="/iset/browse/home.gif"/>
</DATA>

  JsSymbolRenderItem

  JsArrayRenderItem to combine different renders into one mixed render

<DATA>
	<JSET CLASS="jset.gui.gadget.JsArrayRenderItem">
		<DATA>
			<JSET CLASS="jset.gui.gadget.JsImageRenderItem" PATH="/iset/browse/home.gif"/>
		</DATA>
		<DATA>
			<JSET CLASS="jset.gui.JsTextRenderItem" CAPTION="Go to home"/>
		</DATA>
	</JSET>
</DATA>

Styles define the alignment, more help is coming...

 COMPONENTS STYLES

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.
0x6030
"/>

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


 COMPONENTS COLORS

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"/>