JSLayoutContainer
Overview
The JSLayoutContainer is a JavaScript object designed to facilitate the management and manipulation of layout containers in the Solution Model. It supports both hierarchical navigation and dynamic creation of containers, offering extensive control over layout structures. This object is particularly useful for building responsive designs and managing nested layouts efficiently.
The container's properties allow users to define dimensions, positions, and appearance attributes. For example, height, x
, and y
coordinates control spatial placement, while cssClasses
and tagType
customize the HTML output. Identifiers such as elementId
, name
, packageName
, and specName
ensure clear referencing and seamless integration with layout specifications.
The methods provided enable comprehensive interaction with components and containers. Users can add, retrieve, or remove components through functions like newWebComponent(type)
or getComponent(name)
. Attribute management is also supported, allowing customization with methods like putAttribute(key, value)
. Additionally, hierarchical navigation is made simple with functions such as findLayoutContainer(name)
and getLayoutContainers()
, which aid in accessing or organizing nested structures dynamically.
These features collectively make the JSLayoutContainer a robust tool for developing adaptable and scalable form layouts.
Properties Summarized
The css classes to be output for html tag.
The id to be output for html tag.
Get/set container height.
The name of the component.
returns the layouts package name
returns the layouts spec name
The tag type for html output.
Get/set x location.
Get/set Y location.
Methods Summarized
Returns a JSLayoutContainer that has the given name throughout the whole form hierarchy.
Returns a JSWebComponent that has the given name through the whole hierarchy of JSLayoutContainers
Returns the comment of this container.
Returns a JSComponent that has the given name; if found it will be a JSField, JSLabel, JSButton, JSPortal, JSBean, JSWebComponent or JSTabPanel.
Returns a array of all the JSComponents that a form has; they are of type JSField,JSLabel,JSButton,JSPortal,JSBean, JSWebComponents or JSTabPanel.
Returns a array of all the JSComponents that a form has; they are of type JSField,JSLabel,JSButton,JSPortal,JSBean, JSWebComponent or JSTabPanel.
Returns a JSLayoutContainer that has the given name of this container.
Returns all JSLayoutContainers objects of this container.
Returns all JSLayoutContainers objects of this container
Returns a JSWebComponent that has the given name that is a child of this layout container.
Returns all JSWebComponents of this form/container.
Returns all JSWebComponents of this form/container.
Create a new layout container as the last child of its parent container.
Create a new layout container.
Create a new layout container.
Create a new layout container as the last child in its parent container.
Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form.
Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form.
Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form, as the last component in its parent container.
Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form.
Creates a new JSWebComponent (spec based component) object on the form.
void
void
Remove a layout container (with all its children) from hierarchy.
Removes a component (JSLabel, JSButton, JSField, JSPortal, JSBean, JSTabpanel, JSWebComponent) that has the given name.
Removes a JSWebComponent that has the specified name.
Properties Detailed
cssClasses
The css classes to be output for html tag.
Type String
Sample
elementId
The id to be output for html tag.
Type String
Sample
height
Get/set container height. This is only used for CSS Position Container.
Type Number
Sample
name
The name of the component. Through this name it can also accessed in methods. Must be a valid javascript name. (no - in the name or start with number)
Type String
Sample
packageName
returns the layouts package name
Type String String
specName
returns the layouts spec name
Type String String
tagType
The tag type for html output. Default value is 'div'.
Type String
Sample
x
Get/set x location. Location is used for ordering in html output.
Type Number
Sample
y
Get/set Y location. Location is used for ordering in html output.
Type Number
Sample
Methods Detailed
findLayoutContainer(name)
Returns a JSLayoutContainer that has the given name throughout the whole form hierarchy.
Parameters
String name the specified name of the container
Returns: JSLayoutContainer a JSLayoutContainer object
Sample
findWebComponent(name)
Returns a JSWebComponent that has the given name through the whole hierarchy of JSLayoutContainers
Parameters
String name the specified name of the web component
Returns: JSComponent a JSWebComponent object
Sample
getAttribute(name)
Parameters
String name the attributes name
Returns: String
Sample
getComment()
Returns the comment of this container.
Returns: String
Sample
getComponent(name)
Returns a JSComponent that has the given name; if found it will be a JSField, JSLabel, JSButton, JSPortal, JSBean, JSWebComponent or JSTabPanel.
Parameters
String name the specified name of the component
Returns: JSComponent a JSComponent object (might be a JSField, JSLabel, JSButton, JSPortal, JSBean, JSWebComponent or JSTabPanel)
Sample
getComponents()
Returns a array of all the JSComponents that a form has; they are of type JSField,JSLabel,JSButton,JSPortal,JSBean, JSWebComponents or JSTabPanel.
Returns: Array an array of all the JSComponents on the form.
Sample
getComponents(returnInheritedElements)
Returns a array of all the JSComponents that a form has; they are of type JSField,JSLabel,JSButton,JSPortal,JSBean, JSWebComponent or JSTabPanel.
Parameters
Boolean returnInheritedElements true to also return the elements from the parent form
Returns: Array an array of all the JSComponents on the form.
Sample
getLayoutContainer(name)
Returns a JSLayoutContainer that has the given name of this container. Use findLayoutContainer() method to find a JSLayoutContainter through the hierarchy
Parameters
String name the specified name of the container
Returns: JSLayoutContainer a JSLayoutContainer object
Sample
getLayoutContainers()
Returns all JSLayoutContainers objects of this container. Does not return the inherited containers, use #getLayoutContainers(true) to get the inherited as well.
Returns: Array all JSLayoutContainers objects of this container
Sample
getLayoutContainers(returnInheritedElements)
Returns all JSLayoutContainers objects of this container
Parameters
Boolean returnInheritedElements true to also return the elements from parent form
Returns: Array all JSLayoutContainers objects of this container
Sample
getWebComponent(name)
Returns a JSWebComponent that has the given name that is a child of this layout container. Use findWebComponent() to find a webcomponent through the hierarchy
Parameters
String name the specified name of the web component
Returns: JSComponent a JSWebComponent object
Sample
getWebComponents()
Returns all JSWebComponents of this form/container. If this method is called on a form, then it will return all web components on that form. If the form is responsive, it will return the web components from all the containers. It does not return the inherited components, use #getWebComponents(true) to get the inherited as well.
Returns: Array the list of all JSWebComponent on this forms
Sample
getWebComponents(returnInheritedElements)
Returns all JSWebComponents of this form/container. If this method is called on a form, then it will return all web components on that form. If the form is responsive, it will return the web components from all the containers.
Parameters
Boolean returnInheritedElements true to also return the elements from parent form
Returns: Array the list of all JSWebComponents on this forms
Sample
newLayoutContainer()
Create a new layout container as the last child of its parent container. This method can only be used in responsive forms.
If you want to use default values and so on from a layout package (like 12grid) or if you use the solution model to create a form that is saved back into the workspace (servoyDeveloper.save(form)) then you have to set the packageName and specName properties. So that it works later on in the designer.
If the packageName and specName are not provided, then: the packageName is the same as for the parent container the specName is the first allowed child defined in the specification of the parent container
If the specification of the parent container does not defined allowed children, then if it is not empty the packageName and the specName are copied from the first child layout container.
Returns: JSLayoutContainer the new layout container
Sample
newLayoutContainer(position)
Create a new layout container. The position is used to determine the generated order in html markup. This method can only be used in responsive forms.
If you want to use default values and so on from a layout package (like 12grid) or if you use the solution model to create a form that is saved back into the workspace (servoyDeveloper.save(form)) then you have to set the packageName and specName properties. So that it works later on in the designer.
If the packageName and specName are not provided, then: the packageName is the same as for the parent container the specName is the first allowed child defined in the specification of the parent container
If the specification of the parent container does not defined allowed children, then if it is not empty the packageName and the specName are copied from the first child layout container.
Parameters
Number position the position of JSWebComponent object in its parent container
Returns: JSLayoutContainer the new layout container
Sample
newLayoutContainer(position, spec)
Create a new layout container. The position is used to determine the generated order in html markup. This method can only be used in responsive forms.
Parameters
Number position the position of JSWebComponent object in its parent container
String spec a string of the form 'packageName-layoutName', or 'layoutName'
Returns: JSLayoutContainer the new layout container
Sample
newLayoutContainer(spec)
Create a new layout container as the last child in its parent container. This method can only be used in responsive forms.
Parameters
String spec a string of the form 'packageName-layoutName', or 'layoutName'
Returns: JSLayoutContainer the new layout container
Sample
newWebComponent(type)
Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form. Will receive a generated name. Will be added as last position in container.
Parameters
String type the webcomponent name as it appears in the spec
Returns: JSComponent a JSWebComponent object
Sample