QUICK TIPS: Slide Show com JQSlider

Olá, Saudações Delphianas.

Como todos sabem, já há algum tempo nos foi disponibilizado o update2 para o Delphi for PHP com inúmeras correções e várias melhorias. O que muita gente ainda desconhece e que junto com o update2 foram acrescentados novos componentes, componentes esses que só vem agregar maior produtividade aos nossos projetos.

Eu decidi “investigar” um desses novos componentes e para minha alegria funcionou redondinho e aqui estou para compartilhar esta alegria com vocês.

A primeira coisa a fazer refere-se a quem tem a versão 1.0, se ainda não o fez, é baixar o update2 em http://www.codegear.com/downloads e seguir os procedimentos para a instalação. Uma vez feito isso, vamos instalar esses novos componentes.

Com o Dephi for PHP aberto vá ao menu Component e clique em Packages. Na caixa de diálogo que abir clique em Add e adicione o seguinte pacote:

jQuery VCL for PHP Components

C:\Program Files\CodeGear\Delphi for PHP\1.0\vcl\jquery\jquery.package.php

Uma nova paleta foi adicionada na Tool Palette (JQuery) e nela um componente chamado JQSlider, este será o objeto do nosso artigo.

Há também outros componentes disponíveis:

C:\Program Files\CodeGear\Delphi for PHP\1.0\vcl\packages\mysql.package.php

C:\Program Files\CodeGear\Delphi for PHP\1.0\vcl\jsval\formvalidator.package.php

C:\Program Files\CodeGear\Delphi for PHP\1.0\vcl\PEAR\packages\pear.package.php

C:\Program Files\CodeGear\Delphi for PHP\1.0\vcl\jquery\jquery.package.php

C:\Program Files\CodeGear\Delphi for PHP\1.0\vcl\google\google.package.php

Para quem tem a versão 2.0 esses components já estão instalados por padrão

Com o novo componente instalado, vamos iniciar uma nova aplicação. Vá ao menu File -> New -> Application. Salve com o nome que melhor lhe convir e em uma pasta de sua preferência. Agora adicione um componente JQSlider.

Em primeiro lugar é preciso esclarecer o intuito deste componente. Ele carrega um arquivo javascript em sua página chamada jquery.js. Este script tem a função de adicionar efeitos de transição dinâmicos em imagens de modo a simular um Slide Show. Essas imagens podem ser carregadas através de sua propriedade Lines que nada mais é do que um array onde cada linha digitada ali é um item em potencial. Nesta propriedade são aceitas tag html então a ideia é inserir ali links para as imagens que queremos apresentar.

Selecione algumas imagens em seu PC e copie para uma pasta images no diretório de sua aplicação, essas serão as imagens mostradas pelo componente. Feito isso precisamos definir como faremos referência a elas na propriedade Lines do JQSlider. A ideia é mostrar miniaturas das imagens com um link para as imagens originais sendo assim para cada imagem adicione uma linha na propriedade Lines da seguinte maneira:

<a href="images/figura1.jpg"><img src="images/figura1.jpg" width="100" height="80"></a>

Eis a propriedade preenchida:

<a href="images/figura1.jpg"><img src="images/figura1.jpg" width="100" height="80"></a>

<a href="images/figura2.jpg"><img src="images/figura2.jpg" width="100" height="80"></a>

<a href="images/figura3.jpg"><img src="images/figura3.jpg" width="100" height="80"></a>

<a href="images/figura4.jpg"><img src="images/figura4.jpg" width="100" height="80"></a>

<a href="images/figura5.jpg"><img src="images/figura5.jpg" width="100" height="80"></a>

<a href="images/figura6.jpg"><img src="images/figura6.jpg" width="100" height="80"></a>

<a href="images/figura7.jpg"><img src="images/figura7.jpg" width="100" height="80"></a>

<a href="images/figura8.jpg"><img src="images/figura8.jpg" width="100" height="80"></a>

Agora basta rodar a aplicação para testar o resultado.

O componente já provê maneiras para podermos manipular as imagens, basta clicar nas setas laterais, e clicando em ViewAll podemos exibir todo o conteúdo da lista. Há também a possibilidade de exibirmos as imagens na vertical, basta para isso redimensionar o componente.

Agora é só dar asas à imaginação, um bom exemplo seria popular a propriedade Lines dinamicamente com dados oriundos de uma tabela que armazenasse o caminho das imagens ou mesmo adicionar novas funcionalidades a este componente, e é nisto que tenho trabalhado.

         O exemplo desenvolvido neste artigo esta disponível na seção de downloads da comunidade. Segue o link: www.delphisophp.com/Downloads.php?id=28;

         Uma abraço e ate a próxima!!