Laboratorium programowania urządzeń mobilnych

Transkrypt

1 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.

2 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. Action - typu TouchAction o wartościach Down, Move i Up. 2. Position - typu Point, 3. Size - typu Size, 4. 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()

3 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.

4 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

5 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));

6 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();

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

8 (dla pliku MainPage.xaml.cs) Aplikacja 3. Zmiana koloru napisu - proszę wykorzystać podany kod. (dla pliku MainPage.xaml) (dla pliku MainPage.xaml.cs)

9 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.