manewc » Flex Web Development

Downloading Multiple Files with Flex 3 and AMFPHP

admin — Mon, 22 Dec 2008 16:44:52 +0000

I originally was thinking that I would be able to do this by having the user select the files of their choice and click one button to download the items. So depending on their selection the Flex app would download the first item, then upon complete download of the first item it would download the second item and so on.. Unfortunately I could not get this to work on various browsers as the dialog box to download the file location would never appear on the second file. So with a little exploring I was able to accomplish the task of downloading multiple files of the users choosing with the use of:

Here is a list of things that I needed to get this working.

AMFPHP – Lee Brimelow has an excellent tutorial to get you started: http://www.gotoandlearn.com/play?id=78
PHP Class file to create zip documents from an array. You can find the one I used here: http://www.phpconcept.net/pclzip/index.en.php (note I am using PHP 5.*)
I also grabbed this class file from FlexExamples.com for using a checkbox control as a list item renderer

Here is the process:

So first the user will select the files he/she wishes to download
The user will need to click a button to notify the server the array of files and generate a unique .zip document
The download button will need to be active once the zip file is created so the user can then download the new .zip file
User clicks the download button to download the file
Will need to run a cron to delete all the generated .zip files as to not load up my server. (I won’t cover this step)

Honestly I am not a PHP programmer, but this is the Service Class that I put in my Service folder in my AMFPHP setup…

The file name is ZipFile.php (also don’t forget to inlude the library for zipping files)

create($fileArr);

  		if ($v_list == 0) {
    		$status = "Error : ".$archive->errorInfo(true);
  		}
  		else
  		{
  			$status = $uniqueFileName;
  		}

		return $status;

	}
}

?$gt;

In Flex, I just need to add the ListItemValueObject.as file from FlexExamples.com. I added this file in src/com/flexexamples/.

Here is my Main.mxml file to create the ui:

Please note that my editor generally does not render my flex code properly.. check this file here: Main.mxml.txt

I’ll have to admit that this code needs to be cleaned up.. just ran out of time at the moment.

Craigslist RSS Reader with ItemRenderer

admin — Tue, 25 Nov 2008 18:24:18 +0000

So, I simply wanted to learn more about the itemRenderer property of the List component and made a little .swf that will read different Craigslist.com RSS feeds. (crossdomain.xml issues will not allow this movie to work, but will from your desktop when published)

Within my Flex Project I have the following 2 files within my ’src’ folder.

The main file called: CragsListReaderFlex.mxml:



	
		
	

	

	
		
                  
                     
                     http://burlington.craigslist.org/rea/index.rss
                     http://burlington.craigslist.org/sys/index.rss

and my itemRenderer called: CLListView.mxml:

Flex 3 Application Control Bar

admin — Fri, 24 Oct 2008 18:02:00 +0000

Simple demo of the ApplicationControlBar with check and radio marks on active submenu items.

.. and corrected:

Flex 3 AnimateProperty – Sequencing Animation

admin — Wed, 22 Oct 2008 17:54:17 +0000

Simple demonstration to perform a sequence of animation triggered by clicking the image below:

Here is the code out of the editor:

import mx.effects.easing.Bounce;
]]>

Flex 3 DateField Component – Disable Date Range

admin — Tue, 21 Oct 2008 17:43:26 +0000

A little code to disable all dates earlier than yesterday

Here is the code outside of the editor:

private function getDate():void
{
var today:Date = new Date();
var yesterday:Date = new Date(today.fullYear, today.month, today.date-1);
dateField.disabledRanges = [{rangeEnd:yesterday}];
}
]]–>

Flex 3 MouseDown / MouseUp Image Blur Effect

admin — Mon, 20 Oct 2008 18:48:36 +0000

Simply press the image to view the blur effect.

Another view of the code (corrected):

Simple RSS Reading with Flex

admin — Fri, 17 Oct 2008 18:19:12 +0000

This will take in my RSS feed and display the date, title and link to the page. A simple function that allows the row of data to send the user to the respective page.

You know, someday I will take the time to figure out the issues with the special character rendering with my editor, but until then here is a screen cap:

Skinning a Button with Flex 3

admin — Tue, 07 Oct 2008 16:21:40 +0000

Sorry for the formatting of the code, my editor is having issues:

toggle=”true”
color=”0xFFFFAA”
textRollOverColor=”0xAAAA55″
textSelectedColor=”0xFFFF00″
upSkin=”@Embed(source=’assets/buttonUp.gif’)”
overSkin=”@Embed(source=’assets/buttonOver.gif’)”
downSkin=”@Embed(source=’assets/buttonDown.gif’)”
disabledSkin=”@Embed(source=’assets/buttonDisabled.gif’)”
icon=”@Embed(source=’assets/logo.gif’)”/>

Flex Associative Array with an Indexed Array

admin — Wed, 10 Sep 2008 16:40:38 +0000

The associative array are the stock names and the items are representing the indexed array.

var stockDetails:Object = new Object();
stockDetails["AAPL"] = ["+5", "152 Change"];
stockDetails["MCSFT"] = ["-20", "-10 Change", "Another Item"];

Reading the array, you can use a for loop

for ( var stock:String in stockDetails )
{
	trace ( stock + " -> " + stockDetails[stock] );
}

/* Trace:
----------------------
AAPL -> +5,152 Change
MCSFT -> -20,-10 Change,Another Item
*/

Downloading Files with Flex 3

admin — Thu, 28 Aug 2008 17:21:10 +0000

So I was reviewing the documentation over at Adobe for downloading files with Flex – I tweaked the code a little so I can specify the file to download inside my .mxml file rather than the .as file -this demo will download the source files for my papervision with multiple sides demo.

Here is my modified class file, I simply made the DOWNLOAD variable to be a public variable and added this as a parameter to the init function:

package com.example.programmingas3.fileio {
    import flash.events.*;
    import flash.net.FileReference;
    import flash.net.URLRequest;

    import mx.controls.Button;
    import mx.controls.ProgressBar;
    import mx.core.UIComponent;

    public class FileDownload extends UIComponent {

        public var DOWNLOAD_URL:String;
        private var fr:FileReference;
        // Define reference to the download ProgressBar component.
        private var pb:ProgressBar;
        // Define reference to the "Cancel" button which will immediately stop the download in progress.
        private var btn:Button;

        public function FileDownload() {

        }

        /**
         * Set references to the components, and add listeners for the OPEN,
         * PROGRESS, and COMPLETE events.
         */
        public function init(pb:ProgressBar, btn:Button, dURL:String):void {
            // Set up the references to the progress bar and cancel button, which are passed from the calling script.
            this.pb = pb;
            this.btn = btn;

            DOWNLOAD_URL = dURL;

            fr = new FileReference();
            fr.addEventListener(Event.OPEN, openHandler);
            fr.addEventListener(ProgressEvent.PROGRESS, progressHandler);
            fr.addEventListener(Event.COMPLETE, completeHandler);
        }

        /**
         * Immediately cancel the download in progress and disable the cancel button.
         */
        public function cancelDownload():void {
            fr.cancel();
            pb.label = "DOWNLOAD CANCELLED";
            btn.enabled = false;
        }

        /**
         * Begin downloading the file specified in the DOWNLOAD_URL constant.
         */
        public function startDownload():void {
            var request:URLRequest = new URLRequest();
            request.url = DOWNLOAD_URL;
            fr.download(request);
        }

        /**
         * When the OPEN event has dispatched, change the progress bar's label
         * and enable the "Cancel" button, which allows the user to abort the
         * download operation.
         */
        private function openHandler(event:Event):void {
            pb.label = "DOWNLOADING %3%%";
            btn.enabled = true;
        }

        /**
         * While the file is downloading, update the progress bar's status and label.
         */
        private function progressHandler(event:ProgressEvent):void {
            pb.setProgress(event.bytesLoaded, event.bytesTotal);
        }

        /**
         * Once the download has completed, change the progress bar's label and
         * disable the "Cancel" button since the download is already completed.
         */
        private function completeHandler(event:Event):void {
            pb.label = "DOWNLOAD COMPLETE";
            pb.setProgress(0, 100);
            btn.enabled = false;
        }
    }
}

Here is my mxml file: