title: The optimized way to show text
body: <p>I am in a process of optimizing item renderers that display a character in a Rect, I notice that the action of dynamically setting the text is slow, now I am thinking of creating premade objects with text hard-coded in them and inside the item-renderer have a switch to select the proper text object instead of using <code>.text =</code> , does anyone have any other idea on how to optimize the renderer , it is a tile layout that displays about 100 renderers on screen.</p>
  
  <p>also - what is the cheapest(performance-wize) text object I can use in a renderer?</p>
  
  <p>Thanks </p>
  
  <pre><code>&lt;!-- DNA Plus --&gt;
  &lt;s:Group height="26" width="100%" y="20"&gt;
      &lt;s:Rect id="backgroundTop" left="0" right="0" top="0" bottom="0"
              alpha="{(data as MiniBrick).brick.strand == StrandEnum.PLUS.value ? 1 : 0.7}"&gt;
          &lt;s:fill&gt;
              &lt;s:SolidColor id="bgFillTop" color="{BrickColors.getColor((data as MiniBrick).brick)}"/&gt;
          &lt;/s:fill&gt;
      &lt;/s:Rect&gt;
  
      &lt;s:Rect id="selectedBackgroundTop" left="0" right="0" top="2" bottom="1" includeIn="selected"&gt;
          &lt;s:fill&gt;
              &lt;s:SolidColor id="sBgFillTop" color.selected="0xB6E0F2"/&gt;
          &lt;/s:fill&gt;
      &lt;/s:Rect&gt;
  
      &lt;!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay --&gt;
      &lt;s:Label id="textDisplayTop" width="100%" top="4" fontFamily="Consolas" text="{(data as MiniBrick).origin}"
               fontSize="20" lineBreak="explicit" verticalAlign="middle" textAlign="center"/&gt;
  &lt;/s:Group&gt;
  
  
  &lt;!-- DNA Minus --&gt;
  
  &lt;s:Group height="26" width="100%" y="46"&gt;
      &lt;s:Rect id="backgroundBottom" left="0" right="0" top="0" bottom="0" 
              alpha="{(data as MiniBrick).brick.strand == StrandEnum.MINUS.value ? 1 : 0.7}"&gt;
          &lt;s:fill&gt;
              &lt;s:SolidColor id="bgFillBottom" color="{BrickColors.getColor((data as MiniBrick).brick)}"/&gt;
          &lt;/s:fill&gt;
      &lt;/s:Rect&gt;
  
      &lt;s:Rect id="selectedBackgroundBottom" left="0" right="0" top="1" bottom="2" includeIn="selected"&gt;
          &lt;s:fill&gt;
              &lt;s:SolidColor id="sBgFillBottom" color.selected="0xB6E0F2"/&gt;
          &lt;/s:fill&gt;
      &lt;/s:Rect&gt;
  
      &lt;!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay --&gt;
      &lt;s:Label id="textDisplayBottom" width="100%" top="4" fontFamily="Consolas" text="{DnaDictionary.getComplementSequenceOneLetter((data as MiniBrick).origin)}"
               fontSize="20" lineBreak="explicit" verticalAlign="middle" textAlign="center"/&gt;
  &lt;/s:Group&gt;
  
  &lt;!-- DNA index [tick list] --&gt;
  &lt;s:Group width="15" id="dnaTick" y="72"&gt;
      &lt;s:Rect horizontalCenter="0" width="2" height="2" radiusX="1"&gt;
          &lt;s:fill&gt;
              &lt;s:SolidColor color="#666666"/&gt;
          &lt;/s:fill&gt;
      &lt;/s:Rect&gt;
      &lt;s:Label id="dnaTickLabel" horizontalCenter="0" y="5" height="9" color="#888888" fontFamily="Arial" fontSize="9"
               textAlign="left" /&gt;
  &lt;/s:Group&gt;
  
  &lt;s:Line id="firstMiniBrickInBrickLine" x="0" y="20" yFrom="72"&gt;
      &lt;s:stroke&gt;
          &lt;s:SolidColorStroke caps="none" color="#FFFFFF" weight="1"/&gt;
      &lt;/s:stroke&gt;
  &lt;/s:Line&gt; 
  </code></pre>