7 Replies Latest reply on Jan 25, 2010 5:20 AM by AndyMilk

    Problem with switching from mx:List to mx:HorizontalList

    AndyMilk

      I have several widgets working fine with the MX:List tag with code like this:

       

      <mx:List id="theList2"
          width="280" height="225" paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0"
          verticalScrollPolicy="off"
          horizontalScrollPolicy="off"
          dataProvider="{rssData1.channel.item}" 
          wordWrap="true"
          variableRowHeight="true"
          rollOverColor="#FFFFFF"
          selectable="false" borderThickness="0">

       

          <mx:itemRenderer  >
            <mx:Component>

       

      etc.

       


      But when I switch mx:List to mx:HorizontalList, I don't see any of the data.  Here's what I have:

       

        <mx:HorizontalList id="theList2"
           paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0"
        width="536" height="80"
          dataProvider="{rssData1.channel.item}" horizontalScrollPolicy="on" verticalScrollPolicy="on">

       

          <mx:itemRenderer  >
            <mx:Component>

       


      Any ideas?

       

      Thanks,
      Andy

        • 1. Re: Problem with switching from mx:List to mx:HorizontalList
          Gregory Lafrance Level 6

          This code works for me. How is yours (relevantly) different?

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:XML id="rssData1" xmlns="">
              <channels>
                <channel>
                  <item>test1</item>
                </channel>
                <channel>
                  <item>test2</item>
                </channel>
                <channel>
                  <item>test3</item>
                </channel>
              </channels>
            </mx:XML>
            <mx:List id="theList2"
              width="280" height="225" paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0"
              verticalScrollPolicy="off" 
              horizontalScrollPolicy="off" 
              dataProvider="{rssData1.channel.item}"  
              wordWrap="true" 
              variableRowHeight="true"
              rollOverColor="#FFFFFF"
              selectable="false" borderThickness="0"/>
            <mx:HorizontalList id="theHList2"
              paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0"
              width="536" height="80"
              dataProvider="{rssData1.channel.item}" horizontalScrollPolicy="on" verticalScrollPolicy="on"/>    
          </mx:Application>
          

           

          If this post answers your question or helps, please mark it as such.


          Greg Lafrance - Flex 2 and 3 ACE certified

          www.ChikaraDev.com

          Flex / AIR Development, Training, and Support Services

          • 2. Re: Problem with switching from mx:List to mx:HorizontalList
            AndyMilk Level 1

            Hi Greg,

             

            Thanks for the response.

             

            I'm using a itemRenderer.  I just tried your code and that works, but the itemRenderer is not.

             

            Thanks,

            Andy

            • 3. Re: Problem with switching from mx:List to mx:HorizontalList
              msakrejda Level 4

              Could it be that your renderer code is expecting a List somewhere (instead of a HorizontalList)?

              • 4. Re: Problem with switching from mx:List to mx:HorizontalList
                AndyMilk Level 1

                It could be, but it's an inline renderer.

                 

                This is the structure:

                 

                <mx:HorizontalList>

                     <mx:Component>

                         <mx:itemRenderer>

                               render code

                         </mx:itemRenderer>

                     </mx:Component>

                </mx:HorizontalList>

                 

                This exact structure worked fine with mx:List.

                 

                Workaround possibility:  is there any way to make an mx:List display horizontally?

                 

                Thanks,

                Andy


                • 5. Re: Problem with switching from mx:List to mx:HorizontalList
                  Gregory Lafrance Level 6

                  Is the renderer code identical? You may want to post that too.

                  • 6. Re: Problem with switching from mx:List to mx:HorizontalList
                    AndyMilk Level 1

                    Yes, I haven't changed the render code.  I only change mx:List to mx:HorizontalList

                     

                    Here's my code:

                     


                    <mx:HBox backgroundImage="@Embed('../assets/background_728x90.png')" backgroundAttachment="fixed" backgroundAlpha="1"
                      height="90" minHeight="90"
                      width="728" minWidth="728" maxWidth="728"
                      horizontalAlign="left"
                      verticalGap="0" paddingLeft="100" paddingRight="0" paddingTop="0" paddingBottom="0"
                      verticalScrollPolicy="on"
                      horizontalScrollPolicy="off">

                     


                        <mx:HBox width="536" height="80"
                        label="Featured Discussions"  verticalScrollPolicy="on" paddingLeft="0"
                        paddingBottom="0" paddingTop="0"
                        horizontalScrollPolicy="off"
                        >

                     

                      <mx:HorizontalList id="theList2"
                         paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0"
                      width="436" height="80"
                        dataProvider="{rssData1.channel.item}" horizontalScrollPolicy="on" verticalScrollPolicy="on">

                     

                    <mx:itemRenderer>
                          <mx:Component>
                            <mx:VBox verticalScrollPolicy="on"
                              horizontalScrollPolicy="on" maxHeight="80" minHeight="80" width="130" minWidth="130" maxWidth="130">

                     


                              <mx:Script><![CDATA[
                                // Import the effect class.
                                import mx.effects.*;
                                import mx.effects.easing.*;
                                import mx.controls.Alert;

                     

                                private var dataType:Number;
                                private var not_sponsored:Number;
                               
                                override public function set data(value:Object):void
                                {
                                  super.data = value;
                                  not_sponsored = 1;
                                  if (value.thumbnail_url == "" && value.sponsored == "false")
                                  {
                                      dataType = 1;
                                    //tcContent.visible = false;
                                  }
                                  else
                                  {
                                      dataType = 0;
                                    //tcContent.visible = true;
                                  }
                                 
                                  if (value.sponsored == "true")
                                       {
                                           not_sponsored = 0;
                                          
                                           tcSponsored.visible = true;
                                           tcSponsored.includeInLayout = true;
                                           tcContent.visible = false;
                                           tcContent.includeInLayout = false;
                                          
                                          
                                       }
                                       else
                                       {
                                           not_sponsored = 1;
                                           tcSponsored.visible = false;
                                           tcSponsored.includeInLayout = false;
                                           tcContent.visible = true;
                                           tcContent.includeInLayout = true;

                     

                                       }
                                }

                     

                     

                     

                              ]]></mx:Script>

                     

                            
                             <mx:HBox id="tcSponsored"
                                 includeInLayout = "false"
                                 visible = "false"
                              click="mx.core.Application.application.showDisclaimer(data.link)"
                              verticalScrollPolicy="off"
                              horizontalScrollPolicy="off"
                              verticalGap="0"
                              paddingLeft="4" paddingRight="4" paddingTop="2" paddingBottom="4"
                              width="130"
                              height="80"
                              useHandCursor="true"
                              buttonMode="true"
                              mouseChildren="false"
                              backgroundImage="@Embed('../assets/box_ad_728x90.jpg')" backgroundAlpha="100" backgroundAttachment="fixed"
                              >

                     

                     

                     

                                 <mx:HBox id="tcSponsoredDesc"
                                  width="100%" paddingTop="0"
                                  visible="true"
                                  includeInLayout="true"
                                  useHandCursor="true"
                                  buttonMode="true"
                                  mouseChildren="true" verticalScrollPolicy="off">

                     


                                    <mx:Text id="tcSponsoredDescIntro"
                                      width="100%" 
                                      paddingLeft="4" paddingRight="2" paddingTop="11" paddingBottom="0" leading="-2"
                                      textAlign="left" fontSize="10" color="#666666" height="80">
                                        <mx:htmlText>{data.description}</mx:htmlText>
                                    </mx:Text>
                                </mx:HBox>
                               
                               
                               
                               
                            </mx:HBox>
                           
                             <mx:HBox id="tcContent"
                                 includeInLayout = "false"
                                 visible = "false"
                              click="mx.core.Application.application.showDisclaimer(data.link)"
                              verticalScrollPolicy="off"
                              horizontalScrollPolicy="off"
                              verticalGap="0"
                              paddingLeft="4" paddingRight="6" paddingTop="4" paddingBottom="8"
                              width="130"
                              height="80"
                              useHandCursor="true"
                              buttonMode="true"
                              mouseChildren="false"
                              backgroundImage="@Embed('../assets/box_728x90.jpg')" backgroundAlpha="100" backgroundAttachment="fixed"
                              >

                     

                              <mx:Box id="tcContentInner"
                                width="130"
                              height="80"
                                verticalGap="0"
                                verticalScrollPolicy="off"
                                horizontalScrollPolicy="off"
                                 
                              >

                     


                         
                                <mx:HBox id="tcIconBox"
                                  paddingTop="0"
                                  visible="true"
                                  includeInLayout="true"
                                  useHandCursor="true"
                                  buttonMode="true"
                                  paddingRight="0"
                                  mouseChildren="true" width="100%" verticalScrollPolicy="off" height="18">
                                     
                                     
                                   
                                <mx:Text id="tcTitle2"
                                  visible="true"
                                  width="100%"
                                  paddingLeft="4" paddingRight="0" paddingBottom="0"
                                  textAlign="left" fontSize="10" textDecoration="none" leading="0" mouseChildren="false" fontWeight="normal"
                                  height="24"
                                  paddingTop="0"
                                  color="#ffffff">
                                    <mx:htmlText>{data.title}</mx:htmlText>
                                    </mx:Text>
                                </mx:HBox>

                               
                                <mx:HBox id="tcDesc"
                                  width="100%" paddingTop="0"
                                  visible="true"
                                  includeInLayout="true"
                                  useHandCursor="true"
                                  buttonMode="true"
                                  mouseChildren="true" verticalScrollPolicy="off">

                     


                                    <mx:Text id="tcDescIntro"
                                      width="100%" 
                                      paddingLeft="4" paddingRight="0" paddingTop="0" paddingBottom="0"
                                      textAlign="left" fontSize="10" leading="-2" color="#666666" height="40">
                                        <mx:htmlText>{data.description}</mx:htmlText>
                                    </mx:Text>
                                </mx:HBox>

                     

                              
                               </mx:Box>

                     

                              
                             
                            </mx:HBox>

                     

                            </mx:VBox>
                          </mx:Component>
                        </mx:itemRenderer>
                      </mx:HorizontalList>
                        </mx:HBox>

                    • 7. Re: Problem with switching from mx:List to mx:HorizontalList
                      AndyMilk Level 1

                      I just shortened it to this and it still doesn't work:

                       

                           <mx:HorizontalList id="theList3"
                           paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0"
                        width="100" height="80"
                          dataProvider="{rssData1.channel.item}" horizontalScrollPolicy="on" verticalScrollPolicy="on" columnCount="1" >
                          <mx:itemRenderer>
                            <mx:Component>
                              <mx:HBox>
                              <mx:Text id="tcTitle3"
                                    visible="true"
                                    width="100%"
                                    paddingLeft="4" paddingRight="0" paddingBottom="0"
                                    textAlign="left" fontSize="10" textDecoration="none" leading="0" mouseChildren="false" fontWeight="normal"
                                    height="24"
                                    paddingTop="0"
                                    color="#ffffff">
                                      <mx:htmlText>{data.title}</mx:htmlText>
                                      </mx:Text>
                                  </mx:HBox>
                            </mx:Component>
                           </mx:itemRenderer>
                          </mx:HorizontalList>