Archive

Archive for the ‘tips & tricks’ Category

Using Illustrator, Flash Catalyst and Flash Builder to create an avatar widget

February 6th, 2010 1 comment

bmw_z1Since I have a little more spare time now … I decided to hack a little bit :) . Avatar is the new hype nowadays :) and I wanted to understand how simple (or how complicated) will be to build an avatar widget. So I gave it a try, but instead of a Na’vi avatar, I decided to apply some artwork on top of an BMW Z1 :) .

I’ve made a video with my little workflow that you can watch it here (I couldn’t believe how easy it was).

You can also see the running demo (and download the source files) here.

The infamous Error #2044: Unhandled StatusEvent:. level=error, code= on LocalConnection

July 24th, 2009 1 comment

This is a blog post to all that was almost to throw their computers out of the window because they got "Error #2044: Unhandled StatusEvent:. level=error, code=" trying to communicate through LocalConnection.

So I am trying to send a message from a Flex application running in Flash Player to an AIR application. In the AIR application (called testAIR) I have something like:

private function initApp():void {
	var inbound:LocalConnection = new LocalConnection();
	//only allow connections from localhost
	inbound.allowDomain("localhost");
	inbound.client = new Object();
	//this is the function that will be called by the Browser App
	inbound.client.notifyPayment = function test():void {
		Alert.show("HERE");
	};
	inbound.connect("paymentSample");
}

pretty straightforward, right from the book.

In the Flex app I just do:

outbound.connect("paymentSample");
outbound.send("app#testAIR:paymentSample","notifyPayment");
outbound.close();

You might think that this should work. Well … NOT.  This is because in the AIR app the inbound LocalConnection is a variable that is declared in the local scope of a method. Now I was expecting that when I call  the connect method the inbound object will be referenced by another object (some LocalConnection manager, or event handler) and it will not get garbage collected after the method ends. Well, apparently is not the case. Either there is a bug in AIR, either this reference is a weak reference so it gets garbage collected. This means that by the time you try to send the message from Flash Player your inbound object is long gone!

The resolution is quite simple. You just need to reference the inbound object somewhere else, making him a member of class or something. In my case I just declare it as a private variable inside my MXML component:

private var inbound:LocalConnection = new LocalConnection();

private function initApp():void {
	//only allow connections from localhost
	inbound.allowDomain("localhost");
       ....

Hope this will help someone :)

Categories: Flash Player 10, flex, tips & tricks Tags:

Debug Flex and PHP using Flash Builder 4 and PDT

July 9th, 2009 4 comments

It took me more that I would have liked but here’s a screencast on how to debug flex and php applications using Flash Builder 4 and PDT.

 

Playing with Custom Layout in Flex 4

May 29th, 2009 9 comments

gumboListAs Flex 4 SDK is almost in it’s Beta state I took a look at his features and what impressed me the most was how the presentation is decoupled from the behavior. I remember a presentation around Max 2007 when Ely Greenfield, the principal scientist for Flex SDK, showed a sneak peek on how this will make a lot of skinning things a lot simpler. For example, it’s simple to make a list look … let’s say to make it look like the Fan effect that Mac users love so much :)

I found this quite easy to implement using Flex 4. Because the list can be skinned in MXML it’s so easy to program the skin and stay in MXML for the most part. The only thing that I actually needed to program was how the elements are laid out.

The basic List skin looks like this:

<s:states>
    <s:State name="normal"/>
    <s:State name="hover"/>
    <s:State name="disabled"/>
</s:states>

<fx:Metadata>[HostComponent("spark.components.List")]</fx:Metadata>
<s:DataGroup itemRenderer="components.RepeatedItem1"
        clipAndEnableScrolling="true"  id="dataGroup"
        rollOver="currentState='hover'">
    <s:layout>
        <components:LargeCircleLayout id="myLayout" radius="1400"
            stepAngle="0" stepAngle.hover="3.5"/>
    </s:layout>
</s:DataGroup> 

Notice that it’s nothing but a DataGroup that has a layout. I’ve also added the Hover state to be able to open the list when you hover over it.

To add the nice effect it’s just a matter of animating one layout property:

<s:transitions>
    <s:Transition autoReverse="true">
        <s:Animate target="{myLayout}" duration="200">
            <s:SimpleMotionPath property="stepAngle"/>
        </s:Animate>
    </s:Transition>
</s:transitions>

You can take a look at the source code here and watch the list here.

Categories: flex, ria, tips & tricks Tags:

Adding Desktop functionality to Web Applications (My MAX Milan DW + AIR sample)

December 10th, 2008 Comments off

One of my MAX Milan session was on how you develop AIR applications using Dreamweaver CS4. During this talk I’ve took a web application (actually I copy paste a sample of using the MSN Messenger JavaScript API) and add it some Desktop capabilities. So the little sample AIR MSN messenger now display notification when your friends will change their status message. The notification library I used is as3notificationlib done by Christian Cantrell so you can see how easy is to call Flash code from JavaScript inside the AIR runtime.

You can also test the msg.html (sandbox/msg.html) file inside a browser (doesn’t seems to work on Mozilla, or on my Mozilla). The code that pushes the notification in AIR is located at line 204 and is the only modification that I’ve done to the original MSN Messenger sample.

You can download the code from here.

Categories: air, ajax, tips & tricks Tags:

Debug Flex and .NET using ASP.NET Development Server

July 29th, 2008 1 comment

If you followed my previous post you probably now have a Flex + .NET project that makes a WebService call. If not, here’s a project you can use testDotNet.zip. To import this in Flex Builder choose File->Import->Flex Project and follow the steps.

Next open Visual Web Developer and open a Web Site in the same location as the Flex Builder project.  Open web.config and make sure you have <compilation debug=”true”> (this inserts debugging symbols for the .NET code).

Now we need to use the same ASP.NET Developer Server for both the Flex Builder and Visual Web Developer. Since by default both tools try to start one instance we need a little trick to do that:

Start the MXML project through Flex Builder; this will start ASP.NET Developer Server usually on port 3000. Then go to Visual Web Developer; on Project Property Page (Right Click on the Project in the Solution Explorer) click Start Options and select Use Custom Server and enter http://localhost:3000/testDotNet/

image

Start also the .NET project just to connect the Visual Web Developer to the ASP.NET Developer Server instance. Now you will be able to debug both Flex and .NET code:

image

image

Categories: debugging, flash builder, tips & tricks Tags:

DataGrid – Confirm a Grid change event using an Alert popup

July 9th, 2008 No comments

Today I saw an interesting post on FlexCoders. Suppose you have an editable DataGrid and you want to confirm through an Alert if the change should be made or not. Preventing the change is easy, you just need hook onto the itemEditEnd and call event.preventDefault(). The problem arises when you want to confirm this with the user using an Alert. This is because the Alert.show call is asynchronous. This means that the grid event will complete before the user can choose Yes or No.

public function editEnd(event :D ataGridEvent):void {

  Alert.show("Do you want to save changes?","Save changes",Alert.YES | Alert.NO,null,function(ev:CloseEvent):void {
      if (ev.detail == Alert.YES) {
        //LABEL2: This will be reached long after the LABEL1 has been reached. 
        //So at this point the grid has been executed the default behavior for the change event
      }
    });
    //LABEL1: Because of the asynchronous nature this will be reached right after the Alert.show call    

}

So my idea of solving this was to save the new value, prevent the default grid behavior of updating the dataProvider and update the data provider manually on the Alert.show closeHandler.

Here is some code that illustrates this:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
        initialize="initData()" layout="absolute">
  <mx:Script>
   <![CDATA[
       import mx.controls.TextInput;
       import mx.controls.Alert;
    import mx.collections.*;
    import mx.events.*;

      private var DGArray:Array = [
         {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
         {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}];

      [Bindable]
      public var initDG:ArrayCollection;
      public function initData():void {
         initDG=new ArrayCollection(DGArray);
      }

      public function editEnd(event:DataGridEvent):void {

          //Save the data before calling Alert
        var myEditor:TextInput =
                    TextInput(event.currentTarget.itemEditorInstance);

        // Get the new value from the editor.
        var newVal:String = myEditor.text;
        var dataObject:Object = event.itemRenderer.data;
        var property:String = event.dataField;

        Alert.show("Do you want to save changes?","Save changes",Alert.YES | Alert.NO,null,function(ev:CloseEvent):void {
            //If we have clicked YES then update the data collection manually
            if (ev.detail == Alert.YES) {
                  dataObject[property] = newVal.toString();
                  initDG.itemUpdated(dataObject,property);
            }
          });

          //prevent data grid to update his dataProvider collection
          event.preventDefault();
      }
   ]]>
   </mx:Script>

   <mx:DataGrid id="myGrid" width="350" height="200"
      dataProvider="{initDG}" editable="true" itemEditEnd="editEnd(event)" >
      <mx:columns>
         <mx:DataGridColumn dataField="Album" />
         <mx:DataGridColumn dataField="Price" />
      </mx:columns>
   </mx:DataGrid>
   <mx:DataGrid id="readOnlyGrid" width="350" height="200"
      dataProvider="{initDG}" x="0" y="208">
      <mx:columns>
         <mx:DataGridColumn dataField="Album" />
         <mx:DataGridColumn dataField="Price" />
      </mx:columns>
   </mx:DataGrid>
</mx:WindowedApplication>
Categories: flex, tips & tricks Tags:

AS and Flex Project trick

July 7th, 2008 Comments off

A few days ago I was trying to use the FDS AJAX Bridge to push some messages in an AJAX grid. So I created a Flex + WTP + BlazeDS project and went to change the default Application from the default MXML file to my FDMSBridge.as (The 1×1 pixel SWF). Guess what? You can’t add AS files, only MXML ones

image

This might be a little bug, but I found a workaround. I manually edited .actionScriptProperties file and in the <application> section added the FDMSBridge.as:

<?xml version="1.0" encoding="UTF-8"?>
<actionScriptProperties mainApplicationPath="testBlaze.mxml" version="3">
<compiler additionalCompilerArguments="-services "C:/work/wksp/samples/testBlaze/WebContent/WEB-INF/flex/services-config.xml" -locale en_US" copyDependentFiles="true" enableModuleDebug="true" generateAccessible="false" htmlExpressInstall="true" htmlGenerate="true" htmlHistoryManagement="true" htmlPlayerVersion="9.0.28" htmlPlayerVersionCheck="true" outputFolderPath="bin-debug" rootURL="http://localhost:8080/testBlaze" sourceFolderPath="flex_src" strict="true" useApolloConfig="false" verifyDigests="true" warn="true">
<compilerSourcePath/>
<libraryPath defaultLinkType="1">
<libraryPathEntry kind="4" path=""/>
<libraryPathEntry kind="1" linkType="1" path="flex_libs"/>
</libraryPath>
<sourceAttachmentPath/>
</compiler>
<applications>
<application path="FDMSBridge.as"/>
<application path="testBlaze.mxml"/>
</applications>
<modules/>
<buildCSSFiles/>
</actionScriptProperties>

Now the FDMSBridge.as should be compiled as a normal Flex application:

image

Categories: flash builder, tips & tricks Tags: