Lucrare

Universitatea Lucian Blaga Sibiu Facultatea de tiine Specializarea: Informatic Economic
LUCRARE DE LICEN
Coordonator, Lector univ. drd. Daniel HUNYADI Engineering Manager Adobe, Marius Andreiana
Absolvent, Radu Mogo
2008
Universitatea Lucian Blaga Sibiu Facultatea de tiine Specializarea: Informatic Economic
Extinderea frameworkului AJAX Spry pentru Dreamweaver Stiletto. Widgetul Spry Rating
Coordonator, Lector univ. drd. Daniel HUNYADI Engineering Manager Adobe, Marius Andreiana
Absolvent, Radu Mogo
2008
Cuprins
1. INTRODUCERE..................................................................................................................5 2. Crearea de extensii folosind Dreamweaver.........................................................................6 2.1.Ce sunt extensiile i de ce se folosesc.........................................................................6 2.2.Cum proceseaz Dreamweaver extensiile....................................................................6 2.3.Despre diferitele tipuri de extensii Dreamweaver..........................................................9 2.4.Interfaa de programe de aplicaii lucrul cu extensii..................................................11 2.5.Modelul Obiectual al Documentului (DOM).................................................................12 2.6.Care DOM?................................................................................................................13 3. Frameworkul Spry.............................................................................................................14 3.1.Spry Effects................................................................................................................14 3.2.Spry Data....................................................................................................................15 3.3.Spry Widgets..............................................................................................................15 4. Widgetul Spry Rating.........................................................................................................17 4.1.Despre widgetul Spry Rating .....................................................................................17 4.2.Anatomia widgetului Spry Rating ...............................................................................17 4.3.Funcionarea widgetului cnd suportul Javascript lipsete..........................................18 4.4.Construirea unui widget Spry Rating ..........................................................................18 4.5.Configurarea widgetului..............................................................................................19 4.5.1. Protejarea widgetului pentru votare:...................................................................19 4.5.2. Setarea valorii iniiale a widgetului:....................................................................19 4.5.3. Trimiterea valorii votate la server:.......................................................................19 4.5.4. Modificarea dinamic a valorii widgetului...........................................................20 4.5.5. Votare cu ajutorul tastelor...................................................................................20 5. Extensia Spry Rating pentru Dreamweaver CS4...............................................................21 5.1.Componentele extensiei Spry Rating..........................................................................21 5.2.Spry.DesignTime.Widget.Base...................................................................................22 5.3.Spry.DesignTime.Widget.Manager..............................................................................22 5.4.Spry.DesignTime.Editing.Utils.....................................................................................23 5.5.Spry.DesignTime.Widget.Rating.................................................................................23 6. Integrarea i componentele extensiei................................................................................28 6.1.Inserarea i modificarea extensiei Spry Rating ..........................................................28 6.2.Componentele extensiei.............................................................................................31 6.2.1. Comenzi.............................................................................................................31 6.2.1.1 Modul de lucru al comenzilor.......................................................................32 6.2.1.2 Comanda Spry Rating ................................................................................34 6.2.2. Obiecte...............................................................................................................35
6.2.2.1 Modul de lucru al obiectelor.........................................................................36 6.2.2.2 Obiectul Spry Rating ...................................................................................36 6.2.3. Translatori..........................................................................................................39 6.2.3.1 Modul de lucru al translatorilor.....................................................................39 6.2.3.2 Translatorul de Spry Widgets ......................................................................40 6.2.4. Inspectorul de proprieti ...................................................................................43 6.2.4.1 Modul de funcionare al PI...........................................................................44 6.2.4.2 PI pentru Spry Rating .................................................................................45 6.2.5. Alte extensii .......................................................................................................52 6.3.mpachetarea i distribuia extensiei Spry Rating ......................................................53 7. Concluzie..........................................................................................................................56
1.
INTRODUCERE
Tema aleas extinde suita de widgeturi Spry existente pentru pachetul software Dreamweaver Stiletto al firmei Adobe. Dreamweaver Stiletto va fi lansat n aceast toamn mpreun cu un pachet complet de widgeturi Spry, widgeturi Google gadgets i o mulime de alte unelte pentru integrarea de soluii internet deja existente. Frameworkul Ajax Spry1 este o librrie Javascript ce ofer funcionaliti Ajax puternice i uor de folosit, ce permit creatorilor de pagini de internet s construiasc pagini care ofer o experien multimedia mult mai bogat utilizatorilor lor. Scopul librriei este de a uura integrarea de funcionaliti Ajax i de a permite designerilor s creeze mult mai uor pagini Web 2.0, n majoritatea cazurilor doar printr-un simplu click. Librria Spry permite ncorporarea informaiilor n format XML, JSON, sau HTML n pagini ce folosesc cod HTML, CSS i o cantitate infim de cod Javascript, fr a mai fi nevoii s rencarce pagina pentru a vedea modificrile. Librria Spry permite i o stilizare i integrare uoar a widgeturilor, oferindu-le utilizatorilor elemente de coninut avansate. Construcia librriei a fost axat nct s ofere folosirea minimal a codului HTML i Javascript pentru a implementa numeroasele widgeturi, si poate fi folosit de oricine dorete s dezvolte pagini web interactive, folosind orice unealt pentru procesul de creaie. Motivul alegerii acestei teme l constituie posibilitatea care mi s-a dat n a lucra la un proiect care chiar are o finalitate practic, alturi de o echip care are pregtirea necesar i resursele necesare pentru ai permite s lucrezi i s extinzi un pachet software folosit de mii sau chiar sute de mii de oameni din ntreaga lume. Experiena a fost una fructuoas, iar echipa Adobe Romania a oferit tot suportul necesar pentru finalizarea proiectului. Ca i aplicabilitate i exemplu de integrare a unui widget Spry n ultima versiune a produsului Dreamweaver, am ales s integrez widgetul Spry Rating2. Widgeturile Spry sunt componente web create folosind cod HTML, CSS i cod Javascript minim, permit customizarea lor vizual folosind cunotintele de HTML i CSS pe care le avei i sunt de asemenea componente accesibile; pot fi ataate unor secvene de taste i pot fi folosite i cnd suportul pentru Javascript lipsete. Widgetul Spry Rating permite votarea, care poate fi aplicat unei pagini sau mai multor componente ale unei pagini ( de exemplu: poze, muzic, votarea articolelor, votarea utilizatorilor). Widgetul poate fi configurat nct s permit o singur votare per nregistrare sau multiple votri.
1 Adobe Labs - http://labs.adobe.com/technologies/spry/ - pentru mai multe informaii i exemple complete privind librria Spry 2 Adobe Labs - http://labs.adobe.com/technologies/spry/samples/rating/RatingSample.html exemple complete de implementare a widgetului Spry Rating.
2.
CREAREA DE EXTENSII FOLOSIND DREAMWEAVER
Capitolul trateaz modaliti de creare a extensiilor pentru pachetul software Dreamweaver(versiunea Stiletto), detaliind diferitele tipuri de extensii care pot fi create i apoi particulariznd la lista de extensii folosite pentru a crea widgetul Spry Rating.
2.1. Ce sunt extensiile i de ce se folosesc

Extensiile sunt buci de cod, ce extind funcionalitatea pachetului Dreamweaver. n general, sunt create pentru a fi folosite n situaii ce presupun repetarea multipl a aceleiai cerine. Situaiile generale n care sunt folosite extensiile sunt urmtoarele:
automatizarea schimbrilor pe care le face utilizatorul documentului curent, cum
ar fi inserarea de coninut HTML, CSS, CFML, Javascript sau orice alt cod recunoscut de Dreamweaver.
interacionarea cu aplicaia, pentru a nchide/deschide automat ferestre,
nchide/deschide automat documente, pentru a schimba anumite taste rapizi i nu numai.
conectarea la surse de date, ceea ce permite crearea de pagini dinamice care
folosesc aceste informaii din sursele respective.
inserarea i lucrul cu blocuri de cod server n documentul curent.
2.2. Cum proceseaz Dreamweaver extensiile

Urmtoarele componente permit crearea de extensii pentru Dreamweaver:
Un parser HTML, ce permite crearea interfeei cu utilizatorul folosit de extensie.
Acesta presupune existena unui formular, cmpuri folosite de formular, posibilitatea de a aduga imagini, elemente poziionate absolut i alte elemente HTML. Elementele HTML vor fi rendate ntr-o fereastr Windows/Mac. Dreamweaver are propriul su parser HTML.
Un arbore de directoare, ce organizeaz i stocheaz fiierele care
implementeaz elementele i extensiile sistemului.
O serie de inferfee de programare (API) care permit accesul la funcionaliti
Dreamweaver folosind limbajul Javascript.
Un interpretor Javascript ce execut codul Javascript din fiierele extensiilor.
Practic, o extensie este format dintr-un fiier ce conine codul HTML, folosit pentru a renda fereastra n Dreamweaver, i un fiier sau mai multe, cu codul Javascript, ce conine logica acelei extensii. Fiierele Javascript pot fi refereniate, sau codul lor poate fi introdus direct in seciunea HEAD a fiierului HTML. 2
Un exemplu simplu de extensie Dreamweaver o reprezint o comand din meniul principal. Presupunem urmtoarea comand simpl creat de noi, care include codul Javascript n acelai fiier HTML, fiind vorba de comenzi puine. Apelat, comanda va afia urmtoarea fereastr (fig 1.2):
Fig 2.1 Comanda cmsConnectionProperties, cum arat apelat din meniul principal
Fig 2.2 Rezultatul apelrii comenzii const n afiarea acestei ferestre. Codul HTML necesar pentru a genera aceast fereastr va arta n felul urmtor:
<form name="cmsform"> <table> <tr> <td>Cms type:</td> <td> <select name="cms">
<option value="typo3" selected="selected"> Typo3</option> <option value="wordpress">Wordpress</option> <option value="joomla">Joomla</option> </select> </td> </tr> <tr> <td>Site</td> <td><input type="text" name="site" value="" /></td> </tr> <tr> <td>Username</td> <td><input type="text" value="" name="username"/></td> </tr> <tr> <td>Password</td> <td><input type="password" name="password" value="" /></td> </tr> </table> </form>
Tot ceea ce Dreamweaver va ntlni n tagul form, l va renda n stnga ferestrei, butoanele de comanda fiind generate n seciunea de cod Javascript, n funcia commandButtons(). Codul Javascript pentru generare a butoanelor i logicii formularului, este urmtorul:
<script> function commandButtons() { return new Array("Ok", "okPressed()", "Fetch", "fetch()", "Cancel", "cancelPressed()"); } function okPressed() { // comenzi pentru butonul ok } function cancelPressed() { // comenzi pentru butonul cancel } function fetch() { var site = document.cmsform.site.value;
var httpReply = MMHttp.getTextCallback3("status", site, "test"); } </script>
Interaciunea ntre formular i cod se face simplu, ca n cazul oricrei alte pagini HTML ce conine cod Javascript. Putem lua valoarea elementelor dup nume, folosind apeluri de genul document.cmsform.site.value; sau document.forms[0].site.value pentru elementele obinuite (textarea, select, input), ns putem folosi i funciile API pentru a prelua valoarea elementelor speciale puse la dispoziie de Dreamweaver.
2.3. Despre diferitele tipuri de extensii Dreamweaver

Dreamweaver ofer o serie de extensii, care ofer diferite funcionaliti, pornind de la executarea unei comenzi pn la afiarea i executarea unui property inspector pe un tag sau un bloc de cod destul de complicat. Folosite mpreun, extensiile permit crearea de widgeturi sau unelte destul de compacte, care s simplifice n final enorm munca depus de utilizatorul programului, fie el designer sau programator. Lista de extensii oferite de Dreamweaver include:
Obiecte Insertbar aceste extensii creeaz modificri n bara de Inserare. Un
obiect e folosit de obicei pentru a automatiza inserarea de cod ntr-un document. Aceste obiecte pot s conin i un formular n care se primesc date de la utilizator, i cod Javascript care execut codul n funcie de parametrii introdui. Fiierele pentru obiecte sunt stocate n directorul Configuration\Objects4.
3 MMHttp.getTextCallback este o funcie API, folosit pentru a trimite un apel asincron i pentru a returna rspunsul cererii, incluznd headerele returnate i coninutul returnat de apel, care poate fi cod HTML, XML, sau orice alt format text. Funciile API incep cu MMnume/MM sau dw/dreamweaver. Mai multe despre funciile API n capitolele urmtoare. 4 Fiecare tip de extensie e stocat ntr-un anume director preconfigurat. Pentru o bun funcionare a extensiilor, fiierele lor trebuie stocate n folderul categoriei crora le aparin. Stocate n alt parte, ele nu vor funciona, deoarece Dreamweaver caut i apelul anumitor funcii specifice fiecrei extensii.
Fig 2.3 Meniul de obiecte Insertbar, aa cum apare n Dreamweaver Stiletto
Comenzi aceste extensii pot rula orice task, fie c primesc sau nu date de la
utilizator. n general comenzile sunt invocate din meniul Commands, dar pot fi apelate i din alte extensii. Fiierele de comenzi sunt stocate n directorul Configuration\Commands.
Fig 2.4 Meniul de comenzi
Comenzi meniu aceste extensii extind API-ul de comenzi pentru a permite
rularea de taskuri cnd anumite elemente din meniu sunt apelate. Comenzile de meniu permit i crearea de submeniuri dinamice.
Toolbar (bara de unelte) aceste extensii pot aduga elemente la toolbarurile
existente sau pot crea noi toolbars n Dreamweaver. Noile toolbars apar sub cel standard. Uneltele sunt stocate in directorul Configuration\Toolbars.
Fig 2.5 Toolbarul pentru alegerea diferitelor stiluri de rendare a paginii
Rapoarte aceste extensii pot aduga rapoarte customizate sau pot modifica
modelele deja existente
Property Inspector (Inspectorul de proprieti) aceste extensii apar n 6
panoul de inspectare al proprietilor. Majoritatea inspectorilor din Dreamweaver fac parte din distribuia de baz i nu pot fi modificai, dar inspectorii customizai pot suprascrie interfeele existente in Dreamweaver sau pot crea interfee noi pentru a analiza taguri definite de utilizator. Inspectorii sunt stocai n folderul Configuration\Inspectors.
Fig 2.6 Inspectorul pentru un input de tip checkbox.
Floating panel (panouri flotante) aceste extensii permit adugarea de
panouri flotante la interfaa Dreamweaver. Aceste panouri pot interaciona cu textul selectat, cu ntreg documentul sau cu taskul curent. Panourile sunt stocate in directorul Configuration\Floaters.
Data source aceste extensii permit crearea de conexiuni dinamice la informaii
stocate n baza de date. Extensiile pot fi accesate din meniul Plus (+) al panoului de Legturi (Bindings panel). Directorul n care sunt stocate acest tip de extensii este Configuration/Data sources.
Data translators (Translatorii de date) aceste extensii convertesc cod non-
HTML n cod HTML ce poate fi vizualizat n fereastra documentului, cnd aceasta este setat pe vederea Design (Design View, sau Split). Aceste extensii blocheaz i codul non-HTML pentru a preveni afiarea lui de ctre Dreamweaver. Fiierele translator sunt stocate n directorul Configuration\Translators.
2.4. Interfaa de programe de aplicaii lucrul cu extensii.

Interfaa de programe de aplicaii (API5) pentru extensiile Dreamweaver creeaz un scheleton pe baza cruia orice extensie poate fi customizat, att folosind cod Javascript ct i cod C (codul fiind astfel apelabil din fiiere DLL) Modul n care Dreamweaver proceseaz extensiile Javascript este urmtorul: La pornirea programului, acesta verific directorul Configuration/tipul_extensiei6 unde tipul_extensiei reprezint una dintre categoriile de extensii descrise mai sus. Dac ntalnete un fiier al unei extensii, Dreamweaver proceseaz codul Javascript folosind urmtorii pai:

Compileaz tot codul gsit ntre tagurile <SCRIPT> Execut orice cod gsit intre tagurile <SCRIPT>, care nu face parte din declaraia
5 API definire i descriere http://en.wikipedia.org/wiki/API 6 Motivul pentru care Dreamweaver proceseaz aceste fiiere la pornire este pentru c unele extensii ar putea avea nevoie s iniializeze variabile globale, care vor fi iniializate n acest pas, i astfel pot fi apelate de mai multe extensii care le-ar putea folosi.
unei funcii (declararea de variabile globale, etc) Pentru fiierele Javascript externe, definite n atributul src al tagului <SCRIPT> Dreamweaver le va procesa executnd urmtorii pai:

Citirea fiierului Compilarea codului Executarea procedurilor
Extensiile terminate si pregtite pentru distribuie pot fi mpachetate ntr-un format recunoscut de aplicaia Extension Manager7, care vine mpreun cu instalaia de Dreamweaver, i care este folosit pentru a uura adugarea/tergerea de extensii customizate, altele dect cele standard.
2.5. Modelul Obiectual al Documentului (DOM8)

n aplicaia Adobe Dreamweaver, Modelul Obiectual al Documentului, numit n continuare DOM, este o structur extrem de important pentru dezvoltatorii de extensii. Modelul permite accesul i manipularea elementelor din documentul utilizatorului precum i din documentul extensiei. Prin reprezentarea tagurilor i atributelor ca i obiecte i proprieti, DOM permite limbajelor de programare s acceseze i s manipuleze documente i coninutul acestora. Structura unui document HTML poate fi vzut asemeni unui arbore. Rdcina arborelui este reprezentat de tagul html, cu succesorii head i body. Succesori ai tagului head ar putea fi tagurile: title, meta, script, link, etc iar ai tagului body: h1, h2, div, p, a, etc. Aceast relaie continu apoi pe fiecare nivel pentru fiecare tag ce conine alt tag. Structura arborescent a unui DOM este stocat i reprezentat ca o ierarhie de noduri printe i noduri copil. Rdcina nu are nici un printe, iar nodurile frunz nu au noduri copii. La orice nivel n structura documentului HTML, orice element HTML poate fi accesat de Javascript ca i nod. Folosind aceast structur, putem accesa astfel ntreg documentul sau orice component a sa. Accesul obiectelor cu ajutorul Javascript poate fi fcut referind acel obiect fie prin numele su sau prin indexul su. De exemplu, dac dorim s accesm un input de tip text, cu numele prenume, element ce se gsete ntr-un formular cu numele formular1, elementul fiind al 2-lea input n formular, iar formularul fiind primul formular din document, atunci ambele referine sunt valide si vor returna acelai nod:
referind numele: document.formular1.prenume
7 The extension installation file format Adobe Press documentul conine informaii legate de modul de mpachetare al extensiilor pregtite pentru distribuie. 8 DOM acronym pentru Document Object Model
referind indexul: document.forms[0].elements[1]9
2.6. Care DOM?

Dreamweaver permite accesul la 2 modele obiectuale ale documentului. Primul DOM face referire la documentul curent pe care lucreaz utilizatorul, iar al doilea DOM face referire la structura documentului extensiei. Modul de referire al celor 2 modele este diferit. n Javascript, modul standard de apelare al obiectelor din documentul activ, este urmtorul: document.element (unde element este elementul pe care l referim). n Dreamweaver, document face referire la modelul folosit de extensie, astfel, document.forms[0] face referire la primul formular ntlnit n interfaa extensiei. Referirea obiectelor din documentul utilizatorului se face prin apelul dw.getDocumentDOM(), dw.createDocument() sau alte funcii care returneaz obiectul document. De exemplu, ntr-o extensie, referirea primei imagini din documentul utilizatorului se face n felul urmtor: var dom = dw.getDocumentDOM(); // preluare DOM
var primaImagine = dom.images[0]; // preluare prima imagine primaImagine.src = altaImagine.gif; // setare atribut SRC Accesul la aceste 2 tipuri de modele este permis doar dezvoltatorilor de extensii. Utilizatorul are acces doar la documentul curent, iar accesarea obiectelor din documentul curent se face folosind funciile i accesorii standard din Javascript, astfel referirea modelului va fi fcut folosind document.
9 Numerotarea pentru elementele unui array n Javascript ncepe de la elementul de pe poziia 0. Astfel, elements[1] face referire la al doilea element, iar forms[0] face referire la primul formular din document.
3.
FRAMEWORKUL SPRY
Frameworkul Spry este un framework Ajax opensource dezvoltat de compania Adobe, folosit pentru dezvoltarea de aplicaii RIA (Rich Internet Applications) aplicaii internet cu coninut i interaciuni multiple. Spre deosebire de celelalte frameworkuri Javascript existente, gen Dojo sau Prototype, Spry este destinat mai ales webdesignerilor, dect dezvoltatorilor web, i asta datorit uurinei n utilizare. Frameworkul este integrat direct ncepnd cu Dreamweaver versiunea CS3. Spry poate fi ns folosit cu orice alt software existent sau direct n editorul HTML pe care l folosim de obicei. Tot ce trebuie tiut pentru a integra Spry in paginile noastre e HTML, CSS i Javascript. Spry este implementat sub forma unui set de librrii Javascript. Este constituit din 3 pri: Spry Data, Spry Widgets i Spry Effects. Aceste componente pot fi folosite mpreun sau separat
3.1. Spry Effects

Componenta Spry Effects permite adugarea de efecte oricrui element de pe o pagin de internet. Efectele se adaug printr-o singur linie de cod, iar aceste efecte pof fi folosite pentru a evidenia anumite informaii, creea tranziii animate, sau modifica vizual un element pentru o perioad determinat de timp. Printre efectele oferite de Spry 1.6.110 se numr:

Fade elementul dispare sau apare Blind elementul este nchis sau deschis asemenea unei cortine Grow elementul i schimb mrimea Highlight elementul este scos n eviden Shake elementul este micat rapid Slide elementul permite crearea de slideuri. Este folosit de obicei n grupe de
elemente cu efect Slide.

Squish elementul este redimensionat Observers observatorii permit execuia de cod customizat sau execuia altor
efecte dup ce anumite schimbri au fost depistate pe unele elemente (ex: schimbare clas, schimbare efect, etc).
Clustering permite rularea de efecte, unul dup cellalt. Efectele sunt depuse
ntr-un cluster, apoi vor fi executate n ordine.
10 Referinele din aceast lucrare de licen se refer la versiunea 1.6.1 a frameworkului Spry
10
3.2. Spry Data

Componenta Spry Data transform informaii complexe, primite din surse variate, ntr-un format bazat pe linii i coloane care poate fi apoi folosit oriunde n pagin. Formatele de informatii cu care poate lucra includ XML, JSON i HTML. Componenta permite de asemenea i adugarea de regiuni dinamice n pagina pe care lucrm, regiuni care controleaz modul de afiare i poziionare al informaiilor dorite fr s scriem o linie de cod Javascript. Clase folosite pentru lucrul i importul de informaii:

CSV Data Set permite importul de informaii dintr-un fiier CSV XML Data Set permite importul de informaii dintr-un fiier XML HTML Data Set permite importul de informaii dintr-un fiier HTML JSON permite folosirea informaiilor venite din arrayuri n formatul JSON
Asupra informaiilor importate se pot executa operaii de sortare, cutare filtrat pe Xpath (pentru XML), schimbul de date ntre diferite containere de informaii, paginare, observatori pe containerele de date precum i popularea widgeturilor cu aceste date (de exemplu popularea unui Spry Accordion).
3.3. Spry Widgets

Componenta Spry Widgets conine o serie de componente web avansate, create folosind cod HTML, puin CSS i o cantitate infim de cod Javascript. Ca n cazul altor componente, stilizarea se face folosind HTML i CSS, iar widgeturile pot rspunde la apsri de taste, funcionnd chiar i cnd suportul pentru Javascript este inexistent. Printre widgeturile populare se numr:
Accordion creeaz un acordion folosind cod static HTML sau un data set, din
Spry Data.
Widgeturi de validare form text field, form confirm password, form password
validation, form checkbox, form select, form textarea, etc. Sunt asociate n general cu un formular ce urmeaz a fi postat, scopul lor fiind de a valida datele nainte de a fi trimise.
Sliding panels efectul de panouri glisante este unul dintre cele mai folosite, pe
lng acordion.

Tabbed panels Panouri controlate prin taburi Tooltip creeaz note informative, fie din cod static sau dinamic. 11
Rating widgetul dezbtut n aceast lucrare. Permite adugarea unui control
de votare pe pagin sau pentru orice nregistrare de pe pagin.
12
4.
WIDGETUL SPRY RATING
Capitolul dezbate componentele widgetului Spry Rating, opiunile de configurare ale acestuia, modul de integrare n Dreamweaver Stiletto i extensiile folosite pentru a obine funcionalitile dorite n Dreamweaver.
4.1. Despre widgetul Spry Rating

n Spry, fiecare widget const dintr-un fiier Javascript, ce conine logica, i un fiier CSS, ce conine stilizarea acestuia. Integrarea unui widget n pagin const n inserarea acelor 2 fiiere. Fiierele corespunztoare sunt numite dup widgetul pe care l reprezint, deci n cazul nostru vom utiliza fiierele SpryRating.css i SpryRating.js, mpreun cu imaginile folosite pentru afiarea steluelor de votare.
4.2. Anatomia widgetului Spry Rating

Widgetul poate fi folosit n 2 cazuri diferite: ca i component static, ce nu va permite utilizatorilor s voteze ci doar s vizualizeze votul curent, sau ca i component dinamic, ce permite utilizatorilor s i exprime propriul vot. Toate widgeturile sunt iniializate apelnd constructorul respectiv clasei pe care o reprezint, dup ce codul HTML corespunztor widgetului a fost adugat. Constructorul primete 2 valori, id-ul elementului HTML care l conine i un set de opiuni folosite pentru configurare (opional). Exemplu:
<span id="spryrating1" class="ratingContainer"> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span>  <span class="ratingRatedMsg">Mulumim pentru vot !</span> </span> <script type="text/javascript"> var spryrating1 = new Spry.Widget.Rating("spryrating1"); </script>
Fiecare widget are ataat un set de clase ce controleaz aparena i modul de interacionare al acestuia. n exemplul de mai sus, ntregului widget i atam clasa ratingContainer, iar fiecare stelu va fi reprezentat folosind clasa ratingButton. Cnd utilizatorul va alege ce vot va da, alturat va apare mesajul definit pe elementul cu 13
clasa ratingratedMsg, i anume Mulumim pentru vot!. Fig 4.1 Widgetul de rating, aa cum este afiat n pagin Poate fi folosit orice tag HTML pentru container sau pentru stelue, singurul lucru important const n respectarea structurii widgetului: un container principal ce conine n structura sa componentele steluelor i componentele mesajelor afiare.
Container SPAN, DIV, etc Stelute SPAN, DIV, etc Mesaje SPAN, DIV, etc
4.3. Funcionarea widgetului cnd suportul Javascript lipsete

Pentru a permite funcionarea widgetului cnd suportul Javascript lipsete trebuie adugate cteva taguri HTML adiionale. Elementele adugate n plus vor fi ascunse cnd suportul Javascript este prezent. nlocuirea se face folosind un input de tip text, n care vom putea afia i prelua valoarea votului, precum i un buton de submit, pentru a posta noile valori.
<form method="get" name="form1" action="SpryRating.php"> <span id="spryrating1" class="ratingContainer"> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <input type="text" name="numeElement" value="3.5" /> <input type="submit" value="Voteaza"/> </span> </form>
4.4. Construirea unui widget Spry Rating

n pagina n care dorim s adugam votarea, scriem urmtorul cod n seciunea head:
<script type="text/javascript" src="SpryRating.js"></script> <link href="SpryRating.css" rel="stylesheet" type="text/css" />
Rendarea votrii o vom face introducnd codul respectiv acesteia (pentru votare cu 5 stele):
<span id="spryrating1" class="ratingContainer"> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span>
14
<span class="ratingButton"></span> </span>
Urmtorul pas const n adugarea constructorului pentru widget:

<script type="text/javascript"> var rating = new Spry.Widget.Rating("spryrating1"); </script>
4.5. Configurarea widgetului

Adugarea de funcionaliti opionale se face prin configurarea widgetului, opiuni care sunt adugate la constructorul widgetului, dup ce specificm id-ul elementului cruia i atribuim votarea. Fiind definite ntr-un array, opiunile sunt delimitate intre acolade { }.
4.5.1.
Protejarea widgetului pentru votare:
<script type="text/javascript"> var rate = new Spry.Widget.Rating("spryrating1", {readOnly:true}); </script>
4.5.2.
Setarea valorii iniiale a widgetului:
<script type="text/javascript"> var rate = new Spry.Widget.Rating("spryrating1", {ratingValue:2.5}); </script>
Codul de mai sus va crea o instan a widgetului de votare, iar valoarea iniial va fi setat la 2.5, deci pentru un sistem de votare de 5 stele, punctajul va fi setat la jumtate.
4.5.3.
Trimiterea valorii votate la server:
<script type="text/javascript"> var rate = new Spry.Widget.Rating("spryrating1", {saveUrl:'SpryRating.php?id=spryrating5&val=@@rw_Rating@@'}); </script>
Widgetul include modaliti de comunicare cu serverul, pentru a trimite i primi valoarea unei votri. Trimiterea se poate face prin 2 metode, folosind POST sau GET. Metoda standard de trimitere este GET. Cnd trimitem datele votrii astfel, trebuie s specificm opiunea saveUrl care primete URL-ul cruia i trimitem aceste date. n cazul de mai sus trimitem valoarea votat pe widgetul cu id spryrating5 scriptului SpryRating.php Pentru a trimite datele folosind metoda POST trebuie adugat opiunea postData, ce va conine URL-ul i datele votrii, precum n exemplul de mai jos:
<script type="text/javascript"> var rate = new Spry.Widget.Rating("spryrating1", {postData: 'id=spryrating2&val=@@ratingValue@@', saveUrl:'SpryRating.php});
15
</script>
Valoarea votrii va fi trimis n variabila @@ratingValue@@, iar n cazul metodei GET, n variabila @@rw_Rating@@
4.5.4.
Modificarea dinamic a valorii widgetului
Folosind opiunea afterRating se poate specifica ce valoare va lua widgetul dup votare, care poate s fie valoarea curent votat, sau valoarea returnat de server dup ce s-a votat (deci o medie a voturilor totale). Pentru aceasta trebuie adugat n interiorul codului widgetului un input de tip text, care va stoca noua valoare. Id-ul acestui input va fi transmis ca valoare pentru opiunea ratingValueElement. Aceast opiune este folosit ntotdeauna mpreun cu opiunea saveUrl.
<span id="spryrating1" class="ratingContainer"> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <input type="text" id="ratingValue" value="2"/> </span>
name="dynamic_rate"
<script type="text/javascript"> var rate = new Spry.Widget.Rating("spryrating1", {ratingValueElement:"ratingValue", afterRating:'serverValue', saveUrl:'SpryRating.php?id=spryrating5&val=@@rw_Rating@@'}); </script>
4.5.5.
Votare cu ajutorul tastelor
Modificrile folosind tastatura permit utilizatorului s controleze widgetul folosind sgeile sau alte taste de acces definite. Navigarea widgetului cu ajutorul tastaturii este suportat n mod standard, ns poate fi oprit setnd opiunea enableKeyboardNavigation pe fals. Specificarea altor taste de navigare dect cele standard se poate face folosind opiunile pentru taste: moveNextKeyCode (mrete valoarea votului), movePrevKeyCode (scade valoarea votului), doRatingKeyCode (realizeaz votarea)
<script type="text/javascript"> var rate = new Spry.Widget.Rating("spryrating1", {moveNextKeyCode:34 /* tasta PgUp */, movePrevKeyCode: 33 /* tasta PgDn */, doRatingKeyCode:32 /*tasta Space*/}); </script>
16
5.
EXTENSIA SPRY RATING PENTRU DREAMWEAVER CS4
Capitolul precedent a expus detaliile frameworkului Spry, integrarea widgetului Spry Rating ntr-o pagin web precum i codul necesar pentru aceast integrare i opiunile de configurare a sistemului de votare, odat creat pe pagin. Capitolul curent dezbate modul de creare a unei astfel de extensii i modul de integrare a unui astfel de widget ntr-o pagin de internet creat n aplicaia Dreamweaver. Integrarea widgetului se face crend o serie de extensii Dreamweaver ce permit integrarea acesteia folosind meniul de obiecte sau cel de comenzi i apoi uoara editare de ctre utilizator al acestui widget folosind Property Inspector. Astfel extensia n sine este construit folosind o suit de alte extensii, care integrate, ajut la o utilizare mult mai facil i mai uoar a componentelor de care utilizatorul comun are nevoie pentru a scrie pagini de internet funcionale i n pas cu noile tehnologii. Dac prima parte ce prezenta widgetul de votare, se adresa n special programatorilor, extensia integrat n Dreamweaver se adreseaz utilizatorilor de rnd, care pot s aib cunointe Javascript de baz, sau chiar deloc, i care pot configura acest widget folosind doar opiunile oferite de Inspectorul de Proprieti.
5.1. Componentele extensiei Spry Rating

Am discutat iniial despre tipurile de extensii care pot fi create n Dreamweaver, i am listat cteva dintre cele mai importante i mai folosite dintre ele. Extensia Spry Rating construiete astfel peste acestea i creeaz o extensie n sine, folosindu-se de urmtoarele tipuri de extensii Dreamweaver:

Commands (comenzi) Inspectors (inspectori) Objects (obiecte)
Definete apoi n fiiere XML configurrile pentru colorarea codului (Code Coloring), afieaz metodele disponibile i opiunile de configurare ale widgetului n Code Hints, localizeaz mesajele n XML-ul pentru Strings, adaug clasa widgetului la clasele comune n directorul Startup i definete metodele specifice acesteia n directorul Shared destinat pachetului Spry. Toate aceste componente i paii respectivi vor fi detaliai pe parcursul acestei lucrri.
17
5.2. Spry.DesignTime.Widget.Base
Toate widgeturile Spry folosite n Dreamweaver extind clasa Spry.DesignTime.Widget.Base. Aceast clas are metode comune tuturor widgeturilor de adugare/tergere a claselor pe care le are un element, de schimbare a id-ului acestuia, de modificare a opiunilor sale, de a seta tipul widgetului, de a ataa evenimente la care widgetul s rspund, de a returna ntreg elementul coninut de widget precum i de a verifica dac widgetul este valid sau nu. Un widget este valid atunci cnd structura sa este valid (adic este format din elementele necesare widgetului respectiv, fiecare element fiind specificat clar n documentaie). La iniializare, clasa primete ca parametri DOM-ul pe care opereaz, numele obiectului si elementul care va fi reprezentat de widget.
Spry.DesignTime.Widget.Base = function(dom, objName, element) { this.dom = dom; this.objName = objName; this.element = this.getElement(element); this.element_id = (typeof element == "string" || !element) element : element.id; };
5.3. Spry.DesignTime.Widget.Manager
Clasa Spry.DesignTime.Widget.Manager este cea care ine evidena tuturor widgeturilor de pe pagin, pentru a uura modificrile aplicate acestora. Clasa conine doar o referin la DOM-ul pe care operm, i un array de obiecte de tip Widgets. Metodele expuse de aceast clas sunt:
getManagerForDocument returneaz o referin la managerul widgeturilor
pentru documentul curent.

getWidget(type, id) returneaz widgetul de tip type i id id setWidget(type, id, widget) adaug n array un widget de tip type, cu
id-ul id, referit de obiectul widget

deleteWidget terge widgetul specificat getAllWidgets returneaz referina la array-ul ce conine toate widgeturile removeUnlistedWidgets terge o serie de widgeturi primite ca parametru
ntr-un array.
18
5.4. Spry.DesignTime.Editing.Utils
Clasa conine o colecie de funcii generale ce uureaz editarea widgetului.

canInsertWidget - metoda verific dac widgetul poate fi inserat findWidgetContainer returneaz containerul widgetului (nodul care l
conine)
getNewJSObjectName returneaz numele disponibil pentru obiectul nostru
javascript. Fiecare widget este iniializat n constructorul su, unde specificm id-ul widgetului i opiunile sale. Pentru un widget existent cu numele SpryRating1, metoda ne va returna pentru un nou widget, stringul SpryRating2.
5.5. Spry.DesignTime.Widget.Rating
Clasa Spry.DesignTime.Widget.Rating este folosit de inspectorul de proprieti pentru a uura modificarea diferitelor stri ale widgetului i pentru a efectua modificrile necesare n codul HTML al widgetului. Clasa extinde clasa de baz pentru widgeturi Spry.DesignTime.Widget.Base11 Pe lng starea default, iniial, widgetul mai expune 2 stri, rated i readonly. Rated este folosit atunci cnd votul a fost efectuat iar readonly cnd nu mai este permis votarea widgetului. Cele 2 stri ar putea fi reprezentate n felul urmtor:
Fig 5.1 starea votat
Fig 5.2 starea readonly Strile pot fi schimbate din csua de selecie Preview states din Property Inspector:
Fig 5.3 Selectbox cu strile widgetului Starea readonly este accesibil doar dac a fost bifat n prealabil opiunea Readonly. n cod, strile sunt definite ca elemente ale unui array, i anume arrayul widgetStates
this.widgetStates = { rated: { 11 vezi subcapitolul 5.2
19
displayName: dw.loadString("spry/widgets/Rating/rated state"), stateClass: "ratedClass", messageClass: "ratingRatedMsg", defaultMsgLocation: dw.loadString("spry/widgets/Rating/rated message"), availability: "rated" }, readOnly: { displayName: dw.loadString("spry/widgets/Rating/readonly state"), stateClass: "readonlyClass", messageClass: "ratingReadOnlyErrMsg", defaultMsgLocation: dw.loadString("spry/widgets/Rating/readonly message"), availability: "readOnly" }
DisplayName va fi numele afiat n selectbox, stateClass i messageClass sunt clasele css aplicate elementului n momentul n care o stare este activ (stateClass va fi ataat ntregului bloc de cod ce conine widgetul, iar messageClass doar tagului ce conine mesajul afiat), defaultMsgLocation va fi stringul localizat afiat de mesajul strii iar availability va defini in ce condiii este disponibil starea respectiv. Arrayul este definit i iniializat n constructorul widgetului, locul n care este apelat i constructorul widgetului de baz:
Spry.DesignTime.Widget.Base.call(this, dom, objName, element);
Widgetul primete ca parametrii referina la DOMul pe care operm, numele obiectului (widgetului), elementul HTML pe care inserm widgetul, i argumentele primite de acesta (idul tagului pe care l inserm i opiunile de configurare a widgetului: rating iniial, rating maxim, stare iniial, etc) Printre metodele de baz ale clasei Spry.DesignTime.Widget.Rating se numr:
getAssets creeaz i retuneaz un array de obiecte de tip Asset12. Acest array
va fi folosit pentru a copia fiierele folosite de widget n directorul de assets. Pe lng clasa de baz folosit n DesignTime, extensia folosete fiierele de baz incluse n frameworkul Spry. Aceste fiiere pot fi integrate ntr-o aplicaie folosind orice program sau editor text, inclusiv Notepad. Clasa DesignTime si celelalte extensii Dreamweaver sunt ns cele care fac integrarea widgetului n Dreamweaver. Astfel, pentru funcionarea widgetului n browser avem nevoie de Asseturile acestuia.
12 Prin Asset se nelege un fiier css, javascript sau imagini folosite de widgetul nostru.
20
Fig 5.4 relaionare widgetul Spry Rating i extensie Dreamweaver Spry Rating Widgetul este format dintr-un fiier CSS, un fiier Javascript i fiierele de imagine aferente steluelor de votare. Modul de populare al arrayului cu elemente de tip asset este urmtorul:
var assets = new Array(); var tempObj; tempObj = new Object(); tempObj.fullPath = "Shared/Spry/Widgets/Rating/SpryRating.js"; tempObj.file = "SpryRating.js"; tempObj.type = "javascript"; assets.push(tempObj); tempObj = new Object(); tempObj.fullPath = "Shared/Spry/Widgets/Rating/SpryRating.css"; tempObj.file = "SpryRating.css"; tempObj.type = "link"; assets.push(tempObj);
Crem astfel arrayul de asseturi i apoi l populm cu obiecte. Fiecare obiect trebuie s aib definit calea la fiier, numele fiierului i cel mai important, tipul acestuia. Tipul va fi folosit pentru crearea codului HTML corespunztor assetului. De exemplu, pentru un asset de tip link vom genera codul:
<link rel=stylesheet type=text/css href=SpryRating.css />
21
getTagSnippet metod static ce returneaz un string ce conine codul HTML
necesar widgetului. Funcia primete ca parametrii idul ce va fi setat widgetului i nodul pe care este facut selecia curent. Acest nod va determina poziia de inserare a noului widget. Va fi inserat si un input de tip text, pentru a permite afiarea/ votarea atunci cnd suportul pentru Javascript lipsete.
getNewWidgetConstructorSnippet metod static ce retuneaz codul
Javascript folosit pentru instanierea widgetului. Un widget Spry este format din 2 pri. Codul HTML aferent widgetului, i codul HTML pentru iniializarea acestuia. Primete ca parametrii idul widgetului i opiunile de configurare.
Spry.DesignTime.Widget.Rating.getNewWidgetConstructorSnippet = function(id, opts) { var strOptions = Spry.DesignTime.Widget.Rating.getObjectAsString(opts); var extra = (strOptions != "{}") ? (', ' + strOptions) : ""; return 'var ' + id + ' = new Spry.Widget.Rating("' + id + '"' + extra + ');'; };
addWidgetMessage metoda insereaz codul HTML aferent strii curente
selectate din Preview states. De exemplu, pentru mesajul de readOnly, va insera codul:
<span class="ratingReadOnlyErrMsg">ati votat deja</span>
getStatesLabels metoda returneaz textul ce va fi afiat fiecrei stri
disponibile, conform configuraiei widgetului curent. De exemplu, widgetul Spry Rating conine 3 stri: Iniial, Votat i ReadOnly. Starea readOnly i mesajul aferent acesteia este disponibil ns doar cnd este bifat opiunea Readonly in Property Inspector.
getStatesValues dac metoda de mai sus returna textele afiate de strile
disponibile, aceast metod returneaz valorile disponibile strilor widgetului.
isValidStructure verific dac structura unui widget este valid. De exemplu,
un widget Spry Rating nu ar fi valid n cazul n care nu ar avea nici o stelu de votare, fiecare stelu de votare fiind reprezentat de un tag span cu clasa ratingButton.
<span class="ratingButton"></span>
getObjectAsString metod static folosit pentru a serializa un obiect.
Primete ca parametru obiectul ce va fi serializat.
setOption, getOption, removeOption metode folosite pentru a prelua/seta
sau terge opiunile widgetului din constructorul Javascript. Exemplu: 22
<script type="text/javascript"> <!-var spryrating1 = new Spry.Widget.Rating("spryrating1", {ratingValue:2.5, moveNextKeyCode:39, movePrevKeyCode:37, doRatingKeyCode:32, readOnly:true}); //--> </script>
n cazul acesta avem setate 5 opiuni pe widgetul nostru: ratingValue: valoarea iniial a votrii, moveNextKeyCode: tasta folosit pentru a mri votul, movePrevKeyCode: tasta folosit pentru a scdea votul, doRatingKeyCode: tasta folosit pentru a vota, readOnly: dac widgetul nostru este n starea readOnly sau nu.
countStars metoda returneaz cte stelue poate s conin maxim un widget,
numrnd astfel cte spanuri cu clasa ratingButton gasete pe widgetul nostru.
updateTotalRating metoda modific valoarea iniial a votrii cu cea
specificat de noi in Property Inspector sau direct n cod.
showTabIndex pentru a permite votarea cu ajutorul tastaturii, fiecrei stelue i
va trebui ataat proprietatea tabindex alturi de o valoare numr ntreg, ce va defini ordinea de parcurgere a elementelor. Exemplu de stelu fr taste active:
<span class="ratingButton"></span>
Stelu cu taste activate:

<span class="ratingButton" tabindex="6"></span>
23
6.
INTEGRAREA I COMPONENTELE EXTENSIEI
Capitolul prezint modul de integrare i configurare al extensiei Spry Rating n modul de lucru Dreamweaver Stiletto. n prima parte vom prezenta modul de adugare al extensiei la o pagin i parametrii pe care i poate primi widgetul din Property Inspector sau din Code View, n seciunea de opiuni. Urmtoarea parte va prezenta diferitele pri componente ale acestei extensii i vom trece peste seciunile de cod mai importante.
6.1. Inserarea i modificarea extensiei Spry Rating

Inserarea extensiei se face din meniul de Obiecte, selectnd categoria de obiecte Spry.
Fig 6.1 Meniul de obiecte, aa cum apare in CS4 Din clasa de obiecte Spry se alege extensia Spry Rating.
Fig 6.2 Inserarea extensiei Spry Rating folosind meniul de obiecte clasic
24
Fig 6.3 Inserarea extensiei Spry Rating folosind noul meniu de obiecte
Prima dat cnd este inserat o extensie, va fi adugat codul HTML aferent extensiei:
<span id="spryrating1"> <input type="text" name="text1" id="text1"/> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingRatedMsg">Thank you for your vote!</span> </span>
codul javascript pentru instanierea obiectului design time:

<script type="text/javascript"> <!-var spryrating1 = new Spry.Widget.Rating("spryrating1"); //--> </script>
i codul necesar pentru introducerea asseturilor. Iniial, pn cnd documentul nu este salvat, Dreamweaver va folosi nite copii temporare:
<script src="file:///C|/Documents and Settings/toshiba/Application Data/ Adobe/Dreamweaver CS4/en_US/Configuration/Temp/Assets/eam2A.tmp/SpryRating.js" type="text/javascript"></script> <link href="file:///C|/Documents and Settings/toshiba/Application Data/Adobe/Dreamweaver CS4/en_US/Configuration/Temp/Assets/eam2A.tmp/SpryRating.css" rel="stylesheet" type="text/css" />
Odat ce documentul va fi salvat, vom fi informai de faptul c asseturile corespunztoare extensiei vor fi copiate n directorul SpryAssets. 25
Fig 6.4 Fereastra ne informeaz despre fiierele ce vor fi copiate Calea ctre fiierul Javascript i CSS va fi schimbat ctre cea relativ:
<script src="SpryAssets/SpryRating.js" type="text/javascript"></script> <link href="SpryAssets/SpryRating.css" rel="stylesheet" type="text/css" />
Fig 6.5 Modul n care apare extensia n fereastra Design View.
Editarea atributelor widgetului se face din Property Inspector.
Fig 6.6 Selectarea tastelor pentru votare in Property Inspector Numerele reprezint: 1. Numele widgetului, folosit pentru instanierea obiectului Spry Rating i pentru idul elementului HTML ce l va conine. 2. Csua Readonly, marcheaz dac votarea este permis sau nu pentru acest widget, setnd starea acestuia pe votat, i adugnd n csua de message (preview states, nr 5) un nou mesaj ce poate fi definit. 26
3. n cele 2 csue poate fi definit valoarea iniial a widgetului precum i numrul maxim de stelue ce pot fi votate. 4. Cele 3 csue de selecie permit selectarea tastelor folosite pentru a efectua votarea cu ajutorul tastaturii. 5. Csua de selecie a strilor permite definirea mesajelor pentru diferitele stri disponibile ale widgetului. Toate modificrile asupra acestor cmpuri vor fi adugate i n partea de opiuni a constructorului Javascript definit pe widget, iar unele chiar i pe copiii elementului HTML pe care este definit votarea (de exemplu, definirea tastelor de vot va aduga codul tastelor n constructorul Javascript dar va aduga i opiunile de tabindex13 pe fiecare stelu de votare)
6.2. Componentele extensiei

Extensia Spry Rating este constituit dintr-o serie de extensii Dreamweaver. Acestea au ca scop integrarea widgetului n modul de lucru pentru a uura modul n care utilizatorul lucreaz cu elementele componente ale acestui sistem. De exemplu, un widget Spry poate fi introdus att din meniul Objects > Spry ct i apelnd meniul Commands > Spry. Pentru aceast integrare sunt necesare scrierea a dou extensii, una care s rspund apelului venit din meniu i cealalt care s rspund apelului venit din meniul Objects. Pentru celelalte pri integrante ale unei extensii, cum ar fi Property Inspector, vor fi scrise alte extensii integrante. n funcie de ce va face extensia/widgetul nostru, vom folosi extensiile Dreamweaver care s rspund cerinelor noastre. Principalele extensii folosite de widgetul nostru sunt Comenzile, Obiectele i Inspectorii.
6.2.1.
Comenzi
Funciile utile expuse de fiierul de comenzi sunt folosite si de Obiectul Spry Rating pentru a returna codul corespunztor constructorului Javascript, elementului HTML ce va conine widgetul i pentru a returna lista de asseturi folosite de acesta. Comenzile Adobe Dreamweaver pot s execute orice modificare asupra documentului curent folosit de utilizator, asupra oricrui alt document deschis sau asupra oricrui document HTML de pe harddisk. Comenzile pot insera, terge sau rearanja taguri i atribute HTML, comentarii sau text. Comenzile sunt fiiere HTML. Seciunea body dintr-un fiier de comand poate conine
13 tabindex permite definirea unui index pe fiecare element HTML, permind astfel navigarea folosind tastele n ordinea acestui index
27
un formular HTML care s accepte opiuni pentru comanda noastr. Partea desemnat de head conine funciile Javascript care proceseaz datele primite din formular i controleaz modificrile care sunt aduse documentului. Fiierele folosite pentru a crea comenzi: Cale Configuration/Commands Configuration/Commands Fiier numecomanda.htm numecomanda.js Descriere specific interfaa conine funciile ce vor fi executate
6.2.1.1
Modul de lucru al comenzilor.
Cnd utilizatorul alege o opiune din meniul de comenzi, urmtoarele evenimente au loc:
Dreamweaver apeleaz funcia canAcceptCommand() pentru a determina dac
opiunea din meniu poate fi apelat sau nu. Dac funcia va returna fals, opiunea din meniu va aprea ca neapelabil, iar execuia se va opri. n caz adevrat, execuia va continua iar opiunea din meniu poate fi apelat.

Utilizatorul selecteaz o comand din meniu. Dreamweaver apeleaz funcia receiveArguments() pentru a procesa
argumentele pe care comanda le-ar putea primi. Apelul funciei este opional, i va fi executat doar n cazul n care funcia este definit n comanda noastr.
Dac e definit, Dreamweaver apeleaz funcia commandButtons() pentru a
determina ce butoane vor aprea n partea dreapt a ferestrei de dialog. Coninutul ferestrei de dialog este definit n formularul din seciunea body, aa cum am explicat mai sus, ns butoanele de control (de ex: Ok, Cancel) sunt definite de aceast funcie.
28
Fig 6.7 formular rendat ca i dialog (1. modul n care va aprea formularul definit n comand, 2. butoanele definite de funcie pentru aceast comand)
Dreamweaver scaneaz apoi fiierul html al comenzii dup un tag form. Dac e
gsit, Dreamweaver apeleaz funcia windowDimensions() pentru a redimensiona aceast fereastr. Dac funcia nu este definit, Dreamweaver va redimensiona automat csua de dialog.
Dac fiierul HTML al comenzii definete handlerul onLoad pe tagul body,
Dreamweaver va executa apoi acest cod. Urmtorii pai vor fi executai doar dac este definit un formular pentru comand.
Utilizatorul selecteaz opiunile pentru comand. Dreamweaver apeleaz
handlerele definite pe cmpurile existente.
Utilizatorul face apoi click pe una dintre opiunile definite de comanda
commandButtons()
Dreamweaver execut codul asociat. Csua de dialog rmne vizibil pn cnd
din comand este apelat funcia window.close(). Comenzile apar automat n meniul de comenzi. Pentru a preveni apariia unei comenzi n meniu, va trebui adugat urmtoarea linie de cod pe prima linie a fiierului HTML.  Comenzile pot fi apelate i din alte extensii folosind funcia dw.runCommand()
29
6.2.1.2
Comanda Spry Rating
Fiierul HTML al comenzii arat n felul urmtor:

 <html xmlns:mmstring="http://www.macromedia.com/schemes/data/string/"> <head>  <title><MMString:LoadString id="spry/widgets/Rating/title" /></title> <script type="text/javascript" src="../Shared/Spry/DesignTime/WidgetBase.js" ></script> <script type="text/javascript" src="../Shared/Spry/Widgets/Rating/DesignTime/SpryRatingDesignTime.js" ></script> <script type="text/javascript" src="../Shared/Common/Scripts/AssetInfoClass.js"></script> <script type="text/javascript" src="../Shared/Common/Scripts/dwscripts.js"></script> <script type="text/javascript" src="../Shared/MM/Scripts/CMN/TemplateUtils.js"></script> <script type="text/javascript" src="../Shared/Spry/DesignTime/EditingUtils.js"></script> <script type="text/javascript" src="../Objects/Forms/formInsert.js"></script> <script type="text/javascript" src="SpryRating.js"></script> </head> <body onLoad="createWidget()"> </body> </html>
Prima linie de cod nu permite adugarea automat a acestei comenzi n meniul Commands al aplicaiei. Este definit apoi namespaceul mmstring folosit pentru manipularea stringurilor folosite pentru traducerea elementelor widgetului. Seciunea <MMString:LoadString id="spry/widgets/Rating/title" /> ncarc n titlul comenzii textul reprezentat de irul cu id spry/widgets/Rating/title. Fiierul
SpryRatingStrings.xml14 definete toate stringurile folosite de acest widget. Urmeaz apoi inserarea diferitelor scripturi folosite de extensia noastr. Deoarece vom crea nu doar un widget visual, ci i un obiect care va reprezenta widgetul n DesignTime i care ne va permite o uoar manipulare a acestuia, vom include scriptul SpryRatingDesignTime.js. Din moment ce clasa Spry.Widget.Rating extinde clasa de baz a widgeturilor, o vom include i pe aceasta din fiierul WidgetBase.js.
14 De regul toate stringurile folosite de extensiile Dreamweaver sunt definite n fiiere XML salvate n directorul Configuration/Strings
30
AssetInfoClass.js este folosit pentru adugarea asseturilor folosite de extensie. Pe lng celelalte scripturi comune folosite pentru a genera formulare de inserare precum i accesul funciilor folosite des (dwscripts.js), ultimul script inserat va fi cel n care avem logica extensiei, SpryRating.js. La ncrcarea comenzii, Dreamweaver va apela funcia createWidget(), definit n fiierul SpryRating.js. Fiierul Javascript al comenzii arat n felul urmtor:
function createWidget() { // codul comenzii } function createWidgetStr() { return RETURN_TAG; } function getScriptStr() { return SCRIPT_STR; } function getAssetList() { return ASSET_LIST; } function getWidgetID() { return ID; }
Metodele comenzii nu vor fi expuse detaliat deoarece aceast comand nu implementeaz nici unul dintre apelurile enumerate mai sus, n afar de handlerul onLoad pe tagul body. Metoda apelat la onLoad, createWidget(), va returna n cteva variabile specifice comenzii codul pentru constructorul widgetului, codul HTML al widgetului, lista de asseturi si idul widgetului. Aceste date vor fi apelate i de Obiectul extensiei, i pot fi apelate de orice alt extensie.
6.2.2.
Obiecte
Scopul obiectelor este de a insera anumite iruri de cod n documentul utilizatorului. Un obiect apare ntr-un tab pe bara de Insert sau n meniul Insert cnd obiectul este stocat n directorul Configuration/Objects. Adugarea unui nou obiect const n crearea unui subdirector n locaia menionat anterior, precum i n editarea fiierului insertbar.xml care
31
definete categoriile ce apar n taburile de Inserare. Extensiile obiect au 3 componente:

Fiierul obiect, care definete ce va fi inserat n document. O imagine de 18x18 pixeli care va reprezenta vizual obiectul n bara de Inserare.
Fig 6.8 Obiectul Hyperlink pe bara de Inserare, categoria Common
Fiierul insertbar.xml care definete unde va aprea obiectul pe bara de Inserare.
6.2.2.1
Modul de lucru al obiectelor
Cnd utilizatorul adaug un nou obiect, urmtoarele evenimente au loc:
Dreamweaver apeleaz funcia canInsertObject() pentru a determina dac
putem introduce obiectul n documentul curent.
Fiierul HTML al obiectului este scanat dup tagul form. Dac un formular este
gsit, Dreamweaver apeleaz funcia windowDimensions(), dac este definit, pentru a redimensiona fereastra. Dac nu exist nici un formular definit, acest pas este srit.
Dac este afiat o csu de dialog, utilizatorul poate introduce datele necesare
i apoi alege OK.
Este apelat acum funcia objectTag() i valoarea returnat de aceast
funcie este inserat n documentul curent la sfritul seleciei curente (selecia curent nu este nlocuit).
Dac funcia objectTag() nu este gsit, Dreamweaver caut funcia
insertObject() i o apeleaz pe aceasta n schimb.
6.2.2.2
Obiectul Spry Rating
Ca orice extensie obiect, obiectul Spry Rating este format din 3 fiiere: o imagine, fiierul HTML corespunztor obiectului i fiierul Javascript corespunztor codului executat de obiect. Fiierul HTML al obiectului arat n felul urmtor:
 <html xmlns:MMString="http://www.macromedia.com/schemes/data/string/"> <head> <title><MMString:LoadString id="spry/widgets/Rating/title" /></title> <script type="text/javascript" src="../../Shared/Common/Scripts/dwscripts.js"></script>
32
<script type="text/javascript" src="../../Shared/MM/Scripts/CMN/TemplateUtils.js"></script> <script type="text/javascript" src="../../Shared/Spry/DesignTime/EditingUtils.js"></script> <script type="text/javascript" src="../../Shared/Spry/DesignTime/WidgetBase.js"></script> <script type="text/javascript" src="../../Shared/Spry/Widgets/Rating/DesignTime/SpryRatingDesignTime.js"> </script> <script type="text/javascript" src="SpryRating.js"></script> </head> <body> </body> </html>
Practic sunt ncrcate aceleai fiiere Javascript folosite pentru Editare i crearea widgeturilor ca si n cazul extensiilor comenzi. La final este ncrcat fiierul Javascript corespunztor extensiei obiect:
function canInsertObject(){ var dom = dw.getDocumentDOM(); var retVal = true; retVal = (dom.getIsLibraryDocument() == false); if( retVal ) { retVal = Spry.DesignTime.Editing.Utils.canInsertWidget( dom, "Spry.Widget.Rating"); } return retVal; } function isDOMRequired() { return true; } function insertObject() { var dom = dreamweaver.getDocumentDOM(); var selNode = dom.getSelectedNode(); if( !Spry.DesignTime.Editing.Utils.canInsertWidget(dom) ) { return; } var cmdFile = dreamweaver.getConfigurationPath() + "/Commands/SpryRating.htm"; var cmdDOM = dreamweaver.getDocumentDOM(cmdFile); dreamweaver.popupCommand("SpryRating.htm");
33
var assetList = cmdDOM.parentWindow.getAssetList(); var scriptStr = cmdDOM.parentWindow.getScriptStr(); var retStr = cmdDOM.parentWindow.createWidgetStr(); if( retStr ) { if (assetList && assetList.length) dom.copyAssets(assetList); if (scriptStr) dom.addJavaScript(scriptStr, false); dom.insertHTML(retStr, false); } }
Funcia canInsertObject() verific dac obiectul poate fi inserat n documentul curent. Atta timp ct documentul curent nu este un document librrie i putem insera un widget de tip Spry.Widget.Rating, metoda ne va permite s apelm celelalte metode implementate n API-ul extensiilor obiect din Dreamweaver. Metoda este apelat cnd utilizatorul dorete s insereze un obiect din Insertbar. Metoda isDOMRequired() specific dac obiectul are nevoie de un DOM valid pentru a putea efectua inserarea. Dac funcia returneaz adevrat, Dreamweaver sincronizeaz vederile de Cod i Design ale documentului nainte de a executa comenzile asociate. Urmtoarea metod API apelat este insertObject(). Practic este metod care execut tot codul necesar widgetului nostru. Prima dat este generat o referin la DOMul documentului pe care lucrm, apoi lum nodul curent selectat. Executm apoi extensia comand definit la primul pas, i apelate funciile utile din fiierul de comand, funcii ce returneaz codul HTML i Javascript necesar widgetului, precum i lista de asseturi necesare acestuia. Din moment ce i extensia obiect execut acelai cod ca i extensia comand, este logic alegerea de a folosi codul din comand n ambele extensii:
var assetList = cmdDOM.parentWindow.getAssetList(); var scriptStr = cmdDOM.parentWindow.getScriptStr(); var retStr = cmdDOM.parentWindow.createWidgetStr();
Urmeaz apoi inserarea codului pentru widget:

if( retStr ) { if (assetList && assetList.length) dom.copyAssets(assetList);
34
if (scriptStr) dom.addJavaScript(scriptStr, false); dom.insertHTML(retStr, false); }
Funciile objectTag() i insertObject() se exclud reciproc. Dac exist una dintre ele, cealalt nu mai trebuie definit. Care este diferena ntre ele i cnd ar trebui folosite? Ambele sunt folosite pentru a introduce cod n documentul utilizatorului. objectTag() lucreaz ns pe selecia curent i permite introducerea codului dup nodul selectat. insertObject() ar trebui folosit ns n urmtoarele cazuri:

Cnd dorim s introducem cod n mai multe poriuni Cnd dorim s introducem cod n alt zon dect dup cea selectat Cnd dorim s validm datele introduse nainte de a le afia
n cazul curent am folosit insertObject() tocmai datorit faptului c obiectul introduce cod n mai multe zone, att cod HTML cnd creeaz widgetul, ct i cod Javascript cnd instaniem widgetul i cnd definim legtura la asseturile acestuia.
6.2.3.
Translatori
Translatorii traduc cod markup specializat cod PHP, JSP, CFML, etc n cod ce poate fi citit i afiat de Dreamweaver. n Dreamweaver pot fi translatate atribute ale tagurilor sau chiar taguri i blocuri de cod ntregi.Toi translatorii sunt fiiere HTML. Tagurile sau blocurile de cod translatate trebuie s fie definite n zone blocate pentru a nu afecta codul original. Atributele translatate nu au nevoie de aceste zone blocate ns, ceea ce uureaz cu mult inspectarea lor.
6.2.3.1
Modul de lucru al translatorilor
Dreamweaver trateaz toi translatorii la fel, indiferent dac translateaz taguri ntregi sau doar atribute. La pornire, Dreamweaver citete toate fiierele din directorul Configuration/Translators i apeleaz funcia getTranslatorInfo() pentru a obine informaii despre translator. Dreamweaver ignor fiierele translator care nu au aceast funcie definit. Dreamweaver apeleaz apoi funcia translateMarkup() de fiecare dat cnd utilizatorul adaug sau modific coninutul existent. Cazurile n care este apelat aceast funcie din translatori sunt urmtoarele:
deschiderea unui fiier n Dreamweaver 35
trecere la Design View din Code View schimbarea proprietilor unui obiect n documentul curent inserarea unui obiect (din Insertbar) rencrcarea documentului curent aplicarea unui template documentului adaug coninut folosind clipboardul sau drag and drop invoc o comand, behavior, server behavior, inspector de proprieti sau alt
extensie care seteaz proprietatea innerHTML sau outerHTML al oricrui tag din documentul curent.
6.2.3.2
Translatorul de Spry Widgets
Fiierul HTML folosit pentru translatorii widgeturilor este SpryWidget.htm din directorul Configuration\Translators. Pentru toate widgeturile Spry este definit un translator comun, de aceea nu exist un fiier SpryRating specific acestui widget. Acesta conine n seciunea head i logica extensiei, de aceea nu este nevoie de inserarea unui fiier Javascript extern. Codul care ne intereseaz este acesta:
<script type="text/javascript"> //expresie regulata pentru a gasi toate widgeturile var spryWidgetIdRegExp = /(?:var)?\s+?(\w+?)\s*?=\s*?new\s+? (Spry\.Widget\.\w+?)\s*?$\s*?['"]([^"']+)['"](\s|.)*?$\s*;/g; var spryWidgetConstructors = MM.SPRY_WidgetConstructors; function translateDOM( dom, sourceStr ) { if( typeof dom == 'undefined' ) { return; } translateWidgetsInDOM(dom, spryWidgetConstructors); } function getTranslatorInfo() { returnArray = new Array(7); returnArray[0] returnArray[1] returnArray[2] returnArray[3] returnArray[4] = = = = = "SPRY_WIDGET" "Spry Widget" "0" "1" "Spry.Widget." sourceStr, spryWidgetIdRegExp,
36
returnArray[5] = "byString" returnArray[6] = "50" return returnArray; } // getTranslatorInfo() </script>
Iniial Dreamweaver apeleaz funcia getTranslatorInfo(). Aceast funcie ofer informaii legate de translator i de fiierele pe care opereaz acesta. Funcia returneaz un array n care elementele trebuie s apar n ordinea urmtoare, iar fiecare poziie reprezint:

translatorClass - definete n mod unic translatorul. title descrie translatorul n maxim 40 de caractere nExtensions specific numrul de extensii de fiiere pe care ruleaz. Dac e
zero, nseamn c vom rula translatorul pe orice tip de fiier. n cazul acesta, nRegExps este urmtorul element din array.
extension specific o extensie de fiier (ex: htm, php) pe care acest
translator ruleaz. Acest element ar trebui s conin un array egal cu numrul de nExtensions definit precedent.
nRegExps specific numrul de expresii regulate care vor fi rulate. Dac
valoarea acestei variabile e zero, runDefault e urmtorul element definit n array.
regExps specific o expresie regulat ce va fi rulat pe expresia noastr.
Arrayul ar trebui s conin acelai numr de elemente ca cel specificat de nRegExps n pasul precedent.
runDefault specific cnd va fi rulat translatorul. Urmtoarele valori sunt
posibile: 1. allFiles translatorul este executat ntotdeauna 2. noFiles translatorul nu se execut niciodat 3. byExtension se execut doar la prezena fiierelor care au una dintre extensiile definite mai sus. 4. byExpression se execut la ntlnirea unora dintre extensiile regulate definite mai sus 5. byString se execut dac translatorul ntlnete un anumit ir definit.
priority specific prioritatea cu care acest translator ruleaz. De exemplu,
pe tagul img, de reprezentare a unei imagini, pot fi scrise numeroare translatoare, n funcie de ntlnirea anumitor atribute. Prioritatea va determina care dintre translatorii definii pentru acel tag va executa translatarea. 0 este cea mai mare prioritate, iar 100
37
cea mai mic. Pentru widgetul nostru, codul va fi interpretat n felul urmtor: Clasa translatorului
returnArray[0] = "SPRY_WIDGET"
titlul translatorului
returnArray[1] = "Spry Widget"
numrul de extensii pe care rulm widgetul (toate)

returnArray[2] = "0"
numrul de expresii regulate verificate de translator

verificm existena stringului Spry.Widget

returnArray[4] = "Spry.Widget."
verificarea e facut dup existena irului

returnArray[5] = "byString"
prioritatea translatorului (medie)

Un exemplu simplu i practic de creare i reprezentare al unui translator l-ar putea reprezenta o extensie care integreaz un anumit gadget Google. Gadgeturile Google sunt n esen asemntoare widgeturilor Spry sau widgeturilor oferite de alte aplicaii/frameworkuri. Difer numele ns funcionarea n esen este aceeai. Pentru nceput, putem lua ca exemplu gadgetul de Curs valutar.
Fig 6.9 Gadgetul Google Curs Valutar aa cum arat pe o pagin de internet Codul HTML folosit pentru a renda acest gadget este urmtorul:
<script src="http://gmodules.com/ig/ifr? url=http://andreiterente.googlepages.com/cursvalutar.xml&synd=open& w=318&h=68&title=Curs+Valutar&border=%23ffffff%7C3px %2C1px+solid+%23999999&output=js"></script>
Intervine ns urmtoarea problem. Gadgetul este afiat folosind doar cod Javascript extern, iar reprezentarea are loc cnd pagina este vizualizat n browser. Dreamweaver CS4 aduce o nou vedere, Live view ce permite i executarea codului Javascript din pagin i preluarea rezultatelor n direct. n timpul editrii noi folosim ns vederile de Cod sau Design. n vederea de Cod vom vedea codul Javascript. Ce vom vedea ns n vederea de Design? Prin scrierea unui translator pentru aceast extensie, putem arta o imagine care s reprezinte gadgetul n vederea Design. Am putea folosi chiar urmtoarea imagine: 38
Fig 6.10 posibil imagine pentru extensie, n vederea Design Astfel putem reprezenta vizual extensia noastr, i putem uura i modul n care aceasta este selectat. Codul translatat este interpretat de Dreamweaver, ns nu este afiat n codul paginii, deoarece el este procesat transparent de aplicaie. Este reprezentat doar n mod vizual, i doar n interiorul aplicaiei, pentru a facilita lucrul cu extensiile oferite de aceasta. ntreg procesul de traducere este executat de funcia API translateMarkup(), care va returna n final stringul translatat, care va fi apoi reprezentat de Dreamweaver. n exemplul de mai sus funcia ar procesa stringul referit de codul Javascript i ar returna urmtorul cod: <img src=cale_la_fisier/imagine_curs_valutar.gif width=200 height=90 alt=gadget Gogle Curs Valutar /> Codul returnat nu va fi prezent n sursa documentului ci doar va fi interpretat de Dreamweaver. Schimbarea atributelor gadgetului, cum ar fi titlul, tipul bordurii, limea i lungimea vor putea fi schimbate cu ajutorul Inspectorului de Proprieti. n paii urmatori vom prezenta ce este acesta i modul n care este integrat de extensia Spry Rating.
6.2.4.
Inspectorul de proprieti
Inspectorul de proprieti este cel care permite editarea atributelor diferitelor blocuri de cod sau al tagurilor din documentul curent. Prescurtat de obicei PI (Property Inspector), Inspectorul de proprieti este una dintre cele mai utilizate extensii n lucrul cu documente. Dreamweaver vine cu o suit de PI integrai ce permit setarea proprietilor pentru majoritatea tagurilor HTML standard. Aceti inspectori sunt parte integrant a sistemului, i nu vor putea fi gsii n directorul Configuration/Inspectors, unde sunt definii inspectorii customizai, ns pot fi suprascrii dac definim inspectori pe tagurile standard. Prima linie ntlnit n inspectori este reprezentat de un comentariu n urmtorul format:
<!-tag : tagNameOrKeyword, priority exactOrWithin, hline, vline, serverModel--> : 1to10, selection :
unde:
tagNameOrKeyword reprezint tagul ce va fi inspectat, sau urmtoarele cuvinte
cheie: *COMMENT* (pentru comentarii), *LOCKED* (pentru regiuni blocate), sau *ASP* (pentru taguri ASP)] 39
1to10 reprezint prioritatea inspectorului. Mai muli inspectori pot fi definii
pentru aceleai taguri, aa c trebuie s tim care inspector se va executa n final. 1 e valoarea cea mai mic, iar 10 nseamn c are prioritate maxim.
exactOrWithin indic dac trebuie s fie respectat selecia ntocmai sau
poate s conin doar o parte din ea. Exemplu, o cutare exact pe tagul IMG va returna elementul n PI doar dac avem selectat acest tag. O selecie doar pe IM sau MG nu va executa inspectorul. O selecie parial ns ar returna adevrat.
hline (opional) genereaz introducerea unei linii orizontale n PI ntre partea
de sus i cea de jos a acestuia.
vline (opional) genereaz o linie vertical ntre numele tagului i restul
proprietilor din PI.
serverModel (opional) indic modelul de server folosit de PI. Dac acesta
nu corespunde cu modelul server folosit de documentul curent, atunci PI nu se execut. De exemplu, dac lucrm pe un document PHP i serverModel e definit ca ASP, PI nu se va executa. Urmtorul exemplu definete comentariul pentru un inspector pe tagul customizat MYSQL, cu o verificare exact pe selecie, de prioritate mare, definit pe server model PHP.
<!-tag:MYSQL, serverModel:PHP--> priority:8, selection:exact,hline,vline,
6.2.4.1
Modul de funcionare al PI
La pornire, Dreamweaver citete prima linie din fiecare inspector, i anume comentariul ce definete regulile de inspectare. Cnd utilizatorul face o selecie pe documentul curent, sau mut cursorul pe alt poziie, urmtoarele evenimente au loc:

Dreamweaver caut inspectorii care au tipul de selecie within. Dac gsete aa ceva, va cuta inspectorii cu tip de selecie within care
corespund tagului curent selectat. Dac nu gsete astfel de inspectori, i va cuta pe cei cu selecia de tip exact.
Pentru primul tag gsit care are mai muli inspectori, Dreamweaver apeleaz
funcia API canInspectSelection(). Dac apelul returneaz fals, Dreamweaver elimin acest inspector dintre candidai.
Dac rmn mai muli candidai i dup acest apel, Dreamweaver sorteaz
inspectorii dup prioritate.
Dac i dup aceast selecie rmn inspectori multipli cu aceeai prioritate,
Dreamweaver i sorteaz alfabetic.
Este apelat apoi funcia inspectSelection() pentru preluarea informaiilor 40
corespunztoare seleciei curente.
Sunt executate apoi evenimentele ataate controalelor definite n PI. De
exemplu, pentru schimbarea numelui, este folosit un input de tip text, cruia i putem ataa o metod la evenimentul onChange.
6.2.4.2
PI pentru Spry Rating
Fiierele Inspectorului se gsesc n Configuration/Inspectors, i sunt reprezentate de: Cale Configuration/Inspectors Configuration/Inspectors Configuration/Inspectors Fiier spry_rating.htm spry_rating.js spry_rating.png Descriere formular ce definete PI codul folosit de extensia PI imaginea folosit n PI
Fiierul HTML conine codul markup ce formeaz formularul afiat de Property Inspector. Acesta permite modificarea proprietilor extensiei Spry Rating prin inferfaa sa simpl i intuitiv, dndu-ne acces la majoritatea opiunilor de configurare a extensiei.
Fig 6.11 PI deschis n browser Formularul HTML este apoi interpretat i rendat de Dreamweaver. Pentru fiecare element al formularului, este executat codul ataat evenimentului controlului pe care lucrm. n general se execut funcii la evenimentul onChange(), majoritatea controalelor fiind csue de text.
Fig 6.12 extensia PI pentru Spry Rating n Dreamweaver Pe lng formularul rendat, fiierul HTML include i referinele Javascript la clasele comune folosite de extensia noastr, inclusiv WidgetBase.js, WidgetManager.js i
41
SpryRatingDesignTime.js. Partea care face toat munca extensiei este ns fiierul Javascript, spry_rating.js: Acesta expune metodele tipice15 unei astfel de extensii, canInspectSelection(), inspectSelection(), precum i alte metode customizate necesare extensiei Spry Rating. Primele linii sunt reprezentate ns de variabilele globale utilizate pentru a prelua informaiile din formularul PI. Are sens din punct de vedere funcional i al memoriei s definim variabile globale pentru extensie, deoarece la un moment dat va fi selectat i afiat un singur inspector, chiar dac pe pagina noastr avem de exemplu 10 widgeturi de votare. Tocmai din acest motiv nu vom defini variabile locale pentru orice extensie pentru a prelua aceste date. // ine minte idul widgetului (idul elementului HTML ce conine widgetul)
var WIDGET_ID;
// referin la csua de bifare Readonly

var READONLY;
// referin la csua text ce conine valoarea curent a votrii

var RATING_VALUE;
// referin la csua text ce conine valoarea maxim ce poate fi votat

var NUMBER_OF_STARS;
// referin la csua de selecie pentru tastele care execut votarea

var KB_DO_RATING;
// referin la csua de selecie pentru tastele care mresc valoarea votrii

var KB_RATING_UP;
// referin la csua de selecie pentru tastele care micoreaz valoarea votrii

var KB_RATING_DOWN;
// valoarea numeric a numrului de stelue posibile

var numberOfStarsValue;
// valoarea votrii
var ratingValue;
// valoarea tastei selectate, folosit pt toate cele 3 csue de taste succesiv

var kbRateVal;
Variabilele sunt iniializate n funcia initializeUI():

function initializeUI() { WIDGET_ID = dwscripts.findDOMObject("widgetId"); READONLY = new CheckBox("", "readOnly"); READONLY.initializeUI(); WIDGET_STATES = new ListControl("widgetStates", null, true); RATING_VALUE = dwscripts.findDOMObject("ratingValue"); NUMBER_OF_STARS = dwscripts.findDOMObject("numberOfStars"); KB_DO_RATING = new ListControl("kbDoRating", null, true); KB_RATING_UP = new ListControl("kbRatingUp", null, true); KB_RATING_DOWN = new ListControl("kbRatingDown", null, true); WIDGET_ID.value = ""; 15 vezi subcapitolul 6.2.4.1 Modul de funcionare al PI
42
Funcia canInspectSelection() a fost descris mai sus. Ea este prima funcie API apelat pe un inspector, fiind apelat de fiecare dat cnd selecia n documentul curent este schimbat. n funcie de rezultatul returnat de aceast funcie, vom determina dac inspectorul curent poate procesa elementul selectat sau nu. Pentru extensia Spry Rating, funcia canInspectSelection() arat n felul urmtor:
function canInspectSelection() { var bCanInspectSelection = false; var dom = dw.getDocumentDOM(); var selectedNode = dom.getSelectedNode(true, false, true); var attr; if( selectedNode && selectedNode.getTranslatedAttribute ) { attr = selectedNode.getTranslatedAttribute('Spry.Widget.Rating'); } if( attr && attr.length > 0 ) { bCanInspectSelection = true; var widgetMgr = Spry.DesignTime.Widget.Manager.getManagerForDocument(dom); if( !widgetMgr.getWidget('Spry.Widget.Rating', selectedNode.id ) ) { dom.runTranslator("Spry Widget"); if (!widgetMgr.getWidget('Spry.Widget.Rating', selectedNode.id )) { bCanInspectSelection = false; } } } return bCanInspectSelection; }
Iniial inspecia noastr ia nodul curent selectat n document. Dac acesta prezint atributul translatat Spry.Widget.Rating atunci inspecia noastr poate fi valid. Apelm apoi widget manager pentru documentul curent, i vedem dac acesta conine n lista sa i widgetul nostru (widget manager conine o list cu toate widgeturile Spry de pe pagina curent). Dac widgetul nu face parte din list, atunci probabil c widget managerul nu este sincronizat cu noile modificri, iar selecia noastr nu mai este valid, widgetul fiind probabil ters ntre timp. n funcie de validitatea acestei selecii, funcia returneaz dac poate fi apelat extensia PI pe nodul curent. Dac inspecia este valid, este executat apoi funcia inspectSelection().
43
function inspectSelection() { initializeUI(); var dom = dw.getDocumentDOM(); var selectedNode = dom.getSelectedNode(true, false, true); if (!canInspectSelection()) { return; } var containerId = selectedNode.id; var widgetMgr = Spry.DesignTime.Widget.Manager.getManagerForDocument(dom); var widgetObj = widgetMgr.getWidget('Spry.Widget.Rating', containerId ); WIDGET_ID.value = containerId; if( !widgetObj || !widgetObj.isValidStructure() ) { displayTopLayerErrorMessage(dw.loadString("spry/widget/alert/broken structure")); return; } clearTopLayerErrorMessage(); widgetObj.refresh(); if( widgetObj.opts ) { ratingValue = (typeof widgetObj.opts.ratingValue == "undefined") ? "" : dwscripts.trim(widgetObj.opts.ratingValue.toString()); RATING_VALUE.value = ratingValue; WIDGET_STATES.setAll(widgetObj.getStatesLabels(), widgetObj.getStatesValues()); WIDGET_STATES.pickValue(widgetObj.getDisplayedState()); kbRateVal = (typeof widgetObj.opts.doRatingKeyCode == "undefined") ? "" : dwscripts.trim(widgetObj.opts.doRatingKeyCode.toString()); KB_DO_RATING.pickValue(kbRateVal); kbRateVal = (typeof widgetObj.opts.moveNextKeyCode == "undefined") ? "" : dwscripts.trim(widgetObj.opts.moveNextKeyCode.toString()); KB_RATING_UP.pickValue(kbRateVal); kbRateVal = (typeof widgetObj.opts.movePrevKeyCode == "undefined") ? "" : dwscripts.trim(widgetObj.opts.movePrevKeyCode.toString()); KB_RATING_DOWN.pickValue(kbRateVal); KB_DO_RATING.getValue()); } else
44
{ RATING_VALUE.value = ""; } READONLY.checkBox.checked = (widgetObj.getOption("readOnly", true)); numberOfStarsValue = widgetObj.countStars(); NUMBER_OF_STARS.value = numberOfStarsValue; }
Toate variabilele extensiei sunt initializate n primul pas, la apelul funciei initializeUI(). Urmeaz apoi selecia nodului curent, i returnarea widgetului corespunztor acestui nod. Dup ce returnm widgetul corespunztor, este selectat partea de opiuni a acestuia, i anume lista de opiuni definit n constructorul Javascript al widgetului.
<script type="text/javascript"> var rate = new Spry.Widget.Rating("spryrating1", {readOnly:true}); </script>
Codul de mai sus expunde o singur opiune, i anume interzice votarea. n acest caz doar opiunea Readonly va avea valoarea opiunii, restul cmpurilor fiind populate cu valorile standard. Relaia este n ambele sensuri, astfel c orice modificare adus n PI se va reflecta i n constructorul Javascript al widgetului. Urmtorul exemplu grafic va limpezi i mai mult modul de interaciune ntre PI i widget:
Fig 6.13 relaia ntre PI i cod
Dup cum se vede n imagine, orice modificare adus este vizibil n ambele sensuri. Modificrile nu sunt aduse doar codului Javascript, ci si codului HTML de reprezentare al elementului. Bifarea opiunii Readonly va duce de exemplu i la adugarea urmtorului cod HTML n widget:
45
<span class="ratingReadOnlyErrMsg">Rating is disabled</span>
cod ce este afiat imediat i n vederea Design. Cum trimite ns formularul schimbrile necesare pentru cod? Prin intermediul evenimentelor ataate controalelor folosite.
<input type="text" name="ratingValue" class="min_maxEditBox" onBlur="updateTag('ratingValue')" id="ratingValue" />
Codul de mai sus descrie modul n care PI pentru cmpul ratingValue trimite noua valoare Inspectorului, apelnd funcia updateTag, atunci cnd controlul pierde focusul (evenimentul onBlur). Funcia updateTag este cea mai folosit funcie din Inspector, i este apelat de toate controalele acestuia. Fiind cea mai mare funcie din codul Inspectorului, voi lista doar o parte din ea, i un exemplu de procesare a controlului primit.
function updateTag(attrib) { // preluare obiect widget in widgetObj if (attrib) { switch (attrib) { case "widgetId": { var newId = WIDGET_ID.value; if( newId == containerId ) return; if( newId.length == 0 ) { alert(dw.loadString("spry/widget/alert/need unique id")); return; } if( dom.getElementById(newId) ) { alert(dw.loadString("spry/widget/alert/id already exists")); return; } if( !dom.isValidIDValue(newId) ) { alert(dw.loadString("spry/widget/alert/id is invalid")); return; } widgetObj.updateId(newId); widgetMgr.setWidget('Spry.Widget.Rating', newId, widgetObj ); } }
46
} }
Exemplul prezint modul de schimbare al idului pentru widgetul curent. n widgetObj va fi stocat o referin la obiectul curent selectat. Codul pentru aceast operaiune a fost prezentat de cteva ori n lucrare, aa c vom trece peste partea aceasta. Fiecare cmp ce apeleaz funcia updateTag, trimite ca parametru numele cmpului. n funcie de ce cmp apeleaz funcia vom ti ce proprietate s modificm.
Fig 6.14 apelare funcia updateTag pe evenimentul onBlur Figura 6.14 prezint modul n care apelul acestei funcii realizeaz schimbarea idului pentru elementul HTML al widgetului i pentru constructorul Javascript al acestuia. Porning de la exemplul de cod prezentat mai sus, iniial se preia noua valoare a widgetului din cmpul definit pentru id. n cazul n care elementul cu acel id exist sau idul nu e valid, vom afia o eroare i vom iei din funcie (dom.getElementById(newId) i !
dom.isValidIDValue(newId)). Dac noul id e n regul, vom schimba valoarea pentru toate elementele componente ale acestuia, i vom modifica valoarea acestuia i n widget manager:
widgetObj.updateId(newId); widgetMgr.setWidget('Spry.Widget.Rating', newId, widgetObj );
Modificarea valorilor celorlalte controale se face tot n aceast funcie, n acelai apel switch, ns n cazul celorlalte opiuni vor fi schimbate nu doar valorile HTML ale widgetului, ci i opiunile definite n constructorul Javascript.
47
6.2.5.
Alte extensii
Pe lng extensiile importante dezbtute n rndurile precedente, extensia Spry Rating se mai folosete i de alte extensii Dreamweaver pentru o integrare complet: Code coloring - Code coloring permite definirea culorilor i a cuvintelor cheie care vor fi evideniate, atunci cnd inserm o extensie.
Fig 6.15 code coloring pentru diferite widgeturi Coninutul extensiei de Code coloring este reprezentat de un fiier XML. n cazul extensiei Spry Rating acesta arat n felul urmtor:
<codeColoring xmlns:MMString="http://www.macromedia.com/schemes/data/string/"> <scheme id="JavaScript"> <classlibrary name="SpryRatingClasses" id="CodeColor_JavascriptSpryClasses"> <class>Spry.Widget.Rating</class> <class>Spry.Widget.Rating.addLoadListener</class> </classlibrary> </scheme> </codeColoring>
Code Hints extensia permite definirea de code hints pentru widgeturile/extensiile noastre. Asemeni extensiei de code coloring, este reprezentat de un fiier de configurare XML.
Fig 6.16 Code hints pt Spry Rating Strings permite extinderea irurilor folosite de extensia noastr cu suport pentru localizare. Ca i celelalte 2 extensii, configurarea se face ntr-un fiier XML pe care realizm traducerea irurilor folosite. Exemplu:
<strings> <string id="spry/widgets/Rating/title" value="Spry Rating"/> <string id="spry/widgets/Rating/readonly message"
48
value="Rating is disabled" /> <string id="spry/widgets/Rating/voted message" value="Thank you for voting!" /> <string id="spry/widgets/Rating/rated state" value="Vote complete" /> <string id="spry/widgets/Rating/readonly state" value="Readonly" /> </strings>
6.3. mpachetarea i distribuia extensiei Spry Rating

Odat ce o extensie este terminat, aceasta trebuie mpachetat pentru a putea fi folosit cu aplicaia Extension Manager. Fiierul de instalare pentru extensii este un fiier XML cu extensia mxi care servete toate informaiile de care are nevoie Managerul de Extensii.
Fig 6.17 Managerul de extensii CS4 Documentul XML folosete taguri XML numite taguri MXI. Acestea descriu informaiile legate de extensia respectiv, pornind de la autor, licena de instalare i pn la lista de fiiere ce vor fi incluse n extensie. n continuare voi prezenta o scurt list cu cele mai importante taguri MXI folosite pentru crearea pachetului Spry Rating: macromedia-extension principalul tag folosit pentru definirea extensiei, numele acesteia, versiunea, i tipul extensiei. Codul extensiei Spry Rating:
<macromedia-extension name="Spry Rating" version="1.0.0" type="Command" requires-restart="true"> </macromedia-extension>
49
products definete o list de produse pentru care poate fi instalat extensia. O extensie poate fi integrat i cu celelalte soluii Adobe existente. Codul extensiei Spry Rating:
<products> <product name="Dreamweaver" version="10" primary="true" /> </products>
description descrie ce face extensia.

<description> <![CDATA[ Spry Rating Widget for Adobe Dreamweaver CS4<br> <br> Copyright (c) 2008 Adobe Systems, Inc.<br> ]]> </description>
ui-access specific textul ce va fi afiat n Managerul de Extensii cnd extensia este instalat.
<ui-access> <![CDATA[ You can access the widget from the same locations as other widgets. ]]> </ui-access>
files partea cea mai important a unui fiier MXI. descrie lista de fiiere folosit de extensie, list ce va fi folosit pentru a mpacheta extensia. Rezultatul final al acesteia va fi un fiier MXP care va conine toate setrile i fiierele referite de acest document XML.
<files> <file source="CodeColoring/SpryRatingCodeColor.xml" destination="$dreamweaver/Configuration/CodeColoring" /> <file source="CodeHints/SpryRatingCodeHints.xml" destination="$dreamweaver/Configuration/CodeHints" /> <file source="Commands/SpryRating.htm" destination="$dreamweaver/Configuration/Commands" /> <file source="Commands/SpryRating.js" destination="$dreamweaver/Configuration/Commands" /> <file source="Inspectors/spry_rating.htm" destination="$dreamweaver/Configuration/Inspectors" /> </files>
Crearea pachetului pentru distribuie se face tot din Managerul de extensii. Rezultatul va fi un fiier MXP care conine toate informaiile i fiierele necesare pentru a funciona n Dreamweaver.
50
Fig 6.18 Crearea pachetelor
51
7.
CONCLUZIE
52
8.
BIBLIOGRAFIE
Cri
1. Adobe Dreamweaver CS3 extending Dreamweaver, Adobe Press, 2007 2. Adobe Dreamweaver CS3 API reference, Adobe Press, 2007 3. The extension installation file format, Adobe Press, 2007 4. Dreamweaver CS3: The Missing Manual, O'Reilly Media, 2007 5. Macromedia Dreamweaver 8 API reference, Macromedia Press, 2005 6. Developing Extensions for Macromedia Dreamweaver 8, Macromedia Press, 2005 7. Extending Dreamweaver MX, Macromedia Press, 2002
Referine internet
8. Muller, A., Starting with Spry, http://www.builderau.com.au/program/ajax/soa/Starting-withSpry/0,339028327,339278552,00.htm , accesat pe 4 Februarie 2008 9. Documentaie Adobe Spry Framework,
http://labs.adobe.com/technologies/spry/docs.html, accesat pe 8 Februarie 2008 10. Build 10 Martie 2008 11. Best Aprilie 2008 12. Using Spry Widgets: Rating Widget Overview, practices with Spry, Ajax Components With Spry,
http://www.webmonkey.com/tutorial/Build_Ajax_Components_With_Spry, accesat pe
http://labs.adobe.com/technologies/spry/articles/best_practices/ , accesat pe 14
http://labs.adobe.com/technologies/spry/articles/rating_overview/index.html , accesat pe 22 Aprilie 2008
53

Lucrare

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Lucrare

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Lucian Blaga Sibiu Facultatea de tiine Specializarea: Informatic Economic

Absolvent, Radu Mogo

Universitatea Lucian Blaga Sibiu Facultatea de tiine Specializarea: Informatic Economic

Absolvent, Radu Mogo

CREAREA DE EXTENSII FOLOSIND DREAMWEAVER

2.1. Ce sunt extensiile i de ce se folosesc

automatizarea schimbrilor pe care le face utilizatorul documentului curent, cum

interacionarea cu aplicaia, pentru a nchide/deschide automat ferestre,

nchide/deschide automat documente, pentru a schimba anumite taste rapizi i nu numai.

conectarea la surse de date, ceea ce permite crearea de pagini dinamice care

folosesc aceste informaii din sursele respective.

inserarea i lucrul cu blocuri de cod server n documentul curent.

2.2. Cum proceseaz Dreamweaver extensiile

Un parser HTML, ce permite crearea interfeei cu utilizatorul folosit de extensie.

Un arbore de directoare, ce organizeaz i stocheaz fiierele care

implementeaz elementele i extensiile sistemului.

O serie de inferfee de programare (API) care permit accesul la funcionaliti

Dreamweaver folosind limbajul Javascript.

Un interpretor Javascript ce execut codul Javascript din fiierele extensiilor.

var httpReply = MMHttp.getTextCallback3("status", site, "test"); } </script>

2.3. Despre diferitele tipuri de extensii Dreamweaver

Obiecte Insertbar aceste extensii creeaz modificri n bara de Inserare. Un

Fig 2.3 Meniul de obiecte Insertbar, aa cum apare n Dreamweaver Stiletto

Fig 2.4 Meniul de comenzi

Comenzi meniu aceste extensii extind API-ul de comenzi pentru a permite

Toolbar (bara de unelte) aceste extensii pot aduga elemente la toolbarurile

Fig 2.5 Toolbarul pentru alegerea diferitelor stiluri de rendare a paginii

modelele deja existente

Property Inspector (Inspectorul de proprieti) aceste extensii apar n 6

Fig 2.6 Inspectorul pentru un input de tip checkbox.

Floating panel (panouri flotante) aceste extensii permit adugarea de

Data source aceste extensii permit crearea de conexiuni dinamice la informaii

Data translators (Translatorii de date) aceste extensii convertesc cod non-

2.4. Interfaa de programe de aplicaii lucrul cu extensii.

Citirea fiierului Compilarea codului Executarea procedurilor

2.5. Modelul Obiectual al Documentului (DOM8)

referind numele: document.formular1.prenume

referind indexul: document.forms[0].elements[1]9

2.6. Care DOM?

3.1. Spry Effects

elemente cu efect Slide.

ntr-un cluster, apoi vor fi executate n ordine.

3.2. Spry Data

3.3. Spry Widgets

Rating widgetul dezbtut n aceast lucrare. Permite adugarea unui control

de votare pe pagin sau pentru orice nregistrare de pe pagin.

WIDGETUL SPRY RATING

4.1. Despre widgetul Spry Rating

4.2. Anatomia widgetului Spry Rating

4.3. Funcionarea widgetului cnd suportul Javascript lipsete

4.4. Construirea unui widget Spry Rating

<span class="ratingButton"></span> </span>

Urmtorul pas const n adugarea constructorului pentru widget:

4.5. Configurarea widgetului

Protejarea widgetului pentru votare:

<script type="text/javascript"> var rate = new Spry.Widget.Rating("spryrating1", {readOnly:true}); </script>

Setarea valorii iniiale a widgetului:

<script type="text/javascript"> var rate = new Spry.Widget.Rating("spryrating1", {ratingValue:2.5}); </script>

Trimiterea valorii votate la server:

<script type="text/javascript"> var rate = new Spry.Widget.Rating("spryrating1", {saveUrl:'SpryRating.php?id=spryrating5&val=@@rw_Rating@@'}); </script>

Modificarea dinamic a valorii widgetului

Votare cu ajutorul tastelor

EXTENSIA SPRY RATING PENTRU DREAMWEAVER CS4