Search

 

March 2010
S M T W T F S
« Feb   Apr »
 123456
78910111213
14151617181920
21222324252627
28293031  

Tags

Archives


« | Main | »

Flash Builder 4: Create a twitter search UI in minutes!

By Rich Tretola | March 29, 2010
33,611 views

One of the coolest features about the new Flash builder 4 IDE is the code generation abilities for connecting to services and building UI. This was the subject of one of my MAX 2009 sessions and that presentation is still available here.

In this demo,I am going to show how easy it is to create an application that calls twitter search and display the results. I am going to do this without touching the code view within Flash Builder 4.

If you don’t have Flash Builder 4, you can download it for a free trial by visiting http://www.adobe.com/go/try_flashbuilder.

Now simply follow these steps:

Create a new Flash Builder / Flex project called TwitterSearch:
New Flash Builder Flex Project


Set the Application Type as Desktop (runs in Adobe AIR):
Note: The reason we are doing this as an AIR application and not a browser application is due to twitter’s lack of a cross domain policy and not a technical issue with Flash Builder 4.
Select Desktop Application


Switch to Design View
Switch to Design View


Change the Layout to spark.layouts.VerticalLayout
Set the Layout


Within the Data/Services tab select Connect to Data/Service
Connect to Data/Service


Select HTTP as the service type
Select HTTP as the service type


Fill out the form as follows

Within the Operation area, set search as the name and http://search.twitter.com/search.json as the URL. Next click the Add button in the Parameters section and set the name as q. Finally, enter TwitterSearch as the Service name.
Service Settings


Right click on the search method name and choose Configure Return Type
Configure Return Types 1


Leave the Auto detect option as the selected option and click next
Configure Return Types 2


Enter a Value to Auto Detect (I chose the word flex)
Enter a Search Value


Assign a name to the new data type (I chose twitterResults)
Set data type name


Right click on the search method and choose Generate Form
Generate Form 1


Leave all settings as is and click Next
Generate Form 2


Un-check all except query and completed_in within the Results form
Results Form


Your Form is Created
Form is created


Drag a DataGrid from the Components/Controls tab into the form and set the label as results
Add a DataGrid


Right click on DataGrid and choose Bind To Data – select Results as the DataProvider
Bind to Data


Right click on the DataGrid and choose Configure Columns
Configure Columns 1


Remove all but text, from_user, and created_at
Configure Columns 2


Run your Application
Twitter Search Application


OK, so it is clearly not the prettiest twitter search UI I have seen, but it was created in just a few minutes and can easily be skinned into something beautiful. So, if you are so inclined, go ahead and skin the resulting app and I’ll post your screen shots.

Topics: flash builder, Flex, Flex Builder | 13 Comments »

13 Responses to “Flash Builder 4: Create a twitter search UI in minutes!”

  1. uberVU - social comments Says:
    March 29th, 2010 at 12:49 pm

    Social comments and analytics for this post…

    This post was mentioned on Twitter by richtretola: Blogged: Flash Builder 4: Create a twitter search UI in minutes! http://bit.ly/94ymao...

  2. Tweets that mention Flash Builder 4: Create a twitter search UI in minutes! | EverythingFlex: Flex & AIR -- Topsy.com Says:
    March 29th, 2010 at 1:33 pm

    [...] This post was mentioned on Twitter by Rich Tretola, Mrinal Wadhwa, RJ Jacquez, RJ Jacquez, heathrowe and others. heathrowe said: RT @mrinal: RT @richtretola: Flash Builder 4: Create a twitter search UI in minutes! http://bit.ly/94ymao << data services features in FB4 are awesome ! [...]

  3. RJ Owen Says:
    March 29th, 2010 at 2:07 pm

    Hey Rich – great post, but I thought you might want to know that some links are missing or broken in the first paragraph. I’m on Chrome, but your “view that presentation here” link to your Max 2009 post isn’t a link, and it looks like you intended to link to a trial of FB4 that’s also missing. Obviously you should feel free to blow away this comment if it’s just me or you fix it. :) Thanks!

    Reply to this comment

    Rich Tretola Reply:

    I just updated it, sorry about that.

    Reply to this comment

    RJ Reply:

    I see the first link now, but I also still see this:

    “If you don’t have Flash Builder 4, you can download it for a free trial by visiting .”

    Hope this is helpful :)

    Reply to this comment

  4. Creating Twitter UI with FB4 « All Things Flex Says:
    March 30th, 2010 at 4:36 am

    [...] Twitter UI with FB4 March 30, 2010 Leave a comment Go to comments http://blog.everythingflex.com/2010/03/29/flash-builder-4-create-a-twitter-search-ui-in-minutes/#mor... Categories: Flex Comments (0) Trackbacks (0) Leave a comment [...]

  5. Abdessamad IDRISSI Says:
    May 12th, 2010 at 10:20 am

    Thanks Rich,

    Your example is working, and by the way, it is a rare example about using json with fb4, maybe the only one available on the net today!

    Got a question: what if I don’t want to use a datagrid for my results, how can I access properties inside the results array? for example; I want to tape a query and this query outputs , lets say, from_user, out of the first results row and insert it in a textField?.. in other words, is possible to do something like this:
    twitterResults.Results.from_user

    I use your example to create a login application that gets jason data :
    {“isUserLoggedIn”:1,”message”:”logged in successfully”,”user”:{“id”:”2″,”user_role”:”admin”,”user_email”:”aaa@bbbb.com”}}
    and I use vent handler to catch results :
    r__checkLogin(event:ResultEvent)
    I can access the property “isUserLoggedIn” by:
    event.result.isUserLoggedIn
    but can’t acess : event.result.user.user_role

    sorry for the long message and hope ther’s a fix.

    Reply to this comment

    Rich Tretola Reply:

    Sorry for the delay in this response. You can also iterate through the results using a DataGroup. Please see this post:

    http://blog.everythingflex.com/2010/05/19/flash-builder-4-twitter-search-ui-updated/

    Reply to this comment

  6. Flash Builder 4: twitter search UI updated | EverythingFlex: Flex & AIR Says:
    May 19th, 2010 at 6:04 am

    [...] Rich Tretola | May 19, 20103 views So, back in March, I wrote a post showing how to create a Twitter search UI in minutes with Flash Builder 4. There was a comment asking about how to display the results in a more usable format than the [...]

  7. Flash Builder 4: twitter search UI updated | Flash Player roundup Says:
    May 19th, 2010 at 6:09 am

    [...] Rich Tretola: So, back in March, I wrote a post showing how to create a Twitter search UI in minutes with Flash Builder 4. There was a comment asking about how to display the results in a more usable format than the [...]

  8. jhon Says:
    December 29th, 2010 at 6:55 am

    hi
    nice tuts easy to understand
    but in the link “http://search.twitter.com/search.json” why you are using json

    Reply to this comment

    Rich Tretola Reply:

    json is the return type that I chose as it is more efficient than XML.

    Reply to this comment

  9. miagimen Says:
    April 20th, 2011 at 7:10 am

    Is it possible to display the results in a visualizer and if so how would you do that. I have been trying but have no idea how to pull the data from the table. And how to you set it to refresh the search every minutes. Because I am just trying to search for a specific word.

    Reply to this comment

Comments