Se avete già avuto a che fare con un wiki, saprete sicuramente che il punto forte di un sistema del genere sta nel fatto che chiunque può collaborare all'approfondimento di un dato argomento modificando o aggiungendo contenuti alla pagina web.
Script.aculo.us ci mette a disposizione un oggetto, Ajax.InPlaceEditor, che rende molto facile definire come modificabile il testo contenuto in una pagina web; questo oggetto gestisce le modifiche tramite delle richieste Ajax.
La pagina web che prenderemo in esame in questo articolo visualizzerà un semplice testo generato dal servizio web Lorem Ipsum e permetterà agli utenti di modificare il testo visualizzato. Ecco l'esempio (le modifiche non sono visibili sulla pagina in quanto non è implementata la parte server-side). Tutti il codice usato è contenuto in questo file zip.
Vediamo in breve i passaggi chiave che andremo poi ad approfondire nel codice:
- Quando l'utente sposterà il cursore all'interno del paragrafo, esso verrà evidenziato in giallo. Se l'utente a quel punto cliccherà su di esso, verrà trasformato in una textarea.
- Quando l'utente cliccherà sul bottone “Ok”, una richiesta Ajax invierà il contenuto della textarea al server. Altrimenti, se l'utente cliccherà sul bottone “Cancel” la textarea sparirà e non verrà inviata alcuna richiesta lato server.
- Il server, al ricevimento del nuovo testo tramite l'oggetto Ajax.InPlaceEditor, deciderà se visualizzarlo o meno applicando i dovuti filtri (parole offensive etc...).
- Se tutto andrà a buon fine la modifica sarà subito visibile in pagina.
Consideriamo ora il codice HTML della pagina web sotto riportato e l'associato Javascript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Abilitazione alla modifica da parte degli utenti del testo di una pagina web</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/stile.css" media='screen'>
</head>
<body>
<div id='contenitore'>
<h3 class="titolo">Testo Editabile</h3>
<p class="testo" id='editText'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam rutrum eros non neque. In a magna et velit auctor pellentesque.
Nam est libero, consectetuer quis, condimentum ut, pellentesque sed, lectus.
......</p>
</div>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){
new Ajax.InPlaceEditor('editText', 'nonEsiste.php',{rows:15,
cols:50, cancelControl:'button', okText:'Salva',
cancelText:'Annulla', savingText:'Salvataggio in corso...',
clickToEditText:'Clicca per modificare', formId:'value'
});
}
</script>
</body>
</html>
Il testo che vogliamo rendere modificabile verrà inserito in un tag <p> con un dato attributo id="editText".
Ecco l'oggetto della libreria Script.aculo.us che si occuperà di gestire la modifica.
window.onload=function(){
new Ajax.InPlaceEditor('idElemento', 'paginaLatoServer',{rows:15,
cols:50, cancelControl:'button', okText:'Salva',
cancelText:'Annulla', savingText:'Salvataggio in corso...',
clickToEditText:'Clicca per modificare', formId:'value'
});
Il codice sopra riportato specifica nell'ordine, l'id dell'elemento abilitato alle modifiche (editText), l'URL relativo al componente server a cui viene inviata la richiesta HTTP e alcuni parametri che modificheranno il comportamento del componente Javascript:
- Rows
- Cols
- CancelControl
- OkText
- CancelText
- SavingText
- ClickToEditText
- FormId
Esistono molti altri parametri oltre a questi sopra citati, per saperne di più consultate la documentazione delle API.
