<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="550" viewSourceURL="srcview/index.html">
    <s:layout>
        <s:VerticalLayout paddingTop="10" horizontalAlign="center" gap="10" />
    </s:layout>
    
    <s:Label text="Custom Focus Skins" fontSize="16" fontWeight="bold"  />
    
    <s:Label text="Give focus to the following TextInputs to see the different focus skins." width="200" />
    
    <s:TextInput width="200" text="Simple Background" focusSkin="SimpleBackgroundFocusSkin" />
    <s:TextInput width="200" text="Simple Stroke" focusSkin="SimpleStrokeFocusSkin" />
    <s:TextInput width="200" text="Dotted" focusSkin="DottedFocusSkin" />
    <s:TextInput width="200" text="Gradient Background" focusSkin="GradientBackgroundFocusSkin" />
    <s:TextInput width="200" text="Animated Gradient Background" focusSkin="AnimatedGradientBackgroundFocusSkin" />
    <s:TextInput width="200" text="Pulsating Glow" focusSkin="GlowingFocusSkin" />
    <s:TextInput width="200" text="Arrows" focusSkin="ArrowFocusSkin" />
    <s:TextInput width="200" text="Animated Arrows" focusSkin="AnimatedArrowFocusSkin" />
    <s:TextInput width="200" text="Bouncing Arrows" focusSkin="BouncingArrowFocusSkin"  />
    
</s:Application>