Theme Singleton

//Change default focus colour of all classes.
 Theme.set({
    BaseFocus: {
       styles: {
          backgroundColor: '#c0de70'
       }
    }
 });

Methods

Fonts.add(name, file, formats) static

Add a font to the application.

Parameters:

Name	Type	Argument	Description
name	String		Font name.
file	String		Location to the font file.
formats	Array	optional	Default is ['eot', 'woff', 'truetype']

Fonts.has(name) static

Check if a certain font is available for the application

Parameters:

Name	Type	Description
name	String	Font name.

Fonts.remove(name) static

Remove a certain font from the application.

Parameters:

Name	Type	Description
name	String	Font name which to remove.

alias(alias, original)

Make a alias of a existing configuration

Parameters:

Name	Type	Description
alias	String	Name of the alias
original	String	ClassName of a existing configuration.

Example

//Set the styling of ControlTextButton to 'myClass'
 Theme.alias('myClass', 'ControlTextButton');

 var myClassPrototype = new MAF.Class({
    ClassName: 'myClass',
    Extends: MAF.element.Container
 });

get(name, key)

Retrieve a Theme configuration.

Parameters:

Name	Type	Argument	Description
name	String		Name of the configuration to retrieve.
key	String	optional	Specific subentry in the configuration to retrieve.

Example

//You can store extra things in the configuration besides styles.
 Theme.set({
    myClass: {
       styles: {
          width: 30
       },
       unchecked: FontAwesome.get(['square-o']),
       checked: FontAwesome.get(['check-square-o'])
    }
 });

 var isChecked = true;
 new MAF.element.Text({
    ClassName: 'myClass',
    label: Theme.get('myClass', (isChecked) ? 'checked' : 'unchecked')
 }).appendTo(this);

getStyles(controlname, state) → {Object}

Parameters:

Name	Type	Argument	Default	Description
controlname	String			Name of the component.
state	String	optional	normal	If the control has styles configured for different states you can retrieve the configuration for a specific state only.

Returns:

Control configurations, if a state is found it only returns the styles for the specific state. If no state is found the normal styles are returned.

renderSkin(name, state, width, height, agrs)

If a renderskin method is defined in the Theme of the class, you can execute it with this method.

Parameters:

Name	Type	Argument	Description
name	String		Class skin you want to build.
state	String		State of the skin.
width	Number		Width the skins needs to be.
height	Number		Height the skin needs to be.
agrs	Object	optional	Optional arguments.

set(blob)

Set a Theme configuration.

Parameters:

Name	Type	Description
blob	Object	This can contain theme settings for several classes

Example

Theme.set({
    myClass: {
       styles: {
          backgroundColor: 'white',
          width: 'inherit',
          height: 52
       }
    }
 });

 var myClassPrototype = new MAF.Class({
    ClassName: 'myClass',
    Extends: MAF.element.Container
 });