LightSwitch – Rad sa ekranima: osnovne tehnike

U prethodnom blog postu na temu Visual Studio LightSwitch je detaljno objašnjen način kreiranja veza između entiteta.

Ostale teme u seriji za LightSwitch:

Kada je kreirana šema baze, tačnije kada su kreirani entiteti i veze između njih sledeći korak u kreiranju aplikacija bi mogao da bude kreiranje ekrana (Screen) za kreirane entitete i veze između njih. Ekrani predstavalju korisnički interfejs aplikacije, tj. putem ekrana je moguće manipulisati sa podacima, vršiti unos, izmjene, pregled, pretragu podataka i slično.

U ovom blog postu ću detaljno objasniti kreiranje tipova ekrana dostupnih na osnovu osnovih šablona koje nudi LightSwitch ali i ostale specifičnosti koje su vezane za ove tipove ekrana:

  • New Data Screen
  • Search Data Screen
  • Details Screen
  • Editable Grid Screen
  • List and Details Screen

New Data Screen Template (šablon za kreiranje ekrana za unos podataka)

Ekran možemo kreirati desnim klikom u Solution Explorer-u na stavku Add Screen. LightSwitch nudi predefinisani skup šablona (screen template):

ScrenTemplate

Sigurno je da će se u budućnosti pojaviti veliki broj šablona i kontrola od strane developerske zajednice kojim će se moći obogatiti vizuelni identitet aplikacije ali naravno i njena funkcionalnost. Za početak ću kreirati ekran za unos podataka u entiet pacijent:

CreateNewPatient

Šablon koji se koristi za unos podataka je New Data Screen. Da bi kreirali ekran za pacijenta potrebno je da u listi Screen Data odaberemo entitet Patient. Za naziv ekrana LightSwitch nudi tekst CreateNewPatient. Ovo ne predstavlja labelu u stavci menija, koja će se pojaviti prilikom pokretanja aplikacije, nego naziv ekrana. Takođe, kako LightSwitch zna za veze između entiteta prilikom kreiranja ekrana nudi i mogućnost prikaza ostalih podataka koje su u vezi sa odabranim entitetom (pacijent), tačnije kolekciju recepata za pacijenta (Patient Prescriptions). Ovo znači da ako odaberemo ponuđenu kolekciju prilikom unosa osnovnih podataka o pacijentu da imamo mogućnost unosa podataka o receptima za datog novokreiranog pacijenta i to u momentu unošenja podataka o novom pacijentu. Za početak ću odabrati samo prikaz podataka o pacijentu prilikom unosa podataka. LightSwith ne omogućava drag and drop način postavljanja kontrola na ekran kao na primjer u kreiranje aplikacija u WPF ili Windows forms nego prikazuje podatke u Tree prezentaciji. Ovo nam omogućava korišćenje različitih šablona za prikaz istog tipa ekrana.

CreateNewPatientTree

U lijevom dijelu prikaza je spisak svih polja (PatientProperty) za dati ekran. Ukoliko nismo u prethodnom koraku odabrali kolekciju recepata za pacijenta to je moguće učini i klikom na Add Prescriptions na listi polja. Na ovom prikazu elemenata na ekranu je moguće izvršiti određene malipulacije sa poljima koji će biti prikazani na ekranu. Takođe je moguće isključiti polje da ne bude prikazano na ekranu tako što se odabere prikazano polje na spisku kontrola  u središnjem dijelu i isključi se vidljivost polja (Is Visible) ili se ukloni polje sa ekrana (npr. desnim klikom na kontrolu Update By i dugme Delete). Pokretanjem aplikacije naš novokreirani ekran izgleda kao na sledećoj slici:

CreateNewPatientApp

Naziv stavke menija je Create New Patient. Ovaj naziv, kao i redoslijed pojavljivanja stavki menija za ekrane, se može promijeniti  desnim klikom u okviru Solution Exlorer-a na aktivni projekat, pa Properties, potom Screen Navigation. Selekcijom na željeni naziv ekrana u okviru liste Tasks se dobija konteksualni meni pomoću koga možemo odraditi izmjenu naziva ekrana (Rename). Redoslijed pojavljivanja stavki menija je moguće promijeniti pomoću strelica sa desne strane, dok se ekran koji bi trebalo da se prvi pojavi prilikom pokretanja aplikacije postavlja sa dugmetom Set u stavci Current startup screen.

RenameScreen

LightSwitch omogućava da se vrši izmjena elemenata ekrana u toku izvršavanja programa. Time se značajno ubrzava razvoj aplikacije jer nije potrebno da pokrenemo aplikaciju, ustanovimo da na ekranu nije dobra labela, pozicija elementa i slično, pa onda ponovo gasimo aplikaciju, vršimo izmjenu u okviru razvoja i tako u krug dok ne dobijemo željeni izgled ekrana. Dakle, u toku izvršavanja aplikacije, u Debug modu, je moguće vršiti izmjene klikom na Design Screen. Ukoliko bi željeli isključiti vidljivost polja Update By, potrebno je samo isključiti to polja putem check box Is Visible u okviru Appearance sekcije. Svaka izmjena u ovom modu je odmah vidljiva u desnom gornjem dijelu u okviru Customization Mode. Izmjene ćemo snimiti sa Save.

CreateNewPatientCutomization

Search Data Screen Template (šablon za ekran za pretraživanje)

Kada imamo unešene nove podatke u aplikaciji naredni logičan korak je kreiranje ekrana za pretraživanje unijetih podataka. Kreiraću ekran za pretraživanje za entitet pacijent pomoću šablona Search Data Screen.

SearchPatient

Pokretanjem aplikacije, kako je podešeno da se ekran za pretraživanje prvi pokreće, dobijamo sledeće:

SearchPatient1

U search polju je moguće unijeti bilo koji kriterijum (konkretno, unešen je kriterijum za pol – Male), tj. možemo pretraživati podatke na osnovu bilo kog polja iz entiteta pacijent. Polje će biti pretraživo u ekranu za pretraživanje ako je na nivou entiteta podešeno da je polje Is Searchable:

IsSearchable

Takođe, LightSwitch omogućava export podataka u Excel. Klikom na Full Name se pokreće ekran sa detaljima o pacijentu (naredna sekcija).

Details Screen Template (šablon za ekran za prikaz detalja)

Ovaj šablon služi za kreiranje ekrana koji se koriste na dva različita bitna mjesta za aplikaciju:

  • Prilikom unosa podataka (nakon snimanja podataka)
  • Prilikom pretraživanja (izborom određene stavke)

U oba ova slučaja se pokreće ekran sa detaljnim podacima putem koga je moguće mijenjati podatke. Izborom ovog šablona i željenog entiteta (entitet pacijent) LightSwitch nudi pored detalja za entitet i ostale entitete koju su u vezi sa ovim entitetom (recepti).

DetailScreen

Prilikom kreiranja ekrana za detaljne podatke možemo odabrati da ovaj ekran bude default ekran za detaljne podatke. To znači da će se ovaj ekran pojaviti odmah nakon unosa podataka (nakon Save komande) ili prilikom izbora stavke na ekranu za pretraživanje. Ukoliko smo propustili da odaberemo stavku Use as Default Details Screen na ovom mjestu to možemo naknadno učiniti izborom entiteta pacijent i u sekciji Default Screen odabrati željeni Detailekran.

DefaultScreenEntity

E sad, pitanje može biti  kako smo znali da se baš na ovom mjestu u okviru entiteta nalazi opcija za Default Detail Screen. Uvidom u Code Behind konkretnog ekrana, tj. kako se Default Detail Screen pojavljuje nakon snimanja podataka putem ekrana za kreiranje novih podataka (CreateNewPatient) uvidom u metodu za snimanje podataka:

partial void CreateNewPatient_Saved()
{
  // Write your code here.
  this.Close(false);
  Application.Current.ShowDefaultScreen(this.PatientProperty);
}

možemo vidjeti da se za entitet Patient tačnije za njegov atribut PatientProperty proziva metoda ShowDefaultScreen što nam daje trag do lokacije gdje se podešava Default Screen. Kod za snimanje možemo dobiti preko Solution Explorer, desni klik na ekran za kreiranje pacijenata te View Screen Code:ViewScreenCode

Editable Grid Screen Template (šablon za ekran za “editabilni grid”)

Ovaj ekran prikazuje podatke kao Search Screen s tim da je moguće vršiti izmjenu podataka u samom gridu ali postoji i mogućnost dodavanja novih stavki, izmjenu i brisanje podataka:

EditablePatientGrid

List and Details Screen Template (šablon za ekran za prikaz liste i detalja)

Omogućava prikaz liste podataka za jedan entitet. Klikom na određenu stavku se prikazuju svi detaljni podaci putem koga je moguće vršiti izmjenu podataka:

PatientListDetail

Zaključak

Na osnovu prethodnih primjera sam pokazao mogućnost kreiranja različitih ekrana za manipulaciju podataka a kreiranih na osnovu entieta. Visual LightSwitch nudi izbor osnovih šablona kojim se može zadovoljiti većina potreba prilikom kreiranja poslovnih aplikacija.

U narednom blog postu ću pokazati napredne tehnike prilikom korišćenja Screen Designer-a sa kojim se značajno upotpunjuje funkcionalnost dizajnera ekrana a samim tim i funkcionalnost poslovne aplikacije koja se kreira korišćenjem prikazanih metoda.

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, Step by Step and tagged , , , , . Bookmark the permalink.

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