TAdvSmoothTimeLine

Neste artigo vamos aprender a lidar com algumas das propriedades de um componente t�o pouco falado, denominado TAdvsmoothTimeLine. Este � um componente que deve ser utilizado para a criaç�o de uma linha do tempo.

Abra o Delphi e crie uma nova aplicaç�o: �File | New | VCL Forms Application - Delphi�.

Salve todo o conte�do: �File | Save All�.

Salve o formul�rio como uFrmprincipal e renomeie sua propriedade �Name� para FrmPrincipal e sua propriedade �Caption' para TAdvSmoothTimeLine;
Salve o projeto dentro de uma pasta (se for preciso crie) como ProjTimeLine.

Para efeitos de designer, coloque no formul�rio principal um componente TPanel e altere as seguintes propriedades:

Align: alTop;

Caption: TAdvSmoothTimeLine;

Color: clNavy;

Font | Color: clwhite;

Font | size: 12;

Font | Style | fsbold: True;

Vamos, ent�o, inserir um componente TAdvSmoothTimeLine no nosso formul�rio. Dessa forma, veremos suas principais propriedades:

Align: alClient; (Preencher� todo o espaço n�o ocupado pelo TPanel no formul�rio;

DefaultIndicator: esta propriedade define as propriedades padr�es do item de indicaç�o da TimeLine. Esse �cone faz a marcaç�o da posiç�o na linha do tempo. Vamos, ent�o, definir suas propriedades:

DefaultIndicator | AnnotationColor: Define a cor de fundo da anotaç�o que for relacionada ao indicador. Vamos deixar como default: clyellow;

DefaultIndicator | AnnotationPosition: Define a posiç�o da anotaç�o associada ao indicador. Esta pode ser acima (apOnTop) ou abaixo (apAtBottom) da linha do tempo. Vamos deixar como default: apAtBottom;

DefaultIndicator | AnnotationTextColor: Define a cor da fonte da anotaç�o associada ao indicador. Vamos deixar como default: clblack;

DefaultIndicator |Color: Define a cor inicial do marcador; Vamos deixar como default: clRed;

DefaultIndicator |Color to: define a cor que dar� o tom gradiente ao indicador; Vamos deixar como default: clMaroon;

DefaultIndicator |Fixed: define se a posiç�o do indicador ser� fixa ou m�vel. Vamos marcar essa propriedade como true;

DefaultIndicator |Shape: define o formato do indicador (circular, diamante, retangular, triangular etc). Vamos deixar como default: isDiamond;

DefaultIndicator |Size: define o tamanho do indicador. Vamos alterar para 10;

HorizontalMargin: define as margens da direita e da esquerda da nossa timeline. Vamos aplicar o valor de 25

Range: corresponde �s propriedades de intervalo.

Vamos explorar as seguintes subpropriedades:

Range | AllowPartialZooming: permite um Zoom parcial utilizando o Scroll do mouse. Deixe como False;

Range | AllowScrolling: permite a movimentaç�o da Timeline com o arrastar do mouse. Deixe como True;

Range | Allow Zooming: permite a utilizaç�o do recurso de Zoom. Deixe como true;

Range | Divisions: indica a quantidade de divis�es que haver� entre os intervalos especificados. Vamos adotar o valor de 1.

Range | DivisionType: indica o tipo de divis�o que ser� apresentada (por m�s ou dia ou ano ou hora etc). Vamos indicar uma divis�o anual: dtYear;

Range | MaximumRange: Indica a data/hora m�xima da linha do tempo. Vamos colocar: 31/12/2012.

Range | MinimumRange: Indica a data/hora m�nima da linha do tempo. Vamos colocar: 01/01/1995.

Range | RangeFrom: Indica a data / hora que voc� deseja mostrar como tempo inicial na tela inicial; Vamos colocar: 31/12/2012.

Range | RangeTo: Indica a data / hora que voc� deseja mostrar como tempo final na tela inicial; Vamos colocar: 01/01/1995.

Range | ScrollStep: Indica a quantidade de passos que devem ser movidos quando acionado o scroll; Vamos colocar: 1;

Range | Subdivisions: Indica a quantidade de subdivis�es que a linha do tempo vai possui no intervalo designado; Vamos colocar: 0;

RangeAppearance: propriedade que altera a apar�ncia de diversos pontos da linha do tempo;

RangeAppearance | Division Format: Aqui agente configura o formato do tempo que aparecer� na linha do tempo. Para o nosso exemplo vamos adotar: �yyyy�, pois representar� somente o ano.

TimeLineBar | Height: Altera a altura da linha do tempo. Use 20.

TimeLineIndicators: ao inserir indicadores, voc� insere marcaç�es na linha do tempo.

Vamos ent�o inserir um indicador. Na propriedade TimeLineIndicators clique nos �...� e adicione um novo indicador.

Altere as seguintes propriedades:

Annotation: Lançamento Delphi para Windows 16 bits
Position: 01/01/1995 00:00:05
Fixed: true; (Esta propriedade fixa o marcado na posiç�o informada);
Note que a marcaç�o foi lançada na linha do tempo, conforme figura abaixo:

Figura 1 - Adicionando Indicador na Linha do tempo;

Adicione mais alguns indicadores, mudando a anotaç�o (Annotation) e a posiç�o do marcador (Position) at� que fique igual � figura abaixo:

Figura 2 - Linha do Tempo com Indicadores;

TimeLineSections: aqui voc� define as seç�es da linha do tempo. Na nossa linha do tempo vamos inserir duas seç�es definindo os tempos do Delphi com a Borland e com a Embarcadero. Sendo assim, adicione duas seç�es e altere as seguintes propriedades:

1� Seç�o:

Caption: Borland;
CaptionLocation: cpCenterCenter; (coloca no centro da seç�o);
EndTime: 01/01/2006; (Fim da seç�o 1);
FixedPosition: True; (Fixa a seç�o);
StartTime: 01/01/1995 (In�cio da seç�o 1);
Fill: propriedade de preenchimento de design. Clique duas vezes e mude a coloraç�o para verde;

2� Seç�o:

Caption: Embarcadero;
CaptionLocation: cpCenterCenter; (coloca no centro da seç�o);
EndTime: 31/12/2012; (Fim da seç�o 1);
FixedPosition: True; (Fixa a seç�o);
StartTime: 01/01/2006 (In�cio da seç�o 1);
Fill: propriedade de preenchimento de design. Clique duas vezes e mude a coloraç�o para vermelho;

Nota: No Delphi 2010 costuma ocorrer de nada acontecer depois das alteraç�es das propriedades acima, por isso salve tudo, feche o formul�rio e abra novamente. As mudanças estar�o l�.

Figura 3 - Linha do Tempo usando TAdvSmoothTimeLine;

Explore as propriedades, altere outras e faça a sua TimeLine.

Um abraço e at� o pr�ximo artigo!

Rafael Marins Ribeiro

Engenheiro de Softwares

TAdvSmoothTimeLine - Delphi

Neste artigo vamos aprender a lidar com algumas das propriedades de um componente tão pouco falado, denominado TAdvsmoothTimeLine. Este é um componente que deve ser utilizado para a criação de uma linha do tempo.

1� Seç�o:

2� Seç�o:

Artigos relacionados