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);
|
|
|
|
|
Table Body (tbody) |
---|
id | horizontalAlignment |
---|
class | node |
---|
| Table Row (tr) |
---|
| Table Cell (td) |
---|
horizontalAlignment |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Horizontal alignment of the text inside the component. Can be one of LEFT, CENTER or RIGHT. Note that this property does not refer to the horizontal alignment of the component inside the form. |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Sample
Div |
---|
| Code Block |
---|
|
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;
|
|
|
|
|
Table Body (tbody) |
---|
| Table Row (tr) |
---|
| Table Cell (td) |
---|
The image Media object that should be displayed inside the component. |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Sample
Div |
---|
| Code Block |
---|
|
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;
|
|
|
|
|
Table Body (tbody) |
---|
| Table Row (tr) |
---|
| Table Cell (td) |
---|
Some components can be set to be labels of other components. This is useful in two situations. In table view mode it is used for constructing the header of the table. In record view mode, by setting mnemonics on the label, keyboard shortcuts can be used to set the focus to fields. |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Sample
Div |
---|
| Code Block |
---|
|
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';
|
|
|
|
|
Table Body (tbody) |
---|
| Table Row (tr) |
---|
| Table Cell (td) |
---|
The margins of the component. They are specified in this order, separated by commas: top, right, bottom, left. |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Sample
Div |
---|
| Code Block |
---|
|
var label = form.newLabel('Label', 10, 10, 150, 150);
label.background = 'yellow';
label.margin = '10,20,30,40';
|
|
|
|
|
Table Body (tbody) |
---|
| Table Row (tr) |
---|
| Table Cell (td) |
---|
Options to scale the image Media object that is displayed inside the component. Can be set to one or a combination of CROP, REDUCE, ENLARGE and KEEPASPECT. REDUCE will scale down the image if the component is smaller than the image. REDUCE combined with KEEPASPECT will reduce the image, but keep its aspect ratio. This is useful when the component has other proportions than the image. ENLARGE will scale up the image if the component is larger than the image. ENLARGE combined with KEEPASPECT will scale up the image while keeping its aspect ratio. CROP will leave the image at its original size. If the component is smaller than the image this will result in only a part of the image showing up. |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Sample
Div |
---|
| Code Block |
---|
|
// 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.
|
|
|
|
|
Table Body (tbody) |
---|
| Table Row (tr) |
---|
| Table Cell (td) |
---|
The keyboard shortcut that activates this component. A letter must be specified, and the actual shortcut will be combination of ALT + the specified letter. This property can be used in two ways. Normally the keyboard shortcut activates the onClick event of the component. But if the "labelFor" property is set for the component, then the keyboard shortcut will move the focus to the component whose label this component is. |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Sample
Div |
---|
| Code Block |
---|
|
var m = form.newFormMethod('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.
|
|
|
|
|
Table Body (tbody) |
---|
| Table Row (tr) |
---|
| Table Cell (td) |
---|
The name of the component. Through this name it can also accessed in methods. |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Sample
Div |
---|
| Code Block |
---|
|
var form = solutionModel.newForm('someForm', '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';
|
|
|
|
|
Table Body (tbody) |
---|
| Table Row (tr) |
---|
| Table Cell (td) |
---|
The method that is executed when the component is clicked. |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Sample
Div |
---|
| Code Block |
---|
|
var doNothingMethod = form.newFormMethod('function doNothing() { application.output("Doing nothing."); }');
var onClickMethod = form.newFormMethod('function onClick(event) { application.output("I was clicked at " + event.getTimestamp()); }');
var onDoubleClickMethod = form.newFormMethod('function onDoubleClick(event) { application.output("I was double-clicked at " + event.getTimestamp()); }');
var onRightClickMethod = form.newFormMethod('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;
|
|
|
|
|
Table Body (tbody) |
---|
| Table Row (tr) |
---|
| Table Cell (td) |
---|
onDoubleClick |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
The method that is executed when the component is double clicked. |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Sample
Div |
---|
| Code Block |
---|
|
var doNothingMethod = form.newFormMethod('function doNothing() { application.output("Doing nothing."); }');
var onClickMethod = form.newFormMethod('function onClick(event) { application.output("I was clicked at " + event.getTimestamp()); }');
var onDoubleClickMethod = form.newFormMethod('function onDoubleClick(event) { application.output("I was double-clicked at " + event.getTimestamp()); }');
var onRightClickMethod = form.newFormMethod('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;
|
|
|
|
|
Table Body (tbody) |
---|
| Table Row (tr) |
---|
| Table Cell (td) |
---|
The method that is executed when the component is rendered. |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Sample
Div |
---|
| Code Block |
---|
|
label.onRender = form.newFormMethod('function onRender(event) { event.getElement().bgcolor = \'#00ff00\' }');
|
|
|
|
|
Table Body (tbody) |
---|
| Table Row (tr) |
---|
| Table Cell (td) |
---|
onRightClick |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
The method that is executed when the component is right clicked. |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Sample
Div |
---|
| Code Block |
---|
|
var doNothingMethod = form.newFormMethod('function doNothing() { application.output("Doing nothing."); }');
var onClickMethod = form.newFormMethod('function onClick(event) { application.output("I was clicked at " + event.getTimestamp()); }');
var onDoubleClickMethod = form.newFormMethod('function onDoubleClick(event) { application.output("I was double-clicked at " + event.getTimestamp()); }');
var onRightClickMethod = form.newFormMethod('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;
|
|
|
|
|
Table Body (tbody) |
---|
| Table Row (tr) |
---|
| Table Cell (td) |
---|
printSliding |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Enables an element to resize based on its content and/or move when printing. The component can move horizontally or vertically and can grow or shrink in height and width, based on its content and the content of neighboring components. |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Sample
Div |
---|
| Code Block |
---|
|
var form = solutionModel.newForm('printForm', '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();
|
|
|
|
|
Table Body (tbody) |
---|
| Table Row (tr) |
---|
| Table Cell (td) |
---|
Flag that tells if the component should be printed or not when the form is printed. By default components are printable. |
|
Table Row (tr) |
---|
| Table Cell (td) |
---|
Sample
Div |
---|
| Code Block |
---|
|
var form = solutionModel.newForm('printForm', 'example_data', 'parent_table', 'null', false, 400, 300);
var printedField = form.newField('parent_table_text', JSField.TEXT_FIELD, 10, 10, 100, |
|
|
|
|
|