SL: warstwy aplikacji. Wykład 4 Silverlight

Transkrypt

1 Kwalifikacje kadry dydaktycznej kluczem do rozwoju Uczelni PROJEKT WSPÓŁFINANSOWANY ZE ŚRODKÓW UNII EUROPEJSKIEJ I EUROPEJSKIEGO FUNDUSZU SPOŁECZNEGO Uniwersytet Kazimierza Wielkiego w Bydgoszczy Wydział Matematyki, Fizyki i Techniki specjalność: Sieci i systemy rozproszone Technologie mobilne i rozproszone na platformie.net Wykład 4 Silverlight SL: warstwy aplikacji interfejs użytkownika - GUI opis w XAML narzędzia: Visual Studio Expresion Blend Logika aplikacji kod (C# lub VB) Dane aplikacji (opcja) pliki xml lokalna relacyjna BD (SQL Server Compact Edition) 3 1

2 Interfejs użytkownika XAML preferowany do tworzenia interfejsów Silverlight, opis w plikach *.xaml MainPage.xml W tagach-słowa kluczowe oznaczające: klasy, obiekty, właściwości, zdarzenia, kompilator XAML-a: tłumaczy do CLR (Common Language Runtime). 4 Zawartość MainPage.xaml Główny element pliku MainPage.xaml jest klasa UserControl (kontener główny) umożliwia tworzenie kontrolek użytkownika, po niej dziedziczą kontrolki użytkownika, budowa aplikacji Silverlight jest zawsze tworzeniem nowej kontrolki a kolejny plik.xaml zawiera znacznik UserControl wewnątrz UserControl maksymalnie JEDEN element tzw. kontener kontener służy do pozycjonowania elementów GUI. 5 UserControl na PC przestrzenie nazw <UserControl x:class="lab6_sl_xaml.mainpage" xmlns=" xmlns:x=" xmlns:d=" xmlns:mc=" mc:ignorable="d" d:designheight="300" d:designwidth="400"> <Grid x:name="layoutroot" Background="White"> </Grid> </UserControl> tzw. kontener 6 2

3 Specyfika na WP7 App.xaml.cs: RootFrame = new PhoneApplicationFrame(); RootFrame- kontener główny (top-level) obiekt klasy PhoneApplicationFrame; zawiera: kontrolkę MainPage oraz elementy systemowe system trayi application bar będzie MainPage.xaml.cs: class MainPage: PhoneApplicationPage MainPage zajmuje całą przestrzeń contententdla frame obiekt klasy PhoneApplicationPage zawiera tytuł, ewentualnie własny application bar 7 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. 8 Zakres odpowiedzialności Phone Application Page zajmuje pozostałą część ApplicationFrame tu miejsce na GUI (aplikację użytkownika) może posiadać własny ApplicationBar 9 3

4 Designer WP7: PhoneApplicationPage <phone:phoneapplicationpage x:class="lab6_wwp7.mainpage" namespace jak na PC xmlns:phone="clr-namespace:microsoft.phone.controls;assembly=microsoft.phone" xmlns:shell="clr-namespace:microsoft.phone.shell;assembly=microsoft.phone" xmlns:mc=" mc:ignorable="d" d:designwidth="480" d:designheight="768" <Grid x:name="layoutroot" Background="Transparent"> </Grid> </phone:phoneapplicationpage> 10 Obszar roboczy DesignWidth, DesignHeight na PC określają szerokość i wysokość kontrolki (rozmiar pisanej aplikacji), brak wartości: aplikacja będzie zajmowała całą dostępną powierzchnię w przeglądarce będzie się dostosowywała do wielkości przeglądarki. Na WP7 bez możliwości zmiany d:designheight="768" d:designwidth="480 " Heightmoże być "800" -bez linii statusu (lub false ) shell:systemtray.isvisible="true" 11 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,

5 Pozycjonowanie 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. manageryukładów, pozwalają na grupowanie elementów pionowo, poziomo, w układach tabelarycznych itp. 13 WPF => Silverlight 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! 14 Pozycjonowanie 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. Orientationdla StackPanel, HorizontalContentAlignment dla Label atrybuty dołączone do elementu pozycjonowanego (np. Canvas.Left). 15 5

6 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 16 Użycie wiersza i kolumny Rozmiar wiersz: Height kolumna: Width Rozmiar można definiować używając: jednostek logicznych (wartości liczbowych), sposób zalecany 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 17 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? 18 6

7 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> 19 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* /> 20 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> 21 7

8 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! 22 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> 23 StackPanel- 2 (Horizontal) 24 8

9 StackPanel- 3 (zagnieżdżenie) 25 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 26 Canvas 60 od krawędzi górnej początek zagnieżdżenia Canvaszagnieżdżony 60 od krawędzi górnej 27 9

10 Przykład - zagnieżdżenie 28 Zagnieżdżenie 29 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 30 10

11 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"/> 31 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 32 Specyfika WP

12 Specyfika WP7 Element główny Silverlight: UserControl WP7: phone:phoneapplicationpage element PhoneApplicationPage z przestrzeni phone Rozmiar (automat) raczej stały: 480 x 800 (bez paska statusu) lub z miejscem na status (bateria, poziom sygnału, itp.) wtedy też stały: 480 x 768 shell:systemtray.isvisible="true" 34 Specyfika paneli Grid, StackPanel, Canvas bez istotnych różnic Orientacja PhoneApplicationPage atrybut obsługa zmiany orientacji (automat!) Orientation="Portrait" lub Orientation="Landscape" SupportedOrientations= "PortraitOrLandscape" 35 Obszary specjalne System tray(status bar)

13 Obszary specjalne Application Bar max. 4 przyciski z ikonami (ApplicationBarIconButton) i dodatkowo wysuwane menu aplikacji (ApplicationBarMenuItem) w domyślnym szablonie strony zakomentowany fragment kodu 37 13