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
{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.
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.
imageMedia
The image Media object that should be displayed inside the component.
mediaOptions
Options to scale the image Media object that is displayed inside the component.
onDoubleClick
The method that is executed when the component is double clicked.
onRightClick
The method that is executed when the component is right clicked.
printSliding
Enables an element to resize based on its content and/or move when printing.
rolloverCursor
The cursor that is shown as the mouse is rolled over the component.
rolloverImageMedia
The roll over image Media object used.
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.
verticalAlignment
The vertical alignment of the text inside the component.
{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
{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
var label = form.newLabel('You are viewing record no. %%parent_table_id%%. You are running on server %%serverURL%%.', 10, 10, 600, 100); label.displaysTags = 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); 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 label = form.newLabel('', 10, 10, 100, 100); label.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 ballBytes = plugins.file.readFile('d:/ball.jpg'); var ballImage = solutionModel.newMedia('ball.jpg', ballBytes); var label = form.newLabel('', 10, 10, 100, 100); label.imageMedia = ballImage;
Sample
var labelOne = form.newLabel('Label One', 10, 10, 100, 20); var fieldOne = form.newField('parent_table_id', JSField.TEXT_FIELD, 120, 10, 100, 20); fieldOne.name = 'fieldOne'; labelOne.labelFor = 'fieldOne'; labelOne.mnemonic = 'O';
Sample
var label = form.newLabel('Label', 10, 10, 150, 150); label.background = 'yellow'; label.margin = '10,20,30,40';
Sample
// Load two images, a big one and a small one. var bigBytes = plugins.file.readFile('d:/big.jpg'); var bigImage = solutionModel.newMedia('big.jpg', bigBytes); var smallBytes = plugins.file.readFile('d:/small.jpg'); var smallImage = solutionModel.newMedia('small.jpg', smallBytes); // Put the big image in several small labels, with different media options. var smallLabelWithBigImageReduceKeepAspect = form.newLabel('', 10, 10, 50, 50); smallLabelWithBigImageReduceKeepAspect.imageMedia = bigImage; smallLabelWithBigImageReduceKeepAspect.background = 'yellow'; smallLabelWithBigImageReduceKeepAspect.mediaOptions = SM_MEDIAOPTION.REDUCE | SM_MEDIAOPTION.KEEPASPECT; var smallLabelWithBigImageReduceNoAspect = form.newLabel('', 70, 10, 50, 50); smallLabelWithBigImageReduceNoAspect.imageMedia = bigImage; smallLabelWithBigImageReduceNoAspect.background = 'yellow'; smallLabelWithBigImageReduceNoAspect.mediaOptions = SM_MEDIAOPTION.REDUCE; var smallLabelWithBigImageCrop = form.newLabel('', 130, 10, 50, 50); smallLabelWithBigImageCrop.imageMedia = bigImage; smallLabelWithBigImageCrop.background = 'yellow'; smallLabelWithBigImageCrop.mediaOptions = SM_MEDIAOPTION.CROP; // Put the small image in several big labels, with different media options. var bigLabelWithSmallImageEnlargeKeepAspect = form.newLabel('', 10, 70, 200, 100); bigLabelWithSmallImageEnlargeKeepAspect.imageMedia = smallImage; bigLabelWithSmallImageEnlargeKeepAspect.background = 'yellow'; bigLabelWithSmallImageEnlargeKeepAspect.mediaOptions = SM_MEDIAOPTION.ENLARGE | SM_MEDIAOPTION.KEEPASPECT; var bigLabelWithSmallImageEnlargeNoAspect = form.newLabel('', 10, 180, 200, 100); bigLabelWithSmallImageEnlargeNoAspect.imageMedia = smallImage; bigLabelWithSmallImageEnlargeNoAspect.background = 'yellow'; bigLabelWithSmallImageEnlargeNoAspect.mediaOptions = SM_MEDIAOPTION.ENLARGE; var bigLabelWithSmallImageCrop = form.newLabel('', 10, 290, 200, 100); bigLabelWithSmallImageCrop.imageMedia = smallImage; bigLabelWithSmallImageCrop.background = 'yellow'; bigLabelWithSmallImageCrop.mediaOptions = SM_MEDIAOPTION.CROP; // This does not do any cropping actually if the label is larger than the image.
Sample
var m = form.newMethod('function onClick() { application.output("I was clicked."); }'); var btn = form.newButton('I am a button', 10, 40, 200, 20, m); btn.mnemonic = 'B'; // When ALT-B is pressed the mouse will respond as if clicked. var labelOne = form.newLabel('Label One', 10, 10, 100, 20); var fieldOne = form.newField('parent_table_id', JSField.TEXT_FIELD, 120, 10, 100, 20); fieldOne.name = 'fieldOne'; labelOne.labelFor = 'fieldOne'; labelOne.mnemonic = 'O'; // When ALT-O is pressed the focus will move to fieldOne.
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 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
label.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
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 label = form.newLabel('Move the mouse over me', 10, 10, 200, 200); label.rolloverCursor = SM_CURSOR.HAND_CURSOR;
Sample
var ballBytes = plugins.file.readFile('d:/ball.jpg'); var ballImage = solutionModel.newMedia('ball.jpg', ballBytes); var mapBytes = plugins.file.readFile('d:/map.jpg'); var mapImage = solutionModel.newMedia('map.jpg', mapBytes); var label = form.newLabel('', 10, 10, 200, 200); label.imageMedia = mapImage; label.rolloverImageMedia = ballImage;
Sample
var m = form.newMethod('function onClick() { application.output("I was clicked."); }'); var label = form.newLabel('I am a label', 10, 10, 200, 200, m); label.rotation = 90; var btn = form.newButton('And I am a button', 10, 220, 200, 20, m); btn.rotation = 180;
Sample
// Create a form method. var m = form.newMethod('function onClick() { application.output("I was clicked."); }'); // Create a label with the method attached to its onClick event. var label = form.newLabel('I am a label', 10, 10, 200, 20, m); // By default the label does not visually react to clicks, but we can enable this. // Basically the label will now behave as a button does. label.showClick = true; // Create a button with the same method attached to its onClick event. var btn = form.newButton('And I am a button', 10, 40, 200, 20, m); // By default the button visually reacts to onClick, but we can disable this. // Then the button will behave like a label does. btn.showClick = false;
Sample
var m = form.newMethod('function onClick() { application.output("I was clicked."); }'); var label = form.newLabel('I am a label', 10, 10, 200, 20, m); label.showFocus = false; var btn = form.newButton('And I am a button', 10, 40, 200, 20, m); btn.showFocus = 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); 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
// In general the text is specified when creating the component. var label = form.newLabel('Initial text', 10, 10, 100, 20); // But it can be changed later if needed. label.text = 'Changed text';
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 topAlignedLabel = form.newLabel('TOP', 400, 10, 50, 300); topAlignedLabel.verticalAlignment = SM_ALIGNMENT.TOP; var vCenterAlignedLabel = form.newLabel('CENTER', 460, 10, 50, 300); vCenterAlignedLabel.verticalAlignment = SM_ALIGNMENT.CENTER var bottomAlignedLabel = form.newLabel('BOTTOM', 520, 10, 50, 300); bottomAlignedLabel.verticalAlignment = SM_ALIGNMENT.BOTTOM;
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')