SM-12-LAB-WIKI

From Studia Informatyczne

Spis treści

Temat ćwiczenia

Podstawy tworzenia stron WAP

Wymagania

Podstawowe wiadomości z technologii Internetowych.

Ćwiczenie

Wprowadzenie

WAP (ang. Wireless Application Protocol) - to protokół umożliwiający dostęp od specjalnie przygotowanych serwisów WWW, które uwzględniają ograniczenia dotyczące interfejsu i wąskich kanałów bezprzewodowych urządzeń mobilnych - telefonów komórkowych, palmtopów itd. Umożliwia dwustronne przesyłanie danych między terminalem mobilnym i serwerem. Wyróżnia się kilka rodzajów protokołu WAP:

  • WAP 1.x

WAP w tej wersji umożliwia użytkownikowi mobilnemu korzystać ze specjalnie prrzygotowanych serwisów internetowych. Podstawą ich tworzenia jest język opisu strony WML (ang. Wireless Markup Language). Istnieje wiele ograniczeń tego standardu, spowodowanych niską rozdzielczością ekranu, prostym mechanizmem nawigacji i ubogą grafiką. Przeglądanie stron wymaga odpowiedniej mikroprzeglądarki w urządzeniu mobilnym lub stosownego emulatora.

  • WAP 2.0

Wykorzystuje protokoły internetowe IP, TCP, HTTP co umożliwia dostęp do wiekszej ilości usług, niz w przypadku WAP 1.0. Strony w WAP 2.0 tworzy się w języku XHTML MP, którego podstawą jest język XHTML, wykorzystuje się również style CSS (wersja 2.0). Na urządzeniach mobilnych stosowane będą przeglądarki go interpretujące, jak np. Microsoft Mobile Explorer. Strony w WAP 2.0 mogą być również interpretowane przez zwykłe przeglądarki na komputerze stacjonarnym, a strony tradycyjne na urządzeniu mobilnym. Pozwoli to na jednorazową pracę nad serwisem internetowym i jego używanie na różnych platformach internetowych.

Utworzenie prostej strony WAP

Przed przystapieniem do tworzenia pierwszej strony w WAP należy zainstalować i skonfigurować środowisko programistyczne. Na potrzeby tego ćwiczenia wybrano następujące narzędzia:

  • Nokia Mobile Internet Toolkit ver 4.1 – zintegrowane środowisko do tworzenia aplikacji internetowych oraz plików graficznych na urządzenia mobilne. Pakiet dostępny pod adresem http://www.forum.nokia.com
  • Nokia Mobile Internet Toolkit ver. 4.1 Patch for JRE 5 – patch do środowiska NMIT, dostępny na stronie http://www.forum.nokia.com
  • Nokia 5100 SDK 1.0 – środowisko do tworzenia i uruchamiania aplikacji w Java oraz serwisów internetowych. Dostępne na stronie http://www.forum.nokia.com

W czasie instalacji powyższych komponentów uzytkownik zostanie poproszony o rejestrację na stronie Nokia. Po zainstalowaniu wszystkich wymaganych komponentów należy uruchomić aplikację NMIT 4.1 (Rysunek 1)


Rysunek 1 Aplikacja NMIT 4.1 po uruchomieniu
Enlarge
Rysunek 1 Aplikacja NMIT 4.1 po uruchomieniu


Po wybraniu opcji File->New pojawi się okno, umożliwiające wybór technologii naszego projektu, ewentualnie stylu bądź grafiki.


Rysunek 2 Wybór technologii
Enlarge
Rysunek 2 Wybór technologii


Po wybraniu zakładki Browsing zaznaczamy opcję WML 1.3 Deck i naciskamy OK. Pojawia się okno przedstawione na Rysunku 3, umożliwiające edycję pliku WML i tworzenie strony.


Rysunek 3 Edycja pliku WML
Enlarge
Rysunek 3 Edycja pliku WML


Odzszukujemy w kodzie strony fragment odpowiedzialny za implementację pierwszej karty naszej strony i modyfikujemy zgodnie z poniższym listingiem.

  <card id="k1" title="Pierwszy raz"> 
    
   <do type="unknown" label="Next">
     <go href="#card2"/>
   </do> 

Moja pierwsza strona w WAP!

  </card> 

Listing 1 – Przykładowy kod karty strony WAP

Następnie w oknie środowiska NMIT naciskamy przycisk Show on Phone SDKs, co umożliwi nam obejrzenie efektu naszej pracy na ekranie emulatora.


Rysunek 4 Uruchomienie strony na emulatorze
Enlarge
Rysunek 4 Uruchomienie strony na emulatorze


Efekt naszych dotychczasowych działań przedstawia Rysunek 5.


Rysunek 5 – Efekt na ekranie emulatora
Enlarge
Rysunek 5 – Efekt na ekranie emulatora



Ponownie w głównym oknie aplikacji wybieramy File->New i po zaznaczeniu opcji WBMP Image naciskamy przycisk OK


Rysunek 6 Wybór opcji tworzenia grafiki
Enlarge
Rysunek 6 Wybór opcji tworzenia grafiki


Pojawia się okienko z zapytaniem o rozmiar tworzonego pliku graficznego, podajemy 100x100 i naciskamy OK.


Rysunek 7 Wprowadzenie rozmiaru pliku graficznego
Enlarge
Rysunek 7 Wprowadzenie rozmiaru pliku graficznego


Rysunek 8 Utworzenie pliku graficznego
Enlarge
Rysunek 8 Utworzenie pliku graficznego



Po narysowaniu obrazka zapisujemy go na dysku, używając opcji Save jako plik buzia.wbmp. Powracamy do okna projektu i modyfikujemy kod pierwszej karty, osadzając w niej stworzony obrazek. Zmodyfikowany kod przedstawia Rysunek 9.


Rysunek 9 Osadzenie obrazka na stronie WAP
Enlarge
Rysunek 9 Osadzenie obrazka na stronie WAP


Następnie ponownie naciskamy przycisk Show on Phone SDKs i możemy efekt naszych dotychczasowych działań obejrzeć na ekranie emulatora (Rysunek 10).

Rysunek 10 – Efekt na ekranie emulatora
Enlarge
Rysunek 10 – Efekt na ekranie emulatora

ZADANIE

Wykonaj prosta stronę, będąca talią złożona z czterech kart przedstawiającą członków rodziny. Na każdej karcie umieść portret danej osoby i jej imię jako tytuł. Zaimplementuj prostą nawigację pomiędzy kartami.