|
Necesita instalarea unui program auxiliar.
Cand ne vom construi situl vom dori sa permitem utilizatorilor sa ne lase
diverse mesaje. De asemenea aceasta mini-aplicatie poate fi privita si ca un
jurnal online (blog).
Unde va fi situata cartea de oaspeti ?
Un raspuns evident pentru aceasta intrebare este ca pe un server web.Serverul web este o aplicatie ce ruleaza pe un calculator care are rolul de a raspunde cererilor diverselor persoane care vor sa viziteze o anumita pagina. Astfel, in momentul in care dumneavoastra tastati in browserul pe care il folositi o anumita adresa (de exemplu http://www.actionscript.org)
nu faceti decat sa cereti unei astfel de aplicatii anumite informatii (in acest
caz prima pagina a sitului actionscript.org). Browserul dumneavoastra se
numeste client pentru ca se comporta ca unul - el cere niste informatii, iar o
anumita aplicatie care ii furnizeaza aceste informatii se numeste server.
Serverul poate rula sub diverse sisteme de operare. Deoarece Flash-ul este
distribuit doar pentru Windows si MacOS (pentru Linux exista doar
player) si deoarece majoritatea persoanelor care citesc aceasta carte (din
Romania) au instalat Windows, vom folosi un server care sa ruleze sub
acest sistem de operare. Un astfel de server web este Apache si versiunea
de windows se numeste Apache2Triad. Situl de unde puteti descarca (gratuit) acest server este: http://sourceforge.net/projects/apache2triad/.
Dupa instalarea serverului (lucru pe care nu-l explic aici deoarece consta
in apasarea repetata a unor butoane de tip "next") veti gasi in radacina
partitiei C de pe calculatorul dumneavoastra un director "apache2triad"
sau asemanator (asta in cazul in care nu ati schimbat calea in timpul
instalarii; daca acest director nu este vizibil va trebui sa permiteti
vizualizarea fisierelor ascunse). In Directorul "c:apache2triad" cautati
directorul htdocs: aici vor fi pastrate toate documentele care vor fi servite
de catre server clientului si in acest director creati un director propriu de
exemplu "guestbook".
Deschideti browserul pe care il utilizati si tastati ca adresa urmatorul sir
de caractere:http://localhost/guestbook/, aceasta fiind calea catre
directorul creat. De fapt browserul va face o cerere serverului (care se afla
tot pe calculatorul dumneavoastra - de aici "localhost" care ii va furniza o
pagina web ce momentan nu contine nimic si furnizeaza informatii despre
directorul guestbook.
Documentele ce pot fi trimise catre dumneavoastra de catre server sunt
de cele mai variate: imagini, filme, MP3-uri, documente word, pdf.
Browserul, totusi, pentru a intelege si a formata corect informatiile pe care
vreti sa le puneti in pagina de web are nevoie de un format anume de
document si anume (x)html. Toate documentele enumerate mai sus inclusiv cele html) sunt de obicei documente statice - adica nu sunt
generate de fiecare data. Intr-un guest-book avem nevoie ca pagina
furnizate de server sa se modifice de fiecare data cand cineva introduce un
mesaj. Din acest motiv pe langa apache (serverul web) apache2triad a mai
instalat un interpretor de scripturi si anume PHP6-ul.
Vom crea un fisier de test "index.php" care va contine urmatorul script:
Fisierul va fi copiat in directorul guestbook dupa care incercati sa
accesati din nou adresa. Daca ati putut vizualiza mesajul atunci totul a
decurs corect - puteti sterge fisierul "index.php".
Daca vizitatorii vor dori sa semneze in cartea dumneavoastra de oaspeti
atunci va trebui ca mesajele ce sunt trimise de catre ei sa fie "memorate"
undeva. Flash-ul nu poate scrie pe masina clientului fisiere (de fapt nu are
voie sa modifice nici un fel de parametru de pe masina client care ar putea
periclita buna-functionare a acesteia) si chiar daca ar gasi o metoda de a
memora aceste informatii pe calculatorul local, nimeni nu va putea accesa
aceasta informatie. Din acest motiv informatiile trimise de un vizitator
trebuie sa fie pastrate pe calculatorul pe care ruleaza serverul si de fiecare
data cand cineva intra, serverul trebuie sa stie sa construiasca o pagina care
sa contina toate mesajele.
Flash-ul stie sa preia de pe server informatii in diverse formate: txt, xml,
jpg, swf, flv etc. Se pot folosi foarte bine fisiere in format txt dar pentru a
structura datele transmise intre client si server ne vom folosi de un fisier in
format XML. Pentru acest exemplu informatiile din XML vor contine
numele persoanei ce a introdus mesajul, mesajul propriu-zis, data la care a
fost introdus mesajul respectiv adresa IP a calculatorului de la care a fost
transmis mesajul (eventual o adresa de mail si una de web). Cu exceptia
ultimei informatii, datele vor fi transmise de catre Flash-ul ce ruleaza pe
masina clientului (am fi putut obtine data de pe server prin anumite comenzi PHP dar scopul nostru este de a exemplifica utilitatile Flash-ului si
nu a PHP-ului).
Pentru acest exemplu vom folosi modulul domxml care vine deja instalat
in cadrul Apache2Triad. Totusi in unele cazuri acesta nu este activat.
Pentru a verifica daca acest modul este instalat deja, studiati continutul
documentului rezultat in urma executarii comenzii phpinfo (exemplul
precedent). In cazul in care modulul domxml nu este activat, cautati fisierul
php.inf pe partitia C (cel mai probabil in directorul windowsului dar
uneori in windowssystem si in interiorul acestuia decomentati linia:
copiati in continuare fisierul php_domxml.dll si iconv.dll in directorul
system32 din directorul in care este instalat windowsul (ambele fisiere le
veti gasi dand search in directorul in care a fost instalat apache-ul).
Ne vom abate putin de la Flash pentru a vedea cum construim un
documewnt XML in PHP, cum adaugam in acest document o noua
inregistrare si cum putem citi o anumita inregistrare (sau mai multe cu
aceeasi caracteristica) din acest document. Toate fisierele din acest exemplu
vor fi puse in directorul c:apache2htdocsguestbook. Documentul
XML va avea un format simplu, conceput pentru a retine mesajele
introduse de un vizitator (nu trebuie sa tastati acest document, el este doar
pentru a exemlifica formatul):
<?xml version="1.0" ?>
<mesaje>
<mesaj>
<nume>Marian Tarpescu</nume>
<msg>Imi place acest guestbook</msg>
<data>09:19:47 [02.07.2006]</data>
<identificare>
<ip>193.226.24.84</ip>
<mail>mariano@yahoo.com</mail>
<web>http://www.marian.xhost.ro</web>
</identificare>
</mesaj>
<mesaj>
<nume>Amarie Alex</nume>
<msg>Deoarece nu am macromedia Flash player instalat pe calculator a trebuit sa astept putin pentru incarcarea sitului. Nu se poate elimina acest inconvenient ?</msg>
<data>16:23:51 [03.07.2006]</data>
<identificare>
<ip>191.122.43.6</ip>
<mail>aalex@hotmail.com</mail>
<web>http://www.alexx.ro</web>
</identificare>
</mesaj>
.......................
</mesaje>
Acest XML va trebui sa fie construit din datele transmise de catre Flash.
Vom omite pentru inceput modul de transmitere a datelor din flash si vom
incerca sa adaugam un nod nou obiectului XML aflat in formatul de mai
sus. Nodul nou ce va fi adaugat va fi de fapt un nou continut de tip
.... adica exact ce este transmis de catre o persoana.
Pentru a deschide orice script PHP vom pune tag-ul de inceput
dupa care vom initializa variabilele care teoretic ar trebui sa fie transmise
de catre Flash (vom vedea ulterior cum sunt transmise aceste variabile):
<?PHP
$nume = "Marian";
$msg = "Mesaj de adaugat guestbookului";
$mail = "marian@yahoo.com";
$web = "http://www.marian.ro";
$ip = getenv("REMOTE_ADDR");
$data = date("H:i:s [d.m.Y]");
In continuare trebuie sa verificam daca fisierul in care stocam mesajele
(care se va numi "mesaje.xml") exista deja pe hard-disk si in caz contrar sa
cream acest fisier in format XML:
<?php if (!file_exists("mesaje.xml")){
$doc = new_xmldoc('1.0');
$root = $doc->add_root('mesaje');
$filename="mesaje.xml";
$fp = @fopen($filename,'w');
if(!$fp) {
die(mesaj_eroare=Nu pot crea fisierul XML');
}
fwrite($fp,$doc->dumpmem());
fclose($fp);
}?>
Dupa acest pas fiserul va fi gasit si va putea fi deschis (fie din cauza ca
tocmai a fost creat fie din cauza ca deja exista).Pentru a deschide fisierul trebuie sa ne folosim de comanda
domxml_open_file care din pacate necesita calea completa catre fisier. Din
acest motiv avem nevoie sa definim valoarea PATH ca mai jos. In cazul in
care calea unde ati stocat dumneavoastra „mesaje.xml” nu corespunde cu
cea data mai jos, modificati-o pentru a pointa spre locul unde este stocat
fisierul dumneavoastra:
<?php
define ("PATH", 'c:apache2htdocsguestbook');
if (!$doc = domxml_open_file(PATH . "mesaje.xml")) {
echo " mesaj_eroare=Eroare la deschidere XML";
exit;
}?>
Acum vom adauga o variabila care sa pointeze spre radacina
documentului, variabila prin intermediul careia vom putea adauga noile
valori:
<?php
$root = $doc->document_element();
Ne vom folosi în continuare de "new_child" pentru a adăuga un nod
nou (respectiv un nod cu numele "mesaj" dar a cărui conţinut va fi format
din alte noduri pe care le vom adăuga de asemenea folosind "new_child":
<?php
$mesaj_nou = $root->new_child('mesaj','');
<br />
$nume_ = $mesaj_nou->new_child('nume',$nume);
<br />
$mesaj_ = $mesaj_nou->new_child('msg',$msg);
<br />
$data_=$mesaj_nou->new_child('data',$data);
<br />
$identificare_= $mesaj_nou->new_child ('identificare','');
<br />
$ip_ = $identificare_->new_child('ip',$ip);
$mail_ = $identificare_->new_child('mail',$mail);
$web_ = $identificare_->new_child('web',$web);
?>
Acum, in variabila $doc vor fi retinute tot arborele XML. Pentru a-l putea
vizualiza sau scrie pe HardDisk ne vom folosi de functia dumpmem().
Modul de scriere a fisierului pe HDD este clasic si nu insistam asupra
functiilor implicate, in final vom inchide scriptul PHP prin utilizarea
marcajului final "?>":
<?php
$filename="mesaje.xml";$fp = @fopen($filename,'w');
if(!$fp) {
die(' mesaj_eroare=Nu pot crea fisierul XML');
}
fwrite($fp,$doc->dumpmem());
fclose($fp);
echo "mesaj_eroare=OK";
?>
Salvati scriptul de mai sus cu numele "adauga.PHP" si copiati-l in
directorul in guestbook din htdocs. Executati acest PHP de mai multe ori,
scriind in browser: http://localhost/guestbook/adauga.PHP si apasând
repetat "refresh". In acest mod veti crea un XML ce va contine mai multe
norudi.
Dupa fiecare executie ar trebui sa obtineti o pagina care sa contina
"mesaj=OK" si sa gasiti in directorul guestbook un fisier XML
"mesaje.xml" care sa contina variabilele definite la inceputul PHP-ului
(eventual de mai multe ori).
Scriptul PHP va rula pe server dar avem nevoie de o aplicatie de tip
client care sa comunice datele (numele, mesajl, etc.). Aplicatia de pe client
poate fi un formular HTML (caz in care aplicatie este mult spus) sau poate
fi un obiect Flash.
Obiectul Flash va fi construit in trei parti (nu vom adauga un preloader
la acest flash deorece este destul de mic si mesajele nu sunt - in general -
foarte multe). Prima parte este cea care va afisa toate mesajele si este cea
care va apare atunci când Flash-ul va fi deschis in browser. Partea a doua
este constituita dintr-un formular care are rolul de a transmite datele catre
PHP-ul construit mai devreme iar cea de-a treia parte va afisa un mesaj de
confirmare (sau de eroare).
Vom construi guest-book-ul incercând sa folosind atât script cât si
constructii grafice.
Drept constructii grafice veti realiza trei imagini reprezentând un plic,
un glob pamântesc respectiv un cursor pentru scroll. Primele doua imagini
vor reprezenta legaturi catre e-mailul respectiv pagina web a celui ce a
postat mesajul (daca au fost introduse). Dupa ce au fost redimensionate la
12x12 pixeli, imaginile vor fi transformate in MovieClip (indiferent ca sunt
imagini scalare - importate in Flash sau imagini vectoriale) si li se vor da ca nume de legatura valorile "pictograma_mail", "pictograma_web"
respectiv "cursor_scroll".
Pentru inceput vom incarca fisierul XML (cel ce contine mesajele) si-l
vom afisa. Urmatorul cod este cel mai banal atunci când vrem sa incarcam
un obiect XML dintr-un fisier extern (nu vom incerca sa interpretam inca
datele ci doar sa afisam continutul. Flashul pe care il veti crea va fi salvat in
acelasi director in care este si fisierul XML si se va numi "guestbook.fla".
Initial vom defini doar obiectul XML si vom afisa continutul sau.
Fisierul XML nu se va incarca instant de pe server; orice persoana care a
utilizat vreodata internetul stie ca in anumite momente datele se incarca
mai repede, alte dati mai incet. Dupa ce am dat comanda catre server sa ne
trimita fisierul ce contine mesajele nu ne putem astepta ca la instructiunea
imediat urmatoare informatiile sa fie deja la client. Din acest motiv ne vom
folosi de evenimente - cum ar fi eventimentul incarcarii XML-ului in
memorie. Codul (care va fi pus in primul cadru al unui nou document
Flash) este urmatorul:
var mesaje = new XML();
mesaje.ignoreWhite = true;
mesaje.onLoad = function() {
trace (mesaje.toString());
};
mesaje.load("mesaje.xml");
In prima linie de cod se aloca memorie pentru obiectul XML, se ignora
spatiile albe din cadrul XMLului (unui om ii este mai usor sa inteleaga
continutul unui fisier XML daca este structurat asa cum este structurat mai
sus... calculatorul nu are nevoie ca datele sa fie aliniate, mai mult spatiile
albe precum tab-ul sau spatiul dauneaza interpretarii corecte a obiectului
XML - acest lucru este valabil in Flash). In momentul incarcarii complete a
XMLului in memorie se va executa (automat) functia "onLoad" care va
afisa continutul obiectului XML. In finalul codului mai trebuie sa dam
comanda serverului sa ne trimita fisierul XML: mesaje.load("mesaje.xml");
Ceea ce vrem noi sa facem este mai mult decât doar sa afisam XMLul.
Trebuie sa formatam informatia sa apara cum ne place noua. Ştergeti codul
initial (el a fost pus doar pentru a testa daca fisierul XML se incarca corect)
si sa incercam sa scriem codul pentru adevaratul guestbook. Pentru inceput
vom face câteva initializari:
_root._lockroot = true;
_root.maxx = Stage.width-1;
_root.maxy = Stage.height-1;
var textformat = new TextFormat("tahoma", 11, 0, false);
textformat.color = 0x003366;
var textformat_nume = new TextFormat("tahoma", 11, 0, true);
textformat_nume.color = 0x003333;
var textformat_data = new TextFormat("tahoma", 11, 0, false);
textformat_data.color = 0x003333;
var mesaje = new XML();
mesaje.ignoreWhite = true;
In aceasta portiune din cod am setat proprietatea lockroot a scenei ca
fiind adevarata. Aceasta proprietate este necesara pentru ca player-ul Flash
sa stie unde trebuite sa incarce datele. Daca Flash-ul pe care tocmai il
construiti va fi ulterior atasat (prin intermediul comenzii loadMovie) altui
obiect Flash exista pericolul ca cele doua "root-uri" (al Flash-ului ce incarca
respectiv din cel incarcat) sa se confunde. Prin blocarea radacinii8
obiectului Flash se evita aceasta problema.
Preluam dimensiunile scenei pentru ca guestbook-ul sa poata fi afisat
corect indiferent de dimensiunea scenei (deci ulterior veti putea altera
dimensiunea scenei fara a strica guestbook-ul) - pentru ca guestbookul sa
fie totusi conform standardului deja folosit in exemplele anterioare, puteti
seta dimensiunile scenei de pe acum la 640x480. Portiunea desenabila va fi
asadar de la 0 la maxx pe axa X si de la 0 la maxy pe axa Y. In continuare
setam trei tipuri de formatari ale textului: modul in care va fi afisat mesajul,
numele respectiv data. Ultimele doua comenzi le recunoasteti din codul
anterior. In continuare vom construi functia de afisare (de fapt afisarea se
va produce in momentul incarcarii XMLului in memorie deci este normal
ca aici sa postam toate comenzile care vor formata mesajele.
Vom construi aceasta functie in cativa pasi: primul pas este cel al
construirii unui MovieClip in care vom afisa guestbook-ul:
mesaje.onLoad = function() {
_root.createEmptyMovieClip("guestbook", 0);
_root.guestbook.lineStyle(1, 0x000000, 50);
_root.guestbook.beginFill(0xffffff, 80);
_root.guestbook.moveTo(0, 0);
_root.guestbook.lineTo(maxx, 0);
_root.guestbook.lineTo(maxx, maxy);
_root.guestbook.lineTo(0, maxy);
_root.guestbook.lineTo(0, 0);
Guestbook-ul va contine doua parti: cea in care vor fi afisate mesajele si
cea in care se introduce un mesaj nou. Deocamdata construim prima parte
- MovieClip-ul "guestbook" are rolul de a afisa mesajele. Atunci cand vom
introduce datele acesta va fi in intregime ascuns. Constructia
backgroundului foloseste functii deja folosite (in exemplul cu puzzle-ul) si
din acest motiv nu le vom mai explica.
Mesajele vor depasi la un moment dat dimensiunea scenei. Din acest
motiv vom construi un MovieClip care sa contina toate mesajele dar care va
putea fi deplasat pe axa Y in cadul MovieClip-ului "guestbook" (ulterior
acest MovieClip va fi mascat pentru a nu strica aspectul GuestBook-ului).
_root.guestbook.createEmptyMovieClip("tabel", 0);
poz_curent = 30;
var vector = this.firstChild.childNodes;
variabila "poz_curent" indica locul de unde se va incepe afisarea
mesajelor in cadrul MovieClip-ului "tabel". In sirul "vector" vom regasi pe
rand nodurile XMLului ce contin mesajele, numele, datele etc. Va trebui ca
pentru fiecare element din acest sir sa construim o metoda "frumoasa" de
afisare. Vom folosi o structura repetitiva pentru afisarea consecutiva a
mesajelor si preluam datele din XML (nume, mesaj, data, mailul, adresa
web):
for (i=vector.length-1; i>-1; i--) {
nume_din_xml=vector[i].childNodes[0].firstChild.nodeValue;
mesaj_din_xml=vector[i].childNodes[1].firstChild.
nodeValue;
data_din_xml=vector[i].childNodes[2].firstChild.nodeValue;
mail_din_xml=vector[i].childNodes[3].childNodes[1].
firstChild.nodeValue;
web_din_xml=vector[i].childNodes[3].childNodes[2].
firstChild.nodeValue;
Calculam spatiul ce va fi ocupat de fiecare mesaj:
var metrics:Object = textformat.getTextExtent
(mesaj_din_xml, _root.maxx-80);
Parametrii functiei getTextExtent sunt mesajul respectiv spatiul pe care
vrem sa-l ocupe pe axa X (pe o linie vrem sa avem text care sa ocupe
maxim _root.maxx-80 pixeli). De inaltimea pe axa Y returnata de
getTextExtent ne vom ocupa ulterior. Deocamdata fiecarui mesaj ii vom
desena o bara ce va contine numele celui ce a introdus mesajul, data si
eventual doua legaturi catre adresa de mail si pagina web a celui ce a postat
(in caz ca acestea au fost introduse):
_root.guestbook.tabel.lineStyle(1, 0x999999, 10);
_root.guestbook.tabel.beginFill(0xffffff, 30);
_root.guestbook.tabel.moveTo(25, poz_curent+20);
_rot.guestbook.tabel.lineTo(_root.maxx-50, poz_curent+20);
_root.guestbook.tabel.lineTo(_root.maxx-50, poz_curent);
_root.guestbook.tabel.lineTo(25, poz_curent);
_root.guestbook.tabel.lineTo(25, poz_curent+20);
_root.guestbook.tabel.endFill();
Dupa care vom desena inca un dreptunghi ce va constitui un fundal
pentru mesaj dreptunghi a carui inaltime va varia de la mesaj la mesaj.
_root.guestbook.tabel.lineStyle(1, 0x333355, 10);
_root.guestbook.tabel.beginFill(0xffffff, 40);
_root.guestbook.tabel.moveTo(25, poz_curent);
_root.guestbook.tabel.lineTo(_root.maxx-50, poz_curent);
_root.guestbook.tabel.lineTo(_root.maxx-50,
poz_curent+metrics.textFieldHeight+25);
_root.guestbook.tabel.lineTo(25,
poz_curent+metrics.textFieldHeight+25);
_root.guestbook.tabel.lineTo(25, poz_curent);
_root.guestbook.tabel.endFill();
De remarcat este modul in care am calculat inaltimea mesajului folosind
obiectul metrics: metrics.textFieldHeight+25.
In continuare vom construi (si acest lucru are loc pentru fiecare mesaj -
inca suntem in structura repetitiva "for") un textField in care vom afisa
mesajul:
_root.guestbook.tabel.createTextField("txt"+i, i+10, 30,
poz_curent+20, _root.maxx-80, metrics.textFieldHeight);
_root.guestbook.tabel["txt"+i].multiline = true;
_root.guestbook.tabel["txt"+i].wordWrap = true;
_root.guestbook.tabel["txt"+i].html = true;
_root.guestbook.tabel["txt"+i].selectable = false;
_root.guestbook.tabel["txt"+i].htmlText = mesaj_din_xml;
_root.guestbook.tabel["txt"+i].setTextFormat(textformat);
Proprietatea multiline indica faptul ca campul textual este capabil sa
afiseze mai multe linii, wordWrap permite obiectului de tip textField sa
treaca textul pe urmatorul rand atunci cand nu mai incape pe randul
curent, proprietatea html va permite textField-ului sa "proceseze" putinele
formatari HTML disponibile pentru acest obiect. De asemenea nu vom
permite selectarea textului, vom atribui textField-ului textul preluat din
XML (care a fost anterior copiat in variabila "mesaj_din_xml"), iar in final
vom formata textul conform regulilor stabilite la inceputul documentului.
Intr-un mod aproape similar vom adauga (pe bara construita pentru
fiecare mesaj) numele celui ce a introdus mesajul si data la care a fost
introdus:
_root.guestbook.tabel.createTextField("txt_nume"+i,
i+10010, 30, poz_curent+1, 300, 25);
_root.guestbook.tabel.createTextField("txt_data"+i,
i+20010, 30, poz_curent+1, 300, 25);
_root.guestbook.tabel["txt_data"+i]._x = _root.maxx-90-
textformat_data.getTextExtent(data_din_xml).
textFieldWidth;
_root.guestbook.tabel["txt_data"+i].text = data_din_xml;
_root.guestbook.tabel["txt_data"+i].
setTextFormat(textformat_data);
_root.guestbook.tabel["txt_data"+i].selectable = false;
_root.guestbook.tabel["txt_nume"+i].selectable = false;
_root.guestbook.tabel["txt_nume"+i].text = nume_din_xml;
_root.guestbook.tabel["txt_nume"+i].
setTextFormat(textformat_nume);
In cazul in care adresa de mail si cea pentru pagina web sunt introduse
vom adauga fiecarui mesaj cate o pictograma reprezentand legatura atre
acestea:
if
((mail_din_xml.length>5)&&(mail_din_xml.indexOf("@">0)))
{
_root.guestbook.tabel.attachMovie("pictograma_mail",
"plic"+i, i+30010);
_root.guestbook.tabel["plic"+i]._y = poz_curent+4;
_root.guestbook.tabel["plic"+i]._x = _root.maxx-85;
_root.guestbook.tabel["plic"+i].mail = mail_din_xml;
_root.guestbook.tabel["plic"+i].onPress = function()
{
getURL("mailto:"+mail_din_xml);
};
}
if (web_din_xml.length>10) {
_root.guestbook.tabel.attachMovie("pictograma_web",
"webpage"+i, i+40010);
_root.guestbook.tabel["webpage"+i]._y = poz_curent+4;
_root.guestbook.tabel["webpage"+i]._x = _root.maxx-65;
_root.guestbook.tabel["webpage"+i].web = web_din_xml;
_root.guestbook.tabel["webpage"+i].onPress = function()
{
getURL(web_din_xml, "_blank");
};
}
In aceasta portiune de cod ne folosim de obiectele din biblioteca cu
numele de legatura (linkage) pictograma_mail respectiv pictograma_web.
Acestea au fost construite la inceputul exercitiului. In cazul in care
pozitionarea pictogramelor nu este corecta (ar trebui sa apara in partea
dreapta a barei pe care este afisat numele respectiv data) atunci puteti
modifica paramterii _x, _y (adaugand sau scazand o constanta) pentru a le
deplasa in pozitia dorita.
In finalul buclei nu vom uita sa incrementam valoarea pozitiei curente -
altfel toate mesajele vor aparea suprapuse:
poz_curent += metrics.textFieldHeight+30;
}
Am construit MovieClip-ul tabel. El are rolul de a afisa mesajele si
precum am zis, in cazul in care acestea sunt mai multe decat incapea in
ecran va trebui sa avem posibilitatea de a deplasa in sus sau jos acest tabel.
Pentru aceasta avem nevoie - evident - de o bara de scroll. Bara de scroll va
fi construita atunci cand vom apela urmatoarea functie (care apare inca in
interiorul eventimentului onLoad asociat incarcarii XMLului):
function create_scroll_bar(lungime_tabel) {
_root.guestbook.createEmptyMovieClip("cursor", 1);
_root.guestbook.cursor._x = _root.maxx-30;
_root.guestbook.cursor._y = 30;
_root.guestbook.cursor.attachMovie("cursor_scroll","cursor_scroll", 2);
_root.guestbook.cursor.onPress = function() {
_root.onMouseMove = function() {
_root.guestbook.tabel._y =
_(_root.guestbook.cursor._y-30)*(lungime_tabel-
_root.maxy+50)/(_root.maxy-60);
updateAfterEvent();
};
this.startDrag(false, _root.maxx-30, 30,
_root.maxx-30, _root.maxy-30);
};
_root.guestbook.cursor.onRelease = function() {
this.onMouseMove = null;
this.stopDrag();
};
_root.guestbook.cursor.onRollOut = function() {
this.onMouseMove = null;
this.stopDrag();
};
_root.guestbook.cursor.onReleaseOutside = function(){
this.onMouseMove = null;
this.stopDrag();
};
}
Functia de mai sus are ca parametru de intrare dimensiunea MovieClipului
"tabel" (de fapt atributul _height al acestui MovieClip). Dupa crearea
unui MovieClip intitulat "cursor" - de care vom "apuca" cu mouseul
atunci cand vrem sa deplasam tabelul respectiv pozitionarea lui in partea
dreapta a guestbook-ului, ii atasam imaginea din biblioteca care are ca
linkage id-ul "cursor_scroll" (element grafic construit sau adaugat odata cu
pictogramele pentru mail si web). In continuare vom construi permite
acestui cursor sa fie "apucat" si mutat - lucru destul de facil care seamana
cu metoda de atasare a unui pointer nou mouse-ului (tutorial precedent). In
acelasi timp cu repozitionarea cursorului de scroll, de fiecare data se
recalculeaza pozitia pe axa y a MovieClip-ului "tabel" folosind regula de
trei simpla.
Dunctia de mai sus va fi apelata doar daca dimensiunea tabelului
depaseste dimensiunea scenei:
if (_root.guestbook.tabel._height>_root.maxy-50) {
create_scroll_bar(_root.guestbook.tabel._height);
}
In finalul functiei ce trateaza eventimentul "onLoad" pentru XML
trebuie sa construim o masca (pentru ca Movie-Clip-ul "tabel" sa nu atinga
marginile superioara/inferioara a scenei):
_root.guestbook.createEmptyMovieClip("masca", -100);
_root.guestbook.masca.lineStyle(1);
_root.guestbook.masca.beginFill(1, 100);
_root.guestbook.masca.moveTo(25, 30);
_root.guestbook.masca.lineTo(_root.maxx-50, 30);
_root.guestbook.masca.lineTo(_root.maxx-50,
_root.maxy-20);
_root.guestbook.masca.lineTo(25, _root.maxy-20);
_root.guestbook.masca.lineTo(25, 30);
_root.guestbook.tabel.setMask(_root.guestbook.masca);
_root.mesaje.load("mesaje.xml?NoCache="+(new
Date().getTime()));
Ultima linie trimite o cerere catre server pentru a descarca obiectul XML
continut in "mesaje.xml". Ceea ce urmaeaza dupa numele fisierului nu este
altceva decat o metoda de a convinge browserul sa nu furnizeze fisierul
"mesaje.xml" din memoria chache ci sa ceara din nou serverului acest
fisier.
Credeati ca daca ati afisat mesajele ati scapat ? Nici vorba ! Mai trebuie sa
construiti un modul prin intermediul caruia sa adaugati un mesaj nou.
Acest lucru desi nu este foarte complicat este important pentru ca aici "se
observa" cel mai bine modul in care comunica Flash-ul cu PHP-ul. Vom
construi pentru inceput (din script) un buton care va avea rolul de a
ascunde MovieClip-ul "guestbook" - adica toate mesajele si va afisa altul
"mesaj_nou" care va contine cateva campuri: nume, mesaj, adresa de email
respectiv adresa web. Sa construim butonul:
_root.createEmptyMovieClip("buton_introdu_date", 1);
_root.buton_introdu_date.onRelease = function() {
_root.buton_introdu_date._visible = false;
_root.guestbook._visible = false;
_root.mesaj_nou._visible = true;
};
with (_root.buton_introdu_date) {
lineStyle(1,0xffffff,50);
beginFill(0xffffff, 40);
moveTo(0, 0);
lineTo(85, 0);
lineTo(85, 15);
lineTo(0, 15);
lineTo(0, 0);
_x=_root.maxx-_width-50;
_y=10;
createTextField
createTextField("btn_text",0,0,0,100,18);
btn_text.text="Adaugam; mesaj"
btn_text.setTextFormat(textformat_nume);
}
Am adaugat un nouMovieClip in radacina ("buton_introdu_date") si i-am
atasat functia onRelease (ce va fi executata im momentul apasarii
butonului). In aceasta functie vom ascunde butonul, guestbook-ul si vom
afisa MovieClip-ul "mesaj_nou". Desenarea efectiva a butonului nu ridica o
problema, gruparea "with" indica faptul ca urmatoarele comenzi sunt
asociate MovieClip-ului _root.buton_introdu_date.
Afisarea continutului XMLului este partea cea mai anevoioasa,
n cauza ca fiecare mesaj are o dimensiune proprie si backgroundul
pentru fiecare dintre mesaje se intainde sub tot mesajul. Partea de
introducere a datelor, insa, este statica si va contine mereu aceleasi campuri
(care trebuie sa fie completate de utilizator). Din acest motiv vom crea
aceasta portiune din guestbook folosindu-ne doar de instrumentele (Tools -
bara din dreapta a Flash-ului) disponibile in Flash. Initial creati un
dreptunghi destul de mare in care sa incapa cele patru campuri textuale si
convertiti-l in MovieClip. Dati noului MovieClip numele de instanta
"mesaj_nou". El va fi afisat in momentul in care veti apasa butonul de
introducere a detalor. In acest MovieClip construiti patru campuri textuale
statice - ele vor reprezenta etichetele: "Nume:", "Mail:", "Web:", "Mesaj:".
Creati inca patru campuri dar de aceasta data de tip input, setati-le afisarea
border-ului (din fereastra de proprietati) si numele de variabila ce
identifica fiecare camp. Mai ramane sa creati trei butoane cu etichetele
"Trimite", "Anuleaza" si "Reseteaza". In final, MovieClip-ul ar trebui sa
semene cu cel din imaginea urmatoare:
 |
Mai ramane sa atasati fiecarui buton cate un script (acest lucru il realizati
efectuand click pe buton si completand in fereastra "Actions").
Butonului "Trimite" ii veti atasa un script care trimite variabilele din
campurile textuale catre server:
on (release) {
loadVariables ("adauga.php",this,"POST");
}
Comanda loadVariables are un rol dublu: pe de o parte transmite toate
variabilele din MovieClip-ul curent - cel in care este situat butonul - catre
fisierul PHP si in acelasi timp incarca variabila "mesaj_eroare" generata de
catre scriptul PHP. Multe persoane trec cu vederea aceasta comanda si nu
isi dau seama ca aceasta este de fapt baza comunicarii intre Flash si PHP (si
daca tinem cont ca in ziua de azi nu putem fara sa comunicam intr-un fel
cu serverul va veti da seama de importanta acestei comenzi). Asadar
variabilele care sunt transmise fac parte din MovieClip-ul identificat prin
"this" - adica MovieCLip-ul curent, datele sunt trimise la "adauga.php" si
metoda de transmitere este "POST" - orice formular web are nevoie de o
metoda de transmitere (GET este cealalta metoda dar care este folosita de
obicei pentru a cere ceva de la server nu pentru a modifica starea serverului
- noi vrem sa completam un XML deci vom folosi POST).
Butonului "Anuleaza" ii veti atasa un script care va va returna la
mesajele guestbook-ului:
on (release) {
this._visible = false;
_root.guestbook._visible = true;
_root.buton_introdu_date._visible = true;
}
Butonul "Reseteaza" are rolul de a sterge toate campurile formularului
pentru a fi re-completate:
on (release) {
this.nume = "";
this.mail = "";
this.web = "";
this.mesaj = "";
}
In plus, revenind la scena principala, veti atasa MovieClip-ului
"mesaj_nou" urmatorul cod (atasarea codului se face identic - selectare si
scrierea codului in fereastra "Actions"):
onClipEvent (data) {
if (this.mesaj_eroare == "OK") {
this._visible = false;
_root.guestbook._visible = true;
_root.buton_introdu_date._visible = true;
_root.mesaje.load("mesaje.xml?NoCache="+(new
Date().getTime()));
}
}
onClipEvent (load) {
this._visible = false;
}
La inceputul acestui exemplu am convenit ca in cadrul PHP-ului sa
fixam numele, mailul, pagina web si mesajul transmis. Pnetru ca
informatiile sa fie primite corect de la Flash ar trebui sa inlocuim
urmatoarele linii din codul PHP:
<?php
$nume = "Marian";
$msg = "Mesaj de adaugat guestbookului";
$mail = "marian@yahoo.com";
$web = "http://www.marian.ro";
?>
Dupa modificare, liniile vor arata astfel:
<?php
$nume=$_POST['nume'];
$msg=$_POST['mesaj'];
$mail=$_POST['mail'];
$web=$_POST['web'];
?>
Adica valorile variabilelor nu sunt fixate ci sunt primite prin metoda
POST.
Atentie! In cazul in care datele ajung pe server (acesta salveaza datele)
dar guestbook-ul nu se intoarce la pagina principala de afisare a mesajelor
(dupa ce ati apasat butonul "Trimite") eroarea cea mai des intalnita este
lasarea catorva spatii albe dupa scriptul PHP din fisierul "adauga.php".
(De exemplu daca dupa terminarea php-ului mai aveti doua spatii mesajul
de eroare nu va fi "OK" ci "OK" si conditia de returnare la pagina ce
afiseaza mesajele nu va fi satisfacuta). Desi exista si alte mesaje de eroare
acestea nu au fost tratate - vom lasa aceasta parte ca exercitiu pentru
dumneavoastra (nu aveti decat de completat ramura "else" a conditiei "if
(this.mesaj_eroare == "OK") ".
|