You are currently browsing the category archive for the ‘Apollo’ category.
Title: Repackaging Flickrin to run in AIR
Author: Ashwinee Dash
Description: Flickrin 2.0 is a real world application for searching photos online using Flickr API. Users can save the selected images from the search result.In this article we learn to upgrade this Apollo application to run in the newly upgraded environment named Adobe Integrated Runtime (AIR).
Copyright: 2007, http://www.ashwineedash.com
Link to final application : Flickrin 2.0
Requirements :
c) Flickr API Key
d) Flickrin ver 2.0(source files)
e) AS3 corelib
Assumptions if any:
a) You have downloaded and installed Flex Builder 3 Beta.
b) You have already gone through Flickrin ver 1.0 and 2.0 tutorials.
The apps built with Apollo alpha will not work in the machines where the newly released Adobe Integrated Runtime( AIR) runtime is installed.AIR is the new name for the so long much adored Apollo runtime.It means the apps built using Apollo alpha technology like Flickrin and Apollo mp3 player will not work in this new runtime, unless they are migrated/updated accordingly.So to make these apps work properly in the new environment,I will be updating them soon.The tutorials to build these apps will also be rewritten completely with new explanations wherever required.
As usual the details of the apps will be featured in http://www.ashwineedash.com and the tutorials will be posted here.
In case anyone has provided links to these apps and articles are requested to update the links once they are updated here.
Thanks a lot for using the apps and reading the tutorials/articles.
Name of the tutorial: Saving photos from Flickr to desktop in Flickrin 2
Author: Ashwinee Dash
Description: Flickrin 2.0 is a real world application for searching photos online using Flickr API.Users can save the selected images from the search result.
Copyright: 2007, http://www.ashwineedash.com
Link to final application (if any):http://www.ashwineedash.com/download/Flickrin_2_app.zip
Requirements :
a) Adobe Flex Builder 2.0.1
b) Apollo Alpha extension for Flex Builder
c) Apollo Alpha runtime
d) Flickr API Key
e) Flickrin ver 1.0(source files)
f) AS3 corelib
Assumptions if any:
a) It is assumed that you have already downloaded and installed Flex Builder 2.0.1.
b) You have some programming background in Actionscript 3.0 and MXML.
c) You have already gone through Flickrin ver 1.0 tutorial
Building the application
Task 1: Creating a new state to display selected image
This state appears when the user clicks on one of the thumbnails and displays the medium sized image of the thumbnail.
Type the following code before the </mx:states> tag to create the new state named “dsplayImage” .
<mx:State name=”dsplayImage” basedOn=”thumbnailView”>
<mx:RemoveChild target='{thumbnailsTile}’/>
<mx:AddChild position=”lastChild”>
<mx:Canvas x=”23″ y=”104″ width=”452″ height=”316″ borderStyle=”solid” borderColor=”#004040″ id=”canvas1″>
<mx:Image id=”coverState” verticalCenter=”-2″ horizontalCenter=”0″ scaleContent=”false” autoLoad=”true”/>
</mx:Canvas>
</mx:AddChild>
<mx:AddChild position=”lastChild”>
<mx:Label x=”28″ y=”78″ text=”Title:” id=”label4″ fontWeight=”bold” fontSize=”11″/>
</mx:AddChild>
<mx:AddChild position=”lastChild”>
<mx:Label x=”336″ y=”453″ text=”ashwinee2004@gmail.com” color=”#e4e0c9″ id=”label3″/>
</mx:AddChild>
<mx:AddChild position=”lastChild”>
<mx:SetProperty name=”width” value=”500″/>
<mx:SetProperty name=”height” value=”500″/>
<mx:RemoveChild target=”{label1}”/>
<mx:AddChild position=”lastChild” target=”{label1}”/>
<mx:SetProperty target=”{label1}” name=”x” value=”45″/>
<mx:SetProperty target=”{label1}” name=”y” value=”19″/>
<mx:RemoveChild target=”{label2}”/>
<mx:AddChild position=”lastChild” target=”{label2}”/>
<mx:SetProperty target=”{label2}” name=”x” value=”126″/>
<mx:SetProperty target=”{label2}” name=”y” value=”19″/>
<mx:RemoveChild target=”{searchPanel}”/>
<mx:RemoveChild target=”{label5}”/>
<mx:AddChild position=”lastChild”>
<mx:LinkButton x=”173″ y=”428″ label=”Back to Thumbnail View” click=”currentState=’thumbnailView'”/>
</mx:AddChild>
<mx:AddChild position=”lastChild”>
<mx:Label x=”61″ y=”79″ id=”title1″/>
</mx:AddChild>
</mx:State>
The above code creates a new state named “dsplayImage” based on Thumbnail view state. The main purpose here is to show the medium sized image of the thumbnail selected by the user. The image object is placed inside the canvas container for image display. Out of the three label tags, the label with id “title1” displays the title of the image.
Either by clicking on the image itself or using the link button the user can return to the parent thumbnail view.
Clicking on the image method seems cool but first time users may not be able to detect it, so for them the link button is there.
Task 2: Displaying the selected image in dsplayImage view
The user has to click on the image to view the bigger image in dsplayImage view.For this we need to attach a click event to the thumbnail.
Step 1: Adding the click event to the thumbnail
Initial code
<comp:ThumbnailDisplay thumbnaillData=”{displayRpt.currentItem}” />
Modified code
<comp:ThumbnailDisplay thumbnaillData=”{displayRpt.currentItem}” click=”displayImageDetails(event.currentTarget.getRepeaterItem())”/>
When the thumbnail is clicked the displayImage function is called and event.currentTarget.getRepeaterItem() is passed as its parameter.
Step 2: Declare the displayImageDetails function
Add the following code before the </mx:script> tag.
public var selectedCover:Object;
private function displayImageDetails(selectedThumb:Object):void {
currentState=’dsplayImage’;
selectedCover = new Object();
selectedCover = selectedThumb;
title1.text = selectedCover.title;
coverState.load(“http://farm” + selectedCover.farm + “.static.flickr.com/” + selectedCover.server + “/” + selectedCover.id + “_” + selectedCover.secret + “_m.jpg”)
}
The image object need an URL to display the image. In this case the URL is to be formed in the specific format which Flickr api accepts i.e., http://farm%5Bfarm_id%5D.static.flickr.com/%5Bserver_id%5D/%5Bid%5D_%5Bsecret_id%5D_m.jpg
The _m here means medium sized image is to be fetched. For more information visit http://www.flickr.com/services/api
When the thumbnail is clicked it passes all the required info as the parameter to the function. Once the function receives the info, it assigns those info to our generic object selectedCover. The load method of Image object interprets selectedCover object properties and loads the image.
Now save the file and hit Run.
Task 3: Saving the file
Saving the image means writing the image file to the disk.the image loaded can not be saved to the disk without encoding the image into jpeg format.For this we need corelib library.
Step 1: Setting the library path
Get the corelib from http://as3corelib.googlecode.com/files/corelib-.90.zip .We will require it to encode jpgs.Unzip the corelib.zip to a location in your hard disk.
Create a new folder named “lib” by right clicking on the project folder in Navigator panel. Now copy the “corelib.swc” file from the “bin” folder of the unzipped corelib folder.and paste it in the newly created “lib” folder of the project. Flex builder still needs to know that corelib is associated with this project. This can be done by setting the library path to the library.
Right click on the project and select properties from the menu.
The properties dialog box will open.
Now select Apollo Build path from the list displayed at the right hand side of the dialog box.
Select the Library path by clicking on it.
Now click on Add SWC button.Now the Add SWC dialog box will open up.
Now click on the Browse button.
Choose a SWC File dialog box opens up.Select the corelib.swc file from the lib folder.(Remember you have pasted the file in the Flex Builder) and click on the Open button.
Now you will return to the Add SWC dialog box showing the library path. Click OK.
Now you can see the library added to the Build path libraries.
Step 3: Coding to save the image to the hard disk.
Type the following code within the <mx:script> tags
import adobe.com.images.*
private var file:File;
public function saveImg():void {
file = File.desktopDirectory;
file.addEventListener(Event.SELECT, onFileSave);
file.download(new URLRequest(“http://foo/foo”), “untitled.jpg”);
}
A variable named file is created.When saveImg() method is called it creates a refernce to the user’s desktop.It requests to download a file named untitled.jpg from the bogus http address.Usually when file is downloaded from the browser, the save file dialog box is opened.The location to save file is always the location where the file was last downloaded and the files name and type is always based on the downloaded file. So when we use download method of file object we are opening the file save dialog box.The download method takes two parameters one the url and another the filename .The location to save is pointed to the user’s desktop.When the user chooses a location to save the file, the onFileSave function is called.
Continue adding the following code to the above written code.
public function onFileSave(e:Event):void {
file.cancel();
var bmpData:BitmapData = new BitmapData(coverState.width, coverState.height);
bmpData.draw(coverState);
var jpgEncoder:JPGEncoder = new JPGEncoder();
var jpgBytes:ByteArray = jpgEncoder.encode(bmpData);
var stream:FileStream = new FileStream();
stream.open(file, FileMode.WRITE);
stream.writeBytes(jpgBytes, 0, jpgBytes.length);
stream.close();
The first thing it does is to cancel the file download, as both the url and the file do not exist.
Next it creates a new BitmapData object with the width and height of the image choosen to save.the draw method copies all the pixels information onto the bitmapdata object. JPGEncoder api encodes all pixel data into into jpeg format and a bytearray object is created to contain the jpeg data for writing to the file.
FileStream object opens the file for reading or writing based on filemode defined as READ or WRITE .When WRITE is used the file stream opens the existing file for overwriting.If there is no existing file, it creates one. stream.writeBytes writes the file and stream.close() saves and closes the file.
Now save the mxml file .
Task 4: Adding the “Save” button to save the image.
Now we will add the save button to save the image. So add the following piece of code within the dsplayImage state before </mx:state> code.
<mx:AddChild position=”lastChild”>
<mx:Button x=”421″ y=”77″ label=”Save” click=”saveImg()” height=”19″ color=”#004040″/>
</mx:AddChild>
Now save the file and run it.
Task 7: Packaging and distributing the application
Create the AIR file using Export option from File Menu. Once the file is created ,it can be distributed as such (Details of exporting the file is discussed in Flickrin ver 1 tutorial).
References:
I would like to recommend you go through the following resources for greater understanding.( All the credit for saving images should go to David and Daniel equally for sharing the source codes with us all. Thanks a lot.)
1. http://labs.adobe.com/wiki/index.php/Apollo:Articles
2. Apollo_for_Adobe_Flex_Developers_Pocket_Guide
3. http://blog.everythingflex.com/apollo/
4. Creating a mp3 player in Apollo and Flex 2
5. http://www.danieldura.com/archive/apollo-native-file-dialogs#more-182
6. http://blog.davr.org/2007/03/28/native-file-browse-dialog-in-apollo/
7. https://flnotes.wordpress.com/2007/04/05/flickrin-ver-10-flex-flickr-apollo-mashup-tutorial/
Name of the tutorial: Flickrin ver 1.0 Tutorial
Author: Ashwinee Dash
Description: Flickrin is a real world application for searching photos online using Flickr API.
Copyright: 2007, http://www.ashwineedash.com
Link to final application :http://www.ashwineedash.com/download/flickrin1.0.zip
Requirements :
a) Adobe Flex Builder 2.0.1
b) Apollo Alpha extension for Flex Builder
c) Apollo Alpha runtime
d) Flickr API Key
Assumptions if any:
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.
Body of tutorial:
What is Flickrin?
Flickrin is a real world application for searching photos online using Flickr API. Currently in version 1.0, the user can do a basic keyword search for thumbnails.
What is an API ?
API stands for “Application Programming Interface,”.In other words it means if you build an application which will use services or access resources of a certain application as in this case Flickr, you have to use the specified methods provided in the APIs being used.
How to use API?
To use api you need to obtain an api key. For obtaining the key visit http://www.flickr.com/services/api
Building the application
Task 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.
Task 2: Create the apollo project
1 Open Flex Builder 2.0.1. Select File – New – Apollo Project.
2. This will open the New Apollo Project dialog box.In the dialog box Basic option is selected as default , so click the Next button.
3. In the next page of the dialog box, type Flickrin as the project name and leave Use Default Loacation selected. Click the Next button and this will open up the Application XML Properties panel.
In the panel specify the settings as follows:
ID : Flickrin
Name : Flickrin ver 1.0
Publisher : ashwineedash.com (you can use your own name here)
Description: Online Photo search application using Flickr API
Copyright : 2007
The New Apollo Project dialog box should look as shown in figure 1
image goes here
After specifying the details, click Finish button.
The project will be created and opened in the Flex Builder.
In addition to the Flickrin.mxml file you will see another xml file named Flickrin-app.xml. It is the descriptor file for your application.
Task 3 : Building the User Interface.
The finished application has two screens or states as shown in figure 2 and figure 3
(figure 2)
(figure 3)
Step 1 Changing the default look
In the mxml file you will see the following code Flex Builder has written for you.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
</mx:ApolloApplication>
First thing we need to do is to give our application a new look and a specific size. Now type backgroundGradientColors=”[#ffffff, #ffffff]” width=”500” and height=”500” after layout=”absolute” in <mx:ApolloApplication> tag.
Initial code
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
Modified code
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” backgroundGradientColors=”[#ffffff, #ffffff]” width=”500” and height=”500”>
Save the file and run it.You will see the application with the background set to white as shown in figure 4.
figure 4
Step 2 Building the First Screen
We will first create a panel to contain the labels, textinput and button. The labels will display the title of the application. The TextInput will be for typing the search word and the button to start the search.
Type the following code
<mx:Panel width=”250″ height=”200″ layout=”absolute” borderStyle=”outset” id=”searchPanel” x=”132″ y=”124″>
<mx:Label x=”60″ y=”12″ text=”Flickr” id=”label1″ color=”#0000ff” fontSize=”25″ fontWeight=”bold” fontFamily=”Georgia”/>
<mx:Label x=”138″ y=”12″ text=”in” id=”label2″ color=”#ff0080″ fontWeight=”bold” fontSize=”25″ fontFamily=”Georgia” height=”35″/>
<mx:TextInput x=”33″ y=”51″ id=”fTags”/>
<mx:Button x=”83″ y=”81″ label=”Search” id=”searchBtn” />
</mx:Panel>
Initial Code
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” backgroundGradientColors=”[#ffffff, #ffffff]” width=”500” and height=”500”>
</mx:ApolloApplication>
Modified code
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” backgroundGradientColors=”[#ffffff, #ffffff]” width=”500” and height=”500”>
<mx:Panel width=”250″ height=”200″ layout=”absolute” borderStyle=”outset” id=”searchPanel” x=”132″ y=”124″>
<mx:Label x=”60″ y=”12″ text=”Flickr” id=”label1″ color=”#0000ff” fontSize=”25″ fontWeight=”bold” fontFamily=”Georgia”/>
<mx:Label x=”138″ y=”12″ text=”in” id=”label2″ color=”#ff0080″ fontWeight=”bold” fontSize=”25″ fontFamily=”Georgia” height=”35″/>
<mx:TextInput x=”33″ y=”51″ id=”fTags”/>
<mx:Button x=”83″ y=”81″ label=”Search” id=”searchBtn” />
</mx:Panel>
</mx:ApolloApplication>
Now we can save the file and run it to see if the screen looks like as expected.
If everything looks OK, we can go for building the second screen.
Step 3 Building the Second State
What is a state?
Actually in flex there no such concept of first screen, second screen and so on. Here you will find a new concept called states. You can think of them as HTML pages or frames in timeline in Flash. In case of HTML, usually the user goes to a next page when he clicks a hyperlink or some kind of button. In case of Flash this page concept is simulated by letting the user move from one frame to another in the timeline. But here the user will move from one state to another.
Each state holds the information of the containers and components that is to be displayed in the stage. This is achieved by removing, adding and modifying the properties of the components and containers.
BaseState is the default state which is created each time a new project is created. Whatever components and containers we add to the Stage becomes part of the Base State by default.
The new state:
Here the thumbnails would appear with the option to search.Refer figure 3.
Type the following code to create the new state
<mx:states>
<mx:State name=”thumbnailView”>
<mx:SetProperty target=”{searchPanel}” name=”x” value=”10″/>
<mx:SetProperty target=”{searchPanel}” name=”y” value=”10″/>
<mx:SetProperty target=”{searchPanel}” name=”height” value=”84″/>
<mx:SetProperty target=”{searchPanel}” name=”width” value=”474″/>
<mx:SetProperty target=”{fTags}” name=”x” value=”167″/>
<mx:SetProperty target=”{fTags}” name=”y” value=”3″/>
<mx:SetProperty target=”{searchBtn}” name=”x” value=”335″/>
<mx:SetProperty target=”{searchBtn}” name=”y” value=”4″/>
<mx:SetProperty target=”{label1}” name=”x” value=”39″/>
<mx:SetProperty target=”{label1}” name=”y” value=”-6″/>
<mx:SetProperty target=”{label2}” name=”x” value=”118″/>
<mx:SetProperty target=”{label2}” name=”y” value=”-6″/>
<mx:SetProperty name=”width” value=”500″/>
<mx:SetProperty name=”height” value=”500″/>
</mx:State>
</mx:states>
The above code creates a new state called “thumbnailView” .The Panel container is resized positioned at the top.The stage size remains same.
Now add the following code before </mx:State> to add the Tile component to display the thumbnails that we request from Flickr .
<mx:AddChild position=”lastChild”>
<mx:Tile width=”474″ id=”thumbnailsTile” x=”10″ y=”114″ height=”345″ borderStyle=”none” borderColor=”#800040″ cornerRadius=”0″ backgroundColor=”#ffffff”>
</mx:Tile>
</mx:AddChild>
This completes our task of building the User Interface and the complete code should look like as follows:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” backgroundGradientColors=”[#ffffff, #ffffff]” xmlns:comp=”components.*” width=”500″ height=”500″>
<mx:states>
<mx:State name=”thumbnailView”>
<mx:SetProperty target=”{searchPanel}” name=”x” value=”10″/>
<mx:SetProperty target=”{searchPanel}” name=”y” value=”10″/>
<mx:SetProperty target=”{searchPanel}” name=”height” value=”84″/>
<mx:SetProperty target=”{searchPanel}” name=”width” value=”474″/>
<mx:SetProperty target=”{fTags}” name=”x” value=”167″/>
<mx:SetProperty target=”{fTags}” name=”y” value=”3″/>
<mx:SetProperty target=”{searchBtn}” name=”x” value=”335″/>
<mx:SetProperty target=”{searchBtn}” name=”y” value=”4″/>
<mx:SetProperty target=”{label1}” name=”x” value=”39″/>
<mx:SetProperty target=”{label1}” name=”y” value=”-6″/>
<mx:SetProperty target=”{label2}” name=”x” value=”118″/>
<mx:SetProperty target=”{label2}” name=”y” value=”-6″/>
<mx:Tile width=”474″ id=”thumbnailsTile” x=”10″ y=”114″ height=”345″ borderStyle=”none” borderColor=”#800040″ cornerRadius=”0″ backgroundColor=”#ffffff”>
</mx:Tile>
</mx:AddChild>
<mx:SetProperty name=”width” value=”500″/>
<mx:SetProperty name=”height” value=”500″/>
</mx:State>
</mx:states>
<mx:Panel width=”250″ height=”200″ layout=”absolute” borderStyle=”outset” id=”searchPanel” x=”132″ y=”124″>
<mx:Label x=”60″ y=”12″ text=”Flickr” id=”label1″ color=”#0000ff” fontSize=”25″ fontWeight=”bold” fontFamily=”Georgia”/>
<mx:Label x=”138″ y=”12″ text=”in” id=”label2″ color=”#ff0080″ fontWeight=”bold” fontSize=”25″ fontFamily=”Georgia” height=”35″/>
<mx:TextInput x=”33″ y=”51″ id=”fTags”/>
<mx:Button x=”83″ y=”81″ label=”Search” id=”searchBtn” />
</mx:Panel>
</mx:ApolloApplication>
Task 4: Making the connection with Flickr
Let’s first see how our application works.
The user types a keyword in the search text box and then clicks the search button.The application then sends the request with the given parameters and fetches the results.The query result received is in the format of xml. The url of each individual image is to be formed from each record and assigned to the image component for displaying the thumbnails.
We will use flickr.photo.search method to send the request to search for photos with a specific tag to Flickr server.
A word about Flickr API request format
Flickr api requires the request should be sent in the following format
http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value
(for details visit http://www.flickr.com/services/api/request.rest.html )
In the same manner the photo search method would be
(for details about parameters visit http://www.flickr.com/services/api/flickr.photos.search.html )
For sending the request we will use methods and properties of HTTPService class.
Type the following code after the </mx:states> tag.
<mx:HTTPService id=”searchFlickr” url=”http://api.flickr.com/services/rest/” method=”GET” showBusyCursor=”true” >
<mx:request xmlns=””>
<method>flickr.photos.search</method>
<api_key>YOUR API KEY HERE</api_key>
<text>{search_tags}</text>
<per_page>20</per_page>
</mx:request>
</mx:HTTPService>
Special Note
In the above code replace your api key with YOUR API KEY HERE in <api_key>YOUR API KEY HERE</api_key> tag, otherwise it will not work.
To initiate the http service create the following function
<mx:Script>
<![CDATA[
import mx.rpc.events.*;
import mx.collections.*;
[Bindable]
private var search_tags:String;
private function startSearch():void {
search_tags = fTags.text;
searchFlickr.send();
currentState = ‘thumbnailView’;
}
]]>
</mx:Script>
Then assign the startSearch() function to the search button.
When the the search button is clicked the startSearch() function is called.this function assigns the string value of the fTags textInput to the search_tags and then makes the http request with given parameters.After sending the request, the state is changed to thumbnailView.
Now we need a way to display all the thumbnails.
Displaying thumbnails from Flickr is a little tricky as the direct url is not provided in the xml file that is received as response to photo search query.The url has to be formed by joining the various attribute values in a specific format. As showing all the images from the query result requires some looping, we can use the repeater component for this task.Though repeater component will do the needful,it still requires a image display component for thumbnail display.
Let’s create the custom image display component.
Task 5: Creating the custom component
Right click on the project Flickrin in the Navigator pane and select New – Folder from the menu. In the New Folder dialog box that will open up type components as folder name and click Finish.
In the same manner right click on the components folder and create a new MXML component.
In the component dialog box type the name ImageDisplay and Base it on Image.Click OK to create the component.
Figure 5
A new fille named ImageDisplay now appears inside components folder.Double click on it to open it in the Flex Builder.
The following code is already written for you.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Image xmlns:mx=”http://www.adobe.com/2006/mxml” >
</mx:Image>
The Image class has a property called source which takes the url of the image to be displayed.In this case the image to be displayed exists in the Flickr server. The url of the image is to be formed as specified by Flickr api in the following manner
http://farm%5Bfarm_id%5D.static.flickr.com/%5Bserver_id%5D/%5Bid_id%5D_%5Bsecret_id%5D_t.jpg
for completr information visit http://www.flickr.com/services/api/……
Type the following code to declare a variable.
<mx:Script>
<![CDATA[
[Bindable]
public var flickrImageData:Object;
]]>
</mx:Script>
Type the following code inside <mx:Image> tag to form the required url each time the repeater component calls this custom component.
source=”http://farm{flickrImageData.farm}.static.flickr.com/{flickrImageData.server}/{flickrImageData.id}_{flickrImageData.secret}_t.jpg
Now the complete code should look like this
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Image xmlns:mx=”http://www.adobe.com/2006/mxml” source=”http://farm{flickrImageData.farm}.static.flickr.com/{flickrImageData.server}/{flickrImageData.id}_{flickrImageData.secret}_t.jpg”>
<mx:Script>
<![CDATA[
[Bindable]
public var flickrImageData:Object;
]]>
</mx:Script>
</mx:Image>
Now save the file.
Task 6: Using custom component in main application file
Inside the <ApolloApplication> tag type the following code
xmlns:comp=”components.*”
It links the main application file to the custom component.
Now create a Repeater component and give it an id displayRpt.
<mx:Repeater id=”displayRpt” dataProvider=”{searchFlickr.lastResult.rsp.photos.photo}”>
<comp:ImageDisplay flickrImageData=”{displayRpt.currentItem}” />
</mx:Repeater>
The repeater component needs data source to loop through and in this case the query result happens to our data source. For each record in the data source the ImageDisplay component is called and the record value is passed to its flickrImageData property.
The ImageDisplay component is based on Image component and that means it can load an image provided it has access to the url of the image.
The complete code should look like as follows:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” backgroundGradientColors=”[#ffffff, #ffffff]” xmlns:comp=”components.*” width=”500″ height=”500″>
<mx:Script>
<![CDATA[
import mx.rpc.events.*;
import mx.collections.*;
import mx.controls.*;
[Bindable]
private var search_tags:String;
private function prepareSearch():void {
search_tags = fTags.text;
searchFlickr.send();
currentState = ‘thumbnailView’;
}
private function faultHandler(evt:FaultEvent):void {
Alert.show(“error opening file”)
}
]]>
</mx:Script>
<mx:states>
<mx:State name=”thumbnailView”>
<mx:SetProperty target=”{searchPanel}” name=”x” value=”10″/>
<mx:SetProperty target=”{searchPanel}” name=”y” value=”10″/>
<mx:SetProperty target=”{searchPanel}” name=”height” value=”84″/>
<mx:SetProperty target=”{searchPanel}” name=”width” value=”474″/>
<mx:SetProperty target=”{fTags}” name=”x” value=”167″/>
<mx:SetProperty target=”{fTags}” name=”y” value=”3″/>
<mx:SetProperty target=”{searchBtn}” name=”x” value=”335″/>
<mx:SetProperty target=”{searchBtn}” name=”y” value=”4″/>
<mx:SetProperty target=”{label1}” name=”x” value=”39″/>
<mx:SetProperty target=”{label1}” name=”y” value=”-6″/>
<mx:SetProperty target=”{label2}” name=”x” value=”118″/>
<mx:SetProperty target=”{label2}” name=”y” value=”-6″/>
<mx:AddChild position=”lastChild”>
<mx:Tile width=”474″ id=”thumbnailsTile” x=”10″ y=”114″ height=”345″ borderStyle=”none” borderColor=”#800040″ cornerRadius=”0″ backgroundColor=”#ffffff”>
<mx:Repeater id=”displayRpt” dataProvider=”{searchFlickr.lastResult.rsp.photos.photo}”>
<comp:ThumbnailDisplay thumbnaillData=”{displayRpt.currentItem}”/>
</mx:Repeater>
</mx:Tile>
</mx:AddChild>
<mx:SetProperty name=”width” value=”500″/>
<mx:SetProperty name=”height” value=”500″/>
</mx:State>
</mx:states>
<mx:HTTPService id=”searchFlickr” url=”http://api.flickr.com/services/rest/” method=”GET” showBusyCursor=”true” fault=”faultHandler(event)”>
<mx:request xmlns=””>
<method>flickr.photos.search</method>
<api_key>YOUR API KEY HERE</api_key>
<text>{search_tags}</text>
<per_page>20</per_page>
</mx:request>
</mx:HTTPService>
<mx:Panel width=”250″ height=”200″ layout=”absolute” borderStyle=”outset” id=”searchPanel” x=”132″ y=”124″>
<mx:Label x=”60″ y=”12″ text=”Flickr” id=”label1″ color=”#0000ff” fontSize=”25″ fontWeight=”bold” fontFamily=”Georgia”/>
<mx:Label x=”138″ y=”12″ text=”in” id=”label2″ color=”#ff0080″ fontWeight=”bold” fontSize=”25″ fontFamily=”Georgia” height=”35″/>
<mx:TextInput x=”33″ y=”51″ id=”fTags”/>
<mx:Button x=”83″ y=”81″ label=”Search” id=”searchBtn” click=”prepareSearch()”/>
</mx:Panel>
</mx:ApolloApplication>
Now save the file and run it.
Task 7: Packaging and distributing the application
It is the easiest thing to do.
Select Export option from File Menu. The following panel will appear.
Select Deployable AIR File if already not selected and click Next.
The AIR Deployment Export Wizard appears.It will show all the Apollo projects open in Flex Builder.Now select the Flickrin -app.xml and type the destination where the .air file will be saved.
Then click Finish to create the AIR file in the desired location.
That’s it.
Now the application is ready to be distributed. Let others do some flickrin.
References:
I would like to recommend the following resources for better 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/
4. Creating a mp3 player in Apollo and Flex 2
Alternative downloads of source file
http://rapidshare.com/files/24437028/Flickrin_1_src_files.zip.html
This is the third tutorial in the Apollo JukeBox mp3 player series.The first one being Creating a mp3 player in Apollo and Flex 2 and the second one is Making the mp3 player Window Transparent. As this tutorial uses and modifies the code used in Making the mp3 player Window Transparent tutorial, please go through it before proceeding further.
In this tutorial we will use the Native Window properties and methods to display id3 tag info of an mp3 file.
See the screenshot of the app below
This process of feature addition can be divided into 4 smaller tasks as follows:
Task 1: Creating the native window
Task 2: Creating the text field in the window to display id3 info
Task 3: Retrieving the id3 info for display
Task 4: Preventing the user to display null value in window
Task 1: Creating a native Window using NativeWindowInitOption() feature.
Creating a native window in Apollo is easier than you think.
Open the ApolloJukeBox.mxml file in Flex Builder.
Type the following code before </Panel> tag.
<mx:Button x=”164″ y=”42″ label=”ID3″ fontFamily=”Georgia” fontSize=”12″ fontStyle=”italic” click=”createNewWindow()” id=”snId”/>
This creates a button with id as “snId” and sets its label as “ID3”.When this button is clicked it calls “createWindow()” function.
Now lets define the custom createWindow() function.
Type the following code before the </mx:Script> tag.
private function createNewWindow():void{
var wOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
wOptions.systemChrome = NativeWindowSystemChrome.STANDARD;
wOptions.transparent = false;
var newWindow:NativeWindow = new NativeWindow(true, wOptions);
This will open a blank window displaying standard chrome (OS dependent) and it will have opaque background.
Task 2 Creating the text field in the window to display id3 info
To display the id3 info of selected mp3 file, modify the above code to look like this.
import flash.display.Sprite;
import flash.text.TextField;
private function createNewWindow():void{
var wOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
wOptions.systemChrome = NativeWindowSystemChrome.STANDARD;
wOptions.transparent = false;
var newWindow:NativeWindow = new NativeWindow(true, wOptions);
var field:TextField = new TextField();
field.borderColor = 0x000ccc;
field.autoSize = TextFieldAutoSize.CENTER;
field.text = “Album:” + songId3al + “\n” +”Artist:”+ songId3at + “\n” +”Genre:” + songId3gn + “\n” +”Songname:” + songId3sn + “\n” + “Track:” + songId3tr + “\n” + “Year:” + songId3yr + “\n” + “Comments:” + songId3ct;
newWindow.stage.addChild(field);
}
Here a new text field is created and it is added to the window , otherwise it will not be displayed in the window. The id3 info is passed to the text property of the text field instance as string.
Task 3: Retrieving the id3 info for display
Type the following code for declaring variables required for storing the id3 info.
[Bindable]
private var songId3al:String;
[Bindable]
private var songId3at:String;
[Bindable]
private var songId3gn:String;
[Bindable]
private var songId3sn:String;
[Bindable]
private var songId3tr:String;
[Bindable]
private var songId3yr:String;
[Bindable]
private var songId3ct:String;
Now modify the startPaly() function as follows:
private function startPlay():void {
_sound = new Sound(new URLRequest(songURL));
_channel = _sound.play();
_sound.addEventListener(Event.ID3, onID3);
}
Define the event listener function onID3() as follows
public function onID3(event:Event):void {
songId3al = _sound.id3.album;
songId3at = _sound.id3.artist;
songId3gn = _sound.id3.genre;
songId3sn = _sound.id3.songName;
songId3tr = _sound.id3.track;
songId3yr = _sound.id3.year;
songId3ct = _sound.id3.comment;
}
Once the id3 info is loaded the sound instance will call onID3() function which will assign various id3 properties to the variables.
Task 4: Preventing the user to display null value in window
As id3 info will not be assigned to the variables until unless the mp3 file is played, clicking the id3 button will display null value in the window.This will not be a good experience for the user.So we have to keep the button disable until the selected mp3 file is played
To do this the code needs to be modified at three places in three steps.
Step 1: Change the code from
<mx:Button x=”164″ y=”42″ label=”ID3″ fontFamily=”Georgia” fontSize=”12″ fontStyle=”italic” click=”createNewWindow()” id=”snId”/>
To
<mx:Button x=”164″ y=”42″ label=”ID3″ fontFamily=”Georgia” fontSize=”12″ fontStyle=”italic” click=”createNewWindow()” enabled=”false” id=”snId”/>
Step 2: Change the startPlay() function from
private function startPlay():void {
_sound = new Sound(new URLRequest(songURL));
_channel = _sound.play();
_sound.addEventListener(Event.ID3, onID3);
}
To
private function startPlay():void {
_sound = new Sound(new URLRequest(songURL));
_channel = _sound.play();
_sound.addEventListener(Event.ID3, onID3);
snId.enabled = true;
}
Step 3: Change the stopPlay() function from
public function stopPlay():void {
_channel.stop();
}
To
public function stopPlay():void {
_channel.stop();
snId.enabled = false;
}
We are done.
Now save the ApolloJukeBox.mxml file and press Run to compile the file.
Now test the app with a properly tagged mp3 file to see id3 info in a new window.
Now export the app and distribute it.
Something for you to do:
Modify the code so that the native window closes automatically when the user clicks “Stop” button to stop the mp3 being played.
(Hint: Follow Rich Tretola’s Windowing with Apollo tutorial.)
Alternative Download link (use it when the above download link does not work).
http://rapidshare.com/files/23012587/ApolloJukeBox3_source.zip.html
FlexNotes 
