Aplikacja webworks 3 id 67049 Nieznany

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ę.

5. Druga aplikacja

Tym razem, spróbujemy stworzyć coś bardziej funkcjonalnego. Aby tego dokonać, skorzystamy
z funkcjonalności, jaką oferuje nam jQuery. Przede wszystkim, musimy pobrać jquery.min.js,
jquery-ui.min.js, oraz jquery-ui.css.

Możemy pobrać je z następujących źródeł:

http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css

Gdy już je pobierzemy, powinniśmy je ulokować w folderze głównym plików naszej aplikacji, lub
w takim, żeby mieć do nich łatwy dostęp.

Gdy już się z tym uporamy, możemy przejść do kodowania. Standardowo, zacznijmy od pliku
config.xml:

<?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>Hello jQuery</name>
<author>User</author>
<description>Moja druga aplikacja.</description>

<rim:orientation mode="auto"/>

<icon src="./img/logo.png"/>

<content src="index.html"/>

<feature id="blackberry.ui.dialog"/>
<feature id="blackberry.system.event" />
<access uri="http://www.somedomain.com" subdomains="true">

<feature id="blackberry.app.event"/>
<feature id="blackberry.invoke"/>
</access>

</widget>

Czym różni się on od naszego poprzedniego?
Oczywiście, zmieniliśmy jego nazwę i opis, ponadto dodaliśmy ikonkę, która będzie reprezentowała
naszą aplikację pośród innych ikon na terminalu. W naszym przykładzie, powinna mieć rozmiary
68x68 pikseli, jeżeli programujemy pod inne terminale lub tablety, powinniśmy wcześniej
sprawdzić, jakie wymiary powinny mieć ikony dla konkretnego modelu terminala. Moje logo składa
się z białych liter TUT na czarnym tle. W praktyce, wygląda to tak:

Dodaliśmy także elementy <feature>, które pominęliśmy w poprzedniej części, a które są
niezbędne, jeśli chcielibyśmy testować naszą aplikację na prawdziwym smartfonie. Więcej
o elementach feature, możemy przeczytać w anglojęzycznej dokumentacji:

https://developer.blackberry.com/html5/documentation/feature_element_834678_11.html

Przyszedł czas na index.html:

<html>

<head>

<title>WebWorks jQuery tutorial</title>

</head>

<body>

<p id="p1">Hello, jQuery</p>

<p id="p2">No, siema</p>

</main>

</body>

var bool = new Boolean();

$(document).ready(function(){

$("#p2").hide();

$("#progressbar").progressbar({ value: 0 });

});

$("#p1").click(function(){

$(this).slideUp(200);

$("#p2").slideDown("slow");

if(bool == false){

$("#p2").animate({"left": "+=50px"}, 500);

bool = true;}

else{

$("#p2").animate({"left": "-=50px"}, 500);

bool = false;}

});

$("#p2").click(function(){

$(this).slideUp("slow");

$("#p1").slideDown("slow");

});

$( "#slider" ).slider({ stop: function() {

$("#progressbar").progressbar({ value: $( "#slider" ).slider( "option",

"value" ) });}

});

</script>

</html>

W efekcie kompilacji tego kodu otrzymamy: progressbar (którego wartości będziemy mogli ustawić
sliderem), slider (którym będziem zmieniali wartości progressbara), oraz paragrafy p1 i p2. Gdy
aplikacja się załaduje, widoczny będzie tylko paragraf p1. Po kliknięciu go, schowa się on a w jego
miejsce pojawi się paragraf p2 i przesunie o 50 pikseli w prawo. Gdy klikniemy paragraf p2, tym

razem to on zniknie, a pojawi się paragraf p1. Jeśli znów go klikniemy, schowa się on jak
poprzednim razem, tyle że tym wypadku, paragraf p2 przesunie się o 50 pikseli w lewo w stosunku
do swojej ostatniej pozycji. Ale po kolei.

Poza referencją do naszego stylu, dodaliśmy także referencje do elementów, które powinniśmy
pobrać na początku tej części tutoriala, a także tytuł.

Element body zawiera tylko główny pojemnik main, oraz wspomniane: progressbar, slider i dwa
paragrafy z dowolnym tekstem w nich zapisanym. Przejdźmy zatem do skryptów.

Deklarujemy zmienną typu Boolean, domyślnie będzie ona ustawiona na false. Przyda nam się ona
nieco później. Teraz skorzystamy z jQuery. Wywołanie każdej funkcji jQuery, musi być poprzedzone
znakiem $.

Funkcja, która automatycznie wywołuje się, gdy strona załaduje się do tego stopnia, że będzie
możliwe wykonywanie już na niej jakichś skryptów. Składa się ona z dwóch mniejszych funkcji.
Pierwsza z nich ukrywa paragraf p2 (to dlatego nie zobaczymy go po załadowaniu się strony),
a druga inicjalizuje nasz progressbar wartością 0.

Tutaj mamy główną funkcję, która wywoływana będzie poprzez kliknięcie paragrafu p1. Pierwsza
jej podfunkcja, odwołując się do bieżącego elementu (w tym wypadku paragrafu p1), „zwinie” (czyli
ukryje z użyciem animacji) go w czasie 200ms (0,2 sekundy). Druga podfunkcja, odwołując się do
paragrafu p2, rozwinie go w podobny sposób, tyle że tym razem zamiast determinować
bezpośrednio czas akcji, skorzystaliśmy z domyślnej wartości „slow”. Zaraz po niej, stawiamy
warunek. Jeśli jest on spełniony, to paragraf p2 przesunie się o 50 pikseli w lewo i ustawi naszą
zmienną bool na true, w przeciwnym wypadku przesunie paragraf p2 o 50 pikseli w prawo i ustawi
naszą zmienną na false.

Tutaj mamy analogiczną funkcję, ale dużo prostszą. Wywołuje się po kliknięciu paragrafu p2 i
chowa paragraf p1, z prędkościami slow.

Mamy tutaj do czynienia z potrójnym zagnieżdżeniem funkcji. Gdy puścimy suwak naszego slidera,
wywołana zostanie funkcja która wywoła funkcję zmiany wartości wyświetlanej w naszym
progressbarze. Aby jednak uniknąć zbędnego zagmatwania i używania pomocniczych zmiennych
(co zajęłoby kilka linii kodu więcej), zamiast podawać progressbarowi jakąś konkretną wartość lub
zmienną, pole value: wypełnimy kolejną funkcją, która odczyta aktualną wartość z naszego slidera.
Tym sposobem progress bar będzie zawsze reprezentował tą samą wartość co slider.

Pozostał nam tylko plik style.css:

*{margin:0;

padding:0;}

body{text-align:center;}

#main {width:480px;height:360px;background-color: black;}

p {color:white;font-size:30px;background-color: purple;}

#p1{left:150;position:absolute;top: 100px;}

#p2{left:150;position:absolute;top: 150px;}

.ui-progressbar { height: 1.2em; text-align: center;overflow: hidden;

position: relative; top:10px; left:12.5px; width: 450px;}

.ui-progressbar .ui-progressbar-value {margin: 1px; height:80%; width: .6em;}

.ui-slider { position: relative; margin: 25px; text-align: left; }

.ui-slider-horizontal { height: .5em; }

.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: .6em; height: 1.3em;}

.ui-slider-horizontal .ui-slider-handle { top: -.45em; margin-left: -.2em; width: .6em}

Co warto zauważyć, pomocne jest stworzenie pojemnika typu <div> na całą zawartość naszej
strony (w tym przykładzie #main), którego wielkość powinna odpowiadać rozdzielczości ekranu
terminala pod który programujemy. Warto także pamiętać, że korzystając z gotowych rozwiązań UI
jQuery (takich jak np. progressbar), tworząc swój styl.css, możemy posiłkować się załączonym
stylem jquery-ui.css bądź dokumentacją.

Gotowe! Ostanie co pozostało do zrobienia, to skompilowanie i sprawdzenie programu na
symulatorze. Od teraz jesteś w stanie tworzyć samodzielnie w pełni funkcjonalne aplikacje
WebWorks dla terminali BlackBerry. Dla treningu polecam zabawę z przykładowym kodem, aby
zobaczyć, jak na różne zmiany będzie reagowała nasza aplikacja.

Życzę wszystkim zainteresowanym miłej i owocnej zabawy!

Wyszukiwarka

Podobne podstrony:
Aplikacja webworks 2 id 67048 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