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
