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

Zawiało HTML5 i JavaScriptem w Windows 8–kontrolki i interfejs

Kontrolki

Razem z frameworkiem WinJS otrzymujemy zestaw kontrolek, który jest podobny do tego, jaki otrzymują programiści XAML/C#.

image

Kontrolki definiujemy w kodzie w następujący sposób:

image

Mając możliwość dodatkowo zdefiniować opcji startowych:

<div data-win-control="WinJS.UI.DatePicker"

data-win-options="{maxYear: 2025}"></div>

Powyższa kontrolka prezentuje się następująco:

image

Kontrolka WinJS to jeden lub więcej elementów HTML, które są opakowane logiką w JavaScript oraz ostylowane za nas.

Taką kontrolkę możemy wyszukać w drzewie obiektów, m.in. wykorzystując getElementById.

Interfejs

Aplikacje, które budujemy muszą wspierać trzy różne widoki:

· Pełnoekranowy

· Zwinięty (szerokość 320px)

· Wypełniony (pozostałość miejsca na ekranie po widoku zwiniętym).

Widokiem niewymaganym jest widok portretowy. Rozkład widoków prezentuję poniżej:

image

Wchodząc do pliku default.css widzimy Media Query, które pozwalają na przełączanie się styli między poszczególnymi trybami. Możemy dla przykładu zdefiniować tę samą klasę, a o odmiennych wartościach dla poszczególnych trybów:

@media screen and (-ms-view-state: fullscreen-landscape) {

.klasa {

background-color: green;

}

}

@media screen and (-ms-view-state: filled) {

.klasa {

background-color: red;

}

}

@media screen and (-ms-view-state: snapped) {

.klasa {

background-color: yellow;

}

}

Dodatkowo budując interfejs musimy pamiętać o obsłudze wielu rozdzielczości ekranu. Uruchamiając symulator mamy do wyboru parametry od 1024px do 2560px. Budując interfejs zgodny z tak wielkim rozrzutem rozdzielczości musimy budować interfejs w oparciu o grafiki wektorowe, które w HTML są opisywane w jezyku SVG, albo wykorzystać grafiki zwykłe (jpg, png) w sposób specjalnie zaprojektowany dla Windows.

System Windows 8, klasyfikuje grafiki zwykłe w 3-ch grupach.

image

I przełącza się między nimi automatycznie w zależności od rozdzielczości ekranu użytkownika. Budując aplikację powinniśmy dostarczyć grafiki w trzech różnych formatach (rozdzielczościach) tak by dopasowały się do ekranu użytkownika w jak najlepszy sposób.

Sposób doboru właściwej grafiki jest bardzo prosty. W swoim kodzie wpisujemy, że chcielibyśmy zaprezentować użytkownikowi grafikę w następującej postaci:

<img src="/Obrazki/obrazek.jpg"/>

System jednak poszuka w katalogu obrazka o nazwie:

· obrazek.scale-100.jpg lub

· obrazek.scale-140.jpg lub

· obrazek.scale-180.jpg.

W zależności od rozdzielczości ekranu i gęstości pikseli jaką ma użytkownik na swoim urządzeniu.

Podsumowując ten mini przegląd HTML dla Windows 8

Podsumowując HTML5 i JavaScript otrzymały całkiem nowe życie wraz Windows 8. To już nie jest prosty język skryptowy, to potężna wtyczka do świata systemu operacyjnego, która pozwala budować aplikacje funkcjonalne na równi z tym, co mogą zrobić programiści C# czy Visual Basic.

Jednak powinniśmy być ostrożni w Naszych osądach i podchodzić to tej technologii z rezerwą pamiętaj o tym, że to dopiero wersja 1.0. Jak wiele języków ten też się zmieni, pod ugięciem użytkowników, którzy używają technologii, na co dzień.
Najważniejsze w tym jest to, że zyskują tutaj programiści świata internetowych aplikacji, którzy mogą teraz tworzyć aplikacje dla systemu 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: