17 AUGUST 2009

Flex for Rails, how to collection

This post is work in progress.

Fixing the rails `to_xml` Method.

If you want to access XML Object you want to use the correct E4X syntax such rp.currentItem.asset_file_name and not rp.currentItem['asset_file_name']. If you debug your Flex code and trace an XML Object delivered from Rails you will see sth. like this:

  <elements type="array">
    <element>
      <asset-file-name>oberer-streifen-light-blue.png</asset-file-name>
      <id type="integer">1</id>
    </element>
  </elements>

Unfortunately you can not access the asset-file-name with the E4X rp.currentItem.asset-file-name syntax because Flex try’s to do a calculation (because of the “-”).

The solution is to fix the to_xml Method. We can accomplish that by adding a file to config/initializers called to_xml_fix.rb. The content of the file can be found here. What it does is simply overwrite the to_xml method with the same method but with an additional parameter: to_xml(:dasherize => false). Restart the server and BAM! It (should!) works just fine!

Call JavaScript Function within FLex Applications

A Simple way to call an JavaScript Function is to import the ExternalInterface ( liveDoc ) and call the javaScript function

  <mx:Script>
    <![CDATA[
      import flash.external.*;

      public function debug(message:String) : void{       
        if (ExternalInterface.available) {
          ExternalInterface.call('console.log', message);
        }
      }
    ]]>
  </mx:Script>

Basic HTTP requests from Flex to Rails

Call the Fuction listCompositions().

  private function handleShiftChanged(event:*):void{
    svcShiftsUpdate.url = 	"/schedules/" + scheduleId + "/shifts/" + event.shift.shiftId + '.xml' + 
    '?authenticity_token='+authenticityToken + 
    '&_method=PUT';

    var xmlParams:XML = XML('<shift>'+
      '<starts_at></starts_at>' +
      '<ends_at></ends_at>' +
      '<category_id>1</category_id>'+
      '</shift>');

    svcShiftsUpdate.method = 'POST';
    svcShiftsUpdate.headers = {X_HTTP_METHOD_OVERRIDE: 'PUT'};										

    svcShiftsUpdate.send(xmlParams);
    ShiftSequencer.reDrawShifts();	
  }			

private function handleShiftCreated(event:ShiftControllerEvent):void {
svcShiftsCreate.url = "/schedules/" + scheduleId + "/shifts.xml?authenticity_token="+authenticityToken;

var xmlParams:XML = XML('<shift>'+
'<starts_at>'+DateHelper.minutesToRubyDate(event.shift.startTime, event.shift.cwday, this.scheduleBop)+'</starts_at>' +
'<ends_at>'+DateHelper.minutesToRubyDate(event.shift.endTime, event.shift.cwday, this.scheduleBop)+'</ends_at>' +
'<category_id>'+1+'</category_id>'+
'</shift>');

svcShiftsCreate.send(xmlParams);
ShiftSequencer.reDrawShifts();
}

  <mx:HTTPService id="svcCompositionsList" 
      url="/editorial/compositions.xml" 
      resultFormat="e4x" 
      result="handleCompositionsListResult(event)" />

Controlling the Cursor

Use the buttonMode to get an “Hand” for the cursor.

  private function onMouseOver(event:MouseEvent):void {
  	currentElement.buttonMode = true;
  }
  private function onMouseOut(event:MouseEvent):void {
  	currentElement.buttonMode = false;
  }

Custom Events with Components

`Dialog.mxml`

  <?xml version="1.0" encoding="utf-8"?>     
  <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Metadata>
    [Event(name="changeColour", type="com.too_many_colours.events.DialogEvent")]
  </mx:Metadata>

  <mx:Script>
    <![CDATA[
      import flash.events.Event;
      import flash.events.EventDispatcher;
      import com.too_many_colours.events.DialogEvent;    		

      private function changeColour(event:MouseEvent):void{    			            	
        dispatchEvent(new DialogEvent( DialogEvent.CHANGE_COLOUR ));
      }
    ]]>
  </mx:Script>

  <mx:Button label="Change Colour" click="changeColour(event)" />

  </mx:TitleWindow>

`application.mxml`

  <?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="com.too_many_colours.components.*">
  	<mx:Script>
  		<![CDATA[  		  
  			import com.too_many_colours.components.Dialog;
        import mx.containers.TitleWindow;
        
        // import custom events
        import com.too_many_colours.events.DialogEvent;

  			private function changeColour(event:DialogEvent) : void {
  				debug(isChanged.toString())
  			}

  			private var dialogWindow:Dialog;
  			
  			private function showDialog():void {
  			  dialogWindow = Dialog(PopUpManager.createPopUp( this, Dialog , false));
  			  
  			  // add event listener
  				dialogWindow.addEventListener( DialogEvent.CHANGE_COLOUR, changeColour);					
        }
  		]]>
  	</mx:Script>
  </mx:Application>

`DialogEvent.as`

  package com.too_many_colours.events{
  	import flash.events.Event;

  	public class DialogEvent extends Event{
  		public static const CHANGE_COLOUR:String = "changeColour";

  		public function DialogEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false){
  			super(CHANGE_COLOUR, bubbles, cancelable);
  		}
  	}
  }

Passing a reference to the calling component.

The main MXML Document:

  [Bindable]
  public var currentElementId:String;
  
  private function onMouseUp(event:MouseEvent) : void {
		currentElementId = event.currentTarget.id		
		showDialog();
	}
  
  private function showDialog():void {
  	dialogWindow = Dialog(PopUpManager.createPopUp( this, Dialog , false));
  	dialogWindow.currentElementId = currentElementId; 
  }

The `dialogWindow` Component.

  <?xml version="1.0" encoding="utf-8"?>
  <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Script>
      <![CDATA[
      [Bindable]
      public var currentElementId:String;
      ]]>
    </mx:Script>
    <mx:Label text="{currentElementId}" />
  </mx:TitleWindow>

Reference: Passing a reference to the calling component

Using the Repeater component to display elements from XML object.

  <?xml version="1.0" encoding="utf-8"?>
  <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Script>
      <![CDATA[
      [Bindable]
			private var XMLBuendchenElements:XML = 
				<elements>
					<element>
						<pos-x>200</pos-x>
						<pos-y>300</pos-y>
						<name>body</name>
						<source>/images/dummys/buendchen.png</source>
						<scale-x>0.1</scale-x>
						<scale-y>0.1</scale-y>
					</element>
					<element>
						<pos-x>200</pos-x>
						<pos-y>300</pos-y>
						<name>body</name>
						<source>/images/dummys/buendchen-rot.png</source>
						<scale-x>0.1</scale-x>
						<scale-y>0.1</scale-y>
					</element>
				</elements>;
      ]]>
    </mx:Script>

    <mx:VBox>
    	<mx:Repeater id="rp" dataProvider="{XMLBuendchenElements.element}">
    		<mx:Image click="changeColour(event)" source="{String(rp.currentItem.source)}" scaleX="{String(rp.currentItem.scale-x)}" scaleY="{String(rp.currentItem.scale-y)}"  />    	
    	</mx:Repeater>
    </mx:VBox>
  </mx:TitleWindow>

Passing request data with flashVars properties.

How can i communicate between javascript and my FLEX app ?

One solution it to pass flashvars within the swfobject creation.

The Javascript

  var flashvars = {
    category: 2,      
  };
  
  var params = false;    
  var attributes = false;

  var width = '936';
  var height = '400';

  swfobject.embedSWF('/flash/design_studio.swf', 'flash_design_studio', width, height, '9.0.0', '/flash/expressInstall.swf', flashvars, params, attributes);

The Flex app:

  <?xml version="1.0" encoding="utf-8"?>
  <mx:Application 
  	xmlns:mx="http://www.adobe.com/2006/mxml"
  	initialize="{init()}"
  	viewSourceURL="srcview/index.html">
  	<mx:Script>
      <![CDATA[
        public var currentCategoryId:Number;
        private function init () : void {
        	// now you cann acces the flashvars:
        	currentCategoryId = Application.application.parameters.category;
        }
      ]]>
    </mx:Script>
 </mx:Application>

Thats it!

There are more possibility’s to communicate between javascript and flex, but thats one of the basics examples.

Ressources

Create a custom Loader to load Images from an XML list and add custom parameters (ex. ID of the image).

Long Headline but short solution:

The CustomImageLoader extends the Loader and accepts an image as XML.

CustomImageLoader.as

  package com.too_many_colours.loader{
  	import flash.display.Loader;

  	public class CustomImageLoader extends Loader {
  	    public var image:XML;

  	    public function CustomImageLoader(image:XML= null) {
  	            this.image = image;
  	    }
  	}
  }

Now you can simply use the CustomImageLoader as followed:

  var loader: CustomImageLoader = new CustomImageLoader(image);
  loader.load(new URLRequest( '/assets/elements/' + String(image.id)  + '/' + String(image.asset_file_name)));
  loader.image = "some xml data";
  loader.contentLoaderInfo.addEventListener(Event.COMPLETE, pngOnLoaded);

And access the additional Parameters in the handleImageLoaded function:

  private function handleImageLoaded(event:Event):void {
    // access the additional parameter:
  	var image:XML = (event.target.loader as CustomImageLoader).image;
  	
  	var element:Image = new Image();
  	element.id = image.id;
  	
  	// access the usual content
  	element.source = event.currentTarget.content				
  }

Ressources

ROLL_OVER vs MOUSE_OVER

from www.kirupa.com/forum

MOUSE_OVER will issue new rollover events for each child of a display object container containing multiple children. (ie: multiple buttons nested within a single container)

ROLL_OVER will issue only a single rollover event, regardless of the presence of multiple children within a display object container.
This essentially bypasses the advantages/(or defects, depending on your construction methods) of AS3 event propagation.
This might be useful for mitigating UI construction issues, with regard to default AS3 display list behaviors, but will probably require separate listeners for each button instance.
ie: 30 buttons would require 30 event listeners.
As far as I can see, this is essentially just a “kludge” that causes AS3 to act more like AS2.

For example:
Attaching a MOUSE_OVER event listener to “buttonGroup” will register new rollover events for each of the children of buttonGroup.
buttonGroup.addEventListener(MouseEvent.MOUSE_OVER , btnOver, false, 0, true);
//limit mouse events to children only, and enable hand-cursor
buttonGroup.mouseEnabled = false.
buttonGroup.buttonMode = true.
This allows a single listener to serve multiple nested children of the attached display object container.
ie: you construct your button movieclips; name the instances; wrap them in the “buttonGroup” container; attach a set of MOUSE_OVER/MOUSE_OUT/MOUSE_DOWN etc… listeners to “buttonGroup”.
This is a good thing, and leverages AS3 event propagation to its fullest potential.

With regard to the OP issue, the problem is rooted in your construction methods, IMO.
Using a Tweening class for button over/out tweens is easier to implement and far more flexible.
TweenLite/TweenMax, Tweener, or the built-in Tween class can be utilized to dramatically simplify your project.
ie:function btnOver(evt:MouseEvent):void{
//tween class methods here.
}

loading externel swf

private function handleCategoryElemetsFindResult(event:ResultEvent):void{
// loading an external swf
var loader:SWFLoader = new SWFLoader();
loader.addEventListener(Event.COMPLETE, onSwfLoaded);
loader.load(“/flash/hoodie/body.swf”);
test_atelier.addChild(loader);
loader.addEventListener(MouseEvent.CLICK, swfOnclick);
}

private function swfOnclick(event:Event):void{
new DebugMessage(‘asd’);
}

private function onSwfLoaded(event:Event):void{

test_atelier.addChild(event.currentTarget.content);
}

Simple draw example in flex

Important to note that you have to create an UIComponent and add the Shape to it. Than you
can add it to the stage…

  var materialColor:Shape = new Shape();				
  var uiComponent:UIComponent = new UIComponent();

  materialColor.graphics.clear();
  materialColor.graphics.beginFill(0x007AAB);
  materialColor.graphics.drawRoundRect(0, 0, 200, 200, 0, 0);
  materialColor.graphics.endFill();
  uiComponent.addChild(materialColor); 
  testatelier.addChild(uiComponent);

Complex Masking in flex

SVG ? nope, not working dynamicly !
http://www.adobe.com/devnet/flex/quickstart/embedding_assets/#EmbeddingSvgFiles

SWF ?
that works:

dynamicly and with eventlistener to!

// The jpg
var elementImage:Image = new Image();
elementImage.source = “/assets/materials/9/main-body.jpg”;
elementImage.cacheAsBitmap = true;

// the mask
var elementImageMask:Image = new Image();
elementImageMask.source = “/assets/elements/4/main-body-mask.png”;
elementImageMask.cacheAsBitmap = true;
elementImage.mask = elementImageMask;

addChild(elementImageMask);
addChild(elementImage);

elementImage.addEventListener(MouseEvent.MOUSE_OVER, function(event:MouseEvent):void{
var hittest = elementImage.mask.hitTestPoint(event.localX, event.localX, false);
new DebugMessage(hittest.toString());
});
elementImage.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);

// The jpg
var elementImage:Image = new Image();
elementImage.source = “/assets/materials/9/main-body.jpg”;
elementImage.cacheAsBitmap = true;

// the mask
var elementImageMask:SWFLoader = new SWFLoader()
elementImageMask.load(“/assets/elements/4/main-body-mask.png”);
elementImage.mask = elementImageMask;

addChild(elementImageMask);
addChild(elementImage);

Share
blog comments powered by Disqus

RSS-Feed

Subscribe in a reader

Featured Projects

2ManyColours Stoffshop

Magento powered fabric store for organic cotton
2ManyColours

Mass Customization Fashion Label from Germany
GameOne - MTV

Blog- and Community site for the first Game-TV-Show on MTV Germany.
MTVHome - MTV

MTV Home is one of MTV Microsite's wich runs on the new developed Rails-Microsite-Engine at MTV Germany.
ClubNick - MTV

Game-Based Learning Platform for kids.

Family & Friends

http://lottasaas.com

Modéliste . Creative Pattern Cutter
http://rubyphunk.com/

Rails Programmer
http://manuelmeurer.com/

Rails Programmer

Twitter

Please Enable your Javascript

Fixing the rails to_xml Method.

Call JavaScript Function within FLex Applications

Basic HTTP requests from Flex to Rails

Controlling the Cursor

Custom Events with Components

Dialog.mxml

application.mxml

DialogEvent.as

Passing a reference to the calling component.

The main MXML Document:

The dialogWindow Component.

Using the Repeater component to display elements from XML object.

Passing request data with flashVars properties.

The Javascript

The Flex app:

Ressources

Create a custom Loader to load Images from an XML list and add custom parameters (ex. ID of the image).

Ressources

ROLL_OVER vs MOUSE_OVER

loading externel swf

Simple draw example in flex

Complex Masking in flex

RSS-Feed

Featured Projects

Family & Friends

Twitter

Fixing the rails `to_xml` Method.

`Dialog.mxml`

`application.mxml`

`DialogEvent.as`

The `dialogWindow` Component.