Curs: Design and Developing Web Applications

Modul: Arhitectura aplicaiei web

Unitate: Alegerea tehnologiei de client

Partea de client a aplicaiei este aceea care se execut pe calculatorul

client, respectiv n browser. Cele mai frecvente tehnologii utilizate
pentru realizarea acestei pri ale aplicaiei sunt Silverlight (sau o alt
platform RIA) i JavaScript. Exist diveri factori n funcie de care
depinde ce tehnologie vom implementa i n ce mod.
n aliniatele urmtoare ne vom reaminti de caracteristicile diverselor
tehnologii de client.
JavaScript este limbajul de scripting al clientului care se
implementeaz n HTML, completndu-l astfel prin introducerea
funcionalitii. Se execut prin interpretare i codul su surs este
vizibil n ntregime de ctre utilizator. Folosete n mod exclusiv
resursele browser-ului i de aceea are o putere de executare mult mai
slab fa de tehnologia RIA. JavaScript se folosete de obicei pentru
adugarea dinamicii n codul HTML existent.
AJAX este un set de funcionaliti JavaScript care se folosesc pentru
gestionarea cerinelor asincrone. Dac se utilizeaz AJAX, se poate
mprospta doar o anumit parte din pagin, accelernd astfel
eficiena aplicaiei i mbunind interfaa de utilizator.
JQuery este biblioteca care simplific gestionarea lui JavaScript.
Aceast bibliotec nu conine componente pe care nu am putea s le
crem manual cu ajutorul lui JavaScript, dar conine multe soluii 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 privete 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, vei crea
un framework care s corespund cerinelor 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
(aplicaie) separat n cadrul paginilor web. Prin aceasta se mpiedic

Copyright Link group

1 / 13

Curs: Design and Developing Web Applications

Modul: Arhitectura aplicaiei web
Unitate: Alegerea tehnologiei de client

implementarea direct n HTML (dei interaciunea poate fi stabilit),

dar pe de alt parte, permite o funcionalitate mai bogat. Dac dorim
s obinem cea mai bogat funcionalitate i cea mai mare putere i
eficien a aplicaiei, vom folosi Silverlight.
Scopul leciei este s stabilim momentul n care este cel mai bine s
implementm una dintre aceste tehnologii, iar asta o putem face doar
prin analiza diverselor cerine ale clientului.
S analizm urmtoarea cerin:
Clientul solicit o aplicaie (o pagin) care va conine tiri. Utilizatorul
aplicaiei trebuie s aib posibilitatea s aleag tirile n funcie de
dat, iar pagina cu tirile nu trebuie s intre n procesul
request/response. De asemenea, clientul a menionat n mod explicit
c nu dorete implementarea tehnologiei RIA n pagina respectiv.
Not:

Nu este un lucru neobinuit ca clientul s solicite neutilizarea

tehnologiei RIA pentru baza aplicaiei. RIA se indexeaz puin mai greu
n motoarele de cautare, iar clientul nostru trebuie s instaleze un
software (player) special pentru emiterea aplicaiei. Din aceste motive,
n ceea ce privete site-urile corporative, RIA se folosete cel mai des
pentru crearea elementelor secundare sau a elementelor care nu se pot
executa n niciun alt mod.

Cerina 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 menionat n mod explicit, este indiferent ce surs
vom folosi.
Clientul nostru nu dorete tehnologia RIA, motiv pentru care
vom folosi exclusiv JavaScript.
Utilizatorul trebuie s aib posibilitatea de a alege data ,
ceea ce nseamn c trebuie s crem un anumit sistem care face
acest lucru. Dac analizai aceast problem mai amnunit, vei

Copyright Link group

2 / 13

Curs: Design and Developing Web Applications

Modul: Arhitectura aplicaiei web
Unitate: Alegerea tehnologiei de client

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

cnd se introduce i utilizarea fusurilor orare, acest obiectiv devine
foarte complicat.

Pentru preluarea datelor este foarte important s efectum o filtrare ct

mai bun i s permitem utilizatorului o alegere ct mai intuitiv. Cea
mai proast variant este utilizarea cmpurilor textuale n care
utilizatorul s introduc valorile exacte pentru ziua, luna i anul.

Figura 1 Introducerea manual a datei cu ajutorul cmpului 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.

Copyright Link group

3 / 13

Curs: Design and Developing Web Applications

Modul: Arhitectura aplicaiei web
Unitate: Alegerea tehnologiei de client

Figura 3 Introducerea datei cu ajutorul controlului DatePicker

Toate cele trei variante au preul lor.

Prima variant (cmpurile textuale) necesit cel mai mic flux de date
(bandwidth) de la server la client, a doua variant (DropDownList)
necesit un flux puin 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 funcie de versiunea
bibliotecii JQuery, aceasta poate fi ntre 40kb i 200kb). n cerin, nu se
menioneaz niciunde limitarea fluxului, ceea ce nseamn c putem
folosi cea mai elegant soluie - JQuery UI DatePicker (figura 3).
n cele din urm, clientul nostru cere ca pagina s nu intre n procesul
request/response. Avnd n vedere c am exclus RIA ca opiune,
alternativa o reprezint AJAX. Este indiferent dac vom folosi
funcionalitatea MS Ajax Toolkit sau JQuery Ajax. Dac am folosi
implementarea JQuery AJAX, am avea nevoie de ceva mai mult timp
pentru construirea aplicaiei, dect 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 avnd n vedere c am implementat deja JQuery
din pricina bibliotecii UI, aceast logic nu ar face dect s complice
realizarea proiectului i ar crete inutil cantitatea de cod.

Copyright Link group

4 / 13

Curs: Design and Developing Web Applications

Modul: Arhitectura aplicaiei web
Unitate: Alegerea tehnologiei de client

Figura 4 Soluia cerinei anterioare

n cerina urmtoare, trebuie s se creeze o aplicaie web ASP.NET

pentru prelucrarea imaginilor. Aplicaia va permite utilizatorilor s
ncarce imaginile i s le prelucreze prin intermediul diverselor
instrumente.
Printre instrumentele pentru prelucrarea imaginilor se vor gsi i
instrumente care necesit o putere mai mare din partea procesorului, i
ele ar trebui s se execute n contextul plcii grafice, i nu a
procesorului, n timp ce unele instrumente ar putea s fie executate i
prin intermediul logicii de server. Aplicaia necesit un flux de date ct
mai mic.
Soluia acestei cerine este simpl. Avem nevoie de o aplicaie 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 aplicaie principal vom utiliza tehnologia Silverlight RIA.
Avnd n vedere c Silverlight se bazeaz pe DirectX, aceasta va
ndeplini condiia conform creia operaiile grafice complexe ar trebui
s se execute n contextul plcii grafice.
Pentru partea de server a aplicaiei putem folosi serverul web existent
(cel pe care se execut aplicaia, dar, din cauza instrumentelor
necesare, ar fi ideal s existe i un server dedicat, care s fie
responsabil doar cu funcionalitatea lor).
,

Copyright Link group

5 / 13

Curs: Design and Developing Web Applications

Modul: Arhitectura aplicaiei web
Unitate: Alegerea tehnologiei de client

Figura 5 Soluia cerinei 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 activrii,
nu tie dac este vorba despre o cerere AJAX sau nu, aadar i va
emite coninutul complet sau un coninut determinat prin
parametrizare. Din aceast cauz, de obicei, logica ce servete 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();
}
%>

Copyright Link group

6 / 13

Curs: Design and Developing Web Applications

Modul: Arhitectura aplicaiei web
Unitate: Alegerea tehnologiei de client

Utilizarea metodei page ofer acelai rezultat ntr-un mod mai elegant:
prin adugarea 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 executrii, 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 setm opiunea
EnablePageMethods la valoarea true, metoda se va expune n mod
automat.

Copyright Link group

7 / 13

Curs: Design and Developing Web Applications

Modul: Arhitectura aplicaiei web
Unitate: Alegerea tehnologiei de client

Figura 6 Activarea crerii automate a metodei page n Script Manager

Dup ce activm 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 tastm linia urmtoare, va fi executat
cererea asincron ctre server:
PageMethods.GetDate()

Pentru preluarea rezultatului, vom folosi metoda callback generat de

script manager:
PageMethods.GetDate(
function(result) { alert(result) }
);

Dac privii codul surs HTML, vei vedea ce a generat cu exactitate

script manager-ul n timp ce a creat metoda. n mod concret, am ajuns
pn la funcia callback pentru GetDate prin analiza urmtoarei linii de
cod, generat de ctre script manager:
GetDate:function(succeededCallback, failedCallback,
userContext)

Metodele Page nu trebuie folosite n mod exclusiv prin intermediul lui

Copyright Link group

8 / 13

Curs: Design and Developing Web Applications

Modul: Arhitectura aplicaiei web
Unitate: Alegerea tehnologiei de client

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 ct 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 activm
metoda page cu ajutorul logicii noastre. Vei observa c, n calitate de
header Content-type, se trimite valoarea application/json. Aceasta este
indispensabil pentru ca n rspuns 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 crem o aplicaie care va activa metodele code-behind prin

JavaScript. Ce soluie este recomandat n aceast situaie?

1. Utilizarea metodei page.

2. Utilizarea controlului update panel.

Copyright Link group

9 / 13

Curs: Design and Developing Web Applications

Modul: Arhitectura aplicaiei web
Unitate: Alegerea tehnologiei de client

3. Utilizarea controlului progress panel.

4. Modificarea metodelor serverului, astfel nct s returneze
rezultatul n formatul json.

Explicaie:

Controlul progress panel nu are niciun sens n contextul acestei cerine.

Controlul update panel se poate utiliza, dac pe server este deja
rezolvat problema apelrii metodelor necesare.
Nu vom rezolva problema activrii lor prin returnarea rezultatelor n
formatul json.
Cel mai bun mod pentru activarea apelrii metodei code behind prin
JavaScript este prin utilizarea metodei page. Dup ce declarm metoda
n calitate de metod page, putem s o activm cu ajutorul cererilor
AJAX POST simple.

Copyright Link group

10 / 13

Curs: Design and Developing Web Applications

Modul: Arhitectura aplicaiei web
Unitate: Alegerea tehnologiei de client

DDWEBA_05 - Design and developing web

applications
1. Ce tehnologie ar trebui folosit, dac ntr-o aplicaie trebuie
s implementm 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 aplicaie
trebuie s se implementeze tehnologia de client care va avea
multe animaii i coninut 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 proprietilor Script Manager
pentru a expune metoda page n mod automat?
a) s setm proprietatea EnablePageMethods la valoarea
true
b) s setm proprietatea EnablePageMethods la valoarea
false
c) nimic, acest lucru se realizeaz n mod automat

Copyright Link group

11 / 13

Curs: Design and Developing Web Applications

Modul: Arhitectura aplicaiei web
Unitate: Alegerea tehnologiei de client

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

5. Dac gestionm AJAX-ul direct prin JavaScript, ce clas
JavaScript vom folosi?
a) XmlHttpRequest
b) AJAX
c) XmlHttp
d) HttpRequest

Copyright Link group

12 / 13

Curs: Design and Developing Web Applications

Modul: Arhitectura aplicaiei web
Unitate: Alegerea tehnologiei de client

1. Ce tehnologie ar trebui folosit, dac ntr-o aplicaie trebuie

s implementm tehnologia de client care se va executa n
contextul paginii HTML?
a
2. Ce tehnologie ar fi cea mai potrivit dac ntr-o aplicaie
trebuie s se implementeze tehnologia de client care va avea
multe animaii i coninut 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 proprietilor Script Manager
pentru a expune metoda page n mod automat?
a
5. Dac gestionm AJAX-ul direct prin JavaScript, ce clas
JavaScript vom folosi?
a

Copyright Link group

13 / 13