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.

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/

Mihai Corlan, Platform Evangelist at Adobe, finalized a “book like” article for PHP developers. I mentioned the “book like” words because the article is long, very long.

The purpose of Mihai’s article is…

I want to share with you some of the things that are specific to Flex in relation to PHP. At the same time I want to introduce Flex by comparing it with PHP whenever this comparison makes sense.

This is what it contains…

1. What is Flex?
   1. Flex: two languages, one framework to bind them
   2. Why you should care about Flex
   3. From thin client to smart/rich client
2. Introduction to the MXML language
   1. Mixing MXML with ActionScript 3
   2. CSS styles
   3. Modifying MXML code at runtime
3. Introduction to the ActionScript 3 language
   1. Separating statements
   2. Data types, variables, constants
   3. Functions and Anonymous functions (closures)
   4. OOP: classes and interfaces
   5. Variable scope
   6. Arrays
   7. Namespaces
   8. Working with XML
   9. Dynamic ActionScript
4. Flex is asynchronous
5. Data binding, metadata tags, and reflection
6. Where are my data, bring it on!
7. User authentication in Flex and PHP projects
8. Working on Flex and PHP projects
   1. Flex SDK
   2. Flex Builder / Flash Builder
   3. Debugging Flex applications
9. What is Adobe AIR?
10. What’s next?
11. Where to go from here

We wish you good reading and patience.

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

As was expected we have at this time a final agenda for this event.

17:00 – 17:30
Registration participants
17:30 – 17:45
Opening Message
17:45 – 19:00
Flash Builder 4 & Catalyst, Cornel Creanga & Michael Corlan
19:00 – 19:45
Break for pizza and beer
19:45 – 20:15
Flex 4 SDK, Michael Pricop
20:15 – 20:45
PHP Services in Flash Builder 4, Andrei Ionescu
20:45 – 21:00
Break
21:15 – 21:45
Skinning in Fx4 – Stelian Crisan
21:45 – 22:00
Closing Message

See you there in one week .

In this article I’ll show the same application I presented at FlexCamp Bucharest Romania 2008 – the video from the conference is available here and although it is in Romanian it might be useful. In the presentation I’m showing the power of Flex: doing complex applications with a few lines of codding.

With this article we are just starting because everything is explained in the powerpoint presentation and by the comments inside the source code found at the end of this article.

The application is simple – only one mxml file – and we will study:

• Multiple Drag and drop (events)
• HTTPService
• FileReference
• URLRequest

On the server-side:

• dir.php – browsing (http service) – no parameters needed – returns a simple XML
• download.php – download (url request) – array with the paths that will be included in archive as parameters – returns an archive (tgz)
• archive.php – class to create arhives

On the client-side:

• Tree ⇒ HTTPService ⇒ dir.php ⇒ HTTPService ⇒ Tree
• Refresh ⇒ HTTPService ⇒ dir.php ⇒ HTTPService ⇒ Tree
• Download ⇒ List ⇒ URLRequest ⇒ FileReference ⇒ file download

We are using multiple selection and dragging so you can drag more that one item from the list. Also the delete key erases the selected items from the list on the right. You can start over by pressing refresh button.

This is the start of it and you can get into it more and more reading the powerpoints and trying the source codes. All this can be downloaded from the end of this article.

Working example is bellow:

What can be added in the future:

1. download progress with cancellation possibility
2. upload functionality
3. user account functionality

The last two points are more difficult because it involves some work on the server-side but is doable.

I’ve posted also the whole flex source code because it is easier to follow the article and study the code in the same page.

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    width="439" creationComplete="init()" height="271">
    <mx:HTTPService id="dir" url="{SERVER_URL}dir.php" resultFormat="e4x" />
    <mx:Tree id="leftTree" x="10" y="10" height="250" width="204" 
        dataProvider="{dir.lastResult}" labelField="@name" showRoot="false" 
        dragEnabled="true" dropEnabled="false" allowMultipleSelection="true" 
        click="showThumb(event)"/>
    <mx:List id="downloadList" x="222" y="10" height="135" width="207" 
        allowMultipleSelection="true" dataProvider="{fileListProvider}" 
        dragEnter="handleDragEnter(event)" dragOver="handleDragOver(event)" 
        dragDrop="handleDragDrop(event)" dragExit="handleDragExit(event)" 
        click="showThumb(event)" keyUp="handleKeyUp(event)"/>
    <mx:Button id="downloadButton" x="347" y="153" label="Download" 
        enabled="false" click="initializeDownload(event)" />
    <mx:Button id="refreshButton" x="347" y="239" label="Refresh" 
        click="refresh(event)"  width="82"/>
    <mx:Canvas id="imageHolder" x="222" y="153" width="117" height="108">
        <mx:Image id="imageThumb" x="0" y="0" width="117" height="108" 
            source="{currentPhotoPath}"/>
    </mx:Canvas>
    <mx:Script>
        <![CDATA[
            import mx.messaging.channels.StreamingAMFChannel;
            /* File downloading application
               Drag and drop between two different controlers: tree and list */
 
            import mx.rpc.events.ResultEvent;
            import mx.collections.ArrayCollection;
            import mx.controls.listClasses.ListBase;
            import mx.core.UIComponent;
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.controls.List;
            import mx.events.DragEvent;
 
            // internet - on flexer
            public const SERVER_URL:String = 
                "http://www.flexer.info/wp-content/uploads/2008/05/";
 
            // bindable variable used for the list
            [Bindable]
            public var fileListProvider:ArrayCollection = new ArrayCollection();
 
            // bindable variable used for thumbnail
            [Bindable]
            public var currentPhotoPath:String = "";
 
            public var fRef:FileReference = new FileReference();
 
            public function init():void
            {
                /* initialization function */
 
                // file reference events - used for debug purposes
                fRef.addEventListener(Event.CANCEL, doEvent);
                fRef.addEventListener(Event.COMPLETE, doEvent);
                fRef.addEventListener(Event.OPEN, doEvent);
                fRef.addEventListener(Event.SELECT, doEvent);
                fRef.addEventListener(HTTPStatusEvent.HTTP_STATUS, doEvent);
                fRef.addEventListener(IOErrorEvent.IO_ERROR, doEvent);
                fRef.addEventListener(ProgressEvent.PROGRESS, doEvent);
                fRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doEvent);				
 
                // getting folder content
                dir.send();
            }
 
            private function handleDragEnter(event:DragEvent):void
            {
                /* this function validates the drop */
 
                if (event.dragInitiator is Tree) {
                    var ds:DragSource = event.dragSource;
                    // check if the format is what we need - treeItems
                    if (!ds.hasFormat("treeItems")) 
                        return;
                    var items:Array = ds.dataForFormat("treeItems") as Array;
                    for (var i:Number=0; i < items.length; i++) {
                        var item:XML = XML(items[i]);
                        // we want only files to be dragable
                        if (item.@type != "file") 
                            return; 
                    }   
 
                    // check for the item to be unique
                    var paths:ArrayCollection = 
                        downloadList.dataProvider as ArrayCollection;
                    for (var j:Number=0; j < paths.length; j++)
                    {
                        if (item.@path == paths[j].path.toString()) return;
                    }
                }
 
                // accept the drop
                DragManager.acceptDragDrop(UIComponent(event.currentTarget));
            }
 
            private function handleDragOver(event:DragEvent):void
            {
                /* this function shows feedback to the user */
 
                // show feedback icon
                DragManager.showFeedback(DragManager.COPY);
            }
 
            private function handleDragDrop(event:DragEvent):void
            {
                /* this function adds new items to the list */
 
                // getting source
                var ds:DragSource = event.dragSource;
                // getting target
                var dropTarget:List = List(event.currentTarget);
                // tempoaray array used to add items to list
                var arr:Array;
 
                // getting the nodes dragged 
                // multiple selection is allowed so we have arrays
                if (ds.hasFormat("items")) {
                    arr = ds.dataForFormat("items") as Array;
                } else if (ds.hasFormat("treeItems")) {
                    arr = ds.dataForFormat("treeItems") as Array;
                }
 
                // adding the dragged nodes to list
                for (var i:Number=0; i < arr.length; i++) {
                    // getting node
                    var node:XML = XML(arr[i]);
                    // creating new list item
                    var item:Object = new Object();
                    // setting item's properties
                    item.label = node.@name;
                    // we set path also which is needed for download
                    item.path = node.@path;
                    // add to data provider
                    fileListProvider.addItem(item);
                }
                // finish drag
                handleDragExit(event);
            }			
 
            private function handleDragExit(event:DragEvent):void
            {
                /* this function finishes the drag and drop */
 
                // we hide the feedback
                var dropTarget:ListBase=ListBase(event.currentTarget);
                dropTarget.hideDropFeedback(event);
                // we check the data provider to enable the download button
                if (dropTarget.dataProvider.length > 0)
                    downloadButton.enabled = true;
            }
 
            private function showThumb(event:MouseEvent):void
            {
                /* this function shows the thumbnail 
                   used for both tree and list click events */
 
                // if click is on the tree
                if (event.currentTarget.name == "leftTree") {
                    // folders cannot show thumbnail
                    // other file types than images are automatically not shown 
                    if (leftTree.selectedItem.@type == "file")
                        currentPhotoPath = SERVER_URL + leftTree.selectedItem.@path;
                    else
                        currentPhotoPath = "";
                // if click is on the list
                } else if (event.currentTarget.name == "downloadList") {
                    currentPhotoPath = (downloadList.selectedItem ? SERVER_URL + 
                                        downloadList.selectedItem.path : "");
                }
            }
 
            private function handleKeyUp(event:KeyboardEvent):void
            {
                /* this function is used for deleting items from the list */
 
                // if we have pressed the DELETE key and 
                // also there is at least one item selected
                if (event.keyCode == Keyboard.DELETE && 
                        downloadList.selectedIndex > -1) {
                    var removeItems:Array = downloadList.selectedIndices;
                    // remove selected items
                    for (var i:Number = 0; i < removeItems.length; i++) {
                        downloadList.dataProvider.removeItemAt(removeItems[i]);
                    }
                    currentPhotoPath = "";
                    // if the list is empty we disable the download button
                    if (downloadList.dataProvider.length <= 0)
                        downloadButton.enabled = false;
                }
            }
 
            private function initializeDownload(event:MouseEvent):void
            {
                /* this function starts the download 
                   we use FileReference to download */
 
                // get the items dragged in the list
                var paths:ArrayCollection = 
                    downloadList.dataProvider as ArrayCollection;
                // initialize the query/url string
                var qStr:String = "";
                // compose the query/url string
                // we are sending an array to the server
                for (var i:int = 0; i < paths.length; i++)
                    qStr += "&name[]="+escape(paths[i].path.toString());
                // get the file
                // the file download.php on the server gets the array
                // and in the memory creates an tgz archive
                // and sends it back as being a file (using http headers)
                // we are using FileReference for this
                fRef.download(
                    new URLRequest(SERVER_URL + "download.php?" + qStr),
                    "archive.tgz");
            }
 
            private function doEvent(evt:Event):void {
                /* Function is displaying events reached when downloading 
                   For debug purposes */
 
                var fr:FileReference = evt.currentTarget as FileReference;   
                // for debug purposes */
                //trace("type:"+evt.type+", eventString:"+evt.toString()); 
                //trace(fr.creationDate);
                //trace(fr.creator);
                //trace(fr.modificationDate);
                //trace(fr.name);
                //trace(fr.size);
                //trace(fr.type);
            } 		
 
            private function refresh(evt:Event):void {
                /* Function is refresing both the tree and the list and 
                   disables the download button */
 
                // empty the list
                fileListProvider = new ArrayCollection();
                // disable the download button
                downloadButton.enabled = false;
                // refresh the tree
                dir.send();
            }
        ]]>
    </mx:Script>
</mx:Application>

This is it! As I just wrote at the beginning of the article, the power and beauty of Flex framework is that you can do great things with a few lines of codding. So enjoy Flex!

In this post we will implement a login process with remember password functionality. In AS3 and also in AS2 we can use a SharedObject to store data on the users browser. Shared objects are similar to the all known browser cookies but are managed by the flash player. Shared objects can store data also remotely on the server and using this feature some complex communication models can be implemented. But we will focus on our login with remember password (see here the working application).

For this we need a server-side and I used PHP because my preferred server-side language is PHP. The server-side is very simple and contains one function that will check the user name and the password with some hard coded constants. Here is the code inside login.php:

// hard coded username and password
define("USER","flexer");
define("PASS","fx{r}");
// login function
function login($u,$p) {
    // checking for valid username and password
    if (strlen($u)>0 && strlen($p)>0 && $u == USER && $p == PASS) {
        // login was successful
        $loginOk = 1;
        $loginErr = "";
    } else {
        // login failed
        $loginOk = 0;
        $loginErr = "Invalid user and/or password!";
    }
    // returning an XML with data
    return "<login><loginOk>".$loginOk."</loginOk><loginErr>".$loginErr."</loginErr></login>";
}
// we send the xml header
header("Content-type: text/xml");
// we print resutl to output
echo login($_REQUEST["username"],$_REQUEST["password"]);

What this server-side script file does can be easily understand from the comments so we will move forward to client-side.

For the remember password functionality we use a SharedObject which will be saved in the local machine. This file can be encoded (we didn’t encode it) and a location to save in can be specified. More about encoding here and about setting a location here.

A SharedObject is called like this

var _remeberSO:SharedObject = SharedObject.getLocal("loginData");

and what it happens:

• if the shared object named “loginData” doesn’t exists a new one with empty data property is created
• if the shared object named “loginData” exists the previously saved info is retrieved and the data property is filled in with that info

The data property is set like this:

_remeberSO.data.username = username.text;
_remeberSO.data.password = password.text;

and is get in the same manner.

To save/write the object we use

_remeberSO.flush();

To clear

_remeberSO.clear();

In this example we use also a ViewStack but to make everything more clear bellow you can study the whole flex code and I hope you’ll understand very well what is happening from the comments.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" width="253" height="307" 
    creationComplete="init()">
    <mx:HTTPService id="doLoginService" method="POST" 
        url="http://www.flexer.info/wp-content/uploads/2008/05/login.php" 
        resultFormat="e4x" result="handleDoLoginResult(event)" 
        showBusyCursor="true"/>
    <mx:ViewStack x="10" y="10" width="233" height="287" id="myStack" 
        change="handleStackChange(event)">
        <mx:Canvas id="logIn" width="100%" height="284">
            <mx:Label x="0" y="77" text="Username:"/>
            <mx:Label x="0" y="103" text="Password:"/>
            <mx:TextInput x="75" y="75" id="username" width="158"/>
            <mx:TextInput x="75" y="101" id="password" width="158" 
                displayAsPassword="true"/>
            <mx:CheckBox x="75" y="131" label="Remeber password" 
                id="rememberStack1"/>
            <mx:Button x="75" y="157" label="Login" 
                click="handleDoLoginClick(event)"/>
            <mx:Text x="0" y="0" width="233" height="67">
                <mx:htmlText>		
<![CDATA[Use the following login data.
 
Username: <b>flexer</b>
Password: <b>fx{r}</b>]]>
                </mx:htmlText>		
            </mx:Text>
        </mx:Canvas>
        <mx:Canvas id="loggedIn" width="100%" height="285">
            <mx:Text x="0" y="0" width="233" height="219">
                <mx:htmlText>
<![CDATA[<b>You are logged in!</b> You can log out 
and specify if you prefer to have the 
password remembered next time. 
 
To see that the username and password 
are remembered please use the follwing
scenarios:
 
1) Refresh the whole browser page.
2) Logout and the refresh the whole 
page. 						
3) Uncheck "Remember password" and
refresh the page.
4) Uncheck "Remember password",
logout and refresh.]]>
                </mx:htmlText>
            </mx:Text>			
            <mx:CheckBox x="0" y="227" label="Remember password" 
                id="rememberStack2"/>
            <mx:Button x="0" y="253" label="Logout" 
                click="handleLogout(event)"/>
        </mx:Canvas>
    </mx:ViewStack>
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.events.ResultEvent;
 
            // our shared object that will save
            // the username and password localy 
            private var _remeberSO:SharedObject;
 
            // initialization
            private function init():void
            {
                // getting data from shared object
                // if the object named "loginData" and
                // saved localy doesn't exists it is 
                // created without data
                // if it exists the data is recovered and
                // put inside "data" property
                _remeberSO = SharedObject.getLocal("loginData");
                // if we have username and password saved
                // we do auto-login
                if (_remeberSO.data.username != undefined && 
                    _remeberSO.data.password != undefined)
                {
                    rememberStack1.selected = true;
                    username.text = _remeberSO.data.username;
                    password.text = _remeberSO.data.password;
                    // calling the login service to check 
                    // the username and password
                    doLoginService.send(_remeberSO.data);
                }
            }
 
            // called when the "Login" button is clicked
            private function handleDoLoginClick(event:MouseEvent):void
            {
                var sendData:Object = { username:username.text,
                                        password:password.text };
                // calling the login service
                doLoginService.send(sendData);
            }
 
            // called by the "HTTP Service" when successful
            private function handleDoLoginResult(event:ResultEvent):void
            {
                // get the status of login process
                // loginOk = 0 - means invalid username/password
                // loginOk = 1 - means login successful
                // loginErr = "" - when loginOk = 1
                // loginErr = "error" - when loginOk = 0
                var loginOk:uint = int(event.result.loginOk);
                var loginErr:String = event.result.loginErr.toString();
                if (!loginOk) {
                    // if the login failed we alert
                    Alert.show(loginErr);
                } else {
                    if (rememberStack1.selected) {
                        // if we selected remember password
                        // we save the login data in the shared object
                        _remeberSO.data.username = username.text;
                        _remeberSO.data.password = password.text;
                        // saving/writing
                        _remeberSO.flush();
                    } else {
                        // otherwise we clear the shared object
                        _remeberSO.clear();
                    }
                    // move to next stack
                    myStack.selectedIndex++;
                }
            }
 
            // called when the "Logout" button is clicked
            private function handleLogout(event:MouseEvent):void
            {
                if (!rememberStack2.selected) {
                    // if have NOT selected remember password
                    // we clear the shared object
                    _remeberSO.clear();
                } else {
                    // if we selected remember password
                    // we save data as we may login 
                    // without checking the checkbox in the
                    // first screen but we want to select it
                    // after login
                    _remeberSO.data.username = username.text;
                    _remeberSO.data.password = password.text;
                    // saving/writing
                    _remeberSO.flush();
                }
                myStack.selectedIndex--;
            }
 
            private function handleStackChange(event:Event):void
            {
                // we are sychronizing the two checkboxes
                if (myStack.selectedChild == logIn)
                {
                    // we got back to first screen - login
                    rememberStack1.selected = rememberStack2.selected;
                } else {
                    // we got to the second screen
                    rememberStack2.selected = rememberStack1.selected;
                }
            }
        ]]>
    </mx:Script>
</mx:Application>

The working application is bellow and you can try the following scenarios to test the login process:

1. Refresh the whole browser page
2. Logout and the refresh the whole page
3. Uncheck “Remember password” and refresh the page
4. Uncheck “Remember password”, logout and refresh

Here is the documentation about shared objects very nice and clean (by Adobe, on Livedocs).

Table of contents

1. Web Service small how-to
2. Flex and PHP web-service

Yesterday I had to do a small flex application that resided on a server with php. Since I required a connection to mysql I wanted to use the same class I did before to connect to web-services. But PHP does not support web-services (and WSDL) by default.

So after I did some search on the net I found this nice php class: NuSOAP. Here it is the small php webservice I did to test it all (file test.php):

// Pull in the NuSOAP code
require_once('nusoap.php');
 
// Define namespace to use
$ns="http://localhost/wsdlphp";
 
// Create the server instance
$server = new soap_server;
 
// Configure WDSL response
$server->configureWSDL('hello',$ns);
 
// Set default namespace for output
$server->wsdl->schemaTargetNamespace=$ns;
 
// Register the method to expose
$server->register('hello',
array('name' => 'xsd:string'),
array('return' => 'xsd:string'),
$ns
);
 
// Define the method as a PHP function
function hello($name)
{
return 'Hello, ' . $name;
}
 
// Use the request to (try to) invoke the service
$HTTP_RAW_POST_DATA = isset($HTTP_RAW_POST_DATA) ? $HTTP_RAW_POST_DATA : '';
$server->service($HTTP_RAW_POST_DATA);

As you see here there is one service called test.php and one webmethod called hello. This method has one parameter as input (name):

$server->register('hello', array('name' => 'xsd:string'), array('return' => 'xsd:string'), $ns);

Here is the flex code to connect and use the webmethod:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	applicationComplete="init()">
	<mx:script>
		<![CDATA[
			import mx.rpc.soap.Operation;
			import mx.rpc.events.InvokeEvent;
			import mx.rpc.soap.LoadEvent;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.soap.WebService;
			import ro.qbic.testmessage;		
 
			private var _service : WebService;
			private var _currentMessage: testmessage;
 
			public function init():void
			{
				_currentMessage = new testmessage("a");
				_service = new WebService();
				_service.wsdl = "http://localhost/WSDLPHP/test.php?wsdl";
				_service.addEventListener(ResultEvent.RESULT, handleResult, false, 0, true);
				_service.addEventListener(FaultEvent.FAULT, handleFault, false, 0, true);
				_service.addEventListener(LoadEvent.LOAD, handleLoad, false, 0, true);
				_service.addEventListener(InvokeEvent.INVOKE, handleInvoke, false, 0, true);
				_service.loadWSDL();
			}
 
			public function handleResult(event:ResultEvent):void
			{
				// Get data from RESULT node
				var tmpResp:XML = event.result[0]
			}
 
			private function handleFault(event:FaultEvent):void
			{
				var errorMessage:String =  event.fault.faultString + "\n" + event.fault.faultDetail;
			}
 
			private function handleLoad(event:LoadEvent):void
			{
				_service.getOperation(_currentMessage.webMethod).arguments = _currentMessage;
				(_service.getOperation(_currentMessage.webMethod) as Operation).resultFormat = "e4x";
				_service.getOperation(_currentMessage.webMethod).send();
			}
 
			private function handleInvoke(event:InvokeEvent):void
			{
			}
		]]>
	</mx:script>
 
</mx:application>

Last days I found a very interesting and easy learning article about how Flex application can interact with PHP on the server-side. The article shows how this two technologies can work together. On the server-side Zend Framework, a MVC platform, which I used a lot is used to structure the application and to be able to have all kinds of client-sides (HTML, AJAX, Flash, Flex, etc).

The article is here and all source codes are here.

Zend Framework cand be dowloaded here.

Enjoy studying it!