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!!
