plik

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.

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