Instalando o Plone 2.5 no Windows XP
Document Actions
Edição de Páginas Web "on-the-fly" usando Ajax no Zope
Instalando as Libs de Javascript
Para fazer a página que irá conter o mecanismo de edição online, é
necessário que você instale o Prototype [http://prototype.conio.net/] e
o Scriptaculous [http://script.aculo.us/]. Ambos estão disponíveis nos
arquivos desse artigo.
Inclua os arquivos dentro do diretório como tipo file:
Criando a página de edição
Vamos criar um page template chamado inplace, que irá conter o seguinte conteúdo:
<html>
<head>
<title tal:content="template/title">The title</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<h1>In-Place-Editor</h1>
Como alterar o dado de um form, sem estar em um form ;)
<p>Esta é uma alteração simples</p>
<p id="editme" tal:content="template/editme">Me altere!! :-)</p>
<script type="text/javascript">
new Ajax.InPlaceEditor('editme',
'salvar',
{callback: function(form, value)
{ return 'objeto=editme&valor=' + escape(value) }});
</script>
<p>Esta é uma looooonga alteração</p>
<p id="editme2" tal:content="template/editme2">Me faça uma loooooooonga alteração</p>
<script type="text/javascript">
new Ajax.InPlaceEditor('editme2',
'salvar',
{rows:15,
cols:40,
cancelText:'Cancelar',
okText:'Salvar',
callback: function(form, value)
{ return 'objeto=editme2&valor=' + escape(value) }});
</script>
</body>
</html>
E inclua duas novas propriedades no page template:
Coloque
como valor em editme, a frase: Ajax no Zope! (apenas ilustrativo, você
pode colocar o que quiser), e em editme2 a frase: Grande Ajax no Zope!
:-)
Criando o arquivo que irá salvar os dados
Para salvar os dados editados, crie um python script chamado salvar:
Testando
Volte a página inplace, e clique em testar:
Você
pode notar que ao passar o mouse em cima de Ajax no Zope! e em Grande
Ajax no Zope! a linha fica amarela, e o cursor muda. Ao você clicar
nele, é aberto uma caixa de edição:
Dessa forma, podemos editar o campo "on-the-fly". Esse é o primeiro código. Vamos entender ele melhor:
<p id="editme" tal:content="template/editme">Me altere!! :-)</p>
<script type="text/javascript">
new Ajax.InPlaceEditor('editme',
'salvar',
{callback: function(form, value)
{ return 'objeto=editme&valor=' + escape(value) }});
</script>
Quando iniciamos o construtor Ajax.InPlaceEditor, temos alguns parâmetros:
- editme: é o nome do elemento que será editado.
- salvar: é nome da página que será chamada para interpretar a alteração do texto.
callback: function(form, value) { return 'objeto=editme&valor=' + escape(value) } - é uma opção que permite você passar outros argumentos, como no caso o objeto=editme para o script salvar conseguir identificar quem ele deve mudar.
E no caso do segundo texto que pode editar, temos opções adicionais:
rows:15 - indica que usaremos um textarea para editar o texto, e a propriedade rows indica a quantidade de linhas a ser usada.
cols:40 - indica a quantidade de colunas do textarea.
cancelText:'Cancelar' - permite mudar o nome do texto que é exibido, substituindo o padrão cancel.
okText:'Salvar' - permite substituir o nome do texto que é exibido ao salvar as alterações, o padrão ok.
E do lado do servidor Zope, o script salvar:
- inplace = getattr(context,'inplace') - Permite acessar o template inplace, para fins de alterarmos suas propriedades.
- if objeto == 'editme':
- if objeto == 'editme2':
- return valor - Para o Ajax.InPlaceEditor, devemos responder o script sempre com o valor que nós foi passado e gravado, pois esse valor retornado será visualido no campo que nós alteramos.
Conclusão
Esta cada vez mais provado o efeito que o Ajax causa
nas aplicações e o quanto ele melhora a usabilidade delas. E a
dobradinha Zope/Ajax muito tranquila de ser feita!
Os arquivos desse tutorial estão no anexo abaixo! :-)
Abraços,
Fabio Rizzo
fabiorizzo@gmail.com
www.fabiorizzo.com