Silverlight poza przeglądarką  

Autor: Tomasz Michaluk

Opublikowano: 2011-02-21

W tym artykule stworzymy prostą aplikację Silverlight działającą poza przeglądarką (Out-of-Browser), z opcją podniesienia uprawnień (Elevated Trust). W naszej aplikacji wykorzystamy kontrolki WebBrowser, WebBrush oraz zaimplementujemy elementy typu COM.

Aplikacja Out-of-Browser

Co daje nam aplikacja Out-of-Browser

OOB daje nam możliwość korzystania z aplikacji bez konieczności posiadania stałego dostępu do Internetu. Po instalacji aplikacji Silverlight możemy korzystać z niej jak ze zwykłego programu. Opcja „poza przeglądarką” jest udostępniona od trzeciej odsłony technologii Silverlight. Jednak wersja 4.0 wprowadza ważną zmianę, tj. możliwość nadania aplikacji trybu podwyższonych uprawnień, którym zajmiemy się w dalszej części artykułu.

Jak sprawić, aby aplikacja działała poza przeglądarką

Abyśmy mogli cieszyć się stworzonym przez nas projektem w trybie poza przeglądarką, wystarczy jedynie parę dodatkowych kliknięć myszką. Mianowicie, po stworzeniu nowego projektu Silverlight odszukujemy nazwę naszego projektu (bez rozszerzenia .Web) w Solution Explorerze. Następnie naciskamy Alt+Enter, aby dostać się do właściwości naszej aplikacji. Dalej wchodzimy w zakładkę Silverlight i odszukujemy opcję „Enable running aplication out of the browser” i ją zaznaczamy.

Po kliknięciu na „Out-of-BrowserSettings…” przenosimy się do specyficznych ustawień odnośnie do OOB. Możemy tutaj ustawić wielkość okna, w jakim będzie wyświetlana nasza aplikacja na komputerze, ikonę reprezentującą aplikację oraz położenie aplikacji bezpośrednio po włączeniu. Widoczna jest też opcja akceleracji procesora oraz wspomniany już wcześniej tryb podwyższonych uprawnień. Po dokonaniu odpowiednich ustawień i kompilacji projektu wystarczy kliknąć prawym przyciskiem na działającą aplikację, aby zainstalować ją na komputerze:

Jeżeli chcemy zaproponować instalację w bardziej efektowny sposób, możemy stworzyć własny przycisk do tego służący:

XAML:
<Grid x:Name="LayoutRoot" Background="Black">
<Button Content="Instaluj" Height="35" HorizontalAlignment="Left" Margin="8,13,0,0" Name="button1" VerticalAlignment="Top" Width="102" Background="Black" FontSize="12" FontWeight="ExtraBold" Click="button1_Click"/>
<TextBlock Height="19" HorizontalAlignment="Left" Name="textBlock1" Text="Aplikacja jest zainstalowana." VerticalAlignment="Top" Width="166" Foreground="#FFE50000" />
        </Grid>
C#:
public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            app_startup();
        }

 private void app_startup() {

if ((App.Current.InstallState == InstallState.Installed) && (!App.Current.IsRunningOutOfBrowser)) {
                textBlock1.Visibility = Visibility.Visible;
                button1.Visibility = Visibility.Collapsed;
            }
if ((App.Current.InstallState == InstallState.NotInstalled)&&(!App.Current.IsRunningOutOfBrowser)) {
                 textBlock1.Visibility = Visibility.Collapsed;
                 button1.Visibility = Visibility.Visible;      
             }
if (App.Current.IsRunningOutOfBrowser) {
                 textBlock1.Visibility = Visibility.Collapsed;
                 button1.Visibility = Visibility.Collapsed;
             }
        }
private void button1_Click(object sender, RoutedEventArgs e)
        {
            Application.Current.Install();
        }
    }

Metoda app_startup() wyświetla odpowiednie elementy w zależności od stanu naszej aplikacji:

Aplikacja jest zainstalowana i działa poza przeglądarką:

Aplikacja jest zainstalowana i działa w   przeglądarce:

Aplikacja niezainstalowana:

Po kliknięciu na przycisk „Instaluj” rozpoczyna się instalacja aplikacji.

Elevated Trust

Co daje nam tryb Elevated Trust

Jak już wspomniano, tryb ten został dodany w Silverlight 4.0. Opcja ta usprawnia i rozwija możliwości aplikacji działającej poza przeglądarką. Dotychczas stworzona przez nas aplikacja była osadzona w odizolowanej przestrzeni. Mogła, co prawda, korzystać z miejsca na twardym dysku, jednak nie miała możliwości interakcji z zasobami komputera. Teraz mamy dostęp do folderów systemowych takich jak Moje obrazy czy Moje dokumenty. Dzięki podwyższonym uprawnieniom możemy również łączyć się z różnymi domenami, korzystać z kontrolek WebBrowser i WebBrowserBrush oraz z elementów COM, o ile takowe są zainstalowane na komputerze.  Opcję podniesionych uprawnień możemy zaznaczyć w opcjach OOB:

Kontrolka WebBrowser i WebBrowserBrush

Obie kontrolki służą do implementacji kodu HTML w naszej aplikacji Silverlight. Możemy w ten sposób wyświetlać strony internetowe bądź urozmaicić naszą aplikację wstawkami z HTML.

WebBrowser – kontrolka działa jedynie poza przeglądarką. Wyświetlany kod, np. strona napisana w HTML, jest w pełni interaktywny. Użytkownik może swobodnie korzystać ze strony, która jest jakby wbudowana w naszą aplikację.

Prosty kod wyświetlenia strony internetowej w aplikacji SL:

<Grid x:Name="LayoutRoot" Background="White">
<StackPanel x:Name="LayoutRoot1" Background="Black">
            <WebBrowser Name="HTMLWeb" Height="700" Width="1000"
Source=”https://msdn.microsoft.com”/>
</StackPanel>
</Grid>

WebBrowserBrush – w odróżnieniu do poprzedniej kontrolki, działa ona w każdym rodzaju aplikacji. Jednak bardziej znaczącą różnicą jest to, że zaimplementowany kod nie jest interaktywny. Możemy go używać jako wypełnienia, tworząc w ten sposób statyczne elementy naszej aplikacji.

Prosty kod, w którym używamy strony MSDN jako tła kontrolki Canvas, pod którą możemy ukryć odnośnik do strony:

<StackPanel x:Name="LayoutRoot2" Background="Blue" MouseMove="LayoutRoot_MouseMove">
<WebBrowser Name="WB1" Source="https://msdn.microsoft.com/pl-pl/default.aspx" Height="200" Width="600" Visibility="Collapsed"/>
            <Canvas Height="200" Width="600" >
                <Canvas.Background>
                    <WebBrowserBrush SourceName="WB1" Opacity="1" x:Name="WBB1"/>
                </Canvas.Background>
            </Canvas>
        </StackPanel>


C#:
private void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
        { 
            WBB1.Redraw();        
  }

Implementacja obiektów COM

Kolejną nowością jest to, że zainstalowana aplikacja może korzystać z elementów COM istniejących już w komputerze. Nie byłoby to jednak możliwe, gdyby nie typ zmiennych dynamic, który został dodany w SL4. Przy połączeniu tego typu zmiennych z klasą AutomationFactory możemy np. wyeksportować dane z listy do Excela czy też zsynchronizować program z Outlookiem. Należy więc dodać referencję CSharp: Reference-->Add Reference-->Microsoft.CSharp.

W przykładzie pokażę, jak łatwo można stworzyć wykres na podstawie danych z ListBox:

XAML:
<Grid x:Name="LayoutRoot" Height="374">       
<ListBox Height="300" HorizontalAlignment="Center"  Name="listBox1" VerticalAlignment="Top" Width="78" Margin="468,24,254,0">
<TextBox Height="33" HorizontalAlignment="Right"  Name="textBox1" VerticalAlignment="Top" Width="144" Margin="0,22,48,0" />
<Image Height="300" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="400" Margin="24,27,0,0" />
<Button Content="Add" Height="40"   Name="button1"  Width="168" Click="button1_Click" FontSize="22" Background="#FF190000" Margin="602,63,30,0" VerticalAlignment="Top" Foreground="#FF2B9E9E" FontWeight="ExtraBlack" />
<Button Content="EXCEL" Height="110"  Margin="602,135,30,129" Name="button2" Width="168" Click="button2_Click" FontSize="22" FontWeight="ExtraBlack" Foreground="#FF239A9A" />
        <Grid.Background>
            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                <GradientStop Color="#FFE6FFFF" Offset="0" />
                <GradientStop Color="#FF199696" Offset="1" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>

C#:  
namespace SilverlightApplication12
{
    public partial class MainPage : UserControl
    {       
        dynamic excel = AutomationFactory.CreateObject("Excel.Application");
        dynamic sheet;
        public MainPage()
        {   
           InitializeComponent();
           excel.Visible = false;
           
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            listBox1.Items.Add(textBox1.Text);
            textBox1.Text="";
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            excel.Workbooks.Add();
            sheet = excel.ActiveSheet;
            dynamic cell = null;
            int i = 0;
            while(listBox1.Items.ElementAt(i)!=null) {
                cell = sheet.Cells[i+1, 1];
                cell.Value = Convert.ToString(listBox1.Items.ElementAt(i));
                i++;
                if (i > listBox1.Items.IndexOf(listBox1.Items.Last())) break;
            }
            dynamic sheetShapes = sheet.Shapes;
            sheetShapes.AddChart(-4100, 200, 2, 400, 300);
            dynamic chart = sheet.ChartObjects(1).Chart;
     string path = string.Format("{0}\\picture.jpg",
     Environment.GetFolderPath(Environment.SpecialFolder.MyPictures));
            chart.Export(path, "JPG");
            excel.Workbooks.Close();  
            
            FileStream stream = File.OpenRead(path);
            BitmapImage bitmapImage = new BitmapImage();
            bitmapImage.SetSource(stream);
            image1.Source = bitmapImage;
            stream.Close();
        }}}

Powyższy kod po kompilacji daje następujący efekt:

• Dodajemy liczby na listę.
• Wysyłamy dane do Excela, w którym tworzy się wykres.
• Zapisujemy wykres, po czym wstawiamy go jako obrazek do naszej aplikacji.

Notification Window

Dzięki podwyższonym uprawnieniom możemy również skorzystać z klasy NotificationWindow, która została dodana w najnowszej odsłonie Silverlighta. Klasa ta generuje małe powiadomienia, które po wystąpieniu pewnego zdarzenia pojawiają się w określonej części ekranu:

C#:          
      
        private void button2_Click(object sender, RoutedEventArgs e)
{           
         NotificationWindow notification = new NotificationWindow(); 
            TextBlock txt = new TextBlock();
            txt.Text = "Baza Excel została zaktualizowana";
            txt.FontSize = 12;
            notification.Content = txt;
            notification.Height = 100;
            notification.Width = 400;
            notification.Show(3000);
}

Powyższy kod wyświetla okienko powiadomień po kliknięciu na przycisk:

Automatyczna aktualizacja

Po zainstalowaniu aplikacja działa, co prawda, na komputerze bez konieczności stałego połączenia z Internetem, jednak program nie jest zaktualizowany i pozostaje w takim stanie, w jakim go zainstalowano, mimo zmian aplikacji znajdującej się na serwerze. Musimy zadbać więc o aktualizację naszej aplikacji.

Zamieszczony kod prezentuje, jak zaimplementować automatyczną aktualizację do programu:

C#:
public partial class MainPage : UserControl
    {
        Application app = Application.Current;
        public MainPage()
        {
            InitializeComponent();
            app.CheckAndDownloadUpdateCompleted+=app_CheckAndDownloadUpdateCompleted; 
            app.CheckAndDownloadUpdateAsync();
        }
private void App_CheckAndDownloadUpdateCompleted(object sender, CheckAndDownloadUpdateCompletedEventArgs e)
        { if (e.UpdateAvailable){

MessageBox.Show("Pobrano aktualizację. "+"Prosimy o ponowne uruchomienie aplikacji");
         }}}

Podsumowanie

Z artykułu dowiedzieliśmy się sporo na temat nowości, jakie wprowadza Silverlight 4 do zagadnienia „Aplikacja Silverlight poza przeglądarką”. Poznaliśmy nowe kontrolki: WebBrowser, WebBrowserBrush, AutomationFactory oraz NotificationWindow.

---