Control
The following Instance Methods must be called on an instance of a ctrl object. This is a JavaScript control object, and is what you are creating.
As such, you can call these from your control's class methods using the this keyword.
Example
ctrl.myMethod = function() {
var elem = this.getClientElem(); // "this" in this context is an instance of the ctrl_generic control.
} ;There are also several Inherited Methods which you can implement your class to handle specific events.
The following are inherited methods which you can implement in your control, in order to catch specific 'events'.
You can add such an inherited method as shown below:
<ctrl_name>.prototype.<method_name> = function() {
//Custom code here
};These are methods in the base class, which you are overriding.
If, in your handling of the 'event', you wish to fall back to default handling, you need to call the superclass version of the method, passing an instance of your control object, followed by the parameters you received.
Example
<ctrl_name>.prototype.<method_name> = function(p1, p2) {
//Custom code here
this.superclass.<method_name>.call(this, p1, p2 );
};
All controls must have a constructor with no parameters.
The constructor is a static function, with the same name as your control.
The constructor should call your control's init_class_inst() method.
Parameters:
None
Example
function ctrl_generic() {
this.init_class_inst(); // initialize our control
};
| init_class_inst() |
This initializes the class, and must be called by the constructor.
The default code should be left as is - it sets up the superclass.
Use this method to
Parameters:
None
Returns:
None
Example
ctrl.init_class_inst = function() {
this.superclass = ctrl_base.prototype;
this.superclass.init_class_inst.call( this ); // call our superclass class initializer
this.myVar1 = 0;
};
| init_ctrl_inst(pForm, pElem, pRowCtrl, pRowNumber) |
This is called after the control has been added to the page, with the content as set by the C++ side of your component’s jsGetInnerHTML() method.
This must begin by calling init_ctrl_inst() in the superclass.
Use this method to:
Read attributes from the element.
Read the $dataname data. <link to this.getData()>
Fine-tune/extend your control’s layout & appearance.
Setup event handlers. <link>
Parameters:
pForm (Object): Reference to the parent form.
pElem (Object): The html element the control belongs to.
pRowCtrl (Object): Pointer to a complex grid control, if this control belongs to a complex grid.
pRowNumber (Integer): The row number this control belongs to, if it belongs to a complex grid.
Returns:
Example
ctrl.init_ctrl_inst = function( form, elem, rowCtrl, rowNumber ) {
this.superclass.init_ctrl_inst.call( this, form, elem, rowCtrl, rowNumber ); // call our superclass init_ctrl_inst
//TODO: Control-specific initialization goes here
return false;
};
| delete_class_inst() |
This method is called when the object is removed, typically when a form is closed.
You should override this function if there is some work to do prior to your control being deleted.
Make sure to end your call to this by calling the superclass version.
Implement this method to:
Parameters:
None
Returns:
None
Example
ctrl.delete_class_inst = function() {
// Custom cleanup code here.
this.superclass.delete_class_inst.call(this); // Call superclass version to perform standard deletion procedure.
}
| updateCtrl(pWhat, pRow, pCol, pMustUpdate) |
This is called in when the control may need to be updated. Generally because the instance data variable has changed, ore something has occurred which necessitates an update.
You should use this method to update your control based on what has changed.
Note that there is no superclass version of this method, so you should not attempt to call the base class' implementation.
Implement this method to:
Check the value of the $dataname data, or other variables.
Update the inner html of the control.
The parameters passed to this method only need to be handled if your control uses a list or row as its $dataname, and you wish to optimize your update code.
Parameters:
pWhat (String): Specifies which part of the data has changed. One of:
"" - All of the data, if pRow & pCol are not specified. If they are, just the data specified by pRow and pCol.
"#COL": A single column in the $dataname list (specified by 'row' and 'col') or a row's column (specified by 'col')
"#LSEL" - The line selection state of a particular row. pRow specifies the row number this pertains to.
"#LSEL_ALL" - The selection state of one or more rows have changed. Query the list's lstLSEL member to access the new selection state.
"#L" - The current line.
"#NCELL" - An individual cell in a (nested) list. In this case, 'row' is an array of row & column numbers. Of the form "row1,col1,row2,col2,..."
pRow (Integer): If specified, the row number which has changed. (1-indexed). If 'what' is "#NCELL", this must be an array of row and col numbers. Optionally, a modifier may be added as the final array element, to change which part of the nested data is to be changed. (Currently only "#L" is supported).
pCol (Integer or String): If specified, the column number (1-indexed), or name which has changed.
pMustUpdate (Boolean): If true, the data has changed, and you should update your control accordingly. DEPRECATED
pMustUpdate is deprecated and may be removed in a future update. pWhat will perform the same functionality (when it is "", or otherwise 'falsey').
Returns:
None
Example
ctrl.updateCtrl = function(pWhat, pRow, pCol, pMustUpdate) {
// Check if the $dataname variable has changed:
if (pWhat == "") {
this.curData = this.getData();
this.rebuildMyControl(); // Custom method to rebuild control.
}
};
| handleEvent(pEvent) |
This is called when an event handler which was assigned this.mEventFunction is triggered.
Implement this method to:
Create a switch statement based on pEvent.type to handle multiple events.
If multiple elements in your control can trigger the same kind of event (e.g. "click"), you may like to use jOmnis.getEventCurrentTarget() to determine which element was clicked.
Parameters:
Returns:
None
Example
ctrl.handleEvent = function( pEvent ) {
switch (pEvent.type) {
case "click":
this.doMyClick(); // Handle the click
jOmnis.stopEventNow(pEvent); // Prevent further propagation of this event.
break;
default:
return this.superclass.handleEvent.call( this, pEvent ); // Let the base class handle other events
}
};
| getCanAssign(pPropNumber) |
Use this method to create a switch statement which returns true or false as to whether the passed property can be assigned to, if it’s a custom property (or a base property you wish to treat differently). Otherwise, let the superclass handle it.
Implement this method to:
Parameters:
Returns:
Example
ctrl.getCanAssign = function(pPropNumber) {
switch (pPropNumber) {
case PROPERTIES.prop1:
return true;
default:
return this.superclass.getCanAssign.call(this, pPropNumber); // Let base class handle other properties.
}
};
| getProperty(pPropNumber) |
This is called when Omnis code attempts to get the value of a property of the control.
If it is a custom property (or a base property you need to use special handling for), you should catch and handle this yourself. Otherwise, let the superclass handle it.
The propNumbers of standard properties can be accessed via the eBaseProperties enumerated type.
It is good practice to call this method from your JavaScript code when you want to get the value of a property.
Implement this method to:
Parameters:
Returns:
Example
ctrl.getProperty = function(propNumber) {
switch (propNumber) {
case PROPERTIES.prop1:
return this.mProp1;
default:
return this.superclass.getProperty.call(this, propNumber); // Let the base class handle other properties.
}
};
| setProperty(pPropNumber, pPropValue) |
This is called when Omnis code attempts to set the value of a property of the control.
If it is a custom property, you should catch and handle this yourself. Otherwise, let the superclass handle it for default properties.
The propNumbers of standard properties can be accessed via the eBaseProperties enumerated type.
It is good practice to call this method from your JavaScript code when you want to set a property.
Implement this method to:
Catch and handle changes to your custom properties, or properties you need to add special handling for.
Begin by calling this.getCanAssign(pPropNumber), to respect rules set therein.
Parameters:
pPropNumber (Integer): The Omnis property number.
pPropValue (Var): The new value for the property.
Returns:
Example
ctrl.setProperty = function( propNumber, propValue ) {
if (!this.getCanAssign(propNumber))
return false;
switch (propNumber) {
case eBaseProperties.enabled:
this.handleEnabled(propValue);
return true;
default:
return this.superclass.setProperty.call( this, propNumber, propValue ); // call our superclass setProperty for other properties
}
};
| sizeChanged() |
Called when the size of the control has changed (e.g. due to a screen size change).
Implement this method to:
Parameters:
None
Returns:
None
Example
ctrl.sizeChanged = function() {
// Custom code here
};
| fillChanged() |
Called when the background of the control has changed due to a property change.
Implement this method to:
Parameters:
None
Returns:
None
Example
ctrl.fillChanged = function() {
// Custom code here
};
| fontChanged() |
Called when the font changes - either family, style or size.
Implement this method to:
Parameters:
None
Returns:
None
Example
ctrl.fontChanged = function() {
// Custom code here
};
| enabledChanged() |
Called when $enabled has changed (and also when constructing the control).
If you implement this, you will probably want to get the current enabled state. You can use this.isEnabled() to return this.
Implement this method to:
Parameters:
None
Returns:
None
Example
ctrl.enabledChanged = function() {
var state = this.isEnabled();
// Custom code here
};
| activeChanged() |
Called when $active has changed (and when constructing the control).
If you implement this, you will probably want to get the current active state. You can use this.isActive() to return this.
Implement this method to:
Parameters:
Returns:
Example:
ctrl.activeChanged = function() {
var state = this.isActive();
// Custom code here
};
| getTrueVisibility(pChildCtrl) |
Returns the true visibility state of the control, based on parent object and own visible property.
More complex controls may need to override this. If you do, it's recommended to first call the base class' implementation as this already does the work of checking parent controls and containing subforms' visibility.
Parameters:
Returns:
Example
ctrl.getTrueVisibility = function(pChildCtrl) {
var visible = this.superclass.getTrueVisibility.call( this, childCtrl ); // call base class
// If the base class thinks the control should be visible, check that no control-specific behaviour contradicts this:
if (visible) {
visible = this.reallyVisible();
}
return visible;
};
| visibilityChanged() |
Called when the visibility of your control may have changed (e.g. it may be on a paged pane which is no longer visible).
Typically you would call the base class' implementation of this first, then add your own logic.
If the base class returns false, but you decide to return true in your own logic, you should also set the visibility css style of your control to the new value.
Implement this method to:
Catch when the visibility of your control changes.
Provide extra handling to determine if the visibility of your control has actually changed.
Parameters:
None
Returns:
Example
ctrl.visibilityChanged = function()
{
var ret = this.superclass.visibilityChanged.call(this);
if (ret)
this.updateLayout();
return ret;
}
| formBuilt() |
If you called registerForFormBuilt() in your control, this method will be called when the rest of the form has finished constructing.
There is no superclass implementation of this method, so do not attempt to call one.
Parameters:
None
Returns:
None
Example
ctrl.formBuilt = function () {
alert("The form has finished construction!");
}
| getErrorBorderDiv() |
When a control's $errortext is assigned to, it will show the error text around the control, and add a red border. By default, this border is drawn around the control's client element.
If this does not make sense for a control, it can override this method and return the element around which the error border should be drawn.
Parameters:
None
Returns:
Example
ctrl.getErrorBorderDiv = function() {
return this.mMainElem;
}| scriptAvail() |
Called when the client script for the form is available if the control was registered with the requestScriptAvailNotify() form method.
Parameters:
None
Returns:
None
Example
ctrl.scriptAvail = function() {
// Call a client method of the control named "$myMethod".
var methodName = jOmnis.getMethod(this, "$myMethod", -1);
if (methodName)
this[methodName]();
};
The following are method calls you can make on a ctrl instance (i.e. your JavaScript control).
| alphaFromCssColor(pCssColor) |
Gets the alpha value (0-255) from the given CSS color string. 0 being fully transparent, and 255 being completely opaque.
Parameters:
Returns:
Example
var alpha = this.alphaFromCssColor("rgba(155,155,208,0.5)"); // alpha becomes 128
| callMethod(pMethodName, ...) |
Calls a method (custom or built-in) of your control. Can be:
A JavaScript method (e.g. ctrl_mycontrol.prototype.myMethod = function {...})
An Omnis field method.
If there is a method in the JavaScript control with the same name as an Omnis field method, the method of the JavaScript control will be called.
Parameters:
pMethodName (String): The name of the method to call.
... : Any following parameters will be used as arguments when calling the specified method.
Returns:
Example
var ret = this.callMethod("myMethod","Dave",23); //Call the method "myMethod", passing "Dave" & 23 as arguments.
| callMethodEx(pMethodName, pFlags, ...) |
Calls a method (custom or built-in) of your control, with extra configuration flags. Can be:
A JavaScript method (e.g. ctrl_mycontrol.prototype.myMethod = function {...})
An Omnis field method.
If there is a method in the JavaScript control with the same name as an Omnis field method, the method of the JavaScript control will be called.
Parameters:
pMethodName (String): The method name.
pFlags (Integer): Flags defined from eDoMethodFlags.
... : Any extra parameters are passed as arguments to the method call.
Returns:
Example
var ret = this.callMethodEx("myMethod", eDoMethodFlags.completionEvent | eDoMethodFlags.noOverlay, "Dave", 123);
| canSendEvent(pEventCode) |
Returns true if the given event is enabled for this control and it can be sent to the server(/client event).
Parameters:
Returns:
Example (Default event)
if (this.canSendEvent(eBaseEvent.evClick) {
this.eventParamsAdd("pName","Ernie");
this.eventParamsAdd("pAge", 52);
this.eventParamsAdd("pOccupation", "Milkman");
this.sendEvent(eBaseEvent.evClick); // Sends event with the 3 parameters defined above.
}Example (Custom Event)
var eMyControlEvents = { "evThingOccurred": 5000, "evThingHappened": 5001}
if (this.canSendEvent(eMyControlEvents.evThingHappened) {
this.eventParamsAdd("pName","Ernie");
this.eventParamsAdd("pAge", 52);
this.eventParamsAdd("pOccupation", "Milkman");
this.sendEvent("evThingHappened"); // Sends event with the 3 parameters defined above.
}
| doSetProperty(pPropNumber, pPropValue) |
This is a wrapper for setProperty(), which instead adds the property to the current animation block, if possible (i.e. the property is supported for animations). If the property can't be animated, it will be assigned immediately.
See beginAnimations() and commitAnimations().
If you have overridden setProperty() in your control, this will also be called into at the appropriate time.
Parameters:
pPropNumber (Integer|String): The Omnis property number. Either an eBaseProperties constant, or a custom value for any custom properties of your control.
pPropValue (Var): The new value to assign to the property.
Returns:
Example
var formInst = this.form;
formInst.beginAnimations(1000, 4); // Begin animation block
this.doSetProperty(eBaseProperties.left, 300); // Add property change to animation block.
formInst.commitAnimations(); // Run the animations.
| eventParamsAdd(pName, pValue) |
Adds a parameter to the event parameter list.
Call this method for each event parameter prior to calling sendEvent, which will call the event, sending the parameters.
The parameter list is cleared once sendEvent() has been called.
Parameters:
pName (String): Parameter name (must match that defined in your component's resource (.rc) file).
pValue (Var): Parameter value.
Returns:
None
Example
this.eventParamsAdd("pName","Ernie");
this.eventParamsAdd("pAge", 52);
this.eventParamsAdd("pOccupation", "Milkman");
this.sendEvent(eBaseEvent.evClick); // Sends event with the 3 parameters defined above.
| focus() |
Sets the focus to the control's client element.
Parameters:
None
Returns:
None
Example
this.focus();
| getCanAssign(pPropNumber) |
Gets whether you are allowed to assign a new value to a property.
This method will typically be overridden in your JavaScript control, to handle any custom properties, but fall back to the base class' implementation for base properties.
Parameters:
Returns:
Example
var canDisable= this.getCanAssign(eBaseProperties.enabled)
| getClientElem() |
Returns the client HTML element for this control.
Parameters:
None
Returns:
Example
var elem = this.getClientElem();
| getData(pWhat, pRow, pCol, pAltDataIndex, pFmt, pFormatString) |
Returns the data associated with the control (typically the control's $dataname instance variable).
All parameters are optional.
The parameters only apply if your control uses a list or row instance variable for its $dataname.
Parameters:
pWhat (String): Specifies which part of the data. One of:
"": Gets all of the data, if pRow & pCol are not specified. If they are, just the data specified by pRow and pCol.
"#LSEL": Gets the list's line selection flags.
"#L": Gets the list's current line.
pRow (Integer): If specified, only returns data for that row in the list. (1-indexed)
pCol (Integer or String): If specified, only returns data for that column in the list row. (1-indexed)
pAltDataIndex (Integer): If not null, this is the data index of another instance variable to get, rather than the control's $dataname variable.
pFmt (String): If specified,the format required for the return value.
null means return the value unchanged.
"s" means return a string.
"sz" means return a string which is empty if the value is zero.
pFormatString (String): If pFmt is s or sz, and the data is a date/time type, the date format used to format the date and time.
If pFmt is s or sz, and the data is a numeric type, the numberformat used to format the number.
Returns:
Example
// Get the whole $dataname instance variable data:
var myFullData = this.getData();
// Get the current line from the $dataname list:
var curLine = this.getData("#L");
// Get the data from column 2 in row 3 of the $dataname list:
var myListCell = this.getData("", 3, 2);
| setData(pNewData, pWhat, pRow, pCol, pFmt, pFormatString, pUpdateThis, pIgnorePager) |
Sets the value of the variable assigned to this control's $dataname.
Parameters:
pNewData (Var): The new data to assign to the variable.
pWhat (String): Specifies which part of the data to assign to. One of:
"" - Change the data (row data if a list).
"#COL" - Change the data for a list's column specified by pRow and pCol, or a row's column specified by pCol.
"#1COL" - Same as #COL for this method.
"#LSEL" - Change a list's line selection flags for the row specified by pRow.
"#LSEL_ALL" - Change the complete list selection array for a list.
"#L" - Change a list's current line.
pRow (Optional) (Integer): If specified, changes the data only for that row in a list (range = 1..n)
pCol (Optional) (Integer): If specified, changes the data only for that column in a list row (range = 1..n)
pFmt (Optional) (String): If specified, the source format for the new data.
null means keep the format of the new data
"s" means the new data is a string which is to be converted to the correct data type for the instance variable if possible.
"a" means the new data is always to be used, and not to be compared with the oldData (as it has been changed in place by a client method).
pFormatString (Optional) (String) If pFmt is "s", the Number or Date formatting string (depending on data type) to format the new data.
pUpdateThis (Optional) (Bool) If true, specifies that the control should update itself in response to this. Defaults to false.
pIgnorePager (Optional) (Bool) If true, this will ignore any attached pager.
Returns:
Example
this.setData(newValue, ""); // Change the full contents of the $dataname variable to the contents of newValue.
| getDisplayFormat(pForceNumber, pDateSubtype) |
Gets the format string to use when formatting a number or date-time variable.
If the control's $dataname is a numeric type, this returns the number format.
If the control's $dataname is a date type, this returns the date-time format.
Parameters:
pForceNumber (Boolean): If true, this will always return the number format, regardless of the control's data type.
pDateSubtype (Optional) (Integer): The date subtype if the control's $dataname is a date type. An eOmnisDataSubTypes value.
Returns:
Example
var dateFormat = this.getDisplayFormat(false);
| getIconUrlFromImgSrc(pElem) |
Gets the URL to an image from the given element's src attribute. Typically, this would be an img element.
Parameters:
Returns:
Example
var imgURL = this.getIconUrlFromImgSrc(elem);
| getIconUrlFromStyleUrl(pElem) |
Returns the URL to the image specified in the element's background-image property, when specified in the format:
"url(<url to image>)"
Parameters:
Returns:
Example
// elem.backgroundImage = "url(images/myImage.png)"
var imgURL = this.getIconUrlFromStyleUrl(elem);
// imgURL becomes "images/myImage.png"
| getProperty(pPropNumber) |
Gets the value of the given Omnis property number.
This method will typically be overridden in your JavaScript control, to handle any custom properties, but fall back to the base class' implementation for base properties.
Parameters:
Returns:
Example
var textColor = this.getProperty(eBaseProperties.textcolor);
| getTextWidthDiv() |
Returns a div element, suitable for measuring text width (i.e. a div which tightly wraps its content).
Make sure to remove the div once you are finished with it, using removeTextWidthDiv().
Parameters:
Returns:
Example
var divElement = this.getTextWidthDiv();
divElement.innerHTML = "my string"; // Inject the text into the div
var stringWidth = divElement.clientWidth; //Measure the width of the div
this.removeTextWidthDiv(divElement);
| removeTextWidthDiv(pElem) |
Called to remove the div used for measuring text width (obtained using getTextWidthDiv()).
Parameters:
Returns:
Example
var divElement = this.getTextWidthDiv();
divElement.innerHTML = "my string"; // Inject the text into the div
var stringWidth = divElement.clientWidth; //Measure the width of the div
this.removeTextWidthDiv(divElement);
| getTrueVisibility(pChildControl) |
Returns true visibility state of the control, based on parent object and own visible property.
More complex controls may need to override this.
Parameters:
Returns:
Example
var isVisible = this.getTrueVisibility(null);
| isEnabled() |
Returns whether the control is enabled (based on its state, and the state of any container(s).
Parameters:
Returns:
Example
var enabled = this.isEnabled();
| removeFromTabOrder() |
Removes the control from the tab order.
Prevents the user from tabbing into it.
Parameters:
Returns:
Example
this.removeFromTabOrder(); // Remove this control from the tab order.
| sendEvent(pEventCode) |
Sends an event to the server (or the client executed event if it's set to execute on client).
This function will send and clear the parameter list.
You would typically check canSendEvent() before calling this.
Parameters can be added to the event using eventParamsAdd().
Parameters:
Returns:
Example (Default event)
if (this.canSendEvent(eBaseEvent.evClick) {
this.eventParamsAdd("pName","Ernie");
this.eventParamsAdd("pAge", 52);
this.eventParamsAdd("pOccupation", "Milkman");
this.sendEvent(eBaseEvent.evClick); // Sends event with the 3 parameters defined above.
}Example (Custom Event)
var eMyControlEvents = { "evThingOccurred": 5000, "evThingHappened": 5001}
if (this.canSendEvent(eMyControlEvents.evThingHappened) {
this.eventParamsAdd("pName","Ernie");
this.eventParamsAdd("pAge", 52);
this.eventParamsAdd("pOccupation", "Milkman");
this.sendEvent("evThingHappened"); // Sends event with the 3 parameters defined above.
}
| setPropCli(pPropNumber, pPropValue) |
Sets the Omnis property of the control to the value passed.
This is a wrapper for the doSetProperty() method which will also attempt String Table translation on pPropValue, if it is a string.
If you have overridden setProperty() in your control, this will also be called into at the appropriate time.
Parameters:
pPropNumber (Integer): The Omnis property number to check. Either an eBaseProperties constant, or a custom value for any custom properties of your control.
pPropValue (Var): The value to assign to the property.
Returns:
Example
var success = this.setPropCli(eBaseProperties.left, 100);
success = this.setPropCli(eBaseProperties.text, "Hello"); // Will attempt to translate "Hello" using string table.
| setProperty(pPropNumber, pPropValue) |
Sets the given Omnis property to the given value, and performs any other necessary action required by changing this value.
This method will typically be overridden in your JavaScript control, to handle any custom properties, but fall back to the base class' implementation for base properties.
Parameters:
pPropNumber (Integer|String): The Omnis property number to check. Either an eBaseProperties constant, or a custom value for any custom properties of your control.
pPropValue (Var): The value to assign to the property.
Returns:
Example
var success = this.setProperty(eBaseProperties.fontSize, 12); // Set the font size (handled automatically)
// Set a custom property (must be handled by overridden setProperty() method in your control):
success = this.setProperty(PROPERTIES.iconSize, "100px");
| setPropertyBorder(pElem, pValue, pDefault) |
Applies the given border style to an element.
Parameters:
pElem (Object): The html element.
pValue (Integer): The border style - one of the eBaseBorder enumerated types.
pDefault (Optional) (Object): The eBaseBorder style to use whenpValue is eBaseBorder.
Returns:
Example
this.setPropertyBorder(elem, eBaseBorder.Plain);
| setupIcon(pUrl) |
Gets an icon url from the format sent by Omnis, into a useable and appropriate URL.
Replaces the icon library placeholder ("%L") in the supplied icon URL.
If more than one icon is available, chooses the best icon to use based on the client resolution.
Parameters:
Returns:
Example
// data-icon is: "icons/lib/%l/033333n16.png;033333n16_15x.png;033333n16_2x.png"
var iconAttrib = client_elem.getAttribute("data-icon");
var iconUrl = this.setupIcon(iconAttrib);
// On a retina device, iconUrl will become "icons/lib/myLibrary/033333n16_2x.png"
| update(pWhat, pRow, pCol) |
Call this method to cause your control to be updated.
The update may not be called immediately, but will be flagged to do so at the next available opportunity.
This will end by calling into your control's updateCtrl() method, if necessary.
The parameters only really apply if your control uses a list to define its structure, and you want to optimize your handling of updates. If it does not, you can safely pass no parameters.
Parameters:
pWhat (Optional) (String): Specifies which part of the data has changed. One of:
"": All of the data, if pRow & pCol are not specified. If they are, just the data specified by pRow and pCol.
"#COL": A single column in the $dataname list (specified by 'row' and 'col') or a row's column (specified by 'col')
"#LSEL": The line selection flags.
"#LSEL_ALL": All lines in the $dataname list have been selected.
"#L": The current line.
"#NCELL": An individual cell in a (nested) list. In this case, 'row' is an array of row & column numbers. Of the form "row1,col1,row2,col2,..."
pRow (Integer): If specified, the row number which has changed. (1-indexed). If 'what' is "#NCELL", this must be an array of row and col numbers. Optionally, a modifier may be added as the final array element, to change which part of the nested data is to be changed. (Currently only "#L" is supported).
pCol (Integer or String): If specified, the column number (1-indexed), or name which has changed.
Returns:
Example
this.update("COL", 3, 2); // Call update, specifying that just the data in col 2 of the 3rd row has changed.
| visibilityChanged() |
Call this if you wish to check whether your control's visibility has changed (e.g. perhaps it's on a paged pane which is no longer visible).
This checks the visibility of your client element against the value of getTrueVisibility().
This will also set your client element's visibility style to the new value.
Parameters:
Returns:
Example
if (this.visibilityChanged()) {
this.rebuildMyControl();
}
| isActive() |
Returns whether the control is active (based on its state, and the state of any container(s)).
Parameters:
Returns:
Example
var active = this.isActive();
| getTheme() |
Returns the theme object associated with the Omnis instance. Once you have the Theme instance, there are a variety of methods you can use, documented in the Theme Instance Methods section.
Parameters:
Returns:
Example
const theme = this.getTheme();| resolveDefaultColor(color, attribute) |
Returns the passed color into a concrete color. If it's kColorDefault, turns it into the appropriate theme color constant. Otherwise, returns the color unchanged. Especially useful for calculating the correct text color when on a theme color background – see getTextColorString().
Parameters:
color (Number): The color to normalise.
Attribute (ColorAttribute): The name of a key within the control's DefaultColors object from which to get the default color.
Returns:
Example
const backColor = this.resolveDefaultColor(backgroundColor, BaseDefaultColorAttributes.BACKGROUND);
Type: HTML Element
The control's outer 'Frame' element.
Type: Form
The control's containing Form instance.
Type: function
You should set this as the handler for your control's HTML events.
Then, when the event is triggered it will pass through the Omnis JavaScript framework, and will call into your class' handleEvent method, where you should handle the event.
Example
ctrl.init_ctrl_inst = function(form, elem, rowCtrl, rowNumber)
{
...
client_elem.onclick = this.mEventFunction;
client_elem.onblur = this.mEventFunction;
...
};
Type: Character
The name of the control.
(Typically something like js1_button_1059)
Type: Integer
This is the Object Number of the control. A unique identifier within the form.
Type: Boolean
If true, the browser's default drag & drop drop handling will not be prevented for this control.
Defaults to false.
Type: String
Controls can override this to provide a space-separated list of css classes which should always be applied to the Client Element.
Set before calling super init_ctrl_inst in order to automatically apply to Client Element initially.
Type: Object
This object contains theme constant values to be used for default theme colors for when a color property is set to kColorDefault. Use with BaseDefaultColorAttributes (found in Constants of the JavaScriptControl Reference) to access the correct member.
See Theme Instance Methods getColorString() and getTextColorString() for examples of how these are used.
Type: Boolean
If this is set to true, pressing the Enter key while the control has focus will not trigger the form’s okkeyobject (if there is one). This should be set if the control performs an action when Enter is pressed.
Type: Boolean
If this is set to true, pressing the Escape key while the control has focus will not trigger the form’s cancelkeyobject (if there is one). This should be set if the control performs an action when Escape is pressed.
| beginAnimations(pDuration, pCurve) |
Begins an animation block for the form.
Individual animations are added using your control's doSetProperty() method.
The animation block is run by calling commitAnimations().
Parameters:
pDuration (Integer): The animation duration, in milliseconds.
pCurve (Integer): The animation curve - One of:
0 for "ease-in-out"
1 for "ease-in"
2 for "ease-out"
3 for "linear"
4 for "ease"
Returns:
Example
var formInst = this.form;
formInst.beginAnimations(1000, 4); // Begin animation block
this.doSetProperty(eBaseProperties.left, 300); // Add property change to animation block.
formInst.commitAnimations(); // Run the animations.
| callMethod(pMethodName, ...) |
Calls a form's instance method.
Can be client or server executed.
Parameters:
pMethodName (String): The name of the method to call.
... : Any extra parameters will be passed as arguments to the method call.
Returns:
Example
var ret = formInst.callMethod("$echo", "Hello"); // Calls the method $echo passing "Hello" as its first parameter.
| callMethodEx(pMethodName, pFlags, ...) |
Calls a form instance method
Can be a server or client method.
Parameters:
pMethodName (String): The name of the method to call.
pFlags (Interface): Bit mask of eDoMethodFlags constants.
... : Any extra parameters will be passed as arguments to the method call.
Returns:
Example
var ret = formInst.callMethodEx("$echo", eDoMethodFlags.clientOnly | eDoMethodFlags.noOverlay, "Hello");
// Calls the form method $echo, only if it's a client-executed method, and prevents the overlay from displaying.
| commitAnimations() |
Commit an animation block for the form.
Note that nothing will occur until control returns to the browser, which then applies the CSS transitions.
Animation blocks are initiated using beginAnimations() and individual animations added using a Control's doSetProperty() method.
Parameters:
Returns:
Example
var formInst = this.form;
formInst.beginAnimations(1000, 4); // Begin animation block
this.doSetProperty(eBaseProperties.left, 300); // Add property change to animation block.
formInst.commitAnimations(); // Run the animations.
| findChild(pObjNumber, pRowNumber) |
Gets a control on the form by its Object Number.
Parameters:
pObjNumber (Integer): The Object Number of the control to find.
pRowNumber (Integer): If non-zero the object belongs to this row inside a complex grid.
Returns:
Example
var ctrl = formInst.findChild(3,0) ;
| findChildByName(pObjName) |
Gets a Control instance by its Object Name.
Parameters:
Returns:
Example
var ctrl = formInst.findChildByName("jsform_button_1056");
| getData(pDataIndex, pWhat, pRow, pCol, pFmt, pFormatString) |
Returns the data from one of the form's instance variables.
Parameters:
pDataIndex (Integer): The data index to the instance variable. See getDataIndex()
pWhat (String): Specifies which part of the data to get. One of:
"" - Return all of the data.
"#COL" - Return data for a list's column specified by pRow and pCol, or a row's column specified by pCol.
"#1COL" - Same as #COL for this method.
"#LSEL" - Return a list's line selection flags (pRow can specify the row).
"#LSEL_ALL" - Return the list selection array for a list.
"#L" - Return a list's current line.
"#LCNT" - Return a list's line count.
"#CCNT" - Return a list's column count.
pRow (Optional) (Integer): If specified, returns the data only for that row in a list (range = 1..n)
pCol (Optional) (Integer): If specified, returns the data only for that column in a list row (range = 1..n)
pFmt (Optional) (String): If specified,the format required for the return value.
null means return the value unchanged.
s means return a string.
sz means return a string which is empty if the value is zero.
pFormatString (Optional) (String) If pFmt is "s" or "sz", the Number or Date formatting string (depending on data type).
Returns:
Example
// Get the value of the second col from iRow, in a custom date format:
var bday = formInst.getData(formInst.getDataIndex("iRow",
"#COL", 1, 2, "s", "D/M/y");
| getDataIndex(pDataName, pCtrl, pMapControlToData) |
Returns the index to an instance data variable.
Also allows you to map the data variable to the control.
Parameters:
pDataName (String): The name of the instance variable.
Can also be formatted as "variable.column" to refer to an individual column in a row/list variable. The column can be specified as a number, a number prefixed with "C", or a column name. E.g. "iRowVar.C3"
pCtrl (Object): A control to be associated with the data index if pMapControlToData is true (or omitted). Pass as null if you don't want to map the data to a control.
pMapControlToData (Optional) (Boolean): If true, associate the control with the data index. If omitted, defaults to true.
Returns:
Example
var dataIndex = formInst.getDataIndex("iList", null, false);
| getNextPrevTabObject(pStartObj, pIsPrev, pNoWrap) |
Gets the next or previous active Control in the tab order.
Parameters:
pStartObj (Object): An Omnis Control instance, relative to which next or previous control is required.
pIsPrev (Boolean): True if previous control is required, false to get the next control.
pNoWrap (Boolean): (Optional) If true and the start object is the final object in the tab order, the function will return null.
Returns:
Example
var nextCtrl = formInst.getNextPrevTabObject(this, false);
| registerForFormBuilt(pCtrl) |
Call this from your control's init_ctrl_inst() method, if you wish to be notified when the form has finished building.
Your control's formBuilt() method will be called when the form has finished constructing everything.
Parameters:
Returns:
Example
var formInst = jOmnis.getOmnisForm(0,0);
formInst.registerForFormBuilt(this);
| requestScriptAvailNotify(pCtrl) |
Register the control to be notified when the form script (the generated script containing all the client-executed methods on the form and its controls) is available.
The registered control's scriptAvail() method will be called when the script has loaded.
Parameters:
Returns:
Example
ctrl.init_ctrl_inst = function() {
...
this.form.requestScriptAvailNotify(this);
...
};| setData(pDataIndex, pNewData, pWhat, pRow, pCol, pCanRecord, pFmt, pFormatString) |
Assigns data to a form instance variable.
If the instance variable is mapped to a control, that control's updateCtrl() method will also be called, after setting the data, with the values of pWhat, pRow & pCol set here.
Parameters:
pDataIndex (Integer): The data index to the instance variable. See getDataIndex()
pNewData (Var): The new data to assign to the variable.
pWhat (String): Specifies which part of the data to assign to. One of:
"" - Change the data (row data if a list).
"#COL" - Change the data for a list's column specified by pRow and pCol, or a row's column specified by pCol.
"#1COL" - Same as #COL for this method.
"#LSEL" - Change a list's line selection flags for the row specified by pRow.
"#LSEL_ALL" - Change the complete list selection array for a list.
"#L" - Change a list's current line.
pRow (Optional) (Integer): If specified, changes the data only for that row in a list (range = 1..n)
pCol (Optional) (Integer): If specified, changes the data only for that column in a list row (range = 1..n)
pCanRecord (Optional) (Boolean): If true, we can record the change to be sent to the server the next time we communicate. (Defaults to true)
pFmt (Optional) (String): If specified, the source format for the new data.
null means keep the format of the new data
"s" means the new data is a string which is to be converted to the correct data type for the instance variable if possible.
"a" means the new data is always to be used, and not to be compared with the oldData (as it has been changed in place by a client method).
pFormatString (Optional) (String) If pFmt is "s", the Number or Date formatting string (depending on data type) to format the new data.
Returns:
Example
// Set a list's current line to 5:
formInst.setData(dataIndex, 5, "#L");
// Set the value of the 4th column in the 3rd row to be "Bert":
formInst.setData(dataIndex, "Bert", "#COL", 3, 4);
This is a global object which has replaced some of the methods within jOmnis and added further functionality to work with icons.
| getCheckedImage(normalUrl) |
Gets the checked image URL corresponding to a normal image URL. According to icon set naming rules. (Previously a jOmnis method)
Parameters:
Returns:
Example
var checkedIcon = jIcons.getCheckedImage("icons/myset/myCheckBox_90001_32x32_2x.png");
//checkedIcon becomes "icons/myset/myCheckBox_90001_32x32c_2x.png"
| getIconBackSize(iconUrl) |
Returns the dimensions of the image, as a string suitable to be applied to an element’s background-size style value. I.e. “<width>px <height>px”
Parameters:
Returns:
Example
myImg.style.backgroundSize = jIcons.getIconBackSize("icons/myset/myIcon_90000_32x32.png");
| getIconSize(iconUrl, cssStyle, isSvg) |
Returns either an object with width and height members indicating the size of the icon for the url, or a CSS style to set the background size.
If pCssStyle is false, and the size is not available (such as for a stand-alone page not in an ICON set) returns an empty object.
The icon name must conform to Omnis Icon Set naming syntax.
Parameters:
iconUrl (String): The url to the icon image.
cssStyle (Boolean): Whether to return a CSS style string. e.g. “background-size: 50px 80px;”
isSvg (Boolean): Either null (or omitted) meaning detect if SVG from iconUrl, or Boolean indicating if the image is SVG
Returns:
If pCssStyle=true, returns a CSS style string. e.g. “background-size: 50px 80px;”
If pCssStyle=false, returns a JavaScript Object containing width and height properties.
Example
const iconWidth = jIcons.getIconSize("icons/myset/myIcon_90000_32x32.png", false).width;
| replaceOrAddToElem(parentElem, iconUrl, loadFunc, sizeObj, alwaysCreate, needWrapper) |
Replaces if present, or adds if absent, an icon to an element.
Parameters:
parentElem (HTMLElement): The parent element to which the specified icon is to be added; if the parent already contains an icon it is replaced,otherwise this method adds the icon after any existing children in the parent.
iconUrl (String): The URL to the image.
loadFunc (Function) (Optional): The function to call when the image has loaded (null or omitted if onload is not required).
sizeObj (Object) (Optional): If not null, a size object to override the size specified by the iconUrl.
alwaysCreate (Boolean) (Optional): If true, always create and append (so we do not replace an existing element)
needWrapper (Boolean) (Optional): If true, create a wrapper element for SVG icons. The wrapper allows the icon to have a badge
Returns:
Example
const myElement = document.getElementById("myElement"); // The element to append the icon to.
const sizeObj = {width: 16, height: 16, viewBox: "0 0 24 24"}; // The size object to give a width and height of 16px but use 24px of the SVG viewbox
jIcons.replaceOrAddToElem(myElement, "icons/myicon.svg?", ()=>{window.alert("Icon loaded");}, sizeObj, false); // Adds the icon, myicon.svg, to myElement using the size properties in sizeObj. Displays a message when the image has loaded.
| iconUrl(imageElem) |
Returns the icon URL for the supplied element.
Parameters:
Returns:
Example:
const iconElem = this.clientElem.querySelector("img,svg");
const iconUrl = jIcons.iconUrl(iconUrl);
| setImageUrl(imageElem, imageUrl) |
Replaces the image URL in the supplied image element (svg or img). This is used to switch between checked and normal images, so the type of the image supplied is the same as the current image (img, svg or themed svg).
Parameters:
imageElem (HTMLElement): The image element
imageUrl (String): The normal image URL
Returns:
Example:
const iconElem = this.clientElem.querySelector("img,svg");
const checkedImage =
jIcons.getCheckedImage("icons/myset/myCheckBox_90001_32x32_2x.png");
jIcons.setImageUrl(iconElem, checkedImage);
| addClass(pElem, pClassName, addSuffix) |
Adds the passed CSS class name(s) to the specified element, if it doesn't already have it.
Parameters:
pElem (Object): The html element.
pClassName (String): A space-separated list of CSS class names to add.
addSuffix (String) (Optional): A suffix to add to all ‘classes’ added to the element.
Returns:
Example
jOmnis.addClass(elem, "myClass myOtherClass");
| removeClass(pElem, pClassName, withSuffix) |
Removes the passed CSS class name(s) from the element.
Parameters:
pElem (Object): The html element.
pClassName (String): A space-separated list of CSS class names to remove.
withSuffix (String) (Optional): A suffix to add to all ‘classes’ to remove.
Returns:
Example
jOmnis.removeClass(elem, "myClass myOtherClass");
| hasClass(pElem, pClassName) |
Checks whether the passed element has the specified CSS class (amongst all of its CSS classes).
Parameters:
pElem (Object): The html element.
pClassName (String): The CSS class name to search for.
Returns:
Example
var hasMyClass = jOmnis.hasClass(client_elem, "myclass");
| addStyleSheet(pCssText) |
Adds a CSS style sheet to the page.
Parameters:
Returns:
Example
var myStyleSheet = jOmnis.addStyleSheet(".myClass{ color: #FF0000;}");
| removeStyleSheet(pStyleSheet) |
Removes a CSS style sheet from the page.
Parameters:
Returns:
Example
var myStyleSheet = jOmnis.addStyleSheet(".myClass{ color: #FF0000;}");
jOmnis.removeStyleSheet(myStyleSheet);
| registerStyleSheetObject(pObject) |
Registers the passed object (generally a control) to be notified when stylesheets are updated dynamically (using addStyleSheet etc).
The object must implement a method called "styleSheetsUpdated", which will be called when the stylesheets have updated.
Parameters:
Returns:
Example
ctrl.init_ctrl_inst = function() {
...
jOmnis.registerStyleSheetObject(this);
...
}
ctrl.styleSheetsUpdated = function() {
// React to stylesheets being loaded.
}
| unregisterStyleSheetObject(pObject) |
Unregisters an object (generally a control) from receiving notifications when stylesheets are updated dynamically.
Parameters:
Returns:
Example
jOmnis.unregisterStyleSheetObject(this);
| loadResource(pURL) |
Loads a resource (.js or .css file) dynamically.
Returns a Promise, which will be fulfilled when the resource loads.
(Handles multiple calls to load the same resource)
If you are loading multiple resources, you are advised to instead use loadResources()
Parameters:
Returns:
Example
function onSuccess() {
// Handle successful load of resource
}
function onFail() {
// Handle failure to load resource
}
jOmnis.loadResource("scripts/newscript.js").then(onSuccess).catch(onFail);
| loadResources(pURLs, pOnSuccess, pOnFail) |
Asynchronously loads multiple resources (css/js files) in order. Then calls the provided callback function once complete.
Parameters:
pURLs (String[]): An Array of URL strings to the resource files.
pOnSuccess (function): Function to call when all resources have been loaded.
pOnFail (function): Function to call if an error occurs with any resource.
Returns:
Example
jOmnis.loadResources([ "css/mycss.css", "scripts/myscript.js"], resourcesReady, resourcesLoadFailure);
| addSwipeListener(pElem, pStartTouchOK, pMoveHandler, pEndListener, pAnimationDuration) |
Adds a swipe listener to handle touch events swiping horizontally across a control.
Parameters:
pElem (Object): The html element to which the listener is to be attached.
pStartTouchOK (Function): Callback function called when a touchStart event occurs. This function should return true if swipe processing can start for the event. The callback function receives the event object as a parameter.
pMoveHandler (Function): Callback function to move the content while the swipe is in progress. The function is passed the x offset from the starting position and the duration for any animation to move the contents (in milliseconds).
pEndListener (Function): Called when the swipe has ended. The function is passed an object containing the original element, the final offset and a cancelled flag.
pAnimationDuration (Integer): The duration, in milliseconds, of any content movement that is not to occur instantaneously.
Returns:
Example
var ctrl = this;
var startTouchFunc = function() { return true; };
var moveHandlerFunc = function(dx, duration) {ctrl.scrollToOffset(startOffset + dx, duration, false);};
var endListenerFunc = function(obj) {alert("Swipe complete");};
jOmnis.addSwipeListener(elem, startTouchfunc, moveHandlerFunc, endListenerFunc, 500);
| animate(pElem, pProperties, pTime, pTransitionEndedHandler) |
Animates multiple CSS properties of an element, over the given time. Uses CSS transitions to animate.
Parameters:
pElem (Object): The html element to which the animation will be applied.
pProperties (Object): A JavaScript object containing CSS property names & values. e.g: {left: "10px", width: "100px"}
pTime (Integer): Number of milliseconds the animation should occur over.
pTransitionEndedHandler (Function) If provided, a callback function to call when the transition completes.
Returns:
Example
var props = {left: "10px"; width: "100px"};
jOmnis.animate(elem, props, 1000, function() {
alert("Animation complete!");
});
| clearAnimations(pElem, pTransitionEndedHandler) |
Removes any animations from the passed element.
Parameters:
pElem (Object): The html element.
pTransitionEndedHandler (Function) (Optional): The transistionEnded handler function to remove. If not provided, the global 'transitionEnd' function will be used.
Returns:
Example
jOmnis.clearAnimations(elem, this.myAnimationEndedListener);
| applyAlphaValueToColorPair(pColorPair, pAlphaValue) |
DEPRECATED in 10.2
Color Pairs are no longer needed (all browsers now support alpha), and they do not support Themed Colors. The functions in Theme Instance Methods should be used instead.
Applies a new alpha value to a Color Pair.
Parameters:
pColorPair (String): A pair of color strings, separated by “;” (semicolon). The first for non-alpha, the second for alpha.
pAlphaValue (Integer): The new alpha value, 0-255.
Returns:
Example
var colorPair = jOmnis.applyAlphaValueToColorPair("rgb(255,0,0);rgba(255,0,0,0.6)", 0.5);
| applyColorValueToColorPair(pColorPair, pColorValue) |
DEPRECATED in 10.2
Color Pairs are no longer needed (all browsers now support alpha), and they do not support Themed Colors. The functions in Theme Instance Methods should be used instead.
Applies a new color value to both components of a Color Pair.
Parameters:
pColorPair (String): A pair of color strings, separated by “;” (semicolon). The first for non-alpha, the second for alpha.
pColorValue (Integer): The new color value, in Omnis rgb format.
Returns:
Example
var colorPair = jOmnis.applyColorValueToColorPair("rgb(255,0,0);rgba(255,0,0,0.6)", 65280); //Make the red color pair green.
| disableTextSelection(pElem, pReEnable, pReEnableValue) |
Disables/re-enables the ability to select text in an element.
Parameters:
pElem (Object): The html element.
pReEnable (Boolean): true if text selection is to be re-enabled. false to disable text selection.
pReEnableValue (String): The new value used to re-enable. One of the CSS user-select values: none, text, all or element.
Returns:
Example
var oldSelection = jOmnis.disableTextSelection(elem, false); //Disable all selection.
jOmnis.disableTextSelection(elem, true, "text"); //Re-enable text selection.
| extractColor(pColorPair) |
DEPRECATED in 10.2
Color Pairs are no longer needed (all browsers now support alpha), and they do not support Themed Colors. The theme's getColorString() and getTextColorString() should be used instead.
Extracts the color to use from a Color Pair, according to whether the browser supports RGBA
Parameters:
If you want the color to be completely transparent, pass “0.00” for the alpha component. If the function finds this, it maps to “transparent”, for better cross-browser support.
Returns:
Example
var colorString = jOmnis.extractColor("rgb(255,0,0);rgba(255,0,0,0.6)");
| extractSolidColor(pColorPair) |
DEPRECATED in 10.2
Color Pairs are no longer needed (all browsers now support alpha), and they do not support Themed Colors. The theme's getColorString() and getTextColorString() should be used instead.
Extracts the solid color from a Color Pair, as a numeric color string prefixed with #.
Parameters:
Returns:
Example
var colorString = jOmnis.extractSolidColor("rgb(255,0,0);rgba(255,0,0,0.6)");
| getAttributeAsBool(pElem, pAttributeName, pDefaultValue) |
Gets an element’s attribute value as a Boolean.
Parameters:
pElem (Object): The html element.
pAttributeName (String): The name of the attribute to query (It should have a numeric value).
pDefaultValue (Var): The value to return if the attribute doesn't exist.
Returns:
Example
var myBool = jOmnis.getAttributeAsBool(elem, "data-custom", false);
| getAttributeList(pElem, pAttributeName, pPrimarySeperator) |
Initializes a simple array variable from a comma-separated list in an attribute. The comma-separated list may include a primary separator for a “two-dimensional” array.
Parameters:
pElem (Object): The html element.
pAttributeName (String): The attribute name. The value of this attribute should be a comma-separated list.
pPrimarySeperator (Optional) (String): A separator character used for two-dimensional arrays (see example below).
Returns:
Example
var myArray = jOmnis.getAttributeList(elem, "data-mylist", "~");
/* Where data-mylist = "0,12,13~2,14,5~9,100,23"
This returns a "2D" array - the first element of the array is itself an array containing 3 values -
0, 12 & 13. The second element is an array containing 2, 14 & 5, and so on...*/
| getCheckedImage(pNormalUrl) |
REMOVED in 10.2
Icon related methods have been moved to jIcons. See getCheckedImage().
Gets the checked image URL corresponding to a normal image URL. According to icon set naming rules.
Parameters:
Returns:
Example
const checkedIcon = jIcons.getCheckedImage("icons/myset/myCheckBox_90001_32x32_2x.png");
//checkedIcon becomes "icons/myset/myCheckBox_90001_32x32c_2x.png"
| getClientLocale() |
Gets the client's locale information.
Parameters:
Returns:
Example
var locString = jOmnis.getClientLocale();| cToChar(pValue) |
Converts a value to a string, obeying Omnis' rules (e.g. using locale's dp character).
This is the best way to turn an omnis_date type into a string.
Parameters:
Returns:
Example
var omDate = new omnis_date(new Date());
var dateString = jOmnis.cToChar(omDate);
| rgbFromCssColor(pCssColor) |
Gets the Omnis rgb color value of a CSS color string.
Parameters:
Returns:
Example
var rgb = this.rgbFromCssColor("#0000FF"); //rgb becomes 16711680
| getColorString(pRGB) |
DEPRECATED in 10.2
Themes require the use of various constants and the functions in Theme Instance Methods have been developed to handle these. The theme's instance methods getColorString() and getTextColorString() should be used instead.
Gets a color value, suitable for use with styles.
Parameters:
Returns:
Example
var blueString = jOmnis.getColorString(16711680);
| getColorStringWithAlpha(pRGB, pAlpha) |
DEPRECATED in 10.2
Themes require the use of various constants and the functions in Theme Instance Methods have been developed to handle these. The theme's instance methods getColorString() and getTextColorString() should be used instead.
Gets a color value, suitable for use with styles, including alpha when the browser supports it.
Parameters:
pRGB (Integer): Omnis rgb color value.
pAlpha (Integer): The alpha value (0-255).
Returns:
Example
var blueStringAlpha = jOmnis.getColorStringWithAlpha(16711680,100);
| getColorStringForElement(parentElem, className, attrib, colorPair) |
Adds a temporary hidden element with the passed className as a child of parentElem. Uses this to create a color or colorPair string from the computed CSS rules which would be applied to the element. The hidden element is removed again once the color has been calculated.
Parameters:
parentElem (HTMLElement): The parent element to add the temporary element to.
className (String): The class name to apply to the element.
attrib (String): The style attribute (e.g. backgroundColor) whose colour to query.
colorPair (Boolean): If true, returns a colorPair string. Otherwise just a solid color string.
Returns:
Example
var backgroundColor = jOmnis.getColorStringForElement(this.clientElem, "myclass", "backgroundColor", true);
| getEventCurrentTarget(pEvent) |
A browser-agnostic function to return the current target of an event object. This may not be the original target when events are sent to multiple elements.
Parameters:
Returns:
Example
var evCurrTarget= jOmnis.getEventCurrentTarget(event);
| getEventTarget(pEvent) |
A browser-agnostic function to return the target of an event object. This may not be the current target when events are sent to multiple elements.
Parameters:
Returns:
Example
var evTarget = jOmnis.getEventTarget(event);
| getIconBackSize(pUrl) |
REMOVED in 10.2
Icon related methods have been moved to jIcons. See getIconBackSize().
Returns the dimensions of the image, as a string suitable to be applied to an element’s background-size style value. I.e. “<width>px <height>px”
Parameters:
Returns:
Example
myImg.style.backgroundSize = jOmnis.getIconBackSize("icons/myset/myIcon_90000_32x32.png");
| getIconSize(pUrl, pCssStyle) |
REMOVED in 10.2
Icon related methods have been moved to jIcons. See getIconSize().
Returns either an object with width and height members indicating the size of the icon for the url, or a CSS style to set the background size.
If pCssStyle is false, and the size is not available (such as for a stand-alone page not in an ICON set) returns an empty object.
The icon name must conform to Omnis Icon Set naming syntax.
Parameters:
pUrl (String): The url to the icon image.
pCssStyle (Boolean): Whether to return a CSS style string. e.g. “background-size: 50px 80px;”
Returns:
If pCssStyle=true, returns a CSS style string. e.g. “background-size: 50px 80px;”
If pCssStyle=false, returns a JavaScript Object containing width and height properties.
Example
var iconWidth = jOmnis.getIconsize("icons/myset/myIcon_90000_32x32.png", false).width;
| getOmnisForm(pInstIndex, pFormIndex) |
Gets a reference to an Omnis Form.
Parameters:
pInstIndex (Integer): The local index of the Omnis Instance (zero-based).
pFormIndex (Integer): The local index of the Omnis Form (zero-based).
Returns:
Example
var omForm1 = jOmnis.getOmnisForm(0,0);
| getOmnisFormControl(pInstIndex, pFormIndex, pObjNumber, pObjRowNumber) |
Gets a reference to an individual Control on a form.
Parameters:
pInstIndex (Integer): The local index of the omnis instance (zero-based).
pFormIndex (Integer): The local index of the omnis form (zero-based).
pObjNumber (Integer):The $order number of the control.
pObjRowNumber (Integer): If non-zero the object belongs to the row inside a complex grid. In which case, this should be the row number of the complex grid in which the control resides.
Returns:
Example
var omnisCtl1 = jOmnis.getOmnisFormControl(0,0,1,0);
| getOmnisHeight(pElem, pClientArea) |
Gets the height of the element, according to Omnis rules, for the frame or client areas.
Parameters:
pElem (Object): The html element.
pClientArea (Boolean): If true, the size is returned excluding borders. If false, it includes the borders.
Returns:
Example
var height= jOmnis.getOmnisHeight(elem, false);
| getOmnisInst(pInstIndex) |
Gets a reference to an Omnis Instance.
Parameters:
Returns:
Example
var omInst1 = jOmnis.getOmnisInst(0);
| getOmnisLeft(pElem) |
Gets the left position of the element, according to Omnis rules. This is the left position within the parent element, left of CSS border.
Parameters:
Returns:
Example
var leftPos = jOmnis.getOmnisLeft(elem);
| getOmnisTop(pElem) |
Gets the top position of the element, according to Omnis rules. This is the top position within the parent element, top of CSS border.
Parameters:
Returns:
Example
var topPos = jOmnis.getOmnisTop(elem);
| getOmnisWidth(pElem, pClientArea) |
Gets the width of the element, according to Omnis rules, for the frame or client areas.
Parameters:
pElem (Object): The html element.
pClientArea (Boolean): If true, the size is returned excluding borders. If false, it includes the borders.
Returns:
Example
var width = jOmnis.getOmnisWidth(elem, false);
| getStyle(pElem, pStyleName, pDoParseInt) |
Returns the current specified style attribute. This works regardless of how the style was specified, i.e. via style sheets or the style attribute.
Parameters:
pElem (Object): The html element.
pStyleName (String): The style property name (e.g. “padding-left”).
pDoParseInt (Boolean): True if you wish the result to be parsed as an integer.
Returns:
Example
var leftPad = jOmnis.getStyle(elem, "padding-left", true);
| getTotalHeight(pElem) |
Gets the total CSS height of the element.
Parameters:
Returns:
Example
var totalHeight = jOmnis.getTotalHeight(elem);
| getTotalWidth(pElem) |
Gets the total CSS width of the element.
Parameters:
Returns:
Example
var totalWidth = jOmnis.getTotalWidth(elem);
| getWindowClientScroll() |
Gets the X and Y scroll offsets of the window client area in a JavaScript object .
Parameters:
Returns:
Example
var topPos = jOmnis.getWindowClientScroll().YOffset;
| getWindowClientSize() |
Gets the width and height of the window client area in a JavaScript object.
Parameters:
Returns:
Example
var clientWidth = jOmnis.getWindowClientSize().width;
| inAppWrapper() |
Returns whether the client is running in a wrapper app.
Parameters:
Returns:
Example
this.inWrapper = jOmnis.inAppWrapper();
| okMessage(pTitle, pMessage) |
Opens an OK message dialog. Same as $showmessage() from Omnis code.
Parameters:
pTitle (String): The dialog title.
pMessage (String): The dialog message.
Returns:
Example
jOmnis.okMessage("My Title", "My Message");
| showDialogEx(pTitle, pMessage, pType, pWidth, pHeight, pAutohide, pAtCursor, pModal, pHasClose, pButtonList, pFormInst) |
Opens a dialog, with several customizable options.
Parameters:
pTitle (String): The dialog title.
pMessage (String): The dialog message.
pType (String): Dialog style: 'error'(red), 'warning'(yellow), 'success'(green), 'prompt'(blue), 'message'(blue), 'query'(blue)
pWidth (Integer): Width of dialog box, in pixels. Special values: 0 = autosize, null = default fixed size.
pHeight (Integer): Height of dialog box, in pixels. Special values: 0 = autosize, null = default fixed size.
pAutoHide (Integer): Number of seconds before autoclose. Set to null for no autoclose.
pAtCursor (Boolean): true = open at cursor position. false = centered.
pModal (Boolean): Whether the dialog is modal (disables the rest of the form while it’s shown).
pHasClose (Boolean): Whether the dialog has a close box.
pButtonList (Array): Array of button objects.
pFormInst (Object): A form instance, required for callback to server on button presses.
Returns:
Example
var buttonList = new Array( new button(jOmnis.yesString, true, $yesEvent, jOmnis.yesAccel),
new button(jOmnis.noString, false, "$noEvent", jOmnis.noAccel),
new button(jOmnis.cancelString, false, "$cancelEvent", null) );
jOmnis.showDialogEx("myTitle", "My Message", "message", 0, 0, null, false, true, false, buttonList, formInst);
| parseInteger(pString) |
Converts a string to an integer.
Parameters:
Returns:
Example
var myInt = jOmnis.parseInteger("123");
| setBackgroundFromOmnisDefinition(pElem, pAttName, pDestElem) |
Sets the element’s background color and alpha from the element’s “data-backgroundcolor” attribute (which specifies a Color Pair).
Parameters:
pElem (Object): The html element which is queried for the color pair.
pAttName (optional) (String): The name of the attribute to query for the Color Pair (defaults to “data-backgroundcolor”).
pDestElem (optional) (Object): The html element whose background color & alpha is set (defaults to pElem).
Returns:
Example
jOmnis.setBackgroundFromOmnisDefinition(elem);
| setBorderRadius(pElem, pValue) |
Sets the border radius of the specified element.
Parameters:
pElem (Object): The html element.
pValue (String): The new value. A string of 1 to 4 numbers separated by hyphens "n-n-n-n" (number and ordering of hyphen-separated values corresponds with the CSS border-radius standard. Numbers will be interpreted as “px” units).
Returns:
Example
jOmnis.setBorderRadius(elem, "10-5");
| setOmnisHeight(pElem, pNewHeight) |
Sets the height of the element, according to Omnis rules. The height includes the borders and everything inside.
Parameters:
pElem (Object): The html element.
pNewHeight (Integer): The new height, in pixels.
Returns:
Example
jOmnis.setOmnisHeight(elem, 150);
| setOmnisLeft(pElem, pNewLeft) |
Sets the left position of the element, according to Omnis rules. This is the left position within the parent element, left of CSS border.
Parameters:
pElem (Object): The html element.
pNewLeft (Integer): The new left coordinate, in pixels.
Returns:
Example
jOmnis.setOmnisLeft(elem, 120);
| setOmnisRect(pElem, pNewLeft, pNewTop, pNewWidth, pNewHeight) |
Sets the position and dimensions of the given element, according to Omnis rules.
Parameters:
pElem (Object): The html element.
pNewLeft (Integer): Left coordinate, in pixels.
pNewTop (Integer): Top coordinate, in pixels.
pNewWidth (Integer): Width, in pixels.
pNewHeight (Integer): Height, in pixels.
Returns:
Example
jOmnis.setOmnisRect(elem, 120, 10, 200, 150);
| setOmnisTop(pElem, pNewTop) |
Sets the top position of the element, according to Omnis rules. This is the top position within the parent element, top of CSS border.
Parameters:
pElem (Object): The html element.
pNewTop (Integer): The new top coordinate, in pixels.
Returns:
Example
jOmnis.setOmnisTop(elem, 10);
| setOmnisWidth(pElem, pNewWidth) |
Sets the width of the element, according to Omnis rules. The width includes the borders and everything inside.
Parameters:
pElem (Object): The html element.
pNewWidth (Integer): The new width, in pixels.
Returns:
Example
jOmnis.setOmnisWidth(elem, 200);
| setPropertyBackground(pElem, pPropNumber, pValue) |
Sets the element’s background color or alpha.
Parameters:
pElem (Object): The html element.
pPropNumber (Integer): To set the color, pass eBaseProperties.backcolor. To set the alpha, pass eBaseProperties.backalpha.
pValue (Integer or Float): If setting color, this should be an Omnis rgb color value, if setting alpha, it should be a float, between 0 and 1.
Returns:
Example
var success = jOmnis.setPropertyBackground(elem, eBaseProperties.backcolor, 65280);
success = jOmnis.setPropertyBackground(elem, eBaseProperties.backalpha, 0.5);
| stopEventNow(pEvent) |
Immediately stops the browser from processing the event any further. (i.e. prevents event bubbling, etc.)
Parameters:
Returns:
Example
jOmnis.stopEventNow(event);
| setFontSize(pElem, pSize) |
Sets the point size of a font for an element. Allows for special processing for point size zero. (Zero defaults to point size 9)
Parameters:
pElem (Object): The html element.
pSize (Integer): The size, in points.
Returns:
Example
jOmnis.setFontSize(elem, 12);
| getElemPosRelativeToAncestor(pElem, pAncestor) |
Gets the top and left CSS coordinates of an element relative to its ancestor.
Parameters:
pElem (Object): The html element.
pAncestor (Object): The ancestor to calculate the position from (if null then uses document.body)..
Returns:
Example
var relPos = jOmnis.getElemPosRelativeToAncestor(elem, ancestor);
| getDefaultDateFormatCustom() |
Gets the default value for the custom format string.
Parameters:
Returns:
Example
var defDateFmt = jOmnis.getDefaultDateFormatCustom();
| setDefaultDateFormatCustom(pFormat) |
Sets the default value for the custom format string.
Parameters:
Returns:
Example
var fmt = "D/M/y"
jOmnis.setDefaultDateFormatCustom(fmt);
| getLocaleTimeFormat() |
Gets the client’s localized time format string.
Parameters:
Returns:
| getLocaleShortDateFormat() |
Gets the client’s localized short date format string.
Parameters:
Returns:
| getLocaleShortDateTimeFormat() |
Gets the client’s localized short datetime format string.
Parameters:
Returns:
| getLocaleMediumDateFormat() |
Gets the client’s localized medium date format string.
Parameters:
Returns:
| getLocaleMediumDateTimeFormat() |
Gets the client’s localized medium datetime format string.
Parameters:
Returns:
| getLocaleLongDateFormat() |
Gets the client’s localized long date format string.
Parameters:
Returns:
| getLocaleLongDateTimeFormat() |
Gets the client’s localized long datetime format string.
Parameters:
Returns:
| getLocaleFullDateFormat() |
Gets the client’s localized full date format string.
Parameters:
Returns:
| getLocaleFullDateTimeFormat() |
Gets the client’s localized full datetime format string.
Parameters:
Returns:
| trim(pString, pChars) |
Trims any leading or trailing characters which match those defined in pChars, from the string.
Use ltrim() to trim only leading characters.
Use rtrim() to trim only trailing characters.
Parameters:
pString (String): The string to be trimmed.
pChars (String): The characters to trim. These characters are inserted into square brackets in a regular expression, so this should match that format.E.g:
“abc”: will match a, b or c.
“a-z”: will match any character between a & z.
“^abc” will match any character EXCEPT a, b or c.
Passing an empty string will strip leading & trailing whitespace.
Returns:
Example
var str = jOmnis.trim("aaaaaaaHelloaaa","a"); //Returns "Hello"
| ltrim(pString, pChars) |
Same as trim(), but only trims leading chars. See trim() for details.
| rtrim(pString, pChars) |
Same as trim(), but only trims trailing chars. See trim() for details.
| inFirefox() |
Returns whether the client is running in Firefox.
Parameters:
Returns:
| inOpera() |
Returns whether the client is running in Opera.
Parameters:
Returns:
| inChrome() |
Returns whether the client is running in Chrome.
Parameters:
Returns:
| inSafari() |
Returns whether the client is running in Safari.
Parameters:
Returns:
| inEdge() |
Returns whether the client is running in Edge.
Parameters:
Returns:
| getMethod(pObj, pOmnisMethodName, pInhLevel) |
Gets the name of a method in the object, from the Omnis method name.
Parameters:
pObj (Object): The object (Control or Form).
pOmnisMethodName (String): The Omnis method name.
pInhLevel (Integer): Inheritance level for a private method, or passed as -1 for instance/field methods where the inheritance level does not affect the method called.
Returns:
Example
var methodName = jOmnis.getMethod(this, "$myMethod", -1);
this[methodName].call(this, "p1",123); // First argument to call() is what the method will use as "this".
| doMethod(pCallType, pObj, pOmnisMethodName, pFlags, ...) |
Calls a method relative to object pObj ("Do method" command implementation).
For calling a method of your control, see callMethod()
Parameters:
pCallType (Integer): An eAnums value specifying how the call is to be made. One of: eAnums.priv, eAnums.$cfield, eAnums.$cinst or eAnums.$cwind.
pObj (Object): The object making the call.
pOmnisMethodName (String): The Omnis method name.
pFlags (Integer): Bitmap of eDoMethodFlags values. (Or'd together)
... (Any Extra Parameters): Any extra parameters will be passed as parameters to the method you are calling.
Returns:
Example
// Call an instance method of your form:
var rtn = jOmnis.doMethod(eAnums.$cinst, this, "$myMethod", eDoMethodFlags.completionEvent,"param1",123);
| defaultParameter(pParam, pDefaultValue) |
A helper method to help ensure parameters are initialized with valid values. E.g. Especially useful for optional parameters.
Checks if pParam has been passed (i.e. not null) - if so, it is returned.
If the parameter is null, pDefaultValue is returned.
Parameters:
pParam (Var): The variable whose value to check.
pDefaultValue (Var): The value to return if pParam is null.
Returns:
Example
ctrl_generic.prototype.myMethod = function(p1) {
p1 = jOmnis.defaultParameter(p1, 0); // Ensure p1 is not null.
var myVal = p1 * 100; // would cause an error if p1 was null.
};
Type: Integer
An eClientPlatforms value specifying the platform the client is running on.
| inFirefoxiOS() |
Returns true if running in Firefox on iOS.
Parameters:
Returns:
Example
if (jOmnis.inFirefoxiOS()) {
// Some workaround
}
| inChromeiOS() |
Returns true if running in Chrome on iOS.
Parameters:
Returns:
Example
if (jOmnis.inChromeiOS()) {
// Some workaround.
}
| deepCopy(pObj) |
Returns a deep copy of the passed object.
Parameters:
Returns:
Example
var clone = jOmnis.deepCopy(myObj);
| getURLParameters() |
Returns a JSON object containing the current URL's query parameters' keys & values.
All values will be treated as strings.
Parameters:
Returns:
Example
// User opened the form by visiting http://mysite.com/omnisform?Name=Bert&Age=12
var urlParams = jOmnis.getURLParameters();
// urlParams = {Name: "Bert", Age: "12"}
| sendDOMEvent(pTargetElem, pEventType, pBubbles) |
Sends an event of the specified type to the passed element.
Parameters:
pTargetElem (Element): Element to send the event to.
pEventType (String): The event type (e.g. "click").
pBubbles (Boolean)(Optional): If true, allow the event to bubble.
Returns:
Example
jOmnis.sendDOMEvent(theElem, "click", true);
| getContainerControl(pElem) |
Gets the specified element's container control. If none exists, return null.
Parameters:
Returns:
Example
var container = jOmnis.getContainerControl(client_elem);
This is a global object which allows for more efficient style queries on the same element.
If you are using jOmnis.getStyle() multiple times on the same element, you can improve efficiency by using jStyles.
| setElem(pElem) |
Sets up the object for the element whose styles you wish to query.
You must make this call before using get() or getInt().
Parameters:
Returns:
Example
jStyles.setElem(elem); //sets up the object to get styles for elem.
var style1 = jStyles.get(styleName); // Get the value for styleName style.
var style2 = jStyles.getInt(styleName); // Get the value for styleName style parsed as an integer.
jStyles.done(); // Make sure to call to perform necessary clean up.
| get(pStyleName) |
Gets the value of the passed style name from the element defined in setElem().
Once you have queried the element for all of the styles you require, you must make sure to call jStyles.done().
Parameters:
Returns:
Example
jStyles.setElem(elem); //sets up the object to get styles for elem.
var style1 = jStyles.get(styleName); // Get the value for styleName style.
var style2 = jStyles.getInt(styleName); // Get the value for styleName style parsed as an integer.
jStyles.done(); // Make sure to call to perform necessary clean up.
| getInt(pStyleName) |
Gets the Integer value of the passed style name from the element defined in setElem().
Once you have queried the element for all of the styles you require, you must make sure to call jStyles.done().
Parameters:
Returns:
Example
jStyles.setElem(elem); //sets up the object to get styles for elem.
var style1 = jStyles.get(styleName); // Get the value for styleName style.
var style2 = jStyles.getInt(styleName); // Get the value for styleName style parsed as an integer.
jStyles.done(); // Make sure to call to perform necessary clean up.
| done() |
You must call done() on jStyles after you have finished querying the element for styles. This will perform clean up logic, and remove any cloned elements created during this process from the DOM.
It is not necessary to call done() if you are about to call setElem() again on a different element.
Parameters:
Returns:
Example
jStyles.setElem(elem); //sets up the object to get styles for elem.
var style1 = jStyles.get(styleName); // Get the value for styleName style.
var style2 = jStyles.getInt(styleName); // Get the value for styleName style parsed as an integer.
jStyles.done(); // Make sure to call to perform necessary clean up.
The Theme has some static properties that are accessed without requiring the need to get the instance first.
These are accessed via window.Theme (or simply Theme).
Type: Object
The key-value pairs of theme constants, which match with their respective kJSThemeColor… constant in Omnis.
Example
console.log(Theme.COLORS.primary); // logs to the console: -2147483462 (the same value as kJSThemeColorPrimary)
Type: Object
The key-value pairs of theme constant names.
The Theme instance can be obtained from any control by calling getTheme() as documented in the Control – Instance Methods section.
The Theme contains methods to get the correct theme colors to apply to elements. These methods replace a lot of the color functionality, which have been deprecated, from jOmnis.
In Studio 11, static versions of the theme instance methods getColorString() and getTextColorString() were added. The static versions are the same as the instance methods except you don't need a theme instance to call them.
The existing instance methods are retained for backwards compatibility, but they are deprecated in Studio 11 and you should use the new static versions.
| getColorString(color, defaultColor, alpha) |
Gets string suitable for assigning to a css style.
Parameters:
color (Number): The input color value (either an RGB Int or a Theme.COLORS constant).
defaultColor (optional) (Number): A default color to use, in the case that 'color' is kColorDefault or an unknown constant. Can also be a Theme.COLORS constant.
alpha (optional) (Number): An alpha value between 0 and 1. Defaults to 1.
Returns:
Example
const theme = this.getTheme(); // Called from within a control to get the theme object.
const colorStr = theme.getColorString(newColor, this.DefaultColors[BaseDefaultColorAttributes.BACKGROUND], 1); // Get the color string for newColor value, defaults to this.DefaultColors[BaseDefaultColorAttributes.BACKGROUND] and applies and alpha of 1.
this.client_elem.style.backgroundColor = colorStr; // Assign the background color of the client element to colorStr.
| getTextColorString(textColor, onColor, defaultColor) |
Gets string suitable for assigning to a css style similar to getColorString() but automatically calculates the text color based on the onColor if textColor is kColorDefault and onColor is a theme color with an associated text color.
Parameters:
textColor (Number): The color (either an RGB integer or a Theme.COLORS constant) for the text.
onColor (Number): The background color on which the text will be displayed.
defaultColor (Number): The color to fall back to in the case that textColor is kColorDefault & onColor is not a valid theme color with associated text color.
Returns:
Example
const theme = this.getTheme(); // Called from within a control to get the theme object.
backColor = this.resolveDefaultColor(backColor, BaseDefaultColorAttributes.BACKGROUND); // ensure backColor is resolved to a color constant if it is set to kColorDefault.
const textColorStr = theme.getTextColorString(newTextColor, backColor, this.DefaultColors[BaseDefaultColorAttributes.TEXT]); // Get the color string for newTextColor value, which is to be displayed on backColor, defaults to this.DefaultColors.TEXT
this.client_elem.style.color = textColorStr; // Assign the color of the client element to textColorStr.
| getColorRGB(color, defaultColor) |
Gets the resolved Omnis RGB Integer of the specified color (resolves color constants to their true RGB values).
Parameters:
color (Number): The input color value (either an Omnis RGB Int or a color constant).
defaultColor (optional) (Number): A default color to use, in the case that 'color' is kColorDefault or an unknown constant. Can also be a Theme.COLORS constant, but must not be kColorDefault (-1).
Returns:
Example
const theme = this.getTheme(); // Called from within a control to get the theme object.
const rgbValue = theme.getColorRGB(this.getProperty(eBaseProperties.backcolor));The OMColor class provides static helper methods for common color operations.
| TintRGB(rgbInt, tintFactor, tintType) |
A static function which creates a new Omnis RGB Integer which is tinted to become a lighter or darker shade.
Parameters:
rgbInt (Number): The input color value (an Omnis RGB Int), which you wish to 'tint'.
tintFactor (optional) (Number): The 'strength' of the tint (0-255). This can be an OMColor.eTintFactor enum value.
tintType (optional) (Number): An OMColor.eTintType enum value, specifying whether to lighten, darken, or determine automatically based on the initial color's 'luminance' (effectively how 'light' it is). Defaults to AUTO.
Returns:
Example
const theme = this.getTheme();
const bgColor = theme.getColorRGB(this.getProperty(eBaseProperties.backcolor));
const tintedColor = OMColor.TintRGB(bgColor);| TintRGBWithColor (baseRGB, tintRGB, tintFactor) |
A static function which creates a new Omnis RGB Integer which is tinted towards the passed 'tintRGB' color.
Parameters:
baseRGB (Number): The input color value (an Omnis RGB Int), which you wish to 'tint'.
tintRGB (Number): The color (an Omnis RGB Int) to use to 'tint' the base color.
tintFactor (optional) (Number): The 'strength' of the tint (0-255). This can be an OMColor.eTintFactor enum value.
Returns:
Example
const theme = this.getTheme();
const bgColor = theme.getColorRGB(this.getProperty(eBaseProperties.backcolor));
const redTintColor = 0x0000FF;
const tintedColor = OMColor.TintRGBWithColor(bgColor, redTintColor, OMColor.eTintFactor.SMALL); // Returns the background color, tinted slightly towards red.A static enum representing some default tint factors, which can be applied to OMColor's tinting functions.
Values
DEFAULT
SMALL
MEDIUM
A static enum representing whether to lighten or darken the color, when used with OMColor.TintRGB).
Values
AUTO
LIGHTEN
DARKEN
This class provides ways of adding visual effects.
It is available globally, on the window.
| addRippleToElem(elem, theme, hasContainer, elemColor, keys, keyElement, directColor) |
Adds a ripple effect to the passed element.
Only add once - once added, the ripple effect will be triggered whenever the element is clicked (or optional keys are pressed while it has focus).
Parameters:
elem (Element): The HTML element to apply the ripple to.
theme (Theme): The theme instance to use to resolve themed colors.
hasContainer (optional) (Boolean): If true, the ripple is applied to the container element. If false, it is applied to elem.
elemColor (optional) (Omnis RGB Int): The color of the element to which the ripple will be applied. A tinted color will be generated from this for the ripple (unless directColor is provided).
keys (optional) ([String]): An array of keyboard key names, which should fire the ripple when pressed. E.g. ["Enter", " "]
keyElement (optional) (Element): The element which receives keyboard events. Defaults to elem.
directColor (optional) (Omnis RGB Int): If specified, a color to apply directly to the ripple, rather than calculated from the 'elemColor'.
Returns
Example
const theme = this.getTheme();
jOmnisEffects.addRippleToElem(
this.getClientElem(),
theme,
false,
this.getProperty(eBaseProperties.backcolor),
["Enter", " "], // trigger the ripple effect if Enter or spacebar are pressed
null,
0x0000ff // Set the ripple color directly to red.
);| setRippleColor(elem, theme, elemColor, directColor) |
Updates the color of a previously created ripple element.
Parameters:
elem (Element): The HTML element which already has a ripple applied.
theme (Theme): The theme instance to use to resolve themed colors.
elemColor (Omnis RGB Int): The color of the element to which the ripple will be applied. A tinted color will be generated from this for the ripple (unless directColor is provided).
directColor (optional) (Omnis RGB Int): If specified, a color to apply directly to the ripple, rather than calculated from the 'elemColor'.
Example
const theme = this.getTheme();
jOmnisEffects.setRippleColor(
this.getClientElem(),
theme,
this.getProperty(eBaseProperties.backcolor), // this could be null as 'directColor' is specified
0x00ff00 // Set the ripple color directly to green.
);