Navigácia v rámci aplikácie

U aplikácií pre klasické PC sa dá využiť pomerne veľká plocha obrazovky na zobrazenie viacerých, prípadne všetkých informácií a ovládacích prvkov, ktoré aplikácia využíva. Pri menšom displeji zariadení s operačným systémom Windows Phone 7 je kontext aplikácie pre dosiahnutie zrovnateľného komfortu rozdelený do viacerých obrazoviek ktoré je možné prepínať alebo použiť displej ako posúvateľné okno náhľadu na obsah. Nemusí sa jednať o jednu aplikáciu. Aj keď postupne pracujete s viacerými aplikáciami, máte celkový dojem, ako keby ste boli v jednej komplexnej aplikácii pre osobnú produktivitu. Nie je to len dôsledok unifikovaného dizajnu, ale práve ste objavili zámer tvorcov platformy združovať funkcie do logických celkov, nazývaných v originálnej terminológií Hubs. Aktuálna verzia obsahuje “haby”: People, Pictures, Music, Office, Games a Marketplace.

Navigácia medzi stránkami

Najskôr ukážeme jednoduchý príklad navigácie na inú stránku. Na domácej stránke pridáme tlačidlo, pomocou ktorého sa používateľ bude navigovať na inú stránku.

<!–ContentPanel – place additional content here–>

<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>

<StackPanel>

<Button Content=”nápoveda” Name=”btHelp” />

<TextBlock Text=”Domáca stránka aplikácie” Foreground=”LightCyan” />

</StackPanel>

</Grid>

Teraz je potrebné vytvoriť ďalšiu stránku. Pomocou kontextového menu Add > New Item aplikovaného na názov projektu pridajte novú stránku, čiže objekt Windows Phone Portrait Page a pomenujte ju Napoveda.xaml

Pridanie novej stránky do projektu

private void btHelp_Click(object sender, RoutedEventArgs e)

{

NavigationService.Navigate(new Uri(“Napoveda.xaml”, UriKind.Relative));

}

Všimnite si riadok kódu pre navigovanie na inú stránku aplikácie. V závislosti na aplikačnej logike je samozrejme potrebné zaistiť, aby sa používateľ mohol navigovať späť na hlavnú stránku aplikácie.

Pomocou tlačidla je možné prejsť na novú stránku

Aplikačná lišta

Aplikačná lišta je určitou náhradou klasického ovládania pomocou kombinácie tlačidlovej lišty a roletového menu. V štandardnom stave sa v prípade použitia aplikačnej lišty zobrazujú okrúhle tlačidlá. Po kliknutí na symbol troch bodiek v pravej časti lišty sa lišta rozvinie smerom nahor a zobrazia sa textové položky ekvivalentu roletového menu.

Vytvorenie aplikačnej lišty je jednoduché. Dokonca V dolnej časti šablóny stránky je v komentári šablóna kódu pre vytvorenie aplikačnej lišty pre ApplicationBar

<!–Sample code showing usage of ApplicationBar–>

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar IsVisible=”True” IsMenuEnabled=”True”>

<shell:ApplicationBarIconButton

IconUri=”/Images/appbar_button1.png” Text=”Button 1″/>

<shell:ApplicationBarIconButton

IconUri=”/Images/appbar_button2.png” Text=”Button 2″/>

<shell:ApplicationBar.MenuItems>

<shell:ApplicationBarMenuItem Text=”MenuItem 1″/>

<shell:ApplicationBarMenuItem Text=”MenuItem 2″/>

</shell:ApplicationBar.MenuItems>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

 

Táto šablóna kódu slúži skôr ako návod na použitie, nedá sa použiť bez úprav. Do projektu je potrebné doplniť adresár napríklad s názvom Obrázky s obrázkami pre jednotlivé ikony tlačidiel. Obrázky majú rozmer 48 x 48 pixelov. Ikona vo vnútri obrázku nesmie prekročiť rozmer 26 x 26 pixelov. Krúžok okolo ikony bude dokreslený automaticky. Odporúčame bielu farbu na transparentnom pozadí. Aby boli obrázky zahrnuté do inštalačného XAP súboru, je potrebné ich označiť a zmeniť nastavenie parametra Build Action z hodnoty Resource na hodnotu Content.

Pridanie adresára s ikonami

Teraz môžete doplniť odkazy na ikony a v prípade potreby aj textové položky menu.

<!–Sample code showing usage of ApplicationBar–>

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar IsVisible=”True” IsMenuEnabled=”True”>

<shell:ApplicationBarIconButton IconUri=”/Obrazky/search.png” Text=”Vyhľadať”/>

<shell:ApplicationBarIconButton IconUri=”/Obrazky/save.png” Text=”Uložiť”/>

<shell:ApplicationBarIconButton IconUri=”/Obrazky/refresh.png” Text=”Obnoviť”/>

<shell:ApplicationBar.MenuItems>

<shell:ApplicationBarMenuItem Text=”Vyhľadať”/>

<shell:ApplicationBarMenuItem Text=”Uložiť”/>

<shell:ApplicationBarMenuItem Text=”Obnoviť”/>

</shell:ApplicationBar.MenuItems>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

Test aplikačnej lišty

Zverejnené v kategórií Win Phone 7 | Tagged , , , | Pridaj komentár

Tvorba používateľského rozhrania

Používateľské rozhranie aplikácie musí rešpektovať obmedzenia vyplývajúce s použitého hardvérového zariadenia. Týka sa to rozmerov displeja, či filozofie ovládania dotykom prsta na kapacitnom displeji. Ovládanie prstom je intuitívne, bezprostredné, no na rozdiel od dotykového pera, ktorého tenký hrot zasiahne plochu približne 3 x 3 pixely, prst zasiahne plochu zhruba desaťkrát väčšiu. Najlepšie si to predstavíte priložením prsta na ovládací prvok existujúcej aplikácie a porovnaním rozmerov.

Kontejnery pre rozmiestnenie prvkov

Skôr než sa prepracujeme ku konkrétnym možnostiam a oblasti použitia jednotlivých prvkov je potrebné venovať sa ich rozmiestneniu na ploche aplikácie. Pre tento účel sú k dispozícii takzvané kontejnerové objekty, ktoré zapuzdrujú v nich umiestnené ovládacie prvky, čím určujú niektoré ich vlastnosti ale hlavne ich veľkosť, umiestnenie a vzájomnú polohu. Kontejnerové prvky môžu zapuzdrovať nielen ovládacie prvky, ale aj ďalšie kontejnery. Pre zapuzdrovanie prvkov sa využívajú kontajnerové objekty

  • Grid
  • Canvas
  • Stack Panel

Na najvyššej úrovni je celá plocha aplikácie, kde je umiestnený hlavný kontejnerový prvok typu Grid pomenovaný Layout Root. Tento rozdeľuje plochu vertikálne na dve časti- TitlePanel a ContentPanel.

Na prvom riadku mriežky (Grid.Row=”0″) vnorený kontejner StackPanel, ktorý udržuje prvky Text Block nad sebou. Druhý riadok, definovaný pomocou hviezdičky ako flexibilný je zvyšná plocha aplikácie.

ContentPanel je tvorený zatiaľ prázdnym vnoreným kontejnerom Grid.

<!–LayoutRoot is the root grid where all page content is placed–>

<Grid x:Name=”LayoutRoot” Background=”Transparent”>

<Grid.RowDefinitions>

<RowDefinition Height=”Auto”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

 

<!–TitlePanel contains the name of the application and page title–>

<StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>

<TextBlock x:Name=”ApplicationTitle” Text=”PRVÁ APLIKÁCIA…

<TextBlock x:Name=”PageTitle” Text=”Úvodná strana” Margin=”9,-7,0,0″

</StackPanel>

 

<!–ContentPanel – place additional content here–>

<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″></Grid>

</Grid>

 

Kontejnerový objekt Grid je definovaný ako mriežka vytvorená z riadkov a stĺpcov. Umožňuje flexibilné usporiadanie ostatných prvkov. Veľkou výhodou je aj možnosť zadávať rozmery mriežky nielen ako konkrétne hodnoty v pixloch, ale aj relatívne, prípadne automaticky podľa obsahu. Pre tento účel sa využíva takzvaná hviezdičková konvencia definovania rozmerov (v anglickej terminológii Star sizing).

Pre definíciu riadkov sa využíva element Grid.RowDefinitions, ktorý je vo vnútri elementu Grid. Konkrétne riadky sa definujú pomocou elementu RowDefintion. Podobne je to aj pri stĺpcoch. Sekcia stĺpcov sa definuje pomocou elementu, Grid.ColumnDefinitions a konkrétne stĺpce cez elementy ColumnDefinition.

Kontejner StackPanel umiestňuje prvky do jednej línie a to buď horizontálne alebo vertikálne, takže vizuálne to znamená prvky umiestnené v rade alebo prvky umiestnené nad sebou. Implicitná orientácia usporiadania je vertikálna.

Kontejner Canvas sa používa tam, kde je potrebné rozmiestniť prvky na presne definované miesto. Preklad tohto pojmu do slovenčiny je pomerne výstižný, Je to virtuálne maliarske, prípadne premietacie plátno. Na túto plochu sa potom umiestňujú grafické objekty. Kontejnerový objekt Canvas definuje oblasť, v ktorej sa dajú elementy umiestňovať na absolútne pozície. Ideálne sa hodí na priame kreslenie grafických prvkov.

Ovládacie prvky používateľského rozhrania

Formulár bude obsahovať textové nápisy v prvkoch TextBlock, pole typu TextBox pre vstup textu a tlačidlo, teda prvok Button. Preto je potrebné do virtuálnej mriežky Grid pridať ďalší riadok.

<Grid.RowDefinitions>

<RowDefinition Height=”Auto”/>

<RowDefinition Height=”Auto”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

Ako vyplýva z názvu prvku Grid (česky mriežka), je možné tento prvok rozdeliť na viac polí a do týchto polí umiestniť prvky u ktorých sa požaduje určitá vzájomná pozícia. Typickým príkladom je trebárs pole pre zadanie hodnoty a pred ním textové pole, ktoré vysvetľuje jeho význam. Tieto dva prvky je potrebné udržiavať vždy v takej polohe, aby textové pole bolo vždy vľavo od poľa pri zadanie hodnoty. Takto do jedného riadku do dvoch stĺpcov umiestnime pole pre zadanie textu a tlačidlo.

Pre kontext je pripravená šablóna kódu

!–ContentPanel – place additional content here–>

<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″></Grid>

Do aplikácie pridáme dva prvky TextBoxButton.

<!–ContentPanel – place additional content here–>

<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”*” />

<ColumnDefinition Width=”Auto”/>

</Grid.ColumnDefinitions>

<TextBox Grid.Column=”0″ Name=”tbZadaj”

FontSize=”{StaticResource PhoneFontSizeExtraLarge}” />

<Button Grid.Column=”1″ Name=”btPotvrd” Content=”Potvrd”

HorizontalAlignment=”Right” Padding=”4″ />

</Grid>

 

Aby sme zaistili ľahšie ovládanie na dotykovej obrazovke, nastavili sme pre TextBox väčšie písmo (FontSize=”{StaticResource PhoneFontSizeExtraLarge}”).

Pre výpis oznamu pre používateľa pridáme do tretieho riadku hlavného gridu prvok TextBlock. Aby sme ho videli aj vo vizuálnom návrhu vložili sme do neho namiesto textu bodky.

<TextBlock Grid.Row=”2″ Name=”tblOznam” Text=”…XX….”

Style=”{StaticResource PhoneTextExtraLargeStyle}”

Foreground=”LightCyan” HorizontalAlignment=”Stretch”

TextWrapping=”Wrap” TextAlignment=”Center” FontWeight=”Bold” />

 

Vzťah medzi XAML kódom a vizuálnym návrhom

Kód pre obsluhu udalostí

Každú aplikáciu tvorí aplikačná a prezentačná vrstva. Úlohou aplikačnej vrstvy je pracovať s údajmi a premennými a pripraviť údaje, ktoré sa zobrazia používateľovi. Úlohou prezentačnej vrstvy je výpis týchto údajov vo vhodnej forme. Keby ste aplikáciu v tejto fáze spustili, zobrazil by sa formulár pre zadávanie a zobrazovanie údajov, no po zatlačení tlačidla by sa nič nestalo.

Dosiaľ prezentované prvky používateľského rozhrania sú určené pre interakciu s používateľmi, čiže používateľ niečo uvidí na obrazovke a na základe toho na dotykovom displeji, alebo pomocou tlačidiel urobí nejakú akciu. K tomu pristupujú služby a procesy “za oponou”, ktoré reagujú na udalosti generované jednak používateľským rozhraním, prípadne impulzmi, ktoré prichádzajú zvonku prostredníctvom komunikačných kanálov. Zjednodušene povedané, aplikačný kód vlastne vdýchne aplikácii život.

Pre tlačidlo pridajte obsluhu udalosti kliknutia. V okne Properties a prepnite do záložky Events a dvojklikom na udalosť Click pridajte kód pre obsluhu udalosti kliknutia.

Doplnenie kódu pre obsluhu udalosti kliknutia na tlačidlo

Do XAML kódu tlačidla v súbore MainPage.xaml pribudne parameter Click.

<Button Grid.Column=”1″ Name=”btPotvrd” … Click=”btPotvrd_Click” />

 

Kostra procedúry pre obsluhu udalostí sa pridá do súboru MainPage.xaml.cs.

namespace PrvaAplikacia

{

public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

}

 


private void btPotvrd_Click(object sender, RoutedEventArgs e)

{

 

}

}

}

 

Kód po stlačení tlačidla vypíše text zadaný v editačnom poli.

private void btPotvrd_Click(object sender, RoutedEventArgs e)

{

tblOznam.Text = tbZadaj.Text;

tbZadaj.Text = String.Empty;

}

 

Teraz môžete vyskúšať fungovanie aplikácie či už na emulátore, alebo na reálnom zariadení

Test fungovania aplikácie

Tip:

Pomocou klávesy PAUSE/BREAK môžete prepínať, či chcete zadávať text pomocou simulácie dotykového displeja, alebo klávesnice vývojárskeho počítača

Pomoc pri zadávaní údajov

Konfigurácia klávesnice pre zadávanie špeciálnych polí ako napríklad URL adresa webovej stránky, e-mailová adresa, poštové smerovacie číslo (zip code)..

TextBox má parameter InputScope, pomocou ktorého je možné špecifikovať aký typ údajov sa bude zadávať a podľa toho prispôsobiť zobrazenie kláves dotykovej klávesnice

<!–ContentPanel – place additional content here–>

<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>

<StackPanel>

<TextBlock Name=”tbl1″ Text=”e-mail” />

<TextBox Name=”tbEmail” Text=””>

<TextBox.InputScope>

<InputScope>

<InputScopeName NameValue=”EmailSmtpAddress” />

</InputScope>

</TextBox.InputScope>

</TextBox>

 

<TextBlock Name=”tbl2″ Text=”PSČ” />

<TextBox Name=”tbPSC” Text=””>

<TextBox.InputScope>

<InputScope>

<InputScopeName NameValue=”PostalCode” />

</InputScope>

</TextBox.InputScope>

</TextBox>

<Button Content=”Potvrď” Name=”btPotvrd” Click=”btPotvrd_Click_1″ />

<TextBlock x:Name=”OutputText” />

</StackPanel>

</Grid>


Prispôsobenie klávesnice zadávanému obsahu

 

Obsluha “hardvérových” kláves

V aplikáciách sa bude najčastejšie využívať ľavý hardvérový kláves, pre návrat, čiže akúsi formu “kroku späť”, napríklad do aplikácie kde bol používateľ predtým. Procedúru pre obsluhu klávesu pre návrat (šipka vľavo) môžete vytvoriť:

BackKeyPress=”PhoneApplicationPage_BackKeyPress”>

 

Pridanie obsluhy udalosti BackKeyPress

Kliknutím na udalosť BackKeyPress sa vytvorí kostra procedúry

private void PhoneApplicationPage_BackKeyPress(object sender, System.ComponentModel.CancelEventArgs e)

{

 

}

Zverejnené v kategórií Win Phone 7 | Tagged , , , | Pridaj komentár

Aktívne dlaždice ako „výkladná skriňa“ aplikácie

Po spustení aplikácie na emulátore budeme skúmať integráciu nainštalovanej aplikácie do operačného systému a to nielen z vizuálneho, ale neskôr aj z funkčného hľadiska. Pomocou tlačidla Start (so symbolom Windows) aplikáciu opustíte a vrátite sa do operačného systému. Ikonu svojej aplikácie nájdete v hlavnej ponuke aplikácií. Implicitne má tvar bieleho “zubatého slniečka” na čiernom pozadí. Ak túto ikonu pridržíte, zobrazí sa menu, pomocou ktorého môžete aplikáciu pripnúť ako aktívnu dlaždicu na domácu obrazovku, prípadne aplikáciu odinštalovať.

Vaša aplikácia sa môže stať aktívnou dlaždicou – súčasťou hlavnej ponuky

Pomocou položky menu pin to start, pripnite aplikáciu na domácu obrazovku. Na obrazovke sa zobrazí ikona v šírke na pol obrazovky s ikonou a názvom aplikácie.

Určite budete chcieť svoju aplikáciu odlíšiť a priblížiť používateľovi pomocou kreatívne stvárnenej ikony. Túto časť by ani technokraticky zameraní vývojári nemali podceňovať. Práve kreatívne graficky stvárnená ikona môže byť hlavným podnetom, prečo si vašu aplikáciu používateľ z aplikačného marketu stiahne, prípadne kúpi.

V súbore ApplicationIcon.png je ikona aplikácie o rozmeroch 62 x 62 pixelov, ktorá sa zobrazí v hlavnej ponuke. Súbor Background.png obsahuje ikonu aplikácie o rozmeroch 173x 173, prípadne 173x 346 (dvojitá šírka) pre dlaždicu na domácej obrazovke. Skúste zmeniť obrázok, alebo aspoň farby na obidvoch ikonách

Ikonu aplikácie môžete editovať buď vo vývojovom prostredí, alebo v externej aplikácii (aktivuje sa z kontextového menu)

V súbore SplashScreenImage.jpg je obrázok, ktorý sa zobrazí pri zavádzaní aplikácie. Štandardne sa jedná o čiernu obrazovku s ikonou hodín.

Obojstranné a sekundárne aktívne dlaždice

Na úvodnej stránke sú takzvané aktívne dlaždice (tiles), niektoré, ako napríklad Pictures, či Calendar zaberajú buď plnú šírku (obdĺžnikový tvar), alebo sú štvorcové polovičnej šírky, takže sa vojdú dve vedľa seba. Na ich ploche sa podľa typu dlaždice zobrazujú relevantné informácie, napríklad dlaždica kalendára zobrazuje najbližšie udalosti, na dlaždiciach e-mailových kont sa zobrazuje počet neprečítaných správ a podobne.

Aktívne dlaždice môžu mať v novej verzii dve strany (prednú a zadnú), pričom dlaždice pravidelne rotujú, takže sú oveľa pútavejšie. Aplikácia môže mať viac ako jednu dlaždicu, napríklad pre meteorologické informácie z rôznych miest, viac kontaktov zo skupiny a podobne. Na obidvoch plochách sa podľa typu aplikácie relevantné informácie, napríklad najbližšie udalosti, počet neprečítaných správ a podobne. Dynamika umožňuje zobrazovať informácie napríklad aktuálne počasie, alebo ponuku menu v reštaurácii podľa miesta, kde sa nachádzate.

Komponenty prednej strany aktívnej dlaždice

Komponenty zadnej strany aktívnej dlaždice

 

Aplikácia bude obsahovať dve tlačidlá, jedno pre zmenu aplikačnej aktívnej dlaždice a druhé pre zmenu sekundárnej dlaždice

<!–ContentPanel – place additional content here–>

<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>

<Button Content=”Aplikačná dlaždica” Height=”72″ Margin=”30,182,0,0″

Name=”btAppDlazdica” VerticalAlignment=”Top” Click=”btAppDlazdica_Click” />

<Button Content=”Sekundárna dlaždica ” Height=”72″ Margin=”30,278,0,0″

Name=”btSekDlazdica” VerticalAlignment=”Top” Click=”btSekDlazdica_Click” />

</Grid>

 

Obsluha tlačidla pre zmenu obsahu aplikačnej aktívnej dlaždice

private void btAppDlazdica_Click(object sender, RoutedEventArgs e)

{

ShellTile TileToFind = ShellTile.ActiveTiles.First();

 

if (TileToFind != null)

{

StandardTileData NewTileData = new StandardTileData

{

Title = “Aplikácia”,

// BackgroundImage = new Uri(“obrazok1.jpg”, UriKind.Relative),

Count = 50,

BackTitle = “Pozadie”,

//BackBackgroundImage = new Uri(“obrazok2.jpg”, UriKind.Relative),

BackContent = “Kontext”

};

TileToFind.Update(NewTileData);

}

}

 

Zmena obsahu aplikačnej aktívnej dlaždice.

Obsluha tlačidla pre zmenu obsahu sekundárnej dlaždice

private void btSekDlazdica_Click(object sender, RoutedEventArgs e)

{

ShellTile TileToFind = ShellTile.ActiveTiles.FirstOrDefault(x =>

x.NavigationUri.ToString().Contains(“DefaultTitle=FromTile”));

 

if (TileToFind == null)

{

StandardTileData NewTileData = new StandardTileData

{

//BackgroundImage = new Uri(“Red.jpg”, UriKind.Relative),

Title = “Druhá dlaždica”,

Count = 12,

BackTitle = “Zadná strana”,

BackContent = “Text na zadnej strane”,

//BackBackgroundImage = new Uri(“Blue.jpg”, UriKind.Relative)

};

 

ShellTile.Create(new Uri(“/DruhaStranka.xaml?DefaultTitle=FromTile”,

UriKind.Relative), NewTileData);

}

Všimnite si, že pomocou sekundárnej dlaždice sa aktivuje iná XAML stránka

Vytvorenie sekundárnej aktívnej dlaždice

Zverejnené v kategórií Win Phone 7 | Tagged , , , | Pridaj komentár

Spustenie a ladenie aplikácie pre WP7

Pre tento účel slúži buď tlačidlo Toolbaru v tvare zelenej šípky, alebo položka menu Debug | Start, prípadne klávesová skratka F5. O preklade a zostavení aplikácie získate prehľadný výpis v okne Output.

Spustenie aplikácie na emulátore

Po spustení aplikácie sa pri implicitnom nastavení spustí emulátor zariadenia Windows Phone 7 a na ňom vaša aplikácia

Spustenie aplikácie na emulátore

Po uspokojení počiatočnej zvedavosti o tom ako bude vyzerať a fungovať vaša prvá aplikácia si môžete ozrejmiť niektoré detaily týkajúce sa spustenia aplikácie. Emulátor po spustení z vývojového prostredia zobrazuje priamo okno aplikácie. Ak ešte nemáte skúsenosti z reálneho zariadenia, najskôr sa zoznámte z používateľským rozhraním emulátora.

Možno vás zarazí, že vás upozorňujeme, že vďaka emulátorom dokážete robiť vývoj aj bez toho aby ste mali príslušné zariadenie fyzicky k dispozícii. Prečo by ste to robili? Pomocou vývojového prostredia a emulátora môžete existujúcu vlastnú (úspešnú) aplikáciu vytvorenú pôvodne pre PC, alebo pre niektorú inú mobilnú platformu, prepísať pre Windows Phone 7, napríklad ak na túto platformu mienite migrovať, alebo si myslíte, že by sa pre túto platformu dobre predávala. V súčasnosti je úplne iná filozofia životného cyklu mobilných aplikácií. Väčšina aplikácií sa voľne poskytuje, alebo predáva cez rôznu formu internetových marketov, takže v prípade ak vytvoríte užitočnú aplikáciu u ktorej predpokladáte komerčný úspech, prečo na tom nezarobiť?

Každé zariadenie (aj emulátor) s operačným systémom Windows Phone 7 má v spodnej časti integrované tri klasické, alebo dotykové tlačidlá. Ľavé tlačidlo v tvare šípky slúži na prechod o jednu úroveň späť, či už v aplikáciách, pri prehliadaní webových stránok, alebo navigovaní sa v prostredí operačného systému.

Stredné tlačidlo “Štart” s logom Windows slúži pre návrat na domovskú obrazovku. Toto tlačidlo môžete použiť kedykoľvek, bez ohľadu v akej aplikácii sa nachádzate.

Pravé tlačidlo s ikonou lupy slúži pre aktivovanie vyhľadávania. Vyhľadáva sa buď na internete (bing) alebo podľa aktuálnej aplikácie v zozname kontaktov, v obsahu správ a podobne.

Podpora multitaskingu:

Ak použijete niektoré z tlačidiel, aktuálna aplikácia sa “zakonzervuje” a môžete sa k nej vrátiť, no na pozadí v režime multitaskingu bežia vo verzii 7.0 len niektoré aplikácie, napríklad prehrávač hudby, či telefón. Ostatné aplikácie sa pri prechode na hlavnú obrazovku OS hibernujú v aktuálnom stave, a po návrate na aplikáciu sa táto obnoví bez potreby jej opätovného spustenia. Verzia Mango podporuje multitasking pre všetky aplikácie

Ak kliknete kurzorom na tlačidlo “Štart” (plocha so symbolom “Windows”) v strede dolnej časti emulátora, zobrazí sa hlavná obrazovka operačného systému.


Domáca obrazovka operačného systému na emulátore (vľavo). Vaša aplikácia sa stane súčasťou ponuky nainštalovaných aplikácií (vpravo).

Tip: Na obrázku vľavo si všimnite v pravom hornom rohu šípku v krúžku. Ak (podobne ako na reálnom zariadení) smeruje vpravo, znamená to, že emulátor môže využívať hardvérovú akceleráciu grafiky. Ak vývojársky počítač, na ktorom je emulátor spustený hardvérovou akceleráciou grafiky nedisponuje, alebo nemá nainštalovanú podporu Direct X, bude táto skutočnosť indikovaná šípkou smerujúcou doľava.

Hlavná (domáca) obrazovka obsahuje aktívne prvky – Widgety. V slovenčine funkciu týchto prvkov najlepšie vystihuje názov aktívne dlaždice. Tieto môžu zabrať polovičnú, alebo celú šírku obrazovky. Všimnite si šípku vpravo hore. Pomocou nej prejdete do hlavnej ponuky, ktorá obsahuje zoznam nainštalovaných aplikácií.

Určite ste si všimli zvislý pás číslic v pravej časti okna emulátora. Obrázok popisuje ich význam

Vedľa okna emulátora sa zobrazuje zvislý pásik s tlačidlami, ktoré umožňujú zmenu orientácie emulovaného prístroja, prípadne zväčšenie, či zmenšenie zobrazenia displeja. Najzaujímavejšie funkcie pre simulovanie funkcie akcelerometra a určovania polohy sa dajú aktivovať pomocou spodného tlačidla v tvare dvojitej šípky smerujúcej doľava. Aktivovaním tlačidla sa zobrazí samostatné okno Additional Tools, ktoré má dve záložky, jedna slúži pre akcelerometer a druhá na simulovanie polohy.

Akcelerometer – náklon prístroja sa mení posúvaním ružového bodu, pričom zmeny pozície je možné zaznamenať a následne ako sekvenciu činností prehrať, takže aplikáciu využívajúcu akcelerometer bude možné ladiť počas simulovania identických pohybov.

Určenie polohy – po výbere lokality môžete pomocou bodov na mape zaznamenať polohu, alebo zmenu polohy prístroja

Emulátor umožňuje simulovať aj funkcionalitu akcelerátora a zisťovania polohy

Spustenie aplikácie na reálnom zariadení

Režim spúšťania aplikácie je potrebné prepnúť z emulátora na reálne zariadenia. Prepínací prvok je na toolbare Visual Studia vpravo od zelenej šípky na spustenie aplikácie

Aplikácie ej možné spúšťať na emulátore aj reálnom zariadení

Upozornenie: Pre spustenie aplikácie na reálnom zariadení musí byť v čase spustenia splnených niekoľko podmienok

  • Telefón musí byť odblokovaný pre zavádzanie aplikácií z vývojového prostredia
  • Musí byť spustená aplikácia ZUNE, ktorá zabezpečuje prepojenie počítača s mobilným telefónom.
  • Pripojený telefón musí byť aktívny (rozsvietený displej)
  • Telefón musí byť odomknutý (po zapnutí je potrebné vysunúť obrazovú roletu nahor)

Ak sú hore uvedené podmienky splnené, mala by sa aplikácia spustiť na pripojenom mobilnom telefóne

Ladenie aplikácie

Vývojové prostredie Visual Studio 2010 poskytuje veľmi široké možnosti ladenia aplikácie. V stručnosti spomenieme umiestnenie zarážky (Breakpoint), tak, že kliknete na príslušný riadok zdrojového kódu tesne pri ľavom okraji obrazovky.

Nastavenie zarážky pre ladenie aplikácie

 

Pri ladení aplikácie je možné umiestniť kurzor nad názov premennej pre zobrazenie jej obsahu

 

Ladenie výkonu aplikácii

Jedným z kľúčových problémov uspokojivého fungovania mobilných aplikácií je nájdenie optimálneho kompromisu medzi výkonom a výdržou na batérie. Preto je významnou novinkou SDK 7.1 doplnenie nástroja Windows Phone Profiler. Tento nástroj umožňuje vývojárom merať, hodnotiť, a lokalizovať problémy spojené s vykonávaním ich kódu. Profiler je plne integrovaný do vývojového prostredia prostredia Visual Studio.

Pre vytvorenie ladiacej session je potrebné aktivovať v menu Debug položku Start Windows Phone Performance Analysis.

Nastavenie nástroja Windows Phone Profiler

Následne je možné aplikáciu spustiť buď v emulátore, alebo reálnom zariadení a nechať si zobraziť informácie zobrazené počas behu aplikácie.

Zobrazenie výsledkov analýzy

Anatómia aplikácie

Pri návrhu používateľského rozhrania aplikácie ste sa už zoznámili so súborom MainPage.xaml. Po obrázkovo ladenej zoznamovacej časti sa zoznámime s ďalšími súbormi aplikácie, ktoré obsahujú kód.

App.xaml – definuje vstupný bod aplikácie, inicializuje zdroje a udalosti pri zavádzaní a zatváraní, aktivovaní a deaktivovaní aplikácie

<Application

x:Class=”HaloPhone1.App”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:phone=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone”

xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone”>

 

<!–Application Resources–>

<Application.Resources>

</Application.Resources>

 

<Application.ApplicationLifetimeObjects>

<!–Required object that handles lifetime events for the application–>

<shell:PhoneApplicationService

Launching=”Application_Launching” Closing=”Application_Closing”

Activated=”Application_Activated” Deactivated=”Application_Deactivated”/>

</Application.ApplicationLifetimeObjects>

 

</Application>

 

V súbore App.xaml.cs sú telá procedúr, do ktorých môžete v prípade potreby doprogramovať kód pre obsluhu spomínaných udalostí a ošetrenie prípadných výnimiek


private void Application_Launching(object sender, LaunchingEventArgs e)

{}

private void Application_Activated(object sender, ActivatedEventArgs e)

{}

private void Application_Deactivated(object sender, DeactivatedEventArgs e)

{}

private void Application_Closing(object sender, ClosingEventArgs e)

{}


private void RootFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)

{

if (System.Diagnostics.Debugger.IsAttached)

{

// A navigation has failed; break into the debugger

System.Diagnostics.Debugger.Break();

}

}

 

// Code to execute on Unhandled Exceptions

private void Application_UnhandledException(object sender,

ApplicationUnhandledExceptionEventArgs e)

{

if (System.Diagnostics.Debugger.IsAttached)

{

// An unhandled exception has occurred; break into the debugger

System.Diagnostics.Debugger.Break();

}

}


Parameter RootFrame v triede aplikácie identifikuje predvolenú stránku aplikácie. Všetky Windows Phone aplikácie na najvyššej úrovni kontajnerový prvok dátového typu PhoneApplicationFrame. Tento kontejner hostuje jeden alebo viac objektov typu PhoneApplicationPage, ktoré slúžia pre zobrazenie obsahu pre danú aplikáciu. Na tejto úrovni sa rieši aj navigácia medzi stránkami.

 

Zverejnené v kategórií Win Phone 7 | Tagged , , | Pridaj komentár

Prvá aplikácia pre Windows Phone 7

Mnohí sa čudujú, prečo v klasických (a teda dobrých) učebniciach programovania sa pre novú platformu vždy začína aplikáciou typu “Hello World”, alebo ak chcete po našom “Zdravíme svet”. Dôvod je jednoduchý, ak takáto aplikácia funguje, dokážete vypísať akýkoľvek text, napríklad aj obsah premenných, a zároveň máte istotu, že všetko máte správne nainštalované a nakonfigurované. A ak vaša snaha bude zvŕšená prenosom aplikácie do mobilného zariadenia a jej spustením v reálnom prostredí, môžete sa smelo pustiť do zložitejších projektov.

Vytvorenie projektu aplikácie

Vo vývojovom prostredí Visual Studio 2010, alebo vo voľne šíriteľnej verzii Microsoft Visual Studio 2010 Express for Windows Phone môžete vytvárať dva typy projektov, buď “klasické” aplikácie podľa šablón zo skupiny Silverlight for Windows Phone, alebo hry a zábavné aplikácie podľa šablón zo skupiny XNA Game Studio 4.0.

Nový projekt vytvoríte pomocou menu File > New > Project.

Vytvorenie projektu Silverlight aplikácie pre Windows Phone 7

Vytvorenie projektu využívajúceho XNA Framework aplikácie pre Windows Phone 7

Väčšinu náplne tejto publikácie budú tvoriť aplikácie Silverlight for Windows Phone. Vytvorte aplikáciu typu Windows Phone Applications.

Všimnite si bohatú ponuku šablón pre jednotlivé typy aplikácií, postupne sa budeme zoznamovať s tými najužitočnejšími.

Nasleduje výber verzie operačného systému telefónu. Môžete vytvárať aplikácie kompatibilné so staršou verziou Windows Phone 7.0 (vrátane aktualizácie NoDo), alebo aplikácie využívajúce funkcie novej verzie Windows Phone 7.1, známej aj pod kódovým označením Mango. V našom príklade vytvoríme aplikáciu pre najnovšiu verziu 7.1.


Vytvorenie projektu využívajúceho XNA Framework aplikácie pre Windows Phone 7

Kód aplikácie pre výpis textu vlastne tvoriť nemusíte, implicitne sa vám vytvorila ako základná šablóna projektu. V tomto okamihu by ste mohli aplikáciu spustiť a na emulátore by ste videli presne ten istý text ako vo Visual Studiu vo vizuálnom zobrazení stránky MainPage.xaml.Najskôr sa aspoň letmo zoznámime s vývojovým prostredím a následne môžete urobiť nejaké úpravy zobrazeného textu.

Po vytvorení projektu je pracovná plocha rozdelená na oblasť pre návrh v grafickom prostredí v ľavej časti a okno pre zobrazenie XAML kódu v pravej časti hlavného okna. Vpravo je spravidla zobrazené okno Properties, prípadne v kombinácii s oknom Solution Explorer. Vľavo môžete zobraziť Toolbox s ponukou prvkov pre grafický návrh.

Každý z hlavných panelov sa obvykle skladá z niektorých záložiek, ktoré menia jeho aktuálny význam, čím je veľmi efektívne využitá zobrazovacia plocha monitora.

Typické usporiadanie obrazovky Visual Studia 2010 pre vývoj Windows Phone 7 aplikácie

V okne Solution Explorer preskúmajte štruktúru projektu. Implicitne je po vytvorení projektu zobrazená stránka MainPage.xaml – XAML stránka s používateľským rozhraním. Ak v okne Solution Explorer kliknete na šípku vľavo od názvu tejto stránky, môžete zobraziť obsah súboru MainPage.xaml.cs. Tento súbor obsahuje kód na obsluhu udalostí.

XAML je deklaratívny na XML založený vektorovo grafický značkovací jazyk slúžiaci na definovanie prezentačnej vrstvy grafického prostredia.

Podobne ako HTML aj jazyk XAML patrí do rodiny značkovacích jazykov.

Stránka MainPage.xaml (skrátená o úvodné deklarácie) obsahuje kód pre výpis dvoch textových reťazcov pomocou prvkov TextBlock.

<!–LayoutRoot is the root grid where all page content is placed–>

<Grid x:Name=”LayoutRoot” Background=”Transparent”>

<Grid.RowDefinitions>

<RowDefinition Height=”Auto”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

 

<!–TitlePanel contains the name of the application and page title–>

<StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>

<TextBlock x:Name=”ApplicationTitle” Text=”MY APPLICATION” Style=”{StaticResource PhoneTextNormalStyle}”/>

<TextBlock x:Name=”PageTitle” Text=”page name” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>

</StackPanel>

 

<!–ContentPanel – place additional content here–>

<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″></Grid>

</Grid>

 

Tip:

Všimnite si, že šablóna obsahuje pripravený kód pre ApplicationBar, ktorý je v komentári

<!–Sample code showing usage of ApplicationBar–>

<!–<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar IsVisible=”True” IsMenuEnabled=”True”>

<shell:ApplicationBarIconButton IconUri=”/Images/appbar_button1.png”

Text=”Button 1″/>

<shell:ApplicationBarIconButton IconUri=”/Images/appbar_button2.png”

Text=”Button 2″/>

<shell:ApplicationBar.MenuItems>

<shell:ApplicationBarMenuItem Text=”MenuItem 1″/>

<shell:ApplicationBarMenuItem Text=”MenuItem 2″/>

</shell:ApplicationBar.MenuItems>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>–>

 

Pred prvým spustením aplikácie zmeňte textové reťazce v prvkoch TextBlock .

<!–TitlePanel contains the name of the application and page title–>

<StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>

<TextBlock x:Name=”ApplicationTitle” Text=”PRVÁ APLIKÁCIA PRE WINDOWS PHONE 7″ Style=”{StaticResource PhoneTextNormalStyle}”/>

<TextBlock x:Name=”PageTitle” Text=”Úvodná strana” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>

</StackPanel>

Zmena textových reťazcov sa interaktívne prejaví aj vo vizuálnom zobrazení stránky

V tejto fáze môžete aplikáciu spustiť, či už na emulátore, alebo na reálnom zariadení. Postup je popísaný v ďalšej kapitole.

Zverejnené v kategórií Win Phone 7 | Tagged , , | Pridaj komentár

Čo budete potrebovať na vývoj aplikácií

Na vývoj aplikácií určených pre najnovšiu mobilnú platformu Microsoft Windows Phone 7 budete potrebovať balíček Windows Phone SDK 7.1 pre vývojové prostredie Microsoft Visual Studio 2010, alebo voľne šíriteľnú verziu Microsoft Visual Studio 2010 Express for Windows Phone . Na vývojárskom počítači musí byť nainštalovaný operačný systém Windows Vista, Windows 7, prípadne novší

Tip:

Môžete použiť rovnaký inštalačný balíček bez ohľadu, či máte, alebo nemáte nainštalované Visual Studio 2010. Ak máte komerčnú verziu doinštalujú sa do neho doplnky, v opačnom prípade sa nainštaluje voľne šíriteľná verzia Microsoft Visual Studio 2010 Express for Windows Phone .

Všetko potrebné nájdete na http://developer.windowsphone.com. Vývojárske nástroje si môžete stiahnuť ako jeden kompaktný inštalačný balík priamo zo stránky http://create.msdn.com/en-US/

Stiahnutie všetkých potrebných nástrojov pre vývoj aplikácií vo forme kompaktného balíčka

Hardvérové predpoklady

Zariadenie na ktorom môže bežať operačný systém Windows Phone 7 musí spĺňať niekoľko základných hardvérových požiadaviek:

  • Minimálne 256 MB pamäti RAM a minimálne 8 GB flash pamäti.
  • Displej WVGA (800 x 480) podporujúci 4 bodový multidotyk
  • Podpora hardvérovej akcelerácie DirectX 9
  • GSM a WiFi konektivita
  • GPS, akcelerometer a kompas
  • Digitálny fotoaparát (5Mpix) a svietiacu diódu
  • Tri hardvérové tlačidlá s funkciami Start, Search, a Back.

Pre návrh používateľského prostredia je možné použiť dizajnérsky nástroj Microsoft Expression Blend for Windows Phone alebo Microsoft Expression Blend 4 s doplnkom Microsoft Expression Blend SDK 7.1 for Windows Phone.

Zverejnené v kategórií Win Phone 7 | Tagged , , , | Pridaj komentár

Windows Phone 7. Mango

Nie je to prvá inovácia, všetci majitelia týchto mobilov už určite majú svoje prístroje upgradované na verziu NoDo, ktorej najväčšou novinkou je podpora kopírovania cez schránku a rýchlejšie spúšťanie aktualizácií. Mango je prvou veľkou inováciou, ktorá prináša viac než 500 vylepšení a nových funkcií. Pribudli viaceré podporované jazyky vrátane češtiny, bohužiaľ slovenčina ani v novej verzii podporovaná nie je. Aby mohli tieto zmeny využívať aj vývojári vo svojich aplikáciách chystaných pre novú verziu, dostali s predstihom novú verziu Windows Mobile SDK 7.1. V stručnom prehľade uvádzame najvýznamnejšie novinky a vylepšenia, ktoré významne posúvajú možnosti aplikácií určených pre nový operačný systém.

Multitasking – v novej verzii pribudlo niekoľko funkcií, umožňujúcich, aby aplikácia vykonávala určité činnosti, aj v prípade ak nie je práve aktívna na popredí. Môže napríklad prehrávať audio, prenášať na pozadí súbory, či vykonávať aktivitu podľa vopred naplánovaného rozvrhu.

Rýchle prepínanie medzi aplikáciami – v predchádzajúcich verziách systému Windows Phone sa aplikácia v prípade ak sa používateľ navigoval inam automaticky ukončila. V novej verzii je možné aplikáciu prepnúť do takzvaného “spiaceho stavu”, kedy aplikácia zostáva v pamäti, takže ak sa používateľ chce do nej vrátiť, prepnutie je prakticky okamžité. Pre rýchle prepínanie medzi aplikáciami nie je nutné implementovať žiadny kód, táto funkcia čo umožňuje rýchle prepínanie medzi aplikáciami, je povolené automaticky. Pri návrhu aplikácie je potrebné dbať na to aby aplikácia dokázala reagovať na zmeny stavu, ktoré sa vyskytujú počas životného cyklu aplikácie.

Životný cyklus aplikácie pre Windows Phone 7

Aplikácia sa môže nachádzať v stave:

  • Running – aplikácia bola spustená a beží kým sa používateľ nevráti k predchádzajúcej aplikácii, či menu.
  • Dormant (spiaca) – keď sa používateľ dostane mimo aplikáciu, pokúsi sa operačný systém uviesť aplikáciu do stavu spánku. V tomto stave sú všetky vlákna behu aplikácie zastavené, ale aplikácia zostane neporušený v pamäti. Ak sa k nej používateľ vráti, môže byť okamžite znovu aktivovaná.
  • Tombstoned – aplikácia bola ukončená, ale informácie o jej stave zostávajú zachované. V takomto stave sa môže nachádzať až päť aplikácií súčasne.

Lokálne databázy – aplikácie môžu ukladať relačné údaje v lokálnej databáze. Pre vykonávanie databázových operácií je možné použiť LINQ to SQL.

Aktívne dlaždice – dlaždice môžu mať v novej verzii dve strany a pravidelne rotujú, takže sú oveľa pútavejšie. Aplikácia môže mať viac ako jednu dlaždicu, napríklad pre meteorologické informácie z rôznych miest a podobne.

Agenti úloh na pozadí – nová verzia operačného systému umožňuje naplánovať niektoré akcie ktoré aplikácia vykonáva na neskoršiu dobu, pričom k ich vykonaniu dôjde aj v prípade ak aplikácia nie je spustená na popredí. Môžete naplánovať dve kategórie akcií: oznámenia a úlohy.

Prehrávanie zvuku na pozadí – aplikácie prehrávajúce audio súbory môžu v novej verzii bežať na pozadí. Hudba stále hrá, aj keď používateľ spustí ďalšie aplikácie, pričom môže regulovať hlasitosť zvuku.

Prenos súborov na pozadí – aplikácie môžu začať sťahovanie súborov aj vtedy ak sa používateľ navigoval z aplikácie preč.

Komplexné údaje zo senzorov – aplikácie majú k dispozícii komplexnejšie údaje o zmenách polohy vrátane zrýchlenia a rotácie

Podpora socketov – aplikácie môžu komunikovať cez sockety pomocou protokolov TCP a UDP. Sockety umožňujú obojsmernú komunikáciu s cloud službami, prípadne umožňujú komunikáciu viacerých hráčov pomocou okamžitých správ počas hier.

Podpora kamery – aplikácie majú programový prístup k fotoaparátu vrátane prístupu k surovým snímkam v reálnom čase. Takýto prístup sa hodí napríklad pre aplikácie využívajúce rozšírenú realitu (augmented reality).

Prístup k údajom kontaktov a kalendára – aplikácie môžu tieto údaje čítať

Zverejnené v kategórií Win Phone 7 | Tagged , , , | Pridaj komentár