cz.1

Programowanie aplikacji internetowych
2014/2015
Instrukcja laboratoryjna cz.3
Technologia Silverlight cz.1
Prowadzący: Tomasz Goluch
Wersja: 4.1
I.
Szablon aplikacji oparty o platformę nawigacyjną.
Cel: Poznanie nawigacji w aplikacji Silverlight.
Uruchom Visual Studio 2013.
Utwórz nowy Silverlight Navigation Application projekt – MyProject (Silverlight 5, Visual
C#).
Pozostaw domyślne ustawienia projektu i wybierz OK.
W nowo utworzonej aplikacji możemy rozróżnić dwa projekty:

MyProject – (część kliencka) jest ona właściwą aplikacją Silverlight (projekt ten
będziemy dalej nazywać po prostu projektem aplikacji).
1

MyProject.Web – (część serwerowa) kod .ASPX lub .HTML pozwalający na
załadowanie aplikacji z serwera oraz skompilowana i spakowana aplikacja Silverlight
(projekt ten będziemy dalej nazywać projektem WEB).
Uruchom debbugera (F5) – w oknie domyślnej przeglądarki powinna się odpalić szablonowa
strona Silverlight. Zmień klika razy pod-stronę (Home, About) i zaobserwuj działanie
klawiszy nawigacyjnych przeglądarki.
Aby dodać nowy widok do aplikacji kliknij PPM1 na folderze Views w projekcie aplikacji i
dodaj nowy plik: Silverlight Page – MyCustomer.xaml (Visual C#).
Dodaj nową stronę widoku do menu nawigacyjnego dodając przycisk hiperłącza i
oddzielający prostokąt w pliku MainPage.xaml zaraz za przyciskiem Home dopisując
poniższy kod:
W celu zmiany wizerunku strony ściągnij zestaw szablonów (SL4Themes-templates.zip)
dostępnych pod adresem:
http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=14590 i wybierz
jeden z dostępnych: AccentColor, Cosmopolitan, JetPack, Windows7.
Skopiuj (wszystkie z wyłączeniem SDKStyles.xaml i ToolkitStyles.xaml) pliki z folderu
Application\Assets projektu wybranego do folderu Assets własnego projektu. Dodaj je do
folderu Assets w projekcie aplikacji.
Uruchom debbugera (F5) – w oknie domyślnej przeglądarki powinna się strona z nowym
wyglądem.
Dodaj nowy Silverlight Class Library projekt – CustomerModule (Silverlight 5, Visual C#)
do istniejącego solution. Nie zamykaj wcześniejszego projektu.
1
Kliknięcie prawym przyciskiem myszy.
2
Usuń domyślną klasę Class1.cs i dodaj w projekcie aplikacji referencję do nowego projektu
MyProject.CustomerModule !!!
W nowym projekcie utwórz folder Views i dodaj nowy widok: Silverlight Page –
MyCustomerList.xaml (Visual C#). Dodaj w nowo dodanym pliku prosty kod wyświetlający
napis:
W pliku MainPage.xaml w module mapującym URI dodaj następującą regułę:
Analogicznie jak to już robiliśmy wcześniej, dodajemy nową stronę widoku do menu w pliku
MainPage.xaml dopisując poniższy kod:
Uruchom debbugera (F5) – zauważ, że fakt iż nowa strona nie jest w głównym podzespole
jest całkowicie przeźroczysty z punktu widzenia użytkownika.
Proszę przedstawić działający program prowadzącemu.
3
II.
Zmiana interfejsu użytkownika.
Cel: Poznanie możliwości budowy niestandardowego interfejsu użytkownika.
Q celu zapewnienia niestandardowego interfejsu użytkownika do obsługi aplikacji należy, ze
strony: http://metro.windowswiki.info, pobrać archiwum z ikonami.
Z pobranego archiwum należy wyodrębnić i skopiować dwie czarne ikony: back.png i
next.png do folderu Assets projektu i dodać je do folderu Assets projektu aplikacji.
W celu dodania dwóch przycisków wraz ze zdefiniowanym stylem (wyglądem przycisku jest
tylko zawartość – plik ikony) należy w pliku MainPage.xaml przed drugim zamykającym
znacznikiem </Grid> dodać (skopiować) następujący kod:
<Grid x:Name="OutOfBrowserNavigationControls" VerticalAlignment="Top"
HorizontalAlignment="Left" Margin="15">
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Margin" Value="2" />
<Setter Property="Opacity" Value="0.5" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="Content" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<Button x:Name="BackButton"
Width="40" Height="40"
Click="BackButton_Click">
<Image Source="Assets/back.png" />
</Button>
<Button x:Name="ForwardButton"
Width="25" Height="30"
Click="ForwardButton_Click">
<Image Source="Assets/next.png" />
</Button>
</StackPanel>
</Grid>
4
Dodaj procedury obsługi kliknięć (plik MainPage.xaml.cs) dla obydwu przycisków.
W celu automatycznego wygenerowania sygnatur powyższych metod należy PPM kliknąć
nazwę metody zdarzenia Click i wybrać opcję Go To Definition (F12).
Uruchom debbugera (F5) – niestandardowe przyciski nawigacyjne powinny być dostępne i
zachowywać się analogicznie do swoich odpowiedników z przeglądarki.
W celu dodania wizualnej podpowiedzi czy dana opcja nawigacyjna jest dostępna możemy
wykorzystać następujące wiązanie:
Uruchom debbugera (F5) – zaobserwuj zmianę zachowania przycisków.
5
Jeżeli chcemy przekazać krótką informację możemy użyć w tym celu prostego okna
wyskakującego Popup. Należy je zadeklarować w XAML’u:
I uaktywnić w kodzie:
Uwaga !!! – aby okno mogło zostać uaktywnione należy wyłączyć wiązanie przycisku
BackButton z właściwiścią CanGoBack.
W celu wyłączenia okna należy zdefiniować binding w pliku MainPage.xaml:
Uwaga – definicja konwertera VisibilityConverter musi znajdować się w kodzie XAML przed
jej użyciem!
Następnie zaimplementować konwerter w pliku MainPage.xaml:
6
W celu wygenerowania wymaganych metod przez interfejs IValueConverter należy PPM
kliknąć na wspomnianym interfejsie i wybrać opcję: Implement Interface.
Bardziej funkcjonalną i traktowaną jako pełnoprawny element jest kontrolka typu
ChildWindow która zostanie omówiona w następnych rozdziałach.
Proszę przedstawić działający program prowadzącemu.
7
III.
Uruchamianie aplikacji poza przeglądarką.
Cel: Konfiguracja aplikacji pozwalającej na pracę poza przeglądarką i automatyczną
aktualizację .
W celu umożliwienia uruchamiania aplikacji poza przeglądarką kliknij PPM na projekcie
aplikacji → Properties → Silverlight → Enable running application out of browser →
(kliknij przycisk) Out-of-Browser Settings ...
Tutaj możemy dokonać ustawień związanych z nazwą okna, rozmiarami podczas
uruchomienia, lokalizacją, nazwą skrótu, opisem aplikacji, dodaniem ikon, wybraniem
akceleracji sprzętowej, żądaniem podwyższonego zaufania, oraz stylem okna. Przykładowe
ikony można ściągnąć z: http://dryicons.com/free-icons/preview/coquette-icons-set/
8
Uwaga !!! – ściągnij paczkę z plikami: *.png (nie *.ico !!!) i skopiuj je do do folderu Assets
projektu, a następnie dodaj do folderu Assets projektu aplikacji.
Należy ustawić projekt WEB jako domyślny.
Po uruchomienu debbugera (F5) i kliknięciu PPM w dowolnym miejscu na aplikację otworzy
się menu kontekstowe z możliwością zainstalowania aplikacji na komputerze: Zainstaluj
aplikację MyProject Application na tym komputerze.
Aplikacja uruchomiona poza oknem powinna mieć możliwość aktualizacji. Oczywiści taka
aktualizacja jest która jest możliwa jedynie podczas komunikacji z serwerem.
Jedną z możliwości jest zareagowanie na zmianę adresu sieciowego i w przypadku
dostępności połączenia sieciowego dokonanie aktualizacji:
Funkcja wyświetlająca może sprawdzać czy pracuje w wersji poza przeglądarką i wyświetlać
informacje za pomocą powiadomień (które nie są dostępne z przeglądarki):
9
Przy zainstalowanej wersji desktopowej aplikacji proszę zmienić zawartość widoku
Home.xaml na:
I uruchomić serwer WEB oraz wspomnianą wcześniej zainstalowaną desktopową wersję
aplikacji. Zrestartować w komputerze połączenia sieciowe. Aplikacja powinna poinformować
o braku połączenia, odzyskaniu połączenia oraz pobraniu nowej wersji aplikacji. Nowa wersja
zostanie uruchomiona po restarcie aplikacji i nie ma możliwości wymuszenia tego w sposób
programowy. Można co najwyżej poprosić o to użytkownika.
Proszę przedstawić działający program prowadzącemu.
Aby uzyskać podwyższone uprawnienia aplikacji należy podczas oznaczania aplikacji jako
uruchamianej poza przeglądarką w oknie Out-of-Browser Settings zaznaczyć opcję –
Require elevated trust when running outsider the browser:
10
Aplikacje o podwyższonych uprawnieniach powinny być podpisane certyfikatem zaufanego
urzędu. Na potrzeby laboratorium możemy wygenerować własny certyfikat.
W tym celu kliknij PPM na projekcie aplikacji → Properties → Signing → Sing the Xap
File (zaznacz tę opcję) → Create Test Certificate…, podaj hasło i zapisz wygenerowany
plik w projekcie aplikacji. Następnie użyj tego pliku do podpisania aplikacji wybierając opcję:
Select from File…
Podczas pracy na podwyższonych uprawnieniach mamy możliwość odczytywania i
zapisywania plików (bez potrzeby nawiązywania dialogu z użytkownikiem) z/do
następujących folderów specjalnych: MyComputer, MyMusic, MyPictures, MyVideos,
Personal i MyDocuments.
W celu zapisania pliku na dysku należy sprawdzić poziom uprawnień:
Ciekawym przykładem jest wykorzystanie syntezatora mowy:
W celu użycia słowa kluczowego dynamic języka C# należy dodać referencję do biblioteki:
Microsoft.CSharp.dll.
11
Wykorzystując automatyzację COM można również łatwo otworzyć arkusz Excela i wypełnić
go danymi oraz wstawić wykres:
Proszę przedstawić działający program prowadzącemu.
12