<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" viewSourceURL=""
xmlns:Flaraby="com.arabicode.text.Flaraby.*" horizontalAlign="center"
verticalAlign="middle"
width="100%" height="100%"
applicationComplete="init()" >

  <mx:Script>
    <![CDATA[
      //
      import flash.events.*;
      import mx.events.*;
      import mx.controls.Alert;
      import mx.controls.VScrollBar;
      //
      //Uncomment line below if you compile with Flex 2
      //import mx.core.UITextField;
      //Comment line below if you compile with Flex 2
      import mx.core.IUITextField;
      import mx.core.mx_internal;
      use namespace mx_internal;
      //
      //Uncomment line below if you compile with Flex 2
      //private var uit:UITextField;
      //Comment line below if you compile with Flex 2
      private var uit:IUITextField;
      //
      private var tF:TextFormat;
      private var vsb:VScrollBar;
      [Bindable]
      private var otps:String;
      [Bindable]
      private var fnts: Array = [
                    {label:"Traditional Arabic", data:{family:"TraditionalArabic", weight:"normal"}}
                    , {label:"Andalus", data:{family:"Andalus", weight:"normal"}}
                    , {label:"Tahoma", data:{family:"Tahoma", weight:"normal"}}
                    ];
      
      private function init():void
      {
        input.text = "بِسْمِ اللّهِ الرَّحْمـَنِ الرَّحِيمِ
                    الْحَمْدُ للّهِ رَبِّ الْعَالَمِينَ
                    الرَّحْمـنِ الرَّحِيمِ
                    مَـالِكِ يَوْمِ الدِّينِ
                    إِيَّاكَ نَعْبُدُ وإِيَّاكَ نَسْتَعِينُ
                    اهدِنَــــا الصِّرَاطَ المُستَقِيمَ
صِرَاطَ الَّذِينَ أَنعَمتَ عَلَيهِمْ غَيرِ المَغضُوبِ عَلَيهِمْ وَلاَ الضَّالِّينَ";
        addEventListener(Event.RESIZE, doConvert);
      }
      
      private function doConvert(event:Event):void
      {
        convert();
      }
      
      private function onUpdate(event:Event):void
      {
        //Get the internal VScrollBar
        var i:int = 0;
        //Loop through the TextArea component to find the scrollbar instance
        while(i<output.numChildren)
        {
          if(output.getChildAt(i).name.indexOf("Scroll") != -1)
          {
            vsb = output.getChildAt(i) as VScrollBar;
            //Move internal VScrollBar to the left
            vsb.x = 0;
            break;
          }
          i++;
        }
        //Move internal textField to the right of VScrollBar
        uit = output.getTextField();
        uit.x = vsb.width;
        uit.selectable = false;
      }
      
      private function convert():void
      {
        var selectedFont:Object = ft.selectedItem.data;
        //Change the TextArea style to the selected font
        output.setStyle("fontFamily", selectedFont.family);
        output.setStyle("fontWeight", selectedFont.weight);
        //Set the TextFormat properties
        tF = new TextFormat();
        tF.font = selectedFont.family;
        tF.bold = (selectedFont.weight == "bold")? true : false;
        //Set right and left margins to allow some space around text
        tF.rightMargin = 15;
        tF.leftMargin = 2;
        tF.size = sz.value;
        //
        //Get the internal textField's width minus margins right and left
        var wd:Number = uit.width - 17;
        //Change the extraCharWidth property as needed
        fb.extraCharWidth = xw.value;
        //
        var str:String = input.text;
        //If you like remove Tashkeel from string
        //str = fb.removeTashkeel(str);
        //Convert the string
        otps = fb.convertArabicString(str, wd, tF);
      }

    ]]>
  </mx:Script>
  
  <mx:Style>
  
      <!-- Fonts to be embeded into the application -->
      
      @font-face
      {
        src:url("c:\windows\fonts\trado.ttf");
        fontFamily: TraditionalArabic;
        fontWeight: normal;
      }
      
      @font-face
      {
        src:url("c:\windows\fonts\andlso.ttf");
        fontFamily: Andalus;
        fontWeight: normal;
      }
      
      @font-face
      {
        src:url("c:\windows\fonts\tahoma.ttf");
        fontFamily: Tahoma;
        fontWeight: normal;
      }
      
</mx:Style>
  
  
  <Flaraby:FlarabyAS3Flex
    id="fb"
    html="true"
    multiline="true"
    embedFonts="true"
    />
  
  <mx:Panel
    id="pan"
    title="FlarabyAS3 Demo"
    width="100%"
    height="100%"
    paddingBottom="10"
    paddingTop="10"
    paddingLeft="10"
    paddingRight="10"
    horizontalAlign="center"
    >
    <mx:Label text="Input" />
    <mx:TextArea
      id="input"
      width="100%"
      height="50%"
      textAlign="right"
      wordWrap="true"
      />
    <mx:HBox>
      <mx:Label text="Font" />
      <mx:ComboBox
        id="ft"
        dataProvider="{fnts}"
        close="convert()"
        />
      <mx:Label text="Size" />
      <mx:NumericStepper
        id="sz"
        maximum="50"
        minimum="8"
        stepSize="1"
        value="18"
        change="convert()"
        />
    </mx:HBox>
    <mx:HBox>
      <mx:Label text="ExtraCharWidth" />
      <mx:NumericStepper id="xw" maximum="2.0" minimum="0.0" stepSize="0.1" value="0.0" change="convert()" />
    </mx:HBox>
    <mx:Label text="Output" />
    <!-- Set TextArea's verticalScrollPolicy to 'on' by default to get
    the internal textField's correct width -->
    <mx:TextArea
      id="output"
      width="100%"
      height="50%"
      textAlign="right"
      editable="false"
      verticalScrollPolicy="on"
      fontSize="{sz.value}"
      htmlText="{otps}"
      updateComplete="onUpdate(event)"
      />
    <mx:Button label="Convert" click="convert()" />
  </mx:Panel>
</mx:Application>