<?xml version="1.0" encoding="utf-8"?>
<!--

////////////////////////////////////////////////////////////////////////////////
//
//    Copyright 2014 Ardisia Labs LLC. All Rights Reserved.
//
//    This file is licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

-->
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" 
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:autoFitText="ardisia.components.autoFitText.*"
          xmlns:AutoFitText="components.autoFitText.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            
            import spark.events.IndexChangeEvent;
            
            import flashx.textLayout.conversion.TextConverter;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, function(event:IndexChangeEvent):void
                {
                    // disable API when not in certain tabs
                    var enable:Boolean = demoAppWrapper.tabBar.selectedItem.label == "Label Example" || demoAppWrapper.tabBar.selectedItem.label == "RichText Example";
                    UIComponent(demoAppWrapper.westVerticalGroup.getElementAt(1)).enabled = enable;
                    UIComponent(demoAppWrapper.westVerticalGroup.getElementAt(2)).enabled = enable;
                });
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
    </fx:Declarations>
    
    <!-- states -->
    <s:states>
        <s:State name="stockholm" />
        <s:State name="london" />
        <s:State name="spark" />
    </s:states>
    
    <!-- application -->
    <containers:DemoApplicationWrapper id="demoAppWrapper" 
                                       width="100%" height="100%"
                                       westRegionTitle="AutoFitText Description"
                                       description="Spark text components that automatically set their font size to fit the available space without truncation. Very useful for charting.&#13;&#13;Designed to be very performant.&#13;&#13;Three versions are available: a RichText version (AutoFitRichText), a Label version (AutoFitLabel), and a basic FTE version (AutoFitFTETextField) designed for use within item renderers for maximum performance."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>API</data:label>
                <data:content>
                    <s:FormItem label="Ignore Char Len:">
                        <s:HSlider id="ignoreSelect"
                                   width="100"
                                   minimum="0" maximum="20" value="3"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Any words with less than or equal to the number of characters defined by this property will not be included in the word count.&#13;&#13;This is relevant because the number of line breaks will not exceed the word count."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Precision:">
                        <s:HSlider id="precisionSelect"
                                   width="100"
                                   minimum="1" maximum="20" value="1"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The font size precision used by the class to determine when the fit is 'good enough', in pixels.&#13;&#13;Higher values will increase performance but not fit as optimally."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Font Min Size:">
                        <s:HSlider id="minSizeSelect"
                                   width="100"
                                   minimum="3" maximum="{maxSizeSelect.value - 1}" value="6"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The minimum font size allowed when auto fitting the text."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Font Max Size:">
                        <s:HSlider id="maxSizeSelect"
                                   width="100"
                                   minimum="{minSizeSelect.value + 1}" maximum="200" value="100"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The maximum font size allowed when auto fitting the text."/>
                        </s:helpContent>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
            <!--- expanding container #2 -->
            <data:ExpandingContainerData>
                <data:label>Styling</data:label>
                <data:content>
                    <s:FormItem label="Text Align:">
                        <s:DropDownList id="textAlignSelect"
                                        width="100"
                                        selectedIndex="0">
                            <s:ArrayCollection>
                                <fx:String>center</fx:String>
                                <fx:String>left</fx:String>
                                <fx:String>right</fx:String>
                                <fx:String>start</fx:String>
                                <fx:String>justify</fx:String>
                                <fx:String>end</fx:String>
                            </s:ArrayCollection>
                        </s:DropDownList>
                    </s:FormItem>
                    <s:FormItem label="Vertical Align:">
                        <s:DropDownList id="vAlignSelect"
                                        width="100"
                                        selectedIndex="0">
                            <s:ArrayCollection>
                                <fx:String>middle</fx:String>
                                <fx:String>top</fx:String>
                                <fx:String>bottom</fx:String>
                                <fx:String>justify</fx:String>
                            </s:ArrayCollection>
                        </s:DropDownList>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Label Example</data:tabLabel>
                <data:exampleDescription>AutoFitLabel: extends the Spark Label. Faster than the AutoFitRichText component, but does not support TLF.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormHeading label="Example Properties:"/>
                        <s:FormItem label="Text:">
                            <s:TextArea id="textSelectA"
                                        width="150" height="70"
                                        text="This text will be fitted to the available space"/>
                        </s:FormItem>
                        <s:FormItem label="Width:">
                            <s:HSlider id="widthSelectA"
                                       width="100"
                                       minimum="50" maximum="500" value="300"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The width of the label. The text will resize to fit this width."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="Height:">
                            <s:HSlider id="heightSelectA"
                                       width="100"
                                       minimum="50" maximum="500" value="100"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The height of the label. The text will resize to fit this height."/>
                            </s:helpContent>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:BorderContainer horizontalCenter="0" verticalCenter="0"
                                       borderVisible="true"
                                       borderColor="#000000"
                                       backgroundColor="#FFFFFF">
                        <autoFitText:AutoFitLabel id="autoFitLabel"
                                                  top="2" right="2" bottom="2" left="2"
                                                  text="{textSelectA.text}"
                                                  width="{widthSelectA.value}"
                                                  height="{heightSelectA.value}"
                                                  minFontSize="{minSizeSelect.value}"
                                                  maxFontSize="{maxSizeSelect.value}"
                                                  precisionThreshold="{precisionSelect.value}"
                                                  ignoreWordLength="{ignoreSelect.value}"
                                                  textAlign="{textAlignSelect.selectedItem}"
                                                  verticalAlign="{vAlignSelect.selectedItem}"
                                                  color="#000000"/>
                    </s:BorderContainer>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>RichText Example</data:tabLabel>
                <data:exampleDescription>AutoFitRichText: extends the Spark RichText component. Slower than the AutoFitLabel component, but does support TLF.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormHeading label="Example Properties:"/>
                        <s:FormItem label="TextFlow:">
                            <s:TextArea id="textSelectB"
                                        width="150" height="70"
                                        text="Fitted text. &lt;b&gt;Supports RichText formatting&lt;/b&gt;&lt;br>like &lt;i&gt;italics&lt;/i&gt;"
                                        change="{autoFitRichText.textFlow = TextConverter.importToFlow(textSelectB.text, TextConverter.TEXT_FIELD_HTML_FORMAT);}"
                                        creationComplete="autoFitRichText.textFlow = TextConverter.importToFlow(textSelectB.text, TextConverter.TEXT_FIELD_HTML_FORMAT);"/>
                        </s:FormItem>
                        <s:FormItem label="Width:">
                            <s:HSlider id="widthSelectB"
                                       width="100"
                                       minimum="50" maximum="500" value="300"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The width of the label. The text will resize to fit this width."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="Height:">
                            <s:HSlider id="heightSelectB"
                                       width="100"
                                       minimum="50" maximum="500" value="100"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The height of the label. The text will resize to fit this height."/>
                            </s:helpContent>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:BorderContainer horizontalCenter="0" verticalCenter="0"
                                       borderVisible="true"
                                       borderColor="#000000"
                                       backgroundColor="#FFFFFF">
                        <autoFitText:AutoFitRichText id="autoFitRichText"
                                                     text="Fitted text. &lt;b&gt;Supports RichText formatting&lt;/b&gt;"
                                                     width="{widthSelectB.value}"
                                                     height="{heightSelectB.value}"
                                                     minFontSize="{minSizeSelect.value}"
                                                     maxFontSize="{maxSizeSelect.value}"
                                                     precisionThreshold="{precisionSelect.value}"
                                                     ignoreWordLength="{ignoreSelect.value}"
                                                     textAlign="{textAlignSelect.selectedItem}"
                                                     verticalAlign="{vAlignSelect.selectedItem}"
                                                     color="#000000"/>
                    </s:BorderContainer>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #3 -->
            <data:PrimaryContentData>
                <data:tabLabel>FTETextField Example</data:tabLabel>
                <data:exampleDescription>The AutoFitFTETextField component is extremely fast at auto fitting text and supports FTE by extending the FTETextField class. However, it is harder to use and customize than the AutoFitLabel and AutoFitRichText components.</data:exampleDescription>
                <data:toolbarContent>
                    
                </data:toolbarContent>
                <data:primaryContent>
                    <s:BorderContainer width="400" height="190"
                                       horizontalCenter="0" verticalCenter="0">
                        <AutoFitText:FTELabel top="10" right="0" bottom="0" left="0"
                                              text="The AutoFitFTETextField fits the available space extremely quickly.  The downside is that it must be added to a DisplayObjectContainer, like a UIComponent.  This makes the component primarily useful within an item renderer subclassing the UIComponent class.&#13;&#13;See the TreeMap demo for an example of large numbers of AutoFitFTETextField components." />
                    </s:BorderContainer>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #4 -->
            <data:PrimaryContentData>
                <data:tabLabel>Chart Example</data:tabLabel>
                <data:exampleDescription>Simple chart used to illustrate how the auto fit text components can be very useful.&#13;&#13;In the example below, the labels will automatically fit themselves to the item renderers that correspond to the population size of various European nations. The larger the text, the larger the population of the nation.</data:exampleDescription>
                <data:toolbarContent>
                    
                </data:toolbarContent>
                <data:primaryContent>
                    <s:VGroup horizontalCenter="0" verticalCenter="0"
                              horizontalAlign="justify"
                              gap="30">
                        <s:Label fontWeight="bold"
                                 fontSize="22"
                                 textAlign="center"
                                 text="Population of Selected European Nations"/>
                        <s:List borderVisible="false">
                            <s:dataProvider>
                                <s:ArrayCollection>
                                    <fx:Object country="Russia" population="143" />
                                    <fx:Object country="Germany" population="81" />
                                    <fx:Object country="France" population="64" />
                                    <fx:Object country="Spain" population="50" />
                                    <fx:Object country="Greece" population="11" />
                                </s:ArrayCollection>
                            </s:dataProvider>
                            <s:layout>
                                <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"
                                                    gap="10"/>
                            </s:layout>
                            <s:itemRenderer>
                                <fx:Component>
                                    <s:ItemRenderer autoDrawBackground="false">
                                        
                                        <fx:Script>
                                            <![CDATA[
                                                
                                                override public function set data(value:Object):void
                                                {
                                                    super.data = value;
                                                    
                                                    ellipse.width = ellipse.height = 200 * Math.sqrt(value.population / 143);
                                                    labelDisplay.width = labelDisplay.height = ellipse.width - 10;
                                                }
                                            ]]>
                                        </fx:Script>
                                        
                                        <s:Ellipse id="ellipse"
                                                   horizontalCenter="0" verticalCenter="0">
                                            <s:fill>
                                                <s:SolidColor color="#006B9F"/>
                                            </s:fill>
                                        </s:Ellipse>
                                        <autoFitText:AutoFitLabel id="labelDisplay" 
                                                                  color="#FFFFFF"
                                                                  verticalAlign="middle" textAlign="center"
                                                                  text="{data.country}"
                                                                  horizontalCenter="0" verticalCenter="0">
                                            <autoFitText:filters>
                                                <s:DropShadowFilter blurX="2" blurY="2"
                                                                    distance="2"/>
                                            </autoFitText:filters>
                                        </autoFitText:AutoFitLabel>
                                        
                                    </s:ItemRenderer>
                                </fx:Component>
                            </s:itemRenderer>
                        </s:List>
                    </s:VGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>