Creating YouTube App in Flash Builder 4 using PHP Service

Flash Builder 4 has many cool features. One of them is Data Centric Development (DCD). Here is one cool sample app created using Flash Builder 4 beta.

  • Create a Flex Project with PHP Server type as shown in screenshot below

Creating Project.

Creating Project.

  • Enter the WebRoot and RootURL for your Server. I am using MAMP as my server

    .

Enter the Web Root

Enter the Web Root

Click FINISH. Now in order to connect to any data, we are gonna have to create a service for that. Click on ‘Connect to Data/Services’ link in Data/Services View.

Connect to service

Connect to service

  • Select PHP, and enter service name and import the required PHP file

    .

I am using the PHP Code YouTube which i referred from http://www.ibm.com/developerworks/xml/library/x-youtubeapi/ . It basically returns the few entries from the feed it received.

Picture 6

Click on Finish. Now you can see a Service has been created in DataServices view. Context Click on getMostViewed() function and click on ‘Configure return type’. This step is required because in order to bind the returned data, we do need to know the type of the object it returns.

Enter ‘Videos’ as the name of the newly created data type and click next. Change the type of the argument ‘you_url’ to String and enter its value as ‘http://gdata.youtube.com/feeds/api/standardfeeds/top_rated’. You can give any youtube feed as argument to this. This is just to configure our return type. Click Next and finish. The returned Object is analysed now.

  • Binding data to the components

Picture 7

Now we want to Bind this data to a DataGrid component in Flex. Open MXML file, switch to design view. Drag and drop a DataGrid from the components view. And now for the best part. Drag and drop getMostViewed() function from Data/Services view onto the DataGrid. The DataGrid gets bound to the data with appropriate column names. After it switches to source view for you to enter argument, enter any feed you want. Say, ‘http://gdata.youtube.com/feeds/api/standardfeeds/top_rated’. Save the file and just run it.

CONGRATS. You have developed an amazing application within a few minutes. 🙂

If you want to make this application more beautiful, lets do some tiny configurations:)

  • Add a List with many feeds to make this application Dynamic.

Copy the following code and paste it in your MXML file.

<s:List labelField="value" x="44" y="85" id="iList" selectionChanged="dataGrid_creationCompleteHandler(event)" selectedIndex="0">
       <s:dataProvider>
           <mx:ArrayCollection>
              <fx:Object value="Top Rated" url="http://gdata.youtube.com/feeds/api/standardfeeds/top_rated"/>
              <fx:Object value="Top Favourites" url="http://gdata.youtube.com/feeds/api/standardfeeds/top_favorites"/>
              <fx:Object value="Most Viewed" url="http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed"/>
              <fx:Object value="Most Popular" url="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular"/>
              <fx:Object value="Most Responded" url="http://gdata.youtube.com/feeds/api/standardfeeds/most_responded"/>
              <fx:Object value="Most Linked" url="http://gdata.youtube.com/feeds/api/standardfeeds/most_linked"/>
              <fx:Object value="Recently Featured" url="http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured"/>
              <fx:Object value="Watch on Mobile" url="http://gdata.youtube.com/feeds/api/standardfeeds/watch_on_mobile"/>

        </mx:ArrayCollection>
     </s:dataProvider>
</s:List>

Align List and DataGrid accordingly in Design view. Change FlexEvent to Event type in dataGrid_creationCompleteHandler() function. Now instead of hardcoding argument for youtube.getMostViewed() function we will pass List’s selected Item. Replace the argument with iList.selectedItem.url .

Hold on. Don’t run it now. Lets add more colors:). Now we want to show the thumbnail image of the video and add a link to view it in youtube finally.

  • Adding an ItemRenderer for thumbNail column of DataGrid.

Copy the following and edit your MXML file. I have added image as item renderer for thumbNail column and Linkbutton for playerURL.

<mx:DataGrid x="205" y="78" height="384" width="812" id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" 
            dataProvider="{getMostViewedResult.lastResult}" editable="true">
       <mx:columns>
            <mx:DataGridColumn headerText="thumbNail" dataField="thumbNail">
               <mx:itemRenderer>
                <fx:Component>
                 <mx:Image source='{data.thumbNail.toString().split("\"")[1].toString()}'  height="100"/>
                </fx:Component>
              </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="length" dataField="length"/>
            <mx:DataGridColumn headerText="playerURL" dataField="playerURL">
             <mx:itemRenderer>
              <fx:Component>

               <mx:LinkButton label="Watch!" click='navigateToURL(new URLRequest(data.playerURL.toString().split("\"")[1].toString()))'/>
              </fx:Component>
             </mx:itemRenderer>
             </mx:DataGridColumn>
             <mx:DataGridColumn headerText="rating" dataField="rating"/>
             <mx:DataGridColumn headerText="viewCount" dataField="viewCount"/>
       </mx:columns>
</mx:DataGrid>

Now save it and run the application.

You should see something like this –

Picture 10

Advertisements
This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s