Kasiruby's Blog

LinkButton Control

Definition:

          It  creates a single-line hypertext link that support an optional icon. We can use this to open a URL in a web browser. It automatically provides visual cues when we move the mouse pointer over or click the control.

Source Code:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>

 <mx:LinkButton label=”Ruby” click=”navigateToURL(new URLRequest(‘http://www.google.co.in/&#8217;));” />
 
</mx:Application>

 Thanks & Regards,
R.Kasi Ruby

SWFLoader Control

Definition:

             It   loads & displays a specified SWF file. We typically use SWFLoader for loading one Flex application into  a host Flex Application. We can use this control to load a GIF, JPEG or PNG image file at run time or load an embedded version of any these file types, at compile time by using @Embed(source=’filename’). However, Image control is better suited for this capability and should be used for most image loading.

Source Code:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>

    <mx:Panel title=”SWFLoader Control”  height=”90%” width=”90%”
        paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″>

        <mx:Label text=”The swf of the outer application”/>

        <mx:SWFLoader id=”Load” source=”../bin-debug/Grid.swf” height=”100%” width=”100%”/>

    </mx:Panel>
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

ToolTip Manager

Definition:

             ToolTipManager class allows customize the tooltip functionality, such as enabling or disabling tooltips, or setting the display delay. It contains a reference to the current tooltip in the currentToolTip property. To enable or disable a tooltip, set the ToolTipManager.enabled or ToolTipManager.disabled properties.

Source Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Script>
 <![CDATA[
  import mx.managers.ToolTipManager;
 ]]>
</mx:Script>

<mx:Button label=”EnableButton” click=”ToolTipManager.enabled=true” toolTip=”Enable ToolTips” x=”209″ y=”210″/>
<mx:Button label=”DisableButton” click=”ToolTipManager.enabled=false” toolTip=”Disable ToolTips” x=”367″ y=”210″/> 
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

Tooltip Events

Definition:

             Tooltips have many events that are dispatched during their life cycle. Event are contained in the tooltipevent class. The usual properties type and target are available.  Tooltips text property inside the event handler.

Source Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”initApp()” layout=”absolute”>
<mx:Script>
 <![CDATA[
  import mx.controls.ToolTip;
  import mx.core.IToolTip;
  import mx.events.ToolTipEvent;
  import mx.controls.TextInput;
  
  public function initApp():void
  {
   myTextInput.addEventListener(ToolTipEvent.TOOL_TIP_SHOW, onToolTipShow);
  }
  private function onToolTipShow(event:ToolTipEvent):void
  {
   var toolTip:IToolTip=event.toolTip;
   myLabel.text=toolTip.text;
  }
 ]]>
</mx:Script>

<mx:TextInput id=”myTextInput” toolTip=”ToolTip text goes here”/>
<mx:Label id=”myLabel”/>
 
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

Creating Tooltip

Definition:

              All visual components that extend the UI component class support a tool tip property.  When a mouse pointer hovers over the component, the string appears in the tool tip.

Source Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”initApp()”  layout=”absolute”>
<mx:Script>
 <![CDATA[
  import mx.controls.TextInput;
  public function initApp():void
  {
   var myTextInput:TextInput = new TextInput();
   myTextInput.toolTip = ” This is a TextInput Control”;
   addChild(myTextInput);
  }
 ]]>
</mx:Script>
 
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

Data Binding with Components

Definition:
               It is used to tie data in one object to another. That is, it is used to pass data between different layers of the application. There are three ways to use DataBinding. They are,

1. {} syntax
2. <mx:Binding> tag
3. BindingUtils static methods    

                  The requirements for this DataBinding are source property, destination property & an event. 

Source Code:                           

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

 <mx:TextInput id=”myText”  x=”315″ y=”251″/>
 <mx:Label text=”{myText.text}” x=”315″ y=”294″/>
 
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

AnimateProperty Effect

Definition:

            It will come under the package of mx.effects. It animates a property or style of a component. For this, we have to specify the property name, start value and end value of the property to animate.

Source Code:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” backgroundGradientColors=”[0x00ffff,0xff00ff]”
 backgroundAlpha=”0.3″ backgroundGradientAlphas=”[1.0, 1.0]” layout=”absolute”
 horizontalAlign=”center” verticalAlign=”middle”>

<mx:Script>
 <![CDATA[  
                 import mx.effects.Effect;  
  [Bindable]
            public var angle:int=0;
            private function rotateImage():void {
                rotate.end();
                angle += 45;
                rotate.play();               
            }

            private function rotateImages():void {
                rotate1.end();
                angle += 135;
                rotate1.play();
            }
      ]]> 
</mx:Script>

  <mx:Sequence id=”YUpDown” >
        <mx:AnimateProperty property=”scaleY” fromValue=”1″ toValue=”1.5″ duration=”1000″ />
        <mx:AnimateProperty property=”scaleY” fromValue=”1.5″ toValue=”1″ duration=”1000″ /> 
    </mx:Sequence>
    <mx:Sequence id=”XUpDown”>
     <mx:AnimateProperty property=”scaleX” fromValue=”1″ toValue=”1.5″ duration=”1000″ />
     <mx:AnimateProperty property=”scaleX” fromValue=”1.5″ toValue=”1″ duration=”1000″ />
    </mx:Sequence>
    <mx:Rotate id=”rotate” angleFrom=”{angle-45}” angleTo=”{angle}” target=”{flex2}”/>     
    <mx:Rotate id=”rotate1″ angleFrom=”{angle-45}” angleTo=”{angle}” target=”{flex}”/>
    <mx:Glow id=”glowImage” duration=”1000″
        alphaFrom=”1.0″ alphaTo=”0.3″
        blurXFrom=”0.0″ blurXTo=”50.0″
        blurYFrom=”0.0″ blurYTo=”50.0″
        color=”0x00FF00″/>
    <mx:Glow id=”glowImage1″ duration=”1000″
        alphaFrom=”0.3″ alphaTo=”1.0″
        blurXFrom=”50.0″ blurXTo=”0.0″
        blurYFrom=”50.0″ blurYTo=”0.0″
        color=”0x0000FF”/>  
     
    <mx:Panel title=”AnimateProperty Effect Example” width=”456″ height=”388″
        paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″
        layout=”absolute” borderColor=”#961D1D” color=”#47D375″ fontSize=”14″
        fontFamily=”Times New Roman” x=”232″ y=”117″ horizontalAlign=”center” verticalAlign=”middle”>

        <mx:Text width=”100%” color=”#713D1A”
            text=”First Click all the four images. Then align the images like original.”
            fontSize=”16″ fontFamily=”Times New Roman” fontStyle=”italic” fontWeight=”bold”/>
                    
  <mx:Tile x=”21″ y=”47″ >  
        <mx:Image id=”flex1″ source=”@Embed(source=’../Images/F.JPG’)”
         maintainAspectRatio=”false” x=”0″ y=”138″ mouseDownEffect=”{XUpDown}”
         showEffect=”{glowImage}” hideEffect=”{glowImage1}” />
        <mx:Image id=”flex” source=”@Embed(source=’../Images/F.JPG’)”
         maintainAspectRatio=”false” x=”0″ y=”0″ click=”rotateImages();” mouseDownEffect=”{glowImage}”
            mouseUpEffect=”{glowImage1}”/>
        <mx:Image id=”flex2″ source=”@Embed(source=’../Images/F.JPG’)”
         x=”140″ y=”138″ maintainAspectRatio=”false” click=”rotateImage();” mouseDownEffect=”{glowImage}”
            mouseUpEffect=”{glowImage1}”/>
        <mx:Image id=”flex0″ source=”@Embed(source=’../Images/F.JPG’)”
         x=”137″ y=”0″ maintainAspectRatio=”false” mouseDownEffect=”{YUpDown}”
         showEffect=”{glowImage}” hideEffect=”{glowImage1}” />
        </mx:Tile> 
              
    </mx:Panel>
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

Skinning

Definition:

            It  is the process of changing the appearance of component by modifying or replacing its visual elements. These elements can be made up of images, SWF files, or class files that contain drawing API methods. Flex components can be reskinned without changing their functionality.

           Skins can be applied to components with various states. For example, the button control which has many skins for various states. It can be defined using the downSkin, upSkin & overSkin style properties to represent the way the button control appears when it is down, up, & over the control. We can achieve this either by Graphically or Programmatically.

Source Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
 <mx:Style>
  Button
  {
   overSkin: Embed(“../images/beige_background.jpg”);
   upSkin: Embed(“../images/blue_background.jpg”);
   downSkin: Embed(“../images/ga7.jpg”, scaleGridTop=6,
        scaleGridLeft=15,
        scaleGridBottom=10,
        scaleGridRight=50 );
  }
 </mx:Style>
  
 <mx:Button />
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

Cascading Style Sheet

Definition:

              We will shortly call this as CSS. It is used to style our Flex application in a similar manner to an HTML web page. For this, we can either declare our styles within the inline MXML <mx:Style> tag, or reference an external file that contains the styles. To use this tag, it must be a second level child tag of the root tag in the MXML file & it can be used only in MXML applications and not MXML components.

              There are two different types of  ‘Selectors‘ when using styles to components.

1. Class selector
2. Type selector

             Class selector can be applied to an individual component. Type selector can be applied to all components of a certain type.

Source Code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns=”*” >
 
 <mx:Style>
  .myText      /* class selector */
  {
   fontSize: 20;
  }
  Text     /* type selector */
  {
   color: #00f00f;
  }
 </mx:Style>
 
  <mx:Panel title=”Use of CSS”  x=”222″ y=”188″ width=”325″ height=”91″>
   <mx:Text text=”Cascading Style Sheets” styleName=”myText” />
  </mx:Panel>
 
</mx:Application>

Thanks & Regards,
R.Kasi Ruby

Module Manager

Definition:

           We can also load modules by using this ModuleManager class. It will create a reference to the module’s IModuleInfo interface by using the ModuleManager getModule() method. Then, it will call the interface’s load() method. Finally, it will use the factory property of the interface to call the create() method & cast the return value as the module’s class.

           The IModuleInfo class’s load() method optionally takes an ApplnDomain & a SecurityDomain as arguements. If we don’t specify either of these, then the module is loaded into a new child domain.

Source Code:

myModule.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Module xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” >
 <mx:Image source=”../assets/satellite-image-of-greenland.gif” rotation=”-10″ y=”10″ x=”36″>
  <mx:filters>
   <mx:DropShadowFilter/>
  </mx:filters>
 </mx:Image>
</mx:Module>

moduleManager.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”initApp()”>
    <mx:Script>
        <![CDATA[
        import mx.events.ModuleEvent;
        import mx.modules.ModuleManager;
        import mx.modules.IModuleInfo;

        public var info:IModuleInfo;
       
        private function initApp():void {
            info = ModuleManager.getModule(“myModule.swf”);
            info.addEventListener(ModuleEvent.READY, modEventHandler);          
            info.load();
        }
       
        private function modEventHandler(e:ModuleEvent):void {
            vb1.addChild(info.factory.create() as myModule);
        }
        ]]>
    </mx:Script>

    <mx:VBox id=”vb1″/>

</mx:Application>

Thanks & Regards,
R.Kasi Ruby