Feathers Component Explorer

Overview

This is a Loom port of the Feathers Component Explorer, demonstrating a variety of different Feathers components and layouts.

Try It

Use the following Loom CLI commands to run this example:

loom new MyFeathersComponentExplorer --example FeathersComponentExplorer
cd MyFeathersComponentExplorer
loom run

Screenshot

FileExample Screenshot

Code

src/FeathersComponentExplorer.ls

package
{
    import loom.Application;

    import feathers.events.FeathersEventType;
    import feathers.motion.transitions.ScreenSlidingStackTransitionManager;
    import feathers.system.DeviceCapabilities;
    import feathers.themes.MetalWorksMobileTheme;
    import feathers.controls.*;

    import loom2d.Loom2D;
    import loom2d.events.Event;

    import data.*;
    import screens.*;

    public class FeathersComponentExplorer extends Application
    {
        override public function run():void
        {
            stage.addChild( new Main() );
        }
    }

    /*
    Feathers
    Copyright 2012-2013 Joshua Tynjala. All Rights Reserved.

    This program is free software. You can redistribute and/or modify it in
    accordance with the terms of the accompanying license agreement.
    */

    public class Main extends Drawers
    {
        private static const MAIN_MENU:String = "mainMenu";
        private static const BUTTON:String = "button";
        private static const BUTTON_SETTINGS:String = "buttonSettings";
        private static const BUTTON_GROUP:String = "buttonGroup";
        private static const CALLOUT:String = "callout";
        private static const GROUPED_LIST:String = "groupedList";
        private static const GROUPED_LIST_SETTINGS:String = "groupedListSettings";
        private static const ITEM_RENDERER:String = "itemRenderer";
        private static const ITEM_RENDERER_SETTINGS:String = "itemRendererSettings";
        private static const LIST:String = "list";
        private static const LIST_SETTINGS:String = "listSettings";
        private static const NUMERIC_STEPPER:String = "numericStepper";
        private static const NUMERIC_STEPPER_SETTINGS:String = "numericStepperSettings";
        private static const PAGE_INDICATOR:String = "pageIndicator";
        private static const PICKER_LIST:String = "pickerList";
        private static const PROGRESS_BAR:String = "progressBar";
        private static const SLIDER:String = "slider";
        private static const SLIDER_SETTINGS:String = "sliderSettings";
        private static const TAB_BAR:String = "tabBar";
        private static const TEXT_INPUT:String = "textInput";
        private static const TEXT_INPUT_SETTINGS:String = "textInputSettings";
        private static const TOGGLES:String = "toggles";

        private static const MAIN_MENU_EVENTS:Dictionary.<String, String> =
        {
            "showButton": BUTTON,
            "showButtonGroup": BUTTON_GROUP,
            "showCallout": CALLOUT,
            "showGroupedList": GROUPED_LIST,
            "showItemRenderer": ITEM_RENDERER,
            "showList": LIST,
            "showNumericStepper": NUMERIC_STEPPER,
            "showPageIndicator": PAGE_INDICATOR,
            "showPickerList": PICKER_LIST,
            "showProgressBar": PROGRESS_BAR,
            "showSlider": SLIDER,
            "showTabBar": TAB_BAR,
            "showTextInput": TEXT_INPUT,
            "showToggles": TOGGLES
        };

        public function Main()
        {
            super();
            this.addEventListener(FeathersEventType.INITIALIZE, initializeHandler);
        }

        private var _navigator:ScreenNavigator;
        private var _menu:MainMenuScreen;
        private var _transitionManager:ScreenSlidingStackTransitionManager;

        private function initializeHandler(event:Event):void
        {
            EmbeddedAssets.initialize();

            new MetalWorksMobileTheme();

            this._navigator = new ScreenNavigator();
            this.content = this._navigator;

            this._navigator.addScreen(BUTTON, new ScreenNavigatorItem(ButtonScreen,
            {
                complete: MAIN_MENU,
                showSettings: BUTTON_SETTINGS
            }));

            this._navigator.addScreen(BUTTON_GROUP, new ScreenNavigatorItem(ButtonGroupScreen,
            {
                complete: MAIN_MENU
            }));

            this._navigator.addScreen(CALLOUT, new ScreenNavigatorItem(CalloutScreen,
            {
                complete: MAIN_MENU
            }));

            const sliderSettings:SliderSettings = new SliderSettings();
            this._navigator.addScreen(SLIDER, new ScreenNavigatorItem(SliderScreen,
            {
                complete: MAIN_MENU,
                showSettings: SLIDER_SETTINGS
            },
            {
                settings: sliderSettings
            }));

            this._navigator.addScreen(SLIDER_SETTINGS, new ScreenNavigatorItem(SliderSettingsScreen,
            {
                complete: SLIDER
            },
            {
                settings: sliderSettings
            }));

            this._navigator.addScreen(TOGGLES, new ScreenNavigatorItem(ToggleScreen,
            {
                complete: MAIN_MENU
            }));

            const groupedListSettings:GroupedListSettings = new GroupedListSettings();
            this._navigator.addScreen(GROUPED_LIST, new ScreenNavigatorItem(GroupedListScreen,
            {
                complete: MAIN_MENU,
                showSettings: GROUPED_LIST_SETTINGS
            },
            {
                settings: groupedListSettings
            }));

            this._navigator.addScreen(GROUPED_LIST_SETTINGS, new ScreenNavigatorItem(GroupedListSettingsScreen,
            {
                complete: GROUPED_LIST
            },
            {
                settings: groupedListSettings
            }));

            const itemRendererSettings:ItemRendererSettings = new ItemRendererSettings();
            this._navigator.addScreen(ITEM_RENDERER, new ScreenNavigatorItem(ItemRendererScreen,
            {
                complete: MAIN_MENU,
                showSettings: ITEM_RENDERER_SETTINGS
            },
            {
                settings: itemRendererSettings
            }));

            this._navigator.addScreen(ITEM_RENDERER_SETTINGS, new ScreenNavigatorItem(ItemRendererSettingsScreen,
            {
                complete: ITEM_RENDERER
            },
            {
                settings: itemRendererSettings
            }));

            const listSettings:ListSettings = new ListSettings();
            this._navigator.addScreen(LIST, new ScreenNavigatorItem(ListScreen,
            {
                complete: MAIN_MENU,
                showSettings: LIST_SETTINGS
            },
            {
                settings: listSettings
            }));

            this._navigator.addScreen(LIST_SETTINGS, new ScreenNavigatorItem(ListSettingsScreen,
            {
                complete: LIST
            },
            {
                settings: listSettings
            }));

            const numericStepperSettings:NumericStepperSettings = new NumericStepperSettings();
            this._navigator.addScreen(NUMERIC_STEPPER, new ScreenNavigatorItem(NumericStepperScreen,
            {
                complete: MAIN_MENU,
                showSettings: NUMERIC_STEPPER_SETTINGS
            },
            {
                settings: numericStepperSettings
            }));

            this._navigator.addScreen(NUMERIC_STEPPER_SETTINGS, new ScreenNavigatorItem(NumericStepperSettingsScreen,
            {
                complete: NUMERIC_STEPPER
            },
            {
                settings: numericStepperSettings
            }));

            this._navigator.addScreen(PAGE_INDICATOR, new ScreenNavigatorItem(PageIndicatorScreen,
            {
                complete: MAIN_MENU
            }));

            this._navigator.addScreen(PICKER_LIST, new ScreenNavigatorItem(PickerListScreen,
            {
                complete: MAIN_MENU
            }));

            this._navigator.addScreen(TAB_BAR, new ScreenNavigatorItem(TabBarScreen,
            {
                complete: MAIN_MENU
            }));

            const textInputSettings:TextInputSettings = new TextInputSettings();
            this._navigator.addScreen(TEXT_INPUT, new ScreenNavigatorItem(TextInputScreen,
            {
                complete: MAIN_MENU,
                showSettings: TEXT_INPUT_SETTINGS
            },
            {
                settings: textInputSettings
            }));
            this._navigator.addScreen(TEXT_INPUT_SETTINGS, new ScreenNavigatorItem(TextInputSettingsScreen,
            {
                complete: TEXT_INPUT
            },
            {
                settings: textInputSettings
            }));

            this._navigator.addScreen(PROGRESS_BAR, new ScreenNavigatorItem(ProgressBarScreen,
            {
                complete: MAIN_MENU
            }));

            this._transitionManager = new ScreenSlidingStackTransitionManager(this._navigator);
            this._transitionManager.duration = 0.4;

            if(DeviceCapabilities.isTablet())
            {
                //we don't want the screens bleeding outside the navigator's
                //bounds when a transition is active, so clip it.
                this._navigator.clipContent = true;
                this._menu = new MainMenuScreen();
                for(var eventType:String in MAIN_MENU_EVENTS)
                {
                    this._menu.addEventListener(eventType, mainMenuEventHandler);
                }
                this._menu.height = 200;
                this.leftDrawer = this._menu;
                this.leftDrawerDockMode = Drawers.DOCK_MODE_BOTH;
            }
            else
            {
                this._navigator.addScreen(MAIN_MENU, new ScreenNavigatorItem(MainMenuScreen, MAIN_MENU_EVENTS));
                this._navigator.showScreen(MAIN_MENU);
            }
        }

        private function mainMenuEventHandler(event:Event):void
        {
            const screenName:String = MAIN_MENU_EVENTS[event.type];
            //because we're controlling the navigation externally, it doesn't
            //make sense to transition or keep a history
            this._transitionManager.clearStack();
            this._transitionManager.skipNextTransition = true;
            this._navigator.showScreen(screenName);
        }
    }
}