Class M.View
Extends
M.Object.
M.View defines the prototype for any view within The M-Project. It implements lots of basic
properties and methods that are used in many derived views. M.View specifies a default
behaviour for functionalities like rendering, theming, delegating updates etc.
Defined in: view.js.
Constructor Attributes | Constructor Name and Description |
---|---|
M.View()
|
Field Attributes | Field Name and Description |
---|---|
An array specifying the view's children.
|
|
This property contains the relevant information about the view's computed value.
|
|
The path to a content that is bound to the view's value.
|
|
The path to a content that is bound to the view's value (reverse).
|
|
This property can be used to assign a css class to the view to get a custom styling.
|
|
This property can be used to assign a css class to the view if an error occurs.
|
|
This property can be used to assign a css class to the view on its initialization.
|
|
This property can be used to assign a css style to the view.
|
|
This property is used to specify a view's events and their corresponding actions.
|
|
Indicates whether this view currently has the focus or not.
|
|
This property is used internally to recursively build the pages html representation.
|
|
The id of the view used for the html attribute id.
|
|
Indicates whether the view should be displayed inline or not.
|
|
A boolean value to definitely recognize a view as a view, independent on its
concrete type, e.g.
|
|
If a view represents a model, e.g.
|
|
This property can be used to save a reference to the view's parent view.
|
|
This property specifies the recommended events for this type of view.
|
|
Determines whether an onChange event will trigger a defined action or not.
|
|
Determines whether an onKeyUp event with the enter button will trigger a defined
action or not.
|
|
Determines whether an onKeyUp event will trigger a defined action or not.
|
|
The type of this object.
|
|
The value property is a generic property for all values.
|
Method Attributes | Method Name and Description |
---|---|
addCssClass(cssClass)
Adds a css class to the view's DOM representation.
|
|
This method attaches the view to an observable to be later notified once the observable's
state did change.
|
|
Clears the html property of a view and triggers the same method on all of its
child views.
|
|
This method defines a basic functionality for clearing a view's value.
|
|
If the view's computedValue property is set, compute the value.
|
|
The contentDidChange method is automatically called by the observable when the
observable's state did change.
|
|
This method delegates any value changes to a controller, if the 'contentBindingReverse'
property is specified.
|
|
design(obj)
This method encapsulates the 'extend' method of M.Object for better reading of code syntax.
|
|
This method transforms the child views property (string) into an array.
|
|
getIds()
This method creates and returns an associative array of all child views and
their ids.
|
|
getValue()
|
|
This method creates and returns an associative array of all child views and
their values.
|
|
gotFocus()
This method is called whenever the view got the focus and basically only sets
the view's hasFocus property to YES.
|
|
This method is called whenever the view lost the focus and basically only sets
the view's hasFocus property to NO.
|
|
nl2br(str)
This method parses a given string, replaces any new line, '\n', with a line break, '
', and returns the modified string. |
|
This method is responsible for registering events for view elements and its child views.
|
|
removeCssClass(cssClass)
Removes a css class to the view's DOM representation.
|
|
removeCssProperty(key)
Removes a css property from the view's DOM representation.
|
|
secure(str)
This method secure the passed string.
|
|
setCssProperty(key, value)
Adds or updates a css property to the view's DOM representation.
|
|
style()
|
|
tab2space(str)
This method parses a given string, replaces any tabulator, '\t', with four spaces, ' ',
and returns the modified string.
|
|
theme()
This method is a basic implementation for theming a view.
|
|
This method triggers the theme method on all children.
|
Field Detail
{Array}
childViews
An array specifying the view's children.
computedValue
This property contains the relevant information about the view's computed value. In
particular it is used to specify the pre-value, the content binding and the just-
in-time performed operation, that computes the view's value.
contentBinding
The path to a content that is bound to the view's value. If this content
changes, the view will automatically be updated.
contentBindingReverse
The path to a content that is bound to the view's value (reverse). If this
the view's value changes, the bound content will automatically be updated.
{String}
cssClass
This property can be used to assign a css class to the view to get a custom styling.
{String}
cssClassOnError
This property can be used to assign a css class to the view if an error occurs. The
applying of this class is automatically triggered if the validation of the view
goes wrong. This property is mainly used by input views, e.g. M.TextFieldView.
{String}
cssClassOnInit
This property can be used to assign a css class to the view on its initialization. This
property is mainly used for input ui elements like text fields, that might have a initial
value that should be rendered in a different style than the later value entered by the
user. This property is mainly used by input views, e.g. M.TextFieldView.
{String}
cssStyle
This property can be used to assign a css style to the view. This allows you to
create your custom styles inline.
{Object}
events
This property is used to specify a view's events and their corresponding actions.
{Boolean}
hasFocus
Indicates whether this view currently has the focus or not.
{String}
html
This property is used internally to recursively build the pages html representation.
It is once set within the render method and then eventually updated within the
renderUpdate method.
id
The id of the view used for the html attribute id. Every view gets its own unique
id during the rendering process.
isInline
Indicates whether the view should be displayed inline or not. This property isn't
supported by all views, but e.g. by M.LabelView or M.ButtonView.
{Boolean}
isView
A boolean value to definitely recognize a view as a view, independent on its
concrete type, e.g. M.ButtonView or M.LabelView.
modelId
If a view represents a model, e.g. within a list view, this property is used to save
the model's id. So the view can be used to get to the record.
parentView
This property can be used to save a reference to the view's parent view.
{Array}
recommendedEvents
This property specifies the recommended events for this type of view.
{Boolean}
triggerActionOnChange
Determines whether an onChange event will trigger a defined action or not.
This property is basically interesting for input ui elements, e.g. for
text fields.
{Boolean}
triggerActionOnEnter
Determines whether an onKeyUp event with the enter button will trigger a defined
action or not. This property is basically interesting for input ui elements, e.g.
for text fields.
{Boolean}
triggerActionOnKeyUp
Determines whether an onKeyUp event will trigger a defined action or not.
This property is basically interesting for input ui elements, e.g. for
text fields.
{String}
type
The type of this object.
value
The value property is a generic property for all values. Even if not all views
really use it, e.g. the wrapper views like M.ButtonGroupView, most of it do.
Method Detail
addCssClass(cssClass)
Adds a css class to the view's DOM representation.
- Parameters:
- {String} cssClass
- The css class to be added.
attachToObservable()
This method attaches the view to an observable to be later notified once the observable's
state did change.
clearHtml()
Clears the html property of a view and triggers the same method on all of its
child views.
clearValue()
clearValues()
This method defines a basic functionality for clearing a view's value. This should be
overwritten with a specific behaviour for most input view. What we do here is nothing
but to call the cleaValue method for any child view.
computeValue()
If the view's computedValue property is set, compute the value. This allows you to
apply a method to a dynamically set value. E.g. you can provide your value with an
toUpperCase().
contentDidChange()
The contentDidChange method is automatically called by the observable when the
observable's state did change. It then updates the view's value property based
on the specified content binding.
delegateValueUpdate()
This method delegates any value changes to a controller, if the 'contentBindingReverse'
property is specified.
design(obj)
This method encapsulates the 'extend' method of M.Object for better reading of code syntax.
It triggers the content binding for this view,
gets an ID from and registers itself at the ViewManager.
- Parameters:
- {Object} obj
- The mixed in object for the extend call.
{Array}
getChildViewsAsArray()
This method transforms the child views property (string) into an array.
- Returns:
- {Array} The child views as an array.
{Array}
getIds()
This method creates and returns an associative array of all child views and
their ids.
The key of an array item is the name of the view specified in the view
definition. The value of an array item is the id of the corresponding
view.
- Returns:
- {Array} The child view's ids as an array.
getValue()
{Array}
getValues()
This method creates and returns an associative array of all child views and
their values.
The key of an array item is the name of the view specified in the view
definition. The value of an array item is the value of the corresponding
view.
- Returns:
- {Array} The child view's values as an array.
gotFocus()
This method is called whenever the view got the focus and basically only sets
the view's hasFocus property to YES. If a more complex behaviour is desired,
a view has to overwrite this method.
lostFocus()
This method is called whenever the view lost the focus and basically only sets
the view's hasFocus property to NO. If a more complex behaviour is desired,
a view has to overwrite this method.
{String}
nl2br(str)
This method parses a given string, replaces any new line, '\n', with a line break, '
', and returns the modified string. This can be useful especially for input views, e.g. it is used in context with the M.TextFieldView.
', and returns the modified string. This can be useful especially for input views, e.g. it is used in context with the M.TextFieldView.
- Parameters:
- {String} str
- The string to be modified.
- Returns:
- {String} The modified string.
registerEvents()
This method is responsible for registering events for view elements and its child views. It
basically passes the view's event-property to M.EventDispatcher to bind the appropriate
events.
removeCssClass(cssClass)
Removes a css class to the view's DOM representation.
- Parameters:
- {String} cssClass
- The css class to be added.
removeCssProperty(key)
Removes a css property from the view's DOM representation.
- Parameters:
- {String} key
- The property's name.
renderUpdate()
{String}
secure(str)
This method secure the passed string. It is mainly used for securing input elements
like M.TextFieldView but since it is part of M.View it can be used and called out
of any view.
So far we only replace '<' and '>' with their corresponding html entity. The functionality
of this method will be extended in the future. If a more complex behaviour is desired,
any view using this method has to overwrite it.
- Parameters:
- {String} str
- The string to be secured.
- Returns:
- {String} The secured string.
setCssProperty(key, value)
Adds or updates a css property to the view's DOM representation.
- Parameters:
- {String} key
- The property's name.
- {String} value
- The property's value.
setValueFromDOM()
style()
{String}
tab2space(str)
This method parses a given string, replaces any tabulator, '\t', with four spaces, ' ',
and returns the modified string. This can be useful especially for input views, e.g. it is
used in context with the M.TextFieldView.
- Parameters:
- {String} str
- The string to be modified.
- Returns:
- {String} The modified string.
theme()
This method is a basic implementation for theming a view. It simply calls the
themeChildViews method. Most views overwrite this method with a custom theming
behaviour.
themeChildViews()
This method triggers the theme method on all children.