<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:controls="acj.controls.*" 
    layout="horizontal"
    backgroundColor="#000000"
     viewSourceURL="srcview/index.html">
    
    <mx:Style source="acj/assets/styles/style.css"/>

    
    <mx:TabNavigator width="100%" height="100%" >
        
        <mx:HBox label="Default ACJEditor" width="100%" height="100%">
            <controls:ACJEditor id="richTextEditor" width="50%" height="100%" title="ACJEditor" /> 
            
            <mx:VBox width="50%" height="100%">
                <mx:Label width="100%" text="ACJEditor.xhtmlText HTML" />
                <mx:TextArea text="{richTextEditor.xhtmlText}" width="100%" height="50%" /> 
                <mx:Label width="100%" text="Normal RichTextEditor.htmlText HTML" />
                <mx:TextArea text="{richTextEditor.htmlText}" width="100%" height="50%" /> 
            </mx:VBox>
        </mx:HBox>
        <mx:VBox label="Custom ACJEditor Extended" width="100%" height="100%">
            <mx:Spacer height="10"/>
            <mx:Label text="add some text and then hilight the text, at the bottom enter a link and press enter, compare the differences from the default editor"/>
            <mx:HBox width="100%" height="100%">
                <controls:ACJCustomEditor id="acjCustomEditor" width="50%" height="100%" title="ACJEditor"/>
                
                <mx:VBox width="50%" height="100%">
                    <mx:Label width="100%" text="ACJCustomEditor.xhtmlText HTML" />
                    <mx:TextArea text="{acjCustomEditor.xhtmlText}" width="100%" height="33%" /> 
                    <mx:Label width="100%" text="ACJEditor.htmlText HTML" />
                    <mx:TextArea text="{acjCustomEditor.htmlText}" width="100%" height="33%" /> 
                    <mx:Label width="100%" text="ACJEditor.htmlText HTML" />
                    <mx:Text htmlText="{acjCustomEditor.htmlText}" width="100%" height="33%" /> 
                </mx:VBox>
            </mx:HBox>
            
        </mx:VBox>
        
    </mx:TabNavigator>
    
</mx:Application>