Dynamically loading data in Data Grid (Flex)

Flex File

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" color="#4B5C60" borderColor="#667179" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#5F5E5E, #524D4D]" creationComplete="sendfile.send();">
   
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.controls.Alert;
            import mx.collections.XMLListCollection;
            import mx.rpc.events.ResultEvent;
       
        [Bindable]   
        public var datastore:XML;
          [Bindable]
        public var     datacollection:XMLList;
        private var alert:Alert;
        private var coll:Array;

   
    public function retrievedata(event:ResultEvent):void
   
    {
           
     datastore=new XML(event.result);
     datacollection=datastore.datas;
    
     }
        
    private function finderror(event:FaultEvent):void
       
         {
                var title:String = event.type + " (" + event.fault.faultCode + ")";
                var text:String = event.fault.faultString;
                 alert = Alert.show(text, title);
                datacollection.removeAll();
            }
           
 public function checking():void
 {
      Alert.show(datacollection.length());
 }

    public function alertdescription():void
    {
        Alert.show(dataprovider.selectedItem.description);
       
    }
        
        ]]>
    </mx:Script>
   
   
    <mx:HTTPService id="sendfile" url="assets/xmlfile/empdatas.xml" result="retrievedata(event)" resultFormat="e4x"/>

    <mx:DataGrid x="106" y="272" width="682" height="284" id="dataprovider" dataProvider="{datacollection}" change="alertdescription()">
        <mx:columns>

            <mx:DataGridColumn headerText="ID Number" dataField="id" />
            <mx:DataGridColumn headerText="Name" dataField="name"/>
            <mx:DataGridColumn headerText="Designation" dataField="Designation"/>
            <mx:DataGridColumn headerText="Address1" dataField="padress"/>
            <mx:DataGridColumn headerText="Address2" dataField="tadress"/>
           
        </mx:columns>
       
    </mx:DataGrid>
   
    <mx:Button x="106" y="129" label="Data Count" width="100" height="30" click="checking();"/>

   
</mx:Application>

XML File

empdatas.xml

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

<overalldata>

<datas>

<id>121</id>

<name>kaniskar</name>

<Designation>Webdesigner</Designation>

<padress>Tuticorin</padress>

<tadress>chennai</tadress>

<description>He is working in chennai. He is a webdesigner</description>

</datas>

<datas>

<id>122</id>

<name>Allwin</name>

<Designation>Marketing</Designation>

<padress>Tuticorin</padress>

<tadress>Chennai</tadress>

<description>He is a Marketing person. Now he is in chennai. </description>

</datas>

<datas>

<id>123</id>

<name>Goodwin</name>

<Designation>Software engineer</Designation>

<padress>Madurai</padress>

<tadress>Bangalore</tadress>

<description>He was engineer in MNC. He is a Senior Developer </description>

</datas>

<datas>

<id>124</id>

<name>Thanabalan</name>

<Designation>Businesman</Designation>

<padress>Tuticorin</padress>

<tadress>Tuticorin</tadress>

<description>He is a big Business man in Kommadikottai. </description>

</datas>

<datas>

<id>125</id>

<name>Raja</name>

<Designation>Software</Designation>

<padress>Chennai</padress>

<tadress>Bangalore</tadress>

<description>He was engineer in MNC. He is a Senior Developer </description>

</datas>

<datas>

<id>126</id>

<name>Arasu</name>

<Designation>PHP Developer</Designation>

<padress>Madurai</padress>

<tadress>Meenakshi Temple Street</tadress>

<description>He is working as a PHP Developer. Now He is working in  madurai</description>

</datas>

<datas>

<id>127</id>

<name>Boopathi</name>

<Designation>Teacher</Designation>

<padress>Rameshwaram</padress>

<tadress>Temple Street,</tadress>

<description>Now he is in chennai. He is searching another job </description>

</datas>

</overalldata>

 Your file keep in this format

Output

HTTP Service (Flex)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="servicesender.send();">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.FaultEvent;
            import mx.controls.Alert;
            import mx.rpc.events.ResultEvent;
           
            private var arr:XML;
            private var arrall:XMLList=new XMLList();
           
            private function resudata(evt:ResultEvent):void
           
            {
             arr=new XML(evt.result);
             arrall=arr.empdetail;
            }
           
            private function faultservice(evt:FaultEvent):void
            {
            Alert.show(evt.fault.faultString);
            }
           
            private function count():void
            {
             Alert.show(arrall.length());
           
             }
        ]]>
    </mx:Script>
   
   
    <mx:HTTPService id="servicesender" resultFormat="e4x" url="assets/emp.xml" result="resudata(event);" fault="faultservice(event);"/>
    <mx:Button width="252" height="108" click="count();" label="XML File Length" x="467.5" y="281" fontSize="20"/>
   
</mx:Application>

XML File

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

<empdetail>
<companyname>ABC</companyname>
<companysubname>Technology1</companysubname>
<name>kaniskar</name>
<id>000001</id>
<bloodgroup>B+</bloodgroup>
<description>Sample</description>
</empdetail>

<empdetail>
<companyname>DEF</companyname>
<companysubname>Technology2</companysubname>
<name>kaniskar</name>
<id>000001</id>
<bloodgroup>B+</bloodgroup>
<description>Sample1</description>
</empdetail>

<empdetail>
<companyname>GHI</companyname>
<companysubname>Technology3</companysubname>
<name>kaniskar</name>
<id>000001</id>
<bloodgroup>B+</bloodgroup>
<description>Sample2</description>
</empdetail>

<empdetail>
<companyname>JKL</companyname>
<companysubname>Technology4</companysubname>
<name>kaniskar</name>
<id>000001</id>
<bloodgroup>B+</bloodgroup>
<description>Sample3</description>
</empdetail>

<empdetail>
<companyname>MNO</companyname>
<companysubname>Technology5</companysubname>
<name>kaniskar</name>
<id>000001</id>
<bloodgroup>B+</bloodgroup>
<description>Sample4</description>
</empdetail>

<empdetail>
<companyname>Solvedge</companyname>
<companysubname>Enabling Technology</companysubname>
<name>kaniskar</name>
<id>000001</id>
<bloodgroup>B+</bloodgroup>
<description>jksdkjfhksdjhfkjshfkjhsjkdfhsjkdfhjkshdfjkhsdfjkhsdfhsjkdfhksjh</description>
</empdetail>


</employee>

Your File Keep in this format

Output

Image Drag (Flex)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#494747, #494747]" creationComplete="servicelis.send();">
<mx:Script>
    <![CDATA[
        import mx.core.UIComponent;
        import mx.events.DragEvent;
        import mx.containers.Panel;
        import mx.containers.Canvas;
        import mx.managers.DragManager;
        import mx.core.DragSource;
        import mx.controls.Image;
        import mx.controls.Alert;
        import mx.collections.ArrayCollection;
        import mx.rpc.events.ResultEvent;
       
        [Bindable]
        private var allimage:ArrayCollection=new ArrayCollection();
       
        private var newimg:Image;
        public var val:String=new String();
        private var deleteobj:Object=new Object();
        private var imglod:String;
        private function imageretrive(evt:ResultEvent):void
        {
            allimage=evt.result.imagelist.image;
        }
        private function callxml(xmlfile:String):void
        {
              servicelis.url=xmlfile;
              servicelis.send();
        }
       
        public function dodrag(evt:MouseEvent):void
        {
            var img:Image=evt.currentTarget as Image;
               /* var neimage:Image=new Image();
             neimage.source=img.source; */  
            var dodrg:DragSource=new DragSource();
            dodrg.addData(img, 'img');
            DragManager.doDrag(img,dodrg,evt);
            imglod=(evt.currentTarget as Image).source.toString();
           
           
        }
       
        private function dragAccept(event:DragEvent):void
       
        {
          var dropTarget:Canvas = event.currentTarget as Canvas;
          DragManager.acceptDragDrop(dropTarget);
        }
       
        private function dropimg(evt:DragEvent):void
        {
         newimg=new Image(); 
         can.addChild(newimg);
         newimg.source=imglod;
         newimg.x=can.mouseX;
         newimg.y=can.mouseY;
         newimg.name=val;
         newimg.addEventListener(MouseEvent.MOUSE_DOWN, startmove);
         newimg.addEventListener(MouseEvent.MOUSE_UP, stopmove);
         newimg.addEventListener(MouseEvent.CLICK, takeimage);
       
        }
        private function takeimage(evt:Event):void
        {
            deleteobj=evt.currentTarget as Image;
        }
       
        private function startmove(evt:MouseEvent):void
        {
            (evt.currentTarget as Image).startDrag();
        }
        private function stopmove(evt:MouseEvent):void
        {
            (evt.currentTarget as Image).stopDrag();
        }
   
        private function check():void
       
        {
            Alert.show(allimage.length.toString());
           
        }
       
        private function del(evt:Event):void
        {
       can.removeChild(deleteobj as Image);
        }
       
    ]]>
</mx:Script>

<mx:HTTPService id="servicelis" url="assets/imagelist.xml" result="imageretrive(event)"/>

       
   
    <mx:Canvas x="14" y="418" width="820" height="127" borderColor="#494B4C" backgroundColor="#8E8C8C">
        <mx:TileList x="6" y="6" dataProvider="{allimage}" itemRenderer="imgfile" labelField="title" width="809" height="116" backgroundColor="#8E8C8C">
       
        </mx:TileList>
    </mx:Canvas>

    <mx:Canvas x="14" y="23" width="820" id="can" height="377" dragEnter="dragAccept(event);" dragDrop="dropimg(event);" borderStyle="solid" borderColor="#8b8b8b" borderThickness="3" backgroundColor="#ffffff">
        <mx:Button width="50" height="30" click="check();" x="764" y="341">
           
        </mx:Button>
    </mx:Canvas>
    <mx:Panel x="838" y="23" width="166" height="522" layout="absolute">
        <mx:Button x="20" y="40" label="Natural" width="98" click="callxml('assets/imagelist.xml')"/>
        <mx:Button x="20" y="80" label="Animals " width="98" click="callxml('assets/imagelist1.xml')"/>
        <mx:Button x="20" y="120" label="Baby " width="98" click="callxml('assets/imagelist2.xml')"/>
        <mx:Button x="20" y="160" label="Delete " width="98" click="del(event);"/>
    </mx:Panel>
</mx:Application>

XML File

imagelist.xml 

<?xml version="1.0" encoding="iso-8859-1"?>
<imagelist>

<image>
<tiltle>Image1</tiltle>
<srcim>assets/images/img1.jpg</srcim>
</image>

<image>
<tiltle>Image2</tiltle>
<srcim>assets/images/img2.jpg</srcim>
</image>

<image>
<tiltle>Image3</tiltle>
<srcim>assets/images/img3.jpg</srcim>
</image>


<image>
<tiltle>Image4</tiltle>
<srcim>assets/images/img4.jpg</srcim>
</image>

<image>
<tiltle>Image5</tiltle>
<srcim>assets/images/img5.jpg</srcim>
</image>

<image>
<tiltle>Image3</tiltle>
<srcim>assets/images/img6.jpg</srcim>
</image>
<image>
<tiltle>Image4</tiltle>
<srcim>assets/images/img7.jpg</srcim>
</image>

</imagelist>

imagelist1.xml 

<?xml version="1.0" encoding="iso-8859-1"?>
<imagelist>

<image>
<tiltle>Image1</tiltle>
<srcim>assets/images/img11.jpg</srcim>
</image>

<image>
<tiltle>Image2</tiltle>
<srcim>assets/images/img21.jpg</srcim>
</image>

<image>
<tiltle>Image3</tiltle>
<srcim>assets/images/img31.jpg</srcim>
</image>


<image>
<tiltle>Image4</tiltle>
<srcim>assets/images/img41.jpg</srcim>
</image>


<image>
<tiltle>Image5</tiltle>
<srcim>assets/images/img51.jpg</srcim>
</image>

<image>
<tiltle>Image3</tiltle>
<srcim>assets/images/img61.jpg</srcim>
</image>


<image>
<tiltle>Image4</tiltle>
<srcim>assets/images/img71.jpg</srcim>
</image>

</imagelist>

imagelist2.xml 

<?xml version="1.0" encoding="iso-8859-1"?>
<imagelist>

<image>
<tiltle>Image1</tiltle>
<srcim>assets/images/img12.jpg</srcim>
</image>

<image>
<tiltle>Image2</tiltle>
<srcim>assets/images/img22.jpg</srcim>
</image>

<image>
<tiltle>Image3</tiltle>
<srcim>assets/images/img32.jpg</srcim>
</image>


<image>
<tiltle>Image4</tiltle>
<srcim>assets/images/img42.jpg</srcim>
</image>


<image>
<tiltle>Image5</tiltle>
<srcim>assets/images/img52.jpg</srcim>
</image>

<image>
<tiltle>Image3</tiltle>
<srcim>assets/images/img62.jpg</srcim>
</image>


<image>
<tiltle>Image4</tiltle>
<srcim>assets/images/img72.jpg</srcim>
</image>



</imagelist>

Your File Keep this Format

Out put

Video player(Flex)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#4E4D4D, #4E4D4D]" creationComplete="sendreques.send();" height="932" >
<mx:Script>
    <![CDATA[
        import mx.events.VideoEvent;
        import mx.rpc.events.ResultEvent;
        import mx.collections.ArrayCollection;
       
        [Bindable]
        public var arraycolle:ArrayCollection=new ArrayCollection();
       
        public function collectionvideo(evt:ResultEvent):void
        {
            arraycolle=evt.result.videolist.video;
        }
        public function selectflvfile(evt:Event):void
        {
            displayimg.source="assets/"+ evt.target.selectedItem.src;
        }
        public function playflim():void
        {
            displayimg.play();
        }
       
        public function pauseflim():void
        {
            displayimg.pause();
        }
       
     public function videoDisplay_playheadUpdate():void{
    prograssimg.setProgress(displayimg.playheadTime, displayimg.totalTime);
}
  ]]>
</mx:Script>

<mx:HTTPService id="sendreques" url="assets/vidiofile.xml" result="collectionvideo(event);"/>
   <mx:Panel x="918" y="28" width="250" height="747" layout="absolute">
   
        <mx:TileList x="25" itemClick="selectflvfile(event);" y="10" id="tileimage" dataProvider="{arraycolle}" labelField="book" width="185" height="668">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Image source="{data.book}" width="150" height="150"/>
            </mx:Component>
        </mx:itemRenderer>
        </mx:TileList>
    </mx:Panel>
    <mx:Panel x="27" y="28" width="848" height="747" layout="absolute" backgroundColor="#161515">
<mx:Image source="assets/images/req7nqmi.jpg" width="807" height="705"/>
        <mx:VideoDisplay  x="179.5" y="10" width="584" height="286" id="displayimg" playheadUpdate="videoDisplay_playheadUpdate()"/>
        <mx:Panel x="107" y="624" width="563" height="73" layout="absolute" backgroundColor="#D4CECE">
            <mx:Button x="10" y="6" label="Play" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#E0DFDF, #D5D5D5, #CACACA, #595757]" borderColor="#808181" themeColor="#868788" width="64" click="playflim();"/>
            <mx:Button x="468" y="6" label="Pause" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#E0DFDF, #D5D5D5, #CACACA, #595757]" borderColor="#808181" themeColor="#868788" click="pauseflim();"/>
            <mx:ProgressBar x="89.75" y="16" mode="manual" label=" " id="prograssimg" width="363.5" height="13"/>
    </mx:Panel>
   
    </mx:Panel>
</mx:Application>

XML File

<?xml version="1.0" encoding="utf-8"?>
<videolist>
<video>
<src>Animal_Face_Off_Anaconda_vs._Jaguar.flv</src>
<title>Billie Jean</title>
<book>assets/images/book_1.jpg</book>
</video>
<video>
<src>Spy_vs_Spy_-_Defection.flv</src>
<title>Smooth Criminal</title>
<book>assets/images/image_po.jpg</book>
</video>
<video>
<src>flowplayer.flv</src>
<title>Dangerous</title>
<book>assets/images/image_eye.jpg</book>
</video>
<video>
<src>Spy_vs_Spy_-_Defection.flv</src>
<title>Dangerous</title>
<book>assets/images/book_1.jpg</book>
</video>
<video>   
<src>puzzle.flv</src>
<title>Dangerous</title>
<book>assets/images/book_1.jpg</book>
</video>
<video>
<src>Animal_Face_Off_Anaconda_vs._Jaguar.flv</src>
<title>Dangerous</title>
<book>assets/images/book_1.jpg</book>
</video>
</videolist>

Notes:

Your Icon images and FLV files keep in this format

           

Output:

Text Effects in CSS 3 (Web Design)(Support only Firefox and safari 3)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
      ul {
        background:#404242;
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                    
      }
     li{
        color: white;               
        background: #808686;          
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px;
        list-style: none            
                                   
      }
      li.withborder {
        border-style:double;
        border-width: medium;       
        border-color:lime;
      }
      .text_shadow {

        color: #fff;

        background-color: #808686;

        text-shadow: 1px 1px 1px #ddccb5;

        font-size: 15px;

        }

    </STYLE>
  </HEAD>
  <BODY style="width:300px;">
<div class="text_shadow">
    <UL>
      <LI><b>Example of margins, padding, and borders</b>
      <LI class="withborder"><b>Note that:</b><br>
  * The margins of the LI boxes are transparent — margins are always transparent — so the background color (yellow) of the UL padding and content areas shines through them.
    <br>* The second LI element specifies a dashed border (the 'border-style' property).
    </UL>
</div>
  </BODY>
</HTML>

Output:-

Margins, padding, and borders(Web Design CSS)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
      ul {

        background:#404242;

        margin: 12px 12px 12px 12px;

        padding: 3px 3px 3px 3px;

                                    

      }

     li{

        color: white;               

        background: #808686;          

        margin: 12px 12px 12px 12px;

        padding: 12px 0px 12px 12px;

        list-style: none            

                                   

      }

      li.withborder {

        border-style:double;

        border-width: medium;       

        border-color:lime;

      }

    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI><b>Example of margins, padding, and borders</b>
      <LI class="withborder"><b>Note that:</b><br>

   <br> * The content width for each LI box is calculated top-down; the containing block for each LI box is established by the UL element.
    <br>* The margin box height of each LI box depends on its content height, plus top and bottom padding, borders, and margins. Note that vertical margins between the LI boxes collapse.
    <br>* The right padding of the LI boxes has been set to zero width (the 'padding' property). The effect is apparent in the second illustration.
    <br>* The margins of the LI boxes are transparent — margins are always transparent — so the background color (yellow) of the UL padding and content areas shines through them.
    <br>* The second LI element specifies a dashed border (the 'border-style' property).
    </UL>
  </BODY>
</HTML>

Output:-

About me

Hi This is kaniskar Goodwin. Just i am sharing about flex, flash and  webdesign concept.