Strona główna > HTML5, Internet Explorer, Visual Studio, Windows 8 > Zawiało HTML5 i JavaScriptem w Windows 8

Zawiało HTML5 i JavaScriptem w Windows 8

Możemy być zwolennikiem albo przeciwnikiem firmy Microsoft i tego, co robi, ale nie możemy zaprzeczać temu, że Windows 8 to rewolucja. Rewolucja, która widoczna jest w postawie firmy, po raz pierwszy od kilku lat odmiennej i niebojącej się diametralnych często ryzykownych zmian oraz rewolucja dla konsumentów, którzy do ręki dosłownie dostają system funkcjonalnie zbliżony do tego, co znali z przeszłości, ale nacechowany nowoczesnym design’em i nastawiony bardzo silnie na świat mobilny.

Jeszcze kilka lat temu nikt by się nie spodziewał, że technologia internetowa HTML będzie podstawą do budowania aplikacji. Dzisiaj, kiedy wojna przeglądarek to świat codzienny, na stół karty wykłada firma Microsoft inwestując setki tysięcy dolarów w technologię, która dotychczas rewolucjonizowała Internet.

Lata stagnacji na rynkach mobilnych i przespania momentu zwrotu użytkowników w kierunku tabletów spowodowały, że firma zrobiła kilka ryzykownych posunięć na planszy zwanej ekosystemem dla programistów, bulwersując, łamiąc konwencje i przyzwyczajenia jednocześnie stawiając na odświeżoną paletę technologii i API dla programistów bez brzemienia dawnych czasów, poprzednich wersji systemów z pod znaku okienek.

Oto dzisiaj mamy system, który jest dobry dla każdego, użytkownikom zapewniając rozrywkę na komputerze i tablecie, a programistom dając narzędzia i sklep, jako formę dystrybucji aplikacji, które możemy pisać w technologiach, z których korzystamy, na co dzień w pracy – od języków zarządzanych takich jak C# i Visual Basic po HTML i JavaScript, które dotychczas rządziły w Internecie.

To początek wojny o programistów, którzy mają się przyczynić do budowania wspólnego ekosystemu wokół technologii, która jest dziś na topie. Kilka następnych storn będzie opisywało propozycję firmy Microsoft dla programistów HTML, JavaScript i CSS, którzy zamknięci w świecie przeglądarek mogą rozprostować nogi i wbiec do środka systemu operacyjnego i wchodzić z nim w interakcje dając użytkownikom nowe aplikacje użytkowe oraz gry.

Windows 8 wprowadza model dystrybucji aplikacji w ramach Sklepu Microsoft Store, który pozwala instalować aplikacje zgodne z architekturą Intel 32/64bit oraz ARM. Ze względu na potrzebę obsługi różnych architektur procesorów został wprowadzony kompletnie nowy framework do pisania aplikacji, który nazywa się Windows Runtime (RT). Framework dba o projekcję swoich możliwości do języków zarządzanych i internetowych, przez co piszą w każdym z nich mamy wrażenie, że używamy tych samych elementów.

Podstawy środowiska

Umiejąc programować w HTML5, JavaScript i i CSS3 możemy używać składni już nam znanej, a przy okazji budować aplikacje oparte o mechanizmy znane tylko z systemu Windows. Czyni to naszą naukę łatwiejszą, bo musimy się douczyć tylko nowych elementów Windows 8 i ich projekcji dla JavaScript, który będzie służył nam do pisania logiki.

Budowanie aplikacji możemy oprzeć o płatną lub bezpłatną wersję Visual Studio. Na potrzeby tego artykułu można używać wersji bezpłatnej do użytku komercyjnego, która jest dostępna pod następującym adresem http://www.microsoft.com/visualstudio/eng/downloads

Pierwszy program tworzymy uruchamiając Visual Studio i wybierając z menu File->New project

image

Oraz wybierając JavaScript i Windows Store. Na potrzeby artykułu będziemy wybierać szablon Blank App, który nie zawiera żadnych gotowych okien, mechanizmów i styli, przez co jest idealny do prezentacji przykładów – nie ma nadmiarowych elementów, które przeszkadzałyby w zrozumieniu istoty platformy.

Po stworzeniu projektu widzimy w Solution Explorer wstępną zawartość projektu, która jest złożona z:

image

· .css – pliki zawierające style definiujące wygląd. Dozwolona wersja CSS to 3.

· .png – obrazki wykorzystywane w aplikacji. Możemy również dołączać pliki jpg i bmp.

· .js – pliki definiujące logikę aplikacji.

· .pfx – tymczasowy certyfikat, służący do podpisania aplikacji.

· .html – pliki definiujące szkielet widoków.

· .appxmanifest – plik definiujący funkcjonalność oraz uprawnienia Naszej aplikacji.

Projekt uruchamiamy wciskając klawisz F5 lub używając menu kontekstu uruchomienia dostępnego w oknie Visual Studio. Warto nadmienić, że aplikacja może być uruchomiona na lokalnym komputerze, zdalnym komputerze oraz w symulatorze systemu Windows 8.

image

· Local machine – instalacja aplikacji i uruchomienie na komputerze lokalnym.

· Remote machine – instalacja aplikacji i uruchomienie na komputerze zdalnym. To jedyna możliwość na podpięcie do Visual Studio tabletu z procesorem ARM i debugowanie aplikacji.

· Simulator – instalacja aplikacji na komputerze lokalnym, uruchomienie aplikacji w symulatorze. Symulator loguje się do lokalnego systemu na sesję zerową protokołem RDP, przez co posiada dostęp do wszystkich dotychczas zainstalowanych aplikacji

image

Symulator pozwala między innymi na testowanie aplikacji w różnych rozdzielczościach ekranu przy różnej gęstości pikseli (DPI), dzięki czemu możemy profilować i niwelować błędy w Naszej aplikacji nie posiadając stosownego sprzętu.

Podstawowy plik HTML, jaki otrzymujemy ma następującą zawartość

image

Wyjaśnijmy, co oznaczają poszczególne składowe:

· DOCTYPE definiuje dokument, jako HTML5.

· Biblioteki WinJS, który jest zestawem narzędzi, kontrolek i styli linkujemy przez specjalny prefiks // oznaczający ścieżkę wspólną dla wszystkich aplikacji Windows 8. Pliki te nie znajdują się bezpośrednio w projekcie.

· Dokument pozwala podłączyć własne style i pliki javascript

· Aplikacje Windows 8 pozwalają na używanie dotychczas znanych frameworków web-owych takich jak jQuery, jQueryUI czy…

· Szkielet projektu jest budowany przy użyciu zwykłych elementów dostępnych w ramach HTML5 i obsługiwanych przez Internet Explorer 10.

Do kompletu warto przyjrzeć się zawartości pliku JavaScript, który jest podłączony do szkieletu strony:

image

Kod JavaScript definiuje następujące aspekty:

· Zdarzenie onactivated, które reaguje w momencie uruchomienia aplikacji. Zdarzenie otrzymuje informacje od systemu operacyjnego, w jakim kontekście jest uruchomiona aplikacja (tu: launch) oraz jaki był poprzedni stan aplikacji (tu: terminated). Komplet danych pozwala nawigować użytkownika w odpowiednie miejsce już przy starcie aplikacji.

· Zdarzenie oncheckpoint, które pozwala odpowiednio reagować na uśpienie aplikacji, na przykład poprzez zapis informacji o tym, na jakim aktualnie jest użytkownik ekranie, danych, które wpisywał lub które przeglądał.

Aplikacja w momencie włożenia wykonuje wiele różnego rodzaju operacji, w tym:

image

· Uruchamia nowy proces oraz wątek główny aplikacji.

· Parsuje kod HTML, JS, CSS. To bardzo ważny punkt z punktu widzenia programisty, ponieważ zostajemy obdarci ze złudzeń, że kod pisany z językach Internetu dalej pozostaje interpretowany mimo tego, że wykorzystuje dość spory zasób elementów zarządzanych. Warto tutaj nadmienić, że parsowanie pozwala na dopuszczenie kodu do uruchomienia, który nie jest poprawny.

image

Model współistnienia aplikacji w ramach Windows RT mówi jasno o tym, że urządzenie powinno konsumować jak najmniej zasobów, by być efektywne energetycznie. Dlatego po raz pierwszy ze świata mobilnego do komputerów i tabletów przyszedł mechanizm pilnowania stanu aplikacji i przełączania go między Uruchomiona, Uśpiona, Wyłączona. System Windows pamięta stan Naszej aplikacji i wtłacza go do zmiennej za każdym uruchomieniem, przez co możemy odpowiednio zareagować.

image

Warto dodatkowo nadmienić, że kiedy uruchamiamy aplikację i chcielibyśmy przetestować jak działają Nasze zdarzenia do usypiania czy wskrzeszania aplikacji nie uda nam się obsłużyć tych zdarzeń w normlanym trybie. Dzieje się tak, dlatego, że Visual Studio prosi system operacyjny przy każdym włączeniu aplikacji by ta właśnie instancja nie podlegała prawom usypiania i wskrzeszania.

Możemy te tryby wymusić, przy włączonej aplikacji przełączmy się do Visual Studio i poszukajmy przycisku z listą prezentującą opcje, które chcemy przetestować w ramach cyklu życia aplikacji.

image

Zostało wspomniane już, że aplikacje są uruchamiane przez Internet Explorer 10. Jako programiści aplikacji internetowych przyzwyczailiśmy się do tego, że możemy podglądać kod podczas jego wykonania, śledzić jego działanie i ewentualnie podmieniać fragmenty kodu bez potrzebny ponownego uruchamiania serwisu. Uruchamiając aplikację Windows 8 napisaną w HTML nie działa skrót F12, który w przeglądarce uruchamiał narzędzia programistyczne.

Narzędzia te zostały wbudowane w Visual Studio 2012 i możemy je zobaczyć w akcji, uruchamiając program i ustawiając przerywnik w kodzie (breakpoint). Przykład poniżej:

image

Zmodyfikowałem funkcję onactivated, do której dopisałem kilka metod logujących istotne dla programisty rzeczy. Teraz, kiedy aplikacja w swoim wykonywaniu dojdzie do miejsca, gdzie jest ustawiony breakpoint przerwie wykonanie kodu i zaprezentuje nam konsolę JavaScript:

image

Oraz okno pokazujące hierarchię uruchomionego dotychczas kodu:

image

Na dziś wystarczy, powodzenia w swoich próbach uruchamiania HTML5 w Windows 8.

  1. Brak komentarzy.
  1. No trackbacks yet.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s

%d blogerów lubi to: