LightSwitch – Rad sa ekranima: napredne tehnike

U prethodnom blog postu na temu Visual Studio LightSwitch je detaljno objašnjen dizajner ekrana i kreiranje ekrana na osnovu ponuđenih šablona.

Ostale teme u seriji za LightSwitch:

Na osnovu prikazanih osnovih tehnika kreiranja ekrana pomoću pet ponuđenih šablona, sigurno je da se postavljaju sledeća pitanja kao što su:

  • kako kreirati dio korisničkog interefejsa koji nije direktno vezan za podatke iz baze (npr. check box koji određuje vidljivost određene sekcije na ekranu)
  • kako organizovati elemente na ekranu u redove ili kolone i kako ih grupisati
  • kako dodati statički tekst na ekran

Odgovor na sva ova pitanja slijedi u nastavku.

Prazan šablon

Cilj je kreirati ekran za izbor podataka prilikom kupovine karte za prijevoz međugradskom autobuskom linijom. Krajnji rezultat bi trebalo da izgleda kao (prototip je odrađen u Microsoft Expression Blend – SketchFlow):

image

Za ove potrebe ću kreirati entitet City sa poljima:

  • Id (Integer, Required) – automatski se kreira kreiranjem enititeta
  • Name (String, Required) – naziv grada
  • PostalCode (String, Required) – poštanski broj grada
  • Summary (Computed field, String) – Polje sastavljeno iz polja: Name + “(” + PostalCode + “)” + ” – ” + Country;

Nakon kreiranja ekrana za unos podataka u entitet City i unosa testnih podataka pristupamo kreiranju ekrana za izbor početne i krajnje destinacije, odgovarajućih datuma kao i izbora da li se radi o povratnoj karti ili ne. Ukolio se radi o povratnoj karti (Return ticket) u  tom slučaju je potrebno da je DatePicker za Return data vidljiv, u suprotnom treba da se skloni mogućnost izbora datuma jer se radi samo o izboru karte u jednom pravcu.

LightSwitch ne obezbjeđuje prazan šablon, tj. šablon bez elemenata koji nisu vezani ni za jedan enitet ali se može dobiti na vrlo jednostavan način upotrebom Editable Grid Screen. Pri tome ne treba odabrati, u padajućoj listi Screen Data, niti jedan entitet ili upit:

BuyTicket

Kreiranjem ekrana dobijamo ekran bez elemenata:

image

Potrebno je kreirati elemente:

  • Početnu destinaciju (From city)
  • Krajnju destinaciju (To city)
  • Početni datum putovanja (Start date – DatePicker)
  • Datum putovanja povratka (End date – DatePicker)
  • Povratna karta (Check box)

Da bi ostvarili željeni raspored elemenata potrebno je da kreiramo dvije grupe:

image

Prva grupa sadrži elemente postavljenje po vertikali u redovima, dok druga grupa sadrži elemente postavljenje po vertikali u kolonama.

Kreiranje grupa na ekrana

Da bi to ostvarili kreiraćemo dvije grupe: Group sa Rows Layout i Group1 sa Columns Layout.

image

Kreiranje property na ekranu

Da bi postavili elemente u okviru grupa potrebno je da kreiramo elemente na ekranu pomoću Add Date Item:

image

Kreiraću lokalni property, odabrati entitet City i nazvaću ga FromCity:

FromCityProperty

Potom ću kreirati ekvivalentno prethodnom primjeru ToCity property i vezati ga takođe za City enitet. Za datume ću odabrati tip podataka Date i nazvaću ih StartDate i ReturnDate.

StartDate

Na kraju je potrebno kreirati lokalni property tipa Boolean za Check box sa nazivom ReturnTicket. Spisak svih kreiranih property se nalazi na listingu raspoloživih polja za ekran.

image

Postavljanje elemenata na ekranu

Kada imamo sve raspoložive elemente onda je moguće izvršiti postavljanje tih elemenata na ekran u grupe koje smo prethodno kreirali. Postavljanje se vrši pomoću dugmeta Add pa se odabere kontrola ili se odradi drag and drop kontrole sa spiska kontrola na željenu poziciju:

image

Postavljanjem svih kontrola stekli su se preduslovi za prvo pokretanje ekrana sa F5 i izborom stavke menija Buy Ticket:

image

Da bi podesili ekran da izgleda kao na prvoj predloženoj skici sa početka teksta, potrebno je da odradimo još par stvari. Preporuka je da se sledeće odradi u Design Modu u momentu dok je aplikacija pokrenuta (sa F5) jer na taj način možemo odmah da vidimo rezultat izmjene rasporeda elemenata. Potrebno je, da bi izmjene važile za cijeli ekran, odabrati u korijenu, u lijevoj strani Rows Layout-Buy Ticket te postaviti Label Position na Top (da bi labele bile postavljene iznad polja) i Vertical Alignment na Top (da bi se izbjegao prazan prostor između grupa):

BuyTicketScreenDesign

Konačni rezultat prethodnih akcija:

image

Kodiranje u okviru ekrana

Da bi ostavtili u potpunosti traženu funkcionalnost, potrebno je kada je polje Return Ticket neaktivno da se sa ekrana skloni polje Return Date. Da bi to osvarili potrebno je da dodamo par metoda preko View Screen Code na naš ekran BuyTicket:

ScreenCode

Želim da prilikom pokretanja prozora Start Date bude setovan na današnji dan i da je Return Ticket aktivan po default-u kao i da je povratna karta pomjerena za 3 dana u odnosu na početni datum. Sve funkcionalnosti ću dobiti sa naredne tri metode:

partial void BuyTicket_InitializeDataWorkspace(List saveChangesTo)
{
  StartDate = DateTime.Now;
  ReturnTicket = true;
}

Metoda InitializeDataWorkspace je izuzetno bitna u okviru LightSwitch i u okviru nje se postavljaju određena podešavanja kojim se setuju određeni podaci vezani za ekran (u našem slučaju početne vrijednost za određene elemente na ekranu). Takođe do ove metode smo mogli doći tako što se odabere željeni ekran (Screen) te potom Write Codei odabrali je iz liste ponuđenih metoda.

Takođe, kada je polje Return Ticket neaktivno želim da mi polje Return Datebude nevidljivo:

partial void ReturnTicket_Changed()
{
  this.FindControl("ReturnDate").IsVisible = ReturnTicket;
}

I na kraju datum povratne karte da je pomjerene za 3 dana u odnosu na početni datum putovanja:

partial void StartDate_Changed()
{
  ReturnDate = StartDate.Date.AddDays(3);
}

Prikaz pokrenute aplikacije za slučaj da je odabrana karta u oba pravca i u drugom slučaju da je odabrana karta samo u jednom pravcu:

image

Dodavanje statičkog teksta na ekran

Cilj: postaviti statički tekst na ekranu kao u narednom primjeru (tekst: Online tickets):

image

Prvo je potrebno kreirati lokalni static property za ekran (Add Data Item) tipa String i dati mu naziv MyLabel.

StaticText

Potom je potrebno postaviti property MyLabel na željeno mjesto iznad grupe – Group i na kraju je potrebno podesiti sledeće osobine za MyLabel:

  1. Control Type: Label
  2. Label Position: None
  3. Font Style: Heading1 (nije neophodan)

Kako statički property za ekran ne potiče ni od jednog entiteta, potrebno je inicijalizovati njegovu vrijednost prije pokretanja ekrana (“Online tickets“). Metoda koja se pokreće prije bilo koje metode je već pomenuta metoda InitializeDataWorkspace:

partial void BuyTicket_InitializeDataWorkspace(List saveChangesTo)
{
  StartDate = DateTime.Now;
  ReturnTicket = true;
  this.MyLabel = "Online tickets";
}

Zaključak

LightSwitch pruža niz mogućnosti za kreiranje kontrola na ekranu.

About Spaso Lazarevic

Spaso Lazarevic is Senior Software Developer working with Microsoft technologies. Leader of .NET User Group Bijeljina, speaker at Microsoft events, writter and blogger. Microsoft MVP for Visual C#.
This entry was posted in Programming and tagged , . Bookmark the permalink.

10 Responses to LightSwitch – Rad sa ekranima: napredne tehnike

  1. slavko says:

    Sve pohvale za sve što ste pisali o Lightswitch_u.
    Objasnili ste dosta stvari koje se ne mogu naći u drugim tutorijalima.
    Puno pozdrava.

    • Hvala za pohvale.
      Ovo je tek početak, vjerujte mi.
      Biće toga još mnogo u budućnosti jer je ovo definitivno alat koji ima veoma veliku primjenu za potrebe kreiranja manje i srednje složenih aplikacija (mada je i ovo relativno).
      Očekujte završetak tutorijala u ovoj seriji (osnove) a onda slijede prave stvari🙂

      Pozdrav

  2. slavko says:

    Gopsodine Spaso,
    Kako i gde deklarisati javne-globalne promenljive u LS da se vide iz svih skrinova ili kako napraviti
    klasu da se njena svojstva i metode vide u celoj aplikaciji.
    To mi je potrebno kod prijave u aplikaciju da uzmem Ime_firme, Godina_poslovanja i Ime_korisnika,
    jer te promenljive mi trebaju kroz celu aplikaciju.
    Havala.

  3. slavko says:

    Spaso,
    Hvala na pomoći, sve ok.
    Pozdrav.

  4. asimze says:

    Dragi Spaso kao prvo da ti se zahvalim na blogu. dobar je. Kao drugo ovo pitanje koje ti je slavko postavio je materijal za jedan novi članak, prevedeš na engleski i pići. Znaš mi koji smo sa ms accessa prešli na ls baš se ne snalazimo najbolje u ovoj tvojoj uputi.
    I jedna dopuna na ovaj članak ako se odlučiš na englesku verziju: imam par kontrola na kojima odaberem neke parametre ili nešto sa list boksa vezanog za bazu. Šta kad ja sada hoču na mi se izvršava neki kod nad rekordsetom čije je izvor ili query ili tabela. Unapred zahvalan. Asim!

  5. Hvala Asime na pozdravima
    Mislim da je tema zanimljiva (globalne promjenjive) i statičke klase i eto nama narednog bloga na tu temu gdje ću detaljno objasniti kako to ostvariti. Hvala za ideju🙂
    Pozdrav

  6. Slavko says:

    Spaso,
    Kako na screen_u kod unosa podataka jednom polju dodeliti vrednost prethodnog polja?
    Radi se o dve tabele, PARTNER i MESTO koje su u dvostrukoj relaciji. Prva relacija je Mesto a druga Sediste. Kada se unose podaci o Partneru potrebno je uneti podatke o mestu i sedištu Partnera.
    Kako je za većinu Partnera(firmi) isto mesto i sedište hteo sam da se prvi podatak (recimo Mesto)
    ponudi i kao sedište (npr. za partnera(firmu) “A” unesemo mesto Banja Luka, pritisnemo TAB i da
    se Banja Luka pojava kao vrednost i za sedište).
    Hvala.

    • Generalno, evo dva primjera za pronalaženje iz vrijednosti iz child entity:
      ** pronalaženje id na osnovu vrijednosti što može na primjer biti “Banja Luka”:
      City city = this.DataWorkspace.ApplicationData.Cities.Where(a => a.Name.Equals(“”, StringComparison.Ordinal)).SingleOrDefault();
      if (null!=city)
      {
      int id = city.Id;
      }

      ** ili pronalaženje na osnovu vrijednosti na ekranu (StudentProperty.City.Id):

      City city = this.DataWorkspace.ApplicationData.Cities_SingleOrDefault(StudentProperty.City.Id);
      if (null!=city)
      {
      string name = city.Name;
      }

      Nadam se da će vam ovo pomoći!
      Pozdrav

  7. Slavko says:

    Spaso,
    Puno Vam hvala na pomoći i veliki pozdrav.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s