Rico, Qooxdoo e Dojo

Progettato per la creazione di rich Internet applications.

Features

• Effetti di animazione: fornisce animazioni reattive per effetti fluidi e transizioni che possono comunicare cambiamenti alla pagina in maniera più ricca che nelle applicazioni web tradizionali. A dispetto della maggioranza degli effetti, le animazioni di Rico possono essere interrotte, messe in pausa, riavviate, o essere sostituite da altri effetti allo scopo di migliorare l’interazione con l’utente finale.
• Styling: Rico fornisce sia effetti cinematici, che semplici stili visuali, tutti racchiusi in una interfaccia molto semplice.
• Trascinamento: Le applicazioni Desktop hanno a lungo utilizzato il trascinamento (Drag and Drop) nelle loro interfacce per semplificare l’interazione con l’utente. Rico fornisce una delle più semplici interfacce per abilitare la vostra applicazione web al supporto del Drag and Drop. Basta classificare qualunque elemento HTML od oggetto JavaScript come “draggabile” o come “droppabile” (ovvero area in cui l’oggetto trascinato puo’ essere lasciato) e Rico pensa da solo al resto.
• Supporto AJAX: Rico fornisce un’interfaccia molto semplice per la registrazione di gestori o “handler” di richieste AJAX. Questa interfaccia innovativa permette di aggiornare più elementi HTML od oggetti JavaScript come risultato di una singola richiesta AJAX.

Download e info qui

qooxdoo è uno dei più completi e innovativi framework AJAX Open Source e multipurpose, sotto una doppia licenza LGPL/EPL. Include supporto allo sviluppo professionale JavaScript, una intefaccia grafica moderna e un alto livello di comunicazione client-server.

Caratteristiche

• Individuazione del Client: qooxdoo capisce quale browser è in uso e rende disponibile tale informazione.
• Astrazione del browser: qooxdoo include un cosidetto “browser abstraction layer” che tenta di astrarre le specifihe particolari di ogni browser verso uno standard comune. Ciò semplifica lo sviluppo di codice, lassciando libero il programmatore di concentrarsi ciò che si vuole e non su “come fare per”. La caratteristica di astrazione del browser viene resa disponibile con un set di funzioni base spesso necessarie per la creazione di interfacce grafiche. Ad esempio, stili e posizioni runtime (in multiple relazioni: pagina, browser e schermo) di ciascun elemento nel vostro documento.
• Implementazione di proprietà avanzate: qooxdoo supporta proprietà “reali” per oggetti. Ciò significa che ogni classe puo’ definire delle proprietà che l’istanza creata dovrebbe avere. L’handler addProperty inoltre aggiunge le funzioni di get e di set. L’unica cosa che resta da aggiungere è una funzione di modifica.
• Gestione degli eventi: qooxdoo rende disponibile una propria intefaccia degli eventi. Questa include funzioni di registrazione e cancellazione degli eventi.Oltre a ciò esiste la possibilità di chiamare le funzioni nel contesto di qualunque oggetto (Quello predefinito è l’oggetto che definisce il listener degli eventi). Il sistema degli eventi normalizza le differenze tra i browser, include il supporto della rotellina del mouse, doppio-click ed altre cose. qooxdoo inoltre incorpora la funzionalità di cattura avanzata che permette di catturare tutti gli eventi quando ad esempio un utente trascina qualche oggetto per lo schermo.

Download e info qui

Dojo permette di costruire componenti dinamiche nelle pagine web e qualunque altro ambiente che supporti JavaScript. Potete utilizzare i componenti forniti da Dojo per rendere i vostri siti web più usabili, reattivi e funzionali. Con Dojo è possibile costruire interfacce utenti più facilmente, widget interattive più velocemente, e transizioni animate. Potete usare API a basso livello e strumenti di compatibilità da Dojo per sviluppare codice JavaScript portabile e allo stesso tempo semplificare script complessi. Il sistema di eventi di Dojo, API I/O, e la caratteristica di miglioramento del linguaggio formano la base di questo potente ambiente di programmazione. Potete usare gli strimenti di sviluppo di Dojo per scrivere delle unità di test in versione command-line per provare i vostri script. Il processo di sviluppo di Dojo vi aiuta ad ottimizzare il vostro codice JavaScript per lo sviluppo offrendo la possibilità di raggruppare set di file e riutilizzarli attraverso una struttura a “profili”.

Caratteristiche

• Punti di ingresso multipli: Un concetto fondamentale nella progettazione di Dojo è quello dei “Punti di ingresso multipli”. Questa terminologia sta a significare che Dojo lavora sodo per garantire agli utenti la possibilità di cominciare ad utilizzare Dojo dal livello che risulta loro più congeniale.
• Indipendenza dall’interprete: Dojo tenta di assicurare che sia disponibile il supporto del core del sistema al maggior numero di piattaforme JavaScript possibile. Ciò permetterà a Dojo di diventare la “libreria standard” per i programmatori JavaScript, costantemente in movimento tra ambienti client-side, server-side e desktop.
• Unifica di diverse codebases: come ad esempio Burstlib.

Download info qui

1. Rivelazione Errori Campo Vuoto
2. Messaggio dell’avvenuto invio
3. Colorazione Campi Input Vuoti

Ricapitolando il tutorial precedente: 1) Creazione di Campi di testo “input” 2) Aggiunta dell’action script 3) Aggiunta del pulsante 4) Creazione dello script Php , con questo quarto punto viene conclusa come abbiamo detto la prima parte. Ora iniziamo a lavorare sulla seconda…

Innanzitutto Realizziamo un Form con 7 campi di input quali : Nome, Cognome, Email, Societa, Fax, Telefono ed Note. Vogliamo che tutti debbano contenere per lo meno 2 lettere, e che il campo email debba contenere la @ e qualche lettera. Dopo aver realizzato tutto nello stesso modo del tutorial precedente, proseguiamo in questo modo:

Livello : Esperto

1) Creare 7 livelli Vuoti.

2) Nel Primo Livello Aggiungere un Clip Filmato con scritto Invio Avvenuto con Successo e dare come nome istanza “invio”.

3) Inserire il seguente Script su di un livello vuoto:
pulsante.onRelease = function ()
{
trace ('prosegue')
var _loc2 = new LoadVars();
_loc2.Nome = casellaNome.text;
_loc2.Cognome = casellaCognome.text;
_loc2.Societa = casellaSocieta.text;
_loc2.Email = casellaEmail.text;
_loc2.Telefono = casellaTelefono.text;
_loc2.Fax = casellaFax.text;
_loc2.Note = casellaNote.text;
_loc2.destinatario = "TUAEMAIL@MAIL.IT"; // INSERIRE LA PROPRIA E-MAIL
_loc2.onLoad = function (success)
{
}
if (casellaNome.length<2) {
testoErrore = "Campo Errato ";
scriviErrore(testoErrore);
name_txt.textColor = 0xFF0000;
corretto = false
}else{
name_txt.textColor = 0xFFFFFF;
}if (casellaEmail.text.indexOf("@")<2) {
testoErrore = "Email Errata ";
scriviErrore(testoErrore);
email_txt.textColor = 0xFF0000;
corretto = false
}else{
email_txt.textColor = 0xFFFFFF;
}
if (casellaTelefono.length<4) {
testoErrore = " Campo Errato";
scriviErrore(testoErrore);
telefono_txt.textColor = 0xFF0000;
corretto = false
}else{
telefono_txt.textColor = 0xFFFFFF;
}
if (casellaCognome.length<2) {
testoErrore = " Campo Errato";
scriviErrore(testoErrore);
cognome_txt.textColor = 0xFF0000;
corretto = false
}else{
cognome_txt.textColor = 0xFFFFFF;;
}
if (casellaSocieta.length<4) {
testoErrore = " Campo Errato";
scriviErrore(testoErrore);
societa_txt.textColor = 0xFF0000;
corretto = false
}else{
societa_txt.textColor = 0xFFFFFF;
}
if (casellaNote.length<2) {
note_txt.textColor = 0xFF0000;
corretto = false
}else{
note_txt.textColor = 0xFFFFFF;
}
if (corretto)
_loc2.sendAndLoad("Email.php", _loc2, "POST"); // Devi modificare il percorso in modo corretto
//ad esempio puoi inserire anche http://www.tuoindirizzo.it/cartella/Email.php
{
if (success)
{
casellaNome.text = "";
casellaCognome.text = "";
casellaSocieta.text = "";
casellaEmail.text = "";
casellaTelefono.text = "";
casellaFax.text = "";
casellaNote.text = "";
mcMsg.mcTxt.txtMsg.text = this.controllo;
mcMsg.play();
}
}
}

Contiene alcuni punti essenziali per fare in modo che lo script riconosca se ci sono o meno campi vuoti, e lo si fa con la funzione length , e se viene lasciato vuoto , il campo diventa rosso ed esce un messaggio di errore con la funzione textColor e grazie alle funzioni IF ed ELSE.

4) Dopodichè su di un altro livello inserire come:
as _root.invio._visible = false ;
Questo serve per rendere la finestra di “ Invio Messaggio Avvenuto “ invisibile e di farla uscire solo se richiamata dallo script una volta inviato il messaggio .

5) Aggiungere al pulsante “ pulsInvio “ ( leggere il tutorial precedente ) ,il seguente codice :

on (press) {
_root.errore._visible=false;
_root.errore.text="";
var corretto:Boolean = true; if (casellaNome.length<2) {
testoErrore = "";
scriviErrore(testoErrore);
name_txt.textColor = 0xFF0000;
corretto = false
}else{
name_txt.textColor = 0xFFFFFF;
}
if (casellaEmail.text.indexOf("@")<2) {
testoErrore = "";
scriviErrore(testoErrore);
email_txt.textColor = 0xFF0000;
corretto = false
}else{
email_txt.textColor = 0xFFFFFF;
}
if (casellaTelefono.length<4) {
testoErrore = "";
scriviErrore(testoErrore);
telefono_txt.textColor = 0xFF0000;
corretto = false
}else{
telefono_txt.textColor = 0xFFFFFF;
}
if (casellaCognome.length<2) {
testoErrore = "";
scriviErrore(testoErrore);
cognome_txt.textColor = 0xFF0000;
corretto = false
}else{
cognome_txt.textColor = 0xFFFFFF;;
}
if (casellaSocieta.length<4) {
testoErrore = "";
scriviErrore(testoErrore);
societa_txt.textColor = 0xFF0000;
corretto = false
}else{
societa_txt.textColor = 0xFFFFFF;
}
if (casellaNote.length<2) {
note_txt.textColor = 0xFF0000;
corretto = false
}else{
note_txt.textColor = 0xFFFFFF;
}
if (corretto) {
_root.invio._visible= true ;
trace("invio corretto");
} else {
_root.errore._visible = true;
}
function scriviErrore(stringaErrore:String) {
_root.errore.text += stringaErrore+" ";
}
}

Qui non abbiamo fatto altro che ripetere lo script per la correzione dei campi, e aggiunta la function per far appariare la casella del “Invio Messaggio Inviato” .

6) Realizzare uno script con notepad e rinominarlo Email.php inserire al suo interno il seguente codice php:

<?php
$casellaNome = stripslashes($_POST['Nome']);
$casellaCognome = stripslashes($_POST['Cognome']);
$casellaSocieta = stripslashes($_POST['Societa']);
$casellaEmail = stripslashes($_POST['Email']);
$casellaTelefono = stripslashes($_POST['Telefono']);
$casellaFax = stripslashes($_POST['Fax']);
$casellaNote = stripslashes($_POST['Note']);
$sms = '
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Contatti</title>
<style type="text/css">
td{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#666666;
}
</style>
</head>
<body style="margin:0px;">
<table cellpadding="0" cellspacing="0" style="height:100%;width:500px;">
<tr>
<td style="height:100%;padding:20px;vertical-align:top;">
<table>
<tr><td colspan="2">
<br /><br /></td></tr>
<tr><td width="80"><b>» Nome:</b></td>
<td width="259">'.$casellaNome.'</td></tr>
<tr><td width="80"><b>» Cognome:</b></td>
<td width="259">'.$casellaCognome.'</td></tr>
<tr><td><b>» Società</b></td>
<td>'.$casellaSocieta.'</td></tr>
<tr><td><b>» E-mail</b></td>
<td>'.$casellaEmail.'</td></tr>
<tr><td><b>» Telefono</b></td>
<td>'.$casellaTelefono.'</td></tr>
<tr><td><b>» Fax </b></td>
<td>'.$casellaFax.'</td></tr>
<tr><td><b>» Note</b></td>
<td>'.$casellaNote.'</td></tr>
<tr><td colspan="2"> </td></tr>
</table></td></tr></table></body></html>';$headers = "From: $casellaNome $casellaCognome <$casellaEmail>n";
$headers .= "Content-Type: text/html; charset=iso-8859-1n";
$oggetto = " Richiesta Informazioni n";
if(mail($_POST['destinatario'], $oggetto, $sms, $headers)){
echo '&controllo=invio avvenuto con successo.';
}
else{
echo '&controllo=errore: e-mail non inviata.';
}
?>

Modificati alcuni punti in questo script quale “Oggetto” modificato con Richiesta Informazioni.

Con questi ultimi Punti abbiamo completato Il Form Email con Flash e Php, spero che risulti a tutti il più semplice possibile se cosi non fosse, non esistate a domandare e commentare. Buona Programmazione!

Download file esempio
Potete confrontate il vostro risultato con questo file esempio:

• flash-php_2.zip

- – - – - – - – - – - – - – - – - – - – - – -

Per iniziare realizziamo un Form in Flash con i seguenti campi di input:

Dopodichè ad ogni campo testuale diamo un nome “ Variabile “ che sarà uguale a quelli citati sull’immagine cioè : “ Nome , Cognome ecc.. “ .
Nel primo frame inseriamo questo ActionScript :

System.useCodepage = true;
stop();


Ora ci serve creare una tabella all’interno del Database . La tabella avrà il seguente nome “ utenti “. Per gli sviluppatori che utilizzano MySql sarà di facile comprensione , mentre per coloro che sono alle prime armi , scrivo qui di seguito la query da inviare affinché la tabella venga sviluppata correttamente :

CREATE TABLE 'utenti' (
'nome' varchar(50) NOT NULL,
'cognome' varchar(50) NOT NULL,
'indirizzo' varchar(50) NOT NULL,
'cap' varchar(5) NOT NULL,
'citta' varchar(50) NOT NULL,
'telefono' varchar(10) NOT NULL,
'email' varchar(50) NOT NULL,
'data' datetime NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

La tabella dovrà avere gli stessi parametri come da immagine :

Ok ora create la nostra tabella scrivo il codice ActionScript da Applicare al pulsante Invio:

// codice che associamo al pulsante
on (release){
// creiamo i due oggetti loadVars
carica = new LoadVars();
ricevi = new LoadVars();
// inseriamo le variabili nell'oggetto
carica.nome = _level0.nome;
carica.cognome = _level0.cognome;
carica.indirizzo = _level0.indirizzo;
carica.cap = _level0.cap;
carica.citta = _level0.citta;
carica.telefono = _level0.telefono;
carica.email = _level0.email;
// funzione onload: si attiva al
// completmanento del caricamento dello script
ricevi.onLoad = function (ok){
// elimina onLoad
delete this.onLoad;
// controlla che il caricamento abbia avuto
// successo
if(ok)
{
// controlla che l'inserimento abbia avuto
// successo
if(ricevi.error == "1"){_root.output.text = "Errore inserimento dati";}
else{_root.play();}
}
// l'inserimento non ha avuto successo,
// viene segnalato l'errore
else
{
_root.output.text = "Errore inserimento dati";
}
};
// carichiamo lo script PHP
carica.sendAndLoad("script.php", ricevi, "POST");
}

Molto semplice ed Intuitivo a quanto potete vedere . Dopodichè Creiamo con il nostro NotePad lo script in php che chiameremo “ script.php “ .

// Dati per la connessione al DB
$db_host = "localhost o host del vostro database";
$db_user = "username database";
$db_password = "password database";
$db_name = "vostro database";
// Connessione al DB
$db = mysql_connect($db_host, $db_user, $db_password);
$db_forum = mysql_select_db($db_name, $db);
// Query di inserimento
$query = "INSERT INTO `utenti` (nome, cognome, indirizzo, cap, citta, telefono, email, data)
VALUES ('".$_POST['nome']."', '".$_POST['cognome']."', '".$_POST['indirizzo']."', '".$_POST['cap']."', '".$_POST['citta']."', '".$_POST['telefono']."', '".$_POST['email']."', '".date('Y-m-d H:i:s')."')";
// Esecuzione query
$query_results = mysql_query($query) or die("&error=1");
echo "&stop=1";
?>


Ovviamente vi ricordo che i file devono essere tutti all’interno della stessa cartella , nella speranza che questo Tutorial vi sia stato di aiuto vi invito a restare sempre aggiornati su DesMM.com.
Buona Programmazione

ATTENZIONE: Vi invito a provare il tutorial tenendo conto che in alcuni casi, spesso causati da requisiti di sistema, il form mail non può funzionare. Nel caso, provate anche a controllare soluzioni presenti tra i commenti.

1) Aprire un documento vuoto ed iniziare a creare 4 campi di testo “input”. Dare a ciascun campo un nome “istanza” che servirà allo script di riconoscere all’interno del filmato l’ordine dei campi.
Primo campo dare come nome istanza Nome ,secondo campo Cognome, terzo campo Email, quarto campo Richiesta. Ora creiamo un pulsante per l’invio dell ‘email e diamo come nome istanza pulsInvio.

2) Dopodiché inseriamo in un fotogramma vuoto il seguente ActionScript, facendo attenzione a sostituire il vostro url dello script con i vostri dati, dove vedete che il codice è scritto in grassetto :

stop();
pulsInvio.onRelease = function(){
var sendMail:LoadVars = new LoadVars();
sendMail.nome = Nome.text;
sendMail.cognome = Cognome.text;
sendMail.mittente = Email.text;
sendMail.richiesta = Richiesta.text;
sendMail.destinatario = 'Email destinazione messaggi';
sendMail.onLoad = function(success){
if(success){
Nome.text = '';
Cognome.text = '';
Email.text = '';
Richiesta.text = '';
mcMsg.mcTxt.txtMsg.text = this.controllo;
mcMsg.play();
}
}
sendMail.sendAndLoad('Url script php che genera l'email', sendMail, 'POST');
}

Come potete vedere il seguente ActionScript è molto semplice da capire , ora spiegherò in linea generale il suo funzionamento : Inseriamo innanzitutto l’azione ‘stop’ per fermare la ‘time line’, poi scriviamo il nome dell’ istanza del pulsante Invio poiché l’ActionScript gira attorno a quest’ultimo , accanto a pulsInvio come si nota c’è l’azione onRelease che serve per comunicare al pulsante che al rilascio del mouse su di esso deve partire tutta l’azione.
Dopo di chè creiamo una nuova variabile che chiamiamo SendMail cosi che appena la richiamiamo con l’azione sendAndLoad questa raggruppi tutti i nomi dei campi input e l’invii allo script che provvederà poi ad inviare l’email alla nostra posta.
Ora dove c’è l’azione sendMail.destinatario inseriamo la nostra email , mentre nell’ultima azione scriveremo l’url di dove è situato lo script all’interno del nostro sito preferibilmente nella stessa cartella dove è situato il filmato flash.

3) Ora provvediamo a creare un degno script che PRIMO funzioni e SECONDO sia di facile intuizione. Aprire il comune Notepad di Windows e scrivere il seguente codice dopodiché salvarlo con il nome email.php . Anche questo è abbastanza semplice da capire basta che abbiate una minima base di php che vi risulterà di facile lettura e comprensione:

<?php
$nome = stripslashes($_POST['nome']);
$cognome = stripslashes($_POST['cognome']);
$mittente = stripslashes($_POST['mittente']);
$richiesta = stripslashes($_POST['richiesta']);
$sms = '
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Contatti</title>
</head>
<body style="margin:0px;">
<table cellpadding="0" cellspacing="0" style="height:100%;width:500px;">
<tr>
<td style="height:100%;padding:20px;vertical-align:top;">
<table>
<tr><td colspan="2">
<img src="Url della tua immagine personalizzata" alt="" />
</td>
</tr>
<tr><td width="110"><b>Nome:</b></td>
<td width="300">'.$nome.'</td></tr>
<tr>
<td><b>Cognome:</b></td>
<td>'.$cognome.'</td></tr>
<tr>
<td><b>E-mail:</b></td>
<td>'.$mittente.'</td></tr>
<tr>
<td><b>Richiesta:</b></td>
<td>'.$richiesta.'</td></tr>
</table></td></tr>
</table>
</body>
</html>';
$headers = "From: $nome $cognome <$mittente>n";
$headers .= "Content-Type: text/html; charset=iso-8859-1n";
if(mail($_POST['destinatario'], $oggetto, $sms, $headers)){
echo '&controllo=invio avvenuto con successo.';
}
else{
echo '&controllo=errore: e-mail non inviata.';
}
?>

4) Ora basta mettere online sia il file Swf che lo script et voilà il gioco è fatto. Se avete avuto problemi non esitate a commentare se eventualmente uno dei passaggi non vi è stato chiaro.

5) Il quinto passaggio non esiste quindi testatelo e sperate in bene.

Precisazioni del 06.07.2006
Viste le difficoltà accadute in diversi casi, l’articolo è stato riveduto e corretto, e anche semplificato nel codice.
In più per facilitarvi al massimo la vita, sono stati creati dei file esempio che potete scaricare direttamente da qui:

• flash-php.zip

Il file da scaricare è compatibile FlashMX 2004.
Bisogna anche segnalare che in rari casi, si è potuto verificare che alcuni server non hanno permesso il “colloquio” tra Flash ed il PHP, non facendo funzionare il Form.