zf básico - 4. controle e visão

31
1 Zend Framework Zend Framework Parte IV: Ampliando a Parte IV: Ampliando a primeira aplicação – primeira aplicação – Controle e Visão Controle e Visão

Upload: marcos-bezerra

Post on 29-Jun-2015

3.281 views

Category:

Education


0 download

DESCRIPTION

Mini-curso sobre Zend Framework - Parte 4

TRANSCRIPT

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

11

Zend FrameworkZend Framework

Parte IV: Ampliando a primeira Parte IV: Ampliando a primeira aplicação – Controle e Visãoaplicação – Controle e Visão

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

22

Ajustando o BootstrapAjustando o BootstrapSubstitua o seguinte trecho de código:Substitua o seguinte trecho de código:

Zend_Loader::loadClass('Zend_Controller_Front');Zend_Loader::loadClass('Zend_Controller_Front');

Por:Por:

Zend_Loader::registerAutoload();Zend_Loader::registerAutoload();

O método registerAutoload() se encarrega de carregar O método registerAutoload() se encarrega de carregar automaticamente qualquer classe da biblioteca do ZF.automaticamente qualquer classe da biblioteca do ZF.

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

33

Especificação da AplicaçãoEspecificação da Aplicação

Iremos construir uma simples aplicação para inventário de uma coleção de CDs.

A página principal deverá listar a coleção e permitir o acesso às funcionalidades de Adicionar, Editar e Remover CDs da coleção.

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

44

Modelando os DadosModelando os Dados

Iremos armazenar nossa lista numa tabela chamada ‘cd’ com um esquema semelhante a:

CampCampoo

TipoTipo NuloNulo??

ObsObs

idid IntegerInteger NãoNão Primary key,Autoincrement

artistartistaa

Varchar(10Varchar(100)0)

NãoNão

titulotitulo Varchar(10Varchar(100)0)

NãoNão

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

55

Páginas para a aplicaçãoPáginas para a aplicaçãoPáginaPágina DescriçãoDescrição

HomeHome 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.

AdicionarAdicionar Proverá um formulário para adição de um novo álbum.

EditarEditar Proverá um formulário para edição de um álbum.

RemoverRemover Esta página confirmará a remoção de um álbum e então o removerá.

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

66

Organizando as páginasOrganizando as páginas

Cada página da aplicação é conhecida como uma “action” e estas são agrupadas dentro de “controllers”.

Ex.: Para uma URL no formato http://localhost/project/news/view, o controller é news e a action é view.

O ZF permite agrupar actions relacionadas.

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

77

Organizando as páginasOrganizando as páginas

O controller do ZF reserva uma action especial chamada index como a action padrão.

Em nosso exemplo, na URL http://localhost/project/news/ a action index contida no controller news será executada.

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

88

Organizando as páginasOrganizando as páginas

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:

PáginaPágina ControllerController ActionAction

HomeHome IndexIndex indexindex

AdicionarAdicionar IndexIndex addadd

EditarEditar IndexIndex editedit

RemoverRemover IndexIndex deletedelete

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

99

Setando o Setando o controllercontroller

No ZF, o controller é uma classe nomeada como {Nome}Controller.

Esta classe deverá estar num arquivo chamado {Nome}Controller.php dentro do diretório ./application/controllers.

Note que ambos os nomes devem começar com letras maiúsculas.

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

1010

Setando o Setando o controllercontroller

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.

Como nosso controller é o IndexController já iniciado na aplicação passada, vamos editá-lo.

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

1111

Setando o Setando o controllercontroller

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.

Como nosso controller é o IndexController já iniciado na aplicação passada, vamos editá-lo.

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

1212

Setando o Setando o controllercontroller

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

1313

Setando o Setando o controllercontroller

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:

URLURL ActionAction

http://localhost/projecthttp://localhost/project IndexController::indexAction()IndexController::indexAction()

http://localhost/project/index/http://localhost/project/index/addadd

IndexController::addAction()IndexController::addAction()

http://localhost/project/index/http://localhost/project/index/editedit

IndexController::editAction()IndexController::editAction()

http://localhost/project/index/http://localhost/project/index/deletedelete

IndexController::deleteAction()IndexController::deleteAction()

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

1414

Setando o Setando o viewview 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.

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.

Dessa forma, o script de visualização renderizado é: views/scripts/{controller_name}/{action_name}.phtml

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

1515

Setando o Setando o viewview

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.

Implementar a renderização das visões das páginas com seus respectivos títulos.

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

1616

Setando o Setando o viewview

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

1717

Setando o Setando o viewview

É preciso adicionar quatro arquivos de visão à aplicação. Estes arquivos são conhecidos como scripts de visão ou templates de visão.

Cada template é nomeado conforme sua action e possui extensão .phtml.

O arquivo precisa estar no subdiretório nomeado conforme o controller utilizado.

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

1818

Setando o Setando o viewview ./application/views/scripts/index/index.phtml

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

1919

Setando o Setando o viewview ./application/views/scripts/index/add.phtml

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

2020

Setando o Setando o viewview ./application/views/scripts/index/edit.phtml

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

2121

Setando o Setando o viewview

./application/views/scripts/index/delete.phtml Rode a aplicação.

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

2222

Código HTML comumCódigo HTML comum

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.

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.

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

2323

Código HTML comumCódigo HTML comum São necessários os seguintes ajustes em

nossa aplicação:– Criar o diretório: ./application/layouts.– Inicializar o Zend_Layout no arquivo bootstrap

(index.php): Localize a linha: $frontController->setControllerDirectory('../application/controllers'); Abaixo dela acrescente:/** * seta o diretório com os templates-padrão da aplicação * */Zend_Layout::startMvc(array('layoutPath'=>'./application/

layouts'));

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

2424

Código HTML comumCódigo HTML comum

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.

Agora é preciso criar um script de layout. Por padrão, ele é chamado layout.phtml e fica no diretório ./application/layouts.

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

2525

Criando o layout.phtmlCriando o layout.phtml

./application/layouts/layout.phtml

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

2626

Código HTML comumCódigo HTML comum

Agora, pode-se limpar as 4 action scripts pois nenhum conteúdo específico foi colocado nelas.

Sem apagar os arquivos, apenas limpe o conteúdo de index.phtml, add.phtml, edit.phtml e delete.phtml.

Execute o código e analise o resultado.

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

2727

Aplicando um CSS: Aplicando um CSS: ProblemaProblema

Aplicar um CSS ao projeto com ZF tem Aplicar um CSS ao projeto com ZF tem um problema: a URL não consegue um problema: a URL não consegue apontar corretamente ao diretório-raiz apontar corretamente ao diretório-raiz da aplicação.da aplicação.

Isso é resolvido usando um componente Isso é resolvido usando um componente chamado chamado HelperHelper de visão. de visão.

Ao passo que o ZF provê muitos Ao passo que o ZF provê muitos helpershelpers prontos, alguns específicos precisam prontos, alguns específicos precisam ser feitos pelo projetista da aplicação.ser feitos pelo projetista da aplicação.

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

2828

Aplicando um CSS: SoluçãoAplicando um CSS: Solução Será preciso criar um view helper específico,

chamado baseUrl(), que colherá a informação no formato requerido para requisitar o objeto.

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).

Em nossa aplicação, o arquivo é chamado BaseUrl.php.

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

2929

Criando o Criando o View HelperView Helper

./application/views/helpers/BaseUrl.php

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

3030

Ajustando o layout.phtmlAjustando o layout.phtml

Localize o seguinte trecho de código no arquivo Localize o seguinte trecho de código no arquivo layout.phtml e acrescente a linha necessária:layout.phtml e acrescente a linha necessária:

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

3131

Criando o CSSCriando o CSS

./public/css/site.css Rode a aplicação.