LightSwitch i Web

imageLightSwitch omogućava rad sa web-om na više načina. Kada kažem web mislim da se kroz LightSwitch može na različite načine ili prikazati web stranica u okviru samo okruženja LS ili mogućnost korištenja linka kojim bi se opet došlo do određene Web stranice.

Dakle, ono što će biti prikazano su sledeće funkcionalnosti:

  • korištenje linka za pokretanje web stranice
  • pokretanje web stranice u okviru ekrana
  • prikaz BING mape u okviru ekrana

Update (03.sept.2011): Cijeli Solution ovog blog post-a kao i opis projekta na engleskom jeziku je dostupan na Microsoft Samples Gallery – How to make Web access in LightSwitch application (2.5 MB).

Pokretanje linka

Entitet koji će biti korišten za primjer:

image

MapQuery je ComputedProperty sa kodom:

partial void MapQuery_Compute(ref string result)
{
  result = Address + ", " + City + ", " + PostCode + ", " + Country;
}

Cilj ovog polja je da se na osnovu njega locira adresa koju prima BingMap ekstenzija.

Da bi olakšali prikaz podataka, uvešću provjeru unosa podatka za WebPage pomoću Regex-a kako bi url sadržao http://:

partial void WebPage_Validate(EntityValidationResultsBuilder results)
{
  if (WebPage != null)
  {
    if (!System.Text.RegularExpressions.Regex.IsMatch(WebPage, @"http://"))
    {
      results.AddPropertyError("Provide a valid web page (ex http://)");
    }
  }
}

Sledeći korak je iniciranje prozivanja web stranice preko klasične kontrole dugmeta. Ono što želim da ostvarim su dvije različite pozicije dugmadi Send Email i Go To Web Page prikazane na ekranu korištenjem šablona List and Detail Screen:

image image

Možemo primjetiti u prvoj varijanti da je prostor za dužina labela za prva dva reda različit od ostalih redova. Razlog tome je što se dužina labele određuje na osnovu polja sa najdužom labelom i to važi za polja koja se nalaze u istoj grupi. Kako su prvi red, drugi red i ostali redovi u tri različite grupe, otud i razlika širine labele za polja.

Da bi ostvarili prvu varijantu, potrebno je da kreiramo grupe da bi se ostvario efekat prikaza polja iz entiteta i dugmeta u istom redu tako što kreiramo grupu sa Column Layout i u toj grupi postavimo još dvije grupe sa Rows Layout koje će sadržavati po jedan elemenat: polje iz entiteta i dugme:

image

Kada imamo definisan željeni izgled ekrana potrebno je da prozovemo metodu za prikaz Web stranice ili slanja maila. U oba slučaja se radi o hyperlink-u s tim što za slanje maila treba dodati mailto:. Postavlja se pitanje kako da dođemo do vrijednosti (ono što je unešeno prilikom unosa podataka) za određena polja, tačnije za Email i Web Page kako bi vrijednosti u tim poljima iskoristili za poziv metode za slanje emaila ili pokretanje web stranice. Intuitivno, možemo kliknuti na Web Page property u Tree prezentaciji ekrana i pogledati šta se nalazi u Properties/Data Binding. Primjetićemo da je prikazana vrijednost: Customers.SelectedItem.WebPage. E upravo tu vrijednost ću iskoristiti za dugme za otvaranje Web stranice:

partial void Web_Execute()
{
  string url = this.Customers.SelectedItem.WebPage;
  Utils.OpenWebPage(url);
}

ili za slanje maila iz default mail klijenta:

partial void Email_Execute()
{
  string url = "mailto:" + this.Customers.SelectedItem.Email;
  Utils.OpenWebPage(url);
}

Kako nisam želio da u klasi ekrana kreiram funkciju za otvaranje stranice OpenWebPage jer želim da je koristim i iz drugih ekrana kreiraću klasu koja će biti dostupna svim ekranima moje aplikacije. Prebaciću se u File View projekta (toolbar iznad Solution Explorer-a) i na putanji Client/User Code ću dodati klasu (Add Class…) sa nazivom Utils.cs. Kreiraću metodu OpenWebPage koja mora biti statička i koja će primiti jedan parametar: url koji predstavlja stranicu koju je potrebno pokrenuti:

static public void OpenWebPage(string url)
{
  Dispatchers.Main.Invoke(() =>
  {
    try
    {
      if (AutomationFactory.IsAvailable)
      {
        //desktop variant of LS app
        dynamic shell = AutomationFactory.CreateObject("Shell.Application");
        shell.ShellExecute(url);
      }
      else
      {
        //Web variant of LS app
        HtmlPage.Window.Navigate(new Uri(url), "_blank");
      }
    }
    catch (Exception ex)
    {
      throw ex;
    }
  });
}

Par napomena za metodu OpenWebPage u klasi Utils.cs:

  • potrebno je dodati referencu na System.Windows.Browser kako bi se u Web modu aplikacije mogla koristiti funkcionalnost HtmlPage.Window.Navigate koja prikazuje sadržaj Web stranice u Web brower-u. Referenca se dodaje u File View projekta na putanji Client/References/Add References te se odabere System.Windows.Browser biblioteka.
  • Dispatchers.Main.Invoke se koristi kako bi se funkcionalnost pokrenula u UI thread-u. Inače ne bi radilo.

Da bi ova klasa bila vidljiva na bilom kom ekranu potrebno je da se uključi using direktiva sa using LightSwitchApplication.UserCode; pri čemu je LightSwitchApplication namespace naše aplikacije. Ovo se odnosi na ekran iz koga prozivamo klasu Utils.cs

Kao rezultat prethodnih akcija, pokretanje Web stranice će uvijek otvarati Web stranicu u Web browser-u pri čemu će se koristi različiti načini prozivanja browser-a u zavisnosti da li se LightSwitch app pokreće u Desktop modu ili Browser modu.

Pokretanje web stranice u okviru ekrana

Ideja je da se iskorsti ekran za prikaz web stranice u okviru samog ekrana. Možemo koristi šablon SearchScreen bez da se izabere Screen Data sa nazivom ekrana OpenWebPage. Na ekranu ću postaviti jedan Text Box sa sadržajem linka i dugme Go To Link koji proziva popunjavanje WebBrowser kontrole:

OpenWebPage

Dakle, kreiraću Text box sa nazivom Link sa Add Data Item i postaviću ga na željenu lokaciju. Potom ću u Screen Comander Bar kreirati dugme GoToLink i prevući ga na željenu lokaciju. Grupe su korištene kako bi se elementi rasporedili u istom redu. Na kraju ću dodati još jedan lokalni property sa Add Data Item tipa String sa nazivom cWebPage, postaviti ga na željenu lokaciju (mjesto gdje će se prikazati web stranice u okviru ekrana), postaviti Stretch za Sizing property i promijeniti mu Control Type na Custom te odabrati sa Change referencu na System.Windows.Controls.WebBrowser. Na kraju je kontroli cWebPage potrebno postaviti Label Position na None kako se labela uopšte ne bi vidjela.

image

U klasi, tj. ekranu OpenWebPage (ovo je različito od metode  u klasi Utils.cs) koji se koristi za prikaz Web stranice postaviti sledeći kod:

public partial class OpenWebPage
{
  private string url = "";
  private void webControlAvailable(object sender, ControlAvailableEventArgs e)
  {
    if (url!=null)
    {
      try
      {
       ((System.Windows.Controls.WebBrowser)e.Control).Navigate(new Uri(url, UriKind.Absolute));
      }
      catch (Exception ex)
      {
        this.ShowMessageBox(ex.Message.ToString());
      }
    }
  }
  partial void GoToLink_Execute()
  {
    url = this.Link;
    this.FindControl("cWebPage").ControlAvailable += webControlAvailable;
  }
}

Metoda GoToLink_Execute okida kontrolu cWebPage i prosljeđuje joj url koji treba da prikaže preko Navigate metode kontrole WebBrowser.

Napomena: ovaj primjer ne radi u Web browser modu jer SilverLight 4 ne podržava WebBrowser kontrolu te je trenutno teško ostavariti da se u okviru ekrana pokrene Web stranica kada je aplikacija pokrenuta za Application Type:Web. Rješenje je da se stranica pokrene na način kako je to odrađeno za primjer pokretanja stranice putem linka.

I na kraju, ukoliko bi umjesto:

((System.Windows.Controls.WebBrowser)e.Control).Navigate(new Uri(url, UriKind.Absolute));

koristili

((System.Windows.Controls.WebBrowser)e.Control).NavigateToString(html);

pri čemu je html – html kod mogli bi u okvriu ekrana dobiti prikaz tog html koda kao na slici:

image

Prikaz BING mape u okviru ekrana

Želim da u okviru postojećeg ekrana za pregled i promjenu podataka za entitet Customer vidim i lokaciju u okviru BING mape a na osnovu podataka o adresi koje sam unio.

image

Da bi ovaj primjer mogao da funkcioniše, potrebno je prvo instalirati BING Map ekstenziju (nalazi se u o okviru projekta . vsix fajl je potrebno pokrenuti dvoklikom). Putem ekstenzije se proširuje funkcionalnost LightSwitch aplikacije. Nakon instalacije i restarta Visual Studio okruženja u sekciji Extensions dobijamo:

BingMapControl

Postavljanje kontrole za prikaz mape se vrši tako da se za prethodno kreirani string MapQuery (koji sam kreirao kao ComputedProperty u entitetu Customer) postavi na željeno mjesto na ekranu:

image

te da se promijeni tip kontrole u Bing Map Control. Da bi kontrola mogla da funkcioniše potrebno je unijeti Bing Map Key koji se obezbjeđuje na stranici https://www.bingmapsportal.com/.

BingMapKey

Alternativno sam kreirao još jedan ekran MapScreen koji kao parametar prima adresu. Cilj ovog ekrana je da na prostoru cijelog ekrana prikaže BING mapu sa lokacijom. Pokretanje ekrana se vrši preko linka Show Full Map… na ekranu Customer List Detail 1:

image

Napomena: Potrebno je da obezbijedite svoj BING Map key kako bi BING mapa funkcionisala inače će na mapi biti prikazan sadržaj: Invalid Credentials. Sign up for developer account.

U okviru projekta se nalazi ekstenzija: BingMapControl.vsix koju je potrebno instalirati prije pokretanja primjera. Ako postoje problemi sa Solution, odraditi Rebuild projekta.

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.

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