1 Reply Latest reply on Aug 6, 2011 12:34 PM by Francisc

    Change icon position based on boolean var

    Francisc Level 3

      Hello,

       

      I have a custom mobile renderer extending the IconItemRenderer.

      In the set data overriding function I set a boolean variable isOpposite to be false when content should flow normally (on the left) and true when it should be right-aligned.

       

      This is how I change that for the labelDisplay:

       

      override protected function commitProperties():void
      {
          super.commitProperties();
         
          var styleDecl:CSSStyleDeclaration
         
          //Update styling for labelDisplay
          if(isOpposite)
          {
              styleDecl=styleManager.getMergedStyleDeclaration(".toRight");
          }
          else
          {
              styleDecl=styleManager.getMergedStyleDeclaration(".toLeft");
          }
          if(styleDecl)
          {
              labelDisplay.styleDeclaration=styleDecl;
              labelDisplay.styleChanged("styleName");
          }
      }

       

      How can I do that for the iconDisplay please? I tried various things and they failed so far. I'd preffer a CSS solution is such exists and no other is better.

       

      Thank you.

        • 1. Re: Change icon position based on boolean var
          Francisc Level 3

          This is how I solved this (no CSS), but I have a bad feeling about it.

          For one thing, it positions the labelDisplay and iconDisplay twice, once in the super call then in the overriden method.

           

          override protected function layoutContents(unscaledWidth:Number,unscaledHeight:Number):void
          {
              super.layoutContents(unscaledWidth,unscaledHeight);
              if(isOpposite)
              {

                  //Left so that it keeps the distance from edge compared to left aligned elements
                  var paddingLeft:Number=getStyle("paddingLeft");
                 
                  //If iconWidth or iconHeight are not specified set them
                  if(!iconWidth){iconWidth=iconDisplay.getLayoutBoundsWidth();}
                  if(!iconHeight){iconHeight=iconDisplay.getLayoutBoundsHeight();}
                 
                  //Override positioning of label and icon to be right aligned
                  setElementPosition(labelDisplay,paddingLeft,(unscaledHeight-getElementPreferredHeight(lab elDisplay))/2);
                  setElementPosition(iconDisplay,unscaledWidth-paddingLeft-iconWidth,(unscaledHeight-iconHe ight)/2);
              }
          }

           

          Is there a better way to do this?

          Again, I'm looking to right align the labelDisplay and iconDisplay when isOpposite is true.