Website in 6 pasi si fara coding

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

Astazi m-am hotarat sa va impartasesc si voua usurinta cu care puteti sa creati un web-site cu un design profesional, fara sa scrieti vre-un cod, in Blend (daca a-ti mai lucrat cu platforma Flash atunci o sa obervati ca modul de a lucra in Blend este aproximativ acelasi, la prima vedere, numai ca se schimba putin limbajul si Blend are avantajul de a oferi mai multe programatorilor, designerilor dar are si lipsuri).

In primul rand presupunem ca aveti Microsoft Expression 3 instalat (daca nu puteti sa il downloadati, versiunea trial de pe Microsoft).
Sa vedem acum despre ceea ce am vrut sa spun in titlu si in explicatia de mai sus.

• Pentru inceput deschidem Microsoft Expression Blend 3 si creem un nou proiect.

• Selectem ca mod de organizare a datelor , de la iconita din stanga-sus, modelul Grid si impartim artboard-ul in 4 parti (top, navigator, content, bottom) ca in imaginea de mai jos:

• A sosit momentul sa ne creem sablonul pe baza caruia lucram. Eu am creat un design simplu care arata cam asa (3 butoane si cateva text-blokuri, alternativele labelurilor din Visual Studio):

• Adaugam in fereastra State (Windows->State sa fie bifat) o stare care cuprindre alte 4 (una default) apasand pe iconita care are in dreapta-jos un + ( semnul plus )(1) . Dupa ce am adaugat starea adaugam alte 3 apasand pe o iconita asemanatoare celei de mai sus dar de la starea principala (2).

• Pentru fiecare stare in parte selectam modul de aparitie a continutului corespunzator butonului selectat. Pentru aceasta selectam o stare dupa care in fereastra Objects and Timeline (Windows->Objects and Timeline) selectam obiectul pe care vrem sa-l aducem in artboard.

• Acum vine partea cea mai interesanta: cum “legam” butonul de continut? Daca lucrati in flash/flex atuci trebuie sa tratati un eveniment scriind cateva linii de cod (sau in Visul Studio) dar Blend ofera un mod mai simplu. Sa vedem cum: in fereastra States selectam Base, din fereastra Assert (Windows->Assert) selectam tab-ul Behaviors de unde alegem GoToStateActions si il tragem deasupra butonului (drag and drop). Expandam obiectul [Button] din Objects and Timeline si selectam GoToStateAction dupa care din fereastra Proprieties (Windows->Porprieties) la EventName selectam Click (adica tratam evenimentul Click) dupa care la StateName selectam starea corespunzatoare butonului (deci , Blend ofera un mod mai usor de a trata unele evenimente) .Repetam acesti pasi pentru fiecare buton in parte si la urma apasam F5 pentru a vedea rezultatul.

Asemenea celor facute de mine puteti sa faceti un slideshow etc. (cu ajutorul “comportamentelor” din galeria oferita de Microsoft si cu animatiei). Pentru a vedea cat ar fi trebuit sa codati puteti sa va uitati la codul generat de Blend selectand meniul View->Active Document View-> XAML View sau selectand a 2-a iconita de deasupra scroll-barului artboardu-lui .

Daca acest articol contine o greseala, selecteaza cuvintele sau fraza gresita si tasteaza combinatia de taste Shift + Enter sau apasa click aici pentru a o raporta. Multumim!