Web2py é um framework livre de código aberto, utilizado para o desenvolvimento ágil de aplicações web seguras,
baseadas em banco de dados; foi desenvolvido em Python e é programável com Python.
Trata-se de um framework “full-stacked”, ou seja, ele já vem com todos os componentes necessários para o desenvolvimento básico de aplicações para web.
As aplicações no web2py são desenvolvidas seguindo o padrão MVC, que permite a melhor organização entre as camadas de dados, lógica e apresentação.
Além de diversos facilitadores para as tarefas de modelagem de banco de dados, criação de formulários com validação e Ajax, marcação de templates e upload de arquivos, o web2py também possui uma estrutura pronta para servir conteúdo nos mais diversos formatos, como por exemplo feeds RSS, webservices XML-RPC e permite a utilização de módulos e plugins adicionais.
O web2py possibilita que o desenvolvedor dedique-se integralmente à criação da aplicação, pois não demanda instalações nem configurações complicadas: basta baixar o framework e começar a desenvolver.

Uma das principais características do web2py é o fato de não demandar instalação para o início do desenvolvimento: basta baixar o binário executável, que já vem, inclusive, com o interpretador Python, banco de dados e o WebServer. Caso seu sistema operacional já tenha o Python 2.5+ instalado, você pode baixar o fonte do web2py e executar.

Apesar de você ter a possibilidade de desenvolver utilizando seu IDE ou editor favorito, o web2py vem com uma interface administrativa bastante completa, que permite administrar bases de dados, gerenciar aplicações e editar códigos em um editor web-based. O web2py já vem com o plugin do Zen-Coding habilitado.

O web2py utiliza o padrão de MVC, que possibilita uma separação inteligente entre o modelo de dados (Model), a lógica da aplicação (Controller) e a interface de apresentação (View). Este padrão permite que o programador desenvolva os Models e Controllers, e que um designer trabalhe com as Views de uma forma muito intuitiva, com liberdade de criação do HTML. Porém, o web2py tem um modelo próprio de marcação de template que dá a liberdade de, em alguns casos, executar o código Python mais complexo diretamente na VIEW, sendo assim um framework bastante dinâmico.

De acordo com o seu criador, o web2py foi inspirado no Ruby on Rails, por permitir o desenvolvimento ágil. Também foi inspirado no Django, no sentido de fornecer facilitadores, geradores de formulários e camada de abstração do acesso a dados.

Antes de começar o tutorial, que irá mostrar como desenvolver um blog com administração de posts e inserção de comentários com pesquisa via Ajax, vou listar as principais características do framework.

• Livre, OpenSource
• Mecanismos de segurança em formulários
• Autenticação integrada RBAC
• Garantia de compatibilidade entre versões
• Fácil de executar, não necessitando instalação, permitindo executar e armazenar projetos em um pen-drive
• Não necessita de configuração inicial (mas possibilita configuração refinada, caso seja necessário)
• MVC – Model – View – Controller
• Roda em Mac, Unix, Linux, Windows, Google App Engine, Amazon EC2, e quase todos os webservers através do Python ou via Java com o Jython
• Roda no Apache e em qualquer webserver com CGI, fastCGI, WSGI, mod_proxy ou mod_python
• Conversa com a maioria dos bancos SQL, incluindo SQlite, PostGre, MySQL, MSSQL ORACLE, entre outros
• Muitas maneiras de servir informações como HTML/XML, ATOM, RSS, RTF, JSON, AJAX, XML-RPC, REST, RDF
• Permite distribuir as aplicações compiladas
• Sistema facilitado para internacionalização, permitindo múltiplas línguas em uma única aplicação

Agora vamos ao que interessa! Na próxima página, daremos início ao tutorial.

TUTORIAL – Construindo um blog com banco de dados, administração de posts, comentários, imagens e documentos anexos, RSS e busca via Ajax – Parte 1

1. Faça o download do web2py

Isso depende do seu sistema operacional e também do fato de você ter ou não o Python instalado. Eu aconselho você a instalar o Python 2.5+ no seu sistema operacional e baixar a versão de código fonte, mas você pode pular este passo e baixar um executável caso esteja usando Mac ou Windows:

Baixe aqui o executável completo para windows

Baixe aqui o executável completo para Mac

Caso prefira usar a versão código-fonte:

Baixe e instale o Python caso ainda não tenha

Baixe aqui o web2py source-code

2. Executando o web2py

Caso tenha baixado as versões executáveis, apenas descompacte e execute no Mac ou Windows.
Já no caso da versão source code, após ter instalado o Python abra um terminal do seu sistema operacional e digite:

 python web2py.py

Ao executar, o web2py exibirá uma tela com algumas configurações iniciais:

Choose a password: neste campo coloque uma senha qualquer, ela será exigida para que você possa acessar o admin do web2py.
Running from host: não altere este campo, ele é a porta de loopback que indica que o webserver está rodando na sua própria máquina.
Running from port: deixe como está e ele rodará na porta 8000, mude apenas se quiser publicar o conteúdo na porta 80 ou se a porta 800 já estiver ocupada; para desenvolvimento não é necessário alterar.

Após clicar em Start Server, você terá o web2py rodando e o seu navegador abrirá automaticamente a aplicação de boas vindas. Caso isso não aconteça, abra seu navegador (eu disse navegador não I.E) e vá para o seguinte endereço:

http://127.0.0.1:8000

Você verá a tela de boas vindas, o que significa que já está tudo rodando e que podemos iniciar o desenvolvimento.

Clique no link [click here for administrative interface], será necessário colocar a senha configurada no início…

… e então você terá acesso ao Admin do web2py (clique na imagem abaixo para ampliar)

Nesta tela de administração, é possível acessar os seguintes itens:

1. Lista de aplicações instaladas
2. Informações sobre versão e link para atualização automática do web2py
3. Formulário para criação de novas aplicações
4. Formulário para importação de aplicação empacotada
5. Últimos anúncios oficiais via Twitter do web2py

As aplicações instaladas são pastas que estão dentro da pasta APPLICATIONS do framework, por isso, você pode utilizar seu editor ou IDE favorita e chamar via terminal algumas funções específicas do core do web2py. Porém, neste tutorial, iremos abordar apenas o trabalho efetuado diretamente na interface web – assim, todo o trabalho será feito no navegador.

Para começar, crie uma nova aplicação chamada BLOG

Insira o nome BLOG e clique em Create.

Você será redirecionado para a página de DESIGN da sua aplicação

Nesta página, 3 seções distintas são apresentadas:

MODELS, CONTROLLERS, VIEWS

Em cada uma dessas seções iremos desenvolver o código da aplicação. Mais abaixo, você verá outras opções como a LANGUAGES, que permite a definição das linguagens da app;  STATIC FILES, que contém arquivos estáticos que não exigem processamento (como imagens, arquivos de upload etc); MODULES, que é usado para armazenar módulos Python externos; e PLUGINS, que permite adicionar uma série de plugins para paginação, grids, interfaces, entre outras coisas.

Vamos começar pelo MODEL. Procure a linha que indica o arquivo db.py e clique em edit

Por padrão, este arquivo inicialmente se chama db.py, mas poderia ter qualquer outro nome. Neste arquivo iremos definir o banco de dados e o modelo das tabelas. Como o web2py já vem nativamente com o SQLite (na verdade já vem no Python), usaremos o SQLite, mas seria o mesmo processo para qualquer outro banco suportado, necessitando apenas a alteração da string de conexão.

A String de Conexão

Ignore os comentários e todo o restante do código que está no arquivo db.py. Deixe-o como está e procure a linha:

db = DAL('sqlite://storage.sqlite')

Na linha acima definimos uma variável “db” que será nossa referência para o banco sqlite (armazenado na pasta databases do framework com o nome storage.sqlite). Este nome é um padrão, mas poderíamos mudar o nome do banco na string de conexão, de acordo com o tipo de banco de dados.

O web2py tem uma camada de abstração de banco de dados “DAL”, que traduz nosso código Python em comandos SQL de acordo com o banco de dados definido na string de conexão. Isso é feito de maneira transparente, o que permite a mudança de SQLite para MySQL (por exemplo).

A sintaxe para modelagem de tabelas é:

db.define_table(
        'mytable',
        Field('myfield1','string',required=true),
        Field('myfield2','integer',requires=IS_NOT_EMPTY())
        )

Onde

db é nossa referência para a instância da classe DAL, que por sua vez está ligada ao banco SQLite
define_table é o método mais importante da classe DAL que instancia objetos do tipo Table – nossa tabela no banco de dados
‘mytable’ é o nome que damos à tabela; este parâmetro será sempre o primeiro a ser passado ao método
Field é outro método da classe DAL que define cada campo da tabela e recebe como parâmetros: nome do campo, tipo de dados e validadores (para informações detalhadas a respeito dos validadores, acesse o web2py-book - os validadores utilizados aqui serão autoexplicativos)

Vá até a última linha do arquivo, dê um enter e começaremos então a modelar as tabelas do nosso banco de dados “db”.

A primeira coisa que faremos é importar o módulo datetime do Python. Este módulo se comunica com o sistema operacional e nos permite registrar a data e hora da postagem.

Na versão atual do framework, já é possível utilizar diretamente o comando response.now para retornar data e hora. Apesar disso, quis mostrar aqui como importar um módulo py externo.

Após esta linha, modelaremos nossa principal tabela que irá conter os posts do blog.

import datetime
db.define_table(
         'posts',
         Field('post_title',notnull=True,required=True,
               requires=[IS_NOT_EMPTY(error_message=T('Fill the field!')),\
               IS_NOT_IN_DB(db, 'posts.post_title')]),
         Field('post_text', 'text'),
         Field('post_time', 'datetime', default=datetime.datetime.today()),
         Field('post_category',db.categories, required=True,
               requires = IS_IN_DB(db, 'categories.id', 'categories.category_name')),
         Field('author', db.auth_user, default=user_id)
)

A tabela acima chama-se ‘posts’
Ela possui os campos:

‘post_title’ é do tipo ‘string’ (definido automaticamente quando não informamos um tipo) e armazenará o
título da postagem. Ele é um campo de preenchimento obrigatório -  note que neste exemplo coloquei 3 validadores para definir a obrigatoriedade, sendo eles:
o notnull=True define a propriedade NOT NULL do banco de dados e não permite a inserção nula, retornando erro
o required=True informa à classe DAL que esta é uma propriedade obrigatória. Este processo ocorre no nível do Controller, sendo assim, será validado mesmo que não exista um formulário (por exemplo, quando acessado via webservice ou xml-rpc)
o requires=IS_NOT_EMPTY(error_message=T(‘Fill the field!’)) define o validador de formulários, desta forma, quando criarmos um FORM utilizando os helpers do web2py, o formulário será automaticamente validado e será exibida a mensagem ‘Fill the Field’ (que poderá ser traduzida pelo T() para qualquer idioma previamente definido).

‘post_text’ é do tipo ‘text’, responsável pela armazenagem do corpo do texto da postagem, e não será validado
‘post_time’ é do tipo ‘datetime’, campo que recebe uma data no formato ‘YYYY-MM-DD HH:MM:SS’; seu valor padrão será a data atual
‘post_category’ é um campo obrigatório que recebe a categoria da postagem
‘post_author‘ armazena o id do usuário logado no sistema

Seguindo o mesmo esquema iremos modelar as demais tabelas, mas antes é preciso entender 2 novos conceitos do DAL no web2py:

‘upload’ - quando declaramos o campo do tipo ‘upload’, o web2py automaticamente cria um campo que recebe o path para um arquivo, desta forma, quando criarmos um formulário ele irá conter um controle de upload e este arquivo será salvo na pasta UPLOADS da aplicação – o web2py irá nomear automaticamente e criar a referência no banco de dados.

‘db.<reference_table>’ por exemplo, na tabela ‘posts’ iremos ter um relacionamento com a tabela ‘categories’, onde a tabela posts receberá o id da categoria. Logo, o campo post_category será um campo que recebe o parâmetro ‘db.categories’, significando que existe um relacionamento do tipo ‘Um para Muitos’ dessa tabela com a tabela categories (não se preocupe muito com isso, pois irá entender esse conceito na prática).

Também incluiremos mais um bloco de código que determina o user_id do usuário que está logado; o web2py já implementa automaticamente o sistema de autenticação, então apenas usuários logados poderão criar posts.

Colocaremos um campo do tipo ‘boolean’ que receberá True ou False para o controle da moderação dos comentários.

Na sequência, definiremos mais algumas validações para o nível do formulário que nos permitirão o relacionamento entre as tabelas e a criação automática dos combo-box para preenchimento dos campos do formulário.

IS_EMAIL() garante que o valor inserido seja um e-mail válido

IS_IN_DB(db.table,’table.field’) define que o valor deve estar contido em outra tabela

IS_NOT_IN_DB() define que o valor não pode estar contido em outra ou na mesma tabela, trata-se de um validador muito útil para evitar cadastros em duplicidade. Você perceberá que podemos definir os validadores diretamente na declaração do Field() (como fizemos na tabela posts) e que também podemos fazer isso no final do arquivo de Model (como será feito abaixo – *recomendado*)

Clique para ver a Listagem completa dos validadores

As opções writable e readable, como os próprios nomes dizem, definem se o campo será visível ou editável nos formulários.

O código pronto do MODEL db.py deve ficar como o código abaixo. Caso não queira digitar todo o código, basta baixar e substituir o seu arquivo, que se encontra em web2py/applications/BLOG/models/db.py, pelo arquivo: [ download MODEL do BLOG db.py ]

import datetime

if auth.is_logged_in():
    user_id = auth.user.id
else:
    user_id = None

db.define_table(
        'categories',
        Field('category_name', required=True)
        )

db.define_table(
         'posts',
         Field('post_title',notnull=True,required=True,
               requires=[IS_NOT_EMPTY(error_message=T('Fill the field!')),\
               IS_NOT_IN_DB(db, 'posts.post_title')]),
         Field('post_text', 'text'),
         Field('post_time', 'datetime', default=datetime.datetime.today()),
         Field('post_category',db.categories, required=True,
               requires = IS_IN_DB(db, 'categories.id', 'categories.category_name')),
         Field('author', db.auth_user, default=user_id)
)

db.define_table(
        'comments',
         Field('post_id', db.posts, required=True),
         Field('comment_author'),
         Field('comment_author_email', required=True),
         Field('comment_author_website'),
         Field('comment_text', 'text', required=True),
         Field('comment_time', 'datetime', required=True,\
              default=datetime.datetime.today()),
         Field('approved','boolean')
               )

db.define_table(
        'document',
        Field('post_id', db.posts, required=True),
        Field('name'),
        Field('file', 'upload'),
        Field('created_on', 'datetime', default=request.now),
        Field('created_by', db.auth_user, default=user_id)
        )

db.posts.post_text.requires = IS_NOT_EMPTY()
db.posts.author.readable = False
db.posts.author.writable = False

db.comments.post_id.requires = IS_IN_DB(db, 'posts.id', '')
db.comments.comment_text.requires = IS_NOT_EMPTY()
db.comments.comment_author_email.requires = IS_EMAIL()
db.comments.comment_author_website.requires = IS_URL()
db.comments.post_id.readable = False
db.comments.post_id.writable = False

db.document.post_id.requires = IS_IN_DB(db, 'posts.id', '')
db.document.name.requires = [IS_NOT_EMPTY(), IS_NOT_IN_DB(db, 'document.name')]
db.document.post_id.readable = False
db.document.post_id.writable = False
db.document.created_by.readable = False
db.document.created_by.writable = False
db.document.created_on.readable = False
db.document.created_on.writable = False

As 64 linhas acima definiram a modelagem do banco de dados, os relacionamentos e os validadores necessários para nossos formulários. Neste momento, você já pode se certificar de que o Model está salvo e, então, voltar à interface administrativa clicando em EDIT no menu superior do web2py.

Agora iremos executar uma aplicação chamada APPADMIN. Essa aplicação, que é acessada através do link Database Administration, é a responsável por gerenciar o banco de dados. Ao clicar no link, o web2py irá verificar se o banco de dados existe e, caso não exista, ele irá criar um automaticamente . Esse processo ocorrerá também para cada tabela que definimos no modelo, e a qualquer momento que alterarmos o modelo das tabelas o web2py irá efetuar todas as alterações necessárias (você poderá verificar os comandos SQL executados clicando no link sql.log).

Clique em database administration para ter acesso ao admin das tabelas, onde você poderá efetuar operações CRUD em suas tabelas e efetuar selects, joins e outros comandos de consulta (discutiremos depois). Note que o web2py já criou para você algumas tabelas de controle de usuários, grupos e autenticação.

Clicando no nome da tabela você verá a tela de pesquisa: nela poderá executar comandos do DAL que são equivalentes aos comandos SQL. Veja exemplos aqui (os exemplos serão revistos no momento de criação dos Controllers).

Clicando em insert newcategories você verá formulários de inserção criados automaticamente pelo web2py; insira 3 categorias apenas para teste (Receitas, Viagens, Fotos):

Se você já chegou até aqui, então significa que já temos o modelo das tabelas e o banco de dados prontos! Vamos passar para o Controller que será a camada lógica da nossa aplicação

Controllers

Controller faz exatamente o que o nome diz: “controla” as ações da aplicação. Os Controllers definem as ACTIONS que, analisando de uma maneira bem simplificada, são funções Python. Se você já programa em Python deve conhecer a sintaxe de uma função ou método.

def ActionName():
      [execute algum código]
      return [alguma resposta]

Algumas regras devem ser seguidas na construção dos controllers. Obviamente que a primeira delas é a regra de endentação do Python, portanto, no controller é necessário escrever corretamente o código Python – se você não conhece muito a respeito de endentação, indico a leitura do post Codifique como um verdadeiro pythonista e do PEP257.

O web2py tem um esquema de mapeamento de URLs baseado nas actions, e este esquema funciona da seguinte forma:

http://127.0.0.1:8000/BLOG/Controller/ActionName/

Onde :

http://… é o endereço do seu servidor
BLOG é o nome da aplicação e o nome da pasta dentro de applications
Controller é o nome do arquivo de controller ex. default.py, cadastros.py etc
ActionName é o nome da action que você criou no controller

Portanto, quando você define uma função Python que não recebe argumentos e retorna um dicionário ou um texto, o web2py irá expor esta função; se você não criar uma VIEW contendo o mesmo nome da função, o web2py irá utilizar a VIEW genérica e exibirá o output do conteúdo, além disso o web2py tem VIEWS genéricas que permitem fazer output do retorno de uma função via RSS, XML, JSON e HTML de forma automática.
Mas você obviamente irá customizar o visual e os detalhes da apresentação, ou então irá contratar um designer para criar as VIEWS.

Algumas regras são estabelecidas no ambiente do web2py para expor as funções Python:

1. Funcões que recebem argumentos ou que comecem com __ não são expostas; as funções __ActionNAme() e ActionName(param1,param2) podem ser acessadas via chamada interna, xml-rpc ou até mesmo via Ajax, mas não são expostas como views.
2. As actions devem retornar String ou algum outro objeto serializável, e geralmente optamos pelo retorno de um dicionário.

Vamos criar nosso primeiro controller:

Lembre-se que para voltar à home do ADMIN, basta clicar em EDIT no menu superior do web2py. Depois, procure abaixo da seção Controllers o arquivo default.py e clique em edit:

Dentro do arquivo default.py, que é o nosso controller padrão, teremos algumas actions já definidas – não as altere, deixe-as  como estão. Comecemos alterando a função que expõe a View index.html, definida como def index(): no arquivo do controller.

Essa é nossa página inicial e, como é um blog, já começaremos exibindo os posts e as categorias. Repare que faremos acesso ao Model e executaremos queries que irão retornar os registros da tabela ‘posts’ e da tabela categories; também será necessário exibir a quantidade de comentários para cada post e, para isso, executaremos um count() na tabela de comments.

Seu código deve ficar como o código abaixo (altere apenas o index(), não mude nada abaixo disso):

#essas 2 linhas serão o titulo e subtitulo na view
response.title = T('My Blog')
response.subtitle = T('My blog is Python powered')

def index():
    #enviamos uma mensagem de boas vindas
    response.flash = T('Welcome to my BLOG')

    #retornando todos os posts ordenados descendentemente
    #aqui fazemos um Inner join entre as tabelas de posts e categories
    posts = db(db.categories.id==db.posts.post_category)\
                      .select(db.posts.ALL,db.categories.ALL,\
                                 orderby=~db.posts.post_time)

    # aqui retornamos as categorias e a contagem de posts de cada uma
    # Existem outras formas de fazer isso, mas preferi mostrar as diferentes possibilidades de retorno e iteração
    cats = db().select(db.categories.ALL)
    categories = []
    for cat in cats:
        count = len(db(
                   db.posts.post_category == cat.id
                   ).select(db.posts.ALL))
        categorie = {'id':cat.id,'name':cat.category_name,'posts':str(count)}
        categories.append(categorie)

    #aqui retornamos os dois objetos populados
    return dict(posts=posts,categories=categories)

Já temos nosso Controller pronto para retornar o que precisamos para a View. Se você abrir o navegador e apontar para http://127.0.0.1:8000/BLOG/default/index, verá a view default do web2py retornando os dados em formato de tabela, e mesmo que o seu controller não tenha uma view correspondente, o web2py irá utilizar a view genérica para exibir as variavéis ‘posts’ e  ’categories’ que foram retornadas (isso é muito útil para debug).

Agora vamos trabalhar esse retorno para colocá-lo em um layout mais apresentavél.

Views

No web2py o template das views é marcado utilizando linguagem Python, e podemos fazer quase tudo que faríamos em um programa Python ou Controller diretamente dentro da View. Apesar de ser recomendado deixar a lógica toda no Controller, às vezes é muito útil colocar um pouco de inteligência nas Views.

O padrão para marcação segue os modelos abaixo, e os demais detalhes veremos no decorrer do tutorial:

1. O código da view não precisa seguir regras de endentacão do Python
2. A marcação para escape é feita dentro de {{ e }}
3. Blocos de código começam nas linhas {{}} terminadas em :
4. Blocos de código teminam onde encontram a instrução {{pass}}
5. Nos casos em que a construção do bloco for clara, não será preciso usar o {{pass}}

Exemplo de uso:

<div class="header">
<H1>{{=meutitulo}}</H!>
{{bands = ['Dream Theater','Gathering','Morcheeba']}}
<ul>
{{for band in bands: }}
<li>{{=band}}</li>
{{pass}}
</ul>
</div>

Resultará em:

<div class="header>
<H1>TITULO AQUI</H1>
<ul>
<li>Dream Theater</li>
<li>Gathering</li>
<li>Morcheeba</li>
</ul>
</div>

O mesmo resultado poderia ser obtido em uma única linha com o uso de HTML Helpers:

{{=DIV(H1(meutitulo),UL(*[LI(*band) for band in bands ]),_class='header')}}

Veja como o web2py faz para converter as views em output HTML:

O código abaixo…

<html><body>
{{for x in range(10):}}{{=x}}hello<br />{{pass}}
</body></html>

… será convertido em:

response.write(" <html><body> ", escape=False)
for x in range(10):
    response.write(x)
    response.write("""hello <br />""", escape=False)
response.write(" </body></html> ", escape=False)

Para facilitar, o web2py permite a definição de um arquivo de layout padrão, que possa ser usado como “MAster-Page” para todas as outras views através da utilização das cláusulas {{extend}}  e {{include}}.

Um pequeno exemplo de view que estende um layout padrão:
Código da View:

{{extend meulayout.html}}
<H1>Olá Mundo {{=minhasVariaveis}}</H1>
{{include outrapagina.html}}

O layout padrão a ser estendido deve conter a cláusula {{include}}, para servir de placeholder para o conteúdo renderizado na view.
Código do arquivo meulayout.html:

<html>
<head>
<title>Page Title</title>
</head>
  <body>
    {{include}}
  </body>
</head>

Para facilitar nosso trabalho, deixei pronto o código do layout padrão para o blog, que resultará em:

Sei que não é a coisa mais linda do mundo, mas nada que um designer não possa dar um jeito com CSS!

Faça o download do arquivo [ bloglayout.html ] e o descompacte para web2py/applications/BLOG/views/bloglayout.html. Esse é o arquivo de layout padrão que iremos utilizar em nossas views; vamos entender o conteúdo principal dele:

bloglayout:

Logo no início visualizamos o comando {{include}}, utilizado para a inclusão do arquivo web2py_ajax.html, que engloba a JQUERY e muitas funções para trabalhar com Ajax.

Este layout é um pouco diferente do comum, pois precisamos declarar mais de um placeholder na página, necessitamos de um local para incluir o conteúdo principal e outro para a inclusão dos itens da barra lateral. Por conta destas particularidades, colocaremos a cláusula {{include}} logo no inicio do <body>. O layout também contém uma DIV com a classe “flash”, que servirá para exibir mensagens de notificação.

<body>
{{include}}
<div>{{=response.flash or ''}}</div>
<body>{{include}}<div>{{=response.flash or ''}}</div>

Placeholder para o conteúdo da barra lateral, que será renderizado pela View e declarado na função sidebar():

<div class="categories">

{{if 'sidebar' in globals(): sidebar()}}

</div>

Após a visualização do código acima, será exibida uma sequência de código que define os links para a administração de usuário, login e senha (falaremos sobre Auth na segunda parte deste tutorial).

Na sequência, teremos um placeholder que será o responsável por receber o conteúdo principal das views – definido na função maincontent():

<div class="col2">

{{maincontent()}}

</div>

Agora que esse arquivo já está no diretório de Views, podemos editar a View que responde para a função index() do nosso controller default.py, acessível através da URL http://127.0.0.1:8000/BLOG/default/index. O web2py irá automaticamente rotear a chamada da URL /default/index para o controller default.py. Dentro do default.py ele procurará uma função exposta com o nome index() e irá executar este método.

Então, irá procurar na pasta de Views o arquivo default/index.html e executará o código Python + HTML deste arquivo, respondendo ao navegador.

Dentro da view, as variáveis de retorno do controller, as variáveis globais, os objetos response e request, entre outras coisas, ficarão acessíveis.

Edite a view default/index.html de acordo com o código abaixo:

{{def sidebar():}}
        <h1>{{=T('Sidebar')}}</h1>
        <h3>{{=T('Categories')}}</h3>
        {{if auth.user:}}
                [ {{=A(T('Add Category'),
                        _href=URL(r=request,c='default',f='addcategory'))}} ]
        {{pass}}
        <ul>
        {{for categorie in categories:}}
                {{=LI(A(categorie['name']+' ('+categorie['posts']+')',
                        _href=URL(r=request, f='categoryposts', args=categorie['id'])))}}
        {{pass}}
        </ul>
{{return}}

Nessa primeira parte definimos a função sidebar() que será renderizada em nosso placeholder sidebar, definido no arquivo de layout.

Linhas 2 e 3: exibimos um título e um subtítulo, inseridos na função T() – função que serve para internacionalizar strings (na segunda parte do tutorial falaremos dela)
Linhas 4 a 7: verificamos se o usuário está logado e, em caso positivo, exibimos o link para as funções AddCategory e AddPost que iremos criar em nosso Controller
Linhas 8 a 13 : Varremos a coleção de categorias retornadas pelo Controller e exibimos o nome e a contagem de posts para cada categoria. Existem inúmeras maneiras de se fazer isso, mas optei por esta forma para mostrar uma outra possibilidade

No código abaixo, iremos definir a função maincontent() que será nosso conteúdo principal, responsável pela exibição das postagens, detalhes das postagens e contagem de comentários. Colocaremos links para funções de exibição individual de posts, exibição de comentários e edição de posts (vou dividir em pequenas partes para facilitar o entendimento).

{{def maincontent():}}
        <h1>{{=T('Blog Posts')}}</h1>
        {{for item in posts:}}
                {{=H1(A(item.posts.post_title,
                       _href=URL(r=request, f='showpost', args=item.posts.id)))}}
               <small>{{=item.posts.post_time.strftime("%d/%m/%Y")}}</small>
               {{=P(XML(item.posts.post_text,sanitize=True))}}

Linha 1: definimos a função maincontent()
Linha 2: exibimos um título
Linha 3: iniciamos um Loop for nos itens da coleção de posts retornada
Linhas 4 a 5: Exibimos o título da postagem com permalink para exibição do post
Linha 6: exibimos a data de postagem formatada
Linha 7: Criamos um parágrafo com um parser XML para a exibição do texto de cada postagem, considerando tags HTML. O sanitize=True serve para prevenir inserção de código malicioso

              <p class="postmetadata">
                      {{=T('Posted in %s',item.categories.category_name)}} |
                             {{if auth.user:}}
                                    {{=A(T('Edit'),
                                              _href=URL(r=request, f='editpost', args=item.posts.id))}}|

                             {{pass}}

                        {{count = db.posts.id.count()}}
                        {{for row in db((db.posts.id==db.comments.post_id)&\
                                                (db.posts.id==item.posts.id))\
                                                 .select(db.posts.ALL, count, groupby=db.posts.id):}}

                                 {{count = row._extra[count]}}
                         {{pass}}

                         {{try:}}
                                  {{=A(T('Comments %s', int(count)),
                                         _href=URL(r=request, f='showpost', args=item.posts.id)+'#comments')}}
                         {{except TypeError:}}
                                  {{=T('No Comments')}}
                         {{pass}}
             </p>
         {{pass}}
{{return}}

Aqui criamos uma DIV para exibir os metadados da postagem (Postado em | Edit| Comentários X)
Linha 2: Mostrado em qual categoria o post está inserido
Linha 3 a 8: Caso o usuário esteja logado, damos a opção de editar a postagem
Linhas 10 a 23: Efetuamos a contagem de comentários para cada post e a exibimos – aqui utilizamos uma outra maneira para efetuar count()
Finalizamos o Loop e retornamos a função

{{extend 'bloglayout.html'}}

A linha acima estende o arquivo de layout padrão, deixando as funções sidebar() e maincontent() disponíveis para serem chamadas em seus placeholders.

Você pode fazer o download do arquivo [ index.html]  e descompactar para /web2py/applications/BLOG/views/default/index.html

Neste momento seu blog já deverá estar funcionando, porém não irá exibir nenhum post, ao menos que você efetue o cadastro via APPADMIN.

Vamos criar agora duas funções dentro do Controller default.py, que permitirão Adicionar Categorias, Adicionar Posts, Exibir Posts e Adicionar Comentários.

Criaremos os formulários automaticamente, utilizando o helper SQLFORM(); ele cria os campos do formulário de acordo com o modelo de dados e regras de validação que já estabelecemos no model.

Dentro do default.py crie as funções conforme o código abaixo (explicação nos comentários):

#decorator que exige login para acesso a esta função
@auth.requires_login()
def addcategory():
       form = SQLFORM(db.categories)
       if form.accepts(request.vars, session):
                   response.flash = 'form accepted'
       return dict(form=form)

#decorator que exige login para acesso a esta função
@auth.requires_login()
def addpost():
      form = SQLFORM(db.posts)
      if form.accepts(request.vars, session):
                  response.flash = 'form accepted'
      return dict(form=form)

def showpost():
      #recebemos o parametro do ID do post e carregamos o registro referente
      post = db.posts[request.args(0)]
      #se não tiver parametro/post selecionado então redirecionamos
      if not post:
           redirect(URL(r=request, f='index'))
      #definimos o parametro para query na tabela de comentários ( dentro deste escopo)
      db.comments.post_id.default = post.id
      #propriedades adicionais do form enquanto ainda nào temos admin de comments
      db.comments.approved.default = True
      db.comments.approved.readable = False
      db.comments.approved.writable = False
      #criamos o formulário para inclusão de posts
      form = crud.create(db.comments)
      #retornamos os comentários já existentes para este post
      comments = db(db.comments.post_id==post.id).select()
      #retornamos para a view
      return dict(post=post,comments=comments,form=form)

Se preferir, faça o download do arquivo default.py aqui: [ default.py]

Crie agora uma view para cada uma das funções criadas acima:

As views criadas serão: default/index.html, default/addpost.html, default/addcategory.html, default/showpost.html

Para cada uma dessas views, que já devem estar funcionando, iremos editar e estender o layout padrão bloglayout.html

Edite os arquivos:

default/addpost.html

{{def maincontent():}}
    <h1>{{=T('Add a post')}}</h1>
        {{=form}}
{{return}}
{{extend 'bloglayout.html'}}

default/addcategory.html

{{def maincontent():}}
    <h1>{{=T('Add a category')}}</h1>
        {{=form}}
{{return}}
{{extend 'bloglayout.html'}}

default/showpost.html

{{def maincontent():}}
    <div class="post">
        <h1>{{=post.post_title}}</h1>
         {{=P(XML(post.post_text,sanitize=True))}}
    </div>

    <div class="comments">
        <h2>{{=T('Comments on this post')}}</h2>
            {{for comment in comments:
                response.write(DIV(comment.comment_author,\
                    UL(LI(comment.comment_text))))
            pass}}

    <h3>{{=T('Post a comment')}}</h3>

    {{=form}}

    </div>
{{return}}

{{extend 'bloglayout.html'}}

Agora seu blog já está funcionando, você já pode adicionar posts, adicionar categorias, incluir comentários nos posts.

Visao geral

O layout que criamos não ficou uma maravilha, mas um designer com experiência em HTML e CSS pode facilmente customizar tudo, inclusive os formulários e Helpers
Repare que em todos os formulários o web2py criou os validadores de campos. Tente entrar com um e-mail incorreto, uma URL ilegal ou um campo obrigatório vazio para constatar.

O web2py também utiliza JQuery para criar DatePickers automaticamente para os campos do tipo ‘datetime’ e ‘date’:

Caso não esteja logado, o web2py exige que o usuário efetue login para poder cadastrar posts e categorias.

default/index

default/addcategory

default/addpost

default/showpost

Aqui você pode fazer o download da aplicação [ BLOG.w2p ], basta importar no admin do web2py.

Nas próximas partes deste tutorial, que serão publicadas em breve, iremos efetuar as seguintes alterações:

1. Inclusão das funções de listagem de categorias (categoryposts)
2. Formatação dos comentários com markdown
3. Upload de imagens e documentos
4. Busca via Ajax com auto complete
5. Internacionalização
6. Melhorias na autenticação de usuários
7. Publicação de feed RSS
8. Output em formatos XML e CSV
9. Integração com o Twitter

Espero que este post tenha sido útil para quem está começando com o web2py.
Qualquer dúvida, elogio ou sugestão é só comentar!

Obrigado

[]‘s

Referência: http://rochacbruno.com.br/blog/2010/06/desenvolvimento-com-web2py-tutorial-pt1/

p = Pessoa.objects.get(id=1)
carro = p.carro

Na primeira consulta, o Django busca na tabela de pessoas um registro único no qual o atributo id tem valor 1. Na segunda consulta, o Django busca na tabela de carros o carro que possui o valor da foreign key correspondente ao id do objeto p (instância da classe Pessoa).

Partindo deste pressuposto, é possível ver um número muito grande de problemas. Se for dado um novo modelo de classes, com seis classes: Cliente, Bairro, Cidade, UF, Pais e Continente. Essas classes possuem relacionamentos em cascata: Cliente com Bairro, Bairro com Cidade, e assim sucessivamente, até Continente. Qual seria o comportamento do Django ao tentar acessar o continente de um determinado cliente? O interpretador interativo do Python responde esta questão de maneira bem simples:

>>> cliente = Cliente.objects.get(id=1)
>>> continente = cliente.bairro.cidade.uf.pais.continente
>>> from django.db import connection
>>> queries = connection.queries
>>> for query in queries:
...    print query
...
{'time': '0.003', 'sql': u'SELECT "clientes_cliente"."id", "clientes_cliente"."nome", "clientes_cliente"."idade", "clientes_cliente"."bairro_id" FROM "clientes_cliente" WHERE "clientes_cliente"."id" = 1 '}
{'time': '0.000', 'sql': u'SELECT "clientes_bairro"."id", "clientes_bairro"."nome", "clientes_bairro"."cidade_id" FROM "clientes_bairro" WHERE "clientes_bairro"."id" = 1 '}
{'time': '0.000', 'sql': u'SELECT "clientes_cidade"."id", "clientes_cidade"."nome", "clientes_cidade"."uf_id" FROM "clientes_cidade" WHERE "clientes_cidade"."id" = 1 '}
{'time': '0.000', 'sql': u'SELECT "clientes_uf"."id", "clientes_uf"."sigla", "clientes_uf"."pais_id" FROM "clientes_uf" WHERE "clientes_uf"."id" = 1 '}
{'time': '0.000', 'sql': u'SELECT "clientes_pais"."id", "clientes_pais"."nome", "clientes_pais"."continente_id" FROM "clientes_pais" WHERE "clientes_pais"."id" = 1 '}
{'time': '0.000', 'sql': u'SELECT "clientes_continente"."id", "clientes_continente"."nome" FROM "clientes_continente" WHERE "clientes_continente"."id" = 1 '}
>>>

Aí está a resposta quanto ao comportamento do Django: duas linhas de código, seis consultas ao banco de dados. Se esta fosse uma informação muito importante em um sistema, é possível notar o quão doloroso seria manter tudo isso num banco de dados relacional. É necessária uma abordagem diferente, com apenas um join seis consultas virariam apenas uma e o programador poderia dormir sem medo do DBA.

A instrução select_related responde à esta necessidade: ao ver esta instrução, o Django sabe que ele tem que fazer os joins, e que ele deve “passear” por todos os relacionamentos obtendo os dados. Se o cliente for buscado no banco de dados utilizando select_related, o objeto estará completamente em memória, e não será necessário acessar o banco de dados novamente para obter informações de nenhum dos relacionamentos, o interpretador interativo prova isso:

>>> cliente = Cliente.objects.select_related().get(id=1)
>>> continente = cliente.bairro.cidade.uf.pais.continente
>>> from django.db import connection
>>> queries = connection.queries
>>> for query in queries:
...      print query
...
{'time': '0.010', 'sql': u'SELECT "clientes_cliente"."id", "clientes_cliente"."nome", "clientes_cliente"."idade", "clientes_cliente"."bairro_id", "clientes_bairro"."id", "clientes_bairro"."nome", "clientes_bairro"."cidade_id", "clientes_cidade"."id", "clientes_cidade"."nome", "clientes_cidade"."uf_id", "clientes_uf"."id", "clientes_uf"."sigla", "clientes_uf"."pais_id", "clientes_pais"."id", "clientes_pais"."nome", "clientes_pais"."continente_id", "clientes_continente"."id", "clientes_continente"."nome" FROM "clientes_cliente" INNER JOIN "clientes_bairro" ON ("clientes_cliente"."bairro_id" = "clientes_bairro"."id") INNER JOIN "clientes_cidade" ON ("clientes_bairro"."cidade_id" = "clientes_cidade"."id") INNER JOIN "clientes_uf" ON ("clientes_cidade"."uf_id" = "clientes_uf"."id") INNER JOIN "clientes_pais" ON ("clientes_uf"."pais_id" = "clientes_pais"."id") INNER JOIN "clientes_continente" ON ("clientes_pais"."continente_id" = "clientes_continente"."id") WHERE "clientes_cliente"."id" = 1 '}
>>>

Problema de consultas resolvido, DBA feliz = programador feliz = cliente feliz!

Sendo um desenvolvedor web, tenho a obrigação de ficar sabendo de tudo que sai de novo pela rede a fora, e hoje, acabei conhecendo mais uma biblioteca bacanetz que utiliza o framework jQuery e que promete nos ajudar em tarefas executadas quase que diariamente.

A jQuery Tools é uma biblioteca que possui alguns dos componentes javascript mais utilizados atualmente em websites e aplicações web, tais como: navegação em abas, tooltips, janelas modais e outros.

A biblioteca pode chegar a apenas 5.8KB se utilizadas formas de compressão de código eficientes e pode ser configurada, estilizada e extendida da forma que o programador desejar. Possui uma boa documentação e um fórum ativo para tirarmos quaisquer dúvidas, reportarmos problemas e etc.

A jQuery Tools é open source sobre as licenças MIT e GPL 2+.

Interessado em conhecê-la? Acesse o site da biblioteca e após seus testes deixe suas impressões comentadas abaixo.

Espero que seja útil

Logotipos: Apache, PHP e MySQL

Olá pessoal!

Continuando o post sobre desenvolvimento web com software livre, hoje fica a dica sobre a instalação do Apache, PHP e MySQL (servidor web, linguagem de programação web e banco de dados, respectivamente) no Ubuntu.

Estas três ferramentas são basicamente o ambiente de desenvolvimento mais utilizado para a Web, principalmente em se tratando de plataformas Unix. É claro que tutoriais sobre este assunto é o que não falta na internet, por isso segue uma lista de fontes que foram fundamentais para a criação do meu “workspace”:

• André Gondim, Viva o Linux – Linux: Ubuntu + Apache2 + MySQL + PHP5
• Alexandre Gomes Gaigalas, Acorda pra Web! – Tutorial de instalação do Apache, PHP e MySQL no Ubuntu
• Vinícius Figueiredo, vinicius. – Instalando LAMP (Apache, MySQL e PHP) no Ubuntu
• Apache Friends – XAMPP
• Joomla! Documentation – Setting up your workstation for Joomla! development
• Fórum Webly – Remover Apache – Mysql – PHP do Ubuntu
• Netbeans.org – Instalando e configurando PHP, Apache e MySQL para desenvolvimento de PHP no Ubuntu
• Gerry IIagan, Gerry – How to install Apache, MySQL, PHP on Ubuntu Linux Desktop

Fica a dica…

Até a próxima…

Olá pessoal!

Ontem me deparei com mais uma iniciativa da Google para o desenvolvimento rico para a internet, o Native Client. Este recurso nada mais é que um plugin que instala-se em seu navegador (Firefox 3) que permite rodar códigos nativos de máquina (x86) em uma aplicação web.

Não captou a mensagem?! Poderemos ser capazes de executar códigos na máquina do usuário para privilegiar o processamento de informações, diminuindo a troca de informações desnecessárias entre cliente e servidor e utilizando (de forma inteligente) o processador do internauta. Exemplo: jogue Quake no seu navegador.

Obviamente é experimental e a Google afirma que não é seguro, mas você já reparou como a Google vem colaborando para um desenvolvimento rico para a internet?!

SIMPLICIDADE / PADRÕES / LEGIBILIDADE

Quando eu acessei o buscador Google pela primeira vez, automaticamente associei sua falta de “firulas” com falta de eficiência. Claro, essa imagem foi rapidamente apagada da minha mente e hoje além do buscador do Google, só conheço o buscador do Yahoo.

Obviamente ele não foi o precursor, mas incentivou para uma internet mais limpa. Inclusive alguns clientes já chegaram para mim com a idéia: “quero um site objetivo como o do Google” e eu fico realmente feliz e aliviado com isso.

A Google não é conhecida por levar os padrões 100% à risca. Mas incentiva o uso através da indexação das páginas, favorecendo documentos semânticos, “forçando” os desenvolvedores a utilizarem corretamente os padrões e também a construir documentos “lógicamente legíveis” para favorecem seu “status” nos crawlers do buscador.

ASSÍNCRONO/SERVIÇOS

A primeira aplicação que faz um bom uso do AJAX que me vem à cabeça é o Gmail. Sinceramente, acho que AJAX é apropriado para aplicações web e não para websites. No começo disso tudo, eu era bem cético quando alguém vinha me falando que “usuário não está acostumado a não ver a página carregar” e afirmava que o sujeito que emitia um comentário desses era um completo ignorante. Ignorante era eu que não entendia a real situação da web em relação aos seus princípios.

No Google Code somos apresentados a uma série de API’s Ajax, um web toolkit de desenvolvimento AJAX em Java (que aparentemente não anda bem das pernas) e também há alguns serviços prestados. Ah sim! os serviços Google… todo o desenvolvedor é agradecido ao Google pelo Google Maps e sua API e ao próprio Google Code por hospedar projetos de Software Livre. Você sabia que a Google já lançou mais de um milhão de linhas de código?!

DESENVOLVIMENTO

Além das API’s que facilitam e muito a vida dos desenvolvedores, o Google investe bastante em desenvolvimento. Um exemplo é o Google App Engine, onde você é capaz de desenvolver aplicações para web de forma rápida e dentro da infra-estrutura da Google. Também temos o V8, o mecanismo de interpretação Javascript usado no Google Chrome.

Não podemos esquecer do Google Gears, onde você é capaz de executar aplicações web offline e ainda oferece maiores funcionalidades como Geolocation e API Desktop.

E por que não falar do Android?! A primeira plataforma aberta para mobile que está sendo desenvolvida por mais de 30 empresas de tecnologia. A Google oferece documentação completa e SDK para desenvolver para a plataforma.

Ufa! E olha… que isso é só a ponta do Iceberg, nem falei de lançamentos espaciais, compras polêmicas, crise financeira e teorias da conspiração!

E você?! Conhece mais algum recurso da Google que favoreça o desenvolvimento para web?

Logotipo Google Chrome

Com a expectativa de lançamento da versão 2.0 do Google Chrome, chega também a “esperança” do lançamento do navegador para os sistemas Mac e Linux.

Quando o Chrome apareceu, fiz questão de instalar uma máquina virtual e ver como era esse novo filho da poderosa Google. Me surpreendí como todo mundo, e me apeguei muito ao navegador. Isso pelo fato de usar o mesmo motor de outro navegador que gosto muito, o Safari. Também por focar na interpretação do Javascript, incentivando um desenvolvimento mais padronizado com a utilização do ECMAScript, em vez de variantes proprietárias.

Mas enquanto a Google não lança oficialmente o Chrome para Linux/Mac, o grupo Code Weavers portou (já faz um tempo) o navegador utilizando o Wine. Você pode conferir o resultado na página oficial do CrossOver Chromium, mas ainda prefiro utilizar uma máquina virtual rodando Windows ou esperar que enfim a Google nos presenteie com este fascinante navegador.

A fonte da notícia é o Br-Linux.org que também nos delicia com a notícia de que o Firefox tomou 21% da fatia. Demais navegadores (Safari e Chrome) cresceram, e o Opera (o melhor navegador que ninguém usa) continua abaixo do 1% de uso.

Esta é sem dúvida uma notícia muito agradável para os desenvolvedores web…

SVG com Inkscape

Estou desenvolvendo um projeto de iniciação científica onde o objetivo está em desenvolver uma aplicação de estatísticas empresariais, em RIA, livre, totalmente padronizada, e que atinja níveis de interação com os gráficos equivalentes a uma aplicação desenvolvida em Adobe Flash.

Pesquisando sobre as possibilidades não precisei garimpar muito, já que na página do próprio W3C Schools nos deparamos com o SVG.

SVG – Scalable Vector Graphics

O Scalable Vector Graphics é um padrão do W3C para gráficos vetoriais para a web baseado em XML. Vem sendo utilizado por editores vetoriais de renome, e inclusive o editor aberto Inkscape adota o SVG como formato nativo.

A maioria dos navegadores do mercado (há algumas excessões) são capazes de reproduzir SVG. E inclusive, há padrões específicos para renderizações em dispositivos móveis. E ainda, pode-se manusear sua estrutura através do DOM e tornar as imagens SVG animadas através de um pouco de Javascript.

Para entender melhor o SVG, você pode dar uma olhada no Mozilla Developer Center e ver alguns exemplos incríveis de SVG.

Pesquisando mais sobre o assunto, no Opera Developer Community me deparei com um outro recurso que até então nunca tinha ouvido falar, o elemento Canvas.

CANVAS

O elemento Canvas é uma das novidades presentes nas especificações da HTML 5.

Os bons navegadores já possuem suporte a algumas recomendações da HTML 5, inclusive este recurso foi primeiramente implementado pelo Safari. No Mozilla Developer Center somos apresentados a alguns tutoriais de Canvas e exemplos de interações com Javascript.

Admito que não sei muito sobre este, por isso decidí procurar alguém que fizesse um comparativo entre os dois (SVG e Canvas) para poder entender qual o “campo de ação” de ambos.

SCALABLE VECTOR GRAPHICS X CANVAS ELEMENT

Foi aí que encontrei este incrível conteúdo, criado por Vladimir Vuki?evi?, que faz uma comparação amistosa entre eles e apresenta suas principais vantagens.

CONSIDERAÇÕES FINAIS

Na minha opinião, vou continuar meu projeto focando o SVG. Isso devido ao fato de optar pelo desenvolvimento com xHTML e também de que SVG é um formato e não um recurso puramente da HTML.

Serei capaz de construir “templates” dos gráficos com o Inkscape e permitir que a aplicação o “alimente” através de serializações XML.

Emulador de MSX com Javascript e Canvas

Não desmerecendo o Canvas, que é sem dúvida mais simples, rico e prático de construir e interagir que o SVG. As imagens apresentadas no documento do Vladimir e nos portais de desenvolvimento do Mozilla e do Opera deixam qualquer um de “queixo caído”. Com certeza se o foco da aplicação fosse outro, optaria pelo Canvas.

Independente da minha ou da sua preferência, é bom saber que a Web está caminhando para um universo rico sem se desprender de seus padrões.

Até a próxima…

Como continuação do post sobre desenvolvimento web com software livre (onde mencionei que iria detalhar mais sobre as ferramentas utilizadas), irei falar hoje um pouco sobre a Mootools.

A Mootools é uma framework Javascript compacta, modular, orientada a objetos e open source (MIT) que vem ganhando muitos adeptos devido ao seu uso por nomes conhecidos na web, como o W3C, Joomla!, Ubuntu, Cnet, etc.

Particularmente gosto muito do jeito como se programa em Mootools. Ao contrário da JQuery (outra excepcional framework), a Mootools é mais “explícita”, mais abrangente e consequentemente mais complexa em relação a JQuery, mas isso se dá ao fato de que “JQuery é boa para designers” e “Mootools é boa para programadores“.

SELETORES/DOM/EVENTOS

O esquema de seleção de elementos da Mootools é bem interessante. Para selecionarmos um elemento pelo seu ID podemos utilizar simplesmente o $ (cifrão), já quando queremos construir um seletor mais complexo utilizamos $$ (dois cifrões).

Ex.:

$(‘botao-alerta’).addEvent(‘click’, function()
{
alert(‘Emitindo um alerta!’);
});

$$(‘input[type="button"]‘).addEvent(‘click’, function()
{
alert(‘Emitindo outro alerta!’);
});

O exemplo acima atribui duas chamadas ao evento “onclick” de um elemento do tipo “button”. A diferença é que a primeira atribui somente ao elemento com o ID “botao-alerta”, já a segunda atribui a qualquer “input” que seja do tipo “button”.

AJAX/JSON

Essas duas sopas de letrinhas caíram como uma bomba no mundo do desenvolvimento web. O primeiro (AJAX – Assynchronous Javascript and XML) é o responsável pelas requisições assíncronas (“invisíveis”) que presenciamos nas mais diversas aplicações ricas para a internet. O segundo complementa o Ajax (JSON – Javascript Object Notation) fazendo com que sejamos capazes de manusear os valores de resposta de um Ajax puramente por variáveis Javascript.

A Mootools possui um excelente suporte a esses caras. Seus métodos de trabalho com Ajax podem parecer complicados no início, mas são bem amigáveis e eficazes.

EFEITOS/ANIMAÇÕES

A grande magia para a maioria dos desenvolvedores Javascript está na facilidade com que a Mootools proporciona os recursos de animação de elementos.

Em seu core possuímos excelentes recursos para efeitos e animações que interagem diretamente na CSS de cada elemento. E ainda, há plugins de efeitos para download, como slider, drag and drop, sortables, accordion, etc.

Nesse quesito a Mootools é um prato cheio para os criativos.E ainda contamos com um projeto chamado MochaUI, uma biblioteca de interface totalmente baseada na Mootools, semelhante a EXTjs e JQuery UI.

Flash para quê?

CURVA DE APRENDIZAGEM

A primeira vista a Mootools pode parecer complexa. Em relação a outras frameworks, que você executa uma chamada e os elementos do seu HTML saem saltitando pela tela, a Mootools requer um pouco mais de tempo e linhas de implementação.

Isso pode chatear muitos desenvolvedores, principalmente os que já conhecem a JQuery e sabem que ela é extremamente fácil porém poderosa. Embora possa agradar muitos outros, que como eu, não gostam desse sentimento de “magia negra” que fica no ar quando as coisas são implícitas demais.

CONSIDERAÇÕES FINAIS

Bom, espero ter atiçado a curiosidade de muitos em relação a esta excelente framework, e inclusive ter incentivado que pesquisem sobre outras tantas que existem por aí (JQuery, Dojo, Mochikit, Prototype, etc.), pois elas incentivam um desenvolvimento livre, leve, rico e padronizado.

Até a próxima…

Bom, fim de final de semana, daqui a pouco começa o primeiro dia de cão da semana, a Segunda-feira.

Como ultimamente venho trabalhando muito com jQuery, ja criei vários plugins (conheça as melhorias feitas na jQuery UI Dialog) que me ajudam bastante na hora de desenvolver, porém, nunca tive tempo hábil para postar os mesmos para amigos, alunos e até mesmo para a comunidade web. Hoje com um pouco mais de tempo (tempo???) estarei postando mais um dos “plugins”.

Quando quebrei a cabeça, no início do ano, não havia nada em jQuery que fosse realmente simples. Hoje ja pode existir, mas não fui atrás para saber (se alguém souber de algo, avisem ).

Depois de algumas horas e alguns cafés, saiu o que eu queria. Criei menus encadeados com ul e li e, após aplicação de algumas linhas de javascript, lá estava meu menu com vários níveis de submenus.

Vejam o resultado em: http://www.profissionaisti.com.br/jquery/menu
Baixe os arquivos aqui/Download files here.

Se puderem contribuir com melhorias, mandem seus comentários. Alterem cores, bordas, margens e etc como ficar melhor em seus projetos.

Testado em: IE6, IE7, FF2.x, FF3, GChrome

Grande abraço!