Contents
- Repository structure
- Getting started
- Using the theme
- Using the theme's icons
- Using the theme's styles
- FAQ
Repository structure
The Github repository has the following structure:
- _dev_assets
- icons
Images of the icons
- images
Sliced-up theme assets
- material_= $themeSlug ?>_mobile.tps
- material_= $themeSlug ?>_mobile_icons.tps
TexturePacker projects
- icons
- assets
- fonts
Fonts used by the theme
- images
Atlas texture used by the theme
- xml
Atlas XML data used by the theme
- fonts
- src
Theme source files
- swc
Compiled SWC file of the theme
Folder _dev_assets
is not required by the theme in the production and therefore should
not be packaged with your application. Should you wish to include only some of the icons, you can modify the contents of the icons
folder and publish new texture atlas using the TPS files and TexturePacker.
Folders assets
and src
are required by the theme and you need to include these in your application. Furthermore, these folders must be placed within the same root folder.
Getting started
The theme contains two kinds of assets and source files – one of them includes additional icons, the other one does not. If you do not need additional icons in your application it is recommended to use the theme's assets without icons. Furthermore, the source files are divided into two groups depending on the way you want the assets to be loaded.
Theme without icons
If you wish to use the theme without additional icons, you will need to copy the following files to your project folder:
- assets
- fonts
- Roboto-Bold.ttf
- Roboto-Regular.ttf
- images
- material_= $themeSlug ?>_mobile.png
- xml
- material_= $themeSlug ?>_mobile.xml
- fonts
- src
- Base= $themeName ?>MobileTheme.as
- = $themeName ?>MobileTheme.as 1
or
- = $themeName ?>MobileThemeWithAssetManager.as 2
1 This class embeds the asset files at compile time.
2 This class loads the asset files at runtime.
You only need to use one of these classes, depending on the way you want the assets to be loaded.
Alternatively, you can copy = $themeName ?>MobileTheme.swc
file from the swc
folder and add it to your project as a library. This SWC file has all the necessary classes and assets included.
Theme with icons
If you wish to use the theme with additional icons, you will need to copy the following files to your project folder:
- assets
- fonts
- Roboto-Bold.ttf
- Roboto-Regular.ttf
- images
- material_= $themeSlug ?>_mobile_icons.png
- xml
- material_= $themeSlug ?>_mobile_icons.xml
- fonts
- src
- Base= $themeName ?>MobileTheme.as
- = $themeName ?>MobileThemeIcons.as
- = $themeName ?>MobileThemeWithIcons.as 3
or
- = $themeName ?>MobileThemeWithAssetManagerAndIcons.as 4
3 This class embeds the asset files at compile time.
4 This class loads the asset files at runtime.
You only need to use one of these classes, depending on the way you want the assets to be loaded.
Alternatively, you can copy = $themeName ?>MobileThemeWithIcons.swc
file from the swc
folder and add it to your project as a library. This SWC file has all the necessary classes and assets included.
Using the theme
After you copied over the required files to your project, you can jump into your favorite IDE and start coding. Once your root DisplayObject
is created by Starling you may proceed with the theme's initialization.
Initializing the theme with embedded assets
The theme's classes which embed the assets are a bit easier to use as they simply require to be instantiated without any additional code.
/* Theme without icons */ new = $themeName ?>MobileTheme(); /* Or theme with icons*/ new = $themeName ?>MobileThemeWithIcons(); // You can start creating your Feathers UI immediately
Initializing the theme with loaded assets
If you wish to load the assets at runtime, you will need to wait for the loading to be completed before you start creating Feathers components, otherwise some of the components may not be skinned properly.
/* Theme without icons */ new = $themeName ?>MobileThemeWithAssetManager().addEventListener( starling.events.Event.COMPLETE, onThemeAssetsReady ); /* Or theme with icons */ new = $themeName ?>MobileThemeWithAssetManagerAndIcons().addEventListener( starling.events.Event.COMPLETE, onThemeAssetsReady ); function onThemeAssetsReady( event:starling.events.Event ):void { event.currentTarget.removeEventListeners(); // From now on you can start creating your Feathers UI }
Using the theme's icons
If you are using a theme's class that includes icons then you can access the icons using = $themeName ?>MobileThemeIcons
class. This class holds references to Starling's Texture
– these instances represent the icons.
For example, to add an icon to a Button
you need to create an Image
from the selected texture like this:
const button:Button = new Button(); button.label = "Shop"; button.defaultIcon = new Image( = $themeName ?>MobileThemeIcons.shopTexture ); addChild( button );
In some cases, you may use the texture directly without explicitly creating an Image
. For example, if you were to create a Feathers List
object, you could specify the item's renderer iconSourceField
to point to the texture, like this:
const list:List = new List(); list.dataProvider = new ListCollection( [ { label: "Check", icon: = $themeName ?>MobileThemeIcons.checkCircleTexture }, ]); list.itemRendererFactory = function():IListItemRenderer { const item:DefaultListItemRenderer = new DefaultListItemRenderer(); item.labelField = "label"; item.iconSourceField = "icon"; // Reference the Texture return item; }; addChild( list );
Using the theme's styles
Apart from some of the default Feathers styles like Button.ALTERNATE_STYLE_NAME_QUIET_BUTTON
, you can use additional styles defined by the class Base= $themeName ?>MobileTheme.as
. See the table below for a complete reference.
Style name | Target component | Description |
---|---|---|
THEME_STYLE_NAME_BUTTON_ACCENT |
Button |
Applies accent-colored skin to a Button |
THEME_STYLE_NAME_BUTTON_ACCENT_QUIET |
Button |
Applies accent-colored quiet skin to a Button |
THEME_STYLE_NAME_BUTTON_HEADER_QUIET |
Button |
Applies quiet skin to a Button that displays label and is used in a Header |
THEME_STYLE_NAME_BUTTON_HEADER_QUIET_ICON_ONLY |
Button |
Applies quiet skin to a Button that displays icon only and is used in a Header |
THEME_STYLE_NAME_CALL_TO_ACTION_BUTTON_ACCENT |
Button |
Applies accent-colored rounded skin to a Button that displays icon |
THEME_STYLE_NAME_PANEL_WITHOUT_PADDING |
Panel , PanelScreen |
Removes left and right padding from a Panel |
THEME_STYLE_NAME_HEADER_WITH_SHADOW |
PanelScreen |
Adds shadow to PanelScreen's Header. If used together with THEME_STYLE_NAME_PANEL_WITHOUT_PADDING then this shadow style must be added first. |
THEME_STYLE_NAME_TAB_BAR_SHADOW_BOTTOM |
TabBar |
Vertically inverts the TabBar's skin, making the shadow appear at the bottom. |
THEME_STYLE_NAME_TAB_BAR_WITH_ICONS |
TabBar |
Adjusts the TabBar's height so that each tab can display an icon. If used together with THEME_STYLE_NAME_TAB_BAR_SHADOW_BOTTOM then this icons style must be added first. |
THEME_STYLE_NAME_TAB_NAVIGATOR_WITH_ICONS |
TabNavigator |
Adjusts height of TabNavigator's internal TabBar component so that each tab can display an icon. |
THEME_STYLE_NAME_TAB_NAVIGATOR_SHADOW_BOTTOM |
TabNavigator |
Vertically inverts the internal TabBar's skin, making the shadow appear at the bottom. |
FAQ
The components are not masked when showing radial effects.
In order for the masks to be working correctly you need to set the value of <depthAndStencil>
element to true
in your AIR application descriptor XML.
When trying to build a project with the theme error message 'Unable to build font Roboto' appears.
This issue may happen on Windows for some reason, using this repacked Roboto font should fix this issue. Thanks to Rui Cruz for the fix.