Allmas

  • Increase font size
  • Default font size
  • Decrease font size

Always override the clone() method for your custom events

E-mail Print PDF

When implementing a custom event in a Flash or Flex application, most examples and articles I found on the web don't override the clone() method. This works probably in most simple cases, but as soon as you try to redispatch the event (by calling dispatchEvent(event) in a handler that is handling event), you can get a "Type Coercion Failed" error. It states that it cannot convert flash.events.Event to your custom event's type.

Why is this happening? When you redispatch an event , the EventDispatcher class calls the clone() method and dispatches the cloned copy of the event. If you don't override the method to return an instance of the custom event, the original Event.clone() method will be called and an object of type Event will be returned. Now if you have an event listener expecting an instance of the custom event, the error will occur as the Flash virtual machine doesn't know how to convert from Event to your custom event type.

 

Gumbo: Flex Builder debugger support added

E-mail Print PDF

Felx Builder debugger support has been added to the sources of the Adobe Flex SDK. Just update your working copy or download the latest Nightly Build and you can start debugging your Gumbo applications in Flex Builder! Gone the days of adding the trace command everywhere in your code and analyzing a bloated flashlog.txt file. Don't forget to install the Flash Player 10 plugin or ActiveX control for your browser from the directory in\player\10\<platform>.

Related Article: Gumbo: Development Environment Setup For Flex Builder.

 

Gumbo: Inline Two-Way Data Binding

E-mail Print PDF

Recently, a new mechanism of defining two-way data binding has been added to the Gumbo sources. It makes creating such bindings easier and it offers two ways to do it:

  1. Using the "@{expr}" binding syntax
  2. Setting the new property "twoWay" of the "" tag to "true"

Here is an example to show both methods:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  3.    
  4.     <mx:Script>
  5.        <![CDATA[
  6.            private static const LOREM:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque a nunc nec elit vulputate hendrerit. Sed adipiscing. Proin non metus in odio imperdiet ultricies. Vivamus vestibulum purus sit amet sapien. Quisque sollicitudin. Phasellus vitae elit. Donec sodales, nisl eu adipiscing convallis, felis nisl ullamcorper arcu, in lobortis pede mi ac erat. Praesent in ipsum sed mi vulputate bibendum. Donec malesuada. Quisque lobortis. Vestibulum sit amet augue et ligula interdum dignissim. Maecenas vehicula elit bibendum ipsum.";
  7.          
  8.            [Bindable]
  9.            private var txt:String;
  10.        ]]>
  11.    </mx:Script>
  12.    
  13.     <mx:Binding source="txt" destination="ta2.text" twoWay="true" />
  14.    
  15.     <mx:HBox>
  16.         <mx:TextArea id="ta1" height="150" text="{LOREM}" verticalScrollPosition="@{ta2.verticalScrollPosition}"/>
  17.         <mx:TextArea id="ta2" height="150" />
  18.     </mx:HBox>
  19.     <mx:Button label="Set Text" click="txt = LOREM" />
  20.     <mx:Text width="400" text="{txt}" />
  21.  
  22. </mx:Application>

You need Flash Player 10 to view the application:

flash_symbol

To test it click on the "Set Text" button and start dragging both scrollbars and editing the text of the second TextArea.

Here I use the first method to bind the positions of the vertical scrollbars of both TextAreas. No matter which scrollbar you move, the other will follow.

The second method is used to bind the text of the second TextArea with the bindable property "txt". To view its value, it was also bound (one-way) to the Text control.

 

Adobe AIR for Linux Beta

E-mail Print PDF

Adobe annouced yesterday the realease of the first beta of AIR for Linux in Adobe Labs. This is "a nearly feature complete" version as stated in the official annoucement. According to this annoucement also, the only missing major feature is the badge installer.

I tested this release on Ubuntu 8.04 even though according to the release notes, the officially supported version is 7.10. Guess what? It worked flawlessly! There is one strange thing thow: The annoucement and the Adobe AIR for Linux page state that this is version 1.1, while the installation directory on my system is "/opt/Adobe AIR/Versions/1.0". Is it 1.1 or 1.0?

 

Gumbo: Development Environment Setup For Flex Builder

E-mail Print PDF

If you want to start testing the new features of  Flex 4 (Gumbo), the upcoming version of Flex, you can find here the steps to follow to set up the development environment for Flex Builder. These are simplified instructions for Windows, you can find more details and instructions for other platforms on the following Setup page.

From the Nightly Builds

This is the easiest method as you don't need to build the SDK. Just grab the latest nightly build from the Gumbo download page and unpack it on your disk. Now you can jump directly to "Flex Builder Project Setup".

From Source

This procedure is a bit more complicated but has the advantage that you can better follow the development of Gumbo, it requires much less bandwidth if you want to stay up to date and the sources are the best documentation for now.

To compile the SDK from the source, you will need to install Cygwin, J2SDK 1.5.0_13 and Ant 1.7.0. Just install everything with the default settings. For simplicity, make sure that the J2SDK will be installed in "C:\Program Files\Java\jdk1.5.0_13" and Ant in "C:\apache-ant-1.7.0".

Now grab the latest development sources from the Subversion repository on Adobe Open Source. Use your favorite client and check out the trunk folder at: http://opensource.adobe.com/svn/opensource/flex/sdk/trunk.

The next step is to compile the SDK. Open a Cygwin shell, go to the directory where you checked out the sources and type:

source setup.sh
ant -q main

If the compilation succeeded, you should see the following lines at the end:

BUILD SUCCESSFUL
Total time: 3 minutes 42 seconds

At this point the latest Flex 4 SDK is ready and we can start (mis)using it!

Flex Builder Project Setup

Adding the Flex 4 SDK to Flex Builder

To add the fresh copy of your Flex 4 SDK to Flex Builder, open the "Preferences" window under "Window > Preferences..." and select the "Flex > Installed Flex SDKs" section. You should see a list of the SDKs shipped with Flex Builder. Click the "Add..." button to open the "Add Flex SDK" window, then click the "Browse..." button and select the Flex 4 folder. The "Flex SDK name" field should be automatically filled with "Flex 4". Now close all windows by clicking on "OK".

Creating and Testing a Flex 4 Project

The only differences between the configurations of a Flex 3 and a Flex 4 projects are the SDK they use and the required Flash Player version.

Let's start by creating a standard Flex project for a "Web application". When the project is created, open its properties window and go to the "Flex Compiler" section. Under "Flex SDK version" select the option "Use a specific SDK" and choose "Flex 4" from the list, then set the "Require Flash Player version" under "HTML wrapper" to "10.0.0".

To test the project settings and the Flex 4 SDK, paste the following code in the main MXML application file of the project you just configured:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <Application xmlns="http://ns.adobe.com/mxml/2009">
  3.     <Group>
  4.         <Ellipse x="35" y="5" width="40" height="60">
  5.             <stroke>
  6.                 <SolidColorStroke color="red" />
  7.             </stroke>
  8.             <fill>
  9.                 <SolidColor color="yellow" />
  10.             </fill>
  11.         </Ellipse>
  12.         <Path x="35" y="70" data="M 20 0 L 40 40 L 0 40 L 20 0">
  13.             <stroke>
  14.                 <SolidColorStroke color="red" />
  15.             </stroke>
  16.             <fill>
  17.                 <SolidColor color="yellow" />
  18.             </fill>
  19.         </Path>
  20.         <Rect x="5" y="115" width="100" height="50">
  21.             <stroke>
  22.                 <SolidColorStroke color="red" />
  23.             </stroke>
  24.             <fill>
  25.                 <SolidColor color="yellow" />
  26.             </fill>
  27.         </Rect>
  28.     </Group>
  29. </Application>

If the project compiles then you have successfully configured your development environment for Flex 4. To test the application, you have to run it with Flash Player 10 which you can find under "<Flex 4 sources>\in\player\10\win".

 


Page 3 of 4
View Haykel Ben Jemia's profile on LinkedIn

Shared Items