Unknown theme

- Guide

Contents

  1. Repository structure
  2. Getting started
  3. Using the theme
  4. Using the theme's icons
  5. Using the theme's styles
  6. FAQ

Repository structure

The Github repository has the following structure:

  • _dev_assets
    • icons

      Images of the icons

    • images

      Sliced-up theme assets

    • material__mobile.tps
    • material__mobile_icons.tps

      TexturePacker projects

  • assets
    • fonts

      Fonts used by the theme

    • images

      Atlas texture used by the theme

    • xml

      Atlas XML data used by the theme

  • 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__mobile.png
    • xml
      • material__mobile.xml
  • src
    • BaseMobileTheme.as
    • MobileTheme.as 1

      or

    • 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 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__mobile_icons.png
    • xml
      • material__mobile_icons.xml
  • src
    • BaseMobileTheme.as
    • MobileThemeIcons.as
    • MobileThemeWithIcons.as 3

      or

    • 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 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 MobileTheme();

/* Or theme with icons*/
new 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 MobileThemeWithAssetManager().addEventListener( starling.events.Event.COMPLETE, onThemeAssetsReady );

/* Or theme with icons */
new 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 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( 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: 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 BaseMobileTheme.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.