Table of contents

1. FX4 Tour – Flex Camp at Bucharest on 15th of April 2010
2. FX4 Tour – Flex Camp at Bucharest – Registration & Agenda
3. FX4 Tour – Flex Camp Bucharest is Over

The FX4 Tour – Flex Camp Bucharest is over now. It has been a great success: there has been around 60 participants from which 65-70 percent were Flex developers. This is great! The Flex community is growing bigger and stronger.

Three interesting things:

• seen TransformGestureEvent in action
• Slider – Flex Mobile Framework is expected to be available in 2010
• Cairngorm is discontinued although version 3 beta is out since last winter

We had taken a few pictures…

Alexandru Chiculita

Attendance

Corlan speaking...

Dragos Georgita

Our attendance

Problems discussed...

Winner of FB4 license

 

Table of contents

1. FX4 Tour – Flex Camp at Bucharest on 15th of April 2010
2. FX4 Tour – Flex Camp at Bucharest – Registration & Agenda
3. FX4 Tour – Flex Camp Bucharest is Over

As you know on 15th of April 2010 a new Flex Camp will take place in Bucharest. Now we have the registration and some agenda modification. Most important change is that it will start around 4:30 PM.

• 16:30 – 17:00 – Registration
• 17:00 – 17:45 – Keynote – Mihai Corlan
• 17:45 – 18:30 – 10 things you didn’t know about Flash Builder 4 – Mihai Corlan
• 18:30 – 19:15 – Flex 4: tips and tricks – Mihai Corlan
• 19:15 – 20:00 – Designer/Developer workflow with Flash Catalyst and Flash Builder – Dragos Dascalita
• 20:00 – Pizza, beer and time to chat

Register using the widget bellow or by going to http://flashbuilder4.eventbrite.com/.

Table of contents

1. FX4 Tour – Flex Camp at Bucharest on 15th of April 2010
2. FX4 Tour – Flex Camp at Bucharest – Registration & Agenda
3. FX4 Tour – Flex Camp Bucharest is Over

On 15th of April 2010 we will have a Flex Camp, related to the recent launch of Flash Builder 4 which will take place at Adobe Systems Romania Offices (Anchor Plaza, Bdul. Timisoara, nr. 26Z, Bucharest). We will start around 5:30 PM and we will end somewhere before the last bus. There will be food and drinks on the house as usual .

The agenda is this:

• Keynote – Mihai Corlan
• 10 things you didn’t know about Flash Builder 4 – Mihai Corlan
• Flex 4 Tips & Tricks – Mihai Corlan
• Designer/Developer workflow with Flash Catalyst and Flash Builder – Dragos Dascalita

There may be more but we will try not to go over the midnight. In a short time we will open the registration so keep an eye on the post.

See you there!

Flash Builder 4 and Flex 4 has just been launched. Flash Builder is the new version of Flex Builder 3 in case that you didn’t know it. Both of them are bringing lots of improvements to the previous versions.

I’ll summarize the improvements but you can read more here:

• Flash Catalyst – Flash Builder – Flash Professional integration
• Faster compiler
• Data centric development

You can download the Flash Builder 4 and evaluate it for 60 days from http://www.adobe.com/products/flex/ or you can directly buy it from Adobe Store.

Regarding Flex 4 SDK read this. It comes with the Flash Builder 4 but also can be downloaded separately from here. If you didn’t know Flex 4 SDK brings in the Spark components which separates the data and logic from the user interface. If you’re interested please read the differences between Flex 3 and Flex 4.

I guess we’ll love it.

Wednesday, March 24, 2010 from 12:00 AM – 1:00 PM (GMT+0200) join our friend Mihai Corlan (Platform Evangelist for Adobe) while he goes through the basics of debugging a Flex and PHP application.

See how to work with: Flash Builder 4,  Xdebug and Eclipse PDT to ensure a bug free project.

The presentation will take about 45 minutes, leaving 15 minutes to answer any questions you might have on this subject.

For registration go to http://flexphpdebug.eventbrite.com.

Today, Apple just announced the new iPad device. Great peace of work… and a better news is that the developers will be able to develop applications for iPad using the Flash Pro CS5. You may already know that we are able to develop applications for iPhone using Flash Pro CS5. Following that path, making applications for the new iPad using the tool above, looks like the natural way.

Although Adobe didn’t announced that Flash Builder 4 will be able to package iPhone apps it seems that it is possible – read this article from Ted Patrick blog.

I’m glad that Adobe is prepared for the new iPad. And although Apple do not want to add the Flash Player on their devices Adobe found a way making all Flash Platform developers, also, iPhone and iPad developers. You can read more here.

Related resources…
http://www.adobe.com/devnet/logged_in/abansod_iphone.html
http://labs.adobe.com/wiki/index.php/Applications_for_iPhone

Our friend, Mihai Corlan, will host an e-seminar about PHP and Flash Platform, but let me quote him:

“On December 2nd, together with Roy Ganor from Zend Company, I will host an e-seminar about PHP and Flash Platform. We will show you how you can create a Rich Internet Application using the Flex framework, Illustrator, Flash Catalyst, and Flash Builder 4. Then we will show you how to connect the Flex application to a PHP backend and how easy is to debug the PHP and Flex code using Zend Studio 7.1 and Flash Builder 4.”

For more informations and registration procedure please read Mihai’s article at www.corlan.org.

What is AMF and a bit of history

Action Message Format (AMF) is a compact binary format that is used to serialize ActionScript object graphs. Once serialized an AMF encoded object graph may be used to persist and retrieve the public state of an application across sessions or allow two endpoints to communicate through the exchange of strongly typed data.

AMF was introduced in Flash Player 6 in 2001 and remained unchanged with the introduction of Actionscript 2.0 in Flash Player 7 and with the release of Flash Player 8. This version of AMF is referred to as AMF 0. In Flash Player 9, Action Script 3.0 was introduced along with a new Actionscript Virtual Machine (AVM+) – the new data types and language features made possible by these improvements prompted AMF to be updated. Given the opportunity to release a new version of AMF, several optimizations were also made to the encoding format to remove redundant information from serialized data.

Why AMF?

1. AMF is a compact binary format which means few bits to be transferred from the server to the client.
2. Using AMF you can call methods from the server as the method would be in you Actionscript code.
   In my opinion these two are the main advantages of AMF. There are others advantages as well that you may find important.

Some stats about AMF and its concurrent protocols available can be seen on James Ward’s Census Application (http://www.jamesward.com/census).

What you need

In order to complete this article you need the following things:

1. Flash Builder 4 (http://labs.adobe.com/technologies/flashbuilder4) or other IDE with Flex 4 SDK
2. AMFPHP (http://www.amfphp.org)
3. Local LAMP server (ex: Zend Server Community Edition, XAMPP, WAMP, etc)

Once you have those requirements satisfied we can go on.

At this moment the last version of AMFPHP is 1.9.

Setting up the server side

First of all create a folder in your htdocs or an alias so the web services, will be made available through your installed web server. In that place create a folder called webservices. Copy everything (but not the .htaccess file) that is in amf folder of the AMFPHP archive downloaded from amfphp.org to webservices folder. All your PHP web services will be in webservices/services folder.

Another thing to know is that you may need to put a crossdomain.xml file so the resulting swf file will be able to connect to the web services.

On same level with the webservices folder create _uploads folder (include the first underline). In this folder we will save our uploaded files.

This should be enough for now and we will go further to the next step.

Creating our upload web service

Create a new php file in webservices/services folder called upload.php. This will be the file that will contain our upload class and its methods and all its methods will be available in our flex upload application.

Create a class called upload as the file’s name. This class will have only one method named uploadFiles.

This method takes an object ($fileData) as parameter. This object contains the filename ($fileData["filename"]) and the file content as byte array ($fileData["filedata"]). The method gets those two and saves the file on the server location. It always returns true if it doesn’t crash. In case of a crash that means the file is not saved or an error is in our web service in which case we assume that the file is not saved. See upload.php bellow.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class upload {
 
    // method saves files on the server
    function uploadFiles($fileData) {
        // new file path an name
        // to not overwrite the files we add the microtime before the file name 
        $myFilePath = '../../_uploads/'.
            preg_replace("/[^0-9]+/","_",microtime()).'_'.$fileData["filename"];
        // writing on the disk
        file_put_contents($myFilePath, $fileData["filedata"]);
        // returning response - is not used anywhere 
        return true;
    }    
 
}

Getting into the client side

We will use the Spark components of the Flex 4 SDK. This will ease up a lot the development needed to finalize our application. The states will help us a lot.

Bellow in you can see the content of my MultipleFileUploadUsingAMFPHP project.

Let’s look at the attributes of declaration which contains the paths and settings to reach to our upload web service. Our web service file is called upload.php and can be found in webservices/services/ folder. The url to our web server location is http://localhost/multiplefileupload/.

• endpoint: this must point to gateway.php; in our case the url is http://localhost/multiplefileupload/webservices/gateway.php
• source: this is the filename of the PHP file containing the web service without the “.php” extension; in our case is upload
• destination: is the method from the file and class defined in source; in our case uploadFiles

These three are the attributes to reach the web service. Of course we set up the result and fault event handlers, the id and the showBusyCursor to true to visually show that the application is working.

Now we will define four states that will display different components depending of the state we are in.

1. initUpload: the first state that will be displayed at starting

   

2. beforeUploading: this will show the list with the files chosen and some buttons

   

3. inUploadProcess: this will show the progress and will have a button for canceling the process

   

4. uploadFinalized: this will show all the files and the finalized button

   

Next we will have a panel that will contain a Spark list and a few buttons that will appear according to the state we are in. I will not stop explaining about the new features of Flex 4 SDK and Flash Builder 4 because that is over our scope for now.

A bit of theory – how the upload process work

Now I want to explain how the upload process will work. The whole process is based on a stack idea. Files are uploaded one at a time. After the current file is uploaded or it has failed the next one will take its place and will be processed.

All files that have been chosen for upload are stored in a FileReferenceList object (_refAddFiles). We will iterate through it and we will add each FileReference object to _arrUploadFiles array collection. This array collection is used to display the files in a list and iterate through it to process each file reference object.

The process is started calling startUpload() method. These are the steps taken for each file reference object from _arrUploadFiles array collection:

1. We add a complete event to current file reference
    

   _arrUploadFiles[_numCurrentUpload].data.addEventListener(
       Event.COMPLETE, handleFileLoadedComplete
   );

2. We instruct it to load the file in the application memory
    

   _arrUploadFiles[_numCurrentUpload].data.load();

3. When the file is loaded into the memory handleFileLoadedComplete is triggered
4. After the file is loaded into the memory we can read the content of the file
    

   var tmpFileContent:String = 
       fileRef.data.readUTFBytes(fileRef.data.length);

5. We call the upload web service
    

   myUploadService.uploadFiles(
       {filedata:tmpFileContent, filename:fileRef.name}
   );

6. The upload web service which is defined at the beginning with the tag will trigger one of its event handlers:
   • result event if it is a success – myUploadService_resultHandler
   • fault event if it is a failure – myUploadService_faultHandler
7. Result event will show in the list if the upload was successful with a green dot and the fault event will show that it has been an error and a failure with a red dot
8. The current file number is incremented and the process is started again with startUpload() method

These are the steps taken for each file contained in a file reference object from _arrUploadFiles array collection.

You should notice that you need to use readUTFBytes method to get the content of the file and send them through the web service. Also you will be able to read the data of a file reference (fileRef.data) only after the files is loaded. This means that load() method must be called and the when the load is complete a complete event is triggered. After this the fileRef.data is available.

The main application code listing can be seen in the source archive. I will not put the whole code here because has lots of lines.

About the custom list item renderer

In order to display a feedback icon for each file we have to create a custom item renderer for our Spark list control. We tell the list that we are using a custom item renderer by specifying the item renderer attribute like bellow:

itemRenderer="com.flexer.CustomListItemRenderer"

We won’t go deep into the inner things of the custom component only just to specify that the icon is added at the end like this:

<s:BitmapImage id="icon"
        source="{data.ico}"
        verticalCenter="0"
        right="3" />

The image is taken from data object which is present in each item of the list, and is horizontally aligned at 3 pixels from right. You can see the whole component code bellow.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer name="CustomListItemRenderer"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    focusEnabled="false">
 
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
        <s:State name="normalAndShowsCaret"/>
        <s:State name="hoveredAndShowsCaret"/>
        <s:State name="selectedAndShowsCaret"/>
    </s:states>
 
    <fx:Script>
        <![CDATA[
            override public function set labelText(value:String):void {
                super.labelText = value;
                labelDisplay.text = labelText; 
            }
        ]]>
    </fx:Script>
 
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke.normalAndShowsCaret>
            <s:SolidColorStroke color="{selectionColor}" weight="1"/>
        </s:stroke.normalAndShowsCaret>
        <s:stroke.hoveredAndShowsCaret>
            <s:SolidColorStroke color="{selectionColor}" weight="1"/>
        </s:stroke.hoveredAndShowsCaret>
        <s:stroke.selectedAndShowsCaret>
            <s:SolidColorStroke color="{selectionColor}" weight="1"/>
        </s:stroke.selectedAndShowsCaret>
        <s:fill>
            <s:SolidColor color.normal="{contentBackgroundColor}"
                color.normalAndShowsCaret="{contentBackgroundColor}"
                color.hovered="{rollOverColor}"    
                color.hoveredAndShowsCaret="{rollOverColor}"
                color.selected="{selectionColor}"
                color.selectedAndShowsCaret="{selectionColor}" />
        </s:fill>
    </s:Rect>
 
    <s:SimpleText id="labelDisplay"
        verticalCenter="0"
        left="3" right="3" top="6" bottom="4"/>
    <!-- our mini dot icon showing the state of the file -->
    <s:BitmapImage id="icon"
        source="{data.ico}"
        verticalCenter="0"
        right="3" />
 
</s:ItemRenderer>

This icon is set from the main application where three dot icons are embedded.

[Embed(source="assets/bullet_empty.png")]
private var _icoUploadNotStarted:Class;            
[Embed(source="assets/bullet_green.png")]
private var _icoUploadSucces:Class;            
[Embed(source="assets/bullet_red.png")]
private var _icoUploadFailed:Class;

{data.ico} contains the embedded icon.

Conclusion

AMF is a powerful data protocol and can be used for any kind of transfer. It has lots of advantages and is by far the most parsimonious protocol freely available.

Source files are available at the end of this article. Two zip archives and an fxp file exported from my Flash Builder 4 which contains also the php files (I used Flash Builder 4 with PDT and Zend Debugger).

Resources

http://opensource.adobe.com/wiki/download/attachments/1114283/amf3_spec_05_05_08.pdf
http://www.amfphp.org/
http://www.amfphp.org/docs2/index.html
http://framework.zend.com/manual/en/zend.amf.html
http://www.themidnightcoders.com/products/weborb-for-net/overview.html
http://www.themidnightcoders.com/products/weborb-for-rails/overview.html
http://labs.adobe.com/technologies/flashbuilder4/
http://en.wikipedia.org/wiki/Action_Message_Format
http://www.zend.com/en/products/server-ce/
http://www.apachefriends.org/en/xampp.html
http://www.wampserver.com/en/download.php
http://sourceforge.net/project/showfiles.php?group_id=72483&package_id=257933
http://www.jamesward.com/census/

Two weeks ago Adobe released LiveCycle Data Services 3.0 beta on Adobe Labs. This is an early preview release and anybody can participate.

Check it out here: http://labs.adobe.com/technologies/livecycle_dataservices3/.

Andrew Trice said:

The two big features in LCDS 3.0 seem to be Model Driven Development and Quality of Service/throttling/caching from the server side.

in his article on insideRIA and I agree with him.

Also LCDS 3.0 beta comes with a plugin for Flash Builder 4. IT allows data modeling from Flash Builder itself.

This is a short article letting you know that you can have it and play with it.

More about LCDS 3.0 beta:
http://www.insideria.com/2009/06/lcds-30-available-on-adobe-lab.html
http://labs.adobe.com/technologies/livecycle_dataservices3/
http://www.adobe.com/devnet/livecycle/articles/lcdses3_whatsnew.html
http://www.dcooper.org/blog/client/index.cfm?mode=day&day=17&month=6&year=2009

Download link:
https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_livecycle_dataservices3

About Fiber/Model Driven Development:
http://labs.adobe.com/technologies/livecycle_dataservices3/gettingstarted.html
http://labs.adobe.com/technologies/livecycle_dataservices3/videos/

Table of contents

1. Flex 4 Tour – Bucharest PitStop
2. Registration for Adobe User Group Tour 2009 – Flex 4 Tour – Bucharest Pit Stop Now Available
3. Agenda for Flex 4 Tour – Bucharest Pit Stop
4. Bucharest Pit Stop Passed

Yesterday (10.06.2009) at Adobe Systems Romania offices took place the Adobe User Groups Tour – Bucharest Pit Stop event. The event was a success – great things presented. Even all tickets were sold out long time before the event only 40 persons showed up at the event.

The event was about new beta products that were launched by Adobe at the beginning of this month: Flash Catalyst, Flash Builder 4 and Flex 4 SDK. But you already knew this by reading the event’s agenda.

What we learned…

• Flash Catalyst is a product targeting the designers
• Flash Catalyst integrates with Photoshop, Illustrator, Fireworks and Flash Builder 4
• Flash Catalyst makes use of some Flash Professional concepts and interactions
• Flex 4 SDK has language modifications but the both Halo and Spark components can be used together
• Separation of behavior from appearance
• Some Halo components will not be present in Spark
• New graphical primitives in Flex 4 SDK which are not derived from UIComponent (MXML Graphics Library)
• New FXG format based in MXML understood by Illustrator, Photoshop, Fireworks, After Effects, Flash Professional, Flash Catalyst and Flash Builder
• New Flash Text Engine
• 2-way binding
• Advanced CSS
• New states
• Flash Builder 4 Plugin for Eclipse can be installed over a Zend Studio this way having debugging in both Actionscript/Flex and PHP
• New tab in Flash Builder 4 – Data Services
• Drag and drop binding to components
• Lots of new wizards to easy and increase the productivity
• Package explorer
• Getter/setter/event handlers generators
• Network monitor
• New FXP file type used by Flash Catalyst and Flash Builder 4

… and other things not mentioned here.

The Bucharest Pit Stop wasn’t recorded neither transmitted through Adobe Connect so who was present got home with new info about the Flash Platform and some stuff from Adobe and Fx{r}.

Presentations and source files from the event are available at the end. Still have to tell you that some of the presentations are in Romanian but most of them are in English.

Other articles about the event:
http://groups.adobe.com/posts/bdbc2a5190
http://myadobe.ro/2009/06/10/flex-4-tour-bucharest-pit-stop/