Artykuł
10/12/2011

Surface 2.0 SDK – Wprowadzenie

Autor: Tomasz Kowalczyk

Opublikowano: 2011-09-28

Microsoft Surface 2.0 SDK pozwala w łatwy i szybki sposób tworzyć aplikacje sterowane dotykiem. Projektując aplikacje, korzystające z Surface 2.0 SDK, zostają zniesione wszelkie bariery pomiędzy użytkownikiem a oprogramowaniem. Tworzone programy stają się przez to bardziej intuicyjne w obsłudze oraz ergonomiczne, co niezaprzeczalnie pozytywnie wpływa na UX aplikacji oraz wyniki firmy.

W tym artykule zostały zawarte informacje o:

wymaganiach i poprawnej instalacji Surface 2.0 SDK,
wykorzystaniu narzędzi, zawartych w Surface 2.0 SDK,
utworzeniu pierwszego projektu,

Wprowadzenie

Platforma Surface jest idealnym rozwiązaniem w przypadku, gdy kilku użytkowników ma potrzebę interakcji z oprogramowaniem, zainstalowanym na jednym urządzeniu. Wsparcie dla urządzeń wielodotykowych w Surface 2.0 SDK w pełni pozwala na realizację takich systemów.

Główne usprawnienia, zawarte w Surface 2.0 SDK, sięgają od kwestii technicznych, związanych ze sprzętem, aż po oprogramowanie administracyjne, dołączone do SDK:

sprzęt, na którym zadziała oprogramowanie, posiada nowoczesną cienką obudowę,
rozdzielczość Full HD zapewnia wysoki komfort użytkowania,
dzięki technologii PixelSense, oprogramowanie jest w stanie reagować zarówno na dotyk jak i na obiekty rzeczywiste umieszczone na ekranie,
brak wymogu korzystania z myszki i klawiatury dzięki wykorzystaniu technologii Windows Touch;
nowoczesne kontrolki, które pozwolą programistom w pełni wykorzystać potencjał urządzeń dotykowych,
łatwa zdalna administracja dzięki wykorzystaniu Windows PowerShell.

Wymienione powyżej cechy platformy Surface pozwalają na zastosowanie technologii w dowolnej organizacji, gdzie funkcjonalność oprogramowania ograniczona jest jedynie wyobraźnią projektantów.

Przygotowanie środowiska

Wymagane oprogramowanie

Aby poprawnie korzystać z bibliotek Surface 2.0 SDK, należy dysponować następującym oprogramowaniem:

Windows 7 (wersja 32bit lub 64bit),
Microsoft Visual Studio 2010 lub Microsoft Visual C# 2010 Express Edition,
.NET Framework 4.0,
Microsoft XNA® Framework Redistributable 4.0,
(opcjonalnie) Microsoft Expression Blend 4, umożliwiający edycję plików XAML, definiujących interfejs użytkownika.

Surface 2.0 SDK zawiera w sobie kontrolki, API, przykłady kodów źródłowych oraz dokumentację do tworzenia aplikacji, korzystających z PixelSense. Ponadto Surface 2.0 SDK Microsoft Input Simulator pozwala na testowanie aplikacji na komputerach, które nie posiadają ekranów dotykowych.

Instalacja

Przede wszystkim należy pobrać Microsoft Surface 2.0 SDK and Runtime. Następnie zainstalować SDK poprzez dwukrotne kliknięcie na plik instalatora (SurfaceSDK.msi). Po poprawnie przeprowadzonej instalacji SDK, należy przejść do instalacji Surface 2.0 Runtime ponownie dwukrotnie klikając na plik instalatora (SurfaceRuntime.msi).

Informacja

Przed rozpoczęciem pracy z Surface 2.0 SDK warto również zapoznać się materiałami, dotyczącymi możliwości instalowanego oprogramowania:

Użytkowanie

Po zainstalowaniu pobranego oprogramowania warto odnotować, jakie zmiany i jakie dodatkowe oprogramowanie pojawiło się w systemie. Przede wszystkim po instalacji pojawi się katalog Microsoft Surface 2.0 SDK, dostępny w menu Start i widoczny na Rys. 1.

Rys. 1. Nowy katalog po instalacji SDK.

Umożliwia on dostęp do pomocy, notatek dotyczących zmian w kolejnych wersjach bibliotek, przykładowych kodów źródłowych, dokumentacji i narzędzi.

Przykładowe kody źródłowe Surface 2.0 SDK

Kody źródłowe, dołączone do SDK, stanowią nieocenione źródło wiedzy dla każdego, kto rozpoczyna przygodę z projektowaniem aplikacji, korzystających z możliwości urządzeń dotykowych. Warto jest rozpakować dostarczone przykłady aplikacji.

W tym celu należy wybrać folder Surface Samples. Po otwarciu tego katalogu widoczne jest archiwum o nazwie Surface Code Samples.zip, które się w nim znajduje. W kolejnym kroku należy rozpakować archiwum (przykładowo w lokalizacji D:\SurfacePrzyklady). Następnie otworzyć utworzony tam katalog SDKSamples, w którym to znajduje się plik solucji SDKSamples.sln.

Następnie, po uruchomieniu pliku projektu (SDKSamples.sln), w środowisku Visual Studio 2010, istnieje możliwość skompilowania jednej z 14 aplikacji. Warto również przeanalizować sposób wykonania każdego z programów, co zdecydowanie ułatwi późniejsze tworzenie własnych aplikacji. Zbiór przykładowych kodów źródłowych, uruchomionych w środowisku Visual Studio 2010, przedstawia Rys. 2.

Rys. 2. Kody źródłowe, dostarczone razem z SDK.

Aby uruchomić daną aplikację, znajdującą się w repozytorium projektu, należy prawym przyciskiem myszy wybrać jej nazwę, następnie kliknąć na Set as Startup Project i uruchomić program. Testowanie tak uruchomionej aplikacji może odbywać się za pomocą standardowego komputera z podłączoną myszką lub wyposażonego w ekran dotykowy.

Narzędzia dołączone do Surface 2.0 SDK

W katalogu Tools znajdują się trzy programy narzędziowe, ułatwiające tworzenie, testowanie i debugowanie aplikacji, opartych o Surface 2.0 SDK.

Input Simulator – pozwala emulować ekran dotykowy.

Przekształca interfejs użytkownika na zgodny z Microsoft Surface, umożliwia testowanie i debugowanie aplikacji za pomocą m.in. zaznaczania obszaru (1), symulowania dotknięcia palcem (2), przyciśnięcia ekranu w danym punkcie (3), czyszczenia ekranu (4), tagowania (5), zmiany orientacji ekranu (6). Kiedy aplikacja zostanie uruchomiona w tym narzędziu, zostanie wyświetlona dokładnie w taki sposób, jak na dedykowanym urządzeniu. Okno narzędzia Input Simulator przedstawia Rys. 3.

Rys. 3. Okno narzędzia Input Simulator.

Tego narzędzia można użyć, aby ocenić, w jaki sposób aplikacja będzie odpowiadała na zachowania użytkownika.

Input Visualizer – wizualizuje przemieszczanie się obiektów po ekranie.

Za pomocą tego narzędzia programista jest w stanie śledzić ścieżkę ruchu obiektu po ekranie (1). Warto go używać na etapie testowania aplikacji. Narzędzie to przyda się w momencie reakcji na przypadkowy kontakt urządzenia z użytkownikiem (poprzez np. przypadkowe dotknięcie ekranu łokciem), pozwala również śledzić ruch kontrolki lub obiektu po ekranie (2) – (opcja – Trails On). Program ten wyświetla również położenie ekranu (3) – (opcję tą można ustawić w programie Input Simulator). Okno narzędzia Input Visualizer przedstawia Rys. 4..

Rys. 4. Okno narzędzia Input Visualizer

Surface Stress – pozwala sprawdzić działanie aplikacji pod kątem wrażliwości jej użytkowania.

Narzędzie to warto wykorzystać, aby przekonać się o stabilności projektowanej aplikacji. Potrafi ono symulować i generować określoną liczbę „dotknięć” czyli kontaktów użytkownika z aplikacją w losowy sposób. Program ten jest aplikacją konsolową, którą możemy uruchomić ze zdefiniowanymi parametrami lub przeprowadzić po prostu losowy test. Okno programu Surface Stress przedstawia Rys. 5..

Rys. 5. Okno narzędzia Surface Stress.

Tworzenie projektu

Po uruchomieniu środowiska Visual Studio 2010, należy wybrać opcję File, a następnie New i Project. Z kolumny, znajdującej się po lewej stronie, należy wybrać Surface, a następnie określić, z jakich bibliotek aplikacja będzie korzystać (do wyboru WPF i XNA). W tym artykule do pierwszej aplikacji będzie wykorzystywany WPF.

Informacja

Wszystkie kody źródłowe projektów, utworzonych w ramach artykułów, będą dostępne na tej stronie.

Zapoznanie się z projektem oraz plikami, które się na niego składają pozwala zrozumieć, iż projekt ten niewiele różni się od standardowej aplikacji WPF. Dostępny jest tu również katalog Resources, typowy dla aplikacji WPF dokument .xml, zamiast pliku MainPage.xaml można zobaczyć, że Visual Studio 2010 wygenerowało plik SurfaceWindow1.xaml. Te wszystkie podobieństwa mają na celu ułatwienie użytkownikom tworzenia aplikacji, zgodnych z platformą Surface,.

Pomimo wielu podobieństw do aplikacji, korzystających tylko z WPF, pisanie aplikacji na platformę Surface posiada również pewne różnice. Pierwszą, którą da się dostrzec, jest zdecydowanie blok Surface Controls, który znajduje się w panelu Toolbox. Zawiera on szereg kontrolek, dedykowanych dla aplikacji wielodotykowych, działających w oparciu o wykorzystanie Surface 2.0 SDK.

Aplikacja, która zostanie wykonana na potrzeby tego artykułu będzie prosta, wykorzystana będzie w niej jedna kontrolka Surface (SurfaceInkCanvas). Program ten będzie pozwalał na rysowanie białego śladu, po dotknięciu ekranu przez użytkownika lub testując aplikacje na komputerze, bez dotykowego ekranu, po naciśnięciu lewego przycisku myszy i przeciągnięciu kursora po ekranie.

Aby to osiągnąć należy wykonać następujące czynności:

Wybrać z bloku Surface Controls kontrolkę SurfaceInkCanvas i metodą przeciągnij – upuść umieścić ją w oknie pliku SurfaceWindow1.xaml, który to jest standardowo otwierany po założeniu nowego projektu dla Surface. Operacja ta została zobrazowana na Rys. 6.

Rys. 6 Tworzenie projektu

Następnie należy w pliku SurfaceWindow1.xaml dodać dodatkowy atrybut kontrolce SurfaceInkCanvas, który pozwoli na rysowanie białej linii w momencie poruszania palcem lub kursorem po ekranie.

Opisaną czynność realizuje poniższy kod:

<s:SurfaceInkCanvas HorizontalAlignment="Stretch" Name="surfaceInkCanvas1" VerticalAlignment="Stretch">
            <s:SurfaceInkCanvas.DefaultDrawingAttributes>
                <DrawingAttributes Color="#FF808080"/>
            </s:SurfaceInkCanvas.DefaultDrawingAttributes>
</s:SurfaceInkCanvas>

Powyższy kod w postaci tagów, tworzy obszar, na którym ruchy palcem lub kursorem przez użytkownika są rejestrowane, a następnie ścieżka ich ruchu jest oznaczona białym kolorem.

Po uruchomieniu programu warto go przetestować i przyjrzeć się, jak funkcjonuje pierwszy program przygotowany na platformę Surface, oparty o najnowsze biblioteki Surface 2.0 SDK.

Podsumowanie

W tym artykule opisano, co to jest platforma Surface oraz jakie możliwości daje programistom najnowsza wersja bibliotek Surface 2.0 SDK, przedstawiono sposób instalacji i konfiguracji środowiska. Zaprezentowano również prosty projekt, w którym wykorzystywany jest SDK.

W kolejnym artykule opisana zostanie podstawowa kontrolka Surface 2.0 SDK – ScatterView.