Search

 

May 2010
S M T W T F S
« Apr   Jun »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Tags

Archives


« | Main | »

Flash Builder 4: twitter search UI updated

By Rich Tretola | May 19, 2010
7,315 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 DataGrid that was shown.

The original output looked like this:

Twitter Search Application


The main application file looked like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:twittersearch="services.twittersearch.*" xmlns:valueObjects="valueObjects.*">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
           
            protected function button_clickHandler(event:MouseEvent):void
            {
                searchResult.token = twitterSearch.search(qTextInput.text);
            }
           
           
            protected function button2_clickHandler(event:MouseEvent):void
            {
                twitterResults.query = queryTextInput.text;
                twitterResults.completed_in = parseFloat(completed_inTextInput.text);
            }
           
        ]]>
    </fx:Script>
    <fx:Declarations>
        <twittersearch:TwitterSearch id="twitterSearch" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
        <s:CallResponder id="searchResult" result="twitterResults = searchResult.lastResult as TwitterResults"/>
        <valueObjects:TwitterResults id="twitterResults"/>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <mx:Form defaultButton="{button}">
        <mx:FormItem label="Q">
            <s:TextInput id="qTextInput"/>
        </mx:FormItem>
        <s:Button label="Search" id="button" click="button_clickHandler(event)"/>
    </mx:Form>
    <mx:Form defaultButton="{button2}">
        <mx:FormHeading label="TwitterResults"/>
        <mx:FormItem label="Query">
            <s:TextInput id="queryTextInput" text="{twitterResults.query}"/>
        </mx:FormItem>
        <mx:FormItem label="Completed_in">
            <s:TextInput id="completed_inTextInput" text="{twitterResults.completed_in}"/>
        </mx:FormItem>
        <s:Button id="button2" label="Submit" click="button2_clickHandler(event)"/>
    </mx:Form>
    <mx:DataGrid id="dataGrid" dataProvider="{searchResult.lastResult.results}">
        <mx:columns>
            <mx:DataGridColumn headerText="text" dataField="text"/>
            <mx:DataGridColumn headerText="from_user" dataField="from_user"/>
            <mx:DataGridColumn headerText="created_at" dataField="created_at"/>
        </mx:columns>
    </mx:DataGrid>
   
</s:WindowedApplication>

To make this a more user friendly readable user interface, I have removed the TwitterResults, DataGrid, and button2_clickHandler method and added a DataGroup with an itemRenderer assigned.

Here is the updated code for the main application file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:twittersearch="services.twittersearch.*" xmlns:valueObjects="valueObjects.*">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
           
            protected function button_clickHandler(event:MouseEvent):void
            {
                searchResult.token = twitterSearch.search(qTextInput.text);
            }          
        ]]>
    </fx:Script>
    <fx:Declarations>
        <twittersearch:TwitterSearch id="twitterSearch" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
        <s:CallResponder id="searchResult" result="twitterResults = searchResult.lastResult as TwitterResults"/>
        <valueObjects:TwitterResults id="twitterResults"/>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <mx:Form defaultButton="{button}">
        <mx:FormItem label="Q">
            <s:TextInput id="qTextInput"/>
        </mx:FormItem>
        <s:Button label="Search" id="button" click="button_clickHandler(event)"/>
    </mx:Form>
   
    <s:Scroller width="100%" height="400">
        <s:DataGroup itemRenderer="TwitterItemRenderer" dataProvider="{searchResult.lastResult.results}">
            <s:layout>         
                <s:VerticalLayout/>
            </s:layout>
        </s:DataGroup>
    </s:Scroller>
   
</s:WindowedApplication>

Here is the TwitterItemRenderer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="true" width="100%">
    <s:layout>
        <s:VerticalLayout paddingTop="3" paddingBottom="3" />
    </s:layout>

    <s:HGroup>
        <s:Label text="Tweeted By: {data.from_user}"/>
        <s:Label text=" at: {data.created_at}"/>   
    </s:HGroup>
   
    <s:TextArea text="{data.text}" width="100%" height="100"/>
   
   
</s:ItemRenderer>

Finally, here is the new user interface:
Twitter Search Application 2

TwitterSearch FlashBuilder Project File

Topics: Adobe AIR, flash builder, Flex, Flex Builder | 5 Comments »

5 Responses to “Flash Builder 4: twitter search UI updated”

  1. Tweets that mention Flash Builder 4: twitter search UI updated | EverythingFlex: Flex & AIR -- Topsy.com Says:
    May 19th, 2010 at 6:12 am

    [...] This post was mentioned on Twitter by Rich Tretola, Simon A. Burley. Simon A. Burley said: RT @richtretola: Blogged: Flash Builder 4: twitter search UI updated http://bit.ly/cHkHeW [...]

  2. Curtis Fisher Says:
    July 22nd, 2010 at 7:55 am

    Hi Rich,

    I’m contacting you to inquire about your Blog and if you work with companies involved with component development. I’d like your feedback and the chance to collaborate if that’s something you can do.

    Cheers,

    Curtis Fisher CEO
    Professional Content LLC
    http://www.procontent.net
    Advanced Flash Components
    http://www.afcomponents.com
    6222 Raytown TRFY #193
    Kansas City, MO 64133
    Bus: 816.298.0492
    cell: 816.668.3650
    Skype Support: afc-support

    Reply to this comment

  3. supertramp Says:
    March 9th, 2011 at 10:05 am

    Thanx fr the tutorial ,

    you can also add user images to this component , change the item renderer code to :

    ///ADD AN IMAGE TAG TO LOAD IMAGES

    Reply to this comment

  4. supertramp Says:
    March 9th, 2011 at 10:06 am

    Thanx fr the tutorial ,

    you can also add user images to this component , change the item renderer code to :

    ///ADD AN IMAGE TAG TO LOAD IMAGES

    Reply to this comment

  5. supertramp Says:
    March 9th, 2011 at 10:10 am

    i’m pasting the code here but it is getting deleted :| …i will try to explain in words ,
    add an image component anywhere is the twitteritemrenderer and set its source to data.profile_image_url .

    Reply to this comment

Comments