Olá pessoal, neste artigo vou demonstrar como melhorar o visual da aplicação usando o componente SkinManager da paleta AlphaLite(veja como instalar estes componentes aqui: Instalando Componentes Alpha Controls Lite Edition - Delphi ). Esse pacote vem com uma quantidade limitada de componentes mas pode ser usado sem limitações, caso gostem é só adquirir o pacote pago que vem com vários componentes.

No Delphi XE2 já existe uma ferramenta que altera a aparência da aplicação chamado de VCLStyles, mas as versões anteriores não possuem essa melhoria, então temos que apelar para componentes de terceiros caso seja do nosso interesse melhorar o visual da nossa aplicação, a paleta de componentes Alpha possuem botões, edit, panel, gauge, checbox e etc., entre eles temos o SkinManager como mostra a figura 1.

Exibe todos os componente da paleta AlphaLite

Figura 1: Exibe todos os componente da paleta AlphaLite.

Vamos criar uma aplicação básica com alguns componentes da paleta AlphaLite e vamos mudar a aparência do Form em tempo de execução, apenas com um clique sobre o Skin desejado.

Quando instalamos os componentes Alpha todos os Skins são copiados para uma pasta no diretório “C:\Skins”, aproximadamente 79 tipos diferentes de pele. Vamos usar um TFileListBox para listar todos os skins em tempo de execução, essa lista será carregada no evento OnCreate do Form. Vamos adicionar os seguintes componentes ao Form:

  • 1 TFileListBox (renomear para lstSkin)
  • 2 TsLabelFX (paleta AlphaLite)
  • 1 TsSkinManager (paleta AlphaLite, renomeado para skm)

Os componentes foram arranjados da seguinte forma no formulário:

Exibe a organização dos componentes

Figura 2: Exibe a organização dos componentes.

Vamos usar o componente SkinManager para gerenciar os skins da aplicação em tempo de execução. Como já foi mencionado existe uma pasta no seguinte caminho “C:\Skins” onde ficam gravados todos os skins que podemos usar. O componente skinManager possui uma propriedade SkinDirectory que aponta para esse endereço, na propriedade SkinName nós informamos qual o nome do skin que pretendemos usar e na propriedade Active ativamos a nova aparência em tempo de execução.

Exibe as propriedades do SkinManager

Figura 3: Exibe as propriedades do SkinManager.

Vamos utilizar 2 componentes TsLabelFX da paleta AlphaLite, muito semelhante ao TLabel já existente na VCL, a maior diferença fica na questão do texto que é exibido, com esse TsLabelFX podemos deixar os texto com um efeito sombreado. O primeiro label fica com a função de rotular a lista de skins, então seu caption = “Lista de Skins”, o segundo fica com a função de exibir a quantidade de skins encontrados dentro do diretório que informamos para SkinManger, esse label foi renomeado para Name = lblContador.

No evento OnCreate do Form vamos atribuir ao lstSkin o endereço de onde estão gravados os skins e depois atribuir para a propriedade caption do lblcontador a quantidade de skins encontrados no diretório como mostra a Listagem 1.

Listagem 1: Código para ser inserido no evento OnCreate do Form.


procedure TForm2.FormCreate(Sender: TObject);
begin
    //Seta o endereço dos skins para o lstSkin (TFileListBox)
    lstSkin.Directory := skm.SkinDirectory;
    //Atribui ao label a quantidade de skins encontradas
    lblContador.Caption := 'Total de Skins encontrados: ' + IntToStr(lstSkin.GetCount);
end;

Agora falta só codificar o componente lstSkin. No evento OnClick temos que inserir o código para que todas vez que for selecionado um skin diferente do atual no lstSkin seja atribuído esse novo skin para o gerenciador e seja modificada a aparência, para isso vamos usar a função ExtractFileName() com ela podemos extrair somente o nome do skin, sendo que o endereço completo não serve para a propriedade SkinName do gerenciador de Skins.

Listagem 2: Código para ser inserido no evento OnClick do componente lstSkin.


procedure TForm2.lstSkinClick(Sender: TObject);
begin
    //Atribui outro skin para gerenciador
    skm.SkinName := ExtractFileName(lstSkin.FileName);
end;

Agora vamos executar a aplicação e testar as mudanças de aparência, lembrando que mesmo com ausência de vários componentes podemos visualizar a mudança no próprio formulário.

Exibe o Form com aparência modifica de acordo o skin selecionado

Figura 4: Exibe o Form com aparência modifica de acordo o skin selecionado.

Bom pessoal, demonstrei nesse artigo como alterar a aparência da aplicação em tempo de execução usando o componente SkinManager, essa aplicação pode ser melhorada gravando o skin selecionado em um arquivo INI e toda vez que for iniciado o programa será carregado os valores do arquivo INI e posteriormente podemos informar ao SkinManager qual skin deve ser carregado.

No próximo artigo pretendo demonstrar mais alguns exemplos de uso dos componentes AlphaLite. Assim finalizo mais um artigo e até a próxima.

Abraço...