### Alert Dialog Example

Source: https://context7.com/matsefr/feathersui-starling-as3/llms.txt

Demonstrates the Feathers UI Alert component for displaying modal dialogs. Allows custom messages, titles, and buttons for user interaction. Requires Feathers UI and Starling frameworks.

```actionscript
package feathers.examples
{
    import feathers.controls.Alert;
    import feathers.controls.Button;
    import feathers.data.ArrayCollection;
    import starling.display.Sprite;
    import starling.events.Event;

    public class AlertExample extends Sprite
    {
        public function AlertExample()
        {
            this.addEventListener(Event.ADDED_TO_STAGE, initializeHandler);
        }

        private function initializeHandler(event:Event):void
        {
            this.removeEventListener(Event.ADDED_TO_STAGE, initializeHandler);

            var showAlertButton:Button = new Button();
            showAlertButton.label = "Show Alert";
            showAlertButton.addEventListener(Event.TRIGGERED, onShowAlert);
            this.addChild(showAlertButton);
        }

        private function onShowAlert(event:Event):void
        {
            // Create alert with custom buttons
            var alert:Alert = Alert.show(
                "Are you sure you want to delete this item? This action cannot be undone.",
                "Confirm Deletion",
                new ArrayCollection([
                    { label: "Cancel", triggered: onAlertCancel },
                    { label: "Delete", triggered: onAlertConfirm }
                ])
            );

            // Optional: customize alert appearance
            alert.gap = 20;
            alert.width = 400;
        }

        private function onAlertCancel(event:Event):void
        {
            trace("User cancelled deletion");
        }

        private function onAlertConfirm(event:Event):void
        {
            trace("User confirmed deletion");
            // Perform delete operation here
        }
    }
}

```

--------------------------------

### Custom Layouts with VerticalLayout in ActionScript

Source: https://context7.com/matsefr/feathersui-starling-as3/llms.txt

Illustrates how to use Feathers UI's layout algorithms, specifically VerticalLayout, for precise component positioning within a LayoutGroup. This example shows how to configure vertical alignment, gap, and padding. Requires Feathers UI.

```actionscript
package feathers.examples
{
    import feathers.controls.Button;
    import feathers.controls.LayoutGroup;
    import feathers.layout.HorizontalAlign;
    import feathers.layout.VerticalAlign;
    import feathers.layout.VerticalLayout;
    import starling.display.Sprite;
    import starling.events.Event;

    public class LayoutExample extends Sprite
    {
        public function LayoutExample()
        {
            this.addEventListener(Event.ADDED_TO_STAGE, initializeHandler);
        }

        private function initializeHandler(event:Event):void
        {
            this.removeEventListener(Event.ADDED_TO_STAGE, initializeHandler);

            // Create container
            var container:LayoutGroup = new LayoutGroup();
            container.width = 400;
            container.height = 600;

            // Configure vertical layout
            var layout:VerticalLayout = new VerticalLayout();
            layout.gap = 15;
            layout.padding = 20;
            layout.paddingTop = 30;
            layout.paddingBottom = 30;
            layout.horizontalAlign = HorizontalAlign.CENTER;
            layout.verticalAlign = VerticalAlign.TOP;

            container.layout = layout;

            // Add buttons to demonstrate layout
            for (var i:int = 0; i < 5; i++)
            {
                var button:Button = new Button();
                button.label = "Button " + (i + 1);
                button.width = 200;
                button.height = 50;
                container.addChild(button);
            }

            this.addChild(container);
        }
    }
}

```

--------------------------------

### TextInput Component Example

Source: https://context7.com/matsefr/feathersui-starling-as3/llms.txt

Demonstrates the Feathers UI TextInput component for single-line text input. Supports prompt text, character restrictions, password masking, and error display. Requires Feathers UI and Starling frameworks.

```actionscript
package feathers.examples
{
    import feathers.controls.Button;
    import feathers.controls.LayoutGroup;
    import feathers.controls.TextInput;
    import feathers.layout.VerticalLayout;
    import starling.display.Sprite;
    import starling.events.Event;

    public class TextInputExample extends Sprite
    {
        private var emailInput:TextInput;
        private var passwordInput:TextInput;
        private var submitButton:Button;

        public function TextInputExample()
        {
            this.addEventListener(Event.ADDED_TO_STAGE, initializeHandler);
        }

        private function initializeHandler(event:Event):void
        {
            this.removeEventListener(Event.ADDED_TO_STAGE, initializeHandler);

            // Create container with vertical layout
            var container:LayoutGroup = new LayoutGroup();
            var layout:VerticalLayout = new VerticalLayout();
            layout.gap = 20;
            layout.padding = 20;
            container.layout = layout;

            // Email input
            this.emailInput = new TextInput();
            this.emailInput.prompt = "Enter your email";
            this.emailInput.maxChars = 100;
            this.emailInput.restrict = "a-zA-Z0-9@._\-";
            this.emailInput.width = 300;
            container.addChild(this.emailInput);

            // Password input
            this.passwordInput = new TextInput();
            this.passwordInput.prompt = "Enter your password";
            this.passwordInput.displayAsPassword = true;
            this.passwordInput.maxChars = 50;
            this.passwordInput.width = 300;
            container.addChild(this.passwordInput);

            // Submit button
            this.submitButton = new Button();
            this.submitButton.label = "Submit";
            this.submitButton.width = 300;
            this.submitButton.addEventListener(Event.TRIGGERED, onSubmit);
            container.addChild(this.submitButton);

            this.addChild(container);
        }

        private function onSubmit(event:Event):void
        {
            var email:String = this.emailInput.text;
            var password:String = this.passwordInput.text;

            // Validate inputs
            if (email.length === 0 || email.indexOf("@") === -1)
            {
                this.emailInput.errorString = "Please enter a valid email";
                return;
            }

            if (password.length < 6)
            {
                this.passwordInput.errorString = "Password must be at least 6 characters";
                return;
            }

            // Clear errors and process
            this.emailInput.errorString = null;
            this.passwordInput.errorString = null;
            trace("Submitting:", email);
        }
    }
}

```

--------------------------------

### Create and Configure DataGrid with Columns in ActionScript 3

Source: https://context7.com/matsefr/feathersui-starling-as3/llms.txt

This ActionScript 3 code demonstrates initializing a Feathers UI DataGrid component. It sets up the data provider, defines columns with headers and sorting capabilities, and configures a custom cell renderer for the 'active' status. The example also includes an event listener for item selection.

```actionscript
package feathers.examples
{
    import feathers.controls.DataGrid;
    import feathers.controls.DataGridColumn;
    import feathers.data.ArrayCollection;
    import starling.display.Sprite;
    import starling.events.Event;

    public class DataGridExample extends Sprite
    {
        private var dataGrid:DataGrid;

        public function DataGridExample()
        {
            this.addEventListener(Event.ADDED_TO_STAGE, initializeHandler);
        }

        private function initializeHandler(event:Event):void
        {
            this.removeEventListener(Event.ADDED_TO_STAGE, initializeHandler);

            // Create data collection
            var data:ArrayCollection = new ArrayCollection([
                { name: "John Smith", email: "john@example.com", age: 32, active: true },
                { name: "Jane Doe", email: "jane@example.com", age: 28, active: true },
                { name: "Bob Johnson", email: "bob@example.com", age: 45, active: false },
                { name: "Alice Williams", email: "alice@example.com", age: 35, active: true },
                { name: "Charlie Brown", email: "charlie@example.com", age: 29, active: true }
            ]);

            // Create data grid
            this.dataGrid = new DataGrid();
            this.dataGrid.width = 800;
            this.dataGrid.height = 400;
            this.dataGrid.dataProvider = data;

            // Configure columns
            var nameColumn:DataGridColumn = new DataGridColumn("name");
            nameColumn.headerText = "Name";
            nameColumn.width = 200;
            nameColumn.sortable = true;

            var emailColumn:DataGridColumn = new DataGridColumn("email");
            emailColumn.headerText = "Email";
            emailColumn.width = 250;
            emailColumn.sortable = true;

            var ageColumn:DataGridColumn = new DataGridColumn("age");
            ageColumn.headerText = "Age";
            ageColumn.width = 100;
            ageColumn.sortable = true;

            var statusColumn:DataGridColumn = new DataGridColumn("active");
            statusColumn.headerText = "Status";
            statusColumn.width = 150;
            statusColumn.cellRendererFactory = function():IDataGridCellRenderer
            {
                var renderer:DefaultDataGridCellRenderer = new DefaultDataGridCellRenderer();
                renderer.labelFunction = function(item:Object):String
                {
                    return item.active ? "Active" : "Inactive";
                };
                return renderer;
            };

            this.dataGrid.columns = new ArrayCollection([
                nameColumn,
                emailColumn,
                ageColumn,
                statusColumn
            ]);

            // Listen for selection
            this.dataGrid.addEventListener(Event.CHANGE, onGridChange);

            this.addChild(this.dataGrid);
        }

        private function onGridChange(event:Event):void
        {
            var selectedItem:Object = this.dataGrid.selectedItem;
            if (selectedItem)
            {
                trace("Selected:", selectedItem.name, "-", selectedItem.email);
            }
        }
    }
}

```

--------------------------------

### Create and Handle Button Interaction - ActionScript 3.0

Source: https://context7.com/matsefr/feathersui-starling-as3/llms.txt

This example demonstrates how to create a basic Button component in Feathers UI. It includes initializing the theme, configuring the button's label and dimensions, adding an event listener for the 'triggered' event, and positioning the button on the stage. The 'triggered' event handler logs a message and updates the button's label.

```actionscript
package feathers.examples
{
    import feathers.controls.Button;
    import feathers.themes.MetalWorksMobileTheme;
    import starling.display.Sprite;
    import starling.events.Event;

    public class ButtonExample extends Sprite
    {
        private var button:Button;

        public function ButtonExample()
        {
            this.addEventListener(Event.ADDED_TO_STAGE, initializeHandler);
        }

        private function initializeHandler(event:Event):void
        {
            this.removeEventListener(Event.ADDED_TO_STAGE, initializeHandler);

            // Initialize theme for automatic styling
            new MetalWorksMobileTheme();

            // Create and configure button
            this.button = new Button();
            this.button.label = "Click Me";
            this.button.width = 200;
            this.button.height = 60;

            // Add event listener for user interaction
            this.button.addEventListener(Event.TRIGGERED, onButtonTriggered);

            this.addChild(this.button);

            // Validate to calculate dimensions immediately
            this.button.validate();

            // Center the button on stage
            this.button.x = (this.stage.stageWidth - this.button.width) / 2;
            this.button.y = (this.stage.stageHeight - this.button.height) / 2;
        }

        private function onButtonTriggered(event:Event):void
        {
            trace("Button was triggered!");
            this.button.label = "Clicked!";
        }
    }
}

```

--------------------------------

### Screen Navigation with ScreenNavigator in ActionScript

Source: https://context7.com/matsefr/feathersui-starling-as3/llms.txt

Demonstrates how to implement multi-screen navigation using Feathers UI's ScreenNavigator. It configures slide transitions and handles navigation events between screens. This requires the Feathers UI and Starling libraries.

```actionscript
package feathers.examples
{
    import feathers.controls.Button;
    import feathers.controls.PanelScreen;
    import feathers.controls.ScreenNavigator;
    import feathers.controls.ScreenNavigatorItem;
    import feathers.motion.Slide;
    import starling.display.Sprite;
    import starling.events.Event;

    public class NavigatorExample extends Sprite
    {
        private var navigator:ScreenNavigator;

        public function NavigatorExample()
        {
            this.addEventListener(Event.ADDED_TO_STAGE, initializeHandler);
        }

        private function initializeHandler(event:Event):void
        {
            this.removeEventListener(Event.ADDED_TO_STAGE, initializeHandler);

            // Create screen navigator
            this.navigator = new ScreenNavigator();
            this.navigator.width = this.stage.stageWidth;
            this.navigator.height = this.stage.stageHeight;

            // Configure slide transition
            this.navigator.transition = Slide.createSlideLeftTransition();

            // Add screens with navigation events
            var homeScreen:ScreenNavigatorItem = new ScreenNavigatorItem(HomeScreen);
            homeScreen.setScreenIDForEvent("showDetails", "details");
            this.navigator.addScreen("home", homeScreen);

            var detailsScreen:ScreenNavigatorItem = new ScreenNavigatorItem(DetailsScreen);
            detailsScreen.setScreenIDForEvent("goBack", "home");
            this.navigator.addScreen("details", detailsScreen);

            // Show initial screen
            this.navigator.showScreen("home");

            this.addChild(this.navigator);
        }
    }
}

// Home screen implementation
class HomeScreen extends PanelScreen
{
    private var detailsButton:Button;

    override protected function initialize():void
    {
        super.initialize();

        this.title = "Home";

        this.detailsButton = new Button();
        this.detailsButton.label = "View Details";
        this.detailsButton.addEventListener(Event.TRIGGERED, onDetailsButton);

        this.addChild(this.detailsButton);
    }

    private function onDetailsButton(event:Event):void
    {
        this.dispatchEventWith("showDetails");
    }
}

// Details screen implementation
class DetailsScreen extends PanelScreen
{
    private var backButton:Button;

    override protected function initialize():void
    {
        super.initialize();

        this.title = "Details";

        this.backButton = new Button();
        this.backButton.label = "Go Back";
        this.backButton.addEventListener(Event.TRIGGERED, onBackButton);

        this.addChild(this.backButton);
    }

    private function onBackButton(event:Event):void
    {
        this.dispatchEventWith("goBack");
    }
}

```

--------------------------------

### ActionScript 3: List Component with Data Collections and Layout

Source: https://context7.com/matsefr/feathersui-starling-as3/llms.txt

This ActionScript 3 code snippet demonstrates the creation and configuration of a Feathers UI List component. It uses an ArrayCollection for data, a VerticalLayout for arrangement, and a custom item renderer factory to define how each item is displayed. The component is set up to handle selection changes.

```actionscript
package feathers.examples
{
    import feathers.controls.List;
    import feathers.controls.renderers.DefaultListItemRenderer;
    import feathers.data.ArrayCollection;
    import feathers.layout.VerticalLayout;
    import starling.display.Sprite;
    import starling.events.Event;

    public class ListExample extends Sprite
    {
        private var list:List;

        public function ListExample()
        {
            this.addEventListener(Event.ADDED_TO_STAGE, initializeHandler);
        }

        private function initializeHandler(event:Event):void
        {
            this.removeEventListener(Event.ADDED_TO_STAGE, initializeHandler);

            // Create data collection
            var items:ArrayCollection = new ArrayCollection([
                { label: "Apple", icon: "assets/apple.png" },
                { label: "Banana", icon: "assets/banana.png" },
                { label: "Cherry", icon: "assets/cherry.png" },
                { label: "Date", icon: "assets/date.png" },
                { label: "Elderberry", icon: "assets/elderberry.png" }
            ]);

            // Configure vertical layout
            var layout:VerticalLayout = new VerticalLayout();
            layout.gap = 10;
            layout.padding = 15;
            layout.horizontalAlign = HorizontalAlign.JUSTIFY;

            // Create and configure list
            this.list = new List();
            this.list.dataProvider = items;
            this.list.layout = layout;
            this.list.width = 300;
            this.list.height = 400;
            this.list.isSelectable = true;

            // Configure item renderer
            this.list.itemRendererFactory = function():DefaultListItemRenderer
            {
                var renderer:DefaultListItemRenderer = new DefaultListItemRenderer();
                renderer.labelField = "label";
                renderer.iconSourceField = "icon";
                renderer.gap = 10;
                return renderer;
            };

            // Listen for selection changes
            this.list.addEventListener(Event.CHANGE, onListChange);

            this.addChild(this.list);
        }

        private function onListChange(event:Event):void
        {
            var selectedItem:Object = this.list.selectedItem;
            trace("Selected:", selectedItem.label);
        }
    }
}

```

--------------------------------

### Apply MetalWorksMobileTheme to Feathers UI Components in ActionScript 3

Source: https://context7.com/matsefr/feathersui-starling-as3/llms.txt

This ActionScript 3 code snippet demonstrates how to initialize and apply the MetalWorksMobileTheme to Feathers UI components within a Starling Framework application. The theme automatically styles all Feathers controls added to the display list, ensuring a consistent look and feel. It also shows how to create a custom button style by adding a style name to the component's styleNameList.

```actionscript
package feathers.examples
{
    import feathers.controls.Button;
    import feathers.controls.Label;
    import feathers.controls.LayoutGroup;
    import feathers.layout.VerticalLayout;
    import feathers.themes.MetalWorksMobileTheme;
    import starling.display.Sprite;
    import starling.events.Event;
    import starling.text.TextFormat;

    public class ThemeExample extends Sprite
    {
        public function ThemeExample()
        {
            this.addEventListener(Event.ADDED_TO_STAGE, initializeHandler);
        }

        private function initializeHandler(event:Event):void
        {
            this.removeEventListener(Event.ADDED_TO_STAGE, initializeHandler);

            // Initialize theme - this automatically styles all Feathers components
            var theme:MetalWorksMobileTheme = new MetalWorksMobileTheme();

            // Create container
            var container:LayoutGroup = new LayoutGroup();
            var layout:VerticalLayout = new VerticalLayout();
            layout.gap = 20;
            layout.padding = 20;
            container.layout = layout;

            // Create label
            var label:Label = new Label();
            label.text = "This is a styled label";
            container.addChild(label);

            // Create button - automatically styled by theme
            var button:Button = new Button();
            button.label = "Themed Button";
            container.addChild(button);

            // Create custom styled button
            var customButton:Button = new Button();
            customButton.label = "Custom Button";
            customButton.styleNameList.add("custom-button-style");
            container.addChild(customButton);

            this.addChild(container);
        }
    }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.