Theme Singleton

Several utilities for handling global styling for your application.

Theme()

Example

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

Methods

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
});

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.

Fonts.setDefault(family) static

Set your application to use a certain font as default font.

Parameters:

Name Type Description
family String

The font family to use as default font.

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
});