CakePHP Brasil

17 agosto 2008

Asset de JS e CSS no CakePHP

Arquivado em: CakePHP — Tags:, , , , — Juan Basso @ 11:37 pm

Pessoal,

Peguei a versão do Asset feita pelo Matt Curry no bakery no artigo Automatic JavaScript and CSS Packer, depois atualizado em seu site (CakePHP Asset Packer Helper) e fiz algumas modificações.

As modificações que fiz não são grandes coisas, mas algumas coisas úteis, como procurar arquivos de JS e CSS nas pastas de vendors e plugins, algumas otimizações e configuração de quais assets deseja e pode utilizar (por exemplo, se você configurar que quer fazer asset packer no JS e não tiver o vendor necessário, ele não fará para não estragar seu código).

Para instalar em seu site, segue o procedimento:

Baixar os seguintes arquivos:

Feito isso, usar os helpers $html e $javascript para adicionar, mas sempre usar inline como false. Além disso, no AppController, colocar o Asset na lista de helpers.

No lugar do $scripts_for_layout, colocar $asset->scripts_for_layout().

Pronto, só isso e todos seus CSS e JS serão packeds.

Abraços e qualquer coisa é só comentar.

19 maio 2008

Usando jQuery com CakePHP

Arquivado em: Tutoriais — Tags:, , — Juan Basso @ 8:59 pm

Vendo o questionamento de muitas pessoas no Google Groups, vou explicar como usar o jQuery juntamente com o CakePHP.

A primeira coisa que você tem que fazer é baixar o código do jQuery e colocá-lo na pasta vendors\js (tanto faz ser na vendors dentro de app ou fora). Depois disso, nos controllers que você for utilizar o jQuery, inclua o helper Javascript:

1
2
3
class SeuController extends AppController {
  var $helpers = array('Javascript');
}

Se você usa em todas as páginas, pode colocar isto no seu AppController.

Feito isso, você pode usar na sua view (ou layout) o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
// Incluir o jQuery ao projeto
// Neste exemplo estou importando a jquery.tablesorter também
// O segundo parâmetro (false) é para indicar que vai no <head> e não no local onde está sendo executado
$javascript->link(array('jquery', 'jquery.tablesorter'), false);
 
// Aqui vou definir alguns comandos de jQuery
$javascript->codeBlock('
  $(document).ready(function(){
    $("#detalhe_compra").tablesorter({decimal: ",", dateFormat: "uk"});
    $("#resumo_compras").tablesorter({decimal: ",", dateFormat: "uk"});
  });', array('inline' => false));
?>
Minha view normalmente...

Com isso, você faz que o código javascript vá para o <head> do seu HTML e não fique no meio das suas views, o que é deselegante e fora do padrão W3C.

Num próximo post explico como usar jQuery e AJAX.

Powered by WordPress