DDWEBA_05

Curs: Design and Developing Web Applications

Modul: Arhitectura aplicației web

Unitate: Alegerea tehnologiei de client

Partea de client a aplicației este aceea care se execută pe calculatorul

client, respectiv în browser. Cele mai frecvente tehnologii utilizate

pentru realizarea acestei părți ale aplicației sunt Silverlight (sau o altă

platformă RIA) și JavaScript. Există diverşi factori în funcţie de care

depinde ce tehnologie vom implementa și în ce mod.

În aliniatele următoare ne vom reaminti de caracteristicile diverselor

tehnologii de client.

JavaScript este limbajul de scripting al clientului care se

implementează în HTML, completându-l astfel prin introducerea

funcţionalităţii. Se execută prin interpretare și codul său sursă este

vizibil în întregime de către utilizator. Folosește în mod exclusiv

resursele browser-ului şi de aceea are o putere de executare mult mai

slabă față de tehnologia RIA. JavaScript se folosește de obicei pentru

adăugarea dinamicii în codul HTML existent.

AJAX este un set de funcţionalităţi JavaScript care se folosesc pentru

gestionarea cerințelor asincrone. Dacă se utilizează AJAX, se poate

împrospăta doar o anumită parte din pagină, accelerând astfel

eficiența aplicației și îmbunăţind interfața de utilizator.

JQuery este biblioteca care simplifică gestionarea lui JavaScript.

Această bibliotecă nu conține componente pe care nu am putea să le

creăm manual cu ajutorul lui JavaScript, dar conține multe soluții gata

rezolvate, pentru care am avea nevoie de timp și efort pentru a le

rezolva singuri. De asemenea, unul din factorii cheie este că JQuery

are un suport imens în ceea ce priveşte plug-in-urile și în comunitate în

general, ceea ce îl face un instrument indispensabil pentru construirea

tuturor tipurilor de logici de client. JQuery nu este singurul framework

JavaScript de pe piață. Mai există foarte multe altele şi probabil că şi

dvs., după o vreme îndelungată de utilizare a acestui limbaj, veți crea

un framework care să corespundă cerinţelor dvs. Framework-urile mai

cunoscute pentru JavaScript sunt: YUI, Dojo, MooTools...

Silverlight este o platformă Microsoft RIA. Spre deosebire de

JavaScript, RIA nu se execută în contextul HTML, ci ca o unitate

(aplicație) separată în cadrul paginilor web. Prin aceasta se împiedică

© Copyright Link group 1 / 13




implementarea directă în HTML (deși interacțiunea poate fi stabilită),

dar pe de altă parte, permite o funcţionalitate mai bogată. Dacă dorim

să obținem cea mai bogată funcţionalitate şi cea mai mare putere și

eficiență a aplicației, vom folosi Silverlight.

Scopul lecției este să stabilim momentul în care este cel mai bine să

implementăm una dintre aceste tehnologii, iar asta o putem face doar

prin analiza diverselor cerințe ale clientului.

Să analizăm următoarea cerinţă:

Clientul solicită o aplicație (o pagină) care va conține știri. Utilizatorul

aplicației trebuie să aibă posibilitatea să aleagă știrile în funcţie de

dată, iar pagina cu știrile nu trebuie să intre în procesul

request/response. De asemenea, clientul a menționat în mod explicit

că nu dorește implementarea tehnologiei RIA în pagina respectivă.

Notă:

Nu este un lucru neobișnuit ca clientul să solicite neutilizarea

tehnologiei RIA pentru baza aplicaţiei. RIA se indexează puţin mai greu

în motoarele de cautare, iar clientul nostru trebuie să instaleze un

software (player) special pentru emiterea aplicației. Din aceste motive,

în ceea ce priveşte site-urile corporative, RIA se folosește cel mai des

pentru crearea elementelor secundare sau a elementelor care nu se pot

executa în niciun alt mod.

Cerinţa anterioară presupune o pagină cu știri . Deci, va fi

folosită o bază de date sau o altă sursă (serviciu). Pentru că acest

lucru nu este menționat în mod explicit, este indiferent ce sursă

vom folosi.

Clientul nostru nu dorește tehnologia RIA, motiv pentru care

vom folosi exclusiv JavaScript.

Utilizatorul trebuie să aibă posibilitatea de a alege data ,

ceea ce înseamnă că trebuie să creăm un anumit sistem care face

acest lucru. Dacă analizați această problemă mai amănunţit, veţi





observa că nu este chiar simplu să se preia data de la utilizator, iar

când se introduce și utilizarea fusurilor orare, acest obiectiv devine

foarte complicat.

Pentru preluarea datelor este foarte important să efectuăm o filtrare cât

mai bună și să permitem utilizatorului o alegere cât mai intuitivă. Cea

mai proastă variantă este utilizarea câmpurilor textuale în care

utilizatorul să introducă valorile exacte pentru ziua, luna și anul.

Figura 1 – Introducerea manuală a datei cu ajutorul câmpului textual

O variantă mai bună este utilizarea controlului DropDownList cu valorile

predefinite:

Figura 2 – Introducerea datei cu ajutorul controlului DropDownList

Ce mai bună variantă pentru utilizator este folosirea unui control

JavaScript special pentru introducerea datei. De exemplu, JQuery UI

DatePicker.





Figura 3 – Introducerea datei cu ajutorul controlului DatePicker

Toate cele trei variante au prețul lor.

Prima variantă (câmpurile textuale) necesită cel mai mic flux de date

(bandwidth) de la server la client, a doua variantă (DropDownList)

necesită un flux puţin mai mare, în timp ce ultima variantă necesită un

flux mare de date, pentru că utilizatorul trebuie să preia biblioteca

JQuery completă și scriptul pentru DatePicker (în funcție de versiunea

bibliotecii JQuery, aceasta poate fi între 40kb și 200kb). În cerinţă, nu se

menţionează niciunde limitarea fluxului, ceea ce înseamnă că putem

folosi cea mai elegantă soluţie - JQuery UI DatePicker (figura 3).

În cele din urmă, clientul nostru cere ca pagina să nu intre în procesul

request/response. Având în vedere că am exclus RIA ca opţiune,

alternativa o reprezintă AJAX. Este indiferent dacă vom folosi

funcţionalitatea MS Ajax Toolkit sau JQuery Ajax. Dacă am folosi

implementarea JQuery AJAX, am avea nevoie de ceva mai mult timp

pentru construirea aplicației, decât dacă am folosi MS Ajax Toolkit, dar

am avea un control mai bun, iar codul ar fi mai optimizat. Dacă nu am fi

implementat JQuery, introducerea unei logici JavaScript speciale pentru

AJAX ar avea sens, dar având în vedere că am implementat deja JQuery

din pricina bibliotecii UI, această logică nu ar face decât să complice

realizarea proiectului și ar crește inutil cantitatea de cod.





Figura 4 – Soluţia cerinţei anterioare

În cerinţa următoare, trebuie să se creeze o aplicație web ASP.NET

pentru prelucrarea imaginilor. Aplicația va permite utilizatorilor să

încarce imaginile și să le prelucreze prin intermediul diverselor

instrumente.

Printre instrumentele pentru prelucrarea imaginilor se vor găsi și

instrumente care necesită o putere mai mare din partea procesorului, și

ele ar trebui să se execute în contextul plăcii grafice, şi nu a

procesorului, în timp ce unele instrumente ar putea să fie executate și

prin intermediul logicii de server. Aplicația necesită un flux de date cât

mai mic.

Soluția acestei cerinţe este simplă. Avem nevoie de o aplicație care va

permite utilizatorului să manipuleze imaginile. Aceasta o putem realiza

cu ajutorul lui JavaScript și AJAX, dar în acest caz am suprasolicita

procesorul, ceea ce în cerinţă este interzis. Din această cauză, în

calitate de aplicaţie principală vom utiliza tehnologia Silverlight RIA.

Având în vedere că Silverlight se bazează pe DirectX, aceasta va

îndeplini condiția conform căreia operațiile grafice complexe ar trebui

să se execute în contextul plăcii grafice.

Pentru partea de server a aplicaţiei, putem folosi serverul web existent

(cel pe care se execută aplicația, dar, din cauza instrumentelor

necesare, ar fi ideal să existe şi un server dedicat, care să fie

responsabil doar cu funcționalitatea lor).





Figura 5 – Soluţia cerinţei anterioare

Utilizarea metodei page

De cele mai multe ori, o pagină va fi cea care va asigura datele pentru

cererile AJAX. Problema este că pagina respectivă, cu ocazia activării,

nu știe dacă este vorba despre o cerere AJAX sau nu, așadar îşi va

emite conținutul complet sau un conținut determinat prin

parametrizare. Din această cauză, de obicei, logica ce servește cererile

AJAX se stochează la începutul paginii, iar după executarea ei,

întrerupem emiterea paginii.

De exemplu:

<%if (Request.Params["GetTime"] != null){ Response.Write(DateTime.Now.ToString());Response.End();}%>





Utilizarea metodei page oferă același rezultat într-un mod mai elegant:

prin adăugarea atributului WebMethod la metoda codului behind al

paginii.

În acest fel, metoda se tratează ca metodă a serviciului și în loc să

emită pagina completă, ea emite doar rezultatul executării, împachetat

prin default în JSON.

[WebMethod]public static string GetDate(){ return DateTime.Now.ToString();}

Pentru a activa această metodă și pentru a prelua datele, trebuie să

trimitem o cerere POST pe pagina în care se află. Cererea POST AJAX o

putem realiza manual (prin intermediul clasei XMLHttpRequest), cu

ajutorul bibliotecii JQuery sau prin intermediul lui ScriptManager. Dacă

tragem ScriptManager pe pagină şi dacă setăm opțiunea

EnablePageMethods la valoarea true, metoda se va expune în mod

automat.





Figura 6 – Activarea creării automate a metodei page în Script Manager

După ce activăm crearea metodei page în Script Manager, toate

metodele din code-behind care au atributul WebMethod vor fi

disponibile în calitate de metode JavaScript ale clasei PageMethods. De

exemplu, dacă în JavaScript tastăm linia următoare, va fi executată

cererea asincronă către server:

PageMethods.GetDate()

Pentru preluarea rezultatului, vom folosi metoda callback generată de

script manager:

PageMethods.GetDate( function(result) { alert(result) });

Dacă priviţi codul sursă HTML, veți vedea ce a generat cu exactitate

script manager-ul în timp ce a creat metoda. În mod concret, am ajuns

până la funcția callback pentru GetDate prin analiza următoarei linii de

cod, generată de către script manager:

GetDate:function(succeededCallback, failedCallback,userContext)

Metodele Page nu trebuie folosite în mod exclusiv prin intermediul lui





script manager, dimpotrivă, acesta este cel mai costisitor mod pentru

utilizarea lor (deoarece introducem o mare cantitate inutilă de cod

JavaScript). Dacă dorim un transport cât mai rapid, o alternativă mai

bună este prin introducerea propriei logici JavaScript sau prin utilizarea

bibliotecii JQuery.

În continuare, avem unul din modurile în care am putea să activăm

metoda page cu ajutorul logicii noastre. Veţi observa că, în calitate de

header Content-type, se trimite valoarea application/json. Aceasta este

indispensabilă pentru ca în răspuns să nu primim întreaga pagină:

var xhr = new XMLHttpRequest();xhr.open("POST","http://localhost/Default.aspx/GetDate",true);xhr.setRequestHeader("Content-type", "application/json");xhr.setRequestHeader("Connection", "close");xhr.onreadystatechange = function(){ if(xhr.readyState==4) alert(xhr.responseText);}xhr.send(null);

Întrebare:

Trebuie să creăm o aplicație care va activa metodele code-behind prin

JavaScript. Ce soluție este recomandată în această situație?

1. Utilizarea metodei page.

2. Utilizarea controlului update panel.





3. Utilizarea controlului progress panel.

4. Modificarea metodelor serverului, astfel încât să returneze

rezultatul în formatul json.

Explicaţie:

Controlul progress panel nu are niciun sens în contextul acestei cerinţe.

Controlul update panel se poate utiliza, dacă pe server este deja

rezolvată problema apelării metodelor necesare.

Nu vom rezolva problema activării lor prin returnarea rezultatelor în

formatul json.

Cel mai bun mod pentru activarea apelării metodei code behind prin

JavaScript este prin utilizarea metodei page. După ce declarăm metoda

în calitate de metodă page, putem să o activăm cu ajutorul cererilor

AJAX POST simple.





DDWEBA_05 - Design and developing web

applications

1. Ce tehnologie ar trebui folosită, dacă într-o aplicație trebuie

să implementăm tehnologia de client care se va executa în

contextul paginii HTML?

a) JavaScript

b) Silverlight

c) Flash

d) Flex

2. Ce tehnologie ar fi cea mai potrivită dacă într-o aplicație

trebuie să se implementeze tehnologia de client care va avea

multe animații și conținut multimedia?

a) Silverlight

b) JavaScript

c) Ajax

d) VBScript

3. Ce trebuie să se efectueze pentru ca o metodă să fie

definită ca metodă Page?

a) să i se adauge atributul WebMethod

b) să i se adauge atributul PageMethod

c) nimic, acest lucru se realizează în mod automat

d) să i se adauge atributul WebPage

4. Ce trebuie să facem în cadrul proprietăților Script Manager

pentru a expune metoda page în mod automat?

a) să setăm proprietatea EnablePageMethods la valoarea

true

b) să setăm proprietatea EnablePageMethods la valoarea

false

c) nimic, acest lucru se realizează în mod automat





d) nimic, Script Manager nu poate să expună metoda page

5. Dacă gestionăm AJAX-ul direct prin JavaScript, ce clasă

JavaScript vom folosi?

a) XmlHttpRequest

b) AJAX

c) XmlHttp

d) HttpRequest





1. Ce tehnologie ar trebui folosită, dacă într-o aplicație trebuie

să implementăm tehnologia de client care se va executa în

contextul paginii HTML?

a

2. Ce tehnologie ar fi cea mai potrivită dacă într-o aplicație

trebuie să se implementeze tehnologia de client care va avea

multe animații și conținut multimedia?

a

3. Ce trebuie să se efectueze pentru ca o metodă să fie

definită ca metodă Page?

a

4. Ce trebuie să facem în cadrul proprietăților Script Manager

pentru a expune metoda page în mod automat?

a

5. Dacă gestionăm AJAX-ul direct prin JavaScript, ce clasă

JavaScript vom folosi?

a

Powered by TCPDF (www.tcpdf.org)


http://www.tcpdf.org

DDWEBA_05

Documents

Transcript of DDWEBA_05