Represents the model of a UI component. Abcs designer does not modify page UI components directly but rather using a view. It modifies the UI component's behavior and properties by updating its properties. The UI component is then rebuilt by a Generator to reflect the view changes.
In an ABCS page views are organized into a tree structure which corresponds to the nesting of UI components into one another. There is always one top level view which is held by page object itself and holds components in its nested lists of children. Since the complex UI components are being composed from several low-level components, Views are simulating similar structure. Every single View can have many children views and one single parent.
View is usually created in a Creator. You do not create a view directly by calling its constructor but rather using the ComponentFactory.createView factory method. Views are then transformed into UI components that browser can understand with a Generator building a jQuery element as the view's UI representation.
- Version:
- 16.3.5
- Source:
- See:
-
- ComponentFactory on how to create view
- Creator on how to create views for your components
- Generator on how to transform your views into UI elements.
Methods
getArchetype() → {viewmodel/js/api/Archetype|undefined}
stable API
Returns Archetype owned by this View. Every view can own single archetype or none.
Archetypes are abstraction layer useful for work over Business Objects. See Archetypes for further summary and information about archetype types supported by ABCS.
- Version:
- 16.3.5
- Source:
- See:
-
- Archetype for further information about Archetypes
Returns:
archetype owned by the view or
undefined if no such archetype exists
- Type
- viewmodel/js/api/Archetype | undefined
Example
Prints name of the entity owned by the current view.
// get the view's archetype
var archetype = view.getArchetype();
// checks whether such archetype even exists
if (archetype) {
// will yield the bound entity name
var entityName = archetype.getEntity().getSingularName();
console.log('Bound entity: ' + entityName);
}getChildren() → {Array.<pages.dt/js/api/View>}
stable API
Gets all direct child Views held by this view.
Note that this is not a recursive method and gets only direct children. All obtained children have this view set as their parent.
- Version:
- 16.3.5
- Source:
- See:
-
- View.getParent how to get the view's parent View
- View description how the views are structured
Returns:
direct child views
- Type
- Array.<pages.dt/js/api/View>
Examples
Method for deep seeking of all view's children (including the nested ones).
function getAllChildViews(view) {
var result = [];
// gets list of direct children
var children = view.getChildren();
for (var i = 0; i < children.length; i++) {
var child = children[i];
// gathers the child itself
result.push(child);
// gathers list of child's views and its descendants
result = result.concat(getAllChildViews(child));
}
return result;
}Tells whether the given view contains children or not.
var containsChildren = view.getChildren().length > 0;getEnclosingArchetype() → {viewmodel/js/api/Archetype|undefined}
stable API
Returns Archetype owned by this or the nearest enclosing View.
As the views are usually nested, this method helps you to find the closest related Archetype you need to work with inside i.e. Creator.
Archetypes are abstraction layer useful for work over Business Objects. See Archetypes for further summary and ArchetypeTypes supproted by ABCS.
- Version:
- 16.3.5
- Source:
- See:
Returns:
the nearest archetype of one of the parent's views or undefined if no such archetype exists
- Type
- viewmodel/js/api/Archetype | undefined
Example
Writes name of the entity bound with the current view if any.
// get the view's archetype
var archetype = view.getEnclosingArchetype();
// checks whether such archetype even exists
if (archetype) {
// will yield the enclosing entity name
var entityName = archetype.getEntity().getSingularName();
console.log('Enclosing entity: ' + entityName);
}getId() → {String}
stable API
Returns the unique identifier of the view.
View IDs across whole ABCS application should be unique which means that ID can be used for seeking or referencing particular view instance.
- Version:
- 16.3.5
- Source:
Returns:
ID of the view
- Type
- String
Example
Gets ID of the newly created View object.
// creates instance of the view
var view = ComponentFactory.createView({
displayName: 'customButton',
type: 'org.components.customButton',
});
// view generates the unique ID by itself from the given type
console.log('You view\'s ID = ' + view.getId());getParent() → {pages.dt/js/api/View}
stable API
Gets the direct parent View.
Since the complex UI components are being composed from several low-level components, Views are simulating similar structure. Every single View can have many children views and one single parent.
- Version:
- 16.3.5
- Source:
- See:
-
- View.getChildren how the views are structured
- Generator for more information about following example
Returns:
direct view's parent View if any, undefined otherwise
- Type
- pages.dt/js/api/View
Example
Generator's method leverages parent's property in rendering.
// template.html content
<p>Use the parent's property called 'forChild' here: $forChild$</p>
// MyCustomGenerator.js content
define(['text!myComponent/templates/template.html'], function (template) {
'use strict';
var MyCustomGenerator = function() {
};
MyCustomGenerator.prototype.buildView = function (view, page) {
// we presume that view has parent with property 'forChild'
var parent = view.getParent();
// gets the properties definition object
var parentPropertiesDef = parent.getProperties().getDefinition();
// applies the parent's properties over the template
var tplWithProperties = ViewGeneratorSupport.applyProperties(template, parentPropertiesDef);
// creates jQuery element to be returned by Generator
var $element = $(tplWithProperties);
return $element;
};
return MyCustomGenerator;
});getProperties() → {pages.dt/js/api/Properties}
stable API
Gets properties of the view.
Any data one wants to preserve in the View should be stored inside its properties. Properties are used in the property inspector for displaying bound UI component setup or in the Generators for building DOM elements.
- Version:
- 16.3.5
- Source:
- See:
-
- Properties for further information about the properties holder
- PropertyInspector's example for one of usages of the View.getProperties()
Returns:
view's properties
Example
Updating properties of the view.
// get the view's properties
var properties = view.getProperties();
// setting new value
properties.setValue('myKeyToUpdate', 'newValue');getType() → {String}
stable API
Returns type of this view.
Type defines what PI will be shown when the view is selected, what Generator will be used to transform the view into a UI element etc.
- Version:
- 16.3.5
- Source:
Returns:
type of the View
- Type
- String
Example
Gets all other views of the same type on the active page.
// gets the view's type
var type = view.getType();
// seeks the active page's views of the same type
var Navigation = require('pages.dt/js/api/Navigation');
var PageUtils = require('pages.dt/js/api/PageUtils');
var viewsOfTheType = PageUtils.findViewsByType(Navigation.getActivePage(), type);