DClick

DottedSpacer Component


Olá.

Recentemente eu estava desenvolvendo um índice, como aqueles de livros, onde tem um título do lado esquerdo e uma linha pontilhada que leva até o número da página, no lado direito...mas...como implementar a linha pontilhada?

Ao invés de tentar tratar strings, calculando tamanho para colocar os pontos, etc., o que seria outra possível - e mais difícil - solução, acabei fazendo, com uma grande ajuda do Marcelo Savioli, um componente bem simples para preencher esse espaço. E como estendemos do Spacer para criar este, o chamamos de DottedSpacer.

Veja a classe e resultado a seguir:

PLAIN TEXT
Actionscript:
  1. package br.com.dclick.controls
  2. {
  3.     import mx.controls.Spacer;
  4.  
  5.     public class DottedSpacer extends Spacer
  6.     {
  7.         public function DottedSpacer()
  8.         {
  9.             super();
  10.         }
  11.        
  12.         public var dotSize:Number = 2;
  13.         public var spaceSize:Number = 2;
  14.         public var lineThickness:Number = 1;
  15.         public var lineColor:Number = 0x000000;
  16.        
  17.         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
  18.         {
  19.            
  20.             super.updateDisplayList(unscaledWidth, unscaledHeight);
  21.            
  22.             var xPos:Number = 0;
  23.             var isDot:Boolean = true;
  24.            
  25.             this.graphics.clear();
  26.            
  27.             this.graphics.lineStyle( lineThickness, lineColor );
  28.            
  29.             while( xPos <unscaledWidth )
  30.             {
  31.                 if( isDot )
  32.                 {
  33.                     this.graphics.moveTo( xPos, unscaledHeight - lineThickness );
  34.                     this.graphics.lineTo( xPos + dotSize, unscaledHeight - lineThickness );
  35.                     xPos += dotSize;
  36.                 }
  37.                 else
  38.                 {
  39.                     xPos += spaceSize;
  40.                 }
  41.                 isDot = !isDot;
  42.             }
  43.            
  44.         }
  45.        
  46.     }
  47. }

Exemplo:

Fonte:

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
  3.     xmlns:controls="br.com.dclick.controls.*" backgroundColor="#CCEEFF">
  4.     <mx:HBox width="100%">
  5.         <mx:Label text="Capítulo 1" />
  6.         <controls:DottedSpacer height="13" width="100%"/>
  7.         <mx:Label text="1" />
  8.     </mx:HBox>
  9.     <mx:HBox width="100%">
  10.         <mx:Label text="Capítulo com Nome Maior" />
  11.         <controls:DottedSpacer height="13" width="100%"/>
  12.         <mx:Label text="3" />
  13.     </mx:HBox>
  14.     <mx:HBox width="100%">
  15.         <mx:Label text="Fim" />
  16.         <controls:DottedSpacer height="13" width="100%"/>
  17.         <mx:Label text="7" />
  18.     </mx:HBox>
  19. </mx:Application>

Abraço.

Por Paulo Amorim em 26/August/2008 | Comentar | Trackback


No Translations

2 comentários para “DottedSpacer Component”


Muito bacana a solução Paulo. Eu tive de fazer isso um dia desse e fiz a “outra possível” que ñ é lá tão dificil, mas a sua é mais legal.

[]!

Por Hugo Carvalho em 26/August/2008 às 15:32.


Po Ficou Bom.

Por rafaelsc em 3/September/2008 às 14:52.

Adicionar comentário

(requerido)
(requerido, não será publicado)