Demorou, mas aqui está. Finalmente posto a segunda parte do tutorial de criação de um widget para uso com o Yii Framework.
Na parte 1 mostrei o funcionamento básico de um widget simples, que exibe um vídeo do youtube.
Nesta sequência mostro como você pode utilizar arquivos externos, como javascript e css. Criaremos um widget que irá incorporar as funções do plugin jcarousel. Primeiramente, baixe o plugin, salve-o em alguma pasta e descompacte, caso tenha baixado como .zip.
Lembre-se de onde salvou e descompactou o plugin, logo iremos utilizar alguns de seus arquivos.
Agora, crie uma pasta chamada “jcarousel” dentro da pasta “protected\extensions” de sua aplicação.
Nessa pasta, crie duas subpastas: “css” e “js”.
Voltando à pasta onde salvou o jcarousel, entre na subpasta “examples\basic”. Vamos utilizar esse exemplo em nosso plugin. Antes de mais nada, abra o arquivo index.html em seu navegador, e veja o plugin funcionando:

Iremos reproduzir esse exemplo (com algumas diferenças no css) em nosso widget. Copie então, o arquivo “jcarousel.basic.js” para a pasta “protected\extensions\jcarousel\js” de sua aplicação.
Copie também o arquivo “jcarousel.basic.css”, mas para a pasta “protected\extensions\jcarousel\css”.
O arquivo “jcarousel.basic.js” (abra-o para ver) contém o código de manipulação do plugin. O jcarousel.basic.css contém as personalizações dos estilos do carousel (como por exemplo, os links de navegação).
Falta copiar o javascript do plugin. Para isso, copie o arquivo “jquery.jcarousel.js” que está na pasta “dist” do plugin e cole-o na pasta “protected\extensions\jcarousel\js”.
Agora procure pela pasta “examples\_shared\css”, também nos arquivos do plugin. Copie o arquivo “style.css” para a pasta “protected\extensions\jcarousel\css”.
Copie então a pasta “_shared\img” para a pasta “images” de seu projeto. Renomeie a pasta “img” para “carousel”. Essas são as imagens que serão exibidas no carrossel, Caso queira, você poderá trocá-las por outras depois.
Com todos os arquivos necessários copiados, iremos agora criar nosso widget. Dentro da pasta “protected\extensions\jcarousel”, crie um arquivo chamado “jcarousel.php”. Nela, cole o seguinte código:
class jcarousel extends CWidget { public function run() { $css = dirname(__FILE__).DIRECTORY_SEPARATOR.'css'.DIRECTORY_SEPARATOR.'jcarousel.basic.css'; $css2 = dirname(__FILE__).DIRECTORY_SEPARATOR.'css'.DIRECTORY_SEPARATOR.'style.css'; $jsBasic = dirname(__FILE__).DIRECTORY_SEPARATOR.'js'.DIRECTORY_SEPARATOR.'jcarousel.basic.js'; $jsCarousel = dirname(__FILE__).DIRECTORY_SEPARATOR.'js'.DIRECTORY_SEPARATOR.'jquery.jcarousel.min.js'; $cssPub = Yii::app()->getAssetManager()->publish($css); $css2Pub = Yii::app()->getAssetManager()->publish($css2); $jsBasicPub = Yii::app()->getAssetManager()->publish($jsBasic); $jsCarouselPub = Yii::app()->getAssetManager()->publish($jsCarousel); $cs=Yii::app()->clientScript; $cs->registerCssFile($cssPub); $cs->registerCssFile($css2Pub); $cs->registerScriptFile($jsBasicPub); $cs->registerScriptFile($jsCarouselPub); $cs->registerCoreScript('jquery'); } }
Como você já deve estar ciente, a pasta protected (e suas subpastas) são inacessíveis pelo navegador. Somente o código do Yii tem acesso a esse conteúdo. Isso vale também para as nossas extensões. Se chamarmos os scripts e css diretamente da nossa pasta, eles não funcionarão, pois o .htacess (ou o web.config, no caso do windows) protege essas pastas do acesso direto. Quando quisermos disponibilizar algum desses arquivos para o acesso direto pelo navegador, precisamos copiá-los para a nossa pasta assets. Para isso, utilizaremos a classe CAssetManager.
Voltando ao nosso código, as linhas 8-13 gerarão os caminhos físicos dos arquivos protegidos que queremos disponibilizar.
Nas linhas 15-21 utilizamos o método Publish() da classe CAssetManager. Esse método exige apenas um parâmetro, que é o caminho para o arquivo ou pasta que você deseja publicar (para saber os outros parâmetros, consulte a documentação). Ele copia nossos arquivos para a pasta assets e retorna um link, para que possamos indicar ao navegador onde achar tais arquivos.
No nosso caso, como estamos usando javascript e css, usaremos esses links com a classe CClientScript. Essa classe disponibiliza vários métodos, para que possamos gerenciar e embutir scripts e folhas de estilo em nossas aplicações.
Em nosso código, a linha 23 gera uma referência à classe CClientScript de nossa aplicação.
As linhas 25-28 incluem os scripts/css na página que usará nosso widget.
A linha 30 inclui a chamada para o jquery (se ele já não tiver sido chamado anteriormente).
Hora de utilizar nosso widget. Em uma view qualquer, cole o seguinte código:
<?php $this->beginWidget('ext.jcarousel.jcarousel'); ?> <div class="wrapper"> <h1>jcarousel</h1> <p>Exemplo básico através de um widget do Yii.</p> <div class="jcarousel-wrapper"> <div class="jcarousel"> <ul> <li><img src="images/carousel/img1.jpg" width="600" height="400" alt=""></li> <li><img src="images/carousel/img2.jpg" width="600" height="400" alt=""></li> <li><img src="images/carousel/img3.jpg" width="600" height="400" alt=""></li> <li><img src="images/carousel/img4.jpg" width="600" height="400" alt=""></li> <li><img src="images/carousel/img5.jpg" width="600" height="400" alt=""></li> <li><img src="images/carousel/img6.jpg" width="600" height="400" alt=""></li> </ul> </div> <p class="photo-credits"> Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a> </p> <a href="#" class="jcarousel-control-prev">‹</a> <a href="#" class="jcarousel-control-next">›</a> <p class="jcarousel-pagination"> </p> </div> </div> <?php $this->endWidget(); ?>
Aqui, na linha 2, inicializamos nosso widget.
Nas linhas 4-32, colocamos o código html que o plugin jcarousel irá utilizar para gerar nosso carrossel.
A linha 34 fecha o widget. Poderíamos simplesmente ter chamado nosso widget da mesma forma que no exemplo anterior, utilizando somente “$this->widget(‘ext.jcarousel.jcarousel’);” e deixando o html das imagens em uma parte qualquer. Mas acho uma boa prática fazer dessa forma, pois isso deixará nosso código mais organizado, pois saberemos que entre o beginWidget e o endWidget está o conteúdo que será tratado pelo widget.
Execute então a action que chama essa view:
Veja que o widget está funcionando, exatamente igual ao exemplo do próprio jcarousel.
Veja também como ficou o código gerado com a chamada para o css e os scripts. Exiba o código fonte da página e veja as linhas 17-21 (ou linhas próximas, pode variar):
Fácil e prático, não?
Agora, gostaria de propor alguns exercícios baseados no que você aprendeu nos dois últimos artigos:
- melhore um pouco o código da classe jcarousel.php. Ao invés de a cada linha (15-21) ficar chamando o Asset Manager, chame-o apenas uma vez e utilize os métodos apropriados para publicar os scripts.
- coloque outras imagens no código da view, para que você veja as diferenças.
- Lembra-se que na parte 1 havia um parâmetro que indicava a id do vídeo que seria exibido? Faça algo parecido. Acrescente parâmetros ao plugin, onde o usuário poderá passar, por exemplo, qual o nome das classes de “next” e “previous” do carrossel. Tente também customizar outros parâmetros do jcarousel (veja a documentação) através de parâmetros passados pelo usuário do widget. Dica: para isso, você precisará copiar o conteúdo do arquivo “jcarousel.basic.js” e editá-lo no próprio código do widget. Utilize a classe CclientScript para isso.
Show de bola esse tutorial cara!!