Website in 6 pasi si fara coding

Silverlight este versiunea alternativă, de la Microsoft, pentru platforma Flash. Microsoft Expression Blend 3 este un tools ce uşurează lucrul cu Silverlight, un soft WYSIWYG (What you see is what you get).

Astăzi m-am hotărât să vă împărtăşesc şi vouă uşurinţa cu care puteţi să creaţi un web-site cu un design profesional, fără să scrieţi vre-un cod, în Blend (dacă a-ţi mai lucrat cu platforma Flash atunci o să obervaţi că modul de a lucra în Blend este aproximativ acelaşi, la prima vedere, numai că se schimbă puţin limbajul şi Blend are avantajul de a oferi mai multe programatorilor, designerilor dar are şi lipsuri).



În primul rând presupunem că aveţi Microsoft Expression 3 instalat (dacă nu puteţi să îl downloadaţi, versiunea trial de pe Microsoft).
Să vedem acum despre ceea ce am vrut să spun în titlu şi în explicaţia de mai sus.

* Pentru început deschidem Microsoft Expression Blend 3 şi creem un nou proiect.



Selectem ca mod de organizare a datelor , de la iconiţa din stânga-sus, modelul Grid şi împărţim artboard-ul în 4 părţi (top, navigator, content, bottom) ca în imaginea de mai jos:






A sosit momentul să ne creem şablonul pe baza căruia lucrăm. Eu am creat un design simplu care arată cam aşa (3 butoane şi câteva text-blokuri, alternativele labelurilor din Visual Studio):



* Adăugăm în fereastra State (Windows->State să fie bifat) o stare care cuprindre alte 4 (una default) apăsând pe iconiţa care are în dreapta-jos un + ( semnul plus )(1) . După ce am adăugat starea adăugăm alte 3 apăsând pe o iconită asemănătoare celei de mai sus dar de la starea principală (2).



Pentru fiecare stare în parte selectăm modul de apariţie a conţinutului corespunzător butonului selectat. Pentru aceasta selectăm o stare după care în fereastra Objects and Timeline (Windows->Objects and Timeline) selectăm obiectul pe care vrem să-l aducem în artboard.






Acum vine partea cea mai interesantă: cum “legăm” butonul de conţinut? Dacă lucraţi în flash/flex atunci trebuie să trataţi un eveniment scriind câteva linii de cod (sau în Visul Studio) dar Blend oferă un mod mai simplu. Să vedem cum: în fereastra States selectăm Base, din fereastra Assert (Windows->Assert) selectăm tab-ul Behaviors de unde alegem GoToStateActions şi îl tragem deasupra butonului (drag and drop). Expandăm obiectul [Button] din Objects and Timeline şi selectăm GoToStateAction după care din fereastra Proprieties (Windows->Porprieties) la EventName selectăm Click (adică tratăm evenimentul Click) după care la StateName selectăm starea corespunzătoare butonului (deci , Blend oferă un mod mai uşor de a trata unele evenimente) .Repetăm aceşti paşi pentru fiecare buton în parte şi la urmă apasăm F5 pentru a vedea rezultatul.



Asemenea celor făcute de mine puteţi să faceţi un slideshow etc. (cu ajutorul “comportamentelor” din galeria oferită de Microsoft şi cu animaţiei). Pentru a vedea cât ar fi trebuit să codaţi puteţi să vă uitaţi la codul generat de Blend selectând meniul View->Active Document View-> XAML View sau selectând a 2-a iconiţă de deasupra scroll-barului artboardu-lui .

Articol preluat de la www.worldit.info