DO NOT EDIT THE CONTENT OF THIS PAGE DIRECTLY (EXCEPT INSIDE THE DIV BELOW WITH ID=DESCRIPTION), UNLESS YOU KNOW WHAT YOU'RE DOING.
THE STRUCTURE OF THE CONTENT IS VITAL IN BEING ABLE TO AUTO UPDATE THE CONTENT THROUGH THE DOC GENERATOR
Extends
{column:width=80px|padding=0px}{column}{column}{column}
Constants Summary
IMAGE_MEDIA
Constant for specifying the display type of a JSField.
MULTISELECT_LISTBOX
Constant for specifying the display type of a JSField.
TEXT_FIELD
Constant for specifying the display type of a JSField.
TYPE_AHEAD
Constant for specifying the display type of a JSField.
{column:width=80px|padding=0px}{column}{column}{column}
Property Summary
background
The background color of the component.
borderType
The type, color and style of border of the component.
dataProviderID
The dataprovider of the component.
displayType
The type of display used by the field.
displaysTags
Flag that enables or disables merging of data inside components using tags (placeholders).
foreground
The foreground color of the component.
horizontalAlignment
Horizontal alignment of the text inside the component.
onDataChange
Method that is executed when the data in the component is successfully changed.
onFocusGained
The method that is executed when the component gains focus.
onFocusLost
The method that is executed when the component looses focus.
onRightClick
The method that is executed when the component is right clicked.
placeholderText
The text that is displayed in field when the field doesn't have a text value.
printSliding
Enables an element to resize based on its content and/or move when printing.
scrollbars
Scrollbar options for the vertical and horizontal scrollbars.
selectOnEnter
Flag that tells if the content of the field should be automatically selected
when the field receives focus.
styleClass
The name of the style class that should be applied to this component.
toolTipText
The text displayed when hovering over the component with a mouse cursor.
transparent
Flag that tells if the component is transparent or not.
valuelist
The valuelist that is used by this field when displaying data.
{column:width=80px|padding=0px}{column}{column}{column}
Method Summary
getDesignTimeProperty()
Get a design-time property of an element.
putDesignTimeProperty()
Set a design-time property of an element.
removeDesignTimeProperty()
Clear a design-time property of an element.
{column:width=100%|padding=0px}{column}
Constants Details
Sample
var cal = form.newField('my_table_date', JSField.CALENDAR, 10, 10, 100, 20);
Sample
var vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES); vlist.customValues = "one\ntwo\nthree\nfour"; var chk = form.newField('my_table_options', JSField.CHECKS, 10, 40, 100, 50); chk.valuelist = vlist;
Sample
var vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES); vlist.customValues = "one\ntwo\nthree\nfour"; var cmb = form.newField('my_table_options', JSField.COMBOBOX, 10, 100, 100, 20); cmb.valuelist = vlist;
Sample
var html = form.newField('my_table_html', JSField.HTML_AREA, 10, 130, 100, 50);
Sample
var img = form.newField('my_table_image', JSField.IMAGE_MEDIA, 10, 190, 100, 50);
Sample
var vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES); vlist.customValues = "one\ntwo\nthree\nfour"; var list = form.newField('my_table_list', JSField.LISTBOX, 10, 280, 100, 50); list.valuelist = vlist;
Sample
var vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES); vlist.customValues = "one\ntwo\nthree\nfour"; var list = form.newField('my_table_options', JSField.MULTISELECT_LISTBOX, 10, 280, 100, 50); list.valuelist = vlist;
Sample
var pwd = form.newField('my_table_text', JSField.PASSWORD, 10, 250, 100, 20);
Sample
var vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES); vlist.customValues = "one\ntwo\nthree\nfour"; var radio = form.newField('my_table_options', JSField.RADIOS, 10, 280, 100, 50); radio.valuelist = vlist;
Sample
var rtf = form.newField('my_table_rtf', JSField.RTF_AREA, 10, 340, 100, 50);
Sample
var vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES); vlist.customValues = "one\ntwo\nthree\nfour"; var spinner = form.newField('my_spinner', JSField.SPINNER, 10, 460, 100, 20); spinner.valuelist = vlist;
Sample
var tarea = form.newField('my_table_text', JSField.TEXT_AREA, 10, 400, 100, 50);
Sample
var tfield = form.newField('my_table_text', JSField.TEXT_FIELD, 10, 460, 100, 20);
Sample
var vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES); vlist.customValues = "one\ntwo\nthree\nfour"; var tahead = form.newField('my_table_text', JSField.TYPE_AHEAD, 10, 490, 100, 20); tahead.valuelist = vlist;
{column:width=100%|padding=0px}{column}
Property Details
Sample
var form = solutionModel.newForm('mediaForm', 'db:/example_data/parent_table', null, false, 400, 300); var strechAllDirectionsLabel = form.newLabel('Strech all directions', 10, 10, 380, 280); strechAllDirectionsLabel.background = 'red'; strechAllDirectionsLabel.anchors = SM_ANCHOR.ALL; var strechVerticallyLabel = form.newLabel('Strech vertically', 10, 10, 190, 280); strechVerticallyLabel.background = 'green'; strechVerticallyLabel.anchors = SM_ANCHOR.WEST | SM_ANCHOR.NORTH | SM_ANCHOR.SOUTH; var strechHorizontallyLabel = form.newLabel('Strech horizontally', 10, 10, 380, 140); strechHorizontallyLabel.background = 'blue'; strechHorizontallyLabel.anchors = SM_ANCHOR.NORTH | SM_ANCHOR.WEST | SM_ANCHOR.EAST; var stickToTopLeftCornerLabel = form.newLabel('Stick to top-left corner', 10, 10, 200, 100); stickToTopLeftCornerLabel.background = 'orange'; stickToTopLeftCornerLabel.anchors = SM_ANCHOR.NORTH | SM_ANCHOR.WEST; // This is equivalent to SM_ANCHOR.DEFAULT var stickToBottomRightCornerLabel = form.newLabel('Stick to bottom-right corner', 190, 190, 200, 100); stickToBottomRightCornerLabel.background = 'pink'; stickToBottomRightCornerLabel.anchors = SM_ANCHOR.SOUTH | SM_ANCHOR.EAST;
Sample
// This property can be used on all types of components. // Here it is illustrated only for labels and fields. var greenLabel = form.newLabel('Green',10,10,100,50); greenLabel.background = 'green'; // Use generic names for colors. var redField = form.newField('parent_table_text',JSField.TEXT_FIELD,10,110,100,30); redField.background = '#FF0000'; // Use RGB codes for colors.
Sample
//HINT: To know exactly the notation of this property set it in the designer and then read it once out through the solution model. var field = form.newField('my_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); field.borderType = solutionModel.createLineBorder(1,'#ff0000');
Sample
// Normally the dataprovider is specified when a component is created. var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 40, 100, 20); // But it can be modified later if needed. field.dataProviderID = 'parent_table_id';
Sample
// The display type is specified when the field is created. var cal = form.newField('my_table_date', JSField.CALENDAR, 10, 10, 100, 20); // But it can be changed if needed. cal.dataProviderID = 'my_table_text'; cal.displayType = JSField.TEXT_FIELD;
Sample
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 40, 100, 20); field.displaysTags = true;
Sample
var field = form.newField('my_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); field.editable = false;
Sample
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300); var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); field.enabled = false;
Sample
var label = form.newLabel('Text here', 10, 50, 100, 20); label.fontType = solutionModel.createFont('Times New Roman',1,14);
Sample
// This property can be used on all types of components. // Here it is illustrated only for labels and fields. var labelWithBlueText = form.newLabel('Blue text', 10, 10, 100, 30); labelWithBlueText.foreground = 'blue'; // Use generic names for colors. var fieldWithYellowText = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 50, 100, 20); fieldWithYellowText.foreground = '#FFFF00'; // Use RGB codes for colors.
Sample
var labelBelow = form.newLabel('Green', 10, 10, 100, 50); labelBelow.background = 'green'; labelBelow.formIndex = 10; var fieldAbove = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 30); fieldAbove.background = '#FF0000'; fieldAbove.formIndex = 20;
Sample
var field = form.newField('my_table_number', JSField.TEXT_FIELD, 10, 10, 100, 20); field.format = '$#.00';
Sample
var form = solutionModel.newForm('someForm', 'db:/example_data/parent_table', null, false, 400, 300); var label = form.newLabel('Green', 10, 10, 100, 20); var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 40, 100, 20); label.groupID = 'someGroup'; field.groupID = 'someGroup'; forms['someForm'].elements.someGroup.enabled = false;
Sample
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); application.output('original width: ' + field.width); application.output('original height: ' + field.height); field.width = 200; field.height = 100; application.output('modified width: ' + field.width); application.output('modified height: ' + field.height);
Sample
var leftAlignedLabel = form.newLabel('LEFT', 10, 10, 300, 20); leftAlignedLabel.horizontalAlignment = SM_ALIGNMENT.LEFT; var hCenteredLabel = form.newLabel('CENTER', 10, 40, 300, 20); hCenteredLabel.horizontalAlignment = SM_ALIGNMENT.CENTER; var rightAlignedLabel = form.newLabel('RIGHT', 10, 70, 300, 20); rightAlignedLabel.horizontalAlignment = SM_ALIGNMENT.RIGHT;
Sample
var label = form.newLabel('Label', 10, 10, 150, 150); label.background = 'yellow'; label.margin = '10,20,30,40';
Sample
var form = solutionModel.newForm('someForm', 'db:/example_data/parent_table', null, false, 620, 300); var label = form.newLabel('Label', 10, 10, 150, 150); label.name = 'myLabel'; // Give a name to the component. forms['someForm'].controller.show() // Now use the name to access the component. forms['someForm'].elements['myLabel'].text = 'Updated text';
Sample
var doNothingMethod = form.newMethod('function doNothing() { application.output("Doing nothing."); }'); var onClickMethod = form.newMethod('function onClick(event) { application.output("I was clicked at " + event.getTimestamp()); }'); var onDoubleClickMethod = form.newMethod('function onDoubleClick(event) { application.output("I was double-clicked at " + event.getTimestamp()); }'); var onRightClickMethod = form.newMethod('function onRightClick(event) { application.output("I was right-clicked at " + event.getTimestamp()); }'); // At creation the button has the 'doNothing' method as onClick handler, but we'll change that later. var btn = form.newButton('I am a button', 10, 40, 200, 20, doNothingMethod); btn.onAction = onClickMethod; btn.onDoubleClick = onDoubleClickMethod; btn.onRightClick = onRightClickMethod;
Sample
var form = solutionModel.newForm('someForm', 'db:/example_data/parent_table', null, false, 620, 300); var onDataChangeMethod = form.newMethod('function onDataChange(oldValue, newValue, event) { application.output("Data changed from " + oldValue + " to " + newValue + " at " + event.getTimestamp()); }'); var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); field.onDataChange = onDataChangeMethod; forms['someForm'].controller.show();
Sample
var form = solutionModel.newForm('someForm', 'db:/example_data/parent_table', null, false, 620, 300); var onFocusLostMethod = form.newMethod('function onFocusLost(event) { application.output("Focus lost at " + event.getTimestamp()); }'); var onFocusGainedMethod = form.newMethod('function onFocusGained(event) { application.output("Focus gained at " + event.getTimestamp()); }'); var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); field.onFocusGained = onFocusGainedMethod; field.onFocusLost = onFocusLostMethod; forms['someForm'].controller.show()
Sample
var form = solutionModel.newForm('someForm', 'db:/example_data/parent_table', null, false, 620, 300); var onFocusLostMethod = form.newMethod('function onFocusLost(event) { application.output("Focus lost at " + event.getTimestamp()); }'); var onFocusGainedMethod = form.newMethod('function onFocusGained(event) { application.output("Focus gained at " + event.getTimestamp()); }'); var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); field.onFocusGained = onFocusGainedMethod; field.onFocusLost = onFocusLostMethod; forms['someForm'].controller.show()
Sample
field.onRender = form.newMethod('function onRender(event) { event.getElement().bgcolor = \'#00ff00\' }');
Sample
var doNothingMethod = form.newMethod('function doNothing() { application.output("Doing nothing."); }'); var onClickMethod = form.newMethod('function onClick(event) { application.output("I was clicked at " + event.getTimestamp()); }'); var onDoubleClickMethod = form.newMethod('function onDoubleClick(event) { application.output("I was double-clicked at " + event.getTimestamp()); }'); var onRightClickMethod = form.newMethod('function onRightClick(event) { application.output("I was right-clicked at " + event.getTimestamp()); }'); // At creation the button has the 'doNothing' method as onClick handler, but we'll change that later. var btn = form.newButton('I am a button', 10, 40, 200, 20, doNothingMethod); btn.onAction = onClickMethod; btn.onDoubleClick = onDoubleClickMethod; btn.onRightClick = onRightClickMethod;
Sample
field.placeholderText = 'Search';
Sample
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300); var slidingLabel = form.newLabel('Some long text here', 10, 10, 5, 5); slidingLabel.printSliding = SM_PRINT_SLIDING.GROW_HEIGHT | SM_PRINT_SLIDING.GROW_WIDTH; slidingLabel.background = 'gray'; forms['printForm'].controller.showPrintPreview();
Sample
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300); var printedField = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); var notPrintedField = form.newField('parent_table_id', JSField.TEXT_FIELD, 10, 40, 100, 20); notPrintedField.printable = false; // This field won't show up in print preview and won't be printed. forms['printForm'].controller.showPrintPreview()
Sample
var noScrollbars = form.newField('my_table_text', JSField.TEXT_AREA, 10, 10, 100, 100); noScrollbars.scrollbars = SM_SCROLLBAR.HORIZONTAL_SCROLLBAR_NEVER | SM_SCROLLBAR.VERTICAL_SCROLLBAR_NEVER; var neededScrollbars = form.newField('my_table_text', JSField.TEXT_AREA, 120, 10, 100, 100); neededScrollbars.scrollbars = SM_SCROLLBAR.HORIZONTAL_SCROLLBAR_AS_NEEDED | SM_SCROLLBAR.VERTICAL_SCROLLBAR_AS_NEEDED; var alwaysScrollbars = form.newField('my_table_text', JSField.TEXT_AREA, 230, 10, 100, 100); alwaysScrollbars.scrollbars = SM_SCROLLBAR.HORIZONTAL_SCROLLBAR_ALWAYS | SM_SCROLLBAR.VERTICAL_SCROLLBAR_ALWAYS;
Sample
// Create two fields and set one of them to have "selectOnEnter" true. As you tab // through the fields you can notice how the text inside the second field gets // automatically selected when the field receives focus. var fieldNoSelect = form.newField('my_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); var fieldSelect = form.newField('my_table_text', JSField.TEXT_FIELD, 10, 40, 100, 20); fieldSelect.selectOnEnter = true;
Sample
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300); var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); var style = solutionModel.newStyle('myStyle','field.fancy { background-color: yellow; }'); form.styleName = 'myStyle'; // First set the style on the form. field.styleClass = 'fancy'; // Then set the style class on the field.
Sample
// Create three fields. Based on how they are placed, by default they will come one // after another in the tab sequence. var fieldOne = form.newField('parent_table_id', JSField.TEXT_FIELD, 10, 10, 100, 20); var fieldTwo = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 40, 100, 20); var fieldThree = form.newField('parent_table_id', JSField.TEXT_FIELD, 10, 70, 100, 20); // Set the third field come before the first in the tab sequence, and remove the // second field from the tab sequence. fieldOne.tabSeq = 2; fieldTwo.tabSeq = SM_DEFAULTS.IGNORE; fieldThree.tabSeq = 1;
Sample
var form = solutionModel.newForm('someForm', 'db:/example_data/my_table', null, false, 640, 480); var field = form.newField('my_table_number', JSField.TEXT_FIELD, 10, 10, 100, 20); field.titleText = 'Column Title'; form.view = JSForm.LOCKED_TABLE_VIEW; forms['someForm'].controller.show()
Sample
var label = form.newLabel('Stop the mouse over me!', 10, 10, 200, 20); label.toolTipText = 'I\'m the tooltip. Do you see me?';
Sample
// Load an image from disk an create a Media object based on it. var imageBytes = plugins.file.readFile('d:/ball.jpg'); var media = solutionModel.newMedia('ball.jpg', imageBytes); // Put on the form a label with the image. var image = form.newLabel('', 10, 10, 100, 100); image.imageMedia = media; // Put two fields over the image. The second one will be transparent and the // image will shine through. var nonTransparentField = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 20, 100, 20); var transparentField = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 50, 100, 20); transparentField.transparent = true;
Sample
var vlist = solutionModel.newValueList('options', JSValueList.CUSTOM_VALUES); vlist.customValues = "one\ntwo\nthree\nfour"; var cmb = form.newField('my_table_options', JSField.COMBOBOX, 10, 100, 100, 20); cmb.valuelist = vlist;
Sample
var form = solutionModel.newForm('printForm', 'db:/example_data/parent_table', null, false, 400, 300); var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); field.visible = false;
Sample
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); application.output('original width: ' + field.width); application.output('original height: ' + field.height); field.width = 200; field.height = 100; application.output('modified width: ' + field.width); application.output('modified height: ' + field.height);
Sample
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); application.output('original location: ' + field.x + ', ' + field.y); field.x = 90; field.y = 90; application.output('changed location: ' + field.x + ', ' + field.y);
Sample
var field = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, 20); application.output('original location: ' + field.x + ', ' + field.y); field.x = 90; field.y = 90; application.output('changed location: ' + field.x + ', ' + field.y);
{column:width=100%|padding=0px}{column}
Method Details
getDesignTimeProperty
()
Sample
var frm = solutionModel.getForm('orders') var fld = frm.getField('fld') var prop = fld.getDesignTimeProperty('myprop')
Sample
var button_uuid = solutionModel.getForm("my_form").getButton("my_button").getUUID(); application.output(button_uuid.toString());
putDesignTimeProperty
()
Sample
var frm = solutionModel.getForm('orders') var fld = frm.getField('fld') fld.putDesignTimeProperty('myprop', 'strawberry')
removeDesignTimeProperty
()
Sample
var frm = solutionModel.getForm('orders') var fld = frm.getField('fld') fld.removeDesignTimeProperty('myprop')