poniedziałek, 20 lutego 2012

Windows 8 Metro na żywo, ale w Internecie - odc. 1

Aby nabrać praktycznego doświadczenia w pisaniu aplikacji Metro na Windows 8, postanowiłem napisać sobie taką jedną dla siebie od początku do końca w celach rekreacyjno-edukacyjnych. Bedę rozwijać jej funkcjonalności w poszczególnych krokach, co przełoży się na nową serię postów, w których będę dzielił się różnymi ciekawymi informacjami. Ponieważ pomysłów na funkcjonalności mam bardzo dużo, ta seria - o ile czas pozwoli - może mieć bardzo duuuużo odcinków –;)

Swoją pierwszą aplikację piszę sobie w XAML-u i C#, ponieważ te technologie po Silverlight i WPF najbardziej mi są znane. Aczkolwiek - w miarę podnoszenia swojej wiedzy z HTML5, być może w przyszłości napiszę sobie drugą aplikację Metro w technologiach HTML5 i JS.

Aplikacja ma być najprostsza z możliwych i ma umożliwiać mi oglądanie off-line klipów z YouTube (jest kilka takich aplikacji w Marketplace dla Windows Phone 7) . Nie chcę w tym celu opuszczać trybu Metro. W pierwszym kroku postanowiłem zaprojektować sobie z grubsza interfejs użytkownika.

Strona startowa:

mks_05_C

Pełna kolekcja klipów (z semantycznym zoom):

mks_04_C

mks_03_C

Dodawanie nowych pozycji:

mks_01_C

Praktyczne wrażenia i uwagi:

  • Szkoda, że obecna wersja Expression Blend 5 Preview nie wspiera jeszcze XAML-a i C#.  Edytowanie XAML-a, zwłaszcza szablonów w Visual Studio 11 Preview po pracy w Blend 4 i Silverlight wydaje się męczące (mimo częściowej inkorporacji interfejsu Blenda w tej wersji VS). Brakuje mi też m.in znanych z Blenda behaviorów i wygodnych narzędzi do tworzenia przykładowych danych.
  • INotifyPropertyChanged - obecnie są dwa, należy używać tego z przestrzeni Windows.UI.Xaml.Data, jest kwestia związana z nieużytecznością ObservableCollection, ale na razie na tym etapie nie potrzebowałem kolekcji tego rodzaju
  • Nawigacja - jest to, czego brakowało w Silverlight jest w Windows 8.  Dzięki Frame.Navigate(nazwa typu) możemy nawigować ze wskazaniem typu.
  • Własne przestrzenie nazw w XAML w Windows 8 zaczynają się od słowa using np xmlns:Local="using:MyTube", na razie użyłem ich do własnego konwertera i itemtemplateselector’a (przy próbie stworzenia własnej kontrolki pojawiają się pewne problemy, ale na tym etapie nie potrzebowałem jej tworzyć)
  • Data binding - nie ma pewnych ustawień znanych z Silverlight 4 i Silverlight 5, np. formatowania (dla sformatowania daty użyłem jak za czasów Silverlight 3 własnego konwertera)
  • Konwerter - typy do metod przekazywane są w formie stringów, podobnie zresztą jak we Frame.Navigate
  • Segoe UI Symbol - to klucz do szybkiego uzyskania sporej części różnych przydatnych symboli m.in na przyciskach paska aplikacji
  • GridView i JumpViewer - za pomocą tych nowych kontrolek prezentuję kolekcje z grupowaniem i semantycznym zoom (w listach działają też predefiniowane animacje)
  • Stylowanie - jak zmienić domyślny szablon kontrolki? W obecnie dostarczonych narzędziach i z Windows 8 Developer Preview nie jest to oczywiste pytanie. Nie natrafiłem na opis miejsca, gdzie się znajdują, wszyscy odsyłają jedynie do przykładu Microsoft. Można znaleźć w nim dwa XAML-e ze ciemnym i jasnym tematem. Pomogło mi to szybko zmienić wygląd kontrolki ProgressBar z domyślnego na żółty pasek. Ale czasami i ten przykład nie zawsze jest pomocny. Otóż chciałem zmienić obramowanie zaznaczonego elementu ListViewItem w GridView z domyślnego niebieskiego na żółty i znak “check” z białego na czarny. I zajęło mi to … kilka dni. Fora internetowe nic nie pomogły, ludzie jedynie opisywali ten sam problem, aż w końcu skojarzyłem sobie, że na jednej prezentacji na BUILD było pokazywane miejsce na dysku, gdzie są fizycznie wgrywane aplikacje Metro. Idąc tym tropem odszukałem, która z wgranych przykładowych aplikacji miała ostylowane obramowanie w ListViewItem w innym niż standardowym kolorze i wykorzystałem z niej odpowiedni fragment XAML-a i zadziałało! (BTW w Windows 8 resources są przechowywane poza assemblies i w miejscu wgrania aplikacji leżą sobie luźno jej wszystkie pliki z XAML)
  • Rating - taka kontrolka jest w Windows 8, tyle że na razie jedynie wyłącznie w WinJS, pod C# jej nie ma! Tutaj na szybkie potrzeby użyłem zwykłego TextBlock i napisu w Segoe UI Symbol.
  • Implicit Data Templates - nie ma ich na razie w Windows 8 (są tylko implicit control templates). Nie ma też gotowych behaviorów, triggerów, więc skorzystałem template selectora.

Prezentowane na screenshotach ekrany zawierają na razie statyczne przykładowe dane. W następnym krokach będę chciał listy zasilać prawdziwymi danymi, z czym będzie wiązało się kilka technicznych zagadnień.

c.d.n

piątek, 3 lutego 2012

Windows Phone 8 / Apollo - informacje z przecieku w dużej mierze potwierdzonego

Na początek 2 linki:

Potwierdzone przez P. Thurrot’a zapowiedzi:

  • monitorowanie kosztów połączenia i sposobu używania łącza mobilnego, wykrywanie hot-spotów dostawców Internetu (rzecz znana z Windows 8)
  • komunikacja między aplikacjami za pomocą kontraktów (rzecz znana z Windows 8)
  • Internet Explorer 10 Mobile
  • współdzielenie komponentów z Windows 8: jądro (bez łamania kompatybilności dla aplikacji), wsparcie dla wielu rdzeni, obsługa sensorów, model bezpieczeństwa, sieć, technologie grafiki i video
  • user experience bardzo podobny do Windows 8
  • aplikacja Skype
  • NFC: wymiana danych, także przez zetknięcie urządzeń (rzecz znana z Windows 8) i płatności zbliżeniowe
  • nowe API dla kamery, możliwości pisania rozszerzeń, przez ich producentów i nie tylko
  • możliwość dystrybucji aplikacji biznesowych kanałami prywatnymi (podobnie jak w Windows 8)

Inne zapowiedzi:

  • otwarcie się na większe zróżnicowanie sprzętu i różne rozdzielczości ekranów
  • obsługa kart microSD
  • możliwość pisania natywnych aplikacji (również kojarzy się z Windows 8, aczkolwiek powstaje pytanie, czy byłoby to “doklejenie” czegoś nowego do Silverlight i XNA, czy też raczej coś na kształt WinRT, zauważmy, że nikt na razie nie wspomniał  o HTML5)
  • synchronizacja z Windows 8 i XBOX-em
  • aplikacja Skype zintegrowana ściśle z systemem operacyjnym, by upodobnić jego obsługę do prowadzenia zwykłych rozmów telefonicznych
  • proxy serwer dla stron IE10

Wydaje mi się, że każda z tych zapowiedzi brzmi prawdopodobnie zważywszy na zdanie na blogu teamu Windows Phone w czasie BUILD’a na temat Windows Phone Runtime i planowanego upodobnienia API do Windows 8. Ile z tych informacji okaże się prawdą czas pokaże. Pamiętajmy, że ostatnio wiele pogłosek się sprawdzało -:)

Windows 8 z … klawiaturą i myszką

Pogłoski głoszą, że beta Windows 8 nie będzie nazwana “Windows 8 Beta”. Wszystko na to wskazuje, że wydanie jest opatrzone nazwą “Windows 8 Consumer Preview”. Media wskazują tu na zgodność z nowym, innym niż wcześniej nazewnictwem lub możliwością zostawienia sobie furtki w dodaniu nowych funkcjonalności (przyjęło się, że wydania po becie takich nie zawierają). Czas pokaże, czy to tylko zmiana nazwy, czy było w tym jakieś drugie dno.

A teraz coś dla osób nieposiadających ekranów dotykowych czy urządzeń typu slate. Zebrałem niektóre opisane w Internecie skróty klawiszowe lub kombinacje myszy z klawiaturą będące alternatywą dla gestów na dotykowym ekranie.

Pasek Charms

  • Wyświetlenie paska: WINKEY + C lub najechanie myszą na prawy róg ekranu (dolny lub górny, wyświetlają przyciski bez tła, po przejechaniu w obszarze paska pojawia się czarne tło)
  • Search charm: WINKEY + Q
  • Share charm: WINKEY + H
  • Settings charm: WINKEY + I

win8cp_1

Wyświetlenie paska aplikacji

  • WINKEY + Z
  • kliknięcie w prawy przycisk myszy

win8cp_2

Przełączanie między aplikacjami

  • pokazanie miniatury ostatnio używanej aplikacji: najechanie myszą w lewy róg ekranu (dolny lub górny), pokaże się miniatura, którą możemy przeciągnąć
  • pokazanie więcej aplikacji: przesuwanie kółkiem myszy powodujące zmianę wyświetlanej miniatury
  • wyświetlenie w trybie pełnoekranowym lub pełnowymiarowym (przy dzielonym ekranie): kliknięcie w miniaturę
  • przełączanie między wszystkimi aplikacjami: ALT + TAB

win8cp_3

Snapping aplikacji

  • chwycenie miniatury aplikacji i przesunięcie jej w odpowiedni obszar ekranu
  • chwytanie paska podziału ekranu i przesuwanie
  • chwycenie za górną krawędź aplikacji (pojawia się rączka) i przesunięcie jej w odpowiedni obszar ekranu

win8cp_4

win8cp_5

Optyczny zoom / semantyczny zoom

  • Powiększanie:  CRTL + znak plus lub CTRL + kółko myszy do przodu
  • Pomniejszanie: CTRL + znak minus lub CTRL + kółko myszy do tyłu

win8cp_7

win8cp_6

Odblokowanie ekranu

  • ruch myszą do góry
  • dwukrotne naciśnięcie myszy
  • naciśnięcie dowolnego klawisza w klawiaturze

To nie wszystko. Istnieją np. skróty klawiaturowe do szybkiej nawigacji po ekranie Start.

Tak więc niekoniecznie trzeba posiadać dotykowy tablet, by móc używać w codziennej pracy innowacji wprowadzonych w Windows 8 (natomiast z pewnością najbardziej naturalnym sposobem są gesty na ekranie dotykowym). W rozważaniach pominąłem symulator dostarczany wraz Visual Studio, który posiada emulację dotyku, w tym gestów multi-touch (do zoom-a i obrotów wykorzystywany jest przycisk i kółko myszy).