Width and Height Setting for Dynamic Image in Flex

Most of flex developer are getting problem with Width and Height for Dynamic Image in Flex, while uploading images, they want the Object handler( Handle border) to take the image's width and height and it should not leave whitespaces but they are unable to do this.

Here is solution for Width and hight setting of dynamic image in flex,

after loading an image you can get its contentWidth and contentHeight, with this you then calculate the aspect ratio and resize your container accordingly so that there is no white space.
i.e

MyImg.addEventListener(Event.COMPLETE,UpdateContainer)

private function UpdateContainer(e:Event):void
   {
      var AspectRatio : Number = MyImg.contentWidth/MyImage.contentHeight;
      MyContainer.width = MyContainer.height*AspectRatio;

      MyImg.width = MyContainer.width;
      MyImg.height=MyContainer.height;
      MyContainer.addChild(MyImg);
   }
the assumption here is you are basing the container height as the fixed constant obviously you can set width as the fixed constant and adjust height by aspect ratio

Read more...

Mega-simple Drag and Drop for Flex 4 Group (Code Example)

My Flex developer Friends are you searching basic drag and drop example for a Flex 4 Group. 

there are lot many drag and drop examples on Google but they all are really complicated. The code is Just tie the startDrag and stopDrag to the mouseDown and mouseUp events. a  really basic, Click a Group and drag it around the Stage Code Whoa! So… this is crazy simple, maybe too simple to even have a code have a look

<s:Group xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:mx=”library://ns.adobe.com/flex/mx”

mouseDown=”this.startDrag();” mouseUp=”this.stopDrag();”>

<!– all your group stuff goes here //–>

</s:Group>

Hope This Might Helped you  in Some Way

Read more...

Flex Coding Help-Data Dependent decoratorClass in MobileIconItemRenderer Example

Some of my Flex developer friends are getting some problem in creating a list that has uses a MobileIconItemRenderer that has a decoratorClass that depends on the data here is a simple example which clears your every doubt and error

For Starting Create a new Mobile Flex Project, give it a name and click finish. Navigator to the default home view and add a list, dataprovider and a method that creates some dummy data:

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

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

        xmlns:s="library://ns.adobe.com/flex/spark"

        title="MobileIconItemRenderer" initialize="init()">

    <fx:Script>

        <![CDATA[

            import mx.collections.ArrayCollection;

            [Bindable]

            private var items:ArrayCollection;

           

            // Generate dummy data

            private function init():void

            {

                items = new ArrayCollection();

                var obj:Object;

  

                for( var i:int=0; i<10; i++ )

                {

                    obj = new Object();

                    obj.Name = "List item " + i;

                    obj.Description = "Description " + i;

                    obj.Status = i % 3;

                    items.addItem(obj);

                }

            }

  

        ]]>

    </fx:Script>

   

    <s:List id="myList" dataProvider="{items}" labelField="Name"

            width="100%" height="100%" itemRenderer="views.ListItemRenderer"/>

</s:View>

First create an assets package and add three icons to it, you can find the icons here.

You can see that the list uses an itemRenderer, create it by creating a new MXML component that’s based on MobileIconItemRenderer in the views package, name it ListItemRenderer. Add the following code to it:

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

<s:MobileIconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:s="library://ns.adobe.com/flex/spark"

                          messageField="Description">

    <fx:Script>

        <![CDATA[

            // Embed "Done" icon

            [Embed(source="assets/done.png")]

            private var iconDone:Class;


            // Embed "Open" icon

            [Embed(source="assets/open.png")]

            private var iconOpen:Class;

            // Embed "Progress" icon

            [Embed(source="assets/progress.png")]

            private var iconInProgress:Class;
           
            // Set decoratorClass depending on status

            override public function set data(value:Object):void
            { 

                if(value != null) 

                { 

                    super.data = value;
                    var status:int  = value.Status;

                    var icon:Class;

                    switch(status){

                        case 0:

                            icon = iconOpen;

                            break;

                        case 1:

                            icon = iconInProgress;

                            break;

                        case 2:

                            icon = iconDone;

                            break;

                    }

                    this.decoratorClass = icon;
                }

             }
        ]]>
     </fx:Script>

</s:MobileIconItemRenderer>

View Source

Read more...