Laboratorium programowania urządzeń mobilnych Wprowadzenie

Laboratorium programowania urządzeń mobilnych Wprowadzenie

Laboratorium
programowania urządzeń mobilnych
Wprowadzenie
Hierarcha klas dla aplikacji typu Silverlight tworzonej przez Visual Studio jest
następująca:
Obsługa ekranu
•
•
•
W urządzeniach z Windows Phone 7 istnieje możliwość obsługi
czterech punktów dotykowych równocześnie (co jest dużym wyzwaniem
dla programistów)
Emulator Windows Phone kliknięcie myszą przekształca na dotyk
ekranowy
Silverlight obsługuje dwa różne interfesy „multi-touch”:
1. Low-level - bazuje na zdarzeniu Touch.FrameReported,
podobny jest do XNA TouchPanel except
2. High-level - składa się z trzech zdarzeń definiowanych przez
UIElement : ManipulationStarted, ManipulationDelta i
ManipulationCompleted.
Interfejs low-level
Głównym elementem interfejsu jest klasa TouchPoint, której instancja
reprezentuje poszczególne „palce” dotykające ekran. Posiada następujące
właściwości (parametry):
1.
2.
3.
4.
Action - typu TouchAction o wartościach Down, Move i Up.
Position - typu Point,
Size - typu Size,
TouchDevice - typu TouchDevice.
TouchDevice - posiada dwie właściwości
1. Id - używany do rozróżnienia „palców” (potrzebny dla Down i Up).
2. DirectlyOver - typu UIElement, określa rodzaj obiektu pod „palcami”
Aby zastosować low-level interfejs trzeba wykorzystać zdarzenie
Touch.FrameReported:
Touch.FrameReported += OnTouchFrameReported;
Metoda OnTouchFrameReported
ma postać:
void OnTouchFrameReported(object sender, TouchFrameEventArgs args)
{…}
Objekt TouchFrameEventArgs posiada właściwość TimeStamp (typu int)
oraz trzy metody:
•
GetTouchPoints(refElement) zwraca TouchPointCollection
•
GetPrimaryTouchPoint(refElement) zwraca TouchPoint
•
SuspendMousePromotionUntilTouchUp()
Kontrolki
Każda aplikacja zawiera szereg kontrolek, które zazwyczaj są generowane
automatycznie. Wystarczy otworzyć ToolBox i przeciągnąć wybraną kontrolkę
na ekran telefonu. Dokładny opis kontrolek jest w dokumentacji WPhone.
Poniżej jest opisane zastosowanie kilku popularnych kontrolek











Image - pozwala na wyświetlania obrazków,
ScrollViewer - pozwala na przesuwanie elementów w niej zawartych,
TextBlock - służy głównie do wyświetlania tekstu,
ListBox - służy do tworzenia list z wielu innych kontrolek, działa podobnie
jak ScrollViewer,
Map - służy do określania lokalizacji na mapie,
Media Element - umożliwia prezentację plików multimedialnych,
PasswordBox - umożliwia maskowanie tekstu, jaki jest do niej wprowadzany,
RadioButton - umożliwia zaznaczenie jednej z dostępnych opcji, kontrolki te
mogą być grupowane,
Slider - służy do płynnej regulacji zmiany wartości różnych zakresów,
StackPanel - powierzchnia do rozmieszczania kontrolek, kontrolki w niej
zawarte można jedynie przeglądać,
TextBox - służy do pobierania tekstu z klawiatury,
Przykład
Utworzymy aplikację , która będzie zawierała odwołania do kilku stron zawierających prezentacje
wybranych kontrolek. Do ułożenia odwołań wykorzystamy kontrolkę StackPanel umożliwiającą
automatyczne układanie elementów pionowo (jeden pod drugim) lub poziomo (jeden obok drugiego).
Tworzymy nowy projekt. Zostanie wygenerowana strona główna MainPage.xaml. W oknie XAML
zmieniamy nazwę aplikacji i strony głównej:
W oknie XAML zmieniamy nazwę aplikacji i strony głównej.
◦
◦
Dla TextBlock o x:Name=ApplicationTitle zmieniamy właściwość Text na
Kontrolki.
Dla TextBlock o x:Name=PageTitle zmieniamy właściwość Text na Wybór.

W oknie XAML do elementu Grido x:Name=ContentPanel dodajemy element StackPanel .

Dodajemy kontrolkę HyperlinkButton i zmieniamy jej właściwość Content na Główne.

Dwukrotnie klikamy kontrolkę i w metodzie hyperlinkButton1_Click dodajemy:
NavigationService.Navigate(new Uri("/Kontrolki;component/Glowne.xaml", UriKind.Relative));
Dodajemy do projektu nową stronę o nazwie Glowne.xaml


Z menu wybieramy Project -> Add New Item.
W oknie Add New Item:
— z lity dostępnych szablonów wybieramy Windows Phone PortraitPage,
— w polu Name wpisujemy Glowne.xaml,
— wciskamy przycisk Add.
Na stronie Glowne.xaml, w oknie XAML określamy nazwę aplikacji i strony


Dla elementu TextBlock o x:Name=ApplicationTitle zmieniamy
właściwość Text na Kontrolki
Dla elementu TextBlock o x:Name=PageTitle zmień właściwość Text na Główne

W oknie XAML do elementu Grid o x:Name=ContentPanel dodajemy element StackPanel,
a następnie dodajemy kontrolki umożliwiające:
Pobranie imienia:


Przenosimy kontrolkę TextBlock i określamy jej
właściwość Text jako Podaj imię:
Przenosimy kontrolkę TextBox i określamy jej
właściwość Text jako "".
Pobranie wieku:


Przenosimy kontrolkę TextBlock i określamy jej właściwość Text
jako Podaj wiek:
Przenosimy kontrolkę TextBox i określamy jej właściwość Text jako ””
oraz dodajemy właściwość InputScope="Number„.
Dodajemy kontrolki wyboru.



Przenosimy kontrolkę TextBlock i zmieniamy właściwość Text na
Wybierz płeć:
Przenosimy kontrolkę RadioButton i określamy jej
właściwość Content jako "Kobieta", następnie definiujemy
właściwość GroupName="Plec".
Przenosimy kontrolkę RadioButton i określamy jej
właściwość Content jako "Mężczyzna", definiujemy
właściwość GroupName="Plec„.
Dodajemy kontrolki umożliwiające pobranie hasła
Wstawiamy:



kontrolkę TextBlock i określamy jej właściwość Text jako Podaj
hasło:
kontrolkę PasswordBox.
kontrolkę CheckBox i określamy jej właściwość Content jako
"Zapamiętac ?".
Dodajemy przycisk umożliwiający zatwierdzenie danych i przejście do strony
głównej.

Do okna podglądu telefonu przenosimy kontrolkę Button i dwukrotnie
klikamy na dodaną kontrolkę a w metodzie button1_Click piszemy:
NavigationService.Navigate(newUri("/Kontrolki; component/MainPage.xaml", UriKind.Relative));
Dodajemy nową stronę o nazwie Dodatkowe.xaml


Z menu wybieramy Project -> Add New Item.
W oknie Add New Item:
— z lity dostępnych szablonów wybieramy Windows Phone PortraitPage,
— w polu Name wpisujemy Dodatkowe.xaml,
— wciskamy przycisk Add.
Na stronie Dodatkowe.xaml, w oknie XAML określamy nazwę aplikacji i strony


Dla elementu TextBlock o x:Name=ApplicationTitle zmieniamy
właściwość Text na Kontrolki
Dla elementu TextBlock o x:Name=PageTitle zmień właściwość Text na Dodatkowe
Przekierowanie do strony Dodatkowe.xaml - do strony MainPage.xaml do kontrolki StackPanel
dodajemy kontrolkę HyperlinkButton przekierowującą do strony Dodatkowe.xaml.


Do okna podglądu telefonu przenosimy kontrolkę HyperlinkButton i zmieniamy jej
właściwość Content na Dodatkowe.
Dwukrotnie klikamy kontrolkę i w metodzie hyperlinkButton1_Click dodajemy:
NavigationService.Navigate(newUri("/Kontrolki; component/Dodatkowe.xaml",
UriKind.Relative));
W oknie XAML dla strony Dodatkowe.xaml dodajemy
kontrolkę StackPanel umożliwiającą
układanie elementów w pionie i w poziomie. Następnie do StackPanel
przenosimy kontrolkę ListBox i dajemy TextBlock :





<TextBlock Name="tb1" Text="Pierwszy"/>
<TextBlock Name="tb2" Text="Drugi"/>
<TextBlock Name="tb3" Text="Trzeci"/>
<TextBlock Name="tb4" Text="Czwarty"/>
<TextBlock Name="tb5" Text="Piąty"/>
Do StackPanel przenosimy kontrolkę Slider, a następnie przenosimy
kontrolkę TextBox i właściwość Text =””.


Dwukrotnie klikamy na kontrolce Slider.
W metodzie slider1_ValueChanged dodajemy:
textBox1.Text = e.NewValue.ToString();
Zadnia do realizacji.
Aplikacja 1.
- Rejestracja położenia telefonu - proszę wykorzystać podany
kod.
(dla pliku MainPage.xaml)
(dla pliku MainPage.xaml.cs)
Aplikacja 2.
- Zegar - proszę wykorzystać podany kod.
(dla pliku MainPage.xaml)
(dla pliku MainPage.xaml.cs)
Aplikacja 3.
– Zmiana koloru napisu - proszę wykorzystać podany kod.
(dla pliku MainPage.xaml)
(dla pliku MainPage.xaml.cs)
Aplikacja 4
Proszę utworzyć aplikacje, która będzie pełniła funkcję
zegara. Po kliknięciu na zegar, cyfry zegara mają zmienić
kolor (interfejs low-level).
W sprawozdaniu powinien być umieszczony
dokładny opis działania poszczególnych
elementów aplikacji.