User Interface (in portuguese)

37
User Interface Bruno Pedro <[email protected] > PHP Advanced - 16 de Setembro de 2008

description

 

Transcript of User Interface (in portuguese)

Page 1: User Interface (in portuguese)

User Interface

Bruno Pedro <[email protected]>

PHP Advanced - 16 de Setembro de 2008

Page 2: User Interface (in portuguese)

User Interface

PHP Advanced

Conteúdo

• Template View Pattern

• Smarty

• Componentes

• Projecto

• Resumo

2

Page 3: User Interface (in portuguese)

User Interface

PHP Advanced

Template View Pattern

3

fonte: Fowler, M., Patterns of Enterprise Application Architecture, p. 350

Page 4: User Interface (in portuguese)

User Interface

PHP Advanced

Template View Pattern

• Separação real entre lógica e apresentação

• A informação aparece nas páginas através de marcadores (tags) específicos

• Toda a lógica antes da apresentação não escreve nem devolve HTML

• Solução ideal para equipas em que existem programadores e Web designers

4

Page 5: User Interface (in portuguese)

User Interface

PHP Advanced

Model, Helper e View

5

Calculatorsummultiply...

Calculator Helper

<html><body>

12 + 5 ={$calc->sum x=12 y=5}

</body></html>

Model Helper View

Page 6: User Interface (in portuguese)

User Interface

PHP Advanced

Model, Helper e View

• Divisão facilita a separação entre lógica e apresentação

• Possibilidade de delegar tarefas em cada uma das camadas a equipas diferentes

• Diminui a complexidade do código, facilitando a sua manutenção

6

Page 7: User Interface (in portuguese)

User Interface

PHP Advanced

Model

7

Page 8: User Interface (in portuguese)

User Interface

PHP Advanced

Model

• Implementa a lógica do negócio:

• acesso à informação (bases de dados);

• algoritmos específicos;

• cálculo numérico;

• acesso a Web Services.

8

Page 9: User Interface (in portuguese)

User Interface

PHP Advanced

Helper

9

Page 10: User Interface (in portuguese)

User Interface

PHP Advanced

Helper

• Implementa a lógica funcional:

• input do utilizador;

• paginação de resultados;

• adaptação e agregação de informação.

10

Page 11: User Interface (in portuguese)

User Interface

PHP Advanced

View

11

Page 12: User Interface (in portuguese)

User Interface

PHP Advanced

View

• Implementa a lógica de apresentação:

• interface com o utilizador;

• aparência e estética das páginas;

• selecção da informação a apresentar.

12

Page 13: User Interface (in portuguese)

User Interface

PHP Advanced

Smarty• Motor de templates com sintaxe simples

• Utiliza objectos

• Permite compilar templates, melhorando o seu desempenho

• Bastante versátil e modular

13

Page 14: User Interface (in portuguese)

User Interface

PHP Advanced

Utilização• Código pode ser obtido em

http://smarty.php.net/

• Para começar é necessário instanciar um objecto Smarty

14

Page 15: User Interface (in portuguese)

User Interface

PHP Advanced

Configurações• $smarty->template_dir: directório onde o

Smarty vai interpretar os templates

• $smarty->compile_dir: directório onde o Smarty vai gravar os templates compilados

• $smarty->cache_dir: directório onde é gravada a cache

• $smarty->caching: possibilidade de ligar ou desligar a cache

15

Page 16: User Interface (in portuguese)

User Interface

PHP Advanced

Variáveis• Passagem de variáveis que poderão ser

usadas pelo template

16

Page 17: User Interface (in portuguese)

User Interface

PHP Advanced

Variáveis

• {$var} - mostra o conteúdo da variável

• {$array[5]} - mostra o conteúdo do 5º elemento do array

• {$array.name} - mostra o conteúdo da posição ‘name’ do array

• {$obj->name} - mostra o conteúdo do atributo ‘name’ do objecto

17

Page 18: User Interface (in portuguese)

User Interface

PHP Advanced

Modificadores• {$name|capitalize}: apresenta em maiúsculas

as primeiras letras de todas as palavras

• {$today|date_format}: formata a apresentação de uma data e hora

• {$title|lower}: converte em minúsculas

• {$title|upper}: converte em maiúsculas

• {$body|wordwrap:30}: quebra um texto a uma largura específica

18

Page 19: User Interface (in portuguese)

User Interface

PHP Advanced

Modificadores

• É possível combinar modificadores

19

{$title|capitalize|wordwrap:10}

{$text|strip_tags|lower|truncate}

Page 20: User Interface (in portuguese)

User Interface

PHP Advanced

Funções - capture• Grava numa variável o conteúdo que

estiver entre os tags

• Exemplo:

20

Page 21: User Interface (in portuguese)

User Interface

PHP Advanced

Funções - foreach

• Implementa um iterador de arrays

• Exemplo:

21

Page 22: User Interface (in portuguese)

User Interface

PHP Advanced

Funções - if• Implementa uma condição

• Exemplo:

22

Page 23: User Interface (in portuguese)

User Interface

PHP Advanced

Funções - include

• Inclui outro ficheiro Smarty

• O outro ficheiro é interpretado

• Todas as variáveis ficam disponíveis no ficheiro incluido

• Exemplo:

{include file=”ficheiro2.html”}

23

Page 24: User Interface (in portuguese)

User Interface

PHP Advanced

Funções - literal• Permite não interpretar um bloco de

código

• Bastante útil quando temos JavaScript dentro dos templates

{literal}

Este bloco não é interpretado.

{/literal}

24

Page 25: User Interface (in portuguese)

User Interface

PHP Advanced

Outras funcionalidades

• Muitos outros modificadores e funções

• Caching parcial e dependente de identificador

• Configurações de segurança

• Filtros de templates

• Extensível através de plugins

25

Page 26: User Interface (in portuguese)

User Interface

PHP Advanced

Separação

26

ApresentaçãoLógica

<html><body>

12 + 5 ={$calc->sum x=12 y=5}

</body></html>

Calculatorsummultiply...

Calculator Helper

Page 27: User Interface (in portuguese)

User Interface

PHP Advanced

Componentes• User

• Registo

• Autenticação

• Configurações

• Data

• Obtenção e gravação de dados

• RSS

27

Page 28: User Interface (in portuguese)

User Interface

PHP Advanced

User

28

save()load()auth()addConf()...

firstNamelastNameusername

User

Page 29: User Interface (in portuguese)

User Interface

PHP Advanced

Data

29

save()load()search()...

source...

Data

Page 30: User Interface (in portuguese)

User Interface

PHP Advanced

RSS

30

get()getItem()...

source...

RSS

Page 31: User Interface (in portuguese)

User Interface

PHP Advanced

Projecto

• Página de registo

• nome

• username

• password

• confirmação de password

31

Page 32: User Interface (in portuguese)

User Interface

PHP Advanced

Projecto

• Página de autenticação

• username

• password

32

Page 33: User Interface (in portuguese)

User Interface

PHP Advanced

Projecto

• Configurações

• adicionar URL de RSS

• remover URL de RSS

• listar URLs configurados

33

Page 34: User Interface (in portuguese)

User Interface

PHP Advanced

Projecto

• Visualização de dados

• listagem dos itens dos vários RSS

• ordenação

• paginação

34

Page 35: User Interface (in portuguese)

User Interface

PHP Advanced

Resumo

• Template View Pattern

• Model, Helper e View

• Smarty

• Componentes a implementar

• Implementação de User Interface

35

Page 36: User Interface (in portuguese)

User Interface

PHP Advanced

Questões?

36

Page 37: User Interface (in portuguese)

User Interface

PHP Advanced

Mais informação

37

• O meu blog: http://unfoldingtheweb.com/

• Manual de PHP: http://www.php.net/