Trzecie spotkanie grupy Warsaw Silverlight Study Group (WSSG).

Zapraszam wszystkich chętnych na trzecie spotkanie grupy Warsaw Silverlight Study Group (WSSG). Spotkanie rozpocznie się 8 grudnia (wtorek), o godzinie 18:00 w siedzibie firmy Microsoft w Warszawie (al. Jerozolimskie 195A - zobacz na mapie).   

Agenda spotkania:
18:00 – 19:20 Bartosz Lipiński: "WCF RIA Services - Aplikacje biznesowe zorientowane na zasoby";
19:20 – 19:40 Przerwa;
19:40 – 21:00 Cezary Suchowolec: "Najciekawsze nowości w Silverlight 4 Beta";

Grudniowe spotkanie rozpoczniemy od tematu "WCF RIA Services - Aplikacje biznesowe zorientowane na zasoby" o którym opowie nam Bartosz Lipiński. W czasie tej sesji zobaczymy między innymi jak zacząć pracę z RIA Services, plusy i minusy tego rozwiązania oraz jak używać tej technologii w aplikacjach biznesowych.

Druga część spotkania będzie w całości poświęcona nowościom w Silverlight 4 które zaprezentuje nam Cezary Suchowolec. Sesja ta to esencja ze wszystkich nowości jakie niesie ze sobą nowy Silverlight 4 w wersji Beta. Dzięki kilku przydatnym demom, zobaczymy jak je używać oraz jak je zastosować w już działających aplikacjach.

Strona spotkania: http://ms-groups.pl/wssg/3_spotkanie/

Udział w spotkaniu jest bezpłatny. Wskazana rejestracja (tutorial do rejestracji).

Zapraszam!

[Silverlight 4 nowości] WebBrowser

Kilka godzin temu pojawiła się nowa wersja Silverlighta 4, a wraz z nią setki nowości (tak, tak, nie przesadzam.. setki!!! J ). Te najważniejsze znajdziecie chociażby w artykule Bartłomieja Zassa czy też na blogu Tim'a lub Mike'a. Ja swoją przygodę rozpoczynam od kontrolki WebBrowser, a więc czegoś co pozwoli mi wreszcie na wyświetlenie kodu html w aplikacji Silverlight :]

Niestety nie wszystko tak pięknie działa jak byśmy mogli sobie to wymarzyć i już na początku zobaczymy, że kontrolka ta działa tylko gdy uruchamiamy aplikację jako "zainstalowaną lokalnie", czyli OutOfBrowser (OOB) i dodatkowo aplikacji powinna mieć włączony tryb działania z pełnymi uprawnieniami (to również nowości w Silverlight 4) jeśli chcemy oglądać strony które nie należą do nas (cross-domain-policy). Mimo to, kontrolka działa, a kod z niej wygenerowany wygląda jak z przeglądarki :)

Demo

Zaczynamy od instalacji Silverlight 4 (http://silverlight.net/getstarted/silverlight-4-beta/ ), a więc pobieramy Silverlight 4 Tools for Visual Studio 2010 i instalujemy (zakładam że macie już Visual Studio 2010 Beta 2 - download). Po instalacji tworzymy nowy projekt Silverlight i w momencie zapytania o wygenerowanie projektu Web, wybieramy z listy Silverlight 4 (patrz rysunek).

W nowym Visual Studio 2010 + Silverlight 4 mamy kolejną nowość w postaci pełnego edytora xaml-a, a więc Blend 3 nie będzie już nam aż tak potrzebny :]

WebBrowser

Dodajemy w XAML kontrolkę WebBrowser oraz nazwę, tak abyśmy mogli odwołać się do niej z code-behind. Np. w ten sposób:

<UserControl x:Class="SilverlightApplication1.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   d:DesignHeight="300" d:DesignWidth="400">
   <Grid x:Name="LayoutRoot" Background="White">
      <WebBrowser x:Name="webBrowser" />
   </Grid>
</UserControl>

Następnie w code-behind dodajemy ładowanie adresu:

public MainPage()
{
   InitializeComponent();
   this.Loaded += (o, e) => { webBrowser.Navigate(new Uri("http://microsoft.com", UriKind.Absolute)); };
}

Ostatnim krokiem jest włączenie opcji instalacji aplikacji (OOB) oraz włączenie potrzeby użycia większych uprawnień. Jeżeli nie włączymy zwiększenia uprawnień dla naszej aplikacji, będziemy mogli oglądać tylko strony które mają ustawiony dla nas cross-domain-policy lub strony wygenerowane z naszego kodu html (a więc poprzez opcję NavigateString, gdzie parametrem jest kod html).

W celu włączenia wszystkiego, klikamy prawym na projekcie Silverlightowym i wybieramy Properites:

Run and Fun

Jeśli wszystko się kompiluje, jesteśmy gotowi aby sprawdzić działanie naszej przeglądarki. Uruchamiamy aplikację i klikamy prawym klawiszem myszki gdziekolwiek. Z otwartego menu wybieramy opcję "Install …. onto this computer "

A następnie w nowym oknie opcję "Install". Zwróćcie uwagę, że skoro zaznaczyliśmy opcję potrzeby używania dodatkowych uprawnień, użytkownik otrzymuje o tym informację przed instalacją (patrz rysunek).

Kiedy aplikacja zainstalowana lokalnie uruchomi się, powinniśmy zobaczyć działającą stronę internetową wewnątrz naszej aplikacji Silverlight.

Pod prawym klawiszem myszki będziemy mieli menu prosto z przeglądarki, a nie z aplikacji Silverlight. Co fajniejsze, jeśli wejdziemy np. na http://youtube.com, zobaczymy że aplikacje Flash, czy też Silvelright również działają.

PS. W ramach zabawy próbowałem otworzyć moją aplikację Silverlight w aplikacji Silverlight, ale niestety, a raczej i dobrze!, Silverlight nie pozwolił zainstalować się ponownie z samego siebie. Aplikacja wykryła że jest zainstalowana. ;]

Moje demo

W ramach zabawy stworzyłem swoją mini przeglądarkę dostępną pod poniższym adresem (pamiętajcie o potrzebie jej zainstalowania przed użyciem):
Run demo

Przycisk "Przejdź" otwiera stronę spod wpisanego adresu, a "Hello World" generuje stronę z kodu html podanego jako string. Okno jest podzielone na dwie części, lewa jest to kontrolka WebBrowser która wyświetla stronę html, a prawa to Rectangle który jest malowany nowym typem brusha, "HtmlBrush". W momencie załadowania się strony, na Rectangle wywołuję metodę "Redraw()" i maluje wszystkim co znajduje się w kontrolce WebBrowser. Możemy także go odmalować klikając przycisk "Odmaluj".

Jak zapewne sami zauważyliście, próbowałem zrobić coś z Projection, niestety kontrolka WebBrowser sama poddaje się tym operacjom, ale już wyświetlona zawartość jest normalnie odwzorowana. A szkoda, już myślałem że będę mógł czytać sobie bloga do góry nogami :D

Kod źródłowy do dema:
WebBrowserDemo.zip
Słowem zakończenia, chciałem tylko podkreślić że wymienione funkcjonalności to nie wszystko. W internecie już możemy się doszukać przykładów z odwołaniem do kodu javascript i na odwrót, a więc całkiem pokaźny zbiór nowych możliwości.

Pozdrawiam i lecę do innych nowinek.. :]

Jacek Ciereszko

Warsaw Silverlight Study Group (WSSG)

Nie tak dawno temu, bo 22. październik odbyło się pierwsze spotkanie grupy Warsaw Silverlight Study Group (WSSG). Dlatego też chciałbym podziękować wszystkim uczestnikom za tak liczne przybycie i prelegentom (Bartłomiej Zass i Michał Żyliński) za świetne prezentacje!

Na spotkanie przybyło około 30 osób, co jest niesamowitym wynikiem, a mam nadzieje że będzie nas coraz więcej. Do grupy jak dotychczas zapisało się już prawie 50 osób :)

Podziękowania należą się także naszemu sponsorowi, firmie Microsoft za udostępnienie sali i obdarowanie gadżetami, które będą systematycznie trafiać w ręce uczestników kolejnych spotkań.

Na zakończenie przypomnę tylko o kolejnym spotkaniu, które odbędzie się już jutro (10 listopad 2009) o godzinie 18:00. Szczegółowa agenda oraz rejestracja dostępna jest pod adresem http://ms-groups.pl/wssg/2_spotkanie/default.aspx?InstanceID=1

Zapraszam!

Jacek Ciereszko

Drugie spotkanie Warsaw Silverlight Study Group

Zapraszam wszystkich chętnych na drugie spotkanie grupy Warsaw Silverlight Study Group (WSSG). Spotkanie rozpocznie się 10 listopada (wtorek), o godzinie 18:00 w siedzibie firmy Microsoft w Warszawie (al. Jerozolimskie 195A - zobacz na mapie).

Agenda spotkania:
18:00 – 19:30 Jakub Jałbrzykowski: „Silverlight – przyszłość aplikacji biznesowych”;
19:30 – 19:45 Przerwa;
19:45 – 21:00 Jacek Ciereszko: „Wstęp do Silverlighta”;

Spotkanie rozpoczniemy prezentacją Jakuba Jałbrzykowskiego na temat zastosowania Silverlighta w aplikacjach biznesowych. Sesja Kuby pochodzi prosto z tegorocznej konferencji MTS 2009, na której to cieszyła się największą popularnością wśród wszystkich przedstawionych prezentacji.

Po przerwie, zobaczymy prezentację o tym jak zacząć pracę z Silverlightem. Oprócz omówienia technologii i stosowanych narzędzi, przyjrzymy się także pisaniu aplikacji Silverlight w Eclipse oraz dowiemy się jak zrobić deployment aplikacji.

Strona spotkania: http://ms-groups.pl/wssg/2_spotkanie/default.aspx?InstanceID=1

Udział w spotkaniu jest bezpłatny. Wskazana rejestracja (tutorial do rejestracji).
Zapraszam!

Pierwsze spotkanie grupy Warsaw Silverlight Study Group (WSSG)

Tak, tak.. stało się, po kilku miesiącach przygotowań wreszcie rusza Warszawska Grupa Silverlightowa!!!

Dlatego też w imieniu własnym oraz prelegentów zapraszam wszystkich chętnych na pierwsze spotkanie grupy Warsaw Silverlight Study Group (WSSG). Spotkanie rozpocznie się w środę, 21 października, o godzinie 18:00 w siedzibie firmy Microsoft w Warszawie (al. Jerozolimskie 195A - zobacz na mapie). Udział w spotkaniu jest bezpłatny.

Agenda

Tematy które poruszymy na pierwszym spotkaniu to między innymi:

1. Uroczyste powitanie nowych członków w nowej grupie;
   
2. Następnie Bartłomiej Zass opowie nam o nowościach w Silverlight 3.0;
   
3. A po przerwie Michał Żyliński pokaże sesję pod tytułem "Blend 3 w walce z kryzysem".
   

Zapowiada się porządna dawka wiedzy o Silverlightcie zaprezentowana przez jednych z najlepszych prelegentów z firmy Microsoft!!!

Linki do spotkania

Szczegółowa agenda 1. spotkania WSSG

Nieobowiązkowa choć zalecana rejestracja (bez rejestracji nie będę w stanie Was powiadomić o ewentualnych zmianach).

Rejestracja na stronie grupy

Ponieważ pierwsze kroki z rejestracją w grupie mogą być uciążliwe, a zwykle są, dlatego też opiszę szybciutko dwustopniowy proces przez który nowe osoby muszą przejść.

1. Na początku należy się zarejestrować na stronie głównej (http://ms-groups.pl), czyli założyć konto tu -> link. Podajemy dane, zatwierdzamy i czekamy na link aktywacyjny w skrzynce e-mail. Uwaga, podane hasło musi nie być łatwe do złamania, przyszykujcie jakieś dłuższe, najlepiej z przynajmniej jednym znakiem nie z alfabetu.
   
2. Następnie kiedy konto zostanie potwierdzone poprzez kliknięcie linka aktywacyjnego w otrzymany e-mailu, można przejść do zapisania się do grupy WSSG. Strona http://ms-groups.pl skupia wiele grup społecznościowych (WSSG jest tylko jedną z wielu), dlatego też proces musi być tak rozbity.
   

   Kiedy wypełnicie formularz, powinniście otrzymać e-mail z wiadomością o rozpoczęciu procesu dołączania do grupy. Ponieważ proces ten jest manualny, czyli muszę Was ręcznie dopisać i może to trochę zająć, dlatego też proszę o cierpliwość w postaci 24h. Po upływie tego czasu, bombardujcie mnie e-mailami ;)
   

Jeśli uda się Wam przejść przez powyższe 2 kroki, stajecie się pełnoprawnymi członkami grupy WSSG. Będziecie mieli dostęp do całej strony, a ja będę mógł Was powiadamiać o nadchodzących spotkaniach.

Na pocieszenie powiem, że proces jest jednorazowy i nigdy więcej w życiu nie powinien Wam się przydarzyć ;)

Rejestracja na spotkanie

Jeżeli jesteście zalogowani na swoim koncie, wystarczy wybrać w kalendarzu grupy spotkanie (np. 1. spotkania WSSG) i kliknąć "zarejestruj się". Zapisy polegają na dopisaniu się do listy, a więc dodajemy nowy element z naszymi danymi. Gdy pojawimy się na liście, znaczy że proces zakończył się sukcesem.

W przypadku gdy nie możemy dodać się do listy, oznacza to że albo nie jesteśmy zalogowani albo nasz użytkownik nie został jeszcze zapisany do grupy WSSG.

Jeszcze raz serdecznie wszystkich zapraszam i do zobaczenie 21 października,

Jacek Ciereszko

[Behaviors] Mouse Over ComboBox Open (Behavior)

Po ostatnim małym sukcesie (7 dni i ponad 700 ściągnięć) z behaviorsem (patrz poprzedni wpis), postanowiłem że gdy kolejny raz przyjdzie mi do głowy jakiś nowy prosty behavior, również się nim podzielę.

Prościej się nie da

Mój najnowszy behavior nie może być prostszy, bo poniżej jednej linii kodu która rzeczywiście coś robi, nie da się zejść ;) Na szczęście jego działanie stawia go w innym świetle. A o co chodzi? Otóż mój nowy behavior, jak nazwa tego wpisu sugeruje, otwiera listę ComboBoxa po najechaniu na nią myszką. Tada!!! :P

Live demo

Niby nic ale rzeczywiście przydaje się w wielu aplikacjach. Po co użytkownik ma klikać na listę żeby się rozwinęła, skoro może najechać na nią myszką, zawsze to o jeden click mniej! :)

Dodajemy do kodu

<ComboBox Height="29" Width="130" d:LayoutOverrides="Margin">
  <interaction:Interaction.Behaviors>
     <behavior:OpenComboBoxBehavior />
  </interaction:Interaction.Behaviors>
  <ComboBoxItem>
     <TextBlock Text="First element" />
  </ComboBoxItem>
  <ComboBoxItem>
     <TextBlock Text="Second element" />
  </ComboBoxItem>
  <ComboBoxItem>
     <TextBlock Text="Third element" />
  </ComboBoxItem>
  <ComboBoxItem>
     <TextBlock Text="Fourth element" />
  </ComboBoxItem>
</ComboBox>

, gdzie "i:" jest przestrzenią nazw dla "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity", a "behavior:" dla projektu w którym umieszczony jest kod bahaviora.

Wady

Ten Behavior w ogóle nie nadaje się w interfejsach gdzie mamy wiele elementów i ciągle rozwijająca się lista tylko by zasłaniała pozostałe elementy, natomiast jest świetny w paskach menu, przyciskach z dodatkowymi opcjami itp.

Inspiracja

Oczywiście sam na taki pomysł ulepszenie ergonomii interfejsu nie wpadłem, a zwyczajnie podpatrzyłem go na stronie youtube.com. :) Jeżeli przyjrzycie się swojemu użytkownikowi w prawym górnym rogu, to zobaczycie że jak najedziecie na swój profil myszką, to bez klikania rozwija się bardzo wygodna lista dodatkowych opcji.

Source Code

Tradycyjnie, ponieważ kod jest krótki, wklejam całość.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Interactivity;

/// Behavior for ComboBox control.
/// It invokes drop down list when mouse is over it.
/// 
/// Jacek Ciereszko
/// http://geekswithblogs.net/SilverBlog/
/// 
///

namespace ComboBoxBehavior
{
   public class OpenComboBoxBehavior : Behavior
   {
       /// 

       /// Called after the Behavior is attached to an AssociatedObject.
       /// 
       /// Override this to hook up functionality to the AssociatedObject.
       protected override void OnAttached()
       {
           base.OnAttached();
           this.AssociatedObject.MouseEnter += new MouseEventHandler(AssociatedObject_MouseEnter);
       }

       /// 

       /// Called after the Behavior is detached from an AssociatedObject.
       /// 
       /// Override this to hook up functionality to the AssociatedObject.
       protected override void OnDetaching()
       {
           this.AssociatedObject.MouseEnter -= new MouseEventHandler(AssociatedObject_MouseEnter);
           base.OnDetaching();
       }

       /// 

       /// When mouse is over ComboBox, control drop down will open
       /// 
       /// 
       /// 
       void AssociatedObject_MouseEnter(object sender, MouseEventArgs e)
       {
           this.AssociatedObject.IsDropDownOpen = true;
       }
   }
}

Do pobrania

Kod jest także dostępny do pobrania na stronie http://gallery.expression.microsoft.com/en-us/OpenComboBoxDropDown.

Pozdrawiam,

Jacek Ciereszko

Pierwsze wrażenia z Microsoft Surface SDK 1.0 SP1

Kiedy w końcu udało mi się zdobyć dostęp do SDK Microsoft Surface, natchniony rozkminianiem o co w tym wszystkim chodzi, postanowiłem króciutko się podzielić pierwszymi doświadczeniami.

Instalacja

Instalacja oprócz tego że musiałem doinstalować coś do XNA przebiegła niezwykle sprawnie. Całość razem z SDK, przykładami, super emulatorem i resztą rzeczy o których jeszcze nie mam pojęcia, znalazły się bezboleśnie na moim dysku, a w Visual Studio doszły nowe typy projektów.

Development

Ci którzy może jeszcze nie słyszeli, na Surface-a robi się przede wszystkim w WPF i ponoć w XNA (nie sprawdziłem jeszcze). Różnica pomiędzy zwykłym WPFem, a WPFem na Surface polega na tym że mamy zestaw dodatkowych kontrolek

oraz tym że aplikację uruchamiamy w specjalnym emulatorze, zwanym "Surface Simulator".

Polecam zacząć swoją przygodę od przykładów zawartych w SDK, skąd nauczymy się najwięcej :)

Kursor myszki i touchpad z laptopa

Przykłady

Aby zwizualizować jak to wygląd w praktyce, nagrałem krótki filmik który niestety z powodu oporu przed nagrywaniem (winę ponosi "Surface Simulator"), nie oddaje pełnej frajdy z korzystania z tego dobrodziejstwa! Przez pełną frajdę rozumiem tu korzystanie z np. kilku myszek jednoczenie co symuluje palce użytkownika (patrz obrazki), czy też super dźwięk.

Na obrazku widać jak to jest zrobione w praktyce (mam dostępne 2 "palce" którymi obracam elementy, zmieniam ich wielkość itp.)

, a na filmie (jak wspomniałem trochę ograniczonym) widać jak to się wszystko uruchamia.

Jak tylko oderwę się na chwilę od tego cuda, postaram się wrzucić więcej info.

Pozdrawiam,

Jacek Ciereszko

[Behaviors] TextBox Enter Button Invoke (TargetedTriggerAction)

Jakiś czas temu zdarzyło mi się napisać własny behavior, który w odróżnieniu od tych które dłubie na co dzień, może mieć zastosowanie w wielu aplikacjach, stąd też pomysł aby się nim podzielić :)

Co to są behaviorsy nie będę się rozpisywał w tym temacie. Zagadnienie jest większe, a do poczytania o nim polecam świetny artykuł: http://www.silverlightshow.net/items/Behaviors-and-Triggers-in-Silverlight-3.aspx

O co chodzi?

Skoro już wszyscy wiedzą co to są behaviorsy w Silverlight 3.0, to wypadało by powiedzieć że mój jest typu "TargetedTriggerAction", czyli wykonuje akcję na innym obiekcie gdy ten do którego jest przypisany, wywoła wybrany event.

Mój behavior po wciśnięciu przycisku "Enter" we wskazanym textboxsie zasymuluje wciśnięcie wskazanego przycisku (wszystko co dziedziczy z ButtonBase).

Pewnie pomyśleliście sobie od razu, co za bzdura, przecież można podpiąć event i wywołać tą samą metodę w kodzie. Tylko co w przypadku gdy namiętnie stosujemy MVVM, gdzie nasz "code behind" jest czyściutki i zawiera tylko konstruktor? W takim wypadku behavior jest tym czego poszukujemy. Co ważniejsze, "code behind" pozostaje nienaruszony, nie śmiecimy również w ViewModelu, a operacje "interfejsowe" pozostają ładnie oddzielone i nadają się do ponownego użycia.

Standardowe zastosowanie

Jak wspomniałem, behavior ma zastosowanie przede wszystkim w aplikacjach z wzorcem MVVM, a jego miejsce to np. pole wyszukiwania.

Live demo

Wciskając "Enter" w polu tekstowym otrzymujemy ten sam efekt co wciskając przycisk.

Dodajemy do aplikacji

    <Button x:Name="TargetedButton" Content="Targeted Button"  />
 <TextBox Text="TextBox" >
     <i:Interaction.Triggers>
         <i:EventTrigger EventName="KeyDown" >
             <behavior:TextBoxEnterButtonInvoke TargetName="TargetedButton" />
         </i:EventTrigger>
     </i:Interaction.Triggers>
 </TextBox>

, gdzie "i:" jest przestrzenią nazw dla "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity", a "behavior:" dla projektu w którym umieszony jest kod bahaviora.

Kod źródłowy

Kodu jest niewiele, więc postanowiłem wkleić go cały.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Interactivity;
using System.Windows.Automation.Peers;
using System.Windows.Automation.Provider;
using System.Windows.Controls.Primitives;

/// TargetedTriggerAction for TextBox control.
/// Invokes targeted button when Enter is pressed inside TextBox.
/// 
/// Jacek Ciereszko
/// http://jacekciereszko.pl
/// 
///

namespace TextBoxEnterBehavior
{
public class TextBoxEnterButtonInvoke : TargetedTriggerAction
{
   /// 

   /// Gets or sets the peer.
   /// 
   /// The peer.
   private AutomationPeer _peer { get; set; }

   /// 

   /// Gets or sets the target button
   /// 
   private ButtonBase _targetedButton { get; set; }

   /// 

   /// Called after the TargetedTriggerAction is attached to an AssociatedObject.
   /// 
   /// Override this to hook up functionality to the AssociatedObject.
   protected override void OnAttached()
   {
       base.OnAttached();
       _targetedButton = this.Target;
       if (null == _targetedButton)
       {
           return;
       }

       // set peer
       this._peer = FrameworkElementAutomationPeer.FromElement(_targetedButton);
       if (this._peer == null)
       {
           this._peer = FrameworkElementAutomationPeer.CreatePeerForElement(_targetedButton);
       }
   }

   /// 

   /// Called after targeted Button change.
   /// 
   /// Override this to hook up functionality to the new targeted Button.
   protected override void OnTargetChanged(ButtonBase oldTarget, ButtonBase newTarget)
   {
       base.OnTargetChanged(oldTarget, newTarget);
       _targetedButton = newTarget;
       if (null == _targetedButton)
       {
           return;
       }

       // set peer
       this._peer = FrameworkElementAutomationPeer.FromElement(_targetedButton);
       if (this._peer == null)
       {
           this._peer = FrameworkElementAutomationPeer.CreatePeerForElement(_targetedButton);
       }
   }

   /// 

   /// Invokes the targeted Button when Enter key is pressed inside TextBox.
   /// 
   /// KeyEventArgs with Enter key
   protected override void Invoke(object parameter)
   {
       KeyEventArgs keyEventArgs = parameter as KeyEventArgs;
       if (null != keyEventArgs && keyEventArgs.Key == Key.Enter)
       {
           if (null != _peer)
           {
               IInvokeProvider invokeProvider = _peer.GetPattern(PatternInterface.Invoke) as IInvokeProvider;
               invokeProvider.Invoke();
           }
       }
   }
}
}

Do pobrania

Kod jest także dostępny do pobrania na stronie http://gallery.expression.microsoft.com/en-us/TextBoxInvokeButton.

Pozdrawiam,

Jacek Ciereszko

Youtube w Silverlight 3.0?

Wraz z nowym Expression Blendem 3, a właściwie to z Expression Encoderem 3 otrzymaliśmy nową kontrolkę do wyświetlania mediów, czyli MediaPlayer!

Czym jest MediaPlayer?

MediaPlayer to zaawansowana kontrolka do odtwarzania plików video, która opakowuje wszystkie funkcjonalności jakie możemy sobie wymarzyć. Oprócz podstawowego odtwarzania pozwala na tworzenie Playlist, Chapters, AutoLoad, AutoPlay, działa w trybie Offline (po zaakceptowaniu zwiększenia przestrzeni IsolatedStorage), Popout, Transport Controls, Progress Bar, Volume Bar, Full Screen i Closed Caption buttons.

Uruchomienie

Jeśli mamy zainstalowanego Expression Blenda 3 oraz Expression Encoder 3 to kontrolka powinna pojawić się w zakładce Assets-> Media. Jednak jeśli tak się nie stanie, można zrobić to ręcznie, przechodząc do katalogu instalacyjnego Expression Encodera (zwykle jest to "C:\Program Files\Microsoft Expression\Encoder 3") i wybierając katalog "BlendMediaPlayer". W nim znajduje się biblioteka "MediaPlayer.dll" którą wystarczy dołączyć do projekt Silverlight np. w Visual Studio.

W aplikacji Silverlight (dowolnej) w kodzie xaml dodajemy odniesienie do namespace-a, np. "xmlns:media="clr-namespace:ExpressionMediaPlayer;assembly=MediaPlayer" oraz kod odtwarzacza

"<media:MediaPlayer />".

Filmy które chcemy odtwarzać ustawiamy w playlist. To w jaki sposób przekażemy je do kontrolki zależy już tylko od nas. W moim przykładzie ustawiam akurat adresy na sztywno w kodzie.

<media:MediaPlayer x:Name="mediaPlayer" >
<media:MediaPlayer.Playlist>
    <media:Playlist>
        <media:Playlist.Items>                        
            <media:PlaylistItem MediaSource="adresDoFilmu" Title="Star Trek Trailer" VideoHeight="1024" VideoWidth="864" />
        </media:Playlist.Items>
    </media:Playlist>
</media:MediaPlayer.Playlist>
</media:MediaPlayer>

Oczywiście cały powyższy proces można zrealizować w Expression Blend 3 przy pomocy kilku kliknięć. :)

Wygląd

Jeśli podstawowy wygląd kontrolki nie przypadł nam do gustu, możemy zmodyfikować jej template i dostosować wygląd do naszych wymagań. Najłatwiej można to zrobić używając Expression Blenda 3, poprzez wybór prawym myszki na kontrolce, "Edit Template" -> "Edit a copy..".

Live demo

Demo odtwarza HD film "Car accident" w formacie wmv (thx to http://stormscenes.com). Link.

Source Code

link

References

• MediaPlayer control included in Silverlight 3
  
• Silverlight tutorial: Play HD YouTube videos with Silverlight
  

Pozdrawiam,

Jacek Ciereszko

Bloggers Underground #2.5

W imieniu organizatorów chciałem zaprosić wszystkich blogerów na kolejną imprezę z cyklu Bloggers Underground. Spotkanie odbędzie się 29 września o godzinie 19:00 w jednym z lokali w centrum Warszawy.

Co daje spotkanie? Na pewno możliwość poznanie ludzi których blogi czytamy na codzień. Możemy także opowiedzieć ciekawą historię na temat związany z blogami i posłuchać opowieści innych osób.

Rejestracja na spotkanie Bloggers Underground.

Jak było rok temu?
Po pierwszym spotkaniu "Bloggers Underground"!
Podsumowanie Bloggers Underground i zdjęcia

Pozdrawiam,
Jacek Ciereszko

Prototyp aplikacji w Silverlight 3.0 w kilka minut?

Jedną z nowości która ukazała się przy okazji wydania najnowszej wersji Silverlight 3.0 jest budowa prototypu aplikacji przy pomocy tzw. SketchFlow (w wolnym tłumaczeniu "szkic przepływu"). Taka możliwość pojawiła w dzięki wydaniu nowej wersji programu Expression Blend 3, która to wspiera tworzenie tego typu aplikacji.

W niniejszym artykule spróbuje opisać podstawowe funkcje jakie daj nam to rozwiązanie, zbudujemy prosty prototyp aplikacji oraz wygenerujemy dla niego dokumentację.

Ale o co tu chodzi?

Otóż mamy do dyspozycji narzędzie dzięki któremu jesteśmy w stanie stworzyć prototyp interfejsu aplikacji oraz zobrazować nawigację pomiędzy oknami na czytelnym diagramie.

Potrzebne instalacje

Aby rozpocząć pracę musimy zainstalować pakiet SDK do pracy z Silverlight 3.0, a więc Microsoft® Silverlight™ 3 Tools for Visual Studio 2008 SP1 oraz Expression Blend 3 + SketchFlow RC do tworzenia naszego prototypu.

Budujemy własny prototyp

1. Tworzenie nowego projektu

Uruchamiamy Blenda, wybieramy "New Project" i następnie "Silverlight 3.0 SketchFlow Application".

Powinniśmy zobaczyć typowy dla Blenda widok nowego projektu oraz dodatkowy dolny panel z niebieskim kwadracikiem "Screen 1". Ten niebieski kwadracik reprezentuje widoczne powyżej okno aplikacji, a cały panel nazywa się "SketchFlow Map" i służy właśnie do modelowania nawigacji pomiędzy kwadracikami (czyt. Oknami aplikacji).

2. Dodajemy nowe okno

Zanim dodamy nowe okno i zdefiniujemy połączenie pomiędzy nimi, dodajmy jakiś opis do okna "Screen 1" aby móc je później rozróżnić. W tym celu otwórzmy boczne menu i wybierzmy zakładkę ">>" -> " SketchFlow" -> "Styles". W zakładce znajdziemy dużo zdefiniowanych kontrolek z przypisanymi stylami, dzięki czemu będzie nam łatwiej opisywać tworzony interfejs. Wybierzmy i przeciągnijmy na aplikację np. "TextBox" który nazywa się w tym wypadku "Note-Sketch". Możemy także nadać mu jakiś domyślny tekst.

Teraz kiedy nasze pierwsze okno jest już podpisane, dodajmy nowe. Przechodzimy do zakładki "SketchFlow Map" i najeżdżamy kursorem na niebieski kwadracik "Screen 1". W tym momencie powinno rozwinąć się menu w którym mamy do wyboru cztery opcję.

Idąc od prawej, pierwsza opcja z rozwiniętego menu to zmiana koloru kwadracika. W ten sposób możemy grupować je, zwiększając czytelność całego diagramu.

Drugą opcją od prawej jest dodanie komponentu do okna, a więc zagnieżdżenie innego okna wewnątrz tego. Sprowadza się to do stworzenia elementów w aplikacji które w prosty sposób możemy ponownie używać na wielu ekranach (np. menu, stopka).

Trzecią opcją od prawej, jest połączenie z istniejącym oknem. Kiedy nasz prototyp będzie miał wiele okien, będzie to idealny wybór aby stworzyć dodatkowe połączenia pomiędzy nimi.

Ostatnim przyciskiem od prawej, a pierwszym od lewej jest przycisk dodania nowego okno aplikacji który będzie połączony z obecnym. Właśnie tej opcji musimy użyć.

Najlepiej kliknąć prawym myszki i przeciągnąć nowo utworzony kwadracik obok. Po tej operacji utworzy się nowe puste okno "Screen 2" oraz połączenie pomiędzy nim i poprzednim oknem "Screen 1".

3. Komunikacja pomiędzy oknami

Zanim stworzymy komunikację pomiędzy oknami, dodajmy tak jak poprzednio, jakiś opis do okna "Screen 2" w celu odróżnienia go (wystarczy textbox) i wróćmy do okna "Screen 1" (np. klikając w kwadracik "Screen 1"). Na tym ekranie dodajmy przycisk który przeniesie nas do okna "Screen 2".

Aby zrealizować komunikację pomiędzy oknami, najłatwiej kliknąć prawym klawiszem myszki na przycisku, wybrać opcję "Navigate to" oraz okno do którego chcemy stworzyć połączenie.

W tym momencie uruchommy nasz prototyp i zobaczmy co otrzymaliśmy (klawisz F5).

Powinniśmy zobaczyć pierwsze okno powitalne.

Oraz drugiego okno do którego zostaliśmy przekierowani po wciśnięciu przycisku "Take me to Screen 2".

4. Modyfikacja prototypu

Na pewno wszyscy z Was zdążyli zauważyć że oprócz stworzonej aplikacji mamy także dodatkowe menu "SKETCHFLOW PLAYER". Służy ono do zaznaczania uwag do aplikacji. Do dyspozycji mamy pole tekstowe do wpisywania komentarzy do okien jak i zestaw "mazaków" do malowania bezpośrednio po interfejsie. Jeśli poruszanie się po interfejsie nie będzie dość wygodne, zawsze można użyć mapy ekranów "Map" i bezpośrednio przejść do wybranego widoku.

Co więcej, jeśli będziemy działać na raz skompilowanej wersji aplikacji (czyt. nieuruchamianej z Visual Studio), pozostawione zmiany i uwagi zostaną zapisane w przestrzeni Isolated Storage i będą widoczne gdy następny raz uruchomimy aplikację na tym samym komputerze.

Jeżeli chcemy dokonywać zmian na odległość, np. wysłać prototyp klientowi aby wprowadził na nim swoje uwagi, wystarczy że prześlemy mu aplikację, a on za pomocą opcji exportu, stworzy plik z rozszerzeniem feedback który później możemy zaimportować do Expression Blenda (przez import rozumiem tutaj dodanie pliku do projektu - "Add Existing Item.." ).

Aby wygenerować wersję aplikacji którą możemy przekazać klientowi, najłatwiej wybrać opcję "File" w menu w Expression Blend 3 i kliknąć "Package SketchFlow Project..". Stworzony projekt jest gotowy do uruchomienia (TestPage.html).

Demo: link

Source Code: link

Dokumentacja papierowa

Jeśli mimo wszystko łatwiej jest nam pracować na "papierowej wersji aplikacji", czyli po prostu print screeny z aplikacji, powinniśmy zwrócić uwagę na opcję "Export to Microsoft Word..". Opcja ta pozwala na wygenerowanie pełnej dokumentacji okien prototypu. Powstały Word zawiera spis treści, spis obrazków oraz mapkę połączeń pomiędzy ekranami (SketchFlow Map). Co więcej możemy także zastosować wordowy template który ma być użyty do wygenerowania dokumentacji.

Jeszcze kilka miesięcy temu pamiętam jak robiłem print screeny okien i mapę nawigacji aby przenieść je do Worda, wydrukować i później w grupie znajomych nanosić ręcznie sugerowane poprawki do aplikacji. Teraz wiem że już nie będę musiał tego robić ręcznie. :)

Przykład takiego dokumentu znajdziecie tutaj: link

Podsumowanie

Jak widzicie, mając tak doskonałe narzędzie jesteśmy w stanie tworzyć prototyp aplikacji oraz zmieniać go bez większego nakładu pracy. Ustalanie zawartości jak i wyglądu interfejsu nigdy nie było tak łatwe, a mnogość opcji jakie daje nam nowy Expression Blend 3 wspiera nas na każdym kroku.

Oczywiście SketchFlow dostarcza o wiele więcej innych opcji, jak chociażby animację pomiędzy oknami, czy też tworzenie i zagnieżdżanie własnych "kompozycji" elementów w innych oknach, z którymi także polecam się zapoznać.

References

• Install Microsoft Expression Blend 3 + SketchFlow RC
  

• Download Silverlight 3 Tools (SDK)

MTS 2009 – zostało coraz mniej czasu..

Zostało już tylko kilka dni, aby zarejestrować się na konferencję MTS2009 w promocyjnej cenie 450 PLN. Od pierwszego lipca 2009 uczestnictwo w niej będzie kosztować 650 PLN, a po 1 września 1500 PLN.

Dodatkowo do 30 czerwca obowiązuje specjalna promocja dla członków społeczności codeguru.pl (http://www.codeguru.pl/fullnews-4183.aspx ) i WSS.pl (http://wss.pl/NewsList/1,10929.aspx ). Cena dla tych osób to stówa mniej, czyli 350 PLN.

Link do rejestracji: https://mts2009.pl/rejestracja/

Speaker Idol

Korzystając z okazji, chciałem również przypomnieć o odbywającym się w czasie konferencji konkursie Speaker Idol. Zwycięzca otrzyma możliwość prowadzenia własnej prezentacji za rok oraz chwałę na wieki! Link do szczegółów wydarzenia: http://www.mts2009.pl/agenda/speaker-idol

---

Ja będę, a ty?

Jacek Ciereszko

C2C potrzebuje wsparcia

Wspomóż C2C!

Pamiętasz konferencję C2C? Popierasz idee i życzysz dla konferencji jak najlepiej? To koniecznie przeczytaj poniższą wiadomość od organizatorów:

" Przygotowania do konferencji C2C 2009 rozpoczęły się w październiku 2008 roku. Od strony finansowej całe przedsięwzięcie obsługiwać miało stowarzyszenie PDG, które rozliczało również C2C 2008. Na początku 2009 roku PDG zrezygnowało ze współpracy z grupami off-line. Dla organizatorów C2C 2009 oznaczało to brak możliwości zgodnego z prawem rozliczenia konferencji C2C. Na szczęście, dzięki uprzejmości fundacji PROIDEA, stan taki nie trwał długo. Konferencja szczęśliwie została zorganizowana.

Niestety stowarzyszenie PDG do dnia dzisiejszego nie przelało wszystkich środków C2C na konto fundacji PROIDEI. Z tego powodu budżet całego przedsięwzięcia posiada niedobór środków na kwotę ponad 6 000 PLN. Dlatego też zwracamy się do wszystkich osób, którym idea konferencji jest bliska o pomoc.

Jednocześnie chcielibyśmy poinformować, iż organizatorzy C2C 2009 wystąpią na drogę sądową przeciwko stowarzyszeniu PDG w celu odzyskania nieprzekazanych pieniędzy. "

Źródło wiadomości oraz oficjalna treść pod adresem: http://communities2communities.org.pl/pl/News/09-05-31/Finanse_C2C_2009.aspx

Wszelka pomoc finansowa (nawet drobna) będzie mile widziana.

EDIT:

Numer konta oraz aktualny stan zebranej kwoty podany jest na stronie http://zine.net.pl/

Pozdrawiam,

Jacek Ciereszko

Silverlight 3.0 + Out Of Browser = RDA?

W końcu, kiedy ogarnąłem się z dodatkowych zadań (Imagine Cup 2009 oraz kwietniowy numer SDJ) mogę zabrać się za opisywanie wszystkich nowinek Silverlighta 3.0!!! Trochę tego jest, w związku z tym zacznę od tych (moim zdaniem) najciekawszych :)

Out Of Browser

Pierwszą nowinką nad która chciałby się skupić jest Out Of Browser (OOB), czyli możliwości instalacji aplikacji RIA na lokalnym komputerze. Tym którzy jeszcze o tym nie słyszeli, przypomnę że od wersji Silverlight 3.0 istnieje możliwość stworzenia aplikacji którą będzie można instalować lokalnie na komputerze i korzystać z niej bez uruchamiania przeglądarki, taki OneClick (dla niektórych Java WebStart). Stąd też przyszedł mi do głowy tytułowy skrót RDA -> Rich Desktop Application ;)

Opcja ta jest skierowana przed wszystkim do aplikacji które działają w środowisku bez stałego dostępu do Internetu (z ang. Occasionally Connected). W ten sposób możemy używać aplikacji przez cały czas, nawet gdy chwilowo nie mam dostępu do sieci i otworzenie programu w przeglądarce było by nie możliwe.

Demo

Zaczniemy z grubej rury czyli od istniejącej aplikacji – Run DEMO - Chess!!

Aplikacja ta to szachy stworzone na potrzeby konferencji MIX09, które po zainstalowaniu pozwalają na grę w trybie lokalnym. Aby móc ją zobaczyć i zagrać musimy mieć zainstalowany plugin Silverlight 3.0 SDK (w obecnej wersji jest to Beta 1 spod adresu link).

Grę możemy zainstalować klikać w przycisk "Install Chess Now" lub klikając prawym przyciskiem myszki w aplikacje i wybranie opcji instalacji. W czasie instalacji w systemie operacyjnym Windows mamy do wyboru umieszczenie skrótu do gry na pulpicie lub/i w menu start, natomiast w MACu user ma większą dowolność i może instalować aplikację (skrót) gdzie mu się podoba. W Windows nikt nie zabroni tam także przenieść skrótu do aplikacji w inne miejsce ale nie jest to coś co możemy wybrać podczas instalacji. Jeśli wszystko się uda, to możemy zamknąć przeglądarkę i uruchomić grę z umieszczonego skrótu.

Jak zauważyliście w przykładzie, instalacja nie jest tak dowolna jak w przypadku zwykłych aplikacji, a więc do wyboru mamy tylko miejsce wskazania skrótu do aplikacji. Cała reszta jest schowana przed użytkownikiem i nie pozwala na modyfikację.

Warto wspomnieć, że zainstalowana aplikacja może działać bez dostępu do Internetu i synchronizować swoje dane jak tylko taki dostęp otrzyma. Za przestrzeń do przechowywanie danych możemy wykorzystywać Isolated Storage, który po instalacji aplikacji pozwala na przechowywanie aż 25MB danych bez pytania o zgodę użytkownika, co w przeciwieństwie do 1MB gdy uruchamiamy aplikację w przeglądarce, robi różnicę. Pamiętajmy że zawsze możemy zwiększyć tą przestrzeń, o ile użytkownik wyrazi zgodę. (patrz artykuł o Isolated Storage).

Z poziomu aplikacji bardzo szybko możemy także odinstalować grę, klikamy prawym myszki i wybieramy opcję "Remove this application..". Całość jest dość wygodna w użytkowaniu i nie sprawia większych problemów.

Zróbmy swoją aplikację

W celu demonstracji jak łatwe jest włączenie opcji instalacji RIA na komputerze lokalnym, stworzymy prostą aplikację "Witaj Świecie" która oprócz przywitania się będzie pokazywać czy jest uruchamiana w przeglądarce oraz czy ma dostęp do Internetu.

I. Podstawowa instalacja

Pierwszym krokiem jest otwarcie Visual Studio oraz wybranie nowego projektu SilverlightApplication (może to być także inny typ projektu Silverlight, ale to akurat nie ma znaczenia).

Aby aplikacja mogą być instalowana, program musi być do tego specjalnie stworzony dlatego też otwieramy plik "AppManifest.xaml" z katalogu "Properties". Jeśli mamy zainstalowaną wersję Silverlight 3.0, powinniśmy zobaczyć w środku trochę wykomentowanego kodu.

<Deployment.ApplicationIdentity>
   <ApplicationIdentity
      ShortName="Out of Browser Silverlight Application"
      Title="Window Title of Your Silverlight Application">
      <ApplicationIdentity.Blurb>Description of your Silverlight application</ApplicationIdentity.Blurb>
   </ApplicationIdentity>
</Deployment.ApplicationIdentity>   

Kod ten odpowiada właśnie za włączenie opcji instalacji aplikacji RIA. Wystarczy że odkomentujemy go i nasza aplikacja może być od tej pory instalowana na lokalnym komputerze.

Zanim uruchomimy po raz pierwszy program, dodajmy prosty TextBlock w pliku MainPage.xaml, tak abyśmy widzieli że aplikacja działa.

<UserControl x:Class="SilverlightOOBApplication.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
       <TextBlock Text="Witaj Świecie" />
    </Grid>
</UserControl>

Teraz możemy uruchomić program. Klikamy prawym przyciskiem myszki w aplikacji i wybieramy "Install Out of Browser Silverlight … onto this computer"

Następnie wybieramy gdzie chcemy aby pojawił się skrót do zainstalowanej aplikacji, czy ma być to pasek menu czy skrót na pulpicie i zatwierdzamy.

W tym momencie powinien pojawić się nasz HelloWorld w okienku. Jeśli zamkniemy program i udamy się na pulpit lub menu start, znajdziemy tam skrót do naszej aplikacji. Wystarczy odpalić go jak zwykły program aby zobaczyć że nasz program działa tak samo ale bez uruchamiania przeglądarki.

II. Dostosujmy instalacje do naszych potrzeb

Przede wszystkim możemy dostosować takie parametry jak krótki opis aplikacji (ShortName) który używany jest chociażby do podpisania skrótu na pulpicie do aplikacji. Tytuł aplikacji (Title) pojawiający się miedzy innymi w oknie aplikacji którą uruchamiamy offline lub podczas instalacji oraz parametr większego opisu (ApplicationIdentity.Blurb) używany jako treść tooltipów.

W celu przetestowania ustawmy ShortName na np. "Welcome App", tytuł na "Witam w aplikacji powitalnej" oraz ApplicationIdentity.Blurb na "To jest aplikacja powitalna", tak jak w zamieszczonym przykładzie poniżej.

AppManifest.xaml:

<Deployment.ApplicationIdentity>
  <ApplicationIdentity
     ShortName="Welcome App"
     Title="Witam w aplikacji powitalnej">
     <ApplicationIdentity.Blurb>To jest aplikacja powitalna</ApplicationIdentity.Blurb>
  </ApplicationIdentity>
</Deployment.ApplicationIdentity>

Dodatkowo warto pokusić się o własne ikonki. Wstawianie ich jest banalnie proste i jedyne co musimy dostarczyć to obrazki oraz odpowiednie wpisy w pliku AppManifest.xaml. Dostarczane obrazki mogą być typu png i wystarczy je umieścić w projekcie oraz dołączyć w pliku xml. Uwaga, dodane ikonki należy ustawić jako "Content" w projekcie, a nie "Resource". Aby to zmienić, klikamy prawym myszki na ikonce w Visual Studio i przestawiamy wartość "Build Action" na "Content".

Ikonki dodajemy w 4 różnych rozmiarach w celu dostarczenia odpowiednich obrazków dla okna instalacji, skrótu na pulpicie, w menu start itd. W pełni zmodyfikowany kod pliku AppManifest.xaml może wyglądać np. tak:

<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Deployment.Parts>    </Deployment.Parts>

  <Deployment.ApplicationIdentity>
     <ApplicationIdentity ShortName="Welcome App" Title="Witam w aplikacji powitalnej">
      <ApplicationIdentity.Blurb>To jest aplikacja powitalna</ApplicationIdentity.Blurb>
      <ApplicationIdentity.Icons>
        <Icon Size="16x16">images/icons/user-16.png</Icon>
        <Icon Size="32x32">images/icons/user-32.png</Icon>
        <Icon Size="48x48">images/icons/user-48.png</Icon>
        <Icon Size="128x128">images/icons/user-128.png</Icon>
      </ApplicationIdentity.Icons>
     </ApplicationIdentity>

  </Deployment.ApplicationIdentity>

</Deployment> 

III. Świadomość aplikacji o aktualnym stanie instalacji

W celu wykrycia czy aplikacja została uruchomiona lokalnie, wystarczy w pliku App.xaml.cs w metodzie obsługi eventu "Startup" dodać sprawdzenie na zmiennej "

Application.Current.RunningOffline

".

public partial class App : Application
{
  public App()
  {
      this.Startup += this.Application_Startup;
      ...
  }

  private void Application_Startup(object sender, StartupEventArgs e)
  {
      if (Application.Current.RunningOffline)
      {
          this.RootVisual = new OfflinePage();
      }
      else
      {
          this.RootVisual = new MainPage();
      }
  }
}

A więc zmienna "RunningOffline" dostarczy nam informacji o trybie pracy aplikacji i np. jak w powyższym przykładzie pozwoli na wybranie odpowiedniego wygląda aplikacji.

IV. Świadomość aplikacji o aktualnym stanie połączenia z Internetem

Aby pozyskać informację o tym czy aplikacja ma podłączenie do Internetu, wykorzystamy klasę "NetworkInterface", a dokładnie jej metodę "NetworkInterface.GetIsNetworkAvailable()". Metoda ta zwraca wartość typu bool która informuje nas o tym czy połączenie do Internetu jest możliwe.

Dodatkowo możemy chcieć żeby aplikacja wykonała powyższe sprawdzenie w momencie gdy dostęp do Internetu się pojawia lub znika. W tym celu możemy wykorzystać event z klasy "NetworkChange.NetworkAddressChanged". Obie powyższe klasy są zadeklarowane w namespace "System.Net.NetworkInformation".

Spójrzmy na przykładowy kod który możemy umieścić np. w klasie MainPage.xaml.cs:

public MainPage()
{
   InitializeComponent();
   NetworkChange.NetworkAddressChanged += new NetworkAddressChangedEventHandler(OnNetworkChange);
}

void OnNetworkChange(object sender, EventArgs e)
{
   if (NetworkInterface.GetIsNetworkAvailable())
   {       
       // połączenie instnieje...
   }
   else
   {
       // brak połączenia
   }
}

W konstruktorze dodajemy obsługę eventu zmiany połączenia, a w metodzie "OnNetworkChange" obsługujemy to zdarzenie. Aplikacja sprawdza czy istnieje połączenie i według tego podejmuje odpowiedni kroki.

Warto zwrócić tutaj uwagę na sytuację gdy mamy dwa dostępne połączenia. Gdy jedno "padnie" to w/w event zostanie wywołany ale metoda "NetworkInterface.GetIsNetworkAvailable()" wciąż zwróci true ze względu na to że istnieje wciąż inne połączenie. W związku z tym wszelkie przełączanie dostępności według np. flagi nie ma tutaj sensu i może powodować niepotrzebne błędy w działaniu programów.

Dodatkowo połączenie do sieci w której nie ma Internetu to także połączenie. Jest to ogromna wada całego tego rozwiązania ale może w kolejnych wersjach będzie to poprawione.

V. Automatyczne aktualizacje aplikacji

Pewnie część z Was zastanawia się już co z aktualizacją wersji aplikacji, w jaki sposób poradzić sobie z aktualizacją programów. Otóż OOB w Silverlight załatwia nam to z automatu, kiedy pojawia się nowsza wersja, zostaje ona pobrana i zainstalowana przy kolejnym uruchomieniu. Taki mechanizm jest bardzo wygodny i zapewnia spójność wersji programów zainstalowanych lokalnie oraz tych działających online. Dodatkowo możemy poinformować użytkownika o nowych wersjach poprzez skorzystanie z eventu

ExecutionStateChanged i App.Current.ExecutionState

.

App.xaml.cs:

public App()
{
   ..
   this.ExecutionStateChanged += new EventHandler(App_ExecutionStateChanged);
   ..
}

void App_ExecutionStateChanged(object sender, EventArgs e)
{
   if (App.Current.ExecutionState == ExecutionStates.DetachedUpdatesAvailable)
   {
       MessageBox.Show("Ukazała się nowsza wersja programu. Proszę zrestartować aplikację.");
   }
}

"ExecutionStateChanged" zostaje wywołany zawsze gdy stan aplikacji się zmienia. Warto zwrócić uwagę że "ExecutionStates" posiada także atrybuty takie jak "Detached", "DetachFailed", "Detaching" oraz "RunningOnline" które możemy sprawdzić gdy stan aplikacji się zmieni i wykonać odpowiednie operację. Np. gdy instalacja aplikacji lokalnie się nie powiedzie, metoda "ExecutionStateChanged" zostanie wywołana, a stan "ExecutionState" zostanie ustawiony na "DetachFailed". W tym momencie możemy wykonać dowolną operację która rozwiąże problem lub zasugeruje użytkownikowi inne rozwiązanie. To samo tyczy się pozostałych stanów.

Jak widzimy, taki typ obsługi daje nam skuteczny mechanizm zarządzania instalacją aplikacji i przełączania jej trybów działania.

Online Sample

Powyższą aplikację możemy zobaczyć pod adresem: (wymagany Silverlight 3.0 Beta 1) Live DEMO

Kod źródłowy dostępny jest pod adresem: link

Wnętrze

Od strony zaplecza, cały mechanizm działa na zasadzie zrzutu aplikacji Silverlight do przestrzenie użytkownika i nadaniu mu unikatowego numeru. Numer ten jest wykorzystywany do uruchamiania aplikacji. Sam proces uruchamiania odbywa się za pomocą pliku sllauncher.exe znajdującego się w plikach zainstalowanego plug-ina Silverlighta (zwykle jest to katalog: C:\Program Files\Microsoft Silverlight\3.0.40307.0\sllauncher.exe).

Jeśli przyjrzymy się na przykład skrótowi z pulpitu do aplikacji, zobaczymy coś w stylu:

C:\Program Files\Microsoft Silverlight\<wersja>\sllauncher.exe <adres.id>

Gdzie "wersja" to numer aktualnej wersji Silverlighta (w chwili pisania tego artykułu jest to 3.0.40307.0), a numer "adres.id" to adres strony i numer nadany dla aplikacji. Taki skrót może wyglądać np. tak:

"C:\Program Files\Microsoft Silverlight\3.0.40307.0\sllauncher.exe" localhost.4

lub

"C:\Program Files\Microsoft Silverlight\3.0.40307.0\sllauncher.exe" www.jacekciereszko.pl.2

W Windows Vista naszą zapisaną aplikację możemy znaleźć na przykład pod adresem

"C:\Users\<nazwa użytkownika>\AppData\LocalLow\Microsoft\Silverlight\Offline\<adres.id>"

gdzie mechanizmy Silverlighta przechowują pliki xap, html i jeszcze kilka plików. W innych systemach operacyjnych adres ten zapewne będzie inny, ale w żaden sposób nie będzie nam potrzebny do pracy z programem, a więc nie martwcie się jeśli nie dogrzebiecie się do swojego repozytorium.

Należy pamiętać że aplikacja przez cały czas pozostaje uruchomiona w sandbox-się, a więc po instalacji na komputerze nie otrzymuje żadnych dodatkowych uprawnień i jest traktowana tak samo jak ta uruchamiana w przeglądarce. Zaletą tego rozwiązania jest to, że użytkownik nie potrzebuje praw administratora do instalacji aplikacji.

Tak jak wspomniałem powyżej, zainstalowana aplikacja może mieć świadomość tego czy komputer jest podłączony do Internetu, działać gdy takiego połączenia nie ma oraz być powiadamiana o zmianie jego statusu. To ostatnie wydaje się szczególnie ważne, gdy tworzymy aplikację która będzie gromadzić dane i synchronizować je okazjonalnie (tzw. emisariusze). Mechanizm ten jest także wykorzystywany do update-ów aplikacji i obsługiwany automatycznie przez mechanizmy Silverlighta. Tak jak wspominałem powyżej, aplikacja która wykryła nowszą wersję, pobiera ją i instaluje przy kolejnym uruchomieniu aplikacji.

Wygląd

Aby wyjść naprzeciw oczekiwaniom użytkownika, Microsoft pozwoli nam customizować nasze aplikację w zależności od tego czy jest ona zainstalowana czy uruchamiana z przeglądarki. A więc na przykład w wersje uruchamianej w przeglądarce, umieścić tylko przycisk instalacji, a w wersji zainstalowanej całą aplikację, tak jak to widzieliśmy na przykładzie gry w szachy.

W tej wersji Silverlighta, okno uruchomieniowe programów zainstalowanych lokalnie pozwala tylko na ustawienie ikonki, tytułu oraz pozycji na ekranie. Jak podaje Microsoft, więcej opcji dostosowywania wyglądu okna pojawi się w kolejnych wersjach.

Debuger

Pierwszym poważnym problemem na który natknąłem się był brak debuggera. News o tym znalazłem na stronie transcriptu z jednej z sesji MIX09. Szybko jednak doinformowano mnie o zapomnianym "Attach Process" z VS który prawie idealnie rozwiązuje problem. Prawie, ponieważ nie jest to wygodne i trochę utrudnia pracę (np. podłączenie aplikacji do procesu).

Ograniczenia

Ponieważ w planie miałem stworzenie aplikacji która instaluje się lokalnie na komputerze klienta, oraz obsługuje Silverlight Navigation i kontrolkę Silverlight Virtual Earth Map Control, szybko przekonałem się że nie wszystko będzie działać. Należy pamiętać, że po instalacji aplikacji na komputerze lokalnym trochę rzeczy jednak się zmienia i np. komunikowanie się z mapą staje się niemożliwe ze względu na brak "współpracy" z HTML DOM. Sugerował bym najpierw upewnić czy to co chcemy zrobić zadziała (małe PoC) zanim zaplanujemy całe rozwiązanie.

Resources

• Wspaniały screencast Tim Heuera pokazujący krok po korku jak stworzyć aplikacje OOB – link,
  
• Strona z szachami - link,
  
• Szereg artykułów na temat OOB – link.
  

Live demo stworzonej aplikacji: link

Kod źródłowy dostępny jest pod adresem: link

Pozdrawiam
Jacek Ciereszko