new RootComponent()
- Source:
Extends
Members
_templateObjects
This property is populated by the template. It is a map of all the
instances present in the template's serialization keyed by their label.
Properties:
Name | Type | Description |
---|---|---|
serializable |
boolean | |
value |
object |
- Inherited From:
- Default Value:
- null
- Source:
application :Application
Convenience to access the application object.
Type:
- Application
- Inherited From:
- Source:
(readonly) childComponents :Array.<Component>
The child components of the component.
This property is readonly and should never be changed.
Type:
- Array.<Component>
- Inherited From:
- Source:
classList
The classList of the component's element, the purpose is to mimic the
element's API but to also respects the draw cycle.
It can also be bound to by binding each class as a property.
example to toggle the complete class:
```json
"classList.has('complete')" : { "<-" : "@owner.isComplete"}
```
- Inherited From:
- Source:
(nullable) delegate :Object
A delegate is an object that has helper methods specific to particular
components.
For example, a TextField may consult its `deletate`'s
`shouldBeginEditing()` method, or inform its `delegate` that it
`didBeginEditing()`.
Look for details on the documentation of individual components'
`delegate` properties.
Type:
- Object
- Inherited From:
- Default Value:
- null
- Source:
element
The element of the component as defined in the template.
```json
{
"component": {
"values": {
"element": {"#": "dataMontageId"}
}
}
}
```
DOM arguments can be passed to the component as direct children of the
element. By default the entire content of the element is considered the
single DOM argument of the component.
Multiple arguments can be given by assigning a `data-arg` attribute to
each element that represents an argument.
```html
```
If the component has a template then this element is replaced by the
element that is referenced in its template just before the component
enters the document.
```json
{
"owner": {
"values": {
"element": {"#": "dataMontageId"}
}
}
}
```
The component element has a `component` property that points back to the
component. This property is specially useful to extrapolate the component
tree from the DOM tree. It can also be used for debugging purposes, on
the webkit inspector when an element is selected it's possible to find
its component by using the `$0.component` command on the console.
The element of a component can only be assigned once, it's not possible
to change it.
Properties:
Type | Description |
---|---|
DOMElement |
- Inherited From:
- Default Value:
- null
- Source:
eventManager :EventManager
Convenience to access the defaultEventManager object.
Type:
- Inherited From:
- Source:
getTemplateArgumentElement
TemplateArgumentProvider implementation
- Inherited From:
- Source:
hasTemplate :boolean
Specifies whether the component has an HTML template file associated with
it.
Type:
- boolean
- Inherited From:
- Default Value:
- true
- Source:
identifier
An identifier label used to refer to the component in code.
For example, event handler will call `handleIdentifierAction` which uses this identifier.
If not defined, will be the same as serialization object's key.
Not to be confused with the human-friendly Component.title.
Properties:
Type | Description |
---|---|
String |
- Overrides:
- Source:
Example
"userSettingsPanel"
localizer :Localizer
The localizer for this component
Type:
- Localizer
- Inherited From:
- Default Value:
- null
- Source:
needsDraw
The purpose of this property is to trigger the adding of the component to
the draw list. The draw list consists of all the components that will be
drawn on the next draw cycle.
The draw cycle itself is triggered by the `requestAnimationFrame` API
where available, otherwise a shim implemented with `setTimeout` is used.
When it happens, the draw cycle will call, in succession, and when they
exist, the methods: `willDraw`, `draw`, and `didDraw`.
At the end of the draw cycle this property is set back to `false`.
Properties:
Type | Description |
---|---|
boolean |
- Inherited From:
- Default Value:
- false
- Source:
nextTarget
The next Target to consider in the event target chain
Currently, components themselves do not allow this chain to be broken;
setting a component's nextTarget to a falsy value will cause nextTarget
to resolve as the parentComponent.
To interrupt the propagation path a Target that accepts a falsy
nextTarget needs to be set at a component's nextTarget.
- Inherited From:
- Source:
ownerComponent :Component
The owner component is the owner of the template form which this
component was instantiated.
Type:
- Inherited From:
- Default Value:
- null
- Source:
parentComponent :Component
The parent component is the component that is found by walking up the
DOM tree, starting at the component's `element`. Each component element
has a `component` property that points back to the component object, this
way it's possible to know which component an element represents.
This value is null for the RootComponent.
Type:
- Inherited From:
- Source:
prepareForDraw
- Inherited From:
- Deprecated:
- Yes
- Source:
- To Do:
-
- remove
rootComponent :RootComponent
Convenience to access the rootComponent object.
Type:
- Inherited From:
- Source:
template :Template
The template object of the component.
Type:
- Inherited From:
- Default Value:
- null
- Source:
title
A human-friendly display title for the component.
Useful when component is used as a view and a view title is needed, e.g. with a navigation bar.
Different than Component.identifier.
Properties:
Type | Description |
---|---|
String |
- Inherited From:
- Source:
Example
"User Settings Panel"
waitForLocalizerMessages :boolean
Whether to wait for the localizer to load messages before drawing.
Make sure to set the localizer before
setting to ```true```.
Type:
- boolean
- Inherited From:
- Default Value:
- false
- Source:
Example
// require localizer
var defaultLocalizer = localizer.defaultLocalizer,
_ = defaultLocalizer.localizeSync.bind(defaultLocalizer);
exports.Main = Component.specialize( {
constructor: {
value: function () {
this.localizer = defaultLocalizer;
this.waitForLocalizerMessages = true;
}
},
// ...
// no draw happens until the localizer's messages have been loaded
enterDocument: {
value: function (firstTime) {
if (firstTime) {
this._greeting = _("hello", "Hello {name}!");
}
}
},
draw: {
value: function () {
// this is for illustration only. This example is simple enough that
// you should use a localizations binding
this._element.textContent = this._greeting({name: this.name});
}
}
}
Methods
addComposer(composer)
Adds the passed in composer to the component's composer list.
Parameters:
Name | Type | Description |
---|---|---|
composer |
Composer |
- Inherited From:
- Source:
addComposerForElement(composer, element)
Adds the passed in composer to the component's composer list and
sets the element of the composer to the passed in element.
Parameters:
Name | Type | Description |
---|---|---|
composer |
Composer | |
element |
Element |
- Inherited From:
- Source:
clearAllComposers()
A convenience method for removing all composers from a component. This method
is responsible for calling unload on each composer before removing it.
- Inherited From:
- Source:
contentWillChange(value)
Lifecycle hook for when Component's domContent changes.
Parameters:
Name | Type | Description |
---|---|---|
value |
Element | The incoming element. |
- Inherited From:
- Source:
createActionEvent()
Convenience to create a custom event named "action"
- Inherited From:
- Source:
Returns:
and event to dispatch upon interaction
didDraw()
This method is part of the draw cycle and it provides the component an
opportunity to query the DOM for any necessary calculations after
drawing.
If the execution of this method sets needsDraw to true on other
components, those components will be added to the current draw cycle.
Components should not change the DOM during this phase of the draw cycle
as it could force an unwanted reflow from the browser.
- Inherited From:
- Source:
- See:
draw()
This method is part of the draw cycle and is the prescribed location for
components to update its DOM structure or modify its styles.
Components should not read the DOM during this phase of the draw cycle
as it could force an unwanted reflow from the browser.
- Inherited From:
- Source:
- See:
enterDocument(firstTime)
This function is called when the component element is added to the
document's DOM tree.
Parameters:
Name | Type | Description |
---|---|---|
firstTime |
boolean | `true` if it's the first time the component enters the document. |
- Inherited From:
- Source:
exitDocument()
Called when this component is removed from the document's DOM tree.
- Inherited From:
- Source:
extractDomArgument(name)
This function extracts a DOM argument that was in the element assigned
to the component.
The star (`*`) argument refers to the entire content of the element when
no `data-arg` was given.
When a DOM argument is extracted from a Component it is no longer
available
Parameters:
Name | Type | Description |
---|---|---|
name |
string | The name of the argument, or `"*"` for the entire content. |
- Inherited From:
- Source:
Returns:
the element
loadComposer(composer)
Load a Composer
Parameters:
Name | Type | Description |
---|---|---|
composer |
Composer |
- Inherited From:
- Source:
prepareForActivationEvents()
Called by the EventManager before dispatching a `touchstart` or
`mousedown`.
The component can implement this method to add event listeners for these
events before they are dispatched.
- Inherited From:
- Source:
removeComposer(composer)
Removes the passed in composer from this component's composer list. It takes care
of calling the composers unload method before removing it from the list.
Parameters:
Name | Type | Description |
---|---|---|
composer |
Composer |
- Inherited From:
- Source:
scheduleComposer(composer)
Adds the passed in composer to the list of composers which will have their
frame method called during the next draw cycle. It causes a draw cycle to be scheduled
iff one has not already been scheduled.
Parameters:
Name | Type | Description |
---|---|---|
composer |
Composer |
- Inherited From:
- Source:
surrenderPointer(pointer, demandingComponent) → {boolean}
Ask this component to surrender the specified pointer to the
demandingComponent.
The component can decide whether or not it should do this given the
pointer and demandingComponent involved.
Some components may decide not to surrender control ever, while others
may do so in certain situations.
Returns true if the pointer was surrendered, false otherwise.
The demandingComponent is responsible for claiming the surrendered
pointer if it desires.
Parameters:
Name | Type | Description |
---|---|---|
pointer |
string | The `pointerIdentifier` that the demanding component is asking this component to surrender |
demandingComponent |
Object | The component that is asking this component to surrender the specified pointer |
- Inherited From:
- Source:
Returns:
true
- Type
- boolean
unloadComposer(composer)
Unload a Composer
Parameters:
Name | Type | Description |
---|---|---|
composer |
Composer |
- Inherited From:
- Source:
willDraw()
This method is part of the draw cycle and it provides the component an
opportunity to query the DOM for any necessary calculations before
drawing.
If the execution of this method sets needsDraw to true on other
components, those components will be added to the current draw cycle.
Components should not change the DOM during this phase of the draw cycle
as it could force an unwanted reflow from the browser.
- Inherited From:
- Source:
- See: