Same source code for different plateforms using Haxe - Flash / JavaScript component sample

19.04.2008 5804 2

Button.hx :

#if js
import js.Dom;
typedef DisplayObject = HtmlDom;
#else flash
import flash.display.Loader;
import flash.net.URLRequest;
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
typedef DisplayObject = Sprite;
#end

typedef State = { view : String, func : Dynamic };

class FButton
{
    public var target    : DisplayObject;
    public var up        : State;
    public var over        : State;
    public var down        : State;
    #if js
    public var img        : HtmlDom;
    #else flash
    public var loader    : Loader;
    public var img        : Bitmap;
    #end
    
    public function new ( target : DisplayObject, up : State, over : State, down : State )
    {
        this.target = target;
        this.up = up;
        this.over = over;
        this.down = down;
                
        #if js
        target.style.display = "inline";
        target.style.position = "absolute";
        target.onmouseup = goOver;
        target.onmouseout = goUp;
        target.onmouseover = goOver;
        target.onmousedown = goDown;
        img = js.Lib.document.createElement( "img" );
        target.appendChild( img );
        #else flash
        target.addEventListener( MouseEvent.MOUSE_UP, goOver );
        target.addEventListener( MouseEvent.MOUSE_OUT, goUp );
        target.addEventListener( MouseEvent.MOUSE_OVER, goOver );
        target.addEventListener( MouseEvent.MOUSE_DOWN, goDown );
        #end
        
        goUp();
    }
    
    function goUp( ?event )
    {
        #if js
        img.setAttribute( "src", up.view );
        #else flash
        load( up.view );
        #end
        if ( up.func != null )
            up.func();
    }
    
    function goOver( ?event )
    {    
        #if js
        img.setAttribute( "src", over.view );
        #else flash
        load( over.view );
        #end
        if ( over.func != null )
            over.func();
    }
    
    function goDown( ?event )
    {
        #if js
        img.setAttribute( "src", down.view );
        #else flash
        load( down.view );
        #end
        if ( down.func != null )
            down.func();
    }
    
    #if flash
    function load( url : String )
    {
        loader = new Loader();
        loader.contentLoaderInfo.addEventListener( Event.COMPLETE, onLoadPicture );
        loader.load( new URLRequest( url ) );
    }
    
    function onLoadPicture( e )
    {
        if ( img != null && target.contains( img ) )
            target.removeChild( img );
        img = e.target.loader.content;
        target.addChild( img );
    }
    #end
}

Using the Button for Flash9 :

var sprite = new Sprite();
flash.Lib.current.addChild( sprite );
var b = new FButton( sprite, { view : "up.png", func : null }, { view : "over.png", func : null }, { view : "down.png", func : function() { trace( "pressed" ); } } );

Using the Button for JavaScript :

var sprite = js.Lib.document.createElement( "div" );
js.Lib.document.body.appendChild( sprite );
var b = new FButton( sprite, { view : "up.png", func : null }, { view : "over.png", func : null }, { view : "down.png", func : function() { trace( "pressed" ); } } );

The samples below uses FEffect library for Haxe that includes a tweening class for Flash and JavaScript :
See the Flash Result here
See the JavaScript Result here
Download the source code here

Commentaires

18.04.2008 à 10:08 Pasteurized

Very useful !
Helps a lot for coding, that's the power of Haxe !

18.04.2008 à 11:33 Franco Ponticelli

Nice idea. It would be wonderful having a fully functional Ext like framework (www.extjs.com) that works the same on Flash/JS

Laisser un commentaire

http://
×