Aplikacja w WebWorks
1. Wprowadzenie do WebWorks – czym jest WebWorks.
2. Pierwsze kroki – organizacja środowiska pracy.
3. Pierwsza aplikacja – tworzenie krok po kroku pierwszej aplikacji w WebWorks.
4. Jak to działa? – bliższe spojrzenie na istotne elementy WebWorks.
5. Druga aplikacja – wdrożenie jQuery w naszą aplikację.
3. Pierwsza aplikacja.
Po poprawnym zorganizowaniu naszego środowiska pracy, możemy zabrać się za tworzenie
naszej pierwszej aplikacji. Przede wszystkim, nasza aplikacja potrzebuje pliku config.xml.
W tym pliku znajdują się wszystkie najważniejsze informacje o naszym programie, takie jak
jego nazwa, opis, autor, adres strony startowej, etc., ale więcej o tym w następnym
paragrafie. Póki co wystarczy nam utworzenie pliku config.xml w naszym edytorze i zapisanie
w nim następującej treści:
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns=" http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="2.0.0.0">
<name>HelloWorld</name>
<author>User</author>
<description>Moja pierwsza aplikacja.</description>
<rim:orientation mode="auto"/>
<content src="index.html"/>
</widget>
Teraz powinniśmy utworzyć plik index.html, który będzie „sercem” naszego programu.
Użyjmy takiego przykładu:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="main">
<button onclick="load()">Test</button>
<p id="pom"></p>
</div>
</body>
<script>
function load(){
document.getElementById('pom').innerHTML="Hello world!";
}
</script>
</html>
Ostatnie co zostało nam do zrobienia, to utworzenie pliku style.css:
*{margin:0;
padding:0;
}
body{
text-align:center;
}
#main {
width:480px;
height:360px;
background-color: black;
}
button {
margin:10px;
padding:3px 5px;
font-size:14px;
}
p {
color:white;
font-size:30px;
position:absolute; top: 50px; left: 50px;
background-color: purple;
}
Jeżeli wszystko już gotowe, możemy sprawdzić najpierw nasz program przy pomocy zwykłej
przeglądarki, otwierając w niej plik index.html. Możemy też od razu zająć się kompilacją i
wrzucaniem naszej aplikacji na symulator.
Aby to zrobić, musimy najpierw umieścić wszystkie 3 pliki które dopiero co utworzyliśmy, w
jednym archiwum .zip, Na przykład o nazwie helloworld.zip .
Teraz otwieramy wiersz poleceń. Aby skompilować nasz projekt, najwygodniej będzie nam
zmienić lokalizacje w której się znajdujemy, na lokalizację w której zainstalowaliśmy
Smartphone SDK, używając komendy do tego komendy cd. Przykładowo:
Teraz wpisujemy komendę w formacie:
bbwp <adres naszego spakowanego pliku .zip> np.:
Jeśli wszystko zrobiliśmy poprawnie, powinniśmy otrzymać komunikaty:
W folderze w którym znajdował się nasz .zip, powinien wygenerować się też folder bin.
Otwieramy teraz nasz symulator. Jeżeli zainstalowaliśmy go w domyślnej lokalizacji, to
ścieżka do niego powinna być następująca C:\Program Files\Research In Motion\BlackBerry
Smartphone Simulators 6.0.0\6.0.0.723 (9700)\9700.bat
Gdy symulator się załaduje, z paska narzędzi wybieramy File > Load BlackBerry Application
or Theme…
a następnie wybieramy z wygenerowanego przed chwilą folderu
bin\StandardInstall\helloworld.cod
Czekamy aż symulator załaduje nasz projekt.
Gdy już się doczekamy, możemy go wybrać z listy i uruchomić.
Naszym oczom ukazuje się następujący widok:
Aż prosi się, żeby go kliknąć, prawda? A zatem zróbmy to!
Gratulacje! Właśnie stworzyliśmy naszą pierwszą aplikację w WebWorks. Pora zrozumieć, jak
ona działa.
4. Jak to działa?
A więc przyjrzyjmy się dokładniej poszczególnym elementom składowym naszej pierwszej
aplikacji. Zacznijmy od pliku config.xml. Config jest wymagany do skompilowania naszej
aplikacji i zawsze musi znajdować się w głównym folderze. Zawiera on wszystkie kluczowe
informacje, takie jak strona startowa, nazwa i opis programu, autor, licencja etc., ale nie
tylko. Możemy tam umieścić także ścieżkę do ikony, która będzie reprezentowała naszą
aplikację w terminalu, a także ustawić zezwolenia czy licencje.
Głównym elementem configa jest widget – namespace aplikacji WebWorks dla BlackBerry.
Jest on pojemnikiem na wszystko inne, poza deklaracją kodowania w xml. Co oznaczają
znaczniki których użyliśmy?
W powyższym znaczniku umieszczamy nazwę naszej aplikacji.
W kolejnym umieściliśmy autora naszego programu.
Tutaj umieściliśmy opis naszej aplikacji.
Określa orientacje ekranu naszej aplikacji.
Determinuje adres strony głównej naszej aplikacji.
Nasz namespace.
Istnieje dokumentacja, zawierająca pełny spis i opis (w języku angielskim) znaczników
których możemy użyć.
Znajduje się tutaj:
https://developer.blackberry.com/html5/documentation/working_with_config_xml_file_18
66970_11.html
Weźmy teraz pod lupę style.css. Tutaj nie ma zbyt wielkiej filozofii, w tym pliku znajduje opis
formy prezentacji naszej strony html.
Na przykład:
Oznacza, że czcionka w paragrafie będzie koloru białego, wielkości 30px, pojawi się z
marginesami 50px od góry i lewej strony, oraz że będzie miała tło koloru fioletowego.
Zostaje nam index.html. To tutaj znajduje się cała logika naszej aplikacji.
Tutaj, w elemencie head, określamy, że strona będzie korzystała z gotowego stylu, który
wcześniej utworzyliśmy.
W elemencie body, tworzymy pojemnik main, w który włożyliśmy buton Test, po którego
kliknięciu wywoływana jest funkcja load(), oraz paragraf, do którego funkcja load() przypisze
wartość Hello world! po kliknięciu buttona.
W elemencie script, umieszczamy skrypty naszej aplikacji. W naszym wypadku jest to jedna
funkcja load(), która po wywołaniu przekazuje wartość Hello world! do paragrafu pom.
Czyli w skrócie: kliknięcie buttona wywołuje funkcje, która przekazuje wartość do paragrafu -
dzięki temu możemy zobaczyć nasz tekst.
W kolejnej części spróbujemy upiększyć nieco naszą aplikacje, oraz dodać jakąś
funkcjonalność jQuery.