Itse simulaattori käynnistetään napsauttamalla Firefox-selaimessa vasemmassa ylälaidassa Firefox-painiketta, Www-kehitystyökalut, Firefox OS Simulator. Koska kysymyksessä on Alfa-vaiheen lisäosa, mitä vaan voi tapahtua käytön aikana. Kannattaa siis olla tarkkana ja toisaalta kärsivällinen.
Pieni ja yksinkertainen sovellus on itse asiassa www-sivu, joka toimii simulaattorin (ja myös aidon Firefox OS -puhelimen) sisällä. Sovellus koostuu useasta tiedostosta. Lähdetään keräämään tiedostot ja tallennetaan ne niille kuuluville paikoille.
Ensin kirjoitetaan yksinkertainen www-sivu. Liitä ao. koodi johonkin tekstieditoriin ja tallenna nimellä index.html kansioon hello. Kansion nimellä ei ole merkitystä. Se voi olla mikä vaan. Tärkeitä sen sijaan ovat rivit, jotka alkavat <script -tagilla. Hae verkosta *uusin stabiili* jquery. Kokeile täältä: http://jquery.com/download/ . Tallenna tiedosto (tuossa alla se on jquery-1.10.2.min.js) hellon alikansioon nimeltä js. Luo siis samalla kansio js. Muista muuttaa ao. koodiin hakemasi paketin versionumero!
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div></div>
</body>
</html>
(Vinkki: Firefox-selaimessa on mahdollista kokeilla omia www-sivuja mobiilikoossa ilman simulaattoriakin. Se tapahtuu niin, että ensin avataan index.html www-selaimeen ja sitten painetaan Control-Shift-M. Näin pääsee määrittelemään selainikkunan koon. Pois pääsee samalla näppäinyhdistelmällä.)
Sitten luodaan toiminnallisuus Javascript-koodin avulla. Ao. koodi sanoo, että "Hello World!" ja sijoittaa tekstin index.html-tiedoston <div></div> -tagien väliin. Kopioi koodi tiedostoon app.js ja tallenna tiedosto hellon alikansioon js.
$(function() {
$("div").text("Hello World!");
});
Lopuksi pitää luoda tiedosto nimeltä manifest.webapp. Sen koodi on alla. Kyseinen tiedosto määrittelee, millainen sovellus on kysymyksessä, kuka sen on luonut, mikä tiedosto avataan ensimmäisenä (tässä tapauksessa index.html). Jälleen kopioi koodi tekstieditoriin ja tallenna samaan kansioon index.html -tiedoston kanssa.
{
"name": "Hello World",
"description": "Testisovellus",
"version": "1.0",
"launch_path": "/index.html",
"developer": {
"name": "Sakari Castrén",
"url": "http://sakarinkurssit.blogspot.fi"
}
}
Nyt tulee olla koossa kansiossa hello tiedostot index.html ja manifest.webapp. Tämän lisäksi alikansiossa js ovat tiedostot app.js ja jquery-1.10.2.min.js. Sitten vain painetaan Simulaattorin Dasboardissa Add Directory ja napsautetaan tiedostoa manifest.webapp. Mikäli kaikki menee hyvin, Validation Result on OK. Tämän jälkeen voikin kuikuilla itse virtuaalipuhelimen ruutua.
Yksi herja minulle sentään ilmestyi. Koska en ollut määrittänyt mitään ikonia, Firefox OS huomautti asiasta ja loi harmaan ja pyöreän kuvakkeen, jossa on raketti keskellä. Ikonin piirtäminen kuuluu asiaan, mikäli aikoo julkaista sovelluksen muiden käyttöön. Ikonin saattaminen mukaan sovellukseen ei ole vaikea rasti. En käy sitä tässä nyt läpi.
Ei kommentteja:
Lähetä kommentti