Interfete Web

M-am gandit sa mai tweekuiesc putin la elementul interfetei noaste. Ar fi dragut ca acel slider sa nu stea mereu in calea ci sa apara doar atunci cand avem nevoie de el, adica atunci cand trecem cu mousul peste el. La plecarea cu mousul sliderul trebuie sa devina aproape invizibil. Asta m-a dus cu gandul la crearea unei mici animatii Silverlight, legata de proprietatea "Opacity" a Sliderului. In starea normala, sliderul va avea opacitatea 15% si aceasta va creste progresiv pana la 100% cand sliderul este in starea MouseOver. Pentru aceasta, va trebui sa modificam putin si controlul de slider, sa il extindem :)

1. In Expression Blend, vom deriva<link> controlul slider adaugat pe buton. Pentru aceasta va trebui sa intram in modul de editare al butonului creat in "lectia" trecuta. (Click dreapta pe buton , Edit Control Parts -> Edit Template).

2. Faptul ca am "derivat" controlul Slider, ne-a desfasurat codul XAML pentru controlul Slider.

3. Acest pas, poate fi facut atat in Expression Blend cat si in Visual Studio. Eu fiind mai mult programator decat designer, prefer sa lucrez in Visual Studio, scriind direct cod XAML. (In plus de asta nici nu sunt asa obisnuit cu Expression Blend inca). Deci, deschidem Visual Studio, deschidem pagina de cod Page.XAML si cautam templateul Sliderului creat.
In primul rand, in desfasurarea templateului cautam tagul <vsm:VisualStateManager.VisualStateGroups>. Vom gasi acest tag ca si copil al tagului de tip Grid numit "Root" care este containerul principal al cotrolului. In acest tag vom adauga (daca nu exista deja) starile "Normal" si "MouseOver" astfel :
<vsm:VisualState x:Name="Normal"><Storyboard></Storyboard></vsm:VisualState>
<vsm:VisualState x:Name="MouseOver"><Storyboard></Storyboard></vsm:VisualState>In interiorul elementului Storyboard vom adauga animatiile care dorim sa se execute la intrarea in starea specificata de parinte. Dupa cum mentionam la inceputul articolului, vrem ca in starea Normal sa avem o opacitate de 15% iar in starea MouseOver sa avem opacitatea 100%. Iata si codul pentru a realiza acest lucru :
<vsm:VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0.5"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.15"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0.5"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>

4. Se compileaza si se ruleaza aplicatia.

Aici s-a terminat micul meu experiment cu crearea unui element de interfata web mai special, poate fara prea multa aplicativitate practica dar cu ajutorul caruia am explorat cateva din featurele interesante aduse de Silverlight.

Nu pretind ca ce am facut pana aici este perfect, este posibil sa fi avut scapari insa avand in vedere ca si pentru mine este "a first" cred ca pot fi scuzat :).
Voi incerca sa hostez mica aplicatie undeva si voi reveni cu un link.

Alex.

Un beneficiu al managementului pe baza de interfata web este usurinta incorporarii in orice device cu suport pentru retea. Fie ca se numeste User Interface sau Browser Based Interface vorbim despre acelasi lucru: un protocol integrat in firmware-ul dispozitivului care ofera access prin pagina web pentru configurare, management si monitorizare.
Functionarea, in mare, ar fi ca echipamentul are un server web integrat, iar paginile HTML sunt solutia cea mai la indemana pentru interfatarea cu utilizatorul. Prin urmare, utilizatorul poate accesa dispozitivul dorit de la un PC, PDA sau telefon mobil cu suport pentru browser web.

Organizat la nivel inalt, acest tip de management permite configurarea tuturor feature-lor puse la dispozitie pe echipament, vizualizarea statisticilor si a logurilor, statusul tuturor componentelor din sistem.
Sa incercam sa facem o prezentare succinta cu privire la implementarea interfetei web ca mijloc de comunicare cu un dispozitiv. Informatiil referitoare la un echipament pot fi prezentate ca pagini statice, care contin informatii constante ca numele, locatia, adresa retea, banner, etc, sau pagini dinamice cu liste de porturi, statistici de trafic, grafice, contoare, etc. Pagina dinamica este generata la o cerere si se construieste pe baza unei colectii initiale de elemente care se updateaza la un interval de refresh stabilit.
Interactiunea userului cu dispozitivul se face prin intermediul unor formuri HTML. Pagina in care userul face modificari: introducere text, selectie intrare dintr-o lista, un check box sau un radio button este transmisa browserului. Astfel se genereaza un mesaj pentru serverul web de pe echipament, prin care se executa cererea pe dispozitiv.

Andreea

Un feature destul de cool care a aparut odata cu Silverlight si WPF, si care ne poate ajuta teribil pentru proiectarea unei interfete vizuale (fie ea interfata web sau interfata desktop) care "sa ia ochiu'" este acela ca majoritatea proprietatilor controalelor vizuale sunt de tip Object.
Ok, poate nu pare mult insa daca in trecut pe un buton puneam caption care era un simplu text, acum pot sa pun acolo cam orice, inclusiv un text cu un slider control sub el. Intrebare e... oare de ce as vrea asta ? Ideea mi-a venit incercand sa imi dau seama ce as putea vrea sa pun pe un buton, altceva decat un text sau o poza (care le puteam pune si pana acum) ca sa imbunatatesc interfata care o ofer utilizatorului. In final mi-a venit o idee, poate nu buna de aplicat in practica insa buna pentru a exemplifica ce incerc sa zic aici : pot sa folosesc un slider, pus "in" buton pentru a modifica "real-time" dimensiunea fontului textului butonului.

Ca sa si punem in aplicare "ideea" m-am gandit sa creez acest control inedit si sa postez pe masura ce avansez.

Si totusi ca sa termin ideea initiala hai sa va dau un exemplu in care feature-ul de care vorbeam chiar isi arata puterea : in orice interfata a oricarui site mai complex, vei avea de a face cu macar un DropDown. Elementele din DropDown de pana acum : vector de stringuri. Ei bine, de acum in locul lor poti pune cam orice: poti sa ai un element cu buton, un element cu checkbox, cu iconite in fata, cu iconite la sfarsit. Poti incadra un item intr-un "Rounded rectangle" poti sa pui gradiente ( diferite ) pe fiecare element si exemplele pot continua.

Din punctul meu de vedere, de acum e mult mai usor sa faci o interfata web traznet.

Alex.