3 Replies Latest reply on Aug 11, 2009 9:17 PM by Gregory Lafrance

    Tweetdeck like list?

    alejandrorrr

      Hello everyone,

       

       

           I was just wondering, how does tweetdeck generate the "table" where the tweets are? I mean, it is not a regular Datagrid as it has many lines, and intricate design. Any pointer how that may be achieved?

       

      Greetings,

       

       

      Alejandro

        • 1. Re: Tweetdeck like list?
          Gregory Lafrance Level 6

          The area on the left, "All Friends"? That looks like a List control using a custom itemRenderer.

           

          http://livedocs.adobe.com/flex/3/html/help.html?content=cellrenderer_8.html

           

          Here is grossly simple sample:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            backgroundColor="0x000000" backgroundGradientColors="[0x000000, 0x000000]"
            horizontalAlign="left">
            <mx:Script>
              <![CDATA[
                import mx.collections.ArrayCollection;
                
                [Bindable] private var ac:ArrayCollection = new ArrayCollection([
                  {img: "assets/images/BobSmith.jpg", tweet: "This is tweet number one that I wish to display now.", user: "Bob Smith"},
                  {img: "assets/images/KarenCasey.jpg", tweet: "I got that coffee and now I'm taking a sip, and it IS delicious.", user: "Karen Casey"},
                  {img: "assets/images/KarenCasey.jpg", tweet: "I'm going to get a delicious cup of coffee now.", user: "Karen Casey"},
                ]);
              ]]>
            </mx:Script>
            <mx:List dataProvider="{ac}" backgroundColor="0x000000" 
             width="300" height="400" rollOverColor="0x000000" selectionColor="0x000000">
              <mx:itemRenderer>
                <mx:Component>
                  <mx:VBox width="100%" height="100%">
                    <mx:HBox width="100%" height="100%">
                      <mx:Image source="{data.img}" width="40" height="40"/>
                      <mx:TextArea text="{data.tweet}" color="0xFFFFFF" 
                        borderThickness="0" focusThickness="0"
                        backgroundColor="0x000000" width="100%"/>
                    </mx:HBox>
                    <mx:Text text="{data.user}" color="0xFFFFFF"/>
                    <mx:HRule shadowColor="0xCCCCCC" strokeColor="0x000000" width="100%"/>
                  </mx:VBox>
                </mx:Component>
              </mx:itemRenderer>
            </mx:List>
          </mx:Application>
          

           

           

          If this post answered your question or helped, please mark it as such.

          • 2. Re: Tweetdeck like list?
            alejandrorrr Level 1

            Thank you so, much... i have to read up on ItemRenderer. I have used flex for sometime, but there are some topics i have left behind... like this one. And i have to understand custom events also, im already working with messaging and blazeds... but i guess i skipped many basics.

             

            Thanks a lot for taking the time to answer.

             

            Alejandro

            • 3. Re: Tweetdeck like list?
              Gregory Lafrance Level 6

              You might like my Flex Cookbook post on implementing a simple MVC (Model - View - Controller) architecture using custom events.

               

              http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postI d=11246