Tip:
Highlight text to annotate it
X
Ahojte!
Dnes tu mame pokracovanie ...
... DevCast-u, druhy diel - #2
Spolocne sa pokusime vytvorit jednoduchu aplikaciu.
Predmetom videa budu:
- architektura aplikacie webOS
- spustenie aplikacie v emulatore
- vytvorenie aplikacie obsahujucej tlacidlo, ...
... po stlaceni tlacidla sa nam zobrazi text
V clanku najdete odkaz na stiahnutie dokumentacie k dnesnemu dielu.
To vam ulahci pisanie zdrojoveho kodu, ...
... format .doc vyzera asi takto.
Spustime si Eclipse
Spustime VirtualBox
VirtualBox vam moze ponuknut viac ...
... virtualizacii ...
... obrazu webOS, ak ich mate v PC.
Dolezite budu pre nas asi iba dva.
Jeden pre Pixi - rozlisenie 320x400,
druhy pre Pre - rozlisenie 320x480.
Spustime si obraz Palm PRE.
Plus si mozme spustit Notepad++
Zacneme vytvorenim aplikacie - 'Basic App'
Zvolime lubovolny nazov, ...
... v nasom pripade 'superbouton'.
'Vendor', teda predajca si tiez mozte zvolit podla seba.
Zvolime 'Finish'.
V bocnom paneli vidime subory nasej aplikacie.
Pre spustenie ...
...(staci v pripade prveho spustenia)...
... spustime 'Run Configuration'.
Oznacime 'Mojo Aplications'.
Klikneme na 'New'.
Tu si mozme zvolit rozne moznosti ...
... spustania nasej aplikacie. Vyberieme 'superbouton'.
Ako miesto spustenia aplikacie mame na vyber:
- fyzicky nas telefon alebo emulator. Zvolime 'Palm Emulator'.
Ak mate Palm Pre, mozete zvolit 'Palm Device'.
Pripojite ho prostrednictvom USB.
Vsetko by malo fungovat, bez specialneho nastavovania.
Odporucam zostat na Emulatore.
Je to ovela praktickejsie a pre vyucbu vhodnejsie.
Klikneme 'Close' - zatvorit.
Dame ulozit - 'YES'.
Ked teraz dame spustit, ...
... Eclipse nam skompiluje aplikaciu a ...
... zobrazi sa nam v emulatore (VirtualBox).
Na teraz vidime prazdnu scenu.
Pozrime sa teraz trocha na tu architekturu aplikacii.
Aplikaciu mame moznost vidiet v ...
adresari 'Workspace', ak si spominate ...
... vytvorili sme ho v minulej casti.
Otvorime adresar s nasou aplikaciou, kde ...
... mame moznost vidiet rozne subory.
Napriklad tu vidime ikonu nasej aplikacie, ...
... format *.PNG.
Rozmer 48x48px alebo 64x64px.
Nazov musi zostat 'icon.png'.
Zatial sa nebudeme zaoberat vsetkymi subormi.
Co nas v sucastnosti zaujima.
Je adresar 'app'.
V 'app' mame dva adresare.
Jeden adresar, ktory obsahuje JavaScript.
Druhy adresar obsahuje kod HTML.
Urcite si hned kladiete otazku, co je to ...
... JavaScript, co je to HTML?
V skutocnosti aplikacie webOS ...
... su zalozene na 3 programovacich jazykoch.
Tieto jazyky su rozdielne, avsak ...
... neberte to ako nevyhodu.
Su to: JavaScript, HTML a CSS.
Zatial sa nebudeme zaujimat o CSS.
Teraz nas zaujima JavaScript a HTML.
V hrubom mozme povedat, ze ...
… HTML nam umoznuje umiestnit tlacidla, obrazky, ...
... je to ako web stranka.
Je to rovnaky jazyk ...
... ako pouzivame pri web strankach.
Umozni nam umiestnit objekty kam chceme.
Avsak s jazykom HTML nemozme ...
... programovat logiku.
V jednoduchosti povedane, ak chcete ...
... naprogramovat kalkulacku, s pomocou HTML ...
... to neni mozne.
Prirovnat to mozme aj k dokumentu ...
... vo Worde, v ktorom mozme ...
... rozne umiestnovat text, obrazky, atd.
Vsetko co budeme potrebovat k ...
... roznym vypoctom a podobne ...
... pouzijeme JavaScript.
Spat k adresarom.
Vsetko co je JavaScript bude v 'assitants' a ...
... vsetko co je HTML do 'views'.
Ako vidime v emulatore sa nam nic nezobrazilo.
Preto si musime vytvorit scenu - 'Basic Scene'.
Treba si zapamata, ze aplikacie vo webOS ...
... su tvorene z kariet - scen.
Prvu scenu si nazveme 'first'.
'Finish'
V bocnom paneli mate moznost vidiet, ze ...
... Eclipse vytvoril dalsie subory.
'first-assistant.js'
'first-scene.html'.
Cele si to mozme pozriet v prehliadaci suborov.
V adresari 'assistants' mame:
'first-assistant.js' - JavaScriptovy subor prvej sceny, ...
... ktoru sme vytvorili.
'stage-assistant.js'
Tento subor nam riadi vsetku komunikaciu, ...
... prikazy (teraz chod tam, sprav to, ...).
V jednoduchosti povedane taky policajt na krizovatke.
Zoberieme tieto dva subory, otvorime ich v ...
... Notepad++ a pozrieme sa co je v nich.
Takisto otvorime aj subor HTML, ktory ...
... sa nachadza v adresari 'views'.
Takze teraz mame otvorene 3 subory.
'stage-assistant.js'
'first-assistant.js'
'first-scene.html'
Otvorime si nas pomocny dokument.
Skopirujeme si potrebny kod a ...
... vlozime ho do suboru 'stage...-.js'.
Spravime si tu troska miesta ;-)
Vlozime ho na miesto ako vidite vo videu.
V kazdom JavaScriptovom subore ...
... by sme na zaciatku mali mat ...
... nazvem to 'prvotnu' funkciu, s menom 'StageAssistant' ...
... a potom su dalsie funkcie.
Ohranicene su zlozenymi zatvorkami.
V Notepad++ pri oznaceni zacinajucej zatvorky sa nam ...
... pekne automaticky oznaci koncova zatvorka.
V nasom pripade 'setup' nam umiestni, ...
... zobrazi, vsetko co budeme vytvarat.
V tomto pripade budeme *pushovat* scenu 'first'.
Teda mozme povedat, ze otvorime kartu 'first'.
To by malo byt vsetko, ...
... nezabudnite ulozit.
Vyskusame spustit v emulatore, ci sa nieco zmenilo.
Tu mate moznost vidiet, ze ...
... nieco sa nam zobrazilo.
Jedna sa o napis zo suboru HTML.
Ak sa pozriete blizsie, zistite, ze ide o ...
... rovnaky napis ako v subore 'first-scene.html'.
Vymazme text, ...
... a ak znova spustime emulator, ...
... vidime, ze text zmyzol.
Teraz skusime umiestnit do sceny tlacidlo.
Z prilozeneho dokumentu.
Skopirujeme si text z prilozeneho dokumentu a ...
... vlozime ho do suboru 'first-scene.js'.
Presne ako vidite vo videu.
Teraz si mozme vysvetli, co sme to sem vlozili.
V hrubom mozme povedat, ze ...
... 'this', this predstavuje kartu, na ktorej sa nachadzate.
Tu je to 'FirstAssistant'.
'setupWidget' - asi takto:
'Moja mila karta, chcel by som, aby ...'
'... si umiestnila tzv. Widget (moze byt obrazok, tlacidlo, ...).'
Dalej ...
... ak mate 'buttonLabel'.
S menom tlacidla, tu je to 'nom du bouton'.
'ButtonClass' s ...
... hodnotou 'affirmative'.
Ak napisete 'affirmative' tlacidlo bude zelene.
Ak potrebujete cervene tlacidlo, napiste 'negative'.
Ak napiseme 'secondary', tlacidlo bude sede.
Za dalsie potrebujeme riadit, ...
... teda ked klikneme na tlacidlo ...
... by bolo dobre ...
... aby sa nieco udialo ...
... idealne to co chceme my.
Preto pouzijeme funkciu, ktoru ...
... volame 'handleButtonPress1'.
Mozme ju nazvat aj 'Jozko', je to jedno.
Dalej 'Mojo.Event.listen' ...
'Mojo' je program, ktory tak trocha riadi SDK.
V ludovej reci :)
Mojo pocuvaj toto, tuto udalost, ...
... po kliknuti na tlacidlo ...
... ty vykonas, spustis tuto funkciu 'handle....1'.
Isto sa pytate, kde je ta funkcia.?
No a prave, tu si treba vytvorit ;-)
V nasom dokumente je uz napisana, takze ...
... staci ak si ju skopirujete.
Ideme do suboru 'first-assistant.js' ...
... a pridame si nasu funkciu.
Voila.
Do vnutra funkcie si mozme vpisat co potrebujeme.
Budeme tym riadit, co sa stane po ...
... kliknuti na tlacidlo.
ULOZIME!
Doteraz sme pracovali s JavaScriptom.
To znamena, ze po spusteni emulatora ...
... by sme nemali nic vidiet.
Pretoze subor HTML je prazdny.
Vratime sa spat k pomocnemu dokumentu.
V subore 'first-scene.html' ...
... umiestnime kratky text z dokumentu.
Tu sa uz jedna o HTML kod.
V tomto kode mame ...
<div>
<div> to je ako taka krabica, skatula.
Skatula do ktorej mozme nieco dat.
Text, tlacidlo, zoznam, atd. ...
Dalej vidime 'x-mojo' ...
... ktoremu hovorime, ze chcem aby to ...
... bolo tlacidlo.
Toto tlacidlo pomenujeme 'button-1'.
To je to za 'id='.
Teraz dolezita informacia!
Pre to aby JavaScript komunikoval s ...
... kodom HTML.
Vidno to v nasom pripade na ...
... tacidle 'button-1', ktore sme si ...
... predtym vytvorili v JavaScriptovom subore.
S funkciou 'handleButtonPress1'.
No a my potrebujeme odkaz-prepojenie (link), ...
... medzi JavaScriptom a HTML suborom.
No a prave prepojenim je ten 'id' - identifikator.
Tu je to 'button-1'.
Hovori nam to, ze ...
... 'button-1', ktory vidime v JavaScripte ...
... je uplne ten isty co vidime v HTML.
id='button-1'
Po prepojeni tychto dvoch dokumentov ...
ULOZIME!
Teraz, ak vsetko je v poriadku ...
... by sme mali po spusteni emulatora ...
... vidiet tlacidlo.
Presne ako vo videu.
Ak nan klikneme, nic sa nedeje.
To je v poriadku.
Pretoze sme si este nic nepridali do ...
... funkcie, ktora reaguje na stlacenie tlacidla.
Najskor si vsak vytvorime ...
… skatulu (srandujem).
V HTML subore pridame este jeden <div>.
Presne ako vo videu <div></div>.
<div> je spodok, akoze krabice ...
... a spolu z lomitkom </div> je akoze vrchnak ...
... krabice, cim ju zatvorime.
Co je medzi, to je v krabici ;-)
Priradime krabici identifikator.
Napriklad id='resultat'.
Takze mame dve krabice, ...
... alebo <div> ak chcete.
V prvej mame tlacidlo.
V druhej by som chcel textove pole.
Teda do id='resultat'.
A este lepsie bude ak po kliknuti na ...
... funkcia 'handleButtonPress1' ...
... bude spustena a ...
... naplni nasu krabicu textom.
Pre dosiahnutie tohto vysledku ...
... (vlozenie textoveho pola do <div>) ...
... napiste co vidite vo videu.
$('resultat').update('Ahoj mamicka ako sa mas? Ja super!');
Zacina to dolarom, potom obycajna zatvorka ...
... a do uvodzoviek umiestnite ID.
Tym vlastne prepojime krabicu z nalepkou 'resultat' ...
... s nasou funkciou, kde povieme aby ...
... sa vypisal nami zadany text.
Tu je to 'coucou les devcast...' ...
... vy si vsak mozte napisat co chcete :-)
Ak pracujete v Notepad++ vidite ako pekne sa ...
... zafarbuje text, pre lepsiu prehladnost!
ULOZIME!
Stane sa, ze zabudnete ulozit.
Vtedy sa kompilacie zasekne a vyhodi chybu. Ale to nic.
Spustime kompilaciu a tym padom aj emulator ...
a kuzlo je na svete.
Po stlaceni tlacidla vidime zadany text.
To je asi vsetko, mozme spravit malu rekapitulaciu.
Vytvarali sme tlacidlo.
Este si mozme ukazat ...
... ak zadame 'negative'.
Znova skompilujeme a vidime ...
... cervene tlacidlo.
Ak zadame 'secondary' ...
... prekompilujeme ...
... mame sede tlacidlo.
Vsetko ostatne funguje tak ako doteraz.
No a na mieste nasho textu mozme nechat ...
... zobrazit rozne veci, vysledky vypoctov, obrazok, ...
Takze tlacidlo, ...
... naucili sme Mojo pocuvat ...
... funkcia, ktora podava vysledky ...
... tuna konkretne zobrazuje text ...
... v krabici - <div> ...
... hned pod tlacidlom.
Dufam, ze vsetko bolo jasne ...
... ak mate otazky, tak sa nehanbite opytat ...
Dakujeme za pozretie videa!
Teraz uz Vas necham sa pohrat so ...
... vsetkym tym tu a ...
... nabuduce si zase ukazeme nieco nove.
Titulky vytvoril ...
... webOS blog Slovakia ;-)