3. Windows Phone XML WG MICROSOFT GUI 1 Schemat w dokumencie 2 Schemat w pliku zewnętrznym Visual Studio: Properties pliku xml-owego 3 1
Inne rozszerzenia xml XSL (extensiblestylesheet Language) język, który opisuje przekształcenia dokumentów XSL; obejmuje: XSLT XSL Transformation, język dla przekształceń dokumentów XML, XPath XML Path Language, język opisujący dostęp lub odwołanie do fragmentów XML, XSLF -XSL Formatting, słownik opisujący formatowanie. Zastosowanie pozwala na opis transformacji dokumentów XML oraz sposobu ich formatowania, np.: przekształcenie dokumentu XML na dokument wizualny, który może zostać wydrukowany; w XSLT można stosować HTML i CSS, a następnie dynamicznie tworzyć stronę WWW, która będzie pobierać informacje z pliku XML -takie informacje będą np. formatowane w postaci tabeli HTML. 4 xml w sieci XML dla niewtajemniczonych http://office.microsoft.com/pl-pl/word-help/xml-dlaniewtajemniczonych-ha010034022.aspx XML in 10 points(po polsku!) http://www.w3.org/xml/1999/xml-in-10-points.pl.html Internetowa szkoła http://www.w3schools.com/schema/schema_simple.asp 5 xml wg Microsoft http://cezarywalenciuk.pl/blog/programing/post/k urs-xaml-wstep-elementy-atrybuty 6 2
xml wg Microsoft XAML dialekt XML, istotna część platformy.net (2006, WPF), WPF, Silverlight, WinRT do opisu interfejsu użytkownika, konfiguracja programów. Workflow Foundation, WCF do wyrażania aktywności i konfiguracji Cel: ułatwienie współpracy pomiędzy programistą a osobą z innych dziedzin. 7 xaml Zbiór znaczników kompilator scala xaml z kodem. Szczegółowa specyfikacja go.microsoft.com/fwlink/?linkid=130721 Mapuje.NET-owe przestrzenie nazw, typów, właściwości oraz zdarzeń na ich xaml-owe odpowiedniki. 8 Przykład Kod xaml(z ns) widać od razu! xmlns="http://schemas.microsoft.com/winfx/2006/xaml/p resentation" <Button Content="Hello" /> Kod C# - konieczne uruchomienie System.Windows.Controls.Button btn = new System.Windows.Controls.Button(); btn.content = "Hello"; 9 3
Działania Zadeklarowanie elementu xaml to utworzenie odpowiedniego obiektu.net-owego przez domyślny konstruktor. Ustawienie atrybutu elementu jest równe ustawieniu właściwości o tej samej nazwie danego obiektu. Zdarzenie także jako wartość odp. atrybutu Istotna wielkość liter! 10 Przykład - Click xaml <Button Content="Hello" Click="b_Click" /> C# System.Windows.Controls.Button b = new System.Windows.Controls.Button(); b.content = "Hello"; b.click += new RoutedEventHandler(b_Click);. 11 Nowości w Windows Forms button zawiera tylko tekst (Text="Hello!") w xaml może zawierać prawie wszystko właściwość Content Przykład button zawierający czerwone koło 12 4
Kod C# w public MainPage() Content (typu Object) zmieści Ellipse 13 Kod xaml <Button> <Button.Content> <Ellipse Height="50" Width="50"Fill="Red"/> </Button.Content> </Button> W ogólności -ustawienie właściwości elementów NazwaTypuElementu NazwaTypu.NazwaWłaściwości wewnątrz elementu NazwaTypuElementu 14 Ustawianie właściwości przez atrybuty <Button Background="Wheat" Visibility="Visible" /> przez elementy <Button <Button.Background> Wheat </Button.Background> <Button.Visibility> Visible </Button.Visibility> </Button> 15 5
Jak zrobić takie coś To jest JEDEN button! 16 Zgodność Windows Phone 7 Windows Phone 7,5 także WP7, Windows Phone 8; 8.1 także wszystkie WP7 Windows 10 Mobile wszystkie WP7, WP8 17 Warsztat pracy Microsoft Visual Studio dla programisty ExpressionStudio dla projektanta Expression Blend, Web, Design, Media, Encoder Narzędzia graficzne firm trzecich np. PhotoShop 18 6
Narzędzia programisty System operacyjny: Windows 8 10 Środowisko programistyczne Visual Studio ver. 2012 2015 2017 Zestaw narzędzi dla ver. 8 lub 10 SDK (software development kit) zestaw emulatorów sprzętu Windows Phone 8,1 Windows Mobile 19 Wymagania dla procesora Uruchomienie emulatora procesor musi być 64-bitowy wspierana (i włączona w BIOSie) wirtualizacja (Intel VT lub AMD-V) wspierana (i włączona w BIOSie) funkcja DEP Data Execution Protection (Intel XD bit lub AMD NX bit) wsparcie dla technologii SLAT sprawdzić programem np. Coreinfo 20 Scenariusz budowy aplikacji Projekt w klasyczny sposób, ale koniecznie Visual Studio Szkielet interfejsu użytkownika xaml programista: C#, logika aplikacji GUI grafik: (XAML, Expression Blend) grafika: XNA, DirectX, Unity 21 7
Struktura projektu Properties tzw. manifesty zawierające metadane opisujące aplikację (menu: Project. projektxxxproperties), References wszelkie zewnętrzne powiązania z wytwarzaną aplikacją (biblioteki, serwisy itp.), Assets -pliki ikon i grafik aplikacji, np.: SplashScreen.png (ekran powitania), ApplicationIcon.png (ikona aplikacji na liście aplikacji) itp. MainPage opis (w xaml) strony startowej 22 Warstwy aplikacji Warstwa prezentacji (GUI) opisana: xaml (czyt. zaml); pochodna xml, wszystkie kontrolki graficzne jako znaczniki xml, w pliku: nazwa.xaml Logika aplikacji (zachowanie) kod C# w pliku nazwa.xaml.cs Dane aplikacji (opcja) pliki xml lokalna relacyjna BD 23 XAML w projekcie Page (UserControl w Silverlight) + atrybuty zawartość (Grid, ) 24 8
Struktura opisu XAML <Page x:class="app9.mainpage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:app9" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility mc:ignorable="d"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeB <Button Content="START" HorizontalAlignment="Center" FontSiz </Grid> </Page> 25 Namespace: xmlns Dwie podstawowe przestrzenie nazw xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" zawiera klasy WPF (Button, Grid, Label, ) domyślna przestrzeń nazw (bez prefiksu) xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" domyślnie zmapowana do prefiksu x zawiera różne pomocnicze cechy XAML przy odwołaniu - prefiks <x:elementname> 26 Główne pliki Tworzone automatycznie przez VS App.xaml definiuje tzw. zasoby aplikacji (np. do tworzenia aplikacji wielojęzycznych), podstawowe 4 zdarzenia aplikacji App.xaml.cs szkielet inicjalizacji aplikacji -zdarzenia uruchomienie, zamknięcie, aktywacja, deaktywacja możliwe do modyfikacji. 27 9
Uruchomienie aplikacji Utworzenie obiektu App w pliku App.xaml.cs klasa App:Application Konstruktor App wywołuje m.in. metody: InitializeComponent: odczyt zawartości App.xaml InitializePhoneApplication: inicjowanie RootFrame, główna ramka aplikacji, wewnątrz będą wyświetlane wszystkie strony (formatki). InitializeLanguage: język aplikacji if (Debugger.IsAttached): wyświetlanie informacji wydajnościowych w trybie Debug Można dodać własy kod do metod obsługi zdarzeń Launching, Activated, Deactivated i Closing. 28 App.xaml <Application x:class="phoneapp2.app" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" <!--Application Resources--> <Application.Resources> <local:localizedstrings xmlns:local="clr-namespace:phoneapp2" x:key="loca </Application.Resources> <Application.ApplicationLifetimeObjects> <shell:phoneapplicationservice Launching="Application_Launching" Closing="Application_Closing" Activated="Application_Activated" Deactivated="Application_Deactivated" </Application.ApplicationLifetimeObjects> </Application> 29 App.xaml.cs using System; namespace PhoneApp2 { public partial class App : Application { public static PhoneApplicationFrame RootFrame { get; private se public App() { // handler for uncaught exceptions. UnhandledException += Application_UnhandledException; InitializeComponent(); // Standard XAML initialization InitializePhoneApplication(); // Phone-specific initializatio InitializeLanguage(); // Language display initialization 30 10
Głowne pliki cd. MainPage.xaml oraz MainPage.xaml.cs Główna formatka aplikacji opisana przez xaml kontrolki reprezentowane jako znaczniki xaml, w pliku *.xaml Warstwa zachowania język C# w pliku *.xaml.cs Każda kolejna formatka (ekran) oddzielny plik xaml oddzielna klasa języka C# (plik *.xaml.cs) 31 Zawartość MainPage.xaml Element PhoneApplicationPage umożliwia tworzenie kontrolek użytkownika, po niej dziedziczą kontrolki użytkownika, Budowa stron aplikacji to tworzeniem nowej kontrolki, a kolejny plik.xamlzawiera znacznik PhoneApplicationPage Wewnątrz PhoneApplicationPage maksymalnie JEDEN element tzw. kontener kontener służy do pozycjonowania elementów GUI. 32 MainPage.xaml <phone:phoneapplicationpage x:class="phoneapp2.mainpage" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentati FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:systemtray.isvisible="true"> <!--LayoutRoot is the root grid where all page content is pla <Grid x:name="layoutroot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> 33 11
MainPage.xaml.cs using namespace PhoneApp2 { public partial class MainPage : PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); } 34 Specyfika na WP App.xaml.cs: RootFrame = new PhoneApplicationFrame(); RootFrame- kontener główny (top-level) obiekt klasy PhoneApplicationFrame; zawiera: kontrolkę MainPage oraz elementy systemowe system tray i application bar MainPage.xaml.cs: class MainPage: PhoneApplicationPage MainPage zajmuje całą przestrzeń contentent dla frame obiekt klasy PhoneApplicationPage zawiera tytuł, ewentualnie własny application bar 35 Zakres odpowiedzialności PhoneApplicationFrame przechowuje właściwości np. orientacja ekranu, tu generowane są PhoneApplicationPages tu zarezerwowane miejsce na: SystemTrayoraz Application Bar tu obsługa połączeń przychodzących, sms ów itp. 36 12
Uruchomienie programu Urządzenie wirtualne emulator, np.: o rozdzielczości WVGA (800x480) i 512 MB pamięci RAM; o rozdzielczości WVGA (800x480) i 1 GB pamięci RAM; o rozdzielczości WXGA (1280x768) i 1 GB pamięci RAM; o rozdzielczości 720P (1280x720) i 1 GB pamięci RAM Urządzenie fizyczne telefon, tablet podłączenie kablem USB, urządzenie odblokowane (konto Microsoft Account) 37 Instalacja Plik instalacyjny : faktycznie archiwum zip instalka 38 Instalacja na telefonie cd. Odblokowanie telefonu bezpłatne konto Microsoft: jeden telefon max. 2 aplikacje spoza Sklepu. Konto Microsoft płatne konto: 3 telefony (można zwiększyć) do 10 własnych aplikacji. Instalacja aplikacji z poziomu Visual Studio lub z poziomu narzędzia Application Deployment wymagany plik XAP 39 13
GUI: najczęściej używane elementy Kontenery do rozmieszczenie elementów Canvas (płótno) - niewidoczny pozycjonowanie absolutne (dokładna pozycja sytuowanego obiektu) StackPanel (stos), Grid (siatka) - niewidoczny pozycjonowanie relatywne Elementy graficzne Rectangle, Elipse, Image, Border,... Kontrolki (interakcja, I/O) Button, CheckBox, TextBox,... 40 Układ elementów GUI Podejście WindowsForm: Drag and Dropz Toolbox-a, położenie elementów bezwzględne zaleta (wada?): GUI zawsze takie samo a na ekranie o innej rozdzielczości? Podejście typu Java: tzw. managery układów, pozwalają na grupowanie elementów pionowo, poziomo, w układach tabelarycznych itp. 41 xaml Praktycznie brak pozycjonowania absolutnego Pozycjonowanie za pomocą kontenerów struktura kontenerów: zapisywana składnią xml zgodna z ideą dokumentu xml, czyli: kontener główny (rodzic tylko jeden) kontenery wewnętrzne (dzieci dowolna liczba) dzieci mogą mieć dzieci! 42 14
Układ elementów GUI Projekt wyglądu okna układ kontenerów rozmieszczenie elementów w kontenerach Pozycję elementu określają: zależność rodzic-dziecko (element pozycjonowany musi być wewnątrz kontenera), właściwości kontenera np. Orientation dla StackPanel, HorizontalContentAlignment dla Label atrybuty dołączone do elementu pozycjonowanego (np. Canvas.Left). 43 Skalowanie interfejsu Jednostki w grafice cyfrowej pixel jednolity element obrazu (punkt); zwykle prostokąt/kwadrat dpi(dots per inch) liczba punktów (pixeli) obrazu na cal xaml:-rozmiar, pozycja elementów na wyświetlaczach o różnej rozdzielczości nie pikselami! wykorzystuje się dip(device independent pixel) -niezależnie od gęstości pikseli (rozdzielczości wyświetlacza) Rozmiar lub pozycja elementów w pikselach zależy od wartości diporaz ustawień dpisystemu operacyjnego; wygląd interfejsu graficznego jednakowy na różnych urządzeniach pixels= dips* dpi/ 96 Problem zmiana proporcji! Patrz tu: msdn.microsoft.com/en-us/library/windows/desktop/ff684173 44 Kontenery Kontenery (Container Controls) podstawowy mechanizm do organizacji elementów interfejsu graficznego To specjalny typ kontrolek do przechowywanie i pozycjonowanie innych kontrolek zgodnie z regułami zdefiniowanymi przez programistę umożliwiają łatwą organizację wielu kontrolek. 45 15
Kontenery Kontrolki niewizualne używane tylko przez programistę, niewidoczne dla użytkownika. Tabela (siatka) Grid Układ pion/poziom StackPanel Układ wg współrzędnych (x, y) Canvas 46 Kontener Grid Grid: tabelaryczny układ widoku do utworzenia podstawowej struktury okna, każdy element umieszczany względem wiersza i kolumny, automatycznie skaluje wiersze/kolumny umożliwia budowę skalowalnych layoutów. Jak użyć umieścić znacznik <Grid> </Grid>, zdefiniować wiersze oraz kolumny (<Grid.RowDefinitions>, <Grid.ColumnDefinitions>) zdefiniować ich wysokości oraz szerokości 47 Grid - przykład <Grid> <Grid.RowDefinitions> <!--Definicja wierszy--> <RowDefinition Height="Auto"/> <RowDefinition Height="50"/> <RowDefinition Height="*"/> <RowDefinition Height="3*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <!--Definicja kolumn--> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="50"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="3*"/> </Grid.ColumnDefinitions> <!--Tutaj można umieścić kontrolki--> </Grid> 48 16
Użycie wiersza i kolumny Rozmiar wiersz: Height kolumna: Width Rozmiar można definiować używając: jednostek logicznych (wartości liczbowych), opcji auto (automatycznie dopasowanie do zawartości) symbolu * * pozwala na zajęcie całej wolnej przestrzeni, jeżeli kilka kolumn bądź wierszy korzysta z gwiazdki - przestrzeń rozdzielona proporcjonalnie Po zdefiniowaniu wierszy i kolumn dla każdego elementu w gridzie przypisać numer wiersza /kolumny (od 0!) Grid.Row = 0 49 Grid przykład 1 <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Ellipse Width="100" Height="100" Fill="Blue" Grid.Row="0"/> <Rectangle Width="100" Height="100" Fill="Red" Grid.Row="0" /> </Grid> kwadrat jest gdzie koło? dlaczego wiersze różnej wysokości? 50 Grid przykład 2 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Ellipse Width="100" Height="100" Fill="Blue" Grid.Row="0" Grid.Column="1"/> <Rectangle Width="100" Height="100" Fill="Red" Grid.Row="1" /> </Grid> 51 17
Procentowe określanie rozmiaru Wielkość wyrażona procentowo określa, ile procent dostępnego dla elementu graficznego miejsca może on zabrać 100% symbolizuje gwiazdka *, np. kolumna zajmuje całe dostępne jej miejsce: <ColumnDefinition Width= * /> kolumna zajmie 80% wolnego miejsca: <ColumnDefinition Width= 0.8* /> 52 Grid przykład 3 <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="0.5*" /> <RowDefinition Height="0.5*" /> </Grid.RowDefinitions> <Ellipse Width="100" Height="100" Fill="Blue" Grid.Row="1" /> <Rectangle Width="100" Height="100" Fill="Red" Grid.Row="0"/> </Grid> 53 StackPanel Panel stosu (najprostszy z kontenerów) elementy we wnętrzu rozmieszczane wzdłuż orientacji orientacja pionowa: od góry do dołu, domyślna orientacja pozioma: od lewej do prawej Orientation="Horizontal" Panele stosu można zagnieżdżać panele nad-i podrzędne mogą mieć różne orientacje! 54 18
StackPanel- 1 (Vertical-domyślnie) Height= Auto (rozmiar fontu <StackPanel > <Button Content="button1" Margin="5" FontSize="20" /> <Button Content="button2" Margin="5" /> <Button Content="button3" Margin="5" /> <Button Content="button4" Margin="5" Height="50" /> </StackPanel> 55 StackPanel- 2 (Horizontal) 56 StackPanel- 3 (zagnieżdżenie) 57 19
Canvas Panel płótno podobny, jak Windows Forms pozycjonowania relatywne względem krawędzi górnej: Canvas.Top względem krawędzi lewej: Canvas.Left jako panel główny pozycjonowanie absolutne Można zagnieżdżać Stosować raczej w sytuacji braku potrzeby skalowania 58 Canvas 60 od krawędzi górnej początek zagnieżdżenia Canvaszagnieżdżony 60 od krawędzi górnej 59 Przykład - zagnieżdżenie 60 20
Zagnieżdżenie 61 Rozmiar i kolejność Ustawienie rozmiaru panelu Width, Height liczba Auto (do rozmiaru zawartości, np. tekst, inne) Marginesy odsunięcie panelu zagnieżdżonego Zależnie od rodzaju panelu różnice. Kolejność wyświetlania elementów zależna od kolejności ich definiowania 62 Kolejność elipsa przykryta kwadratem <Ellipse Width="100" Height="100" Fill="Blue" Grid.Row="0"/> <Rectangle Width="100" Height="100" Fill="Red" Grid.Row="0" /> kwadrat przykryty elipsą <Rectangle Width="100" Height="100" Fill="Red" Grid.Row="0" /> <Ellipse Width="100" Height="100" Fill="Blue" Grid.Row="0"/> 63 21
Wyrównywanie Wyrównywanie zawartości paneli (pozycjonowanie względem układu) : HorizontalAlignment, VerticalAlignment pozycjonuje kontrolkę w poziomie/pionie HorizontalContentAlignment, VerticalContentAlignment pozycjonuje zawartość (np. tekst) w poziomie/pionie Wymienione właściwości współpracują z Margin oraz Padding mogą przyjmować wartości: Left-wyrównanie do lewej Right -wyrównanie do prawej Center - wycentrowanie Stretch- rozciągnięcie/dopasowanie 64 Orientacja telefonu Wykrywana, obsługiwana Orientacja PhoneApplicationPage atrybut obsługa zmiany orientacji (automat!) Orientation="Portrait" lub Orientation="Landscape" SupportedOrientations= "PortraitOrLandscape" 65 Obszary specjalne Application Bar max. 4 przyciski z ikonami (ApplicationBarIconButton) i dodatkowo wysuwane menu aplikacji (ApplicationBarMenuItem) w domyślnym szablonie strony zakomentowany fragment kodu 66 22