componyx.UI ($UI) Contains global helper methods for UI components.
Classes
- AppSkin
- BookmarkSpy
- Box
- Button
- Carousel
- ColorButton
- ColorPicker
- ComboBox
- DataPager
- DatePicker
- Dialog
- Editor
- FileUpload
- Form
- FormField
- Grid
- MaskedTextBox
- Menu
- NumericBox
- PanelBar
- PieChart
- Slider
- TabStrip
- TimePicker
- TooltipManager
- Validator
Namespaces
- base
- bindary_modules
- editor_modules
- form_modules
- menu_modules
- tabStrip_modules
Members
(static) autoDetect :Boolean
A value indicating whether UI components are automatically detected when the page is ready.
Type:
(static) cssResources :Object
componyx.UI.cssResources Contains UI css resources for dynamic loading.
Type:
(static) elementStore :Object
componyx.UI.elementStore Holds UI component references by HTMLElement.
Type:
(static) groupStore :Object
componyx.UI.groupStore Holds UI component id's for each unique group.
Type:
Event which fires when the UI component chain is rendered.
Type:
- See:
-
Event which fires before a UI component loads the component tag settings (JSON settings from the attribute data-ui-settings or data-ui-settingsid). Incoming argument is the HTMLElement.
Type:
- See:
-
Event which fires before a UI component is rendered. Incoming argument is the component instance.
Type:
- See:
-
(static) resourcesBefore :HTMLElement
When specified, component resources will be added before this resource element.
Type:
(static) scriptResources :Object
componyx.UI.scriptResources Contains UI script resources for dynamic loading.
Type:
(static) store :Object
Holds UI component references by unique id and HTMLElement.
Type:
(static) themeName :String
The CSS theme name which is set on the component's root element. Can be overridden when defined on a component-group or component.
Type:
(static) useCustomElementNames :Boolean
A value indicating if UI components use custom element names.
Type:
(static) version :String|null
When specified, the version is appended to the URL for locating UI CSS & Script resources.
Type:
Methods
(static) addSettings(settingsId, settings)
Adds base settings for a specific component(s).
Parameters:
| Name |
Type |
Description |
settingsId |
String
|
Identifier of the settings object. |
settings |
Object
|
The settings used to initialize the component. |
(static) addToGroup(groupId, componentId)
Adds a component to a unique group.
Parameters:
| Name |
Type |
Description |
groupId |
String
|
Unique identifier of the component group. |
componentId |
String
|
Unique identifier of the component. |
(static) createComponent(componentClass, properties, elementopt, optionsopt) → {object|Promise.<object>}
Creates a new component instance.
Parameters:
| Name |
Type |
Attributes |
Description |
componentClass |
function
|
Constructor
|
String
|
|
The component class (or name when options.loadScript is set to true). |
properties |
object
|
|
The properties to initialize the component. Must include the id property. |
element |
HTMLElement
|
<optional>
|
The element that is the actual component instance (standard web components) or the placeholder element to replace with thew component instance. |
options |
object
|
<optional>
|
Additional options.
Properties
| Name |
Type |
Attributes |
Default |
Description |
loadScript |
boolean
|
<optional>
|
false
|
Indicates whether to load the component script if it is not already loaded. Be aware, this call is awaited! |
namespace |
string
|
null
|
<optional>
|
null
|
The namespace to use when resolving the component script. Defaults to componyx.UI. if not provided. |
|
Returns:
A new component instance or a Promise resolving to the new component instance in case of loadScript:true.
-
Type
-
object
|
Promise.<object>
(static) destroy(container)
Destroys all components within the specified container element.
Parameters:
| Name |
Type |
Description |
container |
HTMLElement
|
A container element in which the UI components must be destoyed. |
(static) destroyGroup(groupId, removeGroupopt)
Destroys all components in the specified group.
Parameters:
| Name |
Type |
Attributes |
Default |
Description |
groupId |
String
|
|
|
Unique identifier of the component group. |
removeGroup |
Boolean
|
<optional>
|
false
|
A value indicating if the group should be removed. |
(static) detect(containeropt, overwriteopt)
Detects and registers on the page defined components and component-groups.
Parameters:
| Name |
Type |
Attributes |
Default |
Description |
container |
HTMLElement
|
<optional>
|
|
A container element in which the UI components must be detected. |
overwrite |
Boolean
|
<optional>
|
true
|
A value indicating to overwrite (recreate) the component element if it already exists. |
(static) getCssResourcePath(name, themeopt) → {string}
Gets the resource path for on-demand loading of component CSS.
Parameters:
Returns:
-
Type
-
string
(static) getScriptResourcePath(name) → {string}
Gets the resource path for on-demand loading of component scripts.
Parameters:
| Name |
Type |
Description |
name |
String
|
The component name. |
Returns:
-
Type
-
string
(static) loadComponentScript(typeName) → {Promise.<function()>}
Loads the component script asynchronously by its full type name (including namespace).
This method dynamically imports the script file, waits for any module initialization, and returns the component class once it is loaded and available.
Parameters:
| Name |
Type |
Description |
typeName |
|
The full name of the component type, including the namespace (e.g. 'componyx.UI.ComboBox'). |
Returns:
A Promise resolving to the loaded component class.
-
Type
-
Promise.<function()>
(static) removeGroup(groupId)
Removes the specified group.
Parameters:
| Name |
Type |
Description |
groupId |
String
|
Unique identifier of the component group. |
(static) renderGroup(groupId, showopt, excludeopt, themeopt, themeNameopt)
Renders all components in the specified group.
Parameters:
| Name |
Type |
Attributes |
Description |
groupId |
String
|
|
Unique identifier of the component group. |
show |
Boolean
|
<optional>
|
A value indicating if the components should be displayed (true by default). |
exclude |
Array.<String>
|
<optional>
|
A list of component id's inside the group to exclude from rendering. |
theme |
componyx.UI.base.static.ThemeOption
|
<optional>
|
The active styling theme of the component. |
themeName |
String
|
<optional>
|
The theme name is appended to the CSS class of the component's root HTMLElement. |
(static) setResourcePath(scriptPath, cssPathopt, themeopt, cssThemePathopt)
Sets the relative or absolute path for on-demand loading of component script and css resources.
Parameters:
| Name |
Type |
Attributes |
Description |
scriptPath |
String
|
|
The path (relative or absolute root URL) to locate script resources. Use {0} as placeholder for the component name. (e.g. 'scripts/{0}.min.js' or 'http://path/src?d={0}.min.js') |
cssPath |
String
|
<optional>
|
The path (relative or absolute root URL) to locate css resources. Use {0} as placeholder for the component name. (e.g. 'css/(0).min.css' or 'http://path/src?d={0}.min.css') |
theme |
componyx.UI.base.static.ThemeOption
|
<optional>
|
The css theme to activate. Is required when a default component theme is used (e.g. ThemeOption.DEFAULT). |
cssThemePath |
String
|
<optional>
|
The path (relative or absolute root URL) to locate css theme resources. Use {0} as placeholder for the component name. (e.g. 'css/{0}.Themes.Default.css' or 'http://path/src?d={0}.Themes.Default.css') |