Instrukcja laboratoryjna cz.3

Transkrypt

1 Programowanie aplikacji internetowych 2014/2015 Instrukcja laboratoryjna cz.3 Technologia Silverlight cz.1 Prowadzący: Tomasz Goluch Wersja: 4.1

2 I. Szablon aplikacji oparty o platformę nawigacyjną. Cel: Poznanie nawigacji w aplikacji Silverlight. Uruchom Visual Studio 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

3 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 PPM 1 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: 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

4 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

5 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: 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

6 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

7 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

8 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

9 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: 8

10 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

11 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

12 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

13 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