Systemy Wbudowane
Dr inż. Mariusz Fraś
Windows Phone
" Architektura i programowanie aplikacji
W prezentacji wykorzystano ilustracje z witryny msdn.microsoft.com
© maf 1
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Architektura aplikacji
" Wybrane elementy architektury
Page
" Plik XAML  opis zawartości strony
" Code behind  kod  zachowanie
aplikacji
Event handling
Page navigation
Launchers & choosers
Data binding
Isolated Storage
namespace AddingMachine {
public partial class MainPage : PhoneApplicationPage {
// Constructor
public MainPage() {
InitializeComponent();
}
}
}
© maf 2
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Architektura aplikacji
" Główne składowe projektu aplikacji
WMAppManifest.xml
" Plik konfiguracyjny całego projektu
" M.in. określa nazwę programu, autora, język i inne dane, definiuje
domyślne funkcje telefonu, zawiera odnośniki do zasobów, itp.
" Generowany automatycznie
© maf 3
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Architektura aplikacji
" Główne składowe projektu aplikacji
App.xaml
" Głównie do definiowania zasobów
App.xaml.cs  zawiera:
" Jest kontenerem na wszystkie elementy aplikacji
" Zawiera definicjÄ™ przestrzeni nazw (namespace)  jak nazwa projektu
" Klasa App  dziedziczy z klasy
Application należącej do
...
namespace HelloPhone {
Silverlight
...
Wszystkie programy Silverlight
public partial class App : Application {
majÄ… takÄ… klasÄ™ App ...
public App() {
Taka klasa zawiera definicje,
...
//Standard Silverlight initialization
Dla inicjalizacji, uruchomiania
InitializeComponent();
i kończenia programu
// Phone-specific initialization
InitializePhoneApplication();
" Tworzy obiekt typu
}
PhoneApplicationFrame
... } }
© maf 4
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Architektura aplikacji
" Główne składowe projektu aplikacji
App.xaml - Definiuje przestrzenie nazw i zasoby używane przez
program (schematy kolorów, styli itp.)
Deklaracje przestrzeni nazw
2-ie ogólne Silverlight
Główny znacznik
2-ie Windows Phone
x:Class= HelloPhone.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">





Launching="Application_Launching" Closing="Application_Closing"
Activated="Application_Activated"
Deactivated="Application_Deactivated"/>


© maf 5
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Architektura aplikacji
" Page (Strona)
Podstawowy element modelu interfejsu aplikacji
" Wyświetla trwałą zawartość na ekranie
" Aplikacja = kolekcja stron
DefiniujÄ… jÄ…
" MainPage.xaml " MainPage.xaml.cs
" Mogą być różnie realizowane
© maf 6
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Architektura aplikacji
" MainPage.xaml
© maf 7
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
XAML
© maf 8
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Model ekranu
" Frame  kontener najwyższego poziomu
Obiekt typu PhoneApplicationFrame
Dla aplikacji tylko jedna
Wspiera własności/funkcje ekranowe takie jak orientację ekranu i
usługę nawigacji pomiędzy stronami (NavigationService)
Może zawierać kontrolki stron Pages oraz Status Bar
i Application Bar
" Page  strona
Kontener na zawartość (elementy)
strony  wypełnia Frame
" Status Bar (System Tray)
Wyświetla systemowe informacje
statusowe
Aplikacja może wpływać na pasek
" Zmieniać wygląd
" Dostarczać zawiadomienia
" Używać wskaz
nika postępu
(progress indicator)
© maf 9
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Model ekranu
" Application Bar
Miejsce na typowe funkcje/zadania
Aplikacja może wpływać na wygląd/zawartość
Aplikacja może zawierać menu uruchamiane z tego paska
" dla zadań nietypowych
© maf 10
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Model ekranu
" Model strony
Strona reprezentuje zawartość na ekranie
" Obiekt typu PhoneApplicationPage
" Może zawierać kontrolki układu
(layout control)
System Tray
" Kontrolka układu  kontener
Application Title
Może zawierać inne kontrolki
Page Name
Do pozycjonowania kontrolek
Nowa aplikacja domyślnie zawiera
Content Area
układ Grid
Nawigowanie miedzy stronami Frame
" Poprzez NavigationService
Orientacja strony
" Portrait
" Landscape left/right
Status Bar i Application Bar pozostajÄ… przy guzikach
left/right względem Status Bar
© maf 11
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Układy i kontrolki
" Kontrolki
Układy (Layouts)
i grupujÄ…ce
Tekstowe
Guziki i Wyboru
Listy
Przykład opisu w .xaml
VerticalAlignment="Top" Name="firstNumberTextBox" Text="0"
Width="460" TextAlignment="Center"
/>
© maf 12
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Układy i kontrolki
" Kontrolki
Obrazy, mapy i media
HTML
Postępu i wiadomości
© maf 13
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Układy i kontrolki
" Układy
Canvas
" Elementy w określonych współrzędnych płótna

Fill="red" Width="200" Height="200" />

StackPanel
" Wyświetla liniowo
Horyzontalnie lub
wertykalnie






© maf 14
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Układy i kontrolki
" Układy
Grid
" Wyświetla elementy w rzędach i kolumnach















© maf 15
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Układy i kontrolki
" Panorama
TITLE
PANORAMA
ITEM HEADER
PANORAMA
ITEM CONTENT
Kontrolka Panorama zawiera układy:
" Background - typ PanningBackgroundLayer
" Title - typ PanningTitleLayer
" Items - typ PanningLayer
© maf 16
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Układy i kontrolki
" Panorama
Układy zawarte są w kontrolkach Grid





atrybuty


zawiera opis zawartości
...
panelu



...

ewentualne kolejne
...
panele


© maf 17
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Układy i kontrolki
" Pivot
PIVOT
HEADER
Architektura
analogiczna
do Panoramy
PIVOT
ITEM CONTROL






...


© maf 18
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Układy i kontrolki
" ZarzÄ…dzanie orientacjÄ… strony
Orientacja strony
" Portrait lub Landscape left/right
Nie można wspierać tylko jednej strony Landscape
" Właściwość SupportedOrientation strony w MainPage.xaml
Portrait " Landscape " PortraitOrLandscape
SupportedOrientations="PortraitOrLandscape Orientation="Portrait"
Metoda obsługi w MainPage.xaml.cs
protected virtual void OnOrientationChanged( OrientationChangedEventArgs e)
{
if (e.Orientation == PageOrientation.Portrait) {
setPortrait(); // tu przygotować wyświetlanie w pionie
}
else {
setLandscape(); // tu przygotować wyświetlanie w poziomie
}
base.OnOrientationChanged(e);
}
© maf 19
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Układy i kontrolki
" ZarzÄ…dzanie orientacjÄ… strony
Ważna czynność: modyfikacja położenia wyświetlanych obiektów
" Kluczowe znaczenie mają właściwości kontrolek
HorizontalAlignment oraz VerticalAlignment
" Dla kontrolek w xaml
Name="firstTextBox" Text="0" VerticalAlignment="Top" Width="460"
TextAlignment="Center" />
" Np. modyfikacja wyświetlania przy obrocie:
private void setLandscape()
{
firstTextBox.Margin = new Thickness(8,19,0,0);
firstTextBox.Width = 207;
firstTextBox.HorizontalAlignment = HorizontalAlignment.Center;
}
© maf 20
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Układy i kontrolki
" ZarzÄ…dzanie orientacjÄ… strony
Przykład dla Grid  repozycjonowanie elementów

...

Grid.Row="0" Grid.Column="0" ... />
Grid.Column="0" HorizontalAlignment="Center" >

... //itd. 4 guziki


private void PhoneApplicationPage_OrientationChanged( object sender,
OrientationChangedEventArgs e)
{
if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait)) {
Grid.SetRow(buttonList, 1); Grid.SetColumn(buttonList, 0); }
else {
Grid.SetRow(buttonList, 0); Grid.SetColumn(buttonList, 1); }
}
© maf 21
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Układy i kontrolki
" Przewijanie strony
Stosuje siÄ™ konstrukcjÄ™ z parÄ… kontrolek
-




...


© maf 22
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Proste wiadomości
" Wyświetlania prostych informacji
Obiekt typu MessageBox i metoda Show
Wymaga zamknięcia klawiszem OK
Można zawierać wiele linii (użycie Newline)
MessageBox.Show("Invalid Input" + System.Environment.NewLine +
"Please re-enter");
Można opcjonalnie wykonać działanie i testować zwracaną
wartość
if (MessageBox.Show("Do you really want to do this?",
"Scary Thing",
MessageBoxButton.OKCancel) == MessageBoxResult.OK)
{
// zrób coś tutaj
}
else
{
// zrób coś innego
}
© maf 23
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Zdarzenia
" Obsługa zdarzeń
C# dostarcza mechanizm delegacji, który tworzy referencje do
metod obsługi
W narzędziach Windows Phone wsparcie dla bardzo prostego
tworzenia powiÄ…zanych metod z kontrolkami
" Np. przez podwójne kliknięcie
public partial class MainPage : PhoneApplicationPage {
// konstructor
public MainPage() {
InitializeComponent();
}
// metoda obsługi
private void mojGuzik_Click( object sender, RoutedEventArgs e)
{
// obsługa kliknięcia
}
}
© maf 24
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Zdarzenia
" Obsługa zdarzeń
Własność Click we właściwościach kontrolki
mojGuzik_Click
W pliku xaml
Margin="158,275,0,0" Name="equalsButton" VerticalAlignment="Top"
Width="160"
Click="mojGuzik_Click"
/>
© maf 25
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Nawigacja
" Nawigacja pomiędzy stronami
Dodawanie nowych stron = dodatkowe
pliki .xaml i .xaml.cs
Kontrolki nawigacji
Każda strona ma swój
Uri
" Relative
" RelativeOrAbsolute
Kolejne strony
© maf 26
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Nawigacja
" Wywołanie (wyświetlenie) strony
Metoda NavigationService.Navigate(& )
Za pomocÄ… Uri tworzonego ze wskazania na plik .xaml
private void navButton1_Click(object sender, RoutedEventArgs e) {
NavigationService.Navigate(new Uri("/PageTwo.xaml",
UriKind.Relative));
}
" Powrót na stronę
wywołującą
Metoda GoBack(& )
private void navButton2_Click
(object sender, RoutedEventArgs e)
{
NavigationService.GoBack();
}
© maf 27
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Nawigacja
" Przekazywanie parametrów
private void passParam_Click(object sender, RoutedEventArgs e) {
NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" + textBox1.Text,
UriKind.Relative));
}
" Zdarzenia nawigacji
Metody
OnNavigatedTo, OnNavigatingFrom, itp.
protected override void OnNavigatedTo
(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
string msg = "";
if (NavigationContext.QueryString.TryGetValue("msg",
out msg))
{
textBlock1.Text = msg;
}
}
© maf 28
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Launchers
" Zbiór funkcji udostępnianych przez standardowe
programy zainstalowane w środowisku WP
Nie zwraca wyników do wywołującego programu
Zdefiniowane w przestrzeni nazw Microsoft.Phone.Task
" Przykładowe funkcje
PhoneCallTask
WebBrowserTask
MediaPlayerLauncher
" Użycie
EmailComposeTask email = new EmailComposeTask();
email.Body = body;
email.Subject = subject;
email.Show();
WebBrowserTask wb = new WebBrowserTask();
wb.Uri = Parameter.Text;
wb.Show();
© maf 29
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Choosers
" Technika, która umożliwia uruchamianie z poziomu
programu użytkownika standardowych programów
WP z zadanymi parametrami wejściowymi
Pozwala zwracać do programu użytkownika wyniki swego
działania (np. zdjęcie)
Zdefiniowane w przestrzeni nazw Microsoft.Phone.Task
" Przykładowe funkcje
CameraCaptureTask
Contacts
EmailAddressChooserTask
PhotoChooserTask
PhoneNumberChooserTask
Appointments
© maf 30
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika
Choosers
" Przykład programowy
Inicjalizacja obiektu
PhotoChooserTask photoChooser;
inicjalizacja
public MainPage()
przypięcie zdarzenia do
{
metody
...
photoChooser = new PhotoChooserTask();
photoChooser.Completed += new EventHandler(photoChooser_Completed);
}
Obsługa zdarzenia
void photoChooser_Completed(object sender, PhotoResult e) {
if (e.TaskResult == TaskResult.OK)
parametr opisujÄ…cy rezultat
{
selectedImage.Source =
new BitmapImage(new Uri(e.OriginalFileName));
} parametr zawiera info
}
dotycz. rezultatu
Wywołanie
photoChooser.Show();
© maf 31
Å›
Fra
awska
Å‚
Informatyki
Mariusz
Wroc
Instytut
Politechnika