# Class: AbstractImage

## .reel~ AbstractImage

#### new AbstractImage()

Source:
  - ui/base/abstract-image.js, line 16

### Extends

- Component

### 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:
  - Component#_templateObjects
Default Value:
  - null
Source:
  - ui/component.js, line 379

#### application :Application

Convenience to access the application object.

##### Type:

- Application

Inherited From:
  - Component#application
Source:
  - ui/component.js, line 868

#### (readonly) childComponents :Array.<Component>

The child components of the component. This property is readonly and should never be changed.

##### Type:

- Array.<Component>

Inherited From:
  - Component#childComponents
Source:
  - ui/component.js, line 1208

#### 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:
  - Component#classList
Source:
  - ui/component.js, line 3374

#### (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:
  - Component#delegate
Default Value:
  - null
Source:
  - ui/component.js, line 366

#### 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:
  - Component#element
Default Value:
  - null
Source:
  - ui/component.js, line 587

#### eventManager :EventManager

Convenience to access the defaultEventManager object.

##### Type:

- EventManager

Inherited From:
  - Component#eventManager
Source:
  - ui/component.js, line 879

#### getTemplateArgumentElement

TemplateArgumentProvider implementation

Inherited From:
  - Component#getTemplateArgumentElement
Source:
  - ui/component.js, line 774

#### hasTemplate :boolean

Specifies whether the component has an HTML template file associated with it.

##### Type:

- boolean

Inherited From:
  - Component#hasTemplate
Default Value:
  - true
Source:
  - ui/component.js, line 1088

#### 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:
  - Component#identifier
Source:
  - ui/component.js, line 328

##### Example

    "userSettingsPanel"

#### localizer :Localizer

The localizer for this component

##### Type:

- Localizer

Inherited From:
  - Component#localizer
Default Value:
  - null
Source:
  - ui/component.js, line 2844

#### 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:
  - Component#needsDraw
Default Value:
  - false
Source:
  - ui/component.js, line 2604

#### 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:
  - Component#nextTarget
Source:
  - ui/component.js, line 428

#### ownerComponent :Component

The owner component is the owner of the template form which this component was instantiated.

##### Type:

- Component

Inherited From:
  - Component#ownerComponent
Default Value:
  - null
Source:
  - ui/component.js, line 1296

#### 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:

- Component

Inherited From:
  - Component#parentComponent
Source:
  - ui/component.js, line 940

#### prepareForDraw

Inherited From:
  - Component#prepareForDraw
Deprecated:
  - Yes
Source:
  - ui/component.js, line 2496
To Do:
  - remove

#### rootComponent :RootComponent

Convenience to access the rootComponent object.

##### Type:

- RootComponent

Inherited From:
  - Component#rootComponent
Source:
  - ui/component.js, line 890

#### template :Template

The template object of the component.

##### Type:

- Template

Inherited From:
  - Component#template
Default Value:
  - null
Source:
  - ui/component.js, line 1077

#### 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:
  - Component#title
Source:
  - ui/component.js, line 317

##### 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:
  - Component#waitForLocalizerMessages
Default Value:
  - false
Source:
  - ui/component.js, line 2892

##### 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:
  - Component#addComposer
Source:
  - ui/component.js, line 2731

#### 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:
  - Component#addComposerForElement
Source:
  - ui/component.js, line 2744

#### 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:
  - Component#clearAllComposers
Source:
  - ui/component.js, line 2824

#### contentWillChange(value)

Lifecycle hook for when Component's domContent changes.

##### Parameters:

Name | Type | Description
--- | --- | ---
`value` | Element | The incoming element.

Inherited From:
  - Component#contentWillChange
Source:
  - ui/component.js, line 341

#### createActionEvent()

Convenience to create a custom event named "action"

Inherited From:
  - Component#createActionEvent
Source:
  - ui/component.js, line 469

##### 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:
  - Component#didDraw
Source:
  - ui/component.js, line 2547
See:
  - http://montagejs.org/docs/Component-draw-cycle.html

#### 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:
  - Component#draw
Source:
  - ui/component.js, line 2511
See:
  - http://montagejs.org/docs/Component-draw-cycle.html

#### 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:
  - Component#enterDocument
Source:
  - ui/component.js, line 3228

#### exitDocument()

Called when this component is removed from the document's DOM tree.

Inherited From:
  - Component#exitDocument
Source:
  - ui/component.js, line 1263

#### 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:
  - Component#extractDomArgument
Source:
  - ui/component.js, line 708

##### Returns:

the element

#### loadComposer(composer)

Load a Composer

##### Parameters:

Name | Type | Description
--- | --- | ---
`composer` | Composer |

Inherited From:
  - Component#loadComposer
Source:
  - ui/component.js, line 2765

#### 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:
  - Component#prepareForActivationEvents
Source:
  - ui/component.js, line 2423

#### 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:
  - Component#removeComposer
Source:
  - ui/component.js, line 2805

#### 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:
  - Component#scheduleComposer
Source:
  - ui/component.js, line 2793

#### 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:
  - Component#surrenderPointer
Source:
  - ui/component.js, line 2699

##### Returns:

true

Type
  boolean

#### unloadComposer(composer)

Unload a Composer

##### Parameters:

Name | Type | Description
--- | --- | ---
`composer` | Composer |

Inherited From:
  - Component#unloadComposer
Source:
  - ui/component.js, line 2778

#### 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:
  - Component#willDraw
Source:
  - ui/component.js, line 2529
See:
  - http://montagejs.org/docs/Component-draw-cycle.html