7 Replies Latest reply on May 7, 2011 2:17 AM by dtcullen

    Aligning the label in mobileiconitemrenderer

    dtcullen

      I have a customized item rendered for a list in an application to run on android and am having difficulty getting the 'label' to align in the center.

       

      The code is;

       

      override public function set data(value:Object):void {

       

      if(value != null) {

          super.data = value;

          setStyle("fontSize",18);

       

      if (value.assigned) {

          label = "[ASSIGNED TO YOU]";

          setStyle("textAlign", "center");

      }

      else {

          setStyle("color",0xFFFF00);

          label = "[PRESS TO ACQUIRE]";

      }

       

       

      height = 150;

       

      iconWidth = 75;

      iconHeight = 75;

      iconFunction = getIcon;

       

       

      messageFunction = getMessage;

       

       

          }

      }

       

      The colors and the fontsize seem to work fine but the label stays aligned left. I have also tried setting the alignment in the List which is the owner of the renderer.   Any ideas?

        • 1. Re: Aligning the label in mobileiconitemrenderer
          Lee Burrows Level 4

          hi

           

          have you set a width for your label? if not, label will size itself to the width of the text - so left/right/center align will all look the same - does it center itself if you set label width at 100%?

          • 2. Re: Aligning the label in mobileiconitemrenderer
            dtcullen Level 1

            Thanks for the reply Lee.

             

            I am presuming that the width is the ultimate source of my problem but am confused as to where to set the width.  In the itemrenderer 'label' is just a string.  I have set the width in the list and also in the item renderer (width = 500) but to no effect.  I can set the height okay and that works.

             

            Am I missing something?

             

            Regards

             

            Des.

             

             

            hi

             

            have you set a width for your label? if not, label will size itself to the width of the text - so left/right/center align will all look the same - does it center itself if you set label width at 100%?

            >

            • 3. Re: Aligning the label in mobileiconitemrenderer
              Lee Burrows Level 4

              hi

               

              im not too knowledgable on the mobile stuff but this tutorial looks like it should help you out: http://www.asfusion.com/blog/entry/mobile-itemrenderer-in-actionscript-part-1 (by creating a custom renderer)

              • 4. Re: Aligning the label in mobileiconitemrenderer
                Shongrunden Adobe Employee

                It sounds like you are using a very early preview release.  MobileIconItemRenderer has been renamed to IconItemRenderer and this seems to work for me the final release of Flex 4.5:

                 

                <s:List width="100%">

                    <s:dataProvider>

                        <s:ArrayList>

                            <fx:String>one</fx:String>

                            <fx:String>two</fx:String>

                            <fx:String>three</fx:String>

                        </s:ArrayList>

                    </s:dataProvider>

                    <s:itemRenderer>

                        <fx:Component>

                            <s:IconItemRenderer>

                                <fx:Script>

                                    <![CDATA[

                                        override public function set data(value:Object):void {

                                            super.data = value;

                 

                                            if (!data)

                                                return;

                 

                                            if (data == 'two'){

                                                setStyle('textAlign', 'center');

                                            }

                 

                                        }

                                    ]]>

                                </fx:Script>

                            </s:IconItemRenderer>

                        </fx:Component>

                    </s:itemRenderer>

                </s:List>

                • 5. Re: Aligning the label in mobileiconitemrenderer
                  dtcullen Level 1

                  Thank you.  It would be great if Adobe told me that 4.5 had been released.  I will upgrade and give it a go.

                   

                   

                   

                   

                  It sounds like you are using a very early preview release.  MobileIconItemRenderer has been renamed to IconItemRenderer and this seems to work for me the final release of Flex 4.5:

                   

                  >> <s:List width="100%">

                  >>

                  >>     <s:dataProvider>

                  >>

                  >>         <s:ArrayList>

                  >>

                  >>             <fx:String>one</fx:String>

                  >>

                  >>             <fx:String>two</fx:String>

                  >>

                  >>             <fx:String>three</fx:String>

                  >>

                  >>         </s:ArrayList>

                  >>

                  >>     </s:dataProvider>

                  >>

                  >>     <s:itemRenderer>

                  >>

                  >>         <fx:Component>

                  >>

                  >>             <s:IconItemRenderer>

                  >>

                  >> <fx:Script>

                  >>

                  >>                     <![CDATA[

                  >>

                  >> override public function set data(value:Object):void {

                  >>

                  >> super.data = value;

                  >>

                  >> 

                  >>

                  >> if (!data)

                  >>

                  >> return;

                  >>

                  >> 

                  >>

                  >> if (data == 'two'){

                  >>

                  >>                                 setStyle('textAlign', 'center');

                  >>

                  >>                             }

                  >>

                  >> 

                  >>

                  >>                         }

                  >>

                  >>                     ]]>

                  >>

                  >> </fx:Script>

                  >>

                  >>             </s:IconItemRenderer>

                  >>

                  >>         </fx:Component>

                  >>

                  >>     </s:itemRenderer>

                  >>

                  >> </s:List>

                  >

                  • 6. Re: Aligning the label in mobileiconitemrenderer
                    Shongrunden Adobe Employee

                    It was just released on May 3rd.  Keep an eye on the Official Flex Team blog for more updates:

                    http://blogs.adobe.com/flex/

                    • 7. Re: Aligning the label in mobileiconitemrenderer
                      dtcullen Level 1

                      Thanks all.  The upgrade worked.