R – Thumbnails for mxml components in Flex

actionscript-3apache-flexflex3mxmlthumbnails

Is it possible to make some kind of 'dynamic' thumbnails for mxml components which I'm using in my application? By 'dynamic' I mean if I change some layout in mxml component, my thumbnail refreshes according to new layout without any screen capturing, photoshoping or similar =)

Edit:
I am using a FlexBook component, which makes a 'book' of mxml components (because each page has many independent interactions). I think that problem could be that bitmap data does not exist until I actually start to turn pages. But I would like to get bitmap data on creation complete.

Thanks!

Ok, let me try to explain little more because I see this is more complicated than I thought it will be..

I am using a FlexBook component, which makes a 'book' of mxml components (because each page has many independent interactions). I think that problem could be that bitmap data does not exist until I actually start to turn pages. But I would like to get bitmap data on creation complete…

Thanks for help!
m.

Best Answer

Here is a function I coded long time ago. It takes a DisplayObject(mxml components are DisplayObject too), it will return a Bitmap of it.

You may write a handler to listen for Event.RENDER of the mxml component to update the Bitmap when the component is changed.

Another thing you can try on the FlexBook component is to set creationPolicy="all"...

/**
 * This function returns a Bitmap that have the same look of a given DisplayObject.
 * Ref.: http://qops.blogspot.com/2008/05/bitmap.html
 * @author Andy Li andy@onthewings.net
 * @version 20080529
 */
package net.onthewings{
    import flash.geom.Point;
    import flash.geom.Rectangle;
    import flash.geom.Matrix;
    import flash.display.DisplayObject;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.PixelSnapping;
    import flash.display.Stage;

    public function bitmapEquivalentOf(obj:DisplayObject, extendsRectSidesBy:Number = 0, clipOutside = null,alpha:Boolean = true):Bitmap {
        if (obj.width && obj.height) {
            var bitmapData:BitmapData = new BitmapData(obj.width, obj.height, alpha, 0xFFFFFF);
            var rect:Rectangle = obj.getBounds(obj);
            var matrix:Matrix = new Matrix;
            matrix.translate(-rect.x, -rect.y);
            bitmapData.draw(obj, matrix);
            var bitmap:Bitmap = new Bitmap(bitmapData, PixelSnapping.AUTO, true);
            bitmap.x = rect.x;
            bitmap.y = rect.y;
            var ebd:BitmapData;

            if (clipOutside) {
                var h:Number;
                var w:Number;
                if (clipOutside is Stage) {
                    h = clipOutside.stageHeight;
                    w = clipOutside.stageWidth;
                } else {
                    h = clipOutside.height;
                    w = clipOutside.width;
                }
                if(!(h && w)){
                    return null;
                }
                var pt:Point = obj.localToGlobal(new Point(rect.x,rect.y));
                ebd = new BitmapData(w, h, true, 0xFFFFFF);
                ebd.copyPixels(bitmap.bitmapData,new Rectangle(-pt.x,-pt.y,w,h),new Point(0,0));
                bitmap =  new Bitmap(ebd, PixelSnapping.AUTO, true);
            } else if (extendsRectSidesBy) {
                ebd = new BitmapData(bitmapData.width+extendsRectSidesBy*2, bitmapData.height+extendsRectSidesBy*2, true, 0xFFFFFF);
                ebd.copyPixels(bitmap.bitmapData,bitmap.bitmapData.rect,new Point(extendsRectSidesBy,extendsRectSidesBy));
                bitmap =  new Bitmap(ebd, PixelSnapping.AUTO, true);
                bitmap.x = rect.x - extendsRectSidesBy;
                bitmap.y = rect.y - extendsRectSidesBy;
            }
            return bitmap;
        } else {
            return null;
        }
    }
}

Related Solutions

Possible to use Flex Framework/Components without using MXML

I did a simple bootstrap similar to Borek (see below). I would love to get rid of the mxml file, but if I don't have it, I don't get any of the standard themes that come with Flex (haloclassic.swc, etc). Does anybody know how to do what Theo suggests and still have the standard themes applied?

Here's my simplified bootstrapping method:

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<custom:ApplicationClass xmlns:custom="components.*"/>

ApplicationClass.as

package components {
    import mx.core.Application;
    import mx.events.FlexEvent;
    import flash.events.MouseEvent;
    import mx.controls.Alert;
    import mx.controls.Button;

    public class ApplicationClass extends Application {
        public function ApplicationClass () {
            addEventListener (FlexEvent.CREATION_COMPLETE, handleComplete);
        }
        private function handleComplete( event : FlexEvent ) : void {
            var button : Button = new Button();
            button.label = "My favorite button";
            button.styleName="halo"
            button.addEventListener(MouseEvent.CLICK, handleClick);
            addChild( button );
        }
        private function handleClick(e:MouseEvent):void {
            Alert.show("You clicked on the button!", "Clickity");
        }
    }
}

Here are the necessary updates to use it with Flex 4:

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<local:MyApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:local="components.*" />

MyApplication.as

package components {
    import flash.events.MouseEvent;
    import mx.controls.Alert;
    import mx.events.FlexEvent;
    import spark.components.Application;
    import spark.components.Button;

    public class MyApplication extends Application {
        public function MyApplication() {
              addEventListener(FlexEvent.CREATION_COMPLETE, creationHandler);
        }
        private function creationHandler(e:FlexEvent):void {
            var button : Button = new Button();
            button.label = "My favorite button";
            button.styleName="halo"
            button.addEventListener(MouseEvent.CLICK, handleClick);
            addElement( button );
        }
        private function handleClick(e:MouseEvent):void {
            Alert.show("You clicked it!", "Clickity!");
        }
    }
}

Flex: Accessing functions / components accross mxml pages

You could write a custom method that handles the button click events and raises a custom event. Then in form.mxml you can handle that event.

Splitting it up like this is a bit cleaner, as it makes the button.mxml file work on its own. Having Button.mxml have a direct reference to your form causes a tight-coupling between the two, and generally you should avoid tight-coupling.

EDIT: I just had another thought that also avoids tight-coupling and is a bit simpler:

form.mxml

<custom:SelectView dSource="{_thedata}" id="form" visible="{buttons.showForm}">
</custom:SelectView>

<!-- include your buttons.mxml component using an ID of "buttons" -->

buttons.mxml

<mx:Script>
<![CDATA[
    [Bindable] public var showForm:Boolean = true;
]]>
</mx:Script>

<mx:LinkButton label="Show" id="lbShow" click="this.showForm=true;">
<mx:LinkButton label="Hide" id="lbHide" click="this.showForm=false;">

This essentially emulates using a custom event by using variable binding. Any time the showForm variable in buttons changes the visible property of the SelectView will be updated via the bindings. This is lighter-weight than creating a custom event (though I think custom events are a bit better of a design for it).

Best Answer

Related Solutions

Possible to use Flex Framework/Components without using MXML

Flex: Accessing functions / components accross mxml pages

Related Topic