You will be building a simple mp3 player that will let the user browse the system files and directories and select a particular mp3 file for playback.

We will be building the application in stages.

There are several ways to develop Apollo application. But here we are going to look at the option that is applicable to the Flex builder users.

Requirement

a) Adobe Flex Builder 2.0.1

b) Apollo Alpha extension for Flex Builder

c) Apollo Alpha runtime

Assumption:

a) It is assumed that you already have downloaded and installed Flex Builder 2.0.1.

b) You have some programming background in Actionscript 3.0 and MXML.

Stage 1 Installation of Apollo extension

Download the Apollo alpha extension (fb_apollo_extensions_win_alpha1.exe) for Flex from http://www.adobe.com/go/getapollo.

Double click on the fb_apollo_extensions_win_alpha1.exe file and follow instructions to complete the installation.

 

Stage 2: Create the apollo project

1 Open Flex Builder 2.0.1.

2 Select File – New – Apollo Project.

New Apollo Project

 

2. This will open the New Apollo Project dialog box.

new Project dialog box

3 The Basic option is selected as default , so click the Next button.

create apollo project

4. In the next page of the dialog box, type ApolloJukeBox as the project name and leave Use Default Loacation selected.Click the Next button.

5. The Application XML Properties panel is displayed.

6. In the panel specify the settings as follows:

  • ID : ApolloJukeBox
  • Name : ApolloJukeBox
  • Publisher : Apollo Publisher
  • Description: It is a simple mp3 player
  • Copyright : 2007

application properties

 

After specifying the details ,click Finish.

The project will be created.In addition to the ApolloJukeBox.mxml file you will see another xml file named ApolloJukeBox -app.xml.

 

Stage 3: Coding the application

Before we start coding the application, we should try to find out if we can segregate the application in smaller blocks. In our case it is a simple mp3 player which enables the user to browse system files for mp3 files, select the desired file and then play and stop the file using buttons.

This shows we can divide the application in following blocks.

Block 1-> Designing the UI of the application

Block 2 -> Browsing the File System and selecting a particular file

Block 3 -> Controlling the playback of the selected file

Block 1: Designing the UI of the application

For the browsing and selecting the file we will use the FileOpenPanel component.

This component can be found in the apollo_alpha1_docs\Samples\TextEditorFlex\com\adobe\apollo\sample
folder.

(If you already have not downloaded the Apollo_alpha1_docs.zip, then download it from adobe labs)

Lets do the Coding.

With the creation of the project you will see Flex has created two files ApolloJukeBox.MXML and ApolloJukeBox -app.xml along with the usual bin folder.

 

We will look at the xml file later.You will see the mxml file contains the code

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute” title=”ApolloJukeBox >

</mx:ApolloApplication>

The <mx:ApolloApplication> means it is an Apollo application.

Write the following code to create a panel and three buttons with labels ‘Open’, ‘Play’, ‘Stop’ :

<mx:Panel x=”112″ y=”68″ width=”243″ height=”200″ layout=”absolute”

label=”Apollo Tunes”>

<mx:Button x=”10″ y=”20″ label=”Open” />

<mx:Button x=”86″ y=”20″ label=”Play” />

<mx:Button x=”157″ y=”20″ label=”Stop” />

</mx:Panel>

Now the code should look like this:

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute” title=”My Apollo Tunes >

<mx:Panel x=”112″ y=”68″ width=”243″ height=”200″ layout=”absolute”

label=”Apollo Tunes”>

<mx:Button x=”10″ y=”20″ label=”Open” />

<mx:Button x=”86″ y=”20″ label=”Play” />

<mx:Button x=”157″ y=”20″ label=”Stop” />

</mx:Panel>

</mx:ApolloApplication>

Now save the file and Click Run.

 

You will see a new window will open up with a label ‘Apollo Tunes’ with three buttons labeled ‘Open’, ‘Play’ and ‘Stop’.

One thing to be noticed here is that the browser did not opened as in the case of Flex application.

Close it and return to do the coding.

We need a Label to display the song name.

Type the following code below the button code:

<mx:Label x=”21″ y=”71″ text=”Song Name”/>

<mx:Label x=”21″ y=”97″ text=”{songName}”/>

The second label will display the selected filename.

Now save the file.Now is the time to put the logic in the application.

Block 2: Browsing the File System and selecting a particular file

For this we wil use the FileOpenPanel component.

Let us first create a new folder called components.

Now right click on the ApolloJukeBox folder and select new from the Menu and select Folder.

new folder

New Folder dialog box will open.

Type the folder name as components and click finish.

Now copy the FileOpenPanel.mxml from the samples folder and paste it in the components folder.

Type the following code:

<mx:Script>

<![CDATA[

import mx.controls.FileSystemList;

import component.FileOpenPanel;

import mx.controls.Alert;

import mx.events.*;

private var currentFile:File; // The currentFile opened by the application

private var defaultFile:File; // The default currentFile

[Bindable]

private var songName:String;

/**

* Handles I/O errors that may come about when opening the currentFile.

*/

private function readIOErrorHandler(event:Event):void {

Alert.show(“The specified currentFile cannot be opened.”, “Error”, Alert.OK, this);

}

/**

* Called when the user clicks the Open button. Opens a pop-up window, in which the user selects a currentFile. See the FileOpenPanel.mxml currentFile.

*/

private function openFile():void

{

var fileOpenPanel:FileOpenPanel;

if (currentFile)

{

fileOpenPanel = FileOpenPanel.show(currentFile.parent);

}

else

{

fileOpenPanel = FileOpenPanel.show(defaultFile.parent);

}

fileOpenPanel.addEventListener(FileEvent.SELECT, fileOpenSelected)

}

private function fileOpenSelected(event:FileEvent):void

{

currentFile = event.file;

songName = currentFile.name;

}

/**

* Called as the event handler for the applicationComplete event of the Application. This method

* sets the position and size of the main window.

*/

private function appCompleteHandler():void

{

defaultFile = File.documentsDirectory.resolve(“test.txt”);

stage.window.width = 500;

stage.window.height = 500;

stage.window.x = 10;

stage.window.y = 10;

stage.window.visible = true;

}

]]>

</mx:Script>

The above code opens the file open panel and displays all the folders and files of current selcted folder .In case no folder has been selected , it makes My Documents the current folder.This happens because currently in alpha version of Apollo default file always points to My documents in windows environment and …… in Mac environment.

If any other directory is selected from the drop down, that becomes the current selected directory to be browsed.Once the files shows in the list box any file can be selected.

Once the file is selected it is assigned to currentFile variable in fileOpenSelected method.

Now lets attach the FileOpen function to the ‘Open’ button so that we can see some action.

Modify the button code from

<mx:Button x=”10″ y=”20″ label=”Open” />

to

<mx:Button x=”10″ y=”20″ label=”Open” click=”openFile()” />

To see the name of the file selected, modify the second label

<mx:Label x=”21″ y=”97″ text=”{songName}”/>

Now save the file and click Run.

Now do a lot of file browsing, once the application is rendered.

Now we have to do some customization to the component to serve our purpose.At present when we click button it filters out text files as default,but we want to filter mp3 files as default.Its easy.Just open the FileOpenPanel.mxml file in the Flex Builder.Go to line number 23

{ label: “Text files”, data: [ “.as”, “.css”, “.htm”, “.html”, “.ini”, “.js”, “.txt”, “.mxml”, “.xml” ]}

Here remove all the file extensions in the array and type “.mp3”.A warning will be thrown asking you if you want to make this file writable .This is because this file is in Read-Only mode.You click yes to make file writable.

Next change the label from “Text files” to “mp3”.

Before we can run the file we need to initiate appCompleteHandler() method which sets the application window as the application runs.Just add this applicationComplete=”appCompleteHandler()” after after title=” ApolloJukeBox ” in the <mx: ApolloApplication > tag.

The code will look as follows

<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute” title=”My Apollo Tunes”

applicationComplete=”appCompleteHandler()”>

That’s all.

Now save the file and run the ApolloJukeBox.mxml file. Try to browse different directories and see if mp3 are filtered or not.

 

Block 2: Controlling the playback of the selected file


This is a really simple affair.Add the following code within <mx:Script> tag.

The codes to be added are given in bold faces.

<mx:Script>

<![CDATA[

import mx.controls.FileSystemList;

import flash.filesystem.*

import component.FileOpenPanel;

import mx.controls.Alert;

import mx.events.*;

import flash.media.Sound;

import flash.media.SoundChannel;

import flash.net.URLRequest;

private var currentFile:File; // The currentFile opened by the application

private var defaultFile:File; // The default currentFile

/**

* Handles I/O errors that may come about when opening the currentFile.

*/

private function readIOErrorHandler(event:Event):void

{

Alert.show(“The specified currentFile cannot be opened.”, “Error”, Alert.OK, this);

}

/**

* Called when the user clicks the Open button. Opens a pop-up window, in which the

* user selects a currentFile. See the FileOpenPanel.mxml currentFile.

*/

private function openFile():void

{

var fileOpenPanel:FileOpenPanel;

if (currentFile)

{

fileOpenPanel = FileOpenPanel.show(currentFile.parent);

}

else

{

fileOpenPanel = FileOpenPanel.show(defaultFile.parent);

}

fileOpenPanel.addEventListener(FileEvent.SELECT, fileOpenSelected)

}

[Bindable]

private var songURL:String ;

[Bindable]

private var songName:String;

private function fileOpenSelected(event:FileEvent):void

{

currentFile = event.file;

songName = currentFile.name;

songURL = currentFile.url ;

}

/**

* Called as the event handler for the applicationComplete event of the Application. This method

* sets the position and size of the main window.

*/

private function appCompleteHandler():void

{

defaultFile = File.documentsDirectory.resolve(“test.txt”);

stage.window.width = 500;

stage.window.height = 500;

stage.window.x = 10;

stage.window.y = 10;

stage.window.visible = true;

}

/**

Creating the mp3 player

*/

private var _sound:Sound;

private var _channel:SoundChannel;

public function startPlay():void {

_sound = new Sound(new URLRequest(songURL));

_channel = _sound.play();

}

public function stopPlay():void {

_channel.stop();

}

]]>

</mx:Script>

The above code creates a sound object and startPlay() function assigns the selected file url as the url of the sound object.Function stopPlay() stops the sound from playing the file.

Special note:

One thing to be remembered here is that url property of the file instance to be used in this case, if the nativePath property is used the mp3 file will not play.


Now assign the startPlay() and stopPlay() functions to the ‘Play’ and ‘Stop’ buttons respectively.

The code should look like as follows:

<mx:Button x=”86″ y=”20″ label=”Play” click=”startPlay()”/>

<mx:Button x=”157″ y=”20″ label=”Stop” click=”stopPlay()”/>

<mx:Label x=”21″ y=”71″ text=”Song Name”/>

<mx:Label x=”21″ y=”97″ text=”{songName}”/>

Here you will see text property of the second label is changed to songName} from {currentFile},that’s because the label will show the mp3 file name which is selected.

Now save the file and your app is ready to run if the problems panel does not show list any errors.

Click run to compile and test the app.

Now select a mp3 file and once the file is selected click ‘Play’ button to start playing. Enjoy the music.

Now that you have built the application ,you would want to distribute it as a package so that others can enjoy music too.

Stage 3 Packaging and distributing the application

It’s the time to give a look at the ApolloJukeBox -app.xml file.open it if it is not opened already in the Flex Builder. It is a simple xml file known as application descriptor file.

In this file you need to provide path to the icon images that you want to associate with the application.

Go to the end of the file .just before </application> you will see </icon> tag.

Here replace the closing icon tag with the following

<icon>

<image16x16>icons/ApolloApp_16.png</image16x16>

<image32x32>icons/ApolloApp_32.png</image32x32>

<image48x48>icons/ApolloApp_48.png</image48x48>

<image128x128>icons/ApolloApp_128.png</image128x128>

</icon>

Create an icons folder just as you earlier created the components folder.Copy the images from apollo_alpha1_docs\Samples\TextEditorFlex\icons folder and paste them in icons folder.

Now select Export option from File Menu.

export

 

The following panel will appear.

export 2

 

Select Deployable AIR File if already not selected and click Next.

export 3

The AIR Deployment Export Wizard appears.It will show all the Apollo projects open in Flex Builder(In the image it shows three projects,but in your case it may show only the current project you are working on).Now select the ApolloJukeBox -app.xml and click Next.The following page opens.

app

 

Click in the icons checkbox to include it with the deployable AIR file.

Click browse button to select the desired export destination where the air file will be saved.

It will show Save As dialog box .Here type ApolloJukeBox.air as the file name and click Save button.

save as

 

The wizard dialog box will appear again.Here click in the icons checkbox to include it with the deployable AIR file.

icons

 

Clicking the save button will return to air dialog box.

Then click Finish to create the AIR file in the desired location.

That’s it.

Your application is ready to be distributed. Others can enjoy their favorite music with your app.


Resources to be explored:

I would like to recommend you go through the following resources for greater understanding.

1. http://labs.adobe.com/wiki/index.php/Apollo:Articles

2. Apollo_for_Adobe_Flex_Developers_Pocket_Guide

3. http://blog.everythingflex.com/apollo/

Download Source file

Download AIR file

 

 

 

 

 

Advertisements