Članak objavljen na www.itpro.ba, Aprila 2011.

U prethodnom dijelu vidjeli smo da se Aplikacijski framework za Windows Phone 7 sastoji iz dva dijela, a jedan od njih je razvoj Silverlight aplikacija. Silverlight za Widnows Phone 7 baziran je na Silverlightu 3, što znači da Silverlight za Windows Phone 7 i Silverlight 3 imaju isti skup baznih klasa odnosno dijele isti BCL. Izmjene koje su urađene da se Silverlight 3 integrira na Widows Phone 7 sastojao se u modifikaciji određenih dijelova čisto da se postignu bolje performanse sistema, bolja integracija sa hradwerskim komponentima, kao i integracija sa operativnim sistemom. Pored ovog bilo je potrebno da se uskladi i skup posebnih API-a, specifičnih samo za telefone kao što su GPRS, GPS, razni akceleratori, flesh i slično.
Gledajući Silverlight 3 i novosti koje su stigle s njim, možemo kazati da je tehonlogija Out-of-browser najznačajnije proširenje. Tehnologija out-of-browser predstavlja mogućnost pokretanja Silverlight aplikacije i izvan web browsera. Ova tehnologija dosta je zainteresirala korisnike, jer pruža mogućnost da se jednom implementacijom omoguće dva načina korištenja aplikacije. Upravo out-of-browser je način na koji se Silverlight aplikacije izvršavaju na Windows Phone 7, te ne postoji Silverlight in-browser modul u Windows Phone 7.

METRO dizajn

Da bi razvijali aplikacije u Silverlightu na Windows Phone 7, nije potrebno posebno znanje osim što je već potrebno pri razvoju običnih Silverlight 3 aplikacija. Međutim, sa Windwos Phone 7 dolazi novi dizajn korisničkog interfacea popularno nazvanog METRO. METRO je skup dizajnerskih normi prilagođenih razvoju korisničkih iskustava na Windows Phone 7 platformi. Inspiracija za naziv METRO nađena je u znakovima koji se nalaze po metroima velikih gradskih četvrti. Znakovi koji se većinom predstavljaju nekom jednostavnom grafikom postavljenom u krug, sa često monohromatskim bojama savršeno se uklapa u novi Windows Phone 7.
Skup kontrola koje se koriste u razvoju Windows Phone 7 aplikacija sa Silverlightom 3, ipak se razlikuju od standardnog skupa kontrola klasičnog Silverlight 3. Neke od kontrola jednostavno ne pristaju ovom operativnom sistemu, poput ScrollBar kontrole koja ima drugčiji smisao na ovoj platformi. Pored navedene kontrole skup kontrola koje nisu podržane u Windows Phone 7 su: Open i Save dijalog, Label kontrola,Kalendar, DataGrid, DatePicker GridSPlitter , Tab i ComboBox kontrola. Obzirom da Windows Phone 7 ne podržava Page i Frame kontrolu, ovaj mobilni operativni sistem uvodi specifične verzije tih kontrola i naziva ih PhoneApplicationFrame te PhoneApplicationPage kontrole. Za svaku kontrolu koja nije podržana sa Windows Phone 7 postoje i praktični razlozi, prvenstveno zbog mobilne platforme, ili se uvode zamjenske kontrole.

Novi koncept korisničkih iskustava Pivot i Pano

METRO uvodi dva nova koncepta korisničkih iskustava i to koncept panoa i pivota. Nova korisnička iskustva daju ovom operativnom sistemu originalan dizajn i jedinstveno korisničko iskustvo. METRO dizajn predviđa da aplikaciju ne treba ograničavati na širinu i dužinu ekrana telefona, nego da se prikazuje u orginalnoj veličini koja je skoro uvijek veća od dimenzija telefona. To znači da se cijeli sadržaj prikaže u memoriji telefona, a dok se dio prikazuje shodno hardwarskim dimenzijama telefona. Pomjerajući kursor lijevo ili desno otkriva se ostatak pregleda.Pivot i pano korisnička iskustva imaju dosta sličnosti i predstavljaju najbolji izbor pri razvoiju aplikacija na Windows Phone7. Oba korisnička iskustva cijepaju podatke u misaone, fizičke i logičke cjeline te ih prikazuju pojedinačno. Na ovakav način moguće je prikazati veću količinu podataka nego uobičajeno, a koja je istovremeno podjeljena na cjeline nad kojim se mogu vršiti interakcije od strane korisnika. Oba korisnička iskustva imaju standardne gesture lijevo, desno, natrag i sl, te su po prirodi ciklični, što znači kada se dođe do kraja s lijeve ili desne strane sadržaj se započinje prikazivati od početka.

Suštinska razlika izmeđi pivota i panela je da je pivot više namijenjen prikazu tabelarnih podataka grupisanih u cjeline kojih maximalno može biti do 7. Pivot korisničko iskustvo može predstavljati aplikacijski ili podatkovni upravljač za prikaz sličnih podataka u pivotu. Primjer pivot korisničkog iskustva može biti prikaz meteroloških podataka o određenoj lokaciji na više načina, sličan prikazu na slici 2. Pivot kontrola u ovom slučaju na različite načine prikazuje podatke o vremenu za određenu lokaciju.Isto tako, pivot može prikazivati u različitim cjelinama različite podatke što sve zavisi od namjene u kojoj upotrebljamo ovu kontrolu.

Panorama predstavlja horizontalni prikaz podataka, raspoređenih u cjeline. Cjeline predstavljaju skupove kontrola s kojim se vrši interakcija s korisnikom. Panorama je većinom ograničena do 4 cjeline, i kod kojih se ne zahtjeva implementacija aplikacijskog bara sa dodatnim opcijama. Panoramom se prikazuju određene radnje koje korisnik može uraditi u jednoj aplikaciji.
Ukoliko bi sumirali prednosti i mane oba korisnička iskustva imali bi sljedeću situaciju. Pivot je više efektivan i štedi memoriju u odnosu na panoramu koja je memorijski zahtjevnija. Ukoliko korisničko iskustvo treba aplikacijski bar sa dodatnim opcijama, tada se preporuča korištenje pivota. U release verziji Developer Tools za Windows Phone ovi koncepti dolaze kao kontrole i moguće ih je koristiti u razvoju aplikacija.

Novi koncept navigacije

Silverlight 3 i Silverlight za Windows Phone 7 definišu novi koncept navigacije u odnosu na prethodne verzije. Naime, u klasičnom modelu Back dugme svojom aktivacijom resetuje cijeli sadržaj stranice, što u Silverlight 3 to nije slučaj. Silverlight 3 uvodi pojam navigacijske aplikacije u kojoj se umjesto kontrole za prikaz sadržaja implementira kontrola Frame, u koji je moguće postaviti stranicu(Page), a Back dugme izmjenjuje prikaz različitih stranica i pritom ne resetuje podatke. Na ovaj način hardwaresko dugme koje mora sadržavati svaki uređaj sa Windows Phone 7 OS sada ima smisla i potpuno se uklapa u koncept Silverlight Navigacijskog tip aplikacija.
Pri razvoju Windows Pone 7 Silverlght aplikacija na raspolaganju su nam kontrole koje imaju vrlo istančan izgleda i prilagođen Windows Phone 7, odnosno dizajnirane su po METRO dizajn standardu. Kontrole predstavljaju originalne Silverlight 3 kontrole koje imaju stil definisan po METRO normama.

Visual Studio, Expression Blend razvojni alati za Windows Phone 7

Kao što smo prethodno naglasili , razvijati Windows Phone 7 aplikacije možemo dodatnim alatom koji se integrira u Visual Studio okruženje. Pri formiranju Silverlight Windows Phone 7 aplikacija kroz Visual Studio 2010 na raspolaganju su nam 5 šablona i to: Windows Phone Application, Windows Pone List Appliction i Windows Phone Class Library, te dva nova šablona koja su se pojavila te u release verziji alata i to: Windows Phone Panorama Application i Windows Phone Pivot Application . Prva dva šablona koristimo za razvoj Silverlight aplikacija, dok treći šablon koristimo za razvoj komponenti koje se mogu iskorištavati u više od jedne Silverlight Window Phone 7 aplikacije. Zadnja dva šablona koristimo pri razvoju aplikacija koje koriste nove koncepte panoa i pivot korisničkih iskustava.
Svaki početni projekat za Windows Phone 7 aplikacije sadrži dodatne dvije reference u odnosu na klasični projekat i to: Microsoft.Phone, te Microsoft.Phone.Interop. Kako Silverlight Windows Phone 7 aplikacije ne podržavaju In-browser modul, to je i izostavljena referenca na System.Windows.Browser, preko koje je upravo omogućen ovaj modul.
Dvije su osnovne datoteke svakog početnog projekta generiranih VS2010 dizajnerom i to: App.xaml datoteka aplikacije u kojoj su deklarisani osnovni događaji aplikacije te podijeljeni resursi, stilovi, šabloni podataka i sl., te MainPage.xaml- datoteka predstavlja implementaciju osnovnog prozora aplikacije odnosno osnovna stranica aplikacije sa jednim okvirom, preko koje se dodaju dodatne stranice po potrebi, odnosno različiti pogledi (Views) podataka koji se korisniku aplikacijom želi prikazati.

Pored osnovnih xaml datoteka pri formiranju novog Windows Phone 7 Silverlight projekata nalaze se još i nekoliko početnih grafičkih biblioteka.
Novi Silverlight za Windows Phone 7 projekat možemo fomirati i iz Exprssion Blend 4 za Windows Phone, dodatak koji dolazi u paketu razvojnog alata. Na gotovo identičan način možemo formirati novi projekat. Kolaboracija između developera i dizajnera i na Windows Phone 7 je također obezbjeđena, te predstavlja nastavak Microsoftove koncepcije razvoja aplikacija sa bogatim korisničkim iskustvima.

Silverlight Demo za Windows Phone 7

Na kraju ovog članka pokazaćemo jednostavnu demo aplikaciju preko koje je moguće pregledavati Twitter račune, jednostavnog naziva TwitterAccounBrowser. U tu svrhu otvorimo VS2010 i formirajmo novu Windows Phone 7 Silverlight aplikaciju, izabirući Windows Phone Application šablon.
Na samom početku potrebno implementirati GUI aplikacije koji se sastoji od: TextBox, Button te ListBox kontrole koja će sadržavati listu statusnih poruka. Raspored kontrola naslova aplikacije prikazana je na narednoj slici. U prostor aplikacije odvucite TextBox, Button kontrolu, te ListBox kontrolu ispod. Krajnji raspored kontrola trebao bi biti sličan kao na narednoj slici.

Nakon definisanja rasporeda slijedi implementacija logike aplikacije. Da bi mogli izlistati statusne poruke određenog korisnika, potrebno je definisati posebnu klasu odnosno tip podataka koja implementira jedan Tweet ili statusnu poruku, odnosno klasu koja u sebi sadrži članove naziva, teksta te datuma objavljivanja teksta odnosno detalja.
Na narednom listingu prikazana je implementacija klase Tweet:

//Klasa za generiranje statusnih poruka twittera
public class Tweet
{
    public string NazivRacuna { get; set; }
    public string Poruka { get; set; }
    public string Avatar { get; set; }
    public string DetaljiPoruke { get; set; }
}

Kada smo definisali klasu Tweet, sada je potrebno implementirati događaj za izlistavanje poruka. Dva puta brzo kliknite na dugme prikaži, VS vas prebacuje u code-behind datoteku. Korištenje Twitter servisa je vrlo jednostavno i više informacija možete dobiti na oficijelnoj stranici twittera. Naredni listing prikazuje implementaciju događaja prikaži.

private void button1_Click(object sender, RoutedEventArgs e)
{
    WebClient twitter = new WebClient();
    twitter.DownloadStringCompleted +=new
        DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
    twitter.DownloadStringAsync(
        new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + textBox1.Text));
}

Implementacija događaja sastoji se od formiranja objekta web klijenta, te prosljedjivanje upit preko web klijenta Twitter servisu. Obzirom da web servis pozivamo asihrono, potrebno se pretplatiti na događaj DownladStringCompleated da bi preuzeli sadržaj koji nam je servis vratio. U tom smislu implementacija se sastoji u tome da se preko LINQ to XML izvuku detalji koji su nam potrebni. Sljedeći listing predstavlja implementaciju popunjavanja liste sa porukama korisnika.

void  twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    try
    {
        XElement element = XElement.Parse(e.Result);
        listBox1.ItemsSource = element.Descendants("status").
                                Select(x=>
                                new Tweet
                                {
                                    NazivRacuna = x.Element("user").Element("screen_name").Value,
                                    Poruka = x.Element("text").Value,
                                    Avatar = x.Element("user").Element("profile_image_url").Value,
                                    DetaljiPoruke = DateFormat(x.Element("source").Value, x.Element("created_at").Value)
                                });
        PageTitle.Text = textBox1.Text;
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message);
    }
}
private string DateFormat(string source,string val)
{
    string format = "ddd MMM dd HH:mm:ss zzzz yyyy";
    DateTime dt = DateTime.ParseExact(val, format, CultureInfo.InvariantCulture);
    return dt.ToString("hh:mm d MMM") + " via " + Regex.Replace(HttpUtility.HtmlDecode(source), @"]*>", "");
}

Ovdje smo kao posebnu metodu izbacili formatiranje detalja poslane poruke, tako da nam listing izgleda kao na klasičnim twitter klijentima. Kako koristiti LINQ to SQL i šablone podataka kao i općenito WPF možete pogledato useriji blog postova o WPF i LINQ to SQL na http://www.bhrnjica.wordpress.com. Na kraju ovog jednostavnog dema potrebno je još implementirati šablon podataka listBox kontrole.
Implementacija šablona podataka list box kontrole dat je na sljedećem listingu:

<ListBox Height="518" 
         HorizontalAlignment="Left" 
         Margin="21,84,0,0" 
         Name="listBox1" 
         VerticalAlignment="Top" Width="444" >
    <ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding Avatar}" 
                   Height="73" Width="73" 
                   VerticalAlignment="Top" Margin="0,10,8,0"/>
            <StackPanel Width="370">
                <TextBlock Text="{Binding NazivRacuna}" 
                           Foreground="#FF2276BB" FontSize="28" />
                <TextBlock Text="{Binding Poruka}" 
                           TextWrapping="Wrap" FontSize="24" />
                <HyperlinkButton Content="{Binding DetaljiPoruke}" 
                                 Height="30" HorizontalAlignment="Left" 
                                 VerticalAlignment="Top" FontSize="18" 
                                 Foreground="#FF999999" />
            </StackPanel>
        </StackPanel>
    </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Kada smo sve prethodno implementirali pokrenimo aplikaciju pritiskom na tipku F5, i dobijamo na ekranu windows Phone 7 emulator. U text box kontrolu ukucajmo račun of twittera, te kliknimo na dugme Pretraži. Nakon nekoliko trenutaka pojavljuju se poruke dotičnog korisnika. Naredna slika pokazuje naš demo u akciji.

Šablon podataka list box kontrole mogli smo i dizajnirati preko Expression Blend 4 for Windows Phone aplikacije, te sa pravim dizajnerskim alatom dizajnirati našu aplikaciju, te na taj način osjetiti svu žar u dizajniranju i implementaciji Windows Phone 7 aplikacija.
Izvorni kod za ovaj članak možete skinuti ovdje.

Zaključak

Windows Phone 7 izlazi u periodu kada su iPhone i Android na vrhuncu i usponu. Moglo bi se reći u nezgodno vrijeme, međutim novi mobilni OS ima što ponuditi i zasigurno će zauzeti svoje mjesto na tržištu, te vrlo brzo postati konkurencija i mobilni operativni sistem koji obećava. Izlaskom prve verzije Windows Phone 7 neće imati multitasking, i to će mu biti najveći nedostatak, unatoč drugim prednostima koje ima u odnosu na pomenutu konkurenciju. Ono što Windows Phone 7 stavlja u vodeće mobilne OS-ove, je zasigurno vrlo kvalitetan razvojni alat koji smo pokušali predstaviti u ovoj seriji članaka. Visual Studio 2010 kao primarni razvojni Microsoftov proizvod, predstavlja danas najsofisticiraniji i najpopularniji developerski alat, koji će ovim potezom biti obogaćen novom platformom. Razvijati aplikacije za Windows Phone 7 preko Visual Studia 2010 i Expression Blend 4 znači imati u rukama pravi alat, s kojim je moguće razvijati visokokvalitetna grafička rješenja, sa visokim performansama kako video igara tako i cijeli spektar aplikacija u Silverlightu, od korištenja Cloud servisa do bussiness aplikacija. Windows Phone kao ni jedan mobilni operativni sistem do sada pruža bezbroj mogućnosti, potpuno novi koncept upravljanja i rada sa mobilnim aplikacijama, te inovativna korisniča iskustva. Sa pivot i panel novim konceptom komunikacije korisnika i uređaja otvara se novi spektar razvoja aplikacija, te prikaza podataka. Silverlight tehnologija koja je tehnologija broj 1 korištena u Windows Phone 7 predstavlja još jedan korak naprijed ka unifikaciji i objedinjavanju razvoja aplikacija za različite platforme.