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

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

[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

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)

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

VS 2010, a wybór używanej wersji Silverlighta

Wreszcie od wersji Visual Studio 2010 mamy wybór w której wersji SDK chcemy tworzyć aplikację! Co nam to daje? Chociażby jednoczesną możliwość pracy z wersjami Beta oraz wersjami stabilnymi, bez konieczności stawiania oddzielnego środowiska czy tez deinstalacji którejś z wersji.

Ponieważ VS 2010 to jeszcze wersja beta, instalacja jest trochę utrudniona. Otóż należy:

1. Przede wszystkim zainstalować Visual Studio 2010 (obecnie Beta 1)
   
2. Następnie instalujemy SDK dla Silverlight 2.0 (Silverlight 2 SDK). Tu ważne żeby nie pomylić instalacji z wersją "toolsów" ponieważ możemy otrzymać błędy.
   
3. Kolejnym krokiem jest instalacja SDK dla wersji 3.0 (Silverlight 3 Beta SDK). Tu także uwaga na wersję "toolsów" (Silverlight 3 Beta Tools for Visual Studio) - nie pomylić.
   
4. I na końcu instalujemy Runtime (Silverlight 3 Beta Developer Runtime).
   

Po tak przeprowadzonej instalacji powinniśmy mieć możliwość wyboru SDK podczas tworzenia projektu. Co więcej, nowy Visual Studio 2010 pozwala także na zmianę wersję w trakcie tworzenia aplikacji. Wystarczy przełączyć tą opcję w ustawieniach projektu.

Aby sprawdzić że wszystko działa, uruchommy nowego Visual Studio 2010 Beta 1 i wybierzmy nowy projekt "Silverlight Application".

Jeśli rozwiniemy listę wersji w oknie wyboru (patrz screen) zobaczymy że możemy wskazać tą która nam najbardziej pasuje w danym momencie.

Podsumowując

Jeśli chodzi o ogólne wrażenie nowego VS 2010 to jest przyjemny i wygodny, jednak braki związane z Silverlightem + wersją Beta 1 wciąż skłaniają mnie do używania VS 2008, przynajmniej dopóki oficjalna wersja VS 2010 nie będzie dostępna.

Resources

• Blog Alberta Pascula: http://weblogs.asp.net/albertpascual/archive/2009/03/22/silverlight-and-wpf-future-the-death-of-asp-net.aspx
  
• Blog Tim Heuera: http://timheuer.com/blog/archive/2009/05/20/silverlight-and-visual-studio-2010-beta.aspx
  

Pozdrawiam,

Jacek Ciereszko

Silverlight Count Down Control – Wasze dni są policzone

Jakiś czas temu wymyśliłem sobie malutki programik który będzie odliczał ustawiony czas. Ktoś by zapytał: po co to komu? Jednak jak się dobrze zastanowić, to taki "counter" czasu może być bardzo fajnym dodatkiem do wielu stron. Na pewno fajnie przypomni o nadchodzącej konferencji czy też spotkaniu, chociaż jestem przekonany że znajdzie się dla niego wiele innych ciekawych zastosowań :)

Wychodząc naprzeciw oczekiwaniom stworzyłem taki programik i umieściłem wraz z kodem źródłowym na codeplex-sie pod adresem: http://silverlightgadgets.codeplex.com/ (mam nadzieję że uda mi się tam także umieścić wiele innych "gadgetów")

Demo znajdziecie pod adresem (tak wiem, grafika wygląda tragicznie ;)):

http://wpierdalaj.pl/SWG/SilverlightCountDown/Run/SilverlightCountDownTimerExampleTestPage.html

Jak go użyć

Counter został stworzony tak aby był łatwo konfigurowalny i zgodny z wymaganiami wzorca Model-View-ViewModel (MVVM). Najłatwiej jest zwyczajnie:

1. Pobrać bibliotekę kontrolki (SilverlightCountDownTimer.dll) ze strony http://silverlightgadgets.codeplex.com/,
   
2. Dołączyć ją do rozwijanego projektu (Add References),
   
3. Umieścić w kodzie:
   

<UserControl x:Class="SilverlightCountDownTimerExample.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:timeCounter="clr-namespace:SilverlightTimer assembly=SilverlightCountDownTimer"        
  Width="200" Height="100">
  <Grid x:Name="LayoutRoot" Background="Transparent">
      <timeCounter:SilverlightTimerControl EventDescription="Time to New Year Party"
      EventTime="2010-01-01 00:00" />
  </Grid>
</UserControl>

Tak jak widzimy w przykładzie, wystarczy wstawić kontrolkę i ustawić podstawowe parametry aby odliczanie ruszyło.

Parametry

Do dyspozycji mamy następujące parametry konfiguracji kontrolki:

• EventDescription – Tekst który wyświetli się pod odliczanym czasem. W tej wersji istnieje ograniczenie długości pola tekstowego jakie może pomieścić textbox.
  
• EventTime – Data do której będzie odliczany czas.
  
• EventTimeUrl – Adres pliku tekstowego który zawiera datę. Ten parametr umożliwia dynamiczne modyfikowanie daty bez ingerencji w kod aplikacji. Wystarczy że zmienimy datę w pliku, a counter zacznie odliczać czas do nowej daty. Przykładowy plik z datą: http://wpierdalaj.pl/SWG/date.txt. Uwaga, jeśli ustawimy także parametr "EventTime", "EventTimeUrl" zostanie pominięty. Parametr"EventTime" ma pierwszeństwo przed "EventTimeUrl". Należy także zwrócić uwagę czy plik z datą jest dostępny dla odwołań z zewnątrz (patrz ustawienia Client Access Policy na blogu Tim Heuera)
• CounterFinish – Event który zostanie wywołany gdy counter skończy odliczanie. W ten sposób możemy zainicjalizować jakąś akcję w aplikacji gdy upłynie ustawion czas.
  
• EventTimeCache – Ten parametr uruchamia funkcję cache'owania daty. Ma to zapobiec sytuacji nadmiernego odpytywania serwera (poprzez parametr EventTimeUrl) o datę do odliczania. Odpytanie jest mało kosztowne, a sama data to kilka bajtów, ale jeśli można odciążyć serwer, to warto skorzystać z tej możliwości. Domyślnie cache jest wyłączony, a jego czas ważności ustawiony na jeden dzień, po tym terminie counter sprawdzi czy ma aktualne dane.
  
• EventTimeCacheDuration – Ta opcja zmienia domyślny czas cachowania daty. Jednostką jest dzień, a więc ustawienie tego parametru na wartość 40, sprawi że aplikacja przez 40 dni nie będzie aktualizować odliczanej daty.
  

Wszystkie wyżej wymienione parametry możemy także ustawiać bezpośrednio w kodzie i zmieniać w czasie działania kontrolki. Np.:

.XAML:

<timeCounter:SilverlightTimerControl x:Name="myCounter" />

.CS (C#):

myCounter.EventTime = new DateTime(1983, 12, 14, 0, 0, 0);
myCounter.EventDescription = "Moje Urodziny";

Ponieważ aplikacja wspiera pattern Model-View-ViewModel (MVVM), możliwe jest także ustawienie binding-u na w/w paramentry. Np.:

<timeCounter:SilverlightTimerControl x:Name="myCounter" EventTime="{Binding Path=EventTime}" />

Podłączenie aplikacji bez dotykania kodu i Visual Studio

Dla tych którzy nie mają ochoty na zabawę z Visual Studio, dostępna jest także opcja gotowej aplikacji konfigurowanej z poziomu kodu html. W pliku "HtmlVersion" znajduje się kompletny przykład takiej konfiguracji, a poniżej wycinek z pliku SilverlightCountDownTimerExampleTestPage.html:

<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="100%" height="100%">
   <param name="source" value="ClientBin/SilverlightCountDownTimerExample.xap"/> 
   <param name="onerror" value="onSilverlightError" />
   <param name="background" value="white" />
   <param name="minRuntimeVersion" value="3.0.40307.0" />
   <param name="autoUpgrade" value="true" />

   <!--// EventTimeUrl will be ignored because EventTime is set-->
   <param name="initParams"
    value="EventDescription=Time to MIX 2010,
    EventTime=2010-03-15 08:00,
    EventTimeUrl=http://wpierdalaj.pl/SWG/date.txt,
    EventTimeCache=True,
    EventTimeCacheDuration=40"
   />

</object>

Aby uruchomić counter, nie musimy ustawiać wszystkich w/w parametrów. Jeśli coś nie działa, sprawdźcie czy nie zrobiliście błędu w zapisie. Niestety opcja "initParams" jest bardzo czuła na dodatkowe znaki oraz nie pozwala na znaki specjalne, np. cudzysłowy czy przecinki w ustawianych wartościach.

Dodatki

Jeśli chcemy aby counter był klikalny i np. przekierował osobę na inną stronę, wystarczy otoczyć go prostym Hiperlinkiem w kodzie XAML:

<HyperlinkButton NavigateUri="http://jacekciereszko.pl" TargetName="_blank" >
     <timeCounter:SilverlightTimerControl x:Name="myControl" />
</HyperlinkButton>

Wygląd

Na ten moment nie przewiduje dla "countera" skinsów ani wsparcia na zmianę grafiki. Powodem tego jest brak jakichkolwiek umiejętności graficznych, w związku z tym zakładam że każdy będzie sam w stanie korzystając z kodu źródłowego dostosować wygląd aplikacji do swoich potrzeb.

Jeśli znajdzie się ktoś kto chciałbym coś ładnego namalować i się tym podzielić, chętnie dodam to do projektu.

Podsumowanie

Proszę piszcie jeśli macie jakieś propozycje lub zastrzeżenia, będę starał się ulepszać na bierząco "odliczacza" czasu :) Na razie planowany jest downgrade do wersji Silverlight 2.0.

Strona projektu: http://silverlightgadgets.codeplex.com/

Pozdrawiam,

Jacek Ciereszko

IT Academic Day w PJWSTK

W imieniu organizatorów chciałbym serdecznie zaprosić wszystkich studentów na konferencję IT Academic Day dnia 23 kwietnia 2009 w siedzibie uczelni przy ul.Koszykowej 86.

W czasie spotkania będziecie mogli zapoznać się z nowościami w Silverlight 3 i IE8 - obydwie prezentacje poprowadzi Bartłomiej Zass z firmy Microsoft. Grzegorz Niemirowski zaprezentuje system operacyjny Microsoftu w całości oparty na kodzie zarządzanym. Robert Kapuściński natomiast opowie o tym jak radzić sobie z wirusami tylko i wyłącznie za pomocą narzędzi dostępnych w Windows.

Silverlight 3.0 już 18-20 marca?

Wszyscy szczęściarze którzy będą mieli okazje pojechać na konferencję Mix 2009, zapewne pierwsi zobaczą nową wersję Silverlighta 3!!! Jak piszą Jesse Liberty oraz Scott Guthrie na swoich blogach, możemy spodziewać się ogłoszenia wydania nowej wersji już nie długo.

Natomiast jeśli przyjrzymy się agendzie konferencji MIX 2009, to wszystko wskazuje że to tam pierwszy raz zobaczymy nowego Silverlighta w wersji 3! Jeśli sięgniemy pamięcią do roku poprzedniego, zobaczymy że także w trakcie MIX 2008, pojawił się Silverlight 2.0 w wersji Beta 1.

Wybrane sesje z MIX2009:

• What's New in Silverlight 3. Learn about the new experience-oriented Silverlight 3 features, and see how to build Silverlight 3 applications using Expression Blend and Visual Studio.
  
• What's New in Silverlight 3 Media. Learn about the latest media features available with Silverilght 3.
  
• Deep Dive into Silverlight Graphics. Hear about the Silverlight 3 rendering pipeline, and learn how to enhance your application experience with the latest additions to the Silverlight graphics APIs.

Pozostało tylko czekać i liczyć na to, że będziemy mogli obejrzeć nagrania z sesji :)

A co nowego w Silverlight 3? Scott Guthrie na swoim blogu wspomina że nowy Silverlight 3 będzie zawierać wsparcie dla plików kompresji wideo H.264. Wprowadzi zmiany w grafice, w tym grafikę 3D oraz wykorzystanie akceleracji sprzętowej kart graficznych. Rozbudowane zostaną mechanizmy bindowania danych, dodane będą nowe kontrolki, a designer do Visual Studio i Visual Web Developer Express będzie umożliwiać pełną edycję GUI i wsparcie bindowania danych.

Warto zwrócić uwagę, że Scott wymieniając te nowości, pisze że jest to tylko mała część zmian które nastąpią w nowym Silverlight 3 :)

Biorąc pod uwagę liczbę prezentacji poświęconych Silverlightowi na MIX 2009 (według agendy na 38 sesji, aż 12 dotyczy bezpośrednio tej technologii) można wnioskować, że Microsoft wciąż bardzo mocno wspiera jej rozwój i jest to zdecydowanie technologia w którą możemy inwestować swój czas i pieniądze.

Resources

• Agenda dotycząca Silverlight 3.0 na MIX2009 - http://2009.visitmix.com/Agenda/Sessions.aspx
  
• Nowości w Silverlight 3 według Scotta Guthrie'a - http://weblogs.asp.net/scottgu/archive/2008/11/16/update-on-silverlight-2-and-a-glimpse-of-silverlight-3.aspx
  
• Jesse Liberty cieszy się z konferencji MIX 2009 - http://silverlight.net/blogs/jesseliberty/archive/2009/01/26/why-i-m-going-to-mix.aspx
• Wywiad z Scott Guthrie - http://channel9.msdn.com/posts/Charles/Scott-Guthrie-On-Silverlight-MIX09-Keynotes-Developers-and-Designers/