ZF Básico - 4. Controle e Visão

3.448 visualizações

Publicada em

Mini-curso sobre Zend Framework - Parte 4

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
3.448
No SlideShare
0
A partir de incorporações
0
Número de incorporações
25
Ações
Compartilhamentos
0
Downloads
164
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

ZF Básico - 4. Controle e Visão

  1. 1. Zend Framework Parte IV: Ampliando a primeira aplicação – Controle e Visão
  2. 2. Ajustando o Bootstrap <ul><li>Substitua o seguinte trecho de código: </li></ul><ul><li>Zend_Loader::loadClass('Zend_Controller_Front'); </li></ul><ul><li>Por: </li></ul><ul><li>Zend_Loader::registerAutoload(); </li></ul><ul><li>O método registerAutoload() se encarrega de carregar automaticamente qualquer classe da biblioteca do ZF. </li></ul>
  3. 3. Especificação da Aplicação <ul><li>Iremos construir uma simples aplicação para inventário de uma coleção de CDs. </li></ul><ul><li>A página principal deverá listar a coleção e permitir o acesso às funcionalidades de Adicionar, Editar e Remover CDs da coleção. </li></ul>
  4. 4. Modelando os Dados <ul><li>Iremos armazenar nossa lista numa tabela chamada ‘cd’ com um esquema semelhante a: </li></ul>Não Varchar(100) titulo Não Varchar(100) artista Primary key, Autoincrement Não Integer id Obs Nulo? Tipo Campo
  5. 5. Páginas para a aplicação Esta página confirmará a remoção de um álbum e então o removerá. Remover Proverá um formulário para edição de um álbum. Editar Proverá um formulário para adição de um novo álbum. Adicionar Exibirá a lista de álbuns e proverá links para editá-los e removê-los. Além disso, um link para permitir a adição de novos álbuns será provido. Home Descrição Página
  6. 6. Organizando as páginas <ul><li>Cada página da aplicação é conhecida como uma “action” e estas são agrupadas dentro de “controllers”. </li></ul><ul><li>Ex.: Para uma URL no formato http://localhost/project/news/view, o controller é news e a action é view . </li></ul><ul><li>O ZF permite agrupar actions relacionadas. </li></ul>
  7. 7. Organizando as páginas <ul><li>O controller do ZF reserva uma action especial chamada index como a action padrão. </li></ul><ul><li>Em nosso exemplo, na URL http://localhost/project/news/ a action index contida no controller news será executada. </li></ul>
  8. 8. Organizando as páginas <ul><li>Como temos quatro páginas, todas aplicáveis a álbuns, iremos agrupá-las num único controller contedo as quatro actions . Usaremos o controller padrão e as quatro actions serão: </li></ul>delete Index Remover edit Index Editar add Index Adicionar index Index Home Action Controller Página
  9. 9. Setando o controller <ul><li>No ZF, o controller é uma classe nomeada como {Nome}Controller. </li></ul><ul><li>Esta classe deverá estar num arquivo chamado {Nome}Controller.php dentro do diretório ./application/controllers. </li></ul><ul><li>Note que ambos os nomes devem começar com letras maiúsculas. </li></ul>
  10. 10. Setando o controller <ul><li>Cada action é uma função pública contida na classe controller e deve ser nomeada como {nome}Action. Neste caso {nome} deve iniciar com letra minúscula. </li></ul><ul><li>Como nosso controller é o IndexController já iniciado na aplicação passada, vamos editá-lo. </li></ul>
  11. 11. Setando o controller <ul><li>Cada action é uma função pública contida na classe controller e deve ser nomeada como {nome}Action. Neste caso {nome} deve iniciar com letra minúscula. </li></ul><ul><li>Como nosso controller é o IndexController já iniciado na aplicação passada, vamos editá-lo. </li></ul>
  12. 12. Setando o controller
  13. 13. Setando o controller <ul><li>Setamos as quatro actions que usaremos no controller . Porém, não poderão ser usadas até que setemos seus respectivos views . As URLs para cada action são: </li></ul>IndexController::deleteAction() http://localhost/project/index/delete IndexController::editAction() http://localhost/project/index/edit IndexController::addAction() http://localhost/project/index/add IndexController::indexAction() http://localhost/project Action URL
  14. 14. Setando o view <ul><li>O componente view do ZF é chamado Zend_View. Ele nos permitirá separar o código de visualização da página do código das funções action . </li></ul><ul><li>Zend_Controller_Action_Helper_ViewRenderer é o componente listener que inicializa uma propriedade view ($this->view) para que possa ser usada na renderização de um script de visualização. Para isso, ele seta o objeto Zend_View para observar em views/scripts/{controller_name} para que seja renderizado o script de visualização cujo nome seja a parte inicial da action correspondente, acrescido da extensão .phtml. </li></ul><ul><li>Dessa forma, o script de visualização renderizado é: views/scripts/{controller_name}/{action_name}.phtml </li></ul>
  15. 15. Setando o view <ul><li>Para integrar a visualização dentro da aplicação é preciso criar os arquivos de visualização ( templates ). Para prover funcionalidade aos mesmos, deve-se acrescentar algum conteúdo específico que corresponda às ações definidas nos controller actions . </li></ul><ul><li>Implementar a renderização das visões das páginas com seus respectivos títulos. </li></ul>
  16. 16. Setando o view
  17. 17. Setando o view <ul><li>É preciso adicionar quatro arquivos de visão à aplicação. Estes arquivos são conhecidos como scripts de visão ou templates de visão. </li></ul><ul><li>Cada template é nomeado conforme sua action e possui extensão .phtml. </li></ul><ul><li>O arquivo precisa estar no subdiretório nomeado conforme o controller utilizado. </li></ul>
  18. 18. Setando o view <ul><li>./application/views/scripts/index/index.phtml </li></ul>
  19. 19. Setando o view <ul><li>./application/views/scripts/index/add.phtml </li></ul>
  20. 20. Setando o view <ul><li>./application/views/scripts/index/edit.phtml </li></ul>
  21. 21. Setando o view <ul><li>./application/views/scripts/index/delete.phtml </li></ul><ul><li>Rode a aplicação. </li></ul>
  22. 22. Código HTML comum <ul><li>Ficou bem óbvio que há um código HTML comum em nossos templates . Este é um problema bastante comum, por isso o componente Zend_Layout foi desenvolvido para resolvê-lo. </li></ul><ul><li>Zend_Layout nos permite mover todo o código de cabeçalho e rodapé comuns para um script de layout , o qual poderá incluir o código de visão que for específico à ação executada. </li></ul>
  23. 23. Código HTML comum <ul><li>São necessários os seguintes ajustes em nossa aplicação: </li></ul><ul><ul><li>Criar o diretório: ./application/layouts. </li></ul></ul><ul><ul><li>Inicializar o Zend_Layout no arquivo bootstrap (index.php): </li></ul></ul><ul><ul><ul><li>Localize a linha: </li></ul></ul></ul><ul><ul><ul><li>$frontController->setControllerDirectory('../application/controllers'); </li></ul></ul></ul><ul><ul><ul><li>Abaixo dela acrescente: </li></ul></ul></ul><ul><ul><ul><li>/** </li></ul></ul></ul><ul><ul><ul><li>* seta o diretório com os templates-padrão da aplicação </li></ul></ul></ul><ul><ul><ul><li>* </li></ul></ul></ul><ul><ul><ul><li>*/ </li></ul></ul></ul><ul><ul><ul><li>Zend_Layout::startMvc(array('layoutPath'=>'./application/layouts')); </li></ul></ul></ul>
  24. 24. Código HTML comum <ul><li>O método startMvc() trabalha nos bastidores para setar um plugin ao front controller que garantirá que o componente Zend_Layout renderize o script de layout, com os scripts de visão das ações, até o final do processo de execução. </li></ul><ul><li>Agora é preciso criar um script de layout . Por padrão, ele é chamado layout.phtml e fica no diretório ./application/layouts. </li></ul>
  25. 25. Criando o layout.phtml <ul><li>./application/layouts/layout.phtml </li></ul>
  26. 26. Código HTML comum <ul><li>Agora, pode-se limpar as 4 action scripts pois nenhum conteúdo específico foi colocado nelas. </li></ul><ul><li>Sem apagar os arquivos, apenas limpe o conteúdo de index.phtml, add.phtml, edit.phtml e delete.phtml. </li></ul><ul><li>Execute o código e analise o resultado. </li></ul>
  27. 27. Aplicando um CSS: Problema <ul><li>Aplicar um CSS ao projeto com ZF tem um problema: a URL não consegue apontar corretamente ao diretório-raiz da aplicação. </li></ul><ul><li>Isso é resolvido usando um componente chamado Helper de visão. </li></ul><ul><li>Ao passo que o ZF provê muitos helpers prontos, alguns específicos precisam ser feitos pelo projetista da aplicação. </li></ul>
  28. 28. Aplicando um CSS: Solução <ul><li>Será preciso criar um view helper específico, chamado baseUrl(), que colherá a informação no formato requerido para requisitar o objeto. </li></ul><ul><li>View helpers ficam no subdiretório application/views/helpers e são nomeados {Helper_name}.php (primeira letra maiúscula) e a classe contida precisa ser chamada Zend_View_Helper_{Helper_name} (novamente, primeira letra maiúscula). É preciso haver um método na classe chamado {helper_name}() (primeira letra minúscula). </li></ul><ul><li>Em nossa aplicação, o arquivo é chamado BaseUrl.php. </li></ul>
  29. 29. Criando o View Helper <ul><li>./application/views/helpers/BaseUrl.php </li></ul>
  30. 30. Ajustando o layout.phtml <ul><li>Localize o seguinte trecho de código no arquivo layout.phtml e acrescente a linha necessária: </li></ul>
  31. 31. Criando o CSS <ul><li>./public/css/site.css </li></ul><ul><li>Rode a aplicação. </li></ul>

×