Skúsenosti s certifikáciou aplikácie pre WP7 1.diel

Po odoslaní aplikácie pre Windows Phone 7 sa mi niekoľko krát vrátila. Prvým dôvodom bola nečitateľnosť textu po zmene pozadia témy z čiernej na bielu. Vtedy sa totiž implicitne biele texty v šablóner zmenia na čierne. Pôvodne som mal v aplikácii vlastný tmavý obrázok na ktorom bolo výborne možné čítať biele texty, no čierne texty boli nečitateľné. Potom som vrátil ako podklad pod panorámu originálny tyrkysovo modrý obrázok, na ktorom je možné čítať aj biele aj čierne písmo

Klasické nastavenie

Zmena nastavenia pozadia témy

Zmena sa prejaví invertovaním bielej farby na čiernu. Ak by ste mali ako pozadie tmavý obrázok, tieto texty by sa nedali čítať

Ukladanie stavu aplikácie a údajov

Windows Phone 7 (Mango) poskytuje viac možností ako uložiť stav aplikácie, teda presnejšie obsah stavových premenných aby ste sa neskôr mohli dostať do požadovaného stavu, prípadne aby ste mohli načítať požadované údaje.

Isolated Storage

Znalci platformy Silverlight už jeden spôsob – izolovaná úložisko určite poznajú.Jedná sa zjednodušene povedané o izolovanú časť permanentnej pamäti zariadenia s obmedzenou kapacitou vyhradenú len pre Silverlight aplikáciu. aplikácií. Isolated Storage umožňuje vytvárať hierarchickú adresárovú štruktúru.

Námetom jednoduchej aplikácie bude ukladanie krátkych poznámok – tipov dňa

<!–ContentPanel – place additional content here–>

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

<StackPanel Orientation=”Vertical”>

<TextBlock x:Name=”tblPoznamka” Text=”Uložený tip:” FontSize=”40″/>

<Button Content=”Vyber” Width=”150″ Click=”Button_Vyber” />

<TextBlock Text=”Zadaj tip: ” FontSize=”30″ Margin=”10,80,0,0″/>

<TextBox x:Name=”tbPoznamka” />

<Button Content=”Uloz” Width=”150″ Click=”Button_Uloz” />

</StackPanel>

</Grid>

 

Jadrom kódu aplikácie sú dve procedúry, jedna na uloženie textového reťazca do súboru a druhá pre jeho načítanie. Všimnite si ošetrenie výnimky, ak by sa z nejakého dôvodu nepodarilo načítať údaje zo súboru v izolovanom úložisku. Tieto procedúry sa volajú v obsluhe udalostí tlačidiel.

public void DoSuboru(string content)

{

var fileName = “poznamka.dat”;

using (var store = IsolatedStorageFile.GetUserStoreForApplication())

using (var writeStream = new IsolatedStorageFileStream(fileName,

FileMode.Create, store))

using (var writer = new StreamWriter(writeStream))

{

writer.Write(content);

}

}

 

 

 

public string ZoSuboru()

{

var fileName = “poznamka.dat”;

try

{

using (var store = IsolatedStorageFile.GetUserStoreForApplication())

using (var readStream = new IsolatedStorageFileStream(fileName,

FileMode.Open, store))

using (var reader = new StreamReader(readStream))

{

return reader.ReadToEnd();

}

}

catch (IsolatedStorageException e)

{

return String.Empty;

}

}

 

 

 

private void Button_Uloz(object sender, RoutedEventArgs e)

{

DoSuboru(tbPoznamka.Text);

}

 

private void Button_Vyber(object sender, RoutedEventArgs e)

{

tblPoznamka.Text = ZoSuboru();

}

 

Teraz môžete aplikáciu vyskúšať, Zadajte poznámku a uložte ju. Následne môžete aplikáciu ukončiť. Keď ju znovu spustíte, pomocou tlačidla vyber môžete vybrať naposledy uloženú poznámku z izolovaného úložiska.

Ukladanie údajov do Isolated storage

Do XML dokumentu môžete ukladať aj štruktúrované informácie viažúce sa k objektu, napríklad k osobe, takže po zahrievacom príklade s krátkymi poznámkami skúsime niečo zložitejšie. Takáto aplikácia sa môže hodiť ak používateľ zadáva údaje do zložitejšieho formulára a z nejakého dôvodu musí svoju prácu prerušiť

<!–ContentPanel – place additional content here–>

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

<Button Content=”Ulož XML” x:Name=”btnUloz” Click=”btnUloz_Click” />

<Button Content=”Čítaj XML” x:Name=”btnCitaj” Click=”btnCitaj_Click” />

 

<ListBox x:Name=”listBox”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Margin=”10″ >

<TextBlock Text=”{Binding Meno}”/>

<TextBlock Text=”{Binding Funkcia}”/>

<TextBlock Text=”{Binding Mzda}”/>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

<TextBlock x:Name=”tbx”/>

</StackPanel>

 

Do zložky References je potrebné pridať referenciu na System.Xml.Serialization

using System.Xml;

using System.Xml.Serialization;

using System.IO.IsolatedStorage;

using System.IO;

 

public class Zamestnanec

{

string meno;

string funkcia;

int mzda;

 

public string Meno

{

get { return meno; }

set { meno = value; }

}

 

public string Funkcia

{

get { return funkcia; }

set { funkcia = value; }

}

 

public int Mzda

{

get { return mzda; }

set { mzda = value; }

}

}

 

private List<Zamestnanec> GenerujUdaje()

{

List<Zamestnanec> data = new List<Zamestnanec>();

data.Add(new Zamestnanec() { Meno = “Mrkvová Katarína”,

Funkcia = “Asistent”, Mzda = 1800 });

data.Add(new Zamestnanec() { Meno = “Dalmy Tomás”,

Funkcia = “Obchodník”, Mzda = 2300 });

data.Add(new Zamestnanec() { Meno = “Kukučka Michal”,

Funkcia = “Riaditeľ”, Mzda = 3700 });

return data;

}

 

 

private void btnUloz_Click(object sender, RoutedEventArgs e)

{

XmlWriterSettings xmlWriterSettings = new XmlWriterSettings();

xmlWriterSettings.Indent = true;

 

using (IsolatedStorageFile myIsolatedStorage =

IsolatedStorageFile.GetUserStoreForApplication())

{

using (IsolatedStorageFileStream stream =

myIsolatedStorage.OpenFile(“Zam.xml”, FileMode.Create))

{

XmlSerializer serializer = new

XmlSerializer(typeof(List<Zamestnanec>));

using (XmlWriter xmlWriter = XmlWriter.Create(stream,

xmlWriterSettings))

{

serializer.Serialize(xmlWriter, GenerujUdaje());

}

}

}

 

}

 

private void btnCitaj_Click(object sender, RoutedEventArgs e)

{

using (IsolatedStorageFile myIsolatedStorage =

IsolatedStorageFile.GetUserStoreForApplication())

{

using (IsolatedStorageFileStream stream =

myIsolatedStorage.OpenFile(“Zam.xml”, FileMode.Open))

{

XmlSerializer serializer = new

XmlSerializer(typeof(List<Zamestnanec>));

List<Zamestnanec> data =

(List<Zamestnanec>)serializer.Deserialize(stream);

this.listBox.ItemsSource = data;

}

}

}

 

Ukladanie údajov do Isolated storage vo formáte xml

Uloženie stavu pri ukončení aplikácie

Ak sa používateľ z bežiacej aplikácie “odnaviguje”, vo Windows Phone 7.1 sa aplikácia dostane do odloženého spiaceho stavu, kedy sa beh aplikácie zastaví, takže nespotrebováva výkon procesora a tým ani energiu batérie, no aplikácia zostane zavedená v pamäti. Ak používateľ prejde späť do aplikácie, aplikácie obnoví každú stránku aplikácie do pôvodného stavu.

Aplikáciu je možné po ukončení uviesť do takzvaného zakonzervovaného “tombstoned” stavu. Vtedy je aplikácia uvoľnená aj z pamäti, ale niektoré údaje o jej predchádzajúcom stave zostanú zachované. V príklade ukážeme ako uložiť stavové údaje ovládacích prvkov po deaktivovaní aplikácie do PhoneApplicationPage objektu.

Životný cyklus aplikácie

Hlavná stránka aplikácie bude pre ilustráciu obsahovať dva ovládacie prvky TextBox a CheckBox.

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

Orientation=”Horizontal”>

<TextBlock Text=”Meno :” />

<TextBox
Name=”tb1″ Text=”{Binding Meno, Mode=TwoWay}” Height=”70″ Width=”350″ />

<CheckBox Name=”cb1″ IsChecked=”{Binding jeClen, Mode=TwoWay}”

Content=”CheckBox” Width=”70″ Height=”70″ />

</StackPanel>

 

Pre uloženie stavu pridajte do projektu novú triedu, ktorá bude odvodená od INotifyPropertyChanged.

using System.Runtime.Serialization;

using System.ComponentModel;

 

namespace StorageStatus

{

[DataContract]

public class ViewModel : INotifyPropertyChanged

{

private string _tb1Text;

private bool _cb1IsChecked;

 

[DataMember]

public string TextBox1Text

{

get { return _tb1Text; }

set

{

_tb1Text = value;

NotifyPropertyChanged(“Meno”);

}

}

 

[DataMember]

public bool CheckBox1IsChecked

{

get { return _cb1IsChecked; }

set

{

_cb1IsChecked = value;

NotifyPropertyChanged(“jeClen”);

}

}

 

 

 

public event PropertyChangedEventHandler PropertyChanged;

 

private void NotifyPropertyChanged(string propertyName)

{

if (null != PropertyChanged)

PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

}

}

}

 

Do MainPage.xaml.cs pridajte metódy OnNavigatedFrom a OnNavigatedTo

public partial class MainPage : PhoneApplicationPage

{

ViewModel _viewModel;

bool _isNewPageInstance = false;

 

 

// Constructor

public MainPage()

{

InitializeComponent();

_isNewPageInstance = true;

 

}

 

 

protected override void

OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)

{

if (e.NavigationMode != System.Windows.Navigation.NavigationMode.Back)

{

State[“ViewModel”] = _viewModel;

}

}

 

protected override void

OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

{

if (_isNewPageInstance)

{

if (_viewModel == null)

{

if (State.Count > 0) _viewModel = (ViewModel)State[“ViewModel”];

else _viewModel = new ViewModel();

}

DataContext = _viewModel;

}

_isNewPageInstance = false;

}

}

Obnovenie údajov po návrate zo stavu “tombstoned”

 

Alarm

Windows Mobile 7.1 podporuje vykonávanie naplánovaných úlohy, ktoré sa stanú aktívne aj vtedy ak aplikácia nie je spustená. Zjednodušene povedané, môžete naplánovať úlohu, a keď nastane naplánovaný čas začne sa úloha vykonávať. Pre tento účel sa používa trieda Alarm. Ak príslušná aplikácia nie je v dobe aktivácia alarmu spustená, naplánovaná úloha sa spustí a zobrazí sa Alarm obrazovka

 

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

<TextBox x:Name=”tbPopis” Width=”450″/>

<StackPanel Orientation=”Horizontal” >

<TextBlock Text=”Oneskorenie (s) : “/>

<TextBox x:Name=”tbCas” Width=”150″/>

</StackPanel>

<StackPanel Orientation=”Horizontal” >

<Button Content=”Nastav” x:Name=”btNastav” Click=”btNastav_Click” />

<Button Content=”Reset” x:Name=”btReset” Click=”btReset_Click” />

</StackPanel>

</StackPanel>

 

Ako príklad vytvoríme jednoduchý pripomienkovač

using Microsoft.Phone.Scheduler;

 

private void btNastav_Click(object sender, RoutedEventArgs e)

{

var alarm = new Alarm(“MyAlarm”)

{

Content = tbPopis.Text,

BeginTime = DateTime.Now.AddSeconds(Convert.ToDouble(tbCas.Text))

};

ScheduledActionService.Add(alarm);

 

}

 

private void btReset_Click(object sender, RoutedEventArgs e)

{

ScheduledActionService.Remove(“MyAlarm”);

}

 

Otestovanie fungovania alarmu

Kombinácia technológií Silverlight a XNA pre hry a graficky náročné aplikácie

V prvej verzii SDK pre Windows Phone 7 bolo možné vyvíjať buď Silverlight aplikácie, ktoré využívajú XAML kód pre návrh používateľského prostredia a aplikačný kód pre obsluhu udalostí v jednom z .NET jazykom, alebo hry v XNA Studiu. SDK pre novú verziu “Mango” popri spomínaných možnostiach umožňuje aj kombináciu Silverlight a XNA technológií v jednej aplikácii.

Silverlight aplikáciu (typ projektu Windows Phone Application) budete vytvárať ak potrebujete použiť ovládacie prvky definované v XAML kóde a udalosťami riadený kód aplikačnej logiky, prípadne ak chcete použiť sofistikované prvky na prehrávanie multimédií, hlavne videa, či HTML web browser.

XNA Framework aplikáciu (typ projektu Windows Phone Game ) budete vytvárať, ak potrebujete hru, prípadne inú aplikáciu, ktorá vyžaduje výkonnú 2D alebo 3D grafiku, využívajúcu rendrovanie textúr a animáciu

Kombinovaná Silverlight + XNA Framework aplikácia (projekt typu Windows Phone Silverlight and XNA Application) kombinuje výhody obidvoch spomínaných typov aplikácií, takže tento typ projektu použijete vtedy ak potrebujete aj XAML ovládacie prvky aj výkonnú grafiku. Tieto technológie je možné kombinovať v rámci jednej aplikácie, ale na rôznych stránkach, takže napríklad aplikácia môže mať úvodnú stránku na báze technológie Silverlight a po kliknutí na ovládací prvok sa zobrazí nová stránka s výkonnou XNA grafikou.

Vytvorenie kombinovanej Silverlight + XNA Framework aplikácie si môžete vyskúšať na “prázdnom” projekte typu Windows Phone Silverlight and XNA Application, alebo na šablóne projektu jednoduchej grafickej aplikácie s pohyblivým štvorčekom. Táto šablóna má názov Phone 3D Graphics Application.

Vytvorte nový projekt typu Windows Phone 3D Graphics Application. Táto Silverlight aplikácia môže na niektorých svojich stránkach rendrovať XNA Framework kontext.

Hlavná XAML stránka (MainPage.xaml) obsahuje tlačidlo pre aktiváciu XNA stránky s grafikou (GamePage.xaml)

Táto stránka je prázdna, jej obsah sa generuje pomocou XNA Frameworku, takže v XAML kóde tejto stránky je okrem definovania XML menných priestorov a parametrov stránky len vysvetľujúci komentár

<!–No XAML content as the page is rendered entirely with XNA–>

Grafika je generovaná pomocou kódu (GamePage.xaml.cs). Scéna sa vykresľuje v procedúre

private void OnDraw(object sender, GameTimerEventArgs e)

{

SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.Black);

spriteBatch.Begin();

spriteBatch.Draw(texture, spritePosition, Color.White);

spriteBatch.End();

}

 

Pri inicializácii aplikácie je vytvorený časovač a grafické operácie sa vykonávajú v obsluhe udalosti pri každom tiku časovača.

public GamePage()

{

InitializeComponent();

 

// Get the application’s ContentManager

content = (Application.Current as App).Content;

 

// Create a timer for this page

timer = new GameTimer();

timer.UpdateInterval = TimeSpan.FromTicks(33333);

timer.Update += OnUpdate;

timer.Draw += OnDraw;

}

…

private void OnUpdate(object sender, GameTimerEventArgs e)

{

UpdateSprite(e);

}

Kombinácia technológií Silverlight a XNA pre hry a graficky náročné aplikácie

V prvej verzii SDK pre Windows Phone 7 bolo možné vyvíjať buď Silverlight aplikácie, ktoré využívajú XAML kód pre návrh používateľského prostredia a aplikačný kód pre obsluhu udalostí v jednom z .NET jazykom, alebo hry v XNA Studiu. SDK pre novú verziu “Mango” popri spomínaných možnostiach umožňuje aj kombináciu Silverlight a XNA technológií v jednej aplikácii.

Silverlight aplikáciu (typ projektu Windows Phone Application) budete vytvárať ak potrebujete použiť ovládacie prvky definované v XAML kóde a udalosťami riadený kód aplikačnej logiky, prípadne ak chcete použiť sofistikované prvky na prehrávanie multimédií, hlavne videa, či HTML web browser.

XNA Framework aplikáciu (typ projektu Windows Phone Game ) budete vytvárať, ak potrebujete hru, prípadne inú aplikáciu, ktorá vyžaduje výkonnú 2D alebo 3D grafiku, využívajúcu rendrovanie textúr a animáciu

Kombinovaná Silverlight + XNA Framework aplikácia (projekt typu Windows Phone Silverlight and XNA Application) kombinuje výhody obidvoch spomínaných typov aplikácií, takže tento typ projektu použijete vtedy ak potrebujete aj XAML ovládacie prvky aj výkonnú grafiku. Tieto technológie je možné kombinovať v rámci jednej aplikácie, ale na rôznych stránkach, takže napríklad aplikácia môže mať úvodnú stránku na báze technológie Silverlight a po kliknutí na ovládací prvok sa zobrazí nová stránka s výkonnou XNA grafikou.

Vytvorenie kombinovanej Silverlight + XNA Framework aplikácie si môžete vyskúšať na “prázdnom” projekte typu Windows Phone Silverlight and XNA Application, alebo na šablóne projektu jednoduchej grafickej aplikácie s pohyblivým štvorčekom. Táto šablóna má názov Phone 3D Graphics Application.

Vytvorte nový projekt typu Windows Phone 3D Graphics Application. Táto Silverlight aplikácia môže na niektorých svojich stránkach rendrovať XNA Framework kontext.

Hlavná XAML stránka (MainPage.xaml) obsahuje tlačidlo pre aktiváciu XNA stránky s grafikou (GamePage.xaml)

Táto stránka je prázdna, jej obsah sa generuje pomocou XNA Frameworku, takže v XAML kóde tejto stránky je okrem definovania XML menných priestorov a parametrov stránky len vysvetľujúci komentár

<!–No XAML content as the page is rendered entirely with XNA–>

Grafika je generovaná pomocou kódu (GamePage.xaml.cs). Scéna sa vykresľuje v procedúre

private void OnDraw(object sender, GameTimerEventArgs e)

{

SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.Black);

spriteBatch.Begin();

spriteBatch.Draw(texture, spritePosition, Color.White);

spriteBatch.End();

}

 

Pri inicializácii aplikácie je vytvorený časovač a grafické operácie sa vykonávajú v obsluhe udalosti pri každom tiku časovača.

public GamePage()

{

InitializeComponent();

 

// Get the application’s ContentManager

content = (Application.Current as App).Content;

 

// Create a timer for this page

timer = new GameTimer();

timer.UpdateInterval = TimeSpan.FromTicks(33333);

timer.Update += OnUpdate;

timer.Draw += OnDraw;

}

…

private void OnUpdate(object sender, GameTimerEventArgs e)

{

UpdateSprite(e);

}

Grafika

Poslaním moderných mobilných platforiem je uspokojiť požiadavky používateľov, ktorí chcú niečo viac než informácie, viac než rýchlosť, viac než funkcie. Namiesto technokraticky strohej funkcionality používatelia hľadajú zážitok, pocity a emócie. Tieto fenomény by sa dali zhrnúť pod komplexný pojem používateľská skúsenosť, čiže pocity a dojmy, ktoré sprevádzajú používateľa pri práci s aplikáciou bez ohľadu na jej povahu. Je to akási nadstavba nad perfektnou a presnou funkcionalitou, kedy okrem užitočnosti prináša používateľovi pozitívne pocity, vnemy a emócie pri práci s aplikáciou. O marketingovom význame týchto fenoménov netreba ani hovoriť, graficky a používateľsky príjemná aplikácia priťahuje používateľov ako magnet. Grafika je jedným zo základných pilierov tvorby prezentačného rozhrania mobilných aplikácií. Pomocou správne navrhnutej grafiky sa často dá vyjadriť oveľa viac, než pomocou textu, či tabuliek údajov. Okrem vyjadrovacej funkcie plní aj nezanedbateľnú funkciu estetickú, grafické prvky vhodne dotvárajú dizajn aplikácie.

Statická grafika definovaná v etape návrhu

XAML umožňuje definovať základné geometrické obrazce a tvary, pomocou ktorých sa dotvára dizajn prezentačného rozhrania aplikácie, prípadne sa generujú rôzne prvky obchodnej grafiky, ako sú napríklad rôzne typy grafov. Silverlight pre dvojrozmernú grafiku využíva súradnicovú sústavu s počiatkom v ľavom hornom rohu. V príklade ukážeme statické vykreslenie niekoľkých základných geometrických útvarov:

<Canvas x:Name=”ContentCanvas” Grid.Row=”1″ Background=”Transparent”

Margin=”12,0,12,0″>

<Line X1=”10″ Y1=”10″ X2=”200″ Y2=”20″ Stroke=”Blue” StrokeThickness=”5″/>

<Rectangle Width=”100″ Height=”200″ Fill=”LightGray” Stroke=”Black”

     Canvas.Top=”100″ Canvas.Left=”20″ StrokeThickness=”3″ />

<Polygon Fill=”LightGray” Points =”250,20 330,125 200,175″

Stroke =”Blue” StrokeThickness =”3″/>

<Ellipse Width=”100″ Height=”100″ Fill=”LightGray” Stroke=”Black”

Canvas.Top=”250″ Canvas.Left=”190″ />

</Canvas>

Statická grafika

Dynamická grafika

Zatiaľ čo statická grafika definovaná v XML kóde sa hodí skôr na vykresľovanie pozadia, na vykresľovanie dynamickej grafiky, či už jednoduchých hier, diagramov, schém procesov a podobne sa používa aplikačný kód. XAML kód obsahuje len prázdny objekt Canvas

<Canvas x:Name=”ContentCanvas” Grid.Row=”1″ Background=”Transparent”

Margin=”12,0,12,0″>

</Canvas>

 

Kód na vykreslenie priamky

 

public MainPage()

{

InitializeComponent();

 

Line line = new Line();

line.Stroke = new SolidColorBrush(Colors.Green);

line.StrokeThickness = 5;

Point point1 = new Point(); point1.X = 10.0; point1.Y = 10.0;

Point point2 = new Point(); point2.X = 250.0; point2.Y = 150.0;

line.X1 = point1.X; line.Y1 = point1.Y;

line.X2 = point2.X; line.Y2 = point2.Y;

this.ContentCanvas.Children.Add(line);

 

}

Vykreslenie priamky pomocou kódu

Kreslenie prstom

U prístrojov s dotykovým displejom sa námet na ďalšiu grafickú aplikáciu, plnú dynamiky ponúka sám – čo tak kresliť prstom po obrazovke. Princíp je jednoduchý. V obslužných procedúrach udalostí dotykového displeja (kvôli kompatibilite majú názvy ekvivalentné udalostiam myši) onTouchEvent budeme snímať ako udalosti dotykya pohyby prsta

private Point pAkt;

private Point pOld;

 

// Constructor

public MainPage()

{

InitializeComponent();

this.ContentCanvas.MouseMove += new MouseEventHandler(ContentCanvas_MouseMove);

this.ContentCanvas.MouseLeftButtonDown +=

new MouseButtonEventHandler(ContentCanvas_MouseLeftButtonDown);

}

 

void ContentCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

pAkt = e.GetPosition(ContentCanvas);

pOld = pAkt;

}

 

void ContentCanvas_MouseMove(object sender, MouseEventArgs e)

{

pAkt = e.GetPosition(this.ContentCanvas);

Line line = new Line() { X1 = pAkt.X, Y1 = pAkt.Y, X2 = pOld.X, Y2 = pOld.Y };

line.Stroke = new SolidColorBrush(Colors.Cyan);

line.StrokeThickness = 5; this.ContentCanvas.Children.Add(line); pOld = pAkt;

}

Kreslenie prstom

Využitie senzorov

Prístroje pod taktovkou operačného systému Windows Phone 7 sú vybavené kompasom, akcelerometrom, gyroskopom a systémom pre určovanie polohy. Akceleromerer je povinná súčasť, kompas a gyroskop prístroje rôznych výrobcov môžu a nemusia obsahovať. Akcelerometer má v mobilnom telefóne veľmi dôležitú funkciu, umožňuje nielen zistenie aktuálnej orientácie prístroja (na výšku, či na šírku), ale nakoľko prístroj nemá žiadne kurzorové tlačidlá ani nijaký ekvivalent joysticku využíva sa naklápanie prístroja aj na ovládanie hier.

Ak zariadenia, alebo emulátor nepodporujú gyroskop, prípadne kompas, je potrebné v aplikácii túto skutočnosť ošetriť

if (compass == null)

{

compass = new Compass();

compass.TimeBetweenUpdates = TimeSpan.FromMilliseconds(20);

compass.CurrentValueChanged

+= new EventHandler<SensorReadingEventArgs<CompassReading>>

(compass_CurrentValueChanged);

}

 

try

{

statusTextBlock.Text = “…inicializácia kompasu”;

compass.Start();

}

catch (InvalidOperationException)

{

statusTextBlock.Text = “Zariadenie nepodporuje kompas.”;

}

 

 

 

if (!Gyroscope.IsSupported)

{

statusTextBlock.Text = “Zariadenie nepodporuje gyroskop”;

startButton.IsEnabled = false;

stopButton.IsEnabled = false;

}

 

Ak zariadenia, alebo emulátor nepodporujú gyroskop, prípadne kompas, je potrebné v aplikácii túto skutočnosť ošetriť

Pre úplnosť uvádzame aj fragmenty kódu pre čítanie hodnôt kompasu

xTextBlock.Text = “X: ” + reading.MagnetometerReading.X.ToString(“0.00”);

yTextBlock.Text = “Y: ” + reading.MagnetometerReading.Y.ToString(“0.00”);

zTextBlock.Text = “Z: ” + reading.MagnetometerReading.Z.ToString(“0.00”);

a gyroskopu

Vector3 rotationRate = gyroscopeReading.RotationRate;

 

xTextBlock.Text = “X: ” + rotationRate.X.ToString(“0.00”);

yTextBlock.Text = “Y: ” + rotationRate.Y.ToString(“0.00”);

zTextBlock.Text = “Z: ” + rotationRate.Z.ToString(“0.00”);

 

 

Novinkou verzie “Mango” sú komplexné informácie o dynamických zmenách polohy telefónu. Existujú totiž fyzické obmedzenia jednotlivých senzorov pre ktoré môže byť ťažké určiť skutočnú orientáciu a pohyb zariadenia zo surových údajov z jednotlivých čidiel Windows Phone. Napríklad údaje z akcelerometra sú odvodené od zotrvačnosti vyplývajúcej z pohybu zariadenia. Gyroskop meria rýchlosť otáčania, no nie polohu. Preto sú v operačnom systéme implementované zložité geometrické výpočty, ktoré sú potrebné zistenie polohy orientácie a pohybu zo surových dát z jednotlivých senzorov. Takéto informácie sú dôležité pre aplikácie pracujúce s rozšírenou realitou (augmented reality), jedná sa hlavne o polohu, rotačné zrýchlenie, a lineárne zrýchlenie.

Akcelerometer

Senzor akcelerometru musí byť povolený (implicitné nastavenie) v súbore WMAppManifest.xml v sekcii <Capabilities>.

<Capabilities>

<Capability Name=”ID_CAP_GAMERSERVICES”/>

<Capability Name=”ID_CAP_IDENTITY_DEVICE”/>

<Capability Name=”ID_CAP_IDENTITY_USER”/>

<Capability Name=”ID_CAP_LOCATION”/>

<Capability Name=”ID_CAP_MEDIALIB”/>

<Capability Name=”ID_CAP_MICROPHONE”/>

<Capability Name=”ID_CAP_NETWORKING”/>

<Capability Name=”ID_CAP_PHONEDIALER”/>

<Capability Name=”ID_CAP_PUSH_NOTIFICATION”/>

<Capability Name=”ID_CAP_SENSORS”/>

<Capability Name=”ID_CAP_WEBBROWSERCOMPONENT”/>

</Capabilities>

 

Budeme monitorovať zabudovaný akcelerometer, pre lepšie pochopenie údajov, ktoré vracia ich budeme vypisovať v textovej podobe pomocou prvku TextBlock

<!–ContentPanel – place additional content here–>

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

<TextBlock Name=”tblVypis”

HorizontalAlignment=”Center” VerticalAlignment=”Center” />

</Grid>

Je potrebné vytvoriť referenciu na knižnicu Microsoft.Devices.Sensors.

Vytvorenie referencie na knižnicu Microsoft.Devices.Sensors

Do kódu v súbore MainPage.xaml.cs je potrebné pridať referenciu na namespace.

using Microsoft.Devices.Sensors;

 

V konštruktore vytvorte objekt Accelerometer. Následne vytvorte procedúru ktorá bude reagovať na udalosť ReadingChanged, ktorá nastane pri zmene polohy telefónu s akcelerometrom

// Constructor

public MainPage()

{

InitializeComponent();

Accelerometer aclr = new Accelerometer();

aclr.ReadingChanged += OnAclrReadingChanged;

 

try

{

aclr.Start();

}

catch (Exception exc)

{

tblVypis.Text = exc.Message;

}

}

V tele obslužnej procedúry pre výpis údajov z akcelerometra vypíšeme hodnotu posunov v jednotlivých osiach a komplexný parameter Magnitúda. Magnitúda sa vypočíta ako odmocnina so súčtu druhých mocnín vektorov X,Y a Y. V procedúre si dajte pozor, nakoľko sa vypisujú údaje z iného threadu.

void OnAclrReadingChanged(object sender, AccelerometerReadingEventArgs args)

{

string str = String.Format(“X = {0:F2}\n” +

“Y = {1:F2}\n” +

“Z = {2:F2}\n\n” +

“M = {3:F2}\n\n”,

args.X, args.Y, args.Z,

Math.Sqrt(args.X * args.X + args.Y * args.Y + args.Z *

args.Z));

 

if (tblVypis.CheckAccess())

{

SetTextBlockText(tblVypis, str);

}

else

{

tblVypis.Dispatcher.BeginInvoke(new

SetTextBlockTextDelegate(SetTextBlockText),

tblVypis, str);

}

}

 

delegate void SetTextBlockTextDelegate(TextBlock txtblk, string text);

 

void SetTextBlockText(TextBlock txtblk, string text)

{

txtblk.Text = text;

}

 

Aplikáciu využívajúcu akcelerometer môžete vo verzii SDK 7.1 otestovať aj v emulátore. Zmena polohy (náklon) prístroja sa simuluje 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.

Text akcelerometra na emulátore

Geografická lokalizácia

Najpresnejšie je GPS, ale je pomalé a nadá sa použiť v budovách, alebo husto zastavaných oblastiach. Preto Win Phone 7 používa univerzálnu koncepcia zisťovania aktuálnej polohy cez GPS, WiFi a GSM

Univerzálna koncepcia lokalizácie

Ak chcete geografickú lokalizáciu využívať vo svojom projekte, Je potrebné vytvoriť referenciu na knižnicu System.Device.

using System.Device.Location;

Námetom jednoduchej aplikácie je výpis aktuálnych súradníc

public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

 

GeoCoordinateWatcher gcw = new GeoCoordinateWatcher();

gcw.PositionChanged += OnGcwChanged;

 

try

{

gcw.Start();

}

catch (Exception exc)

{

tblVypis.Text = exc.Message;

}

}

 

void OnGcwChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> args)

{

string str = String.Format(“Zemep. dĺžka: {0:F3}\r\n” +

“Zemep. šírka: {1:F3}\r\n” +

“Výška: {2}”,

args.Position.Location.Longitude,

args.Position.Location.Latitude,

args.Position.Location.Altitude);

 

if (tblVypis.CheckAccess())

{

SetTextBlockText(tblVypis, str);

}

else

{

tblVypis.Dispatcher.BeginInvoke(new

SetTextBlockTextDelegate(SetTextBlockText),

tblVypis, str);

}

 

}

delegate void SetTextBlockTextDelegate(TextBlock txtblk, string text);

 

void SetTextBlockText(TextBlock txtblk, string text)

{

txtblk.Text = text;

}

 

}

 

Mapové služby

V príklade pre využitie mapových služieb budeme využívať mapovú službu Microsoft Research Maps http://msrmaps.com. Do projektu aplikácie pridajte referenciu na službu (položka kontextového menu Add Service Reference) http://msrmaps.com/TerraService2.asmx?WSDL

Referencia na mapovú službu

Službu pomenujte napríklad MsrMapsService

V XAML návrhu pridajte prvok typu text block navýpis

<!–ContentPanel – place additional content here–>

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

<TextBlock Name=”tblVypis” HorizontalAlignment=”Center”

VerticalAlignment=”Center” TextWrapping=”Wrap” />

</Grid>

 

Do kódu pridajte referencie na menné priestory

using System.Device.Location;

using System.IO;

using System.Windows.Media.Imaging;

using MapoveSlužby.MsrMapsService;

 

kód

namespace MapoveSlužby

{

public partial class MainPage : PhoneApplicationPage

{

 

GeoCoordinateWatcher gcw = new GeoCoordinateWatcher();

TerraServiceSoapClient proxy = new TerraServiceSoapClient();

 

// Constructor

public MainPage()

{

InitializeComponent();

Loaded += OnMainPageLoaded;

}

 

void OnMainPageLoaded(object sender, RoutedEventArgs args)

{

// udalosti pre TerraServiceSoapClient proxy

proxy.GetAreaFromPtCompleted += OnProxyGetAreaFromPtCompleted;

proxy.GetTileCompleted += OnProxyGetTileCompleted;

 

// Start gcw

tblVypis.Text = “Zisťovanie polohy…”;

gcw.PositionChanged += OngcwPositionChanged;

gcw.Start();

}

 

void OngcwPositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> args)

{

// zastav gcw

gcw.PositionChanged -= OngcwPositionChanged;

gcw.Stop();

 

// Výpis súradníc do záhlavia

GeoCoordinate coord = args.Position.Location;

ApplicationTitle.Text += “: ” + String.Format(“{0:F2}°{1} {2:F2}°{3}”,

Math.Abs(coord.Latitude),

coord.Latitude > 0 ? ‘N’ : ‘S’,

Math.Abs(coord.Longitude),

coord.Longitude > 0 ? ‘E’ : ‘W’);

// Dotaz na službu na aktuálnu oblasť

LonLatPt center = new LonLatPt();

center.Lon = args.Position.Location.Longitude;

center.Lat = args.Position.Location.Latitude;

 

tblVypis.Text = “Prístup k mapovej službe…”;

proxy.GetAreaFromPtAsync(center, 1, Scale.Scale16m, (int)ContentPanel.ActualWidth,

(int)ContentPanel.ActualHeight);

}

 

void OnProxyGetAreaFromPtCompleted(object sender, GetAreaFromPtCompletedEventArgs args)

{

if (args.Error != null)

{

tblVypis.Text = args.Error.Message;

return;

}

 

tblVypis.Text = “Načítanie mapy…”;

 

AreaBoundingBox box = args.Result;

int xBeg = box.NorthWest.TileMeta.Id.X;

int yBeg = box.NorthWest.TileMeta.Id.Y;

int xEnd = box.NorthEast.TileMeta.Id.X;

int yEnd = box.SouthWest.TileMeta.Id.Y;

 

// Loop through the tiles

for (int x = xBeg; x <= xEnd; x++)

for (int y = yBeg; y >= yEnd; y–)

{

// Create Image object to display tile

Image img = new Image();

img.Stretch = Stretch.None;

img.HorizontalAlignment = HorizontalAlignment.Left;

img.VerticalAlignment = VerticalAlignment.Top;

img.Margin = new Thickness((x – xBeg) * 200 –

box.NorthWest.Offset.XOffset,

(yBeg – y) * 200 – box.NorthWest.Offset.YOffset, 0, 0);

 

// Insert after TextBlock but before Image with logo

ContentPanel.Children.Insert(1, img);

 

// Define the tile ID

TileId tileId = box.NorthWest.TileMeta.Id;

tileId.X = x;

tileId.Y = y;

 

// Call proxy to get the tile (Notice that Image is user object)

proxy.GetTileAsync(tileId, img);

}

}

 

void OnProxyGetTileCompleted(object sender, GetTileCompletedEventArgs args)

{

if (args.Error != null)

{

return;

}

 

Image img = args.UserState as Image;

BitmapImage bmp = new BitmapImage();

bmp.SetSource(new MemoryStream(args.Result));

img.Source = bmp;

}

}

Test príkladu využívajúceho mapové služby

 

Projekty typu Panorama a Pivot

Projekt typu Panorama Application

Projekt typu Panorama Application je jedným z trikov ako môže aplikácia využiť väčšiu zobrazovaciu plochu. Aplikácia využíva virtuálnu plochu, ktorá je na šírku podstatne väčšia, viacnásobná, než je šírka displeja. Displej je potom akýmsi oknom, ktoré sa posúva po virtuálnej ploche. Využíva sa prvok Panorama, ktorý je rozčlenený na viac častí, ktoré sa nazývajú PanaramaItem.

V šablóne projektu je prvok Panorama rozdelený na dve časti označené v záhlaví ako first item a second item.

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

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

 

<!–Panorama control–>

<controls:Panorama Title=”my application”>

<controls:Panorama.Background>

<ImageBrush ImageSource=”PanoramaBackground.png”/>

</controls:Panorama.Background>

 

<!–Panorama item one–>

<controls:PanoramaItem Header=”first item”>

…

</controls:PanoramaItem>

 

<!–Panorama item two–>

<controls:PanoramaItem Header=”second item”>

…

</controls:PanoramaItem>

</controls:Panorama>

</Grid>

 

Údaje implicitne použité v šablóne aplikácie typu typu Panorama Application sú v štruktúre MainViewModel v súbore MainViewModelSampleData.xaml (výpis je vodorovne skrátený)

<local:MainViewModel

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

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

xmlns:local=”clr-namespace:WindowsPhonePanoramaApplication1″

SampleProperty=”Sample Text Property Value”>

 

<local:MainViewModel.Items>

<local:ItemViewModel LineOne=”design one” LineTwo=”Maecenas praes…
“/>

<local:ItemViewModel LineOne=”design two” LineTwo=”Dictumst eleif…
“/>

<local:ItemViewModel LineOne=”design three” LineTwo=”Habitant inc…
“/>

<local:ItemViewModel LineOne=”design four” LineTwo=”Nascetur phar…
“/>

<local:ItemViewModel LineOne=”design five” LineTwo=”Sagittis sene…
“/>

<local:ItemViewModel LineOne=”design six” LineTwo=”Torquent ultri…
“/>

</local:MainViewModel.Items>

 

</local:MainViewModel>

Posúvanie okna náhľadu. Všimnite si, že obraz je rozdelený tak, aby vpravo bol pásik z ďalšej obrazovky aby používateľa upozornil na jej existenciu

Princíp zobrazovania pomocou prvku Panorama

Projekt typu Pivot Application

Tento typ projektu poskytuje rýchly, elegantný a efektívny spôsob, ako pracovať so zoznamami a agregovanými údajmi. Môže byť použitá pre stránkované zobrazovanie a filtrovanie veľkých množín údajov. Jednoduchým gestom posunutia doprava, alebo doľava sa používateľ ocitne na ďalšej stránke.

Princíp zobrazovania pomocou prvku Pivot. Všimnite si, že prvok Pivot control sa často vyskytuje aj v aplikáciách, ktoré sú súčasťou operačného systému, napríklad pre zobrazenie zoznamu mailov, úloh, kontaktov a podobne.

Vytvorte projekt typu Pivot Application. V šablóne nájdete príklad objektu Pivot Control, obsahujúci dve stránky PivotItem.

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

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

<!–Pivot Control–>

<controls:Pivot Title=”MY APPLICATION”>

<!–Pivot item one–>

<controls:PivotItem Header=”first”>

<!–Double line list with text wrapping–>

<ListBox x:Name=”FirstListBox”

Margin=”0,0,-12,0″ ItemsSource=”{Binding Items}”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Margin=”0,0,0,17″ Width=”432″>

<TextBlock Text=”{Binding LineOne}” TextWrapping=”Wrap”

Style=”{StaticResource PhoneTextExtraLargeStyle}”/>

<TextBlock Text=”{Binding LineTwo}” TextWrapping=”Wrap”

Margin=”12,-6,12,0″

Style=”{StaticResource PhoneTextSubtleStyle}”/>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</controls:PivotItem>

 

<!–Pivot item two–>

<controls:PivotItem Header=”second”>

…

</controls:PivotItem>

</controls:Pivot>

</Grid>

 

Podobna ako v projekte využívajúcom prvok Panarama sú údaje implicitne použité v šablóne aplikácie v štruktúre MainViewModel v súbore MainViewModelSampleData.xaml

Spustenie aplikácie vytvorenej podľa šablóny Pivot Application

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

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 TextBox a Button.

<!–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)

{

 

}

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