by Diana
17. September 2009 15:14
In acest snippet vom lucra cu States si Behaviours in SketchFlow. Scopul este crearea unui control care poate fi pozitionat oriunde in interiorul unui ecran, dupa dorinta utilizatorului. Un exemplu simplu ar fi repozitionarea unei ferestre de LiveChat in interiorul unei pagini.
Deschidem Expression Blend 3 si creem un proiect nou, pe care il denumim DraggableControl_Prototype. Avand primul ecran selectat, accesati tab-ul Assets -> SketchFlow -> Styles -> SketchStyles, selectati Rectangle-Sketch si plasati-l oriunde in interiorul ecranului.
Pasul urmator este sa alegem din colectia Assets -> SketchFlow -> Styles -> SketchStyles urmatoarele controale:
- ScrollViewer-Sketch pentru spatiul de afisare a mesajelor
- TextBox-Skech pentru scrierea de mesaje
- Button-Sketch pentru trimiterea unui mesaj
- TextBlock-Sketch cu titlul ferestrei
- Button-Sketch pentru inchiderea ferestrei
toate aceste controale fiind plasate in interiorul dreptunghiului adaugat anterior.
De asemenea, optional, mai putem adauga o poza reprezentativa pentru Serviciul Clienti. In final, controlul ar trebui sa arate ca in imaginea de mai jos.
POZA
In continuare, selectam toate controalele adaugate si le grupam intr-un Canvas. Pentru procedeul de grupare, vedeti poza urmatoare.
Mai trebuie adaugat un singur control, un checkbox pentru afisarea ferestrei de chat. Acest control poate fi asezat oriunde in pagina.
Pentru atasarea unui comportament de drag & drop, selectati canvas-ul tocmai creat si din Assets -> Behaviours alegeti MouseDragElementBehaviour si faceti drag & drop pe canvas. In acest moment, daca rulam aplicatia (apasati tasta F5 sau alegeti Project -> Run Project) vom avea o fereastra care poate fi mutata cu drag & drop.
Pentru a ascune / afisa fereastra de chat, vom apela la stari. Deschideti fereastra State (Window -> States) si primul lucru pe care il vom face este sa cream un StateGroup numit LiveChatVisibility.
In continuare, creeam cele 2 stari:
- DisplayWindow
- HideWindow
In momentul in care se adauga o noua stare, Stare Recorder-ul inregistreaza in mod automat tranzitiile, setarile si modificarile suportate de contralele din ecran. Pentru a porni / opri inregistrarea, vedeti imaginea de mai jos.
Acum sa trecem la customizarea starilor:
1. HideWindow doreste ascunderea ferestrei de LiveChat
Pentru a realiza acest lucru, selectati Canvas-ul (folosind fereastra Objects and Timeline) creat prin gruparea tuturor elementelor care alcatuiesc controlul de LiveChat si porniti inregistrarea. Apoi, din fereastra Properties, setati opacitatea canvas-ului din 100% in 0%. Odata ce fereastra a disparut, puteti opri inregistrarea.
2. DisplayWindow doreste afisarea ferestrei de LiveChat
Selectati canvas-ul (folosind fereastra Objects and Timeline) si porniti inregistrarea. Setati opacitatea din 0% din nou la 100% si odata ce vedeti fereastra, puteti opri inregistrarea.
In acest moment, avem cele 2 stari ale ferestrei de chat. Tot ce mai trebuie facut este sa asociem starile celor doua controale in cauza: checkbox-ului si butonului de inchidere a ferestrei. Pentru setarea starii HideWindow, faceti click-dreapta pe butonul din dreapta sus a controlului de LiveChat si selectati Activate State -> HideWindow. In mod analog, setati starea DisplayWindow pentu checkbox.
Ruland aplicatia, veti vedea ca am obtinut o fereastra de chat mobila, care poate sa fie inchisa sau afisata, in functie de optiunile utilizatorului. Proiectul il puteti gasi aici.