Blog o programowaniu w Silverlight i nie tylko.

Imagine Cup 2010 - Wyniki

2010-06-02T12:01:00.000+02:00

Nieładnie się chwalić i ponoć nie wypada ale tym razem zrobię wyjątek ;) Otóż dziś, zgodnie z oficjalnymi wynikami na stronie konkursu Imagine Cup 2010 (drużyna RHEA której jestem członkiem) zajęła w skali światowej:

Pierwsze miejsce w kategorii Internet Explorer 8 Award oraz
Drugie miejsce w kategorii Next Generation Web Award :)

Aplikacje można sobie poklikać online http://rhea-ie.imaginecup2010.net i obejrzeć sceen cast http://rhea-ie.imaginecup2010.net/about/

Dziękujemy organizatorom i cieszymy się z wyników!

Pozdrawiam,
Jacek Ciereszko

UserControls w Silverlight i MVVM [WSSG]

2010-05-29T16:17:00.002+02:00

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

Agenda spotkania:
18:00 – 19:20 Grzegorz Wiśniewski: „Wstęp do tworzenia własnych kontrolek w WPF i Silverlight”;

19:20 – 19:40 Przerwa;
19:40 – 21:00 Michał Korzunowicz: „MVVM – Gdzie? Co? I jak? Na podstawie prostej gry typu shooter ”;

Wtorkowe spotkanie rozpoczniemy od prezentacji Grzegorza, który już od 8 lat zajmuje się rozwojem komercyjnego oprogramowania.

Tworzenie kontrolek z wykorzystaniem Windows Forms nastręczało bardzo często dużo problemów szczególnie dla początkujących programistów. Możliwości jakie oferuje WPF i Silverlight otwierają drogę do tworzenia rozwiązań efektowych w sposób efektywny. Grzegorz podczas swojej prezentacji postara się przedstawić jak łatwo można uszczegółowić kontrolkę czy w zależności od potrzeb zaprojektować ją od podstaw.

Po przerwie gościć będziemy Michała Korzunowicza, który na co dzień pracuje w firmie Creadhoc, technologią Silverlight interesuję się od 2 lat.

Z prezentacji Michała dowiemy się co powinno znajdować się w każdej części wzorca i jaka jest ich rola. Zobaczymy jak je ze sobą połączyć i przedstawić dane w widoku przy pomocy Data Bindingu.

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

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

Zapraszamy!

Silverlight Center And Scale Behavior

2010-05-02T22:24:00.000+02:00

W ostatnim poście pisałem o tym jak wyśrodkować i skalować aplikację. Tym razem poszedłem o krok dalej i stworzyłem prosty behavior który z łatwością podłączymy do każdej aplikacji i nie musimy modyfikować istniejącego kodu.

Co należy zrobić?
1. Ściągnąć kod bahaviora: http://gallery.expression.microsoft.com/en-us/CenterAndScale
2. Podłączyć kod do aplikacji:

<usercontrol .....="" ....="" xmlns:behavior="clr-namespace:CenterAncScaleBehavior;assembly=CenterAncScaleBehavior" xmlns:interaction="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity">

    <interaction:interaction.behaviors>
        <behavior:centerancscalebehavior>
    </behavior:centerancscalebehavior>

    <grid> ... </grid>
</interaction:interaction.behaviors>
</usercontrol>

3. Gotowe. W 95% aplikacji powinno działać. :]

Jeżeli używacie Microsoft Expression Blend-a, wystarczy przeciągnąć klasę na aplikację (patrz video).

Prezentacja, a więc behavior w akcji (66 sekund)

Prosty przykład działania
Aplikacja bez behaviora: http://bit.ly/cVinEC
Aplikacja już z podłączonym bahaviorem: http://bit.ly/ba8UsI

Nie bangla?
Behavior powinień działać dla więkoszości aplikacji ale niekoniecznie dla wszystkich. Jeśli macie specyficzne ustawienia, stałe rozmiary dla UserControl itp., to bez zmian w aplikacji niestety skalowanie nie zadziała.

Pozdrawiam,
Jacek Ciereszko

Jak wyśrodkować i skalować aplikację przy użyciu ViewBox-a

2010-05-02T17:53:00.002+02:00

Istnieje wiele sposobów na skalowanie i wyśrodkowanie aplikacji Silverlight w przeglądarce. Zwykle używamy dwóch kontrolek typy Grid do pozycjonowania oraz panela (np. Canvy) do skalowania aplikacji.

Takie rozwiązanie może wyglądać np. tak:

<UserControl … >
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
            <Canvas x:Name="scalePanel" VerticalAlignment="Top" HorizontalAlignment="Center">
                …
            </Canvas>
        </Grid>
    </Grid>
</UserControl>

Zaprezentowany sposób przy odpowiednim dopieszczeniu działa bez zarzutów ale można prościej. Jak? Otóż używając kontrolki ViewBox która posiada wewnętrzne mechanizmy skalowania zawartości, a umieszczona w Gridzie, zapewni kompleksowe rozwiązanie.

Dobre rozwiązanie:

<UserControl … >
    <Grid x:Name="LayoutRoot" Background="White">
        <Viewbox>
            ...
        </Viewbox>
    </Grid>
</UserControl>

Jak znaleźć ViewBoxa?

Ci którzy używają Silverlight 4 posiadają kontrolkę ViewBox natywnie wbudowaną i dostępna w każdym typie aplikacji. Natomiast dla aplikacji które zostały stworzone w Silverlight 3, ViewBox jest dostępny w pakiecie Microsoft Silverlight Toolkit.

Demo

Stwórzmy prostą aplikację która będzie zawierać: przycisk, pole tekstowe oraz czerwony kwadrat. Aplikacja będzie posiadała także odpowiedni margines, w postaci: 100 od lewej, 50 od góry, 100 od prawej i 50 od dołu. Na początku aplikacja nie będzie ani skalowana, ani wyśrodkowana:

<UserControl … >
    <Grid x:Name="LayoutRoot">
        <Grid Margin="100, 50, 100, 20">
                <StackPanel Orientation="Horizontal">
                    <Button Width="100" Height="100" Content="test"/>
                    <TextBlock Text="Button" Width="100" Height="100" />
                    <Rectangle Width="100" Height="100" Fill="Red"/>
                </StackPanel>
        </Grid>
    </Grid> 
</UserControl>

Uruchom demo: RUN

Natomiast jeśli wprowadzimy drobną modyfikację i dodamy kontrolkę ViewBox, otrzymamy pożądany efekt.

<Grid x:Name="LayoutRoot">
        <Viewbox>
            <Grid Margin="100, 50, 100, 20">
                    <StackPanel Orientation="Horizontal">
                        <Button Width="100" Height="100" Content="test"/>
                        <TextBlock Text="bottom" Width="100" Height="100" />
                        <Rectangle Width="100" Height="100" Fill="Red"/>
                    </StackPanel>
            </Grid>
        </Viewbox>
    </Grid>

Uruchom demo: RUN (Zmień wielkość okna żeby zobaczyć skalowanie)
Link do źródeł: SilverlightCenterApplication.zip

References

ViewBox w Silverlight 3 http://silverlight.codeplex.com/

Jacek Ciereszko

Windows Phone 7 i PRISM [WSSG]

2010-04-08T23:17:00.000+02:00

Zapraszamy wszystkich chętnych na szóste spotkanie grupy Warsaw Silverlight Study Group (WSSG). Spotkanie rozpocznie się 13 kwietnia (wtorek), o godzinie 18:00 w siedzibie firmy Microsoft w Warszawie (al. Jerozolimskie 195A - zobacz na mapie).

Agenda spotkania:
18:00 – 19:20 Marcin Kruszyński: "Aplikacje Silverlight na Windows Phone 7";
19:20 – 19:40 Przerwa;
19:40 – 21:00 Jan Marowski: "Navigation Framework w Silverlight 3";

Wtorkowe spotkanie rozpoczniemy prezentacją Marcina Kruszyńskiego. Marcin na co dzień pracuje jako programista i architekt w centrum badawczo-rozwojowym w firmie Comarch, CTO sektora ERP. Interesuje się wieloma aspektami platformy .NET oraz specjalizuje w implementacji bogatych interfejsów graficznych aplikacji, w oparciu o WPF i Silverlight. Pasjonat nowych trendów i technologii. Zawodowo technologią Silverlight zajmuje się od połowy 2008 roku. Prowadził warsztaty z Silverlight w ramach KGD.NET w Krakowie.

Marcin opisał swoją sesję następująco: "Umiesz pisać aplikacje w Silverlight? A czy wiesz, że dysponując tą wiedzą możesz łatwo zacząć tworzyć rozwiązania na platformę Windows Phone 7? Hola! - zakrzykną sceptycy. Podobieństwo w tworzeniu aplikacji w oparciu o te same narzędzia, nie oznacza że aplikacje będą takie same! Tak, są różnice. Jakie? O tym opowiemy na prezentacji. Oprócz pewnych ograniczeń i zmian, postaramy się także przybliżyć nowe możliwości wynikające z funkcjonalności samego telefonu.".

Natomiast po przerwie gościć będziemy Jan Marowskiego. Jan opisał siebie następująco: "Na co dzień zajmuję się tworzeniem oprogramowania dla sektora bankowego, ubezpieczeniowego i telekomunikacyjnego w firmie Infovide-Matrix. Przygodę z Silverlightem rozpocząłem od wersji 2.0 preview 5. Od tego czasu starałem się z różnymi skutkami zainteresować Silverlightem osoby decyzyjne u mnie w firmie, co zaowocowało aktualnie prowadzonym przeze mnie projektem w Silverlight 3."

Jan w trakcie swojej prezentacji przedstawi nam mechanizmy Routingu w Silverlight. Będzie to przegląd standardowych mechanizmów, jak i możliwości jaki daje nam framework PRISM.

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

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

Zapraszamy!

Silverlight 4.0 RC

2010-03-15T20:01:00.000+01:00

Kilka godzin temu Microsoft wydał nową wersję Silverlighta 4.0 RC :)Wraz z nią pojawiło się także wiele nowości i ułatwień, których nie będę tutaj wymieniał bo jest ich zbyt wiele. Pozwolę sobie tylko polecić Wam bloga Tima Heuera (http://timheuer.com/blog/archive/2010/03/15/whats-new-in-silverlight-4-rc-mix10.aspx), a sam oddale się w zgłębiania tego co dostarczyła nam ta nowa wersja :)

PS. polecam zerknąć na Windows Mobile 7 ;)

Linki:

Piąte spotkanie Warsaw Silverlight Study Group (WSSG)

2010-03-03T21:49:00.000+01:00

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

Agenda spotkania:
18:00 – 19:20 Bartosz Pampuch: "Silverlight: Tips & Tricks czyli o czym warto wiedzieć, korzystając z Silverlight";
19:20 – 19:40 Przerwa;
19:40 – 21:00 Arkadiusz Wójcik: "Prezentacja narzędzi"RadControls for Silverlight" stworzonych przez firmę Telerik";

Spotkanie rozpoczniemy prezentacją Bartka. Bartek jest dyrektorem centrum badawczo-rozwojowego w firmie Comarch, CTO sektora ERP. Na co dzień kieruje zespołem badawczym rozwijającym platformę do budowy systemów w modelu SaaS oraz grupą realizującą nowoczesne interfejsy oparte o Silverlight i WPF. Jego zespół buduje również aplikacje na Microsoft Surface. Specjalizuje się m.in. w nowoczesnych metodykach prowadzenia projektów informatycznych oraz architekturach systemowych. Od 2007 r. – Microsoft MVP (pierwotnie w kategorii Visual Developer - Team System, aktualnie Visual Developer – Connected System).

Swoją sesję Bartek opisuje następująco: "Gdy zaczynałem zabawę z Silverlight (a wcześniej WPF), nurtowało mnie pytanie – jak zrealizować efekty znane z ekranów menu gier komputerowych. Domyślałem się, że jest to możliwe, choć początkowo zagadnienia te wydawały się trudne w realizacji. Z biegiem czasu poznałem sposoby budowy własnych paneli (w tym animowanych), metody szybszego i prostszego tworzenia animacji, oraz niuanse niektórych kontrolek. Aplikacje stały się znacznie atrakcyjniejsze. Gdy wydawało mi się, że umiem już sporo, zacząłem stosować wzorzec MVVM i nagle okazało się, że moja "wiedza" wywrócona została do góry nogami. Konieczne było wypracowanie nowych zasad połączenia ViewModeli z animacjami i samym Blendem. Po drodze sporo kłopotów sprawiły także Behaviors, problemy z samym Blendem, asynchroniczna natura Silverlight i niektóre błędy tej technologii. Było ciekawie :), a o tym czego się nauczyłem opowiem w trakcie sesji."

Po przerwie gościć będziemy Arka. Arek jest studentem IV-tego roku Informatyki na Politechnice Warszawskiej. W minione wakacje pracował w firmie Animation Project S.L. na Majorce jako programista ASP.NET oraz WPF. Po powrocie, przez ostatnie 5 miesięcy, współtworzył w technologii Silverlight portal do zarządzania portfelem inwestycyjnym z wykresami 3D.

Arek w swojej prezentacji przedstawi nam zestaw kontrolek firmy Telerik. Zaprezentuje nam najciekawsze z nich – między innymi wykresy 3D, mapa oraz symulacja "Książki". Ponadto nie zabraknie porównania do darmowych rozwiązań.

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

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

Zapraszam!

Czwarte spotkanie Warsaw Silverlight Study Group (WSSG)

2010-02-01T19:04:00.002+01:00

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

Agenda spotkania:
18:00 – 19:20 Robert Kosek: "Prototypowanie aplikacji za pomocą SketchFlow. Microsoft Expreession Studio. Tips&Tricks.";
19:20 – 19:40 Przerwa;
19:40 – 21:00 Tomasz Kustra: "Binding, Convertery oraz moja własna kontrolka w Silverlight 3.0 i 4.0";

Spotkanie w lutym rozpocznie Robert Kosek. Robert na co dzień pracuje w firmie Datapolis.com na stanowisku RIA Designer/Developer gdzie zajmuje się rozwiązaniami opartymi o technologie Microsoft(.NET/Sharepoint). W trakcie swojej prezentacji przedstawi nam pakiet Microsoft Expression z szczególnym nastawieniem na SketchFlow. Dodatkowo całość będzie uświetniona zestawem ciekawych Tips&Tricków w Silverlightcie.

Po przerwie gościć będziemy Tomasza Kustrę, osobę z 20 letnim doświadczeniem w IT, pracownika firmy CC Sp. z o.o. Warszawa. Tomasz przez lata pracował na różnych stanowiskach i zebrał niesamowity bagaż doświadczeń którymi chętnie podzieli się z nami w czasie prezentacji. Tomasz opowie nam o Bindingu w Silverlight i wszystkich aspektach z tym związanych. Zobaczymy jak powinno się tworzyć Convertery, a także walidować, grupować oraz filtrować dane. Tomasz pokaże także jak stworzyć swoją własną kontrolkę oraz wszelkiego rodzaju Property które pozwolą na swobodne jej używanie w kodzie XAML.

Strona spotkania: http://ms-groups.pl/wssg/4_spotkanie/
Udział w spotkaniu jest bezpłatny. Wskazana rejestracja (tutorial do rejestracji).

Zapraszam!

Trzecie spotkanie grupy Warsaw Silverlight Study Group (WSSG).

2009-11-30T22:03:00.000+01:00

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

2009-11-18T23:48:00.006+01:00

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)

2009-11-09T22:22:00.005+01:00

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

2009-10-24T22:17:00.003+02:00

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)

2009-10-03T01:15:00.004+02:00

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:

Uroczyste powitanie nowych członków w nowej grupie;
Następnie Bartłomiej Zass opowie nam o nowościach w Silverlight 3.0;
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ść.

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.
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)

2009-10-02T22:37:00.006+02:00

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

2009-09-28T02:24:00.005+02:00

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)

2009-09-21T01:33:00.003+02:00

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?

2009-08-21T01:10:00.007+02:00

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

Pozdrawiam,

Jacek Ciereszko

Bloggers Underground #2.5

2009-08-16T13:08:00.005+02:00

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?

2009-07-11T15:48:00.006+02:00

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..

2009-06-22T20:34:00.005+02:00

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.

Do MTS 2009 zostąło..

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

2009-06-01T00:01:00.004+02:00

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?

2009-05-25T23:43:00.013+02:00

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

2009-05-21T23:57:00.005+02:00

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:

Przede wszystkim zainstalować Visual Studio 2010 (obecnie Beta 1)
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.
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ć.
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

Imagine Cup 2009 – relacja uczestnika

2009-05-18T00:03:00.006+02:00

W tym roku po raz pierwszy zdecydowałem się wziąć udział w konkursie ImagineCup 2009 w kategorii "Projektowanie oprogramowania". Konkurs w Polsce dobiegł końca, nagrody rozdane, zwycięzcy wybrani, w związku z tym czas na małe podsumowanie całej imprezy.

Mówiąc w skrócie, konkurs polega na stworzeniu ciekawej aplikacji która oprócz swojej innowacyjności ma uratować świat - przynajmniej takie jest założenie :). Uczestnicy mieli za zadanie zmierzyć się z celami ustalonymi przez ONZ, a było to 8 celów milenijnych (Milenijne Cele Rozwoju), a hasło przewodnie konkursu brzmiało "Wyobraź sobie świat, w którym technologia pomaga rozwiązać najtrudniejsze problemy ludzkości".

Nie chciałbym opisywać idei imprezy ponieważ więcej i lepiej możemy znaleźć w Internecie, dlatego po więcej szczegółów odsyłam na strony: imaginecup.pl, imaginecup.com, Interia, WSS, IWP, IWP2 , a sam skupie się na własnej relacji :]

Zmagania drużyny RHEA

Jak się zapewne domyślanie, drużyna do której mam zaszczyt należeć nazywa się RHEA i reprezentuje Politechnikę Białostocką. W skład drużyny wchodzą:

Agata Grzybek, Joanna Wacław, Arkadiusz Kondratiuk oraz ja – Jacek Ciereszko.

Naszym mentorem był Marcin Bartoszuk, a super grafikiem Krystian Karpiuk.

Nasza przygoda z imagine cup rozpoczęła się w listopadzie gdzie przypadkowy pomysł przeniesienia siatek centylowych do sprawdzania stanu rozwoju dziecka do świata elektronicznego, stał się czymś więcej niż tylko pomysłem i zwykłym projektem na uczelni. Do początku grudnia skompletowaliśmy drużynę, mentora oraz grafika i maszyna ruszyła!

Na początku, gdy terminy były jeszcze bardzo daleko, robota szła bardzo powoli, a leniwe święta wcale nam nie pomagały. Na szczęście pierwszy termin oddania zarysu pomysły na tworzoną aplikację mijał 19 stycznia, co zmusiło nas już do mobilizacji. W tym momencie mieliśmy także zrobiony klikalny prototyp aplikacji desktopowej z ustaloną zawartością ekranów oraz ich kolejnością.

Po 19 stycznia

Mimo wykorzystywania oszacowań na podstawie liczby i stopnia skomplikowalności przypadków użycia (tak tak, robiliśmy doce!) mieliśmy już bardzo mało czasu, a przerwa wymuszona przez sesje na studiach przerwała nam prace na kolejne 2 tygodnie.

Po sesji i feriach, wreszcie udało się zorganizować repozytorium kodu w postaci TFS, zakończyć wszystkie wymagane PoC (Proof Of Concept) i rozpocząć implementowanie! W sumie kodowanie według ustalonego harmonogramu oraz sporządzonych ekranów rozpoczęliśmy od początku marca. Prace developerski staraliśmy się prowadzić według założeń SCRUMa, organizując co dzienne spotkania (scrum meeting) późno wieczorem, które raczej kończyły się wymianą emaila, niż rozmową, jednak mimo to bardzo dobrze się sprawdzały.

Marzec osobiście wspominam jako wyjęty z życia, wszyscy wyrabialiśmy drugi etat (niektórzy po pracy). Ja osobiście zerwałem wszystkie nocki od początku marca aż do 8 kwietnia, z wyjątkiem 13.05 kiedy miałem imprezę ;) .

To czym mogę pochwalić się w przy okazji developmentu, to że mieliśmy przygotowaną dobrą architekturę w postaci prostego rozwarstwienia oraz użytego patternu MVVM. Napisałem dobrą, ponieważ ten zestaw doskonale się sprawdził do naszych potrzeb. Szybka rzeźba w kodzie utrudniała by nam pracę w późniejszych etapach, a z drugiej strony rzucenie się na np. PRISM było by czymś na wyrost.

Warstwę dostępu do danych załatwiliśmy prawie w 100% poprzez LINQtoSQL, a prezentacji przy użyciu MVVM. To co mogę powiedzieć na temat tego ostatniego, to jedno wielkie POLECAM! Pomimo dodatkowego narzutu pracy, zyski w postaci separacji "logiki widoku" od samego widoku są niesamowite. Ułatwiły stworzenie testów, wprowadzanie zmian w kodzie oraz reużywalność niektórych elementów, po prostu cudo! :)

Tak stworzona architektura oraz wcześniej zaplanowane ekrany, usystematyzowały naszą pracę i pozwoliły szacować potrzebny czas. Ten model pracy okazał się skuteczny i godny polecenia.

Działającą aplikację wraz ze screencastem oddaliśmy 8 kwietnia, czyli w dzień deadline-u. Sam screencast nagrywaliśmy 2 dni, a ostatnie zmiany w aplikacji były robione jeszcze rano ;)

Ponieważ 28 kwietnia było dopiero ogłoszenie listy finalistów, wszyscy zrobiliśmy sobie przerwę. Dziewczyny z drużyny spędziły je na nadgonieniu zaległych projektów, a ja wyczekiwałem wyników.

Po 28 kwietnia

Rezultat był niespodziewany, ponieważ dostaliśmy się do pierwszej dziesiątki!! Maszyna znowu ruszyła. Odgrzebaliśmy kod w którym na szczęście oprócz kliku drobiazgów nie musieliśmy za dużo zmieniać. Kod trafił na nasz wewnętrzny UAT oraz testy HCI. W miedzy czasie przygotowywaliśmy się do sesji plakatowej i ewentualnej prezentacji. Swoją drogą jest to duży minus całego konkursu że wszyscy przygotowują prezentację ale tylko połowa ma później szanse ją wygłosić. Trochę to nie w porządku że ludzie uczą się czegoś na marne.

12 maj - półfinały

To już dziś, dzień sesji plakatowej. Specjalnie na tą okazję udało nam się wypożyczyć od firmy Hewlett-Packard specjalny komputer HP TouchSmart IQ500 z ekranem dotykowym za co bardzo dziękujemy!!

Spakowaliśmy cały sprzęt i przybyliśmy na finały. Sędziowie chodzili po stoiskach od 14:00, dlatego też wszyscy zjawili się około 12:00 żeby się przygotować. Nasze stoisko oprócz zgromadzonego sprzętu oraz kilku rekwizytów nie miało żadnych rzutników, plakatów i innych urządzeń ale mimo to chyba nie wyglądało źle :)

Sędziowie chodzili w grupach po 2 i 3 osoby i dla każdej drużyny mieli max 30 minut na zapoznanie się z systemem. W tym czasie każda z drużyn bombardowała ich przemówieniami, pokazami, ulotkami, a nawet słodyczami :P

My osobiście wszystkich sędziów wspominamy bardzo dobrze, żaden nie powiedział nam żeby coś mu się nie spodobało, panowała pełna kultura i w żaden sposób nie przypomniało to telewizyjnych programów "IDOL" czy też "Mam Talent".

Całość zakończyła się lekko po 19:00, kiedy to spakowaliśmy nasze rzeczy i udaliśmy się czym prędzej do domu w celu przygotowań do ewentualnej prezentacji. Tu kluczowy okazał się TIGER który po całym dniu wrażeń i stresu postawił nas na nogi.

13 maj –finały imagine cup 2009

Ten dzień zapamiętałem jako wyjątkowo nerwowy. Rano szybko powtórzyliśmy prezentację i udaliśmy się na ogłoszenie wyników. Na miejscu było już dużo ludzi więc po cichu usiedliśmy sobie gdzieś z brzegu i czekaliśmy na wyniki.

Po krótkim wstępie wyczytano 5 finałowych drużyn: Demoscene Spirit, FTeamS, kAMUflage, NosoiFighters oraz naszą RHEA.

Radość była ogromna. Nie wiedzieliśmy czego się spodziewać, więc wynik był bardzo miłą niespodzianką.

Po chwili niepewności związanej z kolejnością prezentacji, udaliśmy się na dalsze przygotowania. Jak się okazało, mamy numer 4 i będziemy mieli swój pokaz od razu po przerwie kawowej. Pozostały czas przeznaczyliśmy na kolejne przygotowania.

Wybiła 12:45, czyli czas występu. Oczywiście jak na złość Internet nie działał, ale mieliśmy plan B na takie okoliczności w postaci komórki :] Kiedy wszyscy goście wrócili z przerwy, rozpoczęliśmy. Pomimo tremy i małej wpadki w tekście, prezentacja przebiegła raczej pomyślnie (czekamy na nagranie z IPW). Po prezentacji było forum przedsiębiorczości, a myśmy udali się na mały obiadek.

Wyniki! Wyniki były ogłaszane powoli, co dodatkowo zwiększyło stres. No i stało się, zostaliśmy wyczytani jako drużyna która zajmie 4 miejsce razem z drużyną FTeams. Trzecie miejsce zajęła drużyna NosoiFighters, drugie Kamuflage, a pierwsze DemoScene. Jak to mówią "Winner Take All" i także tym razem tak było, jednak mimo to nie zabrało nam to radości z tego co udało nam się dokonać do tej pory. Dostarczone aplikację były na bardzo wysokim poziomie i mam nadzieję że DemoScene w tym roku sięgnie także pierwszego miejsca w Egipcie! Był by to bardzo miły akcent przed przyszłorocznymi światowymi finałami ImagineCup 2010 które mają odbyć się właśnie w Polsce.

Wieczorem Microsoft ugościł wszystkich miłą imprezką integracyjną na której to rzeczywiście poznałem mnóstwo ludzi oraz miałem okazję porozmawiać z tymi których widuje na co dzień na forach codeguru itp.

Podsumowanie

Podsumowując, cieszę się że wziąłem udział w tym konkursie. Może i nie zajęliśmy miejsca na podium ale tworząc nasz system, w bardzo krótkim czasie przerobiliśmy tyle technologii i nauczyliśmy się tak wiele, że zdobyta wiedza jest bezcenna, a korzyści z jej płynące będą długotrwałe. Sam bardzo chciałem zrobić coś większego w WPF, tutaj miałem doskonałą motywację i się udało. Oprócz tego, używaliśmy między innymi: Silverlight 3.0 Beta 1, PEX, MVVM, LINQtoSQL, MS SQL Server, TFS, Windows Mobile, WCF, Silverlight Virtual Earth Map Control, Mashup, czytniki linii papilarnych itd., wszystkie te i nie tylko technologie otrzymaliśmy w skondensowanej dawce w ciągu kilku miesięcy i mogę się założyć że gdyby nie ImagineCup, zapewne nie sięgnęlibyśmy po nie jeszcze długo (no może oprócz Silverlight 3 :P ).

Chciałem także tak na samym końcu pogratulować organizatorom ImaineCup 2009. To nie był mój pierwszy konkurs w którym brałem udział, ale na pewno był to konkurs najlepiej zorganizowany. Zarówna cała impreza jak i wsparcie było bardzo dobrze przemyślane. Organizatorzy, tu szczególnie należy wymienić Piotra Kramka, odpowiadali na każde zapytanie, bardzo często wieczorami i w weekendy, w godzinach w których powinni mieć wolne, oni czuwali aby każdy był poinformowany i każdy wiedział co się dzieje. Liczne spotkania, livemeeting-i oraz emaile usprawniły cały proces, za co należy się duże podziękowanie organizatorom!

Wybrane linki o ImagineCup

Pozdrawiam,

Jacek Ciereszko

Silverlight Count Down Control – Wasze dni są policzone

2009-04-26T22:42:00.005+02:00

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:

Pobrać bibliotekę kontrolki (SilverlightCountDownTimer.dll) ze strony http://silverlightgadgets.codeplex.com/,
Dołączyć ją do rozwijanego projektu (Add References),
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