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.
Wyszukiwarka
Podobne podstrony:
Aplikacja webworks 3 id 67049 Nieznany
aplikacje kolo id 67072 Nieznany
Aplikacyjna mapa wiedzy id 6708 Nieznany (2)
architektura aplikacji id 67748 Nieznany (2)
AplikacjeWbudowane7 id 67083 Nieznany
Aplikacyjna mapa wiedzy id 6708 Nieznany (2)
architektura aplikacji id 67748 Nieznany (2)
Abolicja podatkowa id 50334 Nieznany (2)
4 LIDER MENEDZER id 37733 Nieznany (2)
katechezy MB id 233498 Nieznany
metro sciaga id 296943 Nieznany
perf id 354744 Nieznany
interbase id 92028 Nieznany
Mbaku id 289860 Nieznany
Probiotyki antybiotyki id 66316 Nieznany
miedziowanie cz 2 id 113259 Nieznany
LTC1729 id 273494 Nieznany
więcej podobnych podstron