27
Criandeiros Trabalhando com as views do Web2py

Trabalhando com as views do Web2Py

Embed Size (px)

Citation preview

Page 1: Trabalhando com as views do Web2Py

Criandeiros

Trabalhando com as views do Web2py

Page 2: Trabalhando com as views do Web2Py

Who Am I?

● Hugo Leonardo Costa e Silva

● Apaixonado por desenvolvimento de software, DevOps e

novas tecnologias

● Trabalho com desenvolvimento de software a mais quatro

anos

● Trabalho com PHP, Python, Javascript

● Entusiasta e autodidata

Page 3: Trabalhando com as views do Web2Py

Web2Py: Views

O propósito de uma view é incluir código Python no HTML.

No geral isso pode ocasionar alguns problemas.

● Como o código incluído no HTML deve ser escapado?

● A indentação deve ser baseada nas regras do Python ou do

HTML?

Page 4: Trabalhando com as views do Web2Py

Web2Py: Views

O Web2Py usa {{ }} para separar o código

Python do HTML.

A indentação deve seguir as regras do HTML.

O código Python é executável mesmo sem

indentação.

Page 5: Trabalhando com as views do Web2Py

Web2Py: Views

Sintaxe Básica

● A marcação para escape é feita dentro de {{ e }}

● Blocos de código começam nas linhas com {{ }} e terminadas em :

● Blocos de código terminam onde encontram a instrução {{pass}}

● Nos casos em que a construção do bloco for clara, não será preciso usar o {{pass}}

● A linguagem de template do Web2Py suporta todas as estruturas de controle do Python

Page 6: Trabalhando com as views do Web2Py

Web2Py: Views

Sintaxe Básica

<html><body>

{{for x in range(10):}}

{{=x}} hello <br />

{{pass}}

</body>

</html>

Page 7: Trabalhando com as views do Web2Py

Web2Py: Views

Estruturas de controle

● for...in

{{ itens = ['a', 'b', 'c'] }}

<ul>

{{for item in itens:}}<li>{{=item}}</li>{{pass}}

</ul>

Page 8: Trabalhando com as views do Web2Py

Web2Py: Views

Estruturas de controle

● while

{{k = 3}}

<ul>

{{while k > 0:}}

<li>{{=k}}{{k = k – 1}}</li>

{{pass}}

</ul>

Page 9: Trabalhando com as views do Web2Py

Web2Py: Views

Estruturas de controle

● If … elif … else

<h2>

{{=k}}

{{if k % 2:}} é par {{else:}} é ímpar {{pass}}

</h2>

Page 10: Trabalhando com as views do Web2Py

Web2Py: Views

Tratamento de exceção

{{ try: }}

Hello {{= 10 / 0}}

{{ except: }}

Divisão por zero

{{ else: }}

Operação Ok.

{{ finally }}

<br />

{{ pass }}

Page 11: Trabalhando com as views do Web2Py

Web2Py: Views

Definição de função

● A linguagem de template do web2py permite ao desenvolvedor a definir e implementar funções que podem retornar qualquer objeto Python ou string de texto/html.

Page 12: Trabalhando com as views do Web2Py

Web2Py: Views

Definição de função{{ def SBUTTON(texto):

return BUTTON(texto, _class="btn btn-success")}}

<div>

{{=SBUTTON("Sucesso")}}

{{=WBUTTON("Warning")}}

{{=DBUTTON("Danger")}}

</div>

Page 13: Trabalhando com as views do Web2Py

Web2Py: Views

HTML Helpers

● Os helpers de HTML são objetos que nos auxiliam na construção do HTML

● O esquema de helpers no web2py é muito mais que um sistema de geração de HTML sem a necessidade de concatenar string. Ele prove uma representação do DOM no lado do servidor.

Page 14: Trabalhando com as views do Web2Py

Web2Py: Views

Alguns helpers do Web2Py

● A, B, BEAUTIFY, BODY, BR, CAT, CENTER, CODE, COL, COLGROUP, DIV, EM, EMBED, FIELDSET,

FORM, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, I, IFRAME, IMG, INPUT, LABEL, LEGEND, LI,

LINK, MARKMIN, MENU, META, OBJECT, ON, OL, OPTGROUP, OPTION, P, PRE, SCRIPT, SELECT,

SPAN, STYLE, TABLE, TAG, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, UL, URL,

XHTML, XML, embed64, xmlescape

Page 15: Trabalhando com as views do Web2Py

Web2Py: Views

Exemplos de uso

{{=DIV(B(I("hello ", "<world>"))), _class="myclass")}}

Resultado:

<div class="myclass"><b><i>hello &lt;world&gt;</i></b></div>

{{=DIV('text', _data-role='collapsible')}}

Resultado:

<div data-role="collapsible">text</div>

Page 16: Trabalhando com as views do Web2Py

Web2Py: Views

Built-in helpers

{{=A('Clique Aqui', callback=URL('myaction'))}}

{{=A('Ver resultado', callback=URL('resultado'), target="retorno")}}

{{=DIV(_id="retorno")}}

{{=A('Click Aqui', callback=URL('myaction'), delete="tr")}}

Page 17: Trabalhando com as views do Web2Py

Web2Py: Views

BEAUTIFY

BEAUTIFY é usado para criar representações de objetos compostos em HTML incluindo listas tuplas e dicionários.

{{=BEAUTIFY({"a": ["Hugo", XML("Leonardo")], "b": (1, 2)})}}

Page 18: Trabalhando com as views do Web2Py

Web2Py: Views

Parser do DOM no servidor

O helper DIV e todos os seus derivados fornecem métodos de pesquisa de elementos.

O element retorna o primeiro elemento filho especificado do termo de busca ou None se caso não for encontrado.

O elements retorna todos os elementos

Page 19: Trabalhando com as views do Web2Py

Web2Py: Views

Parser do DOM no servidor

Exemplo:

divs = DIV(DIV(DIV('div','alvo', _id='alvo',_class='alvo')))

divs.elements('div#alvo')

d[0][0] = 'elemento'

print divs

Page 20: Trabalhando com as views do Web2Py

Web2Py: Views

O Parsing

O Objeto TAG é também um parser XML/HTML.

Ele permite a leitura e conversão de strings em uma árvore de estrutura de helpers.

html = '<h3>Teste do <b>parser</b></h3>'

parsed_html = TAG(html)

parsed_html.element('b')[0]='parsing'

print parsed_html

Page 21: Trabalhando com as views do Web2Py

Web2Py: Views

O Layout

As views podem estender e incluir outras views em sua

estrutura.

Por exemplo podemos fazer com que a view “index.html”

estenda a view “layout.html” e inclua a view “body.html”.

E ao mesmo tempo o “layout.html” incluir o “header.html” e

o “footer.html”.

Page 22: Trabalhando com as views do Web2Py

Web2Py: Views

Exemplo:index.html

{{extend 'layout.html'}}

{{include 'body.html'}}

layout.html

{{include 'header.html'}}

{{include}}

{{include 'foorter.html'}}

Page 23: Trabalhando com as views do Web2Py

Web2Py: Views

Funções na view<html>

<body>

{{include}}

<div class="sidebar">

{{if 'menulateral' in globals():}}{{menulateral()}}{{else:}}menu padrão

{{pass}}</div>

</body>

</html>

Page 24: Trabalhando com as views do Web2Py

Web2Py: Views

E na view estendida...

{{def menulateral():}}

<ul><li><a href=”#home”>Home</a></li></ul>

{{return}}

{{extend 'layout.html'}}

Page 25: Trabalhando com as views do Web2Py

Web2Py: Views

Blocos nas views

<html>

<body>

{{include}}

<div class="menulateral">

{{block menulateral}}Menu lateral padrão

{{end}}</div>

</body>

</html>

Page 26: Trabalhando com as views do Web2Py

Web2Py: Views

E na view estendida...

{{extend 'layout.html'}}

{{block menulateral}}

Outro menu lateral

{{end}}

Page 27: Trabalhando com as views do Web2Py

Web2Py: Views

E isso é tudo pessoal.

Contatos:

Twitter: @hugoleodev, @pythonair

Facebook: hugoleodev, PythOnAir

E-mail: [email protected]

Github: hugoleodev