Customize Business Card: Edit

<?xml version="1.0" encoding="utf-8"?>
<mx:Application backgroundColor="#FFFFFF"  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" xmlns:objecthandles="com.roguedevelopment.objecthandles.*" height="100%" width="100%">


<mx:Metadata>


[Event(name="change", type="flash.events.Event")]

[DefaultTriggerEvent("change")]

/**
*  Name of the CSS Style declaration to use for the styles for the TextArea.
*  By default, the TextArea uses the RichTextEditor control's inheritable styles.
*/
[Style(name="textAreaStyleName", type="String", inherit="no")]

[IconFile("RichTextEditor.png")]

[Exclude(name="alignButtons", kind="property")]
[Exclude(name="boldButton", kind="property")]
[Exclude(name="bulletButton", kind="property")]
[Exclude(name="colorPicker", kind="property")]
[Exclude(name="defaultButton", kind="property")]
[Exclude(name="fontFamilyArray", kind="property")]
[Exclude(name="fontFamilyCombo", kind="property")]
[Exclude(name="fontSizeArray", kind="property")]
[Exclude(name="fontSizeCombo", kind="property")]
[Exclude(name="icon", kind="property")]
[Exclude(name="italicButton", kind="property")]
[Exclude(name="label", kind="property")]
[Exclude(name="layout", kind="property")]
[Exclude(name="linkTextInput", kind="property")]
[Exclude(name="toolBar", kind="property")]
[Exclude(name="toolBar2", kind="property")]
[Exclude(name="underlineButton", kind="property")]


</mx:Metadata>


<mx:Array id="fontFamilyArray"> 
<mx:String>_sans</mx:String>
<mx:String>_serif</mx:String>
<mx:String>_typewriter</mx:String>
<mx:String>Arial</mx:String>
<mx:String>Courier</mx:String>
<mx:String>Courier New</mx:String>
<mx:String>Geneva</mx:String>
<mx:String>Georgia</mx:String>
<mx:String>Helvetica</mx:String>
<mx:String>Times New Roman</mx:String>
<mx:String>Times</mx:String>
<mx:String>Verdana</mx:String>
<mx:String>ComicSansMS</mx:String>
</mx:Array>


<mx:Array id="fontSizeArray"> 
<mx:String>8</mx:String>
<mx:String>9</mx:String>
<mx:String>10</mx:String>
<mx:String>11</mx:String>
<mx:String>12</mx:String>
<mx:String>14</mx:String>
<mx:String>16</mx:String>
<mx:String>18</mx:String>
<mx:String>20</mx:String>
<mx:String>22</mx:String>
<mx:String>24</mx:String>
<mx:String>26</mx:String>
<mx:String>28</mx:String>
<mx:String>36</mx:String>
<mx:String>48</mx:String>
<mx:String>72</mx:String>
</mx:Array>


  <mx:Script>
<![CDATA[
import mx.states.RemoveChild;
import com.roguedevelopment.objecthandles.ObjectHandles;
   import mx.managers.PopUpManager;


   
        public var obj:Object=new Object();
        private var tObj:Object;
        private function onClick(event:MouseEvent):void
        {
         tObj=(event.currentTarget as ObjectHandles).getChildByName("TA");
        }
        
   public function Tek():void
   {
   
    var tt:Rtext=new Rtext();
    var obH:ObjectHandles=new ObjectHandles();
    obH.visible=true;
    obH.setStyle('borderStyle','solid');
    obH.setStyle('borderColor','gray');
    obH.setStyle('borderThickness',0);
    obH.toolTip='DoubleClick Here';
    obH.allowHMove=true;
    obH.allowVMove=true;
    tt.text='Text Here';
    tt.focusEnabled=true;
    tt.percentHeight=100;
    tt.percentWidth=100;
    tt.visible=true;
    //textArea.addEventListener(MouseEvent.CLICK,eve);
    tt.name='TA';
    obH.x=80;
    obH.y=60;
    obH.width=100;
    obH.height=20;
    obH.doubleClickEnabled=true;
    obH.addEventListener(MouseEvent.DOUBLE_CLICK,subtex);
    obH.addEventListener(MouseEvent.CLICK,mouseeve);
    can.addChild(obH);
    obH.addChild(tt);
   
   }
   public function mouseeve(event:MouseEvent):void
   {
    obj=(event.currentTarget as ObjectHandles).getChildByName("TA") as Rtext;
    tObj=obj;
   }  

   public function subtex(event:MouseEvent):void
{

  var pop:comsubText=new comsubText();
       PopUpManager.addPopUp(pop,this,true);
       PopUpManager.centerPopUp(pop); 
       pop.textArea.htmlText=Rtext(tObj).htmlText ;
       
}
public function img(event:MouseEvent):void
{
var addimg:comPop=new comPop();
PopUpManager.addPopUp(addimg,this,true);
PopUpManager.centerPopUp(addimg);
}
public function dlet(event:MouseEvent):void
{
can.removeChild((obj as Rtext).parent as ObjectHandles);
}

public function Bgimg():void
{
var Bgimg:Bgimage=new Bgimage();
PopUpManager.addPopUp(Bgimg,this,true);
PopUpManager.centerPopUp(Bgimg);
}

]]>
</mx:Script>
<mx:Canvas id="can"  width="580" height="354" backgroundColor="#FFFFFF" borderStyle="solid" borderColor="black" borderThickness="0" horizontalCenter="59" verticalCenter="-65" shadowDirection="right" shadowDistance="20" dropShadowColor="#000000" dropShadowEnabled="true" cornerRadius="0" useHandCursor="true" buttonMode="true" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:backgroundImage>@Embed(source='BGimg/background4.jpg')</mx:backgroundImage>
</mx:Canvas>
<mx:Canvas width="554" height="94" backgroundColor="#72B0DB" borderStyle="solid" borderThickness="2" horizontalCenter="59" verticalCenter="196" useHandCursor="true" buttonMode="true" shadowDirection="right" shadowDistance="10" dropShadowColor="#000000" dropShadowEnabled="true" borderColor="black" cornerRadius="15">
<mx:Button click="Tek()" x="341" y="9" label="Add Text" width="97" height="22"/>
<mx:VRule x="333" y="5" height="74"/>
<mx:VRule x="443" y="5" height="74"/>
<mx:Button click="img(event)" x="342" y="36" label="Image" width="97">
<mx:icon>@Embed(source='icon/image_cultured.png')</mx:icon>
</mx:Button>
<mx:Button click="dlet(event)" x="453" y="6" icon="@Embed(source='icon/gtk-close.png')" width="24" height="22"/>
<mx:Button click="expand.end();expand.play();" x="485" y="5" icon="@Embed(source='icon/zoom_in.png')" width="24" height="22"/>
<mx:Button x="516" y="4" icon="@Embed(source='icon/zoom_out.png')" width="24" height="22"/>
<mx:Button x="453" y="33" icon="@Embed(source='icon/Copy.png')" width="24" height="22"/>
<mx:Button x="481" y="33" icon="@Embed(source='icon/undo (1).png')" width="34" height="22"/>
<mx:Button x="516" y="33" icon="@Embed(source='icon/redo.png')" width="34" height="22"/>
<mx:ControlBar width="324" x="8" y="4" height="84" cornerRadius="15"> 

<mx:ToolBar id="toolbar" width="100%" horizontalGap="7">

<mx:ComboBox id="fontFamilyCombo" editable="true"
creationComplete="Rtext(tObj).getTextStyles();Rtext(tObj).lastCaretIndex = -1;"
dataProvider = "{fontFamilyArray}"
close="Rtext(tObj).setTextStyles('font');"
enter="Rtext(tObj).setTextStyles('font');"/>

<mx:ComboBox id="fontSizeCombo" editable="true"
paddingLeft="2" paddingRight="2"
dataProvider = "{fontSizeArray}"
close="Rtext(tObj).setTextStyles('size');"
enter="Rtext(tObj).setTextStyles('size');"/>
 
<mx:HBox id="toolBar2" horizontalGap="0">

<mx:Button id="boldButton" width="20" toggle="true"
  icon="@Embed('assets/icon_style_bold.png')"
  click="Rtext(tObj).setTextStyles('bold', event.currentTarget.selected);" /> 

<mx:Button id="italicButton" width="20" toggle="true"
  icon="@Embed('assets/icon_style_italic.png')"
  click="Rtext(tObj).setTextStyles('italic', event.currentTarget.selected);" /> 

<mx:Button id="underlineButton" width="20" toggle="true"
  icon="@Embed('assets/icon_style_underline.png')"
  click="Rtext(tObj).setTextStyles('underline', event.currentTarget.selected);" /> 

</mx:HBox>

<mx:ColorPicker id="colorPicker" width="22" height="22"
close="Rtext(tObj).setTextStyles('color');"/>

<mx:VRule height="{alignButtons.height}"/>

<mx:ToggleButtonBar id="alignButtons" buttonWidth="20"
itemClick="Rtext(tObj).setTextStyles('align', ToggleButtonBar(event.currentTarget).dataProvider.getItemAt(ToggleButtonBar(event.currentTarget).selectedIndex).action); " >
<mx:dataProvider>
<mx:Array> 
<mx:Object icon="@Embed('assets/icon_align_left.png')" action="left"/>
<mx:Object icon="@Embed('assets/icon_align_center.png')" action="center"/>
<mx:Object icon="@Embed('assets/icon_align_right.png')" action="right"/>
<mx:Object icon="@Embed('assets/icon_align_justify.png')" action="justify"/>
</mx:Array>
</mx:dataProvider>
</mx:ToggleButtonBar>

<mx:Button id="bulletButton" width="20" toggle="true"
  icon="@Embed('assets/icon_bullet.png')"
  click="Rtext(tObj).setTextStyles('bullet', event.currentTarget.selected);" /> 


</mx:ToolBar>
</mx:ControlBar>
<mx:Button click="Bgimg()" x="341" y="62" label="BG Images" width="98" height="22"/>
</mx:Canvas>
</mx:Application>

SCREEN SHOT &  DEMO HERE

Re sizable Canvas

<?xml version="1.0" encoding="utf-8"?>
<mx:Application backgroundColor="#fffffff" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Style source="resources/css/style.css"/>
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.controls.Label;
import mx.containers.Canvas;



public function init():void
{

var rCnv:ResizableCanvas = new ResizableCanvas();
rCnv.width = 200;
rCnv.height = 150;
rCnv.setStyle("horizontalCenter", 0);
rCnv.setStyle("verticalCenter", 0);
 
var inCnv:Canvas = new Canvas();
inCnv.percentWidth = 100;
inCnv.percentHeight = 100;
inCnv.setStyle("cornerRadius",16);
inCnv.setStyle("color",0x777777);
inCnv.setStyle("backgroundColor",'gray');
inCnv.setStyle("borderStyle","solid");
inCnv.setStyle("borderThickness",0);
inCnv.setStyle("borderAlpha",0);
inCnv.setStyle("cornerRadius",16);
rCnv.addChild(inCnv);



addChild(rCnv);

rCnv.minWidth = 80;
rCnv.maxWidth = 400;
rCnv.minHeight = 80;
rCnv.maxHeight = 270;
}
]]>
</mx:Script>
</mx:Application>

OUTPUT

Dynamic TextArea And TextInput Resize

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.TextArea;
import mx.controls.Image;
import mx.controls.Label;
import mx.containers.Canvas;
public function init():void
{
var tex:TextArea=new TextArea();
tex.percentHeight=100;
tex.percentWidth=100;
var rCnv:ResizableCanvas = new ResizableCanvas();
rCnv.width = 100;
rCnv.height = 100;
rCnv.setStyle("horizontalCenter", 0);
rCnv.setStyle("verticalCenter", 0);

var inCnv:Canvas = new Canvas();
inCnv.percentWidth = 100;
inCnv.percentHeight = 100;
inCnv.setStyle("cornerRadius",16);
inCnv.setStyle("color",0x777777);
inCnv.setStyle("backgroundColor",0xffffff);
inCnv.setStyle("borderStyle","solid");
inCnv.setStyle("borderThickness",0); 
inCnv.setStyle("borderAlpha",0);
inCnv.setStyle("cornerRadius",16);
inCnv.setStyle("verticalScrollPolicy",'false');
//rCnv.verticalScrollPolicy=false;
rCnv.addChild(inCnv);


                                  rCnv.addChild(tex);
bgcan.addChild(rCnv);

rCnv.minWidth = 80;
rCnv.maxWidth = 800;
rCnv.minHeight = 80;
rCnv.maxHeight = 570;
<-----Call The components--->
var tex2:dynamicresize=new dynamicresize();
tex2.setStyle("horizontalCenter", 0);
tex2.setStyle("verticalCenter", 0);
bgcan0.addChild(tex2)
}

]]>
</mx:Script>
<mx:Canvas id="bgcan" x="124" y="179" width="359" height="429" backgroundColor="white" borderThickness="2" borderStyle="solid" borderColor="black">
<mx:Label x="107.5" y="10" text="TextArea Resize" fontWeight="bold" fontSize="15" textDecoration="underline"/>
</mx:Canvas>
<mx:Canvas id="bgcan0" x="493" y="179" width="359" height="429" backgroundColor="white" borderThickness="2" borderStyle="solid" borderColor="black">
<mx:Label x="104.5" y="10" text="TextInput Resize" fontWeight="bold" fontSize="15" textDecoration="underline"/>
</mx:Canvas>
</mx:Application>

<----------------Automatic TextArea Resize Component------------------>

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

<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml" htmlText="Welcome to Flex3.0" wordWrap="false" change="onValidation()" verticalScrollPolicy="off" horizontalScrollPolicy="off"

 height="22" width="108" creationComplete="init()" keyDown="onKeyDown(event)" updateComplete="onValidation()">

<mx:Script>

<![CDATA[

import mx.controls.textClasses.TextRange;

private function init():void

{

this.validateNow();

}

private function onValidation():void

{

var metrics:TextLineMetrics = this.getLineMetrics(0);

this.width = this.textWidth + 10;

this.height = this.textHeight + 10;

this.verticalScrollPosition = 0;

this.horizontalScrollPosition = 0;

}

private function onKeyDown(e:KeyboardEvent):void

{

var tr:TextRange = new TextRange(this, true);

if(e.ctrlKey && e.keyCode == 66){

if(tr.fontWeight == "normal"){

tr.fontWeight = "bold";

}

else{ tr.fontWeight = "normal" }

}

if(e.ctrlKey && e.keyCode == 73){

if(tr.fontStyle == "normal"){

tr.fontStyle = "italic";

}

else{ tr.fontStyle = "normal" }

}

if(e.ctrlKey && e.keyCode == 85){

if(tr.textDecoration == "normal"){

tr.textDecoration = "underline";

}

else{ tr.textDecoration = "normal" }

}

}

]]>

</mx:Script>

<mx:StringValidator source="{this}" property="text" minLength="10" valid="onValidation()"/>

</mx:TextArea>

OUTPUT