MAF.system.BaseView

This component implements the basics for a view.

new MAF.system.BaseView()

The following properties are used in views:

  • this.config - properties passed at initiation
  • this.persist - Persistant storage for when the view gets reloaded.
  • this.cache - For storage of temporary data.
  • this.controls - References to view controls that will have state saving.
  • this.elements - References to view controls without state saving.

Configs

events : {Object} inherited

A object containing one or more event handlers to be added to this object during initialization.

The possible events are defined on each component.

Example
MAF.element.Core({
  events: {
     onAppend: function () {
     	// do something
     }
  }
}).appendTo(this);

id : {String} inherited

The unique id of this class

styles : {Object} inherited

CSS styles for the component:

Name Type Argument Default Description
width Number

The width of this component in pixels.

height Number

The height of this component in pixels.

hAlign String optional  left

Horizontal alignment of this component. (left, center, right)

vAlign String optional  top

Vertical alignment of this component. (top, center, bottom)

hOffset Number optional 

Horizontal offset of this component in pixels.

vOffset Number optional 

Vertical offset of this component.

Methods

adopt(child) inherited mixin

Append a child or several children to this Class.

Parameters:

Name Type Argument Description
child MAF.Class repeatable 

Component or element you want to add.

animate(config) inherited

Parameters:

Name Type Description
config Object

A config object

Fires:

appendChild(child) → {MAF.Class} inherited mixin

This method appends a element as the last child of this Class.

Parameters:

Name Type Description
child ELement | MAF.Class

Component or element you want to add.

Fires:

  • event:onChildAppended
  • event:onAppend

Returns:

Returns this.

appendTo(parent) inherited mixin

Add this class element as a child to the specified class.

Parameters:

Name Type Description
parent MAF.Class

Which class to append to.

createView() virtual

View creation method that must be implemented (or overridden) by objects that inherit the member.

destroyView() virtual

View destruction method that can be implemented (or overridden) by objects that inherit the member.

detachChild(child) → {Element} inherited mixin

Remove a child.

Parameters:

Name Type Description
child String | Number | Element

String can be first or last, Number is position of the child. Element is the child itself.

Returns:

The detached child element.

eliminate(key) inherited mixin

Removes a key from the storage.

Parameters:

Name Type Description
key String

Deletes the value if key exists.

empty() → {MAF.Class} inherited mixin

Remove all Children from this Class

Returns:

Returns this.

freeze() → {Class} inherited

Freezes this component. Screen renders no longer trigger until thawed.

Returns:

This component.

getAbsolutePosition() → {Object} inherited

Give back the position relative to its first positioned ancestor element

Returns:

{hOffset:Number, vOffset: Number}

getStyle(key) → {Object} inherited mixin

This method returns the given CSS property value of element.

Parameters:

Name Type Description
key String

CSS property to fetch.

Returns:

CSS style requested.

getStylesCopy() → {Object} inherited mixin

Returns:

Cloned object with all the styles applied on this component.

getView() → {Class} inherited

Returns:

Returns the view this class is appended on.

hide() → {Class} inherited

Hides this component.

Returns:

This component.

hideView() virtual

View hide method that can be implemented (or overridden) by objects that inherit the member.

initialize() inherited

Initialize the class

initView() virtual

View initialization method that can be implemented (or overridden) by objects that inherit the member.

moveTo(parent) inherited mixin

Move the Class element to a different class.

Parameters:

Name Type Description
parent MAF.Class

Which class to move to.

registerMessageCenterListenerCallback()

Register a function for callback on MAF.messages.

Example

var myView = new MAF.Class({
   initView: function() {
      this.registerMessageCenterListenerCallback(this.dataChanged);
      MAF.messages.store('news', 'The news is in.');
      MAF.messages.store('games', 'What games?');
   },
   dataChanged: function (event) {
      if (event.payload.value && !this.frozen) {
         switch (event.payload.key) {
            case 'news':
               //The view is visible and news is stored in MAF.messages
               break;
         }
      } else {
         switch (event.payload.key) {
            case 'news':
               //news is stored in MAF.messages and the view is not visible
               break;
         }
      }
      if (event.payload.key === 'games') {
         //Once this view has loaded we always do something when games is stored on MAF.messages.
         //Also when a different view is active.
      }
   }
});

registerMessageCenterListenerControl()

Register a component for callback on MAF.messages.

Example

var myView = new MAF.Class({
   createView: function () {
      this.controls.header = new MAF.control.Header({
         label: 'Header',
         events: {
            onBroadcast: function () {
               this.setText('Button randomized: ' + MAF.messages.fetch('button'));
            }
         }
      }).appendTo(this);

      this.controls.button = new MAF.control.TextButton({
         label: 'Random number stored',
         styles: {
            vOffset: this.controls.header.outerHeight
         },
         events: {
            onSelect: function () {
               MAF.messages.store('button', Number.random(1, 1000));
            }
         }
      }).appendTo(this);
   },
   updateView: function() {
      this.registerMessageCenterListenerControl(this.controls.header);
   }
});

removeChild(child) → {Element} inherited mixin

Remove a child.

Parameters:

Name Type Description
child String | Number | Element

String can be first or last, Number is position of the child. Element is the child itself.

Fires:

  • event:onChildRemoved

Returns:

The removed child element.

removeChildren() inherited mixin

Remove all children.

retrieve(key) inherited mixin

Retrieves a value from the storage.

Parameters:

Name Type Description
key String

Retrieves the value if key exists.

selectView() virtual

View has gained focus method that can be implemented (or overridden) by objects that inherit the member.

setStyle(key, value) → {MAF.Class} inherited mixin

Parameters:

Name Type Description
key String

CSS property to apply to on this element.

value Object

CSS value

Returns:

This

setStyles(styles) → {MAF.Class} inherited mixin

This method modifies element's CSS style properties. Styles are passed as a hash of property-value pairs in which the properties are specified in their camelized form.

Parameters:

Name Type Description
styles Object

Object with CSS styles to apply to the element.

Returns:

This

Example

.setStyles({
   backgroundColor: '#900',
   fontSize: '12px'
});

show() → {Class} inherited

Shows this component.

Returns:

This component.

store(key, value) inherited mixin

Saves a value to be availeble on the instance this Library is placed.

Parameters:

Name Type Description
key String

Key needs to be string.

value Mixed

Supports the storing of Strings, Numbers, Objects, Arrays. basically any JSONeable value.

suicide() inherited mixin

Destroy and cleanup this Class and all its children.

thaw() → {Class} inherited

Thawes this component. Screen renders can trigger again.

Returns:

This component.

unselectView() virtual

View has lost focus method that can be implemented (or overridden) by objects that inherit the member.

updateView() virtual

View update method that can be implemented (or overridden) by objects that inherit the member.

Events

onAnimationEnded

Fired when a animation on this component has ended.

onAppend

Fired when component has appended to a parent. Update visual appearances by applying a Theme style and rendering the skin.