Creation

Example dialog
Creation of the dialog controls can be done using Application method dialog(...).

dialog_example.hejs
var result = dialog('@<dialog title="Test dialog"> \
	<button title="&amp;OK" returnval="ok" default="true"/> \
	<button title="&amp;Cancel" returnval="cancel"/> \
	</dialog>@');

Supported controls

HippoEDIT supports basic set of UI and layout controls for creating minimal user interface for interacting with a user. You can use them as in static form, by just passing values on dialog construction and retrieve them after dialog end or can register to UI event and get values in runtime.

  • paragraph - simple text control for drawing plain text
  • edit - input field for entering text
  • checkbox - check box control, for inclusive selection
  • radiobutton - radio button control for exclusive selection
  • button - button control
  • combobox - one line value selection drop down
  • radio_button_group - control for grouping radio buttons
  • tri_state_checkbox - check box with intermediate state
  • listbox - single selection multi line list
  • multi_listbox - multi selection multi line list
  • history_edit - edit field with history of typed entries (looks as combo box)
  • datetime - date/time picker
  • groupbox - frame control for grouping other contorls
  • image - image control for displaying embedded or external images
  • tabcontrol - tab control for UI elements grouping
  • spin - spin control (shall be bound with edit field) for increasing/decreasing numeric values
  • group - grouping of the UI elements without visual artifacts
  • columnbreak - breaking of the layout column
  • sectionbreak - breaking of the layout section
  • spacer - vertical spacer
  • hspacer - horizontal spacer

Example

Below you can find control test script, to get an idea of how to pass values to UI controls and how to retrieve them.

To execute script, open it in HippoEDIT and run Tools→Execute dialog_vars.hejs.

dialog_vars.hejs
#include "he_utils.js"	// this is include file
 
var user_val = "Test";
var val_checked = true;
var tri_val_checked = eCheckStateIndeterminate;
var optionb2 = true;
var rbgroup = 3;
var comboindex = 2;
var combotext="Freeform List";
var listboxindex = 0;
//var multi_listboxindex = "0,2";
var multi_listboxindex = js2ax(new Array(0,2));
var varStorage = new Storage();
varStorage.write("user_val2", "Some second Test");
var dialog_template =
'@<dialog title="Test dialog" resizable="true" contexthelp="true" id="testdlg"> \
   <edit id="user_val" /> \
   <edit /> \
   <edit id="user_val2" /> \
   <edit id="user_val3" cuebanner="This is required field" required="true"/> \
   <combobox id="combotext2" cuebanner="This is required combo" required="true" autocomplete="filesystem"> \
		<item text="Item 1"/> \
		<item text="Item 2"/> \
		<item text="Item 3"/> \
		<item text="Item 4"/> \
		<item text="Item 5"/> \
   </combobox> \
   <checkbox title="Never show me anything ever again" checked="true" id="val_checked"/> \
   <tri_state_checkbox title="Maybe never show me anything again" state="indeterminate" id="tri_val_checked"/> \
   <radiobutton title="Option B1" group="true" id="optionb1"/> \
   <radiobutton title="Option B2" id="optionb2"/> \
   <radiobutton title="Option B3" id="optionb3"/> \
   <radio_button_group selected_index="0" id="rbgroup"> \
   		<item text="Option 1"/> \
   		<item text="Option 2"/> \
		<columnbreak/> \
   		<item text="Option 3"/> \
   		<item text="Option 4"/> \
   </radio_button_group> \
   <combobox id="comboindex"> \
		<item text="Item 1"/> \
		<item text="Item 2"/> \
		<item text="Item 3"/> \
		<item text="Item 4"/> \
		<item text="Item 5"/> \
   </combobox> \
   <combobox id="combotext"> \
		<item text="Item 1"/> \
		<item text="Item 2"/> \
		<item text="Item 3"/> \
		<item text="Item 4"/> \
		<item text="Item 5"/> \
   </combobox> \
   <listbox selected_index="1" id="listboxindex"> \
		<item text="Item 1"/> \
		<item text="Item 2"/> \
		<item text="Item 3"/> \
		<item text="Item 4"/> \
		<item text="Item 5"/> \
   </listbox> \
	<multi_listbox extended_sel="true" id="multi_listboxindex" required="true"> \
		 <item text="Item 1"/> \
		 <item text="Item 2" selected="true"/> \
		 <item text="Item 3"/> \
		 <item text="Item 4" selected="true"/> \
		 <item text="Item 5"/> \
	</multi_listbox> \
   <group uniform="true" align="right"> \
	   <button title="&amp;OK" returnval="ok" default="true"/> \
	   <button title="&amp;Cancel" returnval="cancel"/> \
   </group> \
</dialog>@';
 
Output().clear();
 
Output().writeln("Dialog returns: " + dialog(dialog_template, varStorage));
Output().writeln("user_val : " + varStorage.read("user_val"));
Output().writeln("user_val2: " + varStorage.read("user_val2"));
Output().writeln("Variable user_val: " + user_val);
Output().writeln("Variable checked: " + val_checked);
Output().writeln("Variable tri_val_checked: " + tri_val_checked);
Output().writeln("Variable optionb2: " + optionb2);
Output().writeln("optionb3: " + varStorage.read("optionb3"));
Output().writeln("optionb1: " + varStorage.read("optionb1"));
Output().writeln("Variable rbgroup: " + rbgroup);
Output().writeln("Variable comboindex: " + comboindex);
Output().writeln("Variable combotext: " + combotext);
Output().writeln("Variable listboxindex: " + listboxindex);
Output().writeln("Variable multi_listboxindex: " + ax2js(multi_listboxindex));
 
Output().writeln("--------------------------------------------------------------");
var aValues = ax2js(varStorage.Values);
for (i = 1; i < aValues.length; i++)
	Output().writeln(aValues[i].Name + " = " + aValues[i].Value);