http://www.kiwiki.info/api.php?action=feedcontributions&feedformat=atom&user=DusanKiwiki - Príspevky používateľa [sk]2026-04-16T20:01:55ZPríspevky používateľaMediaWiki 1.34.0http://www.kiwiki.info/index.php?title=Bakal%C3%A1rske_pr%C3%A1ce&diff=6908Bakalárske práce2010-09-05T13:58:57Z<p>Dusan: </p>
<hr />
<div>{{Ako_pisat_wikiPracu|Dusan|Ggaspar|Jakub Trska}}<br />
<br />
<br />
<div id="mainpage_topbox"><br />
<div id="mainpage_pagetitle">Bakalárske práce 2009/2010</div><br />
{| class="wikitable sortable" border=1 cellpadding=5 cellspacing=0 style="width:100%"<br />
|- <br />
!Autor<br />
!Názov práce<br />
!style="width:150px"|Stav práce<br />
!style="width:90px"|Zadanie<br />
|-<br />
|Milan Porubský<br />
|[[Systém tvorby rozvrhu]]<br />
|{{stav_prace|100}}<br />
|[[Systém tvorby rozvrhu (Zadanie)|Zadanie BP]]<br />
|-<br />
|Dušan Pagáč<br />
|[[Off-line funkcionalita on-line web aplikácií]]<br />
|{{stav_prace|98}}<br />
|[[Off-line funkcionalita on-line web aplikácií (Zadanie)|Zadanie BP]]<br />
|-<br />
|Dávid Ďurika<br />
|[[Štatistický modul v systéme rozvrhu FM]]<br />
|{{stav_prace|45}}<br />
|[[Štatistický modul v systéme rozvrhu FM (Zadanie)|Zadanie BP]]<br />
|-<br />
|Gabriel Gašpar, Bc.<br />
|[[Autonómny systém pre zber teplotných dát z pôdneho profilu]]<br />
|{{stav_prace|100}}<br />
|[[Autonómny systém pre zber teplotných dát z pôdneho profilu (Zadanie)|Zadanie BP]]<br />
|-<br />
|Lukáš Krajči<br />
|[[Otvorené formáty súborov kancelárskych softvérov]]<br />
|{{stav_prace|66.6}}<br />
|[[Otvorené formáty súborov kancelárskych softvérov (Zadanie)|Zadanie BP]]<br />
|-<br />
|Martin Pilař<br />
|[[Poloautomatický parkovací systém]]<br />
|{{stav_prace|100}}<br />
|[[Poloautomatický parkovací systém (Zadanie)|Zadanie BP]]<br />
|-<br />
|Ľubomír Milko<br />
|[[Aplikácie teórie grafov a teórie hier v rozhodovacích problémoch]]<br />
|{{stav_prace|70}}<br />
|[[Aplikácie teórie grafov a teórie hier v rozhodovacích problémoch (Zadanie)|Zadanie BP]]<br />
|-<br />
|Peter Magala<br />
|[[Bezpečnosť webových aplikácií]]<br />
|{{stav_prace|100}}<br />
|[[Bezpečnosť webových aplikácií (Zadanie)|Zadanie BP]]<br />
|-<br />
|Ján Čižmárik<br />
|[[Metódy riešenia optimalizačných problémov]]<br />
|{{stav_prace|20}}<br />
|[[Metódy riešenia optimalizačných problémov (Zadanie)|Zadanie BP]]<br />
|-<br />
|Martin Cibulka<br />
|[[Nastavenie priority procesu a vplyv na jeho činnosť v operačnom systéme]]<br />
|{{stav_prace|98}}<br />
|[[Nastavenie priority procesu a vplyv na jeho činnosť v operačnom systéme (Zadanie)|Zadanie BP]]<br />
|-<br />
|Lukáš Ronec<br />
|[[Generátor náhľadov fotografií umiestnených na webe]]<br />
|{{stav_prace|0}}<br />
|[[Generátor náhľadov fotografií umiestnených na webe (Zadanie)|Zadanie BP]]<br />
|-<br />
|Július Jančo<br />
|[[Implementácia protokolu RC5 na platforme procesora Cypress]]<br />
|{{stav_prace|100}}<br />
|[[Implementácia protokolu RC5 na platforme procesora Cypress (Zadanie)|Zadanie BP]]<br />
|-<br />
|Juraj Prívara<br />
|[[Použitie mikrouchopovačov MEMS]]<br />
|{{stav_prace|65}}<br />
|[[Použitie mikrouchopovačov MEMS (Zadanie)|Zadanie BP]]<br />
|-<br />
|Emanuel Dubovan<br />
|<br />
|<br />
|<br />
|-<br />
|Dušan Vojsovič<br />
|[[Porovnanie výkonnosti virtualizačných softvérových produktov]]<br />
|{{stav_prace|20}}<br />
||[[Porovnanie výkonnosti virtualizačných softvérových produktov (Zadanie)|Zadanie BP]]<br />
|-<br />
|Jozef Janega<br />
|[[Fotoelektrický parkovací senzor]]<br />
|{{stav_prace|10}}<br />
||[[Fotoelektrický parkovací senzor (Zadanie)|Zadanie BP]]<br />
|}<br />
</div><br />
<br />
<div id="mainpage_topbox"><br />
<div id="mainpage_pagetitle">Bakalárske práce 2008/2009</div><br />
{| class="wikitable sortable" border=1 cellpadding=5 cellspacing=0 style="width:100%"<br />
|- style="background-color:yellow"<br />
! Autor<br />
!Názov<br />
!style="width:150px"|Stav práce<br />
!style="width:90px"|Zadanie<br />
|-<br />
|Milan Lokšík<br />
|[[Simulácia a modelovanie technologických procesov pomocou stavebnice FESTO]]<br />
|{{stav_prace|80}}<br />
|- <br />
|Ivana Zuzinová<br />
|[[Pokročilé vlastnosti skiptovacích jazykov]]<br />
|{{stav_prace|100}}<br />
|-<br />
|Martin Starosta<br />
|[[Webové služby v Jave]]<br />
|{{stav_prace|100}}<br />
|}<br />
</div><br />
Staršie práce budú pridané.<br />
<br />
[[Kategória:Študentské práce]]</div>Dusanhttp://www.kiwiki.info/index.php?title=Off-line_funkcionalita_on-line_web_aplik%C3%A1ci%C3%AD&diff=6906Off-line funkcionalita on-line web aplikácií2010-09-05T13:57:49Z<p>Dusan: </p>
<hr />
<div>[[Kategória:Študentské práce]]<br />
[[Kategória:Bakalárske práce]]<br />
[[Kategória:Informatika]]<br />
[[Kategória:php]]<br />
[[Kategória:web]]<br />
{{Hlavička_FM|{{PAGENAME}}|Dušan Pagáč|Ing. Juraj Ďuďák|<br />
2009/2010<br />
|Bakalárska práca|Mechatronika}} <br />
{{Praca_uvod|1|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}<br />
__TOC__<br />
{{Abstrakt<br />
|Bakalárska práca sa zaoberá web aplikáciami, ktoré sú schopné pracovať aj v režime off-line. V prvej kapitole je rozobraná architektúru web aplikácií. Zaoberá sa štruktúrou webovej aplikácie pracujúcej aj v režime off-line. V druhej časti je popísaná technológia Google Gears od firmy Google, ktorá toto umožňuje. Následne sú uvedené výhody a nevýhody tejto technológie a možnosti jej praktického využitia vo webových aplikáciách. V práci je spomenutá aj nová špecifikácia HTML5, ktorá taktiež prináša off-line podporu pre webové aplikácie. V ďalšej časti sa venuje aplikáciám na tvorbu a zobrazovanie rozvrhov a návrhu front-endu rozvrhu Fakulty mechatroniky. Na zabezpečenie off-line funkcionality sme použili rozšírenie Google Gears.<br />
|This bachelor work deals with web applications which are able to work in an off-line mode. The first part is concerned with the architecture of web applications. It is devoted to the structure of web-application able to work also in the off-line mode. The Google Gears technology by the Google company which makes this possible is described in the second part. Consequently, the advantages and the disadvantages are stated as well as the posibilities of&nbsp;the&nbsp;&nbsp;practical usage in the web aplications. The new specification HTML5 that also offers off-line support for web applications is mentioned in this work, too. The final part is&nbsp;dedicated to the applications used for creation and display of timetables and design of front-end directly for Faculty of mechatronics. The off-line functionality has been ensured by the Google Gears extention.<br />
}}<br />
<br />
'''Úvod'''<br />
<br />
S obrovskou rýchlosťou akou sa internet rozšíril a stal sa každodennou súčasťou nášho života sme si ani neuvedomili, ako sme od neho závislí. Stretávame sa s ním na každom mieste, či už je to v práci, škole alebo domácnosti. Veľký problém nastáva pri nedostupnosti signálu, napríklad v odľahlých častiach alebo pri výpadku pripojenia. Tento problém sa snaží vyriešiť firma Google so svojim open-source rozšírením Google Gears pre internetové prehliadače. Zároveň postupne presadzuje používanie tejto technológie aj vo svojich aplikáciách. Vďaka open-source je možné, aby túto technológiu použil každý. <br />
Pre správne pochopenie ako táto technológia pracuje, rozoberieme v prvej kapitole samotnú štruktúru web aplikácií. Následne sa budeme venovať optimálnej štruktúre web aplikácií s podporom režimu off-line, funkčnosti a synchronizácií. <br />
Druhá časť tejto práce je zameraná na objasnenie princípu činnosti Google Gears a vysvetľuje prácu s touto technológiou. Spomenuté sú aj webové aplikácie, ktoré túto výhodu podpory v režime off-line v praxi využívajú. Táto kapitola sa venuje aj novej špecifikácií značkovacieho jazyka HTML5, ktorá je v súčasnosti vo vývoji a v budúcnosti má obsahovať podporu off-line aplikácií. <br />
Tretia kapitola sa zaoberá systémami na vizualizáciu rozvrhu. V nej si rozoberieme akým spôsobom sa zobrazujú výstupné dáta programov a web aplikácií na tvorbu rozvrhu. Zhodnotíme aké nedostatky spôsobujú neprehľadnosť v používateľskom prostredí.<br />
Záverečná časť sa venuje praktickej časti tejto práce, a to návrhu používateľského rozhrania rozvrhu Fakulty mechatroniky a zabezpečeniu funkcionality v režime off-.line.<br />
<br />
<br />
=Štruktúra webovej aplikácie=<br />
<br />
Webová aplikácia je aplikácia, ktorá je prístupná pomocou webového prehliadača cez sieť internet a intranet. Skladá sa z viacerých vrstiev. Rozoznávame dvojvrstvové alebo trojvrstvové, niekedy nazývané viacvrstvové. <br />
<br />
==Dvojvrstvové web aplikácie==<br />
<br />
Dvojvrstvová aplikácia sa skladá z klientskej a dátovej vrstvy. Klientska vrstva obsahuje väčšinu aplikačnej logiky, s ktorou sa pracuje priamo nad dátovým zdrojom. Takýto dátový zdroj môže byť reprezentovaný relačnou databázou. Ďalšie zdroje môžu byť súbory alebo iné aplikácie. Schému dvojvrstvovej web aplikácie môžeme vidieť na obrázku (Obr 1.1).<br />
<br />
[[Image:Example.jpg|center|framed|Obr 1.1 Schéma dvojvrstvovej web aplikácie. Zdroj: [1] ]]<br />
<br />
Nevýhody tohto modelu sa ukázali pri vzrastajúcej komplexnosti klientskych aplikácií. S ich zložitosťou vzrastali aj výkonové nároky na klientské počítače. S masívnym rozšírením aplikácií boli softvérové firmy nútené reagovať na požiadavky klientov. Napríklad zdieľanie zdrojov, obmedzenie dátového prenosu atď. Preto sa začalo uvažovať o trojvrstvovej architektúre, ktorá by tieto požiadavky pokryla.<br />
<br />
<br />
==Trojvrstvové web aplikácie==<br />
<br />
Riešenie sa našlo v podobe pridania tretej – strednej vrstvy. Samozrejme sa nejednalo len o pridanie ďalšej vrstvy. Bolo nutné špecifikovať jednotlivé vrstvy, respektíve ich úlohu v architektúre. Trojvrstvovú architektúru zobrazuje schéma (Obr. 1.2).<br />
<br />
[[Súbor:bp_off_web_1.jpg|center|framed|Obr. 1.2 Schéma trojvrstvovej aplikácie. Zdroj: [1]]]<br />
<br />
===Zmeny v klientskej vrstve===<br />
<br />
Najväčšia zmena nastala v prípade klientskej vrstvy. Vďaka novo definovanej aplikačnej vrstve bolo možné logiku aplikácie presunúť na server tejto vrstvy. Celý výpočtový výkon bol prenesený na výkonné servery. Presunutím aplikačnej logiky na jedno miesto sme dosiahli lepšiu možnosť jej zdieľania, správy a dostupnosti. Významnou mierou sa podarilo redukovať dátový prenos, pretože komunikácia je sústredená medzi serverom a dátovým zdrojom.<br />
<br />
===Aplikačná vrstva===<br />
<br />
Z pohľadu doby prešla aplikačná vrstva najväčším vývojom. Táto vrstva, resp. aplikačná logika, zaisťuje prístup k dátam, prácu s dátami a ich poskytnutie vo vhodnom formáte (XML, HTML) pre klientskú vrstvu. <br />
<br />
==Model-View-Controller (MVC)==<br />
<br />
Model-view-controller je architektonický vzor využívaný pri tvorbe aplikácií, ktorý oddeľuje dátový model, používateľské rozhranie a riadiacu logiku. Vytváranie aplikácie s využitím architektúry MVC vyžaduje tri komponenty:<br />
<br />
===Model===<br />
Model je funkčným a dátovým základom celej aplikácie. Poskytuje prostriedky pre prístup k dátovej základni, stavom aplikácie, ukladaniu a aktualizácií.<br />
===View===<br />
View zobrazuje obsah Modelu, zaisťuje grafický či iný výstup aplikácie. Cez Model pristupuje k dátam, stavom aplikácie a špecifikuje ako majú byť prezentované. Pri zmene stavu Modelu aktualizuje zobrazenie. V prípade webových aplikácií View generuje príslušný HTML kód, ktorý je odoslaný prehliadaču ako odpoveď na požiadavka.<br />
===Controller===<br />
Controller definuje správanie aplikácie. Spracováva všetky vstupy a udalosti z používateľského rozhrania. Na ich základe volá príslušné procesy Modelu, mení stav a pod. Podľa udalostí prijatých od používateľa a podľa výsledkov akcií Modelu potom Controller vyberie vhodné View pre ďalšie zobrazenie.<br />
===Výhody vzoru MVC===<br />
* Jednoduché sprístupnenie pre rôzne druhy klientov. Pre zavedenie podpory ďalšieho klienta stačí nadefinovať len nové View.<br />
* Minimalizácia duplicity zdrojového kódu.<br />
* Rozdelenie vývojárskych úloh a&nbsp;samostatný vývoj jednotlivých častí.<br />
* Znovupoužiteľnosť kódu.<br />
* Vysoká komplexnosť návrhu a jednoduchšia rozšíriteľnosť aplikácie.<br />
<br />
<br />
==Optimálna štruktúra aplikácie s podporou režimu off-line==<br />
Webové aplikácie, ktoré sú postavené s podporou off-line režimu majú tendenciu byť štruktúrované tak, že ich dátová vrstva je izolovaná. Väčšina dnešných web aplikácií takto stavaných nie je. Pravdepodobne najvýhodnejšia štruktúra je zobrazená v schéme (Obr. 1.3). <br />
<br />
[[Súbor:bp_off_web_3.jpg|center|framed|Schéma web aplikácie podporujúcej režime off-line. Zdroj: [1]]]<br />
<br />
Hlavným krokom pre dosiahnutie vhodnej architektúry je vytvorenie lokálnej dátovej vrstvy, ktorá využíva lokálnu databázu. Podľa toho či ste on-line alebo off-line, sa dáta získavajú zo servera alebo z lokálneho úložiska. O prepínanie medzi dátovým vrstvami sa stará prepínač. Prepínač je časť kódu, ktorý rozhoduje odkiaľ sa budú dáta čerpať. <br />
<br />
==Funkcie dostupné v režime off-line==<br />
Nedá sa zabezpečiť, aby všetky dostupné funkcie web aplikácie boli prístupné aj v off-line režime. Je zbytočné kopírovať celú databázu zo servera, keď budeme využívať len časť. Preto je vhodné rozhodnúť, ktoré dáta budú uložené lokálne. Implementovaním logiky rozhodovania do našej aplikácie zabezpečíme, že určité dáta bude získavať z lokálneho úložiska a ďalšie zo servera.<br />
<br />
Niektoré dáta nemá zmysel ukladať na lokálny disk a&nbsp;je vhodnejšie ich získavať zo servera. Sú to predovšetkým:<br />
<br />
* dáta, ktoré sa menia často alebo dokonca v&nbsp;reálnom čase,<br />
* dáta, ktoré majú zmysel len v&nbsp;režime on-line ako instant messaging,<br />
* dáta, ktoré sú náročné na miesto na disku.<br />
<br />
Optimálne riešenie je používať lokálne úložisko čo najviac ako je to možné. Pretože je to obyčajne rýchlejšie ako pripojenie na vzdialený server. Ak chceme, aby aplikácia pracovala čo najviac s&nbsp;lokálnymi dátami, bude toto implementovanie náročnejšie. Preto už pri návrhu aplikácie musíme zvážiť, čo je pre nás výhodnejšie.<br />
<br />
<br />
==Forma off-line aplikácií==<br />
Typ aplikácie môže mať modálnu alebo nemodálnu formu. Modálne aplikácie obyčajne rozlišujú on-line a off-line mód indikáciou cez zmenu v používateľskom rozhraní. Používateľ sa podieľa na zmene stavu.<br />
Nemodálne aplikácie prechádzajú medzi on-line a off-line stavmi bez zmien v používateľskom rozhraní. Používateľ sa nemusí zúčastňovať na prepínaní stavov. Aplikácia to robí automaticky.<br />
<br />
<br />
===Modálne aplikácie===<br />
V&nbsp;modálnych aplikáciách, ak je aplikácia on-line, komunikuje so serverom. Ak je off-line, využíva lokálne zdroje. V&nbsp;prípade zmeny módov je nutná synchronizácia dát.<br />
<br />
Výhody:<br />
<br />
* Relatívne jednoduchá implementácia.<br />
Nevýhody:<br />
<br />
* Používateľ musí pamätať na prepínanie módov. Ak zabudne, nebude mať v&nbsp;off-line móde potrebné dáta alebo bude pracovať on-line &nbsp;bez podpory off-line úložiska.<br />
* Ak je internetové pripojenie prerušované, používateľ si musí zvoliť jedno z&nbsp;nastavení alebo si bude musieť neustále prepínať medzi módmi podľa stavu pripojenia.<br />
* Keďže lokálne zdroje nie sú vždy aktuálne, nemôžu byť pri pripojení na server využívané na zlepšenie podpory aplikácie.<br />
<br />
<br />
===Nemodálne aplikácie===<br />
V&nbsp;prípade nemodálnych aplikácií pracuje aplikácia s&nbsp;predpokladom off-line stavu alebo možnosti náhodnej straty pripojenia. Aplikácia využíva lokálne zdroje v&nbsp;maximálne možnej miere, a&nbsp;keď je server dosiahnuteľný, prebieha neustála synchronizácia dát. Tá prebieha taktiež pri prechode do on-line stavu.<br />
<br />
Výhody:<br />
<br />
* Používateľ sa nemusí starať o&nbsp;to,&nbsp;či je pripojený alebo v&nbsp;akom je stave jeho aplikácia<br />
(on-line/off-line).<br />
<br />
* Aplikácia pracuje plynulo aj v&nbsp;prípade prerušovaného pripojenia.<br />
* Keďže je lokálny zdroj aktualizovaný, môže byť využívaný na optimalizáciu serverového pripojenia.<br />
Nevýhody:<br />
<br />
* Náročná implementácia.<br />
* Musí sa dbať na to, aby proces synchronizácie nezabral príliš veľa zdrojov a&nbsp;nespôsobil spomalenie celej aplikácie.<br />
* Testovanie aplikácie ja náročnejšie, keďže logika synchronizácie sa deje na&nbsp;pozadí a&nbsp;nie ako odozva na&nbsp;špecifický krok používateľa.<br />
<br />
==Synchronizácia dát==<br />
Bez ohľadu na pripojenie alebo modálnu stratégiu dáta v&nbsp;lokálnej databáze vystupujú zo&nbsp;synchronizácie so serverovými dátami. Napríklad v&nbsp;týchto prípadoch:<br />
<br />
* Používateľ urobí zmeny v&nbsp;off-line stave.<br />
* Dáta na serveri sú zdieľané a&nbsp;môžu byť zmenené externými subjektmi.<br />
* Dáta prichádzajú z&nbsp;vonkajšieho zdroja (RSS).<br />
<br />
Proces odstraňovania týchto rozdielov tak, že dva zdroje sa stávajú totožnými, nazývame synchronizácia. Existuje mnoho prístupov k&nbsp;synchronizácii, ale&nbsp;žiadny nie je výhodný pre&nbsp;všetky situácie. Vybrané riešenie by malo byť čo najvýhodnejšie pre našu aplikáciu.<br />
<br />
Pre príklad sú uvádzané dve všeobecné synchronizačné stratégie.<br />
<br />
===Manuálna synchronizácia===<br />
Najjednoduchší spôsob synchronizácie je tzv. ''manuálna synchronizácia''. Manuálna preto, lebo používateľ sám volí čas synchronizácie. Môže byť implementovaná jednoducho nahraním všetkých starých dát na server a&nbsp;následným stiahnutím novej kópie dát zo serveru pred prechodom na off-line stav.<br />
<br />
Manuálna synchronizácia ma nasledovné požiadavky:<br />
<br />
* Objem dát dostatočne malý na stiahnutie v&nbsp;primeranom čase.<br />
* Používateľ sám stanovuje prechod do režimu off-line, väčšinou tlačidlom v&nbsp;používateľskom prostredí.<br />
<br />
Problémy tejto metódy a&nbsp;jej off-line módu:<br />
<br />
* Užívatelia nie vždy vedia okamžitý stav svojho pripojenia. Internetové pripojenie môže byť náhle odpojené alebo prerušované.<br />
* Užívatelia môžu zabudnúť synchronizovať dáta pred prechodom do stavu off-line.<br />
<br />
Manuálna synchronizácia môže byť na začiatok vhodným spôsobom synchronizácie, najmä kvôli relatívne jednoduchej implementácii. Bohužiaľ, vyžaduje uvedomelosť používateľa a&nbsp;jeho zapojenie do procesu synchronizácie.<br />
<br />
===Synchronizácia na pozadí===<br />
V prípade synchronizácie na pozadí aplikácia neustále synchronizuje dáta medzi lokálnym zdrojom a&nbsp;serverom. To môže byť uskutočňované opakovanými pokusmi pripájať sa na server alebo v&nbsp;lepšom prípade umožniť serveru presúvať dáta ku klientovi.<br />
<br />
Výhody synchronizácie na pozadí:<br />
<br />
* Dáta sú pripravené vždy, keď sa používateľ rozhodne pre prechod do režimu off-line alebo je náhodne odpojený.<br />
* Zlepšenie výkonu v&nbsp;prípade využívania pomalého internetového pripojenia.<br />
<br />
Nevýhody:<br />
<br />
* Nevýhodou je možnosť spomalenia pri kopírovaní dát na pozadí. Spomalenie sa dá minimalizovať využitím rôznych možností (Google Gears WorkerPool).<br />
<br />
[[Súbor:bp_off_web_4.jpg|center|framed|Architektúra web aplikácie so synchronizáciou na pozadí. Zdroj: [1]]]</div>Dusanhttp://www.kiwiki.info/index.php?title=N%C3%A1vrh_pou%C5%BE%C3%ADvate%C4%BEsk%C3%A9ho_rozhrania_rozvrhu_FM_TnUAD&diff=6905Návrh používateľského rozhrania rozvrhu FM TnUAD2010-09-05T13:56:28Z<p>Dusan: /* RozvrhFM – návrh a implementácia nového rozvrhu fakulty mechatroniky */</p>
<hr />
<div>[[Kategória:Študentské práce]][[Kategória:Bakalárske práce]][[Kategória:Informatika]][[Kategória:php]][[Kategória:web]]<br />
{{Praca_uvod|4|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}<br />
<br />
__TOC__<br />
<br />
=RozvrhFM – návrh a implementácia nového rozvrhu fakulty mechatroniky=<br />
<br />
Úlohou tejto bakalárskej práce je navrhnúť používateľské rozhranie (frontend) rozvrhu Fakulty mechatroniky pre režim on-line aj off-line. Pri návrhu bol kladený dôraz na to, aby bolo používateľské prostredie dostatočne prehľadné a jednoduché. <br />
Webová aplikácia RozvrhFM je databázová aplikácia. Entitno relačný model databázy nie je v tejto práci potrebné uvádzať, pretože pre získanie údajov z databázy je pripravený databázový pohľad (view) rozvrh_view, v ktorom sú všetky požadované údaje pre zobrazenie rozvrhu. Štruktúra tohto pohľadu je zobrazená v tabuľke 4.1.<br />
<br />
Tabuľka 4.1 Štruktúra databázového pohľadu ''rozvrh_view''<br />
<br />
{|class="prettytable" width="600px"<br />
|align = "center"|'''Pole'''<br />
|align = "center"|'''Typ'''<br />
|align = "center"|'''Význam'''<br />
<br />
|-<br />
|subject <br />
|varchar(255)<br />
|Názov predmetu<br />
<br />
|-<br />
|subject_abbr <br />
|varchar(20)<br />
|Skratka predmetu<br />
<br />
|-<br />
|subject_id <br />
|int(11)<br />
|ID predmetu<br />
<br />
|-<br />
|hours <br />
|tinyint(1)<br />
|Dĺžka trvania prednášky v hodinách<br />
<br />
|-<br />
|type <br />
|varchar(10)<br />
|Typ vyučovacej hodiny (prednáška, cvičenie, laboratóriá)<br />
<br />
|-<br />
|color <br />
|varchar(7)<br />
|Farba<br />
<br />
|-<br />
|week <br />
|enum(<nowiki>’</nowiki>k<nowiki>’</nowiki>, <nowiki>’</nowiki>p<nowiki>’</nowiki>, <nowiki>’</nowiki>n<nowiki>’</nowiki>)<br />
|Predmet sa vyučuje: každý, párny, nepárny týždeň<br />
<br />
|-<br />
|day <br />
|tinyint(1)<br />
|Deň v&nbsp;týždni (1-5)<br />
<br />
|-<br />
|hour <br />
|tinyint(2)<br />
|Hodina, v ktorej začína vyučovanie predmetu<br />
<br />
|-<br />
|room <br />
|varchar(10)<br />
|Miestnosť<br />
<br />
|-<br />
|room_id <br />
|int(11)<br />
|ID miestnosti<br />
<br />
|-<br />
|provides <br />
|varchar(8)<br />
|Katedra, ktorá predmet zabezpečuje<br />
<br />
|-<br />
|meno <br />
|varchar(128)<br />
|Meno vyučujúceho<br />
<br />
|-<br />
|priezvisko <br />
|varchar(128)<br />
|Priezvisko vyučujúceho<br />
<br />
|-<br />
|tituly <br />
|varchar(128)<br />
|Tituly vyučujúceho<br />
<br />
|-<br />
|user_katedra <br />
|varchar(128)<br />
|Katedra, pod ktorú patrí vyučujúci<br />
<br />
|-<br />
|user_id <br />
|int(11)<br />
|ID vyučujúceho<br />
<br />
|-<br />
|user_abbr <br />
|varchar(20)<br />
|Skratka mena vyučujúceho<br />
<br />
|-<br />
|office <br />
|varchar(10)<br />
|Číslo kancelárie vyučujúceho<br />
<br />
|-<br />
|subclass <br />
|var(18)<br />
|Krúžok, ktorý má vyučovanie<br />
<br />
|-<br />
|subclass_id <br />
|int(11)<br />
|ID krúžku<br />
<br />
|-<br />
|branch <br />
|varchar(5)<br />
|Odbor<br />
<br />
|-<br />
|branch_num <br />
|int(1)<br />
|Číslo odboru<br />
<br />
|-<br />
|subclass_sign <br />
|varchar(2)<br />
|Koncové dvojčíslie krúžku<br />
<br />
|-<br />
|year <br />
|tinyint(1)<br />
|Rok štúdia <br />
<br />
|-<br />
|note <br />
|varchar(255)<br />
|Poznámka<br />
<br />
|}<br />
<br />
<br />
==Grafický návrh používateľského rozhrania==<br />
Grafický návrh používateľského rozhrania je veľmi dôležitý, pretože tvorí časť, s ktorou je používateľ priamo konfrontovaný. Cieľom rozvrhnutia jednotlivých častí (Obr. 4.1) je zobrazenie čo najväčšej časti výpisu tabuľky rozvrhu bez nutnosti posúvania zobrazenej plochy stránky. Oproti verzii opisovanej v kapitole 3.2.1 pribudne niekoľko panelov. Vrchný panel bude obsahovať ikonu režimu práce (on-line/off-line). Ikona bude zobrazovaná len v prípade nainštalovaného rozšírenia Google Gears. Z formulára na výber jednotlivých parametrov pre filtrovanie sme odstránili niekoľko prvkov formulára, ktoré neboli dôležité. Ponechané boli iba prvky na výber krúžku, predmetu, vyučujúceho a miestnosti. V pravej časti pribudne panel na zobrazovanie informácií o zmene v rozvrhu. Pod ním je panel odkazov na export rozvrhu do rôznych formátov a ponuka inštalácie rozšírenia Google Gears. <br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_13.png|framed|none]]<br />
<br />
Obr. 4.1 Návrh prezentačnej vrstvy rozvrhu<br />
<br />
Najdôležitejšou časťou je zobrazenie samotnej tabuľky rozvrhu. Oproti súčasnej verzií (Obr. 3.3) je do návrhu novej tabuľky rozvrhu (Obr. 4.2) pridaná vodorovná časová os. Každý ďalší riadok tabuľky reprezentuje deň v týždni a zobrazuje predmety, ktoré do neho patria. V prípade, že sa predmet koná len v nepárny týždeň, rozdelí sa riadok na dva riadky. Tie potom reprezentujú párny a nepárny týždeň. Prednáška je označená modrou, cvičenie červenou a laboratóriá zelenou farbou. Každá farebná bunka obsahuje názov predmetu, meno vyučujúceho a miestnosť, kde sa vyučovanie koná. Nasledovným rozvrhnutím tabuľky rozvrhu sme zobrazili potrebné údaje a zlepšili prehľadnosť odstránením prebytočných údajov. <br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_14.png|framed|none]]<br />
<br />
Obr 4.2 Návrh novej tabuľky rozvrhu<br />
<br />
===Realizácia používateľského rozhrania v&nbsp;režime online===<br />
Pri realizácií front-endu rozvrhu fakulty mechatroniky sme použili knižnicu ZEND framework [19].<br />
<br />
====Príprava dát pre formulár====<br />
Formulár (Obr. 4.3) slúži na výber jednotlivých parametrov, podľa ktorých sa budú filtrovať dáta z&nbsp;databázy. Následne sa zobrazí tabuľka zodpovedajúca týmto dátam. Výpis rozvrhu sa dá filtrovať podľa názvu krúžku, predmetu, mena vyučujúceho a&nbsp;učebne.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_15.png|framed|none]]<br />
<br />
Obr 4.3 Formulár na výber dát podľa parametrov<br />
<br />
Zoznam všetkých možností výberu jednotlivých parametrov sa načíta z pohľadov databázy rozvrh_view a rozvrh_view_extern. Formulár nezobrazí prvky výberu, ktoré síce v databáze existujú, ale nie sú zaradené do aktuálne vytvoreného rozvrhu. To znamená, že vo formulári bude chýbať, napr. predmet Matematika I. v prípade, ak nebude mať pridelený aspoň jeden krúžok. Potom by bol tento predmet ako možnosť parametra predmet zbytočný. <br />
<br />
Výber údajov z databázy zabezpečuje trieda indexSearch, ktorá je modelom používaným v kontroléri indexController. Tento kontrolér obsluhuje celý front-end. Výber jednotlivých parametrov má veľmi podobný SQL dopyt, ktorý sa líši iba názvami vyberaných stĺpcov. Preto bola vytvorená metóda bothViewsSelect znázornená v kóde 4.1, ktorá vyberá údaje z oboch pohľadov.<br />
<br />
Kód 5.1 Metóda ''bothViewsSelect'''' ''triedy ''indexSearch''<br />
<source lang="php"><br />
private function bothViewsSelect(array $columns, $cmp = null, array $where = array())<br />
{<br />
$types = array('D' => T_VIEW, 'E' => T_VIEW_E);<br />
$union = array();<br />
<br />
foreach($types as $type => $table) {<br />
$select = $this->_db->select()<br />
->distinct()<br />
->from($table, $columns);<br />
<br />
foreach($where as $wh) {<br />
$select->where($wh);<br />
}<br />
<br />
$union[] = $select;<br />
}<br />
$select = $this->_db->select()->union($union);<br />
$data = $this->_db->fetchAll($select);<br />
if($cmp !== null) {<br />
usort($data, $cmp);<br />
}<br />
return $data;<br />
}<br />
<br />
</source><br />
Metóda ''bothViewsSelect ''má nasledovné parametre:<br />
<br />
* $columns – pole stĺpcov, ktoré sa majú z&nbsp;databázy vybrať<br />
* $cmp – obsahuje názov porovnávacej funkcie, podľa ktorej sa majú výsledky zoradiť, v opačnom prípadne má hodnotu ''null''<br />
* $where – pole podmienok dotazu<br />
<br />
Najskôr sa pre každý pohľad vytvorí ''SELECT'' dopyt zvlášť podľa parametrov metódy. Následne sa tieto dopyty spoja SQL príkazom ''UNION(),'' ktorý zabezpečí, že vyberú iba rozdielne dáta. Výber dát z&nbsp;databázy vykonáva metóda ''fetchAll()'' triedy ''Zend_Db_Select''. Ak&nbsp;parameter ''$cmp'' obsahuje názov porovnávacej funkcie, zavolá sa funkcia ''usort()''. Tá má parameter ''$data'', ktorý obsahuje výsledky dopytu a samotný parameter ''$cmp''. Zoradí pole ''$data'' podľa názvu funkcie uloženého v&nbsp;reťazci ''$cmp.''<br />
<br />
Kód 4.2 Príklad funkcia na porovnanie vyučujúcich<br />
<br />
<source lang="php"><br />
function cmp_teachers($a, $b)<br />
{<br />
if($a['priezvisko'] == $b['priezvisko']) {<br />
return ($a['meno'] < $b['meno']) ? -1 : 1;<br />
} else {<br />
return ($a['priezvisko'] < $b['priezvisko']) ? -1 : 1;<br />
}<br />
}<br />
<br />
</source><br />
<br />
Funkcia na porovnanie vyučujúcich porovnáva najskôr podľa priezviska, v prípade zhody sa porovnáva podľa mena. <br />
<br />
Kód 4.3 Príklad použitia metódy ''bothViewsSelect'' na výber vyučujúcich<br />
<br />
<source lang="php"><br />
public function getUsers()<br />
{<br />
return $this->bothViewsSelect(<br />
array('meno', 'priezvisko', 'tituly', 'user_id'),<br />
'cmp_teachers'<br />
);<br />
}<br />
<br />
</source><br />
<br />
===Výber dát z databázy podľa zvolených parametrov===<br />
<br />
Metóda ''getTTable'' získa z&nbsp;databázy všetky potrebné dáta podľa zadaných parametrov z&nbsp;formulára a&nbsp;pripraví ich pre pomocnú triedu ''TimetableRenderer'', ktorá sa stará o&nbsp;vykresľovanie tabuľky rozvrhu.<br />
<br />
Kód 4.4 Metóda ''getTTable''<br />
<br />
<source lang="php"><br />
public function getTTable($params)<br />
{<br />
$return = array('D' => array(), 'E' => array());<br />
$where = array();<br />
if($params['subclass']) {<br />
$branch_num = substr($params['subclass'], 1, 1);<br />
$year = substr($params['subclass'], 2, 1);<br />
$sign = substr($params['subclass'], 3);<br />
<br />
$where[] = $this->_db->quoteInto('branch_num = ?', (int)$branch_num);<br />
$where[] = $this->_db->quoteInto('year = ?', (int)$year);<br />
$where[] = $this->_db->quoteInto('subclass_sign IS NULL OR subclass_sign = ?', $sign);<br />
}<br />
<br />
</source><br />
<br />
Ak bol zadaný parameter krúžok, získame z&nbsp;neho jednotlivé údaje o&nbsp;číselnom označení odboru, ročníka a&nbsp;krúžka. Tieto údaje potom vložíme do poľa podmienok ''$where''.<br />
<br />
<source lang="php"><br />
if($params['room']) {<br />
$where[] = $this->_db->quoteInto('room_id = ?', (int)$params['room']);<br />
}<br />
if($params['teacher']) {<br />
$where[] = $this->_db->quoteInto('user_id = ?', (int)$params['teacher']);<br />
}<br />
if($params['subject']) {<br />
$where[] = $this->_db->quoteInto('subject_id = ?', (int)$params['subject']);<br />
}<br />
$select = $this->_db->select()<br />
->from(T_VIEW,<br />
array('subject', 'hours', 'color', 'week','day', 'hour', 'room', 'meno', 'priezvisko', 'tituly', 'subclass'));<br />
foreach($where as $wh) {<br />
$select->where($wh);<br />
}<br />
<br />
</source><br />
<br />
Vytvorenie dopytu na pohľad ''rozvrh_view'' v&nbsp;databáze&nbsp;denných študentov.<br />
<br />
<source lang="php"><br />
$data = $this->_db->fetchAll($select);<br />
$return = array();<br />
foreach($data as $row) {<br />
$return['D'][$row['day']][$row['week']][$row['hour']] = array(<br />
'subject' => $row['subject'],<br />
'tituly' => $row['tituly'],<br />
'meno' => $row['meno'],<br />
'priezvisko' => $row['priezvisko'],<br />
'room' => $row['room'],<br />
'subclass' => $row['subclass'],<br />
'hours' => $row['hours'],<br />
'color' => $row['color']<br />
);<br />
}<br />
return $return;<br />
}<br />
<br />
</source><br />
<br />
Metóda ''getTTable'' vracia údaje z&nbsp;databázy do mnohorozmerného poľa, zoradeného podľa našich potrieb pre vykresľovanie.<br />
<br />
===Vykresľovanie rozvrhu===<br />
Vytvorená trieda ''Views_Helpers_TimetableRenderer'' pre časť ''view'' obsahuje metódy:<br />
<br />
* ''timetableRenderer($data, $subclass)'' – ak vo formulári nebol ako parameter vybraný krúžok, vypíše sa rozvrh pre denných aj externých študentov. V&nbsp;opačnom prípade sa rozhodne o&nbsp;tom, ktorý druh rozvrhu sa vypíše, podľa názvu krúžku. Krúžky patriace do externej formy štúdia majú v&nbsp;názvoch písmeno E.<br />
* ''intern()'' – metóda na vykreslenie tabuľky rozvrhu denných študentov, ktorá si volá ďalšie pomocné metódy:<br />
* ''intern_prepareDay($index'') – metóda vracia štruktúru buniek dňa s&nbsp;indexom $index<br />
* ''intern_prepareCell($data)'' – metóda vytvára obsah bunky (predmet, meno vyučujúceho, učebňa, prípadne číslo krúžku). Číslo krúžku sa vypisuje len v&nbsp;prípade, ak sa nejedná o&nbsp;prednášky.<br />
<br />
==Realizácia používateľského rozhrania v&nbsp;režime offline==<br />
Pre zabezpečenie funkcionality aj v&nbsp;režime off-line sme využili rozšírenie Google Gears. Toto rozšírenie nám sprístupní rovnaké dáta a&nbsp;funkcionalitu ako v&nbsp;režime on-line. Aby sa možnosti off-line web aplikácie mohli využívať, je potrebné splniť nasledujúce podmienky:<br />
<br />
* Používateľ musí mať vo svojom prehliadači nainštalované rozšírenie Google Gears.<br />
* Používateľ musí web aplikácií RozvrhFM povoliť využívanie tohto rozšírenia pre&nbsp;konkrétnu doménu.<br />
* Synchronizácia dát musí prebehnúť úspešne.<br />
<br />
===Povolenie prístupu===<br />
Funkcionalita Google Gears je v&nbsp;užívateľskom prostredí reprezentované ikonou (Obr. 4.4). Po jej stlačení sa vysunie panel s&nbsp;tlačidlom ''Inštalácia Google Gears''.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_16.png|framed|none]]<br />
<br />
Obr 4.4 Panel s&nbsp;ikonou Google Gears<br />
<br />
Povolenie prístupu Google Gears pre doménu rozvrhu musí potvrdiť používateľ (Obr 4.5).<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_17.png|framed|none]]<br />
<br />
Obr 4.5 Okno žiadosti o&nbsp;povolenie prístupu Google Gears pre doménu ''rozvrh.fmtnuni.sk''<br />
<br />
Inštalácia prebieha zavolaním metódy ''getPermission'' triedy ''roGears'' v&nbsp;kóde 4.5. V&nbsp;prípade, ak je definovaný objekt ''google.gears'' a&nbsp;doména zatiaľ nemá povolenie, zobrazí sa okno so žiadosťou o&nbsp;povolenie prístupu. Po povolení prístupu sa volá metóda ''createStore'' určená na synchronizáciu.<br />
<br />
Kód 4.5 Metóda ''getPermission'' triedy ''roGears''<br />
<br />
<source lang="javascript"><br />
getPermission : function() {<br />
var perm = true;<br />
if ( 'undefined' != typeof google && google.gears ) {<br />
if ( !google.gears.factory.hasPermission )<br />
perm = google.gears.factory.getPermission('Rozvrh', <br />
'public/img/logo.png' );<br />
if ( perm )<br />
try { roGears.createStore(); } catch(e) { alert(e); } <br />
}<br />
}<br />
</source><br />
<br />
===Synchronizácia===<br />
<br />
<br />
Synchronizácia dát v&nbsp;našej web aplikácií nemusí prebiehať pri každej návšteve web stránky, pretože sa predpokladá, že dáta na serveri nebudú často aktualizované. Preto sme sa rozhodli, že synchronizácia dát prebehne hneď po povolení prístupu pre doménu. Ďalšia synchronizácia bude možná stlačením používateľského tlačidla synchronizácie. Synchronizácia sa vykoná zavolaním metódy ''createStore'' triedy ''roGears'' v kóde 4.6.<br />
<br />
Kód 4.6 Metóda createStore triedy roGears<br />
<source lang="javascript"><br />
createStore : function() {<br />
db = google.gears.factory.create('beta.database'); <br />
if(db)<br />
db.open('rozvrh'); <br />
if ( 'undefined' == typeof google || ! google.gears ) return;<br />
if ( 'undefined' == typeof localServer )<br />
localServer = google.gears.factory.create("beta.localserver");<br />
store = localServer.createManagedStore('rozvrh');<br />
store.manifestUrl = "public/gears/timetable.json";<br />
store.checkForUpdate(); <br />
roGears.syncData();<br />
}<br />
</source><br />
<br />
Metóda ''createStore ''zabezpečí vytvorenie objektov ''beta.database,''&nbsp;''beta.localserver ''a&nbsp;skopíruje súbory nevyhnutné pre beh aplikácie v&nbsp;režime off-line. Zoznam týchto súborov sa&nbsp;nachádza v&nbsp;súbore ''timetable.json''. V&nbsp;našom prípade synchronizujeme aj samotný html dokument, ktorý sa na lokálny disk uloží bez PHP kódu. Používateľ je o procese synchronizácie informovaný upozornením v&nbsp;hornom paneli (Obr 4.6).<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_18.png|framed|none]]<br />
<br />
Obr 4.6 Zobrazenie informácie&nbsp;stavu on-line a&nbsp;synchronizácie<br />
<br />
Synchronizácia databázy sa vykoná zavolaním metódy ''syncData ''v&nbsp;kóde 4.7'' ''triedy ''roGears. ''Metóda db.''execute'' vytvorí tabuľku ''rozvrh'' v&nbsp;lokálnej databáze. Štruktúra tejto tabuľky je rovnaká ako štruktúra tabuľky databázy na serveri, z&nbsp;ktorej získavame údaje. Pomocou funkcie ''getJSON ''knižnice ''jQuery'' získame json objekt, ktorý obsahuje všetky potrebné údaje. Získané údaje z&nbsp;tohto objektu nahráme do tabuľky ''rozvrh''.<br />
<br />
4.7 Metóda ''syncData'''' ''v&nbsp;kóde '' ''triedy ''roGears''<br />
<source lang="javascript"><br />
syncData : function() {<br />
clearInterval(int_checkOnline);<br />
$('#sync').show();<br />
// vytvorenie novej tabulky pre lokalne ulozisko<br />
db.execute('create table if not exists rozvrh' + <br />
' (subject varchar(255), subject_abbr varchar(20), ...<br />
// poziadavka na online rozvrh<br />
$.getJSON(BASEURL + '/json/data/subclass/all', [], function(jpole) {<br />
db.execute('DELETE FROM rozvrh');<br />
// vsetky zaznamy v rozvrhu<br />
for (var i = 0; i < (jpole['intern'].length);i++) <br />
// vlozenie dát do lokalnej tabulky<br />
db.execute('INSERT INTO rozvrh VALUES ... ); <br />
int_checkOnline = window.setInterval(roGears.checkOnline, 3000);<br />
$('#sync').hide();<br />
});<br />
}<br />
</source><br />
<br />
V kóde 4.7 sa nachádza len principiálny kód pre objasnenie synchronizácie databázy. Kompletný výpis zdrojového kódu metódy ''syncData ''sa nachádza na priloženom CD nosiči.<br />
<br />
====Zisťovanie on-line a off-line stavu====<br />
Podľa stavu, v&nbsp;ktorom sa aplikácia nachádza, získavame dáta buď zo servera alebo z&nbsp;lokálneho úložiska. Používateľ je o&nbsp;stave on-line a off-line informovaný pomocou ikony v&nbsp;hornom paneli. Zisťovania stavu zabezpečuje metóda ''checkOnline ''triedy ''roGears v (Kóde 4.5).''<br />
<br />
Kód 4.8 Metóda ''checkOnline ''triedy ''roGears''<br />
<source lang="javascript"><br />
checkOnline : function() {<br />
var PING_TIMEOUT_SECONDS = 1000;<br />
var TIME_BETWEEN_PINGS = 3 * 1000;<br />
if(!int_checkOnline) return;<br />
$.ajax({<br />
url : BASEURL + '/index/checkonline',<br />
dataType : 'text',<br />
timeout : PING_TIMEOUT_SECONDS,<br />
cache : false,<br />
error : function() { ONLINE = false; $('#indicator').attr('class', 'offline'); $('#panel input').hide(); },<br />
success : function() { ONLINE = true; $('#indicator').attr('class', 'online'); $('#panel input').show(); }<br />
});<br />
}<br />
</source><br />
<br />
Metóda ''checkOnline'' každé tri sekundy odošle požiadavku na zvolenú URL. Jedinou funkciou tejto URL je prijímanie požiadaviek na kontrolu stavu on-line/off-line. Ak metóda dostane odpoveď 200,'' ''hodnota premennej ONLINE sa nastaví na ''true.'' V&nbsp;opačnom prípade na ''false''. Čas vypršania požiadavky je nastavený na jednu sekundu. Po uplynutí tohto času je požiadavka považovaná za neúspešnú.<br />
<br />
==Implementácia systému RozvrhFM==<br />
<br />
Web aplikácia Rozvrh FM pracuje na webovom serveri Apache s modulmi PHP a MySQL. Všetok použitý softvér na strane servera je open-source. Pri tvorbe tejto aplikácie sme využili PHP ZEND framework a javascriptovú knižnicu jquery. Na Obr. 4.7 je náhľad na rozhranie aplikácie RozvrhFM.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_19.png|framed|none]]<br />
Obr 4.7 Zobrazenie používateľského rozhrania aplikácie RozvrhFM<br />
<br />
Vlastnosti vytvoreného systému môžeme zhrnúť do nasledujúcich bodov:<br>Výhody aplikácie RozvrhFM:<br />
* systém RozvrhFM je vďaka dodržiavaniu štandardov kompatibilný so všetkými internetovými prehliadačmi,<br />
* vyššia rýchlosť oproti iným systémom, ktoré využívajú proprietárne technológie ako napr. ActiveX,<br />
* jednoduchý export údajov do iných systémov (formát JSON),<br />
* bezpečnosť aplikácie: údaje z&nbsp;databázy získavame pomocou obmedzeného prístupu k databáze.<br>Nevýhody aplikácie RozvrhFM:<br />
* systém nie je začlenený do ďalšieho informačného systému, aj keď zoznam vyučujúcich sa získava z&nbsp;databázy evalvácie fakulty,<br />
* v&nbsp;súvislosti s&nbsp;tým, že vývoj Google Gears bol zastavený, nepredpokladá sa žiadne ďalšie vylepšenie off-line funkcionality.<br />
<br />
'''Záver'''<br />
<br />
Cieľom práce bolo navrhnúť požívateľské rozhranie web aplikácie na zobrazovanie rozvrhu Fakulty mechatroniky a opísať technológiu Google Gears, ktorá je implementovaná v navrhnutej aplikácii. Zamerali sme sa aj na novú špecifikáciu HTML5, ktorá bude taktiež podporovať off-line aplikácie. V tretej kapitole sme predstavili niekoľko aplikácií, ktoré umožňujú vytvárať a zobrazovať rozvrh. Popísali sme, akým spôsobom zobrazujú údaje a zvýraznili nedostatky, ktoré z tohto plynú. Z existujúcich systémov pre vizualizáciu rozvrhu sme vybrali ich najlepšie vlastnosti a tieto sme implementovali do vytvoreného rozvrhu Fakulty mechatroniky RozvrhFM. V aplikácií RozvrhFM bola doplnená nová funkcionalita, ktorú neobsahuje ani jeden z porovnávaných systémov pre vizualizáciu rozvrhu. Nová funkcionalita zahŕňa off-line prístup k rozvrhu a zobrazenie doplňujúcich informácií, ako napr. zoznam študijných krúžkov alebo nové zmeny v rozvrhu. V poslednej kapitole sme sa venovali návrhu a implementácií nového rozvrhu Fakulty mechatroniky. Navrhli sme vzhľad používateľského prostredia a zvolili prehľadný spôsob, akým zobraziť tabuľku rozvrhu. Pre prístup k rozvrhu nie je vyžadovaná autentifikácia. S využitím technológie Google Gears sme zabezpečili podporu aplikácie aj v režime off-line. Používateľ bude môcť zobrazovať svoj rozvrh aj v prípade, že nebude mať prístup k internetu. Aplikácia RozvrhFM je v súčasnosti dostupná na adrese rozvrh.fmtnuni.sk.</div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Bakalarka_du%C5%A1an_pag%C3%A1%C4%8D_2_2_FINAL_19.png&diff=6902Súbor:Bakalarka dušan pagáč 2 2 FINAL 19.png2010-09-05T13:53:52Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Bakalarka_du%C5%A1an_pag%C3%A1%C4%8D_2_2_FINAL_18.png&diff=6901Súbor:Bakalarka dušan pagáč 2 2 FINAL 18.png2010-09-05T13:53:39Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Bakalarka_du%C5%A1an_pag%C3%A1%C4%8D_2_2_FINAL_17.png&diff=6900Súbor:Bakalarka dušan pagáč 2 2 FINAL 17.png2010-09-05T13:53:27Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Bakalarka_du%C5%A1an_pag%C3%A1%C4%8D_2_2_FINAL_16.png&diff=6899Súbor:Bakalarka dušan pagáč 2 2 FINAL 16.png2010-09-05T13:53:13Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Bakalarka_du%C5%A1an_pag%C3%A1%C4%8D_2_2_FINAL_15.png&diff=6898Súbor:Bakalarka dušan pagáč 2 2 FINAL 15.png2010-09-05T13:52:54Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Bakalarka_du%C5%A1an_pag%C3%A1%C4%8D_2_2_FINAL_14.png&diff=6897Súbor:Bakalarka dušan pagáč 2 2 FINAL 14.png2010-09-05T13:52:45Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Bakalarka_du%C5%A1an_pag%C3%A1%C4%8D_2_2_FINAL_13.png&diff=6896Súbor:Bakalarka dušan pagáč 2 2 FINAL 13.png2010-09-05T13:52:35Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=N%C3%A1vrh_pou%C5%BE%C3%ADvate%C4%BEsk%C3%A9ho_rozhrania_rozvrhu_FM_TnUAD&diff=6894Návrh používateľského rozhrania rozvrhu FM TnUAD2010-09-05T13:44:34Z<p>Dusan: </p>
<hr />
<div>[[Kategória:Študentské práce]][[Kategória:Bakalárske práce]][[Kategória:Informatika]][[Kategória:php]][[Kategória:web]]<br />
{{Praca_uvod|4|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}<br />
<br />
__TOC__<br />
<br />
=RozvrhFM – návrh a implementácia nového rozvrhu fakulty mechatroniky=<br />
<br />
Úlohou tejto bakalárskej práce je navrhnúť používateľské rozhranie (frontend) rozvrhu Fakulty mechatroniky pre režim on-line aj off-line. Pri návrhu bol kladený dôraz na to, aby bolo používateľské prostredie dostatočne prehľadné a jednoduché. <br />
Webová aplikácia RozvrhFM je databázová aplikácia. Entitno relačný model databázy nie je v tejto práci potrebné uvádzať, pretože pre získanie údajov z databázy je pripravený databázový pohľad (view) rozvrh_view, v ktorom sú všetky požadované údaje pre zobrazenie rozvrhu. Štruktúra tohto pohľadu je zobrazená v tabuľke 4.1.<br />
<br />
Tabuľka 4.1 Štruktúra databázového pohľadu ''rozvrh_view''<br />
<br />
{|class="prettytable" width="600px"<br />
|align = "center"|'''Pole'''<br />
|align = "center"|'''Typ'''<br />
|align = "center"|'''Význam'''<br />
<br />
|-<br />
|subject <br />
|varchar(255)<br />
|Názov predmetu<br />
<br />
|-<br />
|subject_abbr <br />
|varchar(20)<br />
|Skratka predmetu<br />
<br />
|-<br />
|subject_id <br />
|int(11)<br />
|ID predmetu<br />
<br />
|-<br />
|hours <br />
|tinyint(1)<br />
|Dĺžka trvania prednášky v hodinách<br />
<br />
|-<br />
|type <br />
|varchar(10)<br />
|Typ vyučovacej hodiny (prednáška, cvičenie, laboratóriá)<br />
<br />
|-<br />
|color <br />
|varchar(7)<br />
|Farba<br />
<br />
|-<br />
|week <br />
|enum(<nowiki>’</nowiki>k<nowiki>’</nowiki>, <nowiki>’</nowiki>p<nowiki>’</nowiki>, <nowiki>’</nowiki>n<nowiki>’</nowiki>)<br />
|Predmet sa vyučuje: každý, párny, nepárny týždeň<br />
<br />
|-<br />
|day <br />
|tinyint(1)<br />
|Deň v&nbsp;týždni (1-5)<br />
<br />
|-<br />
|hour <br />
|tinyint(2)<br />
|Hodina, v ktorej začína vyučovanie predmetu<br />
<br />
|-<br />
|room <br />
|varchar(10)<br />
|Miestnosť<br />
<br />
|-<br />
|room_id <br />
|int(11)<br />
|ID miestnosti<br />
<br />
|-<br />
|provides <br />
|varchar(8)<br />
|Katedra, ktorá predmet zabezpečuje<br />
<br />
|-<br />
|meno <br />
|varchar(128)<br />
|Meno vyučujúceho<br />
<br />
|-<br />
|priezvisko <br />
|varchar(128)<br />
|Priezvisko vyučujúceho<br />
<br />
|-<br />
|tituly <br />
|varchar(128)<br />
|Tituly vyučujúceho<br />
<br />
|-<br />
|user_katedra <br />
|varchar(128)<br />
|Katedra, pod ktorú patrí vyučujúci<br />
<br />
|-<br />
|user_id <br />
|int(11)<br />
|ID vyučujúceho<br />
<br />
|-<br />
|user_abbr <br />
|varchar(20)<br />
|Skratka mena vyučujúceho<br />
<br />
|-<br />
|office <br />
|varchar(10)<br />
|Číslo kancelárie vyučujúceho<br />
<br />
|-<br />
|subclass <br />
|var(18)<br />
|Krúžok, ktorý má vyučovanie<br />
<br />
|-<br />
|subclass_id <br />
|int(11)<br />
|ID krúžku<br />
<br />
|-<br />
|branch <br />
|varchar(5)<br />
|Odbor<br />
<br />
|-<br />
|branch_num <br />
|int(1)<br />
|Číslo odboru<br />
<br />
|-<br />
|subclass_sign <br />
|varchar(2)<br />
|Koncové dvojčíslie krúžku<br />
<br />
|-<br />
|year <br />
|tinyint(1)<br />
|Rok štúdia <br />
<br />
|-<br />
|note <br />
|varchar(255)<br />
|Poznámka<br />
<br />
|}<br />
<br />
<br />
==Grafický návrh používateľského rozhrania==<br />
Grafický návrh používateľského rozhrania je veľmi dôležitý, pretože tvorí časť, s ktorou je používateľ priamo konfrontovaný. Cieľom rozvrhnutia jednotlivých častí (Obr. 4.1) je zobrazenie čo najväčšej časti výpisu tabuľky rozvrhu bez nutnosti posúvania zobrazenej plochy stránky. Oproti verzii opisovanej v kapitole 3.2.1 pribudne niekoľko panelov. Vrchný panel bude obsahovať ikonu režimu práce (on-line/off-line). Ikona bude zobrazovaná len v prípade nainštalovaného rozšírenia Google Gears. Z formulára na výber jednotlivých parametrov pre filtrovanie sme odstránili niekoľko prvkov formulára, ktoré neboli dôležité. Ponechané boli iba prvky na výber krúžku, predmetu, vyučujúceho a miestnosti. V pravej časti pribudne panel na zobrazovanie informácií o zmene v rozvrhu. Pod ním je panel odkazov na export rozvrhu do rôznych formátov a ponuka inštalácie rozšírenia Google Gears. <br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_13.png|framed|none]]<br />
<br />
Obr. 4.1 Návrh prezentačnej vrstvy rozvrhu<br />
<br />
Najdôležitejšou časťou je zobrazenie samotnej tabuľky rozvrhu. Oproti súčasnej verzií (Obr. 3.3) je do návrhu novej tabuľky rozvrhu (Obr. 4.2) pridaná vodorovná časová os. Každý ďalší riadok tabuľky reprezentuje deň v týždni a zobrazuje predmety, ktoré do neho patria. V prípade, že sa predmet koná len v nepárny týždeň, rozdelí sa riadok na dva riadky. Tie potom reprezentujú párny a nepárny týždeň. Prednáška je označená modrou, cvičenie červenou a laboratóriá zelenou farbou. Každá farebná bunka obsahuje názov predmetu, meno vyučujúceho a miestnosť, kde sa vyučovanie koná. Nasledovným rozvrhnutím tabuľky rozvrhu sme zobrazili potrebné údaje a zlepšili prehľadnosť odstránením prebytočných údajov. <br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_14.png|framed|none]]<br />
<br />
Obr 4.2 Návrh novej tabuľky rozvrhu<br />
<br />
===Realizácia používateľského rozhrania v&nbsp;režime online===<br />
Pri realizácií front-endu rozvrhu fakulty mechatroniky sme použili knižnicu ZEND framework [19].<br />
<br />
====Príprava dát pre formulár====<br />
Formulár (Obr. 4.3) slúži na výber jednotlivých parametrov, podľa ktorých sa budú filtrovať dáta z&nbsp;databázy. Následne sa zobrazí tabuľka zodpovedajúca týmto dátam. Výpis rozvrhu sa dá filtrovať podľa názvu krúžku, predmetu, mena vyučujúceho a&nbsp;učebne.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_15.png|framed|none]]<br />
<br />
Obr 4.3 Formulár na výber dát podľa parametrov<br />
<br />
Zoznam všetkých možností výberu jednotlivých parametrov sa načíta z pohľadov databázy rozvrh_view a rozvrh_view_extern. Formulár nezobrazí prvky výberu, ktoré síce v databáze existujú, ale nie sú zaradené do aktuálne vytvoreného rozvrhu. To znamená, že vo formulári bude chýbať, napr. predmet Matematika I. v prípade, ak nebude mať pridelený aspoň jeden krúžok. Potom by bol tento predmet ako možnosť parametra predmet zbytočný. <br />
<br />
Výber údajov z databázy zabezpečuje trieda indexSearch, ktorá je modelom používaným v kontroléri indexController. Tento kontrolér obsluhuje celý front-end. Výber jednotlivých parametrov má veľmi podobný SQL dopyt, ktorý sa líši iba názvami vyberaných stĺpcov. Preto bola vytvorená metóda bothViewsSelect znázornená v kóde 4.1, ktorá vyberá údaje z oboch pohľadov.<br />
<br />
Kód 5.1 Metóda ''bothViewsSelect'''' ''triedy ''indexSearch''<br />
<source lang="php"><br />
private function bothViewsSelect(array $columns, $cmp = null, array $where = array())<br />
{<br />
$types = array('D' => T_VIEW, 'E' => T_VIEW_E);<br />
$union = array();<br />
<br />
foreach($types as $type => $table) {<br />
$select = $this->_db->select()<br />
->distinct()<br />
->from($table, $columns);<br />
<br />
foreach($where as $wh) {<br />
$select->where($wh);<br />
}<br />
<br />
$union[] = $select;<br />
}<br />
$select = $this->_db->select()->union($union);<br />
$data = $this->_db->fetchAll($select);<br />
if($cmp !== null) {<br />
usort($data, $cmp);<br />
}<br />
return $data;<br />
}<br />
<br />
</source><br />
Metóda ''bothViewsSelect ''má nasledovné parametre:<br />
<br />
* $columns – pole stĺpcov, ktoré sa majú z&nbsp;databázy vybrať<br />
* $cmp – obsahuje názov porovnávacej funkcie, podľa ktorej sa majú výsledky zoradiť, v opačnom prípadne má hodnotu ''null''<br />
* $where – pole podmienok dotazu<br />
<br />
Najskôr sa pre každý pohľad vytvorí ''SELECT'' dopyt zvlášť podľa parametrov metódy. Následne sa tieto dopyty spoja SQL príkazom ''UNION(),'' ktorý zabezpečí, že vyberú iba rozdielne dáta. Výber dát z&nbsp;databázy vykonáva metóda ''fetchAll()'' triedy ''Zend_Db_Select''. Ak&nbsp;parameter ''$cmp'' obsahuje názov porovnávacej funkcie, zavolá sa funkcia ''usort()''. Tá má parameter ''$data'', ktorý obsahuje výsledky dopytu a samotný parameter ''$cmp''. Zoradí pole ''$data'' podľa názvu funkcie uloženého v&nbsp;reťazci ''$cmp.''<br />
<br />
Kód 4.2 Príklad funkcia na porovnanie vyučujúcich<br />
<br />
<source lang="php"><br />
function cmp_teachers($a, $b)<br />
{<br />
if($a['priezvisko'] == $b['priezvisko']) {<br />
return ($a['meno'] < $b['meno']) ? -1 : 1;<br />
} else {<br />
return ($a['priezvisko'] < $b['priezvisko']) ? -1 : 1;<br />
}<br />
}<br />
<br />
</source><br />
<br />
Funkcia na porovnanie vyučujúcich porovnáva najskôr podľa priezviska, v prípade zhody sa porovnáva podľa mena. <br />
<br />
Kód 4.3 Príklad použitia metódy ''bothViewsSelect'' na výber vyučujúcich<br />
<br />
<source lang="php"><br />
public function getUsers()<br />
{<br />
return $this->bothViewsSelect(<br />
array('meno', 'priezvisko', 'tituly', 'user_id'),<br />
'cmp_teachers'<br />
);<br />
}<br />
<br />
</source><br />
<br />
===Výber dát z databázy podľa zvolených parametrov===<br />
<br />
Metóda ''getTTable'' získa z&nbsp;databázy všetky potrebné dáta podľa zadaných parametrov z&nbsp;formulára a&nbsp;pripraví ich pre pomocnú triedu ''TimetableRenderer'', ktorá sa stará o&nbsp;vykresľovanie tabuľky rozvrhu.<br />
<br />
Kód 4.4 Metóda ''getTTable''<br />
<br />
<source lang="php"><br />
public function getTTable($params)<br />
{<br />
$return = array('D' => array(), 'E' => array());<br />
$where = array();<br />
if($params['subclass']) {<br />
$branch_num = substr($params['subclass'], 1, 1);<br />
$year = substr($params['subclass'], 2, 1);<br />
$sign = substr($params['subclass'], 3);<br />
<br />
$where[] = $this->_db->quoteInto('branch_num = ?', (int)$branch_num);<br />
$where[] = $this->_db->quoteInto('year = ?', (int)$year);<br />
$where[] = $this->_db->quoteInto('subclass_sign IS NULL OR subclass_sign = ?', $sign);<br />
}<br />
<br />
</source><br />
<br />
Ak bol zadaný parameter krúžok, získame z&nbsp;neho jednotlivé údaje o&nbsp;číselnom označení odboru, ročníka a&nbsp;krúžka. Tieto údaje potom vložíme do poľa podmienok ''$where''.<br />
<br />
<source lang="php"><br />
if($params['room']) {<br />
$where[] = $this->_db->quoteInto('room_id = ?', (int)$params['room']);<br />
}<br />
if($params['teacher']) {<br />
$where[] = $this->_db->quoteInto('user_id = ?', (int)$params['teacher']);<br />
}<br />
if($params['subject']) {<br />
$where[] = $this->_db->quoteInto('subject_id = ?', (int)$params['subject']);<br />
}<br />
$select = $this->_db->select()<br />
->from(T_VIEW,<br />
array('subject', 'hours', 'color', 'week','day', 'hour', 'room', 'meno', 'priezvisko', 'tituly', 'subclass'));<br />
foreach($where as $wh) {<br />
$select->where($wh);<br />
}<br />
<br />
</source><br />
<br />
Vytvorenie dopytu na pohľad ''rozvrh_view'' v&nbsp;databáze&nbsp;denných študentov.<br />
<br />
<source lang="php"><br />
$data = $this->_db->fetchAll($select);<br />
$return = array();<br />
foreach($data as $row) {<br />
$return['D'][$row['day']][$row['week']][$row['hour']] = array(<br />
'subject' => $row['subject'],<br />
'tituly' => $row['tituly'],<br />
'meno' => $row['meno'],<br />
'priezvisko' => $row['priezvisko'],<br />
'room' => $row['room'],<br />
'subclass' => $row['subclass'],<br />
'hours' => $row['hours'],<br />
'color' => $row['color']<br />
);<br />
}<br />
return $return;<br />
}<br />
<br />
</source><br />
<br />
Metóda ''getTTable'' vracia údaje z&nbsp;databázy do mnohorozmerného poľa, zoradeného podľa našich potrieb pre vykresľovanie.<br />
<br />
===Vykresľovanie rozvrhu===<br />
Vytvorená trieda ''Views_Helpers_TimetableRenderer'' pre časť ''view'' obsahuje metódy:<br />
<br />
* ''timetableRenderer($data, $subclass)'' – ak vo formulári nebol ako parameter vybraný krúžok, vypíše sa rozvrh pre denných aj externých študentov. V&nbsp;opačnom prípade sa rozhodne o&nbsp;tom, ktorý druh rozvrhu sa vypíše, podľa názvu krúžku. Krúžky patriace do externej formy štúdia majú v&nbsp;názvoch písmeno E.<br />
* ''intern()'' – metóda na vykreslenie tabuľky rozvrhu denných študentov, ktorá si volá ďalšie pomocné metódy:<br />
* ''intern_prepareDay($index'') – metóda vracia štruktúru buniek dňa s&nbsp;indexom $index<br />
* ''intern_prepareCell($data)'' – metóda vytvára obsah bunky (predmet, meno vyučujúceho, učebňa, prípadne číslo krúžku). Číslo krúžku sa vypisuje len v&nbsp;prípade, ak sa nejedná o&nbsp;prednášky.<br />
<br />
==Realizácia používateľského rozhrania v&nbsp;režime offline==<br />
Pre zabezpečenie funkcionality aj v&nbsp;režime off-line sme využili rozšírenie Google Gears. Toto rozšírenie nám sprístupní rovnaké dáta a&nbsp;funkcionalitu ako v&nbsp;režime on-line. Aby sa možnosti off-line web aplikácie mohli využívať, je potrebné splniť nasledujúce podmienky:<br />
<br />
* Používateľ musí mať vo svojom prehliadači nainštalované rozšírenie Google Gears.<br />
* Používateľ musí web aplikácií RozvrhFM povoliť využívanie tohto rozšírenia pre&nbsp;konkrétnu doménu.<br />
* Synchronizácia dát musí prebehnúť úspešne.<br />
<br />
===Povolenie prístupu===<br />
Funkcionalita Google Gears je v&nbsp;užívateľskom prostredí reprezentované ikonou (Obr. 4.4). Po jej stlačení sa vysunie panel s&nbsp;tlačidlom ''Inštalácia Google Gears''.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_16.png|framed|none]]<br />
<br />
Obr 4.4 Panel s&nbsp;ikonou Google Gears<br />
<br />
Povolenie prístupu Google Gears pre doménu rozvrhu musí potvrdiť používateľ (Obr 4.5).<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_17.png|framed|none]]<br />
<br />
Obr 4.5 Okno žiadosti o&nbsp;povolenie prístupu Google Gears pre doménu ''rozvrh.fmtnuni.sk''<br />
<br />
Inštalácia prebieha zavolaním metódy ''getPermission'' triedy ''roGears'' v&nbsp;kóde 4.5. V&nbsp;prípade, ak je definovaný objekt ''google.gears'' a&nbsp;doména zatiaľ nemá povolenie, zobrazí sa okno so žiadosťou o&nbsp;povolenie prístupu. Po povolení prístupu sa volá metóda ''createStore'' určená na synchronizáciu.<br />
<br />
Kód 4.5 Metóda ''getPermission'' triedy ''roGears''<br />
<br />
<source lang="javascript"><br />
getPermission : function() {<br />
var perm = true;<br />
if ( 'undefined' != typeof google && google.gears ) {<br />
if ( !google.gears.factory.hasPermission )<br />
perm = google.gears.factory.getPermission('Rozvrh', <br />
'public/img/logo.png' );<br />
if ( perm )<br />
try { roGears.createStore(); } catch(e) { alert(e); } <br />
}<br />
}<br />
</source><br />
<br />
===Synchronizácia===<br />
<br />
<br />
Synchronizácia dát v&nbsp;našej web aplikácií nemusí prebiehať pri každej návšteve web stránky, pretože sa predpokladá, že dáta na serveri nebudú často aktualizované. Preto sme sa rozhodli, že synchronizácia dát prebehne hneď po povolení prístupu pre doménu. Ďalšia synchronizácia bude možná stlačením používateľského tlačidla synchronizácie. Synchronizácia sa vykoná zavolaním metódy ''createStore'' triedy ''roGears'' v kóde 4.6.<br />
<br />
Kód 4.6 Metóda createStore triedy roGears<br />
<source lang="javascript"><br />
createStore : function() {<br />
db = google.gears.factory.create('beta.database'); <br />
if(db)<br />
db.open('rozvrh'); <br />
if ( 'undefined' == typeof google || ! google.gears ) return;<br />
if ( 'undefined' == typeof localServer )<br />
localServer = google.gears.factory.create("beta.localserver");<br />
store = localServer.createManagedStore('rozvrh');<br />
store.manifestUrl = "public/gears/timetable.json";<br />
store.checkForUpdate(); <br />
roGears.syncData();<br />
}<br />
</source><br />
<br />
Metóda ''createStore ''zabezpečí vytvorenie objektov ''beta.database,''&nbsp;''beta.localserver ''a&nbsp;skopíruje súbory nevyhnutné pre beh aplikácie v&nbsp;režime off-line. Zoznam týchto súborov sa&nbsp;nachádza v&nbsp;súbore ''timetable.json''. V&nbsp;našom prípade synchronizujeme aj samotný html dokument, ktorý sa na lokálny disk uloží bez PHP kódu. Používateľ je o procese synchronizácie informovaný upozornením v&nbsp;hornom paneli (Obr 4.6).<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_18.png|framed|none]]<br />
<br />
Obr 4.6 Zobrazenie informácie&nbsp;stavu on-line a&nbsp;synchronizácie<br />
<br />
Synchronizácia databázy sa vykoná zavolaním metódy ''syncData ''v&nbsp;kóde 4.7'' ''triedy ''roGears. ''Metóda db.''execute'' vytvorí tabuľku ''rozvrh'' v&nbsp;lokálnej databáze. Štruktúra tejto tabuľky je rovnaká ako štruktúra tabuľky databázy na serveri, z&nbsp;ktorej získavame údaje. Pomocou funkcie ''getJSON ''knižnice ''jQuery'' získame json objekt, ktorý obsahuje všetky potrebné údaje. Získané údaje z&nbsp;tohto objektu nahráme do tabuľky ''rozvrh''.<br />
<br />
4.7 Metóda ''syncData'''' ''v&nbsp;kóde '' ''triedy ''roGears''<br />
<source lang="javascript"><br />
syncData : function() {<br />
clearInterval(int_checkOnline);<br />
$('#sync').show();<br />
// vytvorenie novej tabulky pre lokalne ulozisko<br />
db.execute('create table if not exists rozvrh' + <br />
' (subject varchar(255), subject_abbr varchar(20), ...<br />
// poziadavka na online rozvrh<br />
$.getJSON(BASEURL + '/json/data/subclass/all', [], function(jpole) {<br />
db.execute('DELETE FROM rozvrh');<br />
// vsetky zaznamy v rozvrhu<br />
for (var i = 0; i < (jpole['intern'].length);i++) <br />
// vlozenie dát do lokalnej tabulky<br />
db.execute('INSERT INTO rozvrh VALUES ... ); <br />
int_checkOnline = window.setInterval(roGears.checkOnline, 3000);<br />
$('#sync').hide();<br />
});<br />
}<br />
</source><br />
<br />
V kóde 4.7 sa nachádza len principiálny kód pre objasnenie synchronizácie databázy. Kompletný výpis zdrojového kódu metódy ''syncData ''sa nachádza na priloženom CD nosiči.<br />
<br />
====Zisťovanie on-line a off-line stavu====<br />
Podľa stavu, v&nbsp;ktorom sa aplikácia nachádza, získavame dáta buď zo servera alebo z&nbsp;lokálneho úložiska. Používateľ je o&nbsp;stave on-line a off-line informovaný pomocou ikony v&nbsp;hornom paneli. Zisťovania stavu zabezpečuje metóda ''checkOnline ''triedy ''roGears v (Kóde 4.5).''<br />
<br />
Kód 4.8 Metóda ''checkOnline ''triedy ''roGears''<br />
<source lang="javascript"><br />
checkOnline : function() {<br />
var PING_TIMEOUT_SECONDS = 1000;<br />
var TIME_BETWEEN_PINGS = 3 * 1000;<br />
if(!int_checkOnline) return;<br />
$.ajax({<br />
url : BASEURL + '/index/checkonline',<br />
dataType : 'text',<br />
timeout : PING_TIMEOUT_SECONDS,<br />
cache : false,<br />
error : function() { ONLINE = false; $('#indicator').attr('class', 'offline'); $('#panel input').hide(); },<br />
success : function() { ONLINE = true; $('#indicator').attr('class', 'online'); $('#panel input').show(); }<br />
});<br />
}<br />
</source><br />
<br />
Metóda ''checkOnline'' každé tri sekundy odošle požiadavku na zvolenú URL. Jedinou funkciou tejto URL je prijímanie požiadaviek na kontrolu stavu on-line/off-line. Ak metóda dostane odpoveď 200,'' ''hodnota premennej ONLINE sa nastaví na ''true.'' V&nbsp;opačnom prípade na ''false''. Čas vypršania požiadavky je nastavený na jednu sekundu. Po uplynutí tohto času je požiadavka považovaná za neúspešnú.<br />
<br />
==Implementácia systému RozvrhFM==<br />
<br />
Web aplikácia Rozvrh FM pracuje na webovom serveri Apache s modulmi PHP a MySQL. Všetok použitý softvér na strane servera je open-source. Pri tvorbe tejto aplikácie sme využili PHP ZEND framework a javascriptovú knižnicu jquery. Na Obr. 4.7 je náhľad na rozhranie aplikácie RozvrhFM.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_19.png|framed|none]]<br />
Obr 4.7 Zobrazenie používateľského rozhrania aplikácie RozvrhFM<br />
<br />
Vlastnosti vytvoreného systému môžeme zhrnúť do nasledujúcich bodov:<br>Výhody aplikácie RozvrhFM:<br />
* systém RozvrhFM je vďaka dodržiavaniu štandardov kompatibilný so všetkými internetovými prehliadačmi,<br />
* vyššia rýchlosť oproti iným systémom, ktoré využívajú proprietárne technológie ako napr. ActiveX,<br />
* jednoduchý export údajov do iných systémov (formát JSON),<br />
* bezpečnosť aplikácie: údaje z&nbsp;databázy získavame pomocou obmedzeného prístupu k databáze.<br>Nevýhody aplikácie RozvrhFM:<br />
* systém nie je začlenený do ďalšieho informačného systému, aj keď zoznam vyučujúcich sa získava z&nbsp;databázy evalvácie fakulty,<br />
* v&nbsp;súvislosti s&nbsp;tým, že vývoj Google Gears bol zastavený, nepredpokladá sa žiadne ďalšie vylepšenie off-line funkcionality.<br />
<br />
'Záver'<br />
<br />
Cieľom práce bolo navrhnúť požívateľské rozhranie web aplikácie na zobrazovanie rozvrhu Fakulty mechatroniky a opísať technológiu Google Gears, ktorá je implementovaná v navrhnutej aplikácii. Zamerali sme sa aj na novú špecifikáciu HTML5, ktorá bude taktiež podporovať off-line aplikácie. V tretej kapitole sme predstavili niekoľko aplikácií, ktoré umožňujú vytvárať a zobrazovať rozvrh. Popísali sme, akým spôsobom zobrazujú údaje a zvýraznili nedostatky, ktoré z tohto plynú. Z existujúcich systémov pre vizualizáciu rozvrhu sme vybrali ich najlepšie vlastnosti a tieto sme implementovali do vytvoreného rozvrhu Fakulty mechatroniky RozvrhFM. V aplikácií RozvrhFM bola doplnená nová funkcionalita, ktorú neobsahuje ani jeden z porovnávaných systémov pre vizualizáciu rozvrhu. Nová funkcionalita zahŕňa off-line prístup k rozvrhu a zobrazenie doplňujúcich informácií, ako napr. zoznam študijných krúžkov alebo nové zmeny v rozvrhu. V poslednej kapitole sme sa venovali návrhu a implementácií nového rozvrhu Fakulty mechatroniky. Navrhli sme vzhľad používateľského prostredia a zvolili prehľadný spôsob, akým zobraziť tabuľku rozvrhu. Pre prístup k rozvrhu nie je vyžadovaná autentifikácia. S využitím technológie Google Gears sme zabezpečili podporu aplikácie aj v režime off-line. Používateľ bude môcť zobrazovať svoj rozvrh aj v prípade, že nebude mať prístup k internetu. Aplikácia RozvrhFM je v súčasnosti dostupná na adrese rozvrh.fmtnuni.sk.</div>Dusanhttp://www.kiwiki.info/index.php?title=N%C3%A1vrh_pou%C5%BE%C3%ADvate%C4%BEsk%C3%A9ho_rozhrania_rozvrhu_FM_TnUAD&diff=6892Návrh používateľského rozhrania rozvrhu FM TnUAD2010-09-05T13:39:39Z<p>Dusan: </p>
<hr />
<div>[[Kategória:Študentské práce]][[Kategória:Bakalárske práce]][[Kategória:Informatika]][[Kategória:php]][[Kategória:web]]<br />
{{Praca_uvod|4|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}<br />
<br />
__TOC__<br />
<br />
=RozvrhFM – návrh a implementácia nového rozvrhu fakulty mechatroniky=<br />
<br />
Úlohou tejto bakalárskej práce je navrhnúť používateľské rozhranie (frontend) rozvrhu Fakulty mechatroniky pre režim on-line aj off-line. Pri návrhu bol kladený dôraz na to, aby bolo používateľské prostredie dostatočne prehľadné a jednoduché. <br />
Webová aplikácia RozvrhFM je databázová aplikácia. Entitno relačný model databázy nie je v tejto práci potrebné uvádzať, pretože pre získanie údajov z databázy je pripravený databázový pohľad (view) rozvrh_view, v ktorom sú všetky požadované údaje pre zobrazenie rozvrhu. Štruktúra tohto pohľadu je zobrazená v tabuľke 4.1.<br />
<br />
Tabuľka 4.1 Štruktúra databázového pohľadu ''rozvrh_view''<br />
<br />
{|class="prettytable" width="600px"<br />
|align = "center"|'''Pole'''<br />
|align = "center"|'''Typ'''<br />
|align = "center"|'''Význam'''<br />
<br />
|-<br />
|subject <br />
|varchar(255)<br />
|Názov predmetu<br />
<br />
|-<br />
|subject_abbr <br />
|varchar(20)<br />
|Skratka predmetu<br />
<br />
|-<br />
|subject_id <br />
|int(11)<br />
|ID predmetu<br />
<br />
|-<br />
|hours <br />
|tinyint(1)<br />
|Dĺžka trvania prednášky v hodinách<br />
<br />
|-<br />
|type <br />
|varchar(10)<br />
|Typ vyučovacej hodiny (prednáška, cvičenie, laboratóriá)<br />
<br />
|-<br />
|color <br />
|varchar(7)<br />
|Farba<br />
<br />
|-<br />
|week <br />
|enum(<nowiki>’</nowiki>k<nowiki>’</nowiki>, <nowiki>’</nowiki>p<nowiki>’</nowiki>, <nowiki>’</nowiki>n<nowiki>’</nowiki>)<br />
|Predmet sa vyučuje: každý, párny, nepárny týždeň<br />
<br />
|-<br />
|day <br />
|tinyint(1)<br />
|Deň v&nbsp;týždni (1-5)<br />
<br />
|-<br />
|hour <br />
|tinyint(2)<br />
|Hodina, v ktorej začína vyučovanie predmetu<br />
<br />
|-<br />
|room <br />
|varchar(10)<br />
|Miestnosť<br />
<br />
|-<br />
|room_id <br />
|int(11)<br />
|ID miestnosti<br />
<br />
|-<br />
|provides <br />
|varchar(8)<br />
|Katedra, ktorá predmet zabezpečuje<br />
<br />
|-<br />
|meno <br />
|varchar(128)<br />
|Meno vyučujúceho<br />
<br />
|-<br />
|priezvisko <br />
|varchar(128)<br />
|Priezvisko vyučujúceho<br />
<br />
|-<br />
|tituly <br />
|varchar(128)<br />
|Tituly vyučujúceho<br />
<br />
|-<br />
|user_katedra <br />
|varchar(128)<br />
|Katedra, pod ktorú patrí vyučujúci<br />
<br />
|-<br />
|user_id <br />
|int(11)<br />
|ID vyučujúceho<br />
<br />
|-<br />
|user_abbr <br />
|varchar(20)<br />
|Skratka mena vyučujúceho<br />
<br />
|-<br />
|office <br />
|varchar(10)<br />
|Číslo kancelárie vyučujúceho<br />
<br />
|-<br />
|subclass <br />
|var(18)<br />
|Krúžok, ktorý má vyučovanie<br />
<br />
|-<br />
|subclass_id <br />
|int(11)<br />
|ID krúžku<br />
<br />
|-<br />
|branch <br />
|varchar(5)<br />
|Odbor<br />
<br />
|-<br />
|branch_num <br />
|int(1)<br />
|Číslo odboru<br />
<br />
|-<br />
|subclass_sign <br />
|varchar(2)<br />
|Koncové dvojčíslie krúžku<br />
<br />
|-<br />
|year <br />
|tinyint(1)<br />
|Rok štúdia <br />
<br />
|-<br />
|note <br />
|varchar(255)<br />
|Poznámka<br />
<br />
|}<br />
<br />
<br />
==Grafický návrh používateľského rozhrania==<br />
Grafický návrh používateľského rozhrania je veľmi dôležitý, pretože tvorí časť, s ktorou je používateľ priamo konfrontovaný. Cieľom rozvrhnutia jednotlivých častí (Obr. 4.1) je zobrazenie čo najväčšej časti výpisu tabuľky rozvrhu bez nutnosti posúvania zobrazenej plochy stránky. Oproti verzii opisovanej v kapitole 3.2.1 pribudne niekoľko panelov. Vrchný panel bude obsahovať ikonu režimu práce (on-line/off-line). Ikona bude zobrazovaná len v prípade nainštalovaného rozšírenia Google Gears. Z formulára na výber jednotlivých parametrov pre filtrovanie sme odstránili niekoľko prvkov formulára, ktoré neboli dôležité. Ponechané boli iba prvky na výber krúžku, predmetu, vyučujúceho a miestnosti. V pravej časti pribudne panel na zobrazovanie informácií o zmene v rozvrhu. Pod ním je panel odkazov na export rozvrhu do rôznych formátov a ponuka inštalácie rozšírenia Google Gears. <br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_13.png|framed|none]]<br />
<br />
Obr. 4.1 Návrh prezentačnej vrstvy rozvrhu<br />
<br />
Najdôležitejšou časťou je zobrazenie samotnej tabuľky rozvrhu. Oproti súčasnej verzií (Obr. 3.3) je do návrhu novej tabuľky rozvrhu (Obr. 4.2) pridaná vodorovná časová os. Každý ďalší riadok tabuľky reprezentuje deň v týždni a zobrazuje predmety, ktoré do neho patria. V prípade, že sa predmet koná len v nepárny týždeň, rozdelí sa riadok na dva riadky. Tie potom reprezentujú párny a nepárny týždeň. Prednáška je označená modrou, cvičenie červenou a laboratóriá zelenou farbou. Každá farebná bunka obsahuje názov predmetu, meno vyučujúceho a miestnosť, kde sa vyučovanie koná. Nasledovným rozvrhnutím tabuľky rozvrhu sme zobrazili potrebné údaje a zlepšili prehľadnosť odstránením prebytočných údajov. <br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_14.png|framed|none]]<br />
<br />
Obr 4.2 Návrh novej tabuľky rozvrhu<br />
<br />
===Realizácia používateľského rozhrania v&nbsp;režime online===<br />
Pri realizácií front-endu rozvrhu fakulty mechatroniky sme použili knižnicu ZEND framework [19].<br />
<br />
====Príprava dát pre formulár====<br />
Formulár (Obr. 4.3) slúži na výber jednotlivých parametrov, podľa ktorých sa budú filtrovať dáta z&nbsp;databázy. Následne sa zobrazí tabuľka zodpovedajúca týmto dátam. Výpis rozvrhu sa dá filtrovať podľa názvu krúžku, predmetu, mena vyučujúceho a&nbsp;učebne.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_15.png|framed|none]]<br />
<br />
Obr 4.3 Formulár na výber dát podľa parametrov<br />
<br />
Zoznam všetkých možností výberu jednotlivých parametrov sa načíta z pohľadov databázy rozvrh_view a rozvrh_view_extern. Formulár nezobrazí prvky výberu, ktoré síce v databáze existujú, ale nie sú zaradené do aktuálne vytvoreného rozvrhu. To znamená, že vo formulári bude chýbať, napr. predmet Matematika I. v prípade, ak nebude mať pridelený aspoň jeden krúžok. Potom by bol tento predmet ako možnosť parametra predmet zbytočný. <br />
<br />
Výber údajov z databázy zabezpečuje trieda indexSearch, ktorá je modelom používaným v kontroléri indexController. Tento kontrolér obsluhuje celý front-end. Výber jednotlivých parametrov má veľmi podobný SQL dopyt, ktorý sa líši iba názvami vyberaných stĺpcov. Preto bola vytvorená metóda bothViewsSelect znázornená v kóde 4.1, ktorá vyberá údaje z oboch pohľadov.<br />
<br />
Kód 5.1 Metóda ''bothViewsSelect'''' ''triedy ''indexSearch''<br />
<source lang="php"><br />
private function bothViewsSelect(array $columns, $cmp = null, array $where = array())<br />
{<br />
$types = array('D' => T_VIEW, 'E' => T_VIEW_E);<br />
$union = array();<br />
<br />
foreach($types as $type => $table) {<br />
$select = $this->_db->select()<br />
->distinct()<br />
->from($table, $columns);<br />
<br />
foreach($where as $wh) {<br />
$select->where($wh);<br />
}<br />
<br />
$union[] = $select;<br />
}<br />
$select = $this->_db->select()->union($union);<br />
$data = $this->_db->fetchAll($select);<br />
if($cmp !== null) {<br />
usort($data, $cmp);<br />
}<br />
return $data;<br />
}<br />
<br />
</source><br />
Metóda ''bothViewsSelect ''má nasledovné parametre:<br />
<br />
* $columns – pole stĺpcov, ktoré sa majú z&nbsp;databázy vybrať<br />
* $cmp – obsahuje názov porovnávacej funkcie, podľa ktorej sa majú výsledky zoradiť, v opačnom prípadne má hodnotu ''null''<br />
* $where – pole podmienok dotazu<br />
<br />
Najskôr sa pre každý pohľad vytvorí ''SELECT'' dopyt zvlášť podľa parametrov metódy. Následne sa tieto dopyty spoja SQL príkazom ''UNION(),'' ktorý zabezpečí, že vyberú iba rozdielne dáta. Výber dát z&nbsp;databázy vykonáva metóda ''fetchAll()'' triedy ''Zend_Db_Select''. Ak&nbsp;parameter ''$cmp'' obsahuje názov porovnávacej funkcie, zavolá sa funkcia ''usort()''. Tá má parameter ''$data'', ktorý obsahuje výsledky dopytu a samotný parameter ''$cmp''. Zoradí pole ''$data'' podľa názvu funkcie uloženého v&nbsp;reťazci ''$cmp.''<br />
<br />
Kód 4.2 Príklad funkcia na porovnanie vyučujúcich<br />
<br />
<source lang="php"><br />
function cmp_teachers($a, $b)<br />
{<br />
if($a['priezvisko'] == $b['priezvisko']) {<br />
return ($a['meno'] < $b['meno']) ? -1 : 1;<br />
} else {<br />
return ($a['priezvisko'] < $b['priezvisko']) ? -1 : 1;<br />
}<br />
}<br />
<br />
</source><br />
<br />
Funkcia na porovnanie vyučujúcich porovnáva najskôr podľa priezviska, v prípade zhody sa porovnáva podľa mena. <br />
<br />
Kód 4.3 Príklad použitia metódy ''bothViewsSelect'' na výber vyučujúcich<br />
<br />
<source lang="php"><br />
public function getUsers()<br />
{<br />
return $this->bothViewsSelect(<br />
array('meno', 'priezvisko', 'tituly', 'user_id'),<br />
'cmp_teachers'<br />
);<br />
}<br />
<br />
</source><br />
<br />
===Výber dát z databázy podľa zvolených parametrov===<br />
<br />
Metóda ''getTTable'' získa z&nbsp;databázy všetky potrebné dáta podľa zadaných parametrov z&nbsp;formulára a&nbsp;pripraví ich pre pomocnú triedu ''TimetableRenderer'', ktorá sa stará o&nbsp;vykresľovanie tabuľky rozvrhu.<br />
<br />
Kód 4.4 Metóda ''getTTable''<br />
<br />
<source lang="php"><br />
public function getTTable($params)<br />
{<br />
$return = array('D' => array(), 'E' => array());<br />
$where = array();<br />
if($params['subclass']) {<br />
$branch_num = substr($params['subclass'], 1, 1);<br />
$year = substr($params['subclass'], 2, 1);<br />
$sign = substr($params['subclass'], 3);<br />
<br />
$where[] = $this->_db->quoteInto('branch_num = ?', (int)$branch_num);<br />
$where[] = $this->_db->quoteInto('year = ?', (int)$year);<br />
$where[] = $this->_db->quoteInto('subclass_sign IS NULL OR subclass_sign = ?', $sign);<br />
}<br />
<br />
</source><br />
<br />
Ak bol zadaný parameter krúžok, získame z&nbsp;neho jednotlivé údaje o&nbsp;číselnom označení odboru, ročníka a&nbsp;krúžka. Tieto údaje potom vložíme do poľa podmienok ''$where''.<br />
<br />
<source lang="php"><br />
if($params['room']) {<br />
$where[] = $this->_db->quoteInto('room_id = ?', (int)$params['room']);<br />
}<br />
if($params['teacher']) {<br />
$where[] = $this->_db->quoteInto('user_id = ?', (int)$params['teacher']);<br />
}<br />
if($params['subject']) {<br />
$where[] = $this->_db->quoteInto('subject_id = ?', (int)$params['subject']);<br />
}<br />
$select = $this->_db->select()<br />
->from(T_VIEW,<br />
array('subject', 'hours', 'color', 'week','day', 'hour', 'room', 'meno', 'priezvisko', 'tituly', 'subclass'));<br />
foreach($where as $wh) {<br />
$select->where($wh);<br />
}<br />
<br />
</source><br />
<br />
Vytvorenie dopytu na pohľad ''rozvrh_view'' v&nbsp;databáze&nbsp;denných študentov.<br />
<br />
<source lang="php"><br />
$data = $this->_db->fetchAll($select);<br />
$return = array();<br />
foreach($data as $row) {<br />
$return['D'][$row['day']][$row['week']][$row['hour']] = array(<br />
'subject' => $row['subject'],<br />
'tituly' => $row['tituly'],<br />
'meno' => $row['meno'],<br />
'priezvisko' => $row['priezvisko'],<br />
'room' => $row['room'],<br />
'subclass' => $row['subclass'],<br />
'hours' => $row['hours'],<br />
'color' => $row['color']<br />
);<br />
}<br />
return $return;<br />
}<br />
<br />
</source><br />
<br />
Metóda ''getTTable'' vracia údaje z&nbsp;databázy do mnohorozmerného poľa, zoradeného podľa našich potrieb pre vykresľovanie.<br />
<br />
===Vykresľovanie rozvrhu===<br />
Vytvorená trieda ''Views_Helpers_TimetableRenderer'' pre časť ''view'' obsahuje metódy:<br />
<br />
* ''timetableRenderer($data, $subclass)'' – ak vo formulári nebol ako parameter vybraný krúžok, vypíše sa rozvrh pre denných aj externých študentov. V&nbsp;opačnom prípade sa rozhodne o&nbsp;tom, ktorý druh rozvrhu sa vypíše, podľa názvu krúžku. Krúžky patriace do externej formy štúdia majú v&nbsp;názvoch písmeno E.<br />
* ''intern()'' – metóda na vykreslenie tabuľky rozvrhu denných študentov, ktorá si volá ďalšie pomocné metódy:<br />
* ''intern_prepareDay($index'') – metóda vracia štruktúru buniek dňa s&nbsp;indexom $index<br />
* ''intern_prepareCell($data)'' – metóda vytvára obsah bunky (predmet, meno vyučujúceho, učebňa, prípadne číslo krúžku). Číslo krúžku sa vypisuje len v&nbsp;prípade, ak sa nejedná o&nbsp;prednášky.<br />
<br />
==Realizácia používateľského rozhrania v&nbsp;režime offline==<br />
Pre zabezpečenie funkcionality aj v&nbsp;režime off-line sme využili rozšírenie Google Gears. Toto rozšírenie nám sprístupní rovnaké dáta a&nbsp;funkcionalitu ako v&nbsp;režime on-line. Aby sa možnosti off-line web aplikácie mohli využívať, je potrebné splniť nasledujúce podmienky:<br />
<br />
* Používateľ musí mať vo svojom prehliadači nainštalované rozšírenie Google Gears.<br />
* Používateľ musí web aplikácií RozvrhFM povoliť využívanie tohto rozšírenia pre&nbsp;konkrétnu doménu.<br />
* Synchronizácia dát musí prebehnúť úspešne.<br />
<br />
===Povolenie prístupu===<br />
Funkcionalita Google Gears je v&nbsp;užívateľskom prostredí reprezentované ikonou (Obr. 4.4). Po jej stlačení sa vysunie panel s&nbsp;tlačidlom ''Inštalácia Google Gears''.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_16.png|framed|none]]<br />
<br />
Obr 4.4 Panel s&nbsp;ikonou Google Gears<br />
<br />
Povolenie prístupu Google Gears pre doménu rozvrhu musí potvrdiť používateľ (Obr 4.5).<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_17.png|framed|none]]<br />
<br />
Obr 4.5 Okno žiadosti o&nbsp;povolenie prístupu Google Gears pre doménu ''rozvrh.fmtnuni.sk''<br />
<br />
Inštalácia prebieha zavolaním metódy ''getPermission'' triedy ''roGears'' v&nbsp;kóde 4.5. V&nbsp;prípade, ak je definovaný objekt ''google.gears'' a&nbsp;doména zatiaľ nemá povolenie, zobrazí sa okno so žiadosťou o&nbsp;povolenie prístupu. Po povolení prístupu sa volá metóda ''createStore'' určená na synchronizáciu.<br />
<br />
Kód 4.5 Metóda ''getPermission'' triedy ''roGears''<br />
<br />
<source lang="javascript"><br />
getPermission : function() {<br />
var perm = true;<br />
if ( 'undefined' != typeof google && google.gears ) {<br />
if ( !google.gears.factory.hasPermission )<br />
perm = google.gears.factory.getPermission('Rozvrh', <br />
'public/img/logo.png' );<br />
if ( perm )<br />
try { roGears.createStore(); } catch(e) { alert(e); } <br />
}<br />
}<br />
</source><br />
<br />
===Synchronizácia===<br />
<br />
<br />
Synchronizácia dát v&nbsp;našej web aplikácií nemusí prebiehať pri každej návšteve web stránky, pretože sa predpokladá, že dáta na serveri nebudú často aktualizované. Preto sme sa rozhodli, že synchronizácia dát prebehne hneď po povolení prístupu pre doménu. Ďalšia synchronizácia bude možná stlačením používateľského tlačidla synchronizácie. Synchronizácia sa vykoná zavolaním metódy ''createStore'' triedy ''roGears'' v kóde 4.6.<br />
<br />
Kód 4.6 Metóda createStore triedy roGears<br />
<source lang="javascript"><br />
createStore : function() {<br />
db = google.gears.factory.create('beta.database'); <br />
if(db)<br />
db.open('rozvrh'); <br />
if ( 'undefined' == typeof google || ! google.gears ) return;<br />
if ( 'undefined' == typeof localServer )<br />
localServer = google.gears.factory.create("beta.localserver");<br />
store = localServer.createManagedStore('rozvrh');<br />
store.manifestUrl = "public/gears/timetable.json";<br />
store.checkForUpdate(); <br />
roGears.syncData();<br />
}<br />
</source><br />
<br />
Metóda ''createStore ''zabezpečí vytvorenie objektov ''beta.database,''&nbsp;''beta.localserver ''a&nbsp;skopíruje súbory nevyhnutné pre beh aplikácie v&nbsp;režime off-line. Zoznam týchto súborov sa&nbsp;nachádza v&nbsp;súbore ''timetable.json''. V&nbsp;našom prípade synchronizujeme aj samotný html dokument, ktorý sa na lokálny disk uloží bez PHP kódu. Používateľ je o procese synchronizácie informovaný upozornením v&nbsp;hornom paneli (Obr 4.6).<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_18.png|framed|none]]<br />
<br />
Obr 4.6 Zobrazenie informácie&nbsp;stavu on-line a&nbsp;synchronizácie<br />
<br />
Synchronizácia databázy sa vykoná zavolaním metódy ''syncData ''v&nbsp;kóde 4.7'' ''triedy ''roGears. ''Metóda db.''execute'' vytvorí tabuľku ''rozvrh'' v&nbsp;lokálnej databáze. Štruktúra tejto tabuľky je rovnaká ako štruktúra tabuľky databázy na serveri, z&nbsp;ktorej získavame údaje. Pomocou funkcie ''getJSON ''knižnice ''jQuery'' získame json objekt, ktorý obsahuje všetky potrebné údaje. Získané údaje z&nbsp;tohto objektu nahráme do tabuľky ''rozvrh''.<br />
<br />
4.7 Metóda ''syncData'''' ''v&nbsp;kóde '' ''triedy ''roGears''<br />
<source lang="javascript"><br />
syncData : function() {<br />
clearInterval(int_checkOnline);<br />
$('#sync').show();<br />
// vytvorenie novej tabulky pre lokalne ulozisko<br />
db.execute('create table if not exists rozvrh' + <br />
' (subject varchar(255), subject_abbr varchar(20), ...<br />
// poziadavka na online rozvrh<br />
$.getJSON(BASEURL + '/json/data/subclass/all', [], function(jpole) {<br />
db.execute('DELETE FROM rozvrh');<br />
// vsetky zaznamy v rozvrhu<br />
for (var i = 0; i < (jpole['intern'].length);i++) <br />
// vlozenie dát do lokalnej tabulky<br />
db.execute('INSERT INTO rozvrh VALUES ... ); <br />
int_checkOnline = window.setInterval(roGears.checkOnline, 3000);<br />
$('#sync').hide();<br />
});<br />
}<br />
</source><br />
<br />
V kóde 4.7 sa nachádza len principiálny kód pre objasnenie synchronizácie databázy. Kompletný výpis zdrojového kódu metódy ''syncData ''sa nachádza na priloženom CD nosiči.<br />
<br />
====Zisťovanie on-line a off-line stavu====<br />
Podľa stavu, v&nbsp;ktorom sa aplikácia nachádza, získavame dáta buď zo servera alebo z&nbsp;lokálneho úložiska. Používateľ je o&nbsp;stave on-line a off-line informovaný pomocou ikony v&nbsp;hornom paneli. Zisťovania stavu zabezpečuje metóda ''checkOnline ''triedy ''roGears v (Kóde 4.5).''<br />
<br />
Kód 4.8 Metóda ''checkOnline ''triedy ''roGears''<br />
<source lang="javascript"><br />
checkOnline : function() {<br />
var PING_TIMEOUT_SECONDS = 1000;<br />
var TIME_BETWEEN_PINGS = 3 * 1000;<br />
if(!int_checkOnline) return;<br />
$.ajax({<br />
url : BASEURL + '/index/checkonline',<br />
dataType : 'text',<br />
timeout : PING_TIMEOUT_SECONDS,<br />
cache : false,<br />
error : function() { ONLINE = false; $('#indicator').attr('class', 'offline'); $('#panel input').hide(); },<br />
success : function() { ONLINE = true; $('#indicator').attr('class', 'online'); $('#panel input').show(); }<br />
});<br />
}<br />
</source><br />
<br />
Metóda ''checkOnline'' každé tri sekundy odošle požiadavku na zvolenú URL. Jedinou funkciou tejto URL je prijímanie požiadaviek na kontrolu stavu on-line/off-line. Ak metóda dostane odpoveď 200,'' ''hodnota premennej ONLINE sa nastaví na ''true.'' V&nbsp;opačnom prípade na ''false''. Čas vypršania požiadavky je nastavený na jednu sekundu. Po uplynutí tohto času je požiadavka považovaná za neúspešnú.</div>Dusanhttp://www.kiwiki.info/index.php?title=Technol%C3%B3gie_off-line_web_aplik%C3%A1ci%C3%AD&diff=6889Technológie off-line web aplikácií2010-09-05T13:14:32Z<p>Dusan: /* Technológie off-line web aplikácií */</p>
<hr />
<div>[[Kategória:Študentské práce]]<br />
[[Kategória:Bakalárske práce]]<br />
[[Kategória:Informatika]]<br />
[[Kategória:php]]<br />
[[Kategória:web]]<br />
{{Praca_uvod|2|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}<br />
__TOC__<br />
<br />
=Technológie off-line web aplikácií=<br />
V&nbsp;súčasnosti je dostupných niekoľko technológií, ktoré podporujú off-line aplikácie:<br />
<br />
* Google Gears<br />
* HTML5<br />
Nová špecifikácia HTML5 je zatiaľ vo vývoji a&nbsp;má byť dokončená v&nbsp;roku 2012. Niektoré jej možnosti sú už dnes podporované vo väčšine prehliadačoch.<br />
<br />
==Google Gears==<br />
Google Gears [1] je open-source projekt of firmy Google. Pridaním nových funkcií do&nbsp;prehliadača dokáže sprístupniť webovú aplikáciu aj v&nbsp;režime off-line. Používateľovi stačí nainštalovať rozšírenie (Obr. 2.1) do svojho prehliadača a&nbsp;následne povoliť (Obr. 2.2) prístup konkrétnej webovej lokalite pre použitie&nbsp;tohto rozšírenia.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_07.png|framed|none]]<br />
<br />
Obr 2.1 Zobrazenie rozšírenia Google Gears v&nbsp;správe rozšírení prehliadača Firefox<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_08.png|framed|none]]<br />
<br />
Obr 2.2 Povolenia rozšírenia pre webovú lokalitu (localhost)<br />
<br />
===Moduly Google Gears===<br />
S rozšírením Google Gears získame tri nezávislé moduly: lokálny server, databáza, spracovanie kódu na pozadí. Každý z&nbsp;nich vylepšuje nejaký aspekt programovania webovej aplikácie na strane klienta prostredníctvom konkrétneho modulu.<br />
<br />
'''Lokálny server'''<br />
<br />
Modul lokálny server (''LocalServer'') umožňuje aplikácii uložiť a&nbsp;používať jeho HTTP zdroje lokálne bez pripojenia k&nbsp;sieti. Je to špecializovaná vyrovnávacia pamäť. Požiadavky na URL vo vyrovnávacej pamäti lokálneho servera sú zachytené a&nbsp;obslúžené lokálne priamo z&nbsp;disku používateľa.<br />
<br />
'''Databáza'''<br />
<br />
Databázový modul (''Database'') poskytuje open-source databázový systém SQLite. Databázové API slúži k&nbsp;neustálemu ukladaniu používateľských dát. Pre dáta uložené v&nbsp;lokálnej databáze je definovaná bezpečnostná politika, ktorá web aplikácii nedovolí prístup mimo jej domény.<br />
<br />
'''Spracovanie kódu na pozadí'''<br />
<br />
Skript časovo náročný na spracovanie, ako napríklad zložitý výpočet, môže spôsobiť, že&nbsp;používateľské prostredie nereaguje. Technika spracovania kódu na pozadí (''WorkerPool API'') dovoľuje web aplikácii spustiť javaskriptový kód na pozadí bez blokovania vykonávania ostatných skriptov na stránke.<br />
<br />
===Google Gears API===<br />
S&nbsp;modulmi Google Gears API pracujeme pomocou metód aplikačného rozhrania. Pre prístup k&nbsp;nim musíme do aplikácie zahrnúť súbor ''gears_init.js'', ktorý sa nachádza na adrese ''http://code.google.com/intl/sk/apis/gears/gears_init.js''. V&nbsp;nasledujúcom texte budú opísané všetky moduly Google Gears API.<br />
<br />
====Factory API====<br />
Trieda ''Factory'' je použitá na vytvorenie inštancií všetkých Gears objektov. Vytvorenie tejto inštancie (Kód 2.1) je povinné.<br />
<br />
Kód 2.1 Volanie metódy ''create'''' ''triedy'' factory''<br />
<source lang="javascript"><br />
<script type="text/javascript" src="gears_init.js"></script><br />
<script type="text/javascript"><br />
if (window.google && google.gears) {<br />
var db = google.gears.factory.create('beta.database');<br />
}<br />
</script><br />
</source><br />
<br />
Na to aby sme vytvorili inštanciu triedy ''Factory, ''je potrebné mať nainštalované samotné rozšírenie Google Gears. Existenciu tohto rozšírenia overíme pomocou kontroly globálnych objektov ''window.google'' a ''google.gears''. V&nbsp;skripte ''gears_init.js'' je definovaný objekt ''google.gears.factory''. Metóda ''create'' triedy ''factory'' vytvorí objekt danej triedy s parametrom ''className''. Parameter ''className ''je typ objektu, ktorý sa má vytvoriť. Kompletná špecifikácia je triedy ''Factory'' je v [2].<br />
<br />
Tabuľka 2.1 Opis metód triedy'' Factory''''.'' <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">factory</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Object''' create(className, <nowiki>[</nowiki>classVersion<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Opis:<br />
|Vytvára Gears objekt danej triedy<br><br />
<br />
|-<br />
|Parametre:<br />
|className – typ objektu, ktorý sa má vytvoriť<br>classVersion – parameter sa už nepoužíva, prípadne jeho hodnota <nowiki>’</nowiki>1.0<nowiki>’</nowiki><br />
<br />
|-<br />
|Detaily:<br />
|Podporované hodnoty parametru className:<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|className<br />
|bgcolor = "#EAEAEA"|Vytvorenie Gears triedy<br />
<br />
|-<br />
|beta.blobbuilder<br />
|BlobBuilder<br />
<br />
|-<br />
|beta.canvas<br />
|Canvas<br />
<br />
|-<br />
|beta.database<br />
|Database<br />
<br />
|-<br />
|beta.desktop<br />
|Desktop<br />
<br />
|-<br />
|beta.geolocation<br />
|Geolocation<br />
<br />
|-<br />
|beta.httprequest<br />
|HttpRequest<br />
<br />
|-<br />
|beta.localserver<br />
|LocalServer<br />
<br />
|-<br />
|beta.timer<br />
|Timer<br />
<br />
|-<br />
|beta.workerpool<br />
|WorkerPool<br />
<br />
|}<br />
<br />
|}<br />
<br />
====LocalServer API====<br />
Na správu vyrovnávacej pamäti sú dostupné dve triedy:<br />
<br />
'''''ResourceStore'' '''– povoľuje zachytávať dáta (obrázky, PDF súbor), ktoré sú adresované s URL.<br />
<br />
'''''ManagedResourceStore''''' – zoznam URL odkazov na súbory, ktoré budú dostupné off-line, sú&nbsp;v&nbsp;súbore ''manifest.'' Pomocou tejto triedy môžeme zabezpečiť aplikácii všetky dáta, ktoré bude potrebovať. Výhoda takéhoto riešenia je v automatickej aktualizácií pri zmene súboru ''manifest''. Príklad použitia je v&nbsp;kóde 2.2.<br />
<br />
Kód 2.2 Príklad použitia metódy ''createManagedStor''''e''<br />
<source lang="javascript"><br />
<script type="text/javascript" src="gears_init.js"></script><br />
<script type="text/javascript"><br />
var localServer = google.gears.factory.create('beta.localserver');<br />
var store = localServer.createManagedStore('test-store');<br />
store.manifestUrl = 'manifest.txt';<br />
</script><br />
</source><br />
<br />
Odkazy na súbory uvedené v&nbsp;súbore'' manifest'' (Kód 2.3) sa pri synchronizácií skopírujú na&nbsp;lokálny disk.<br />
<br />
Kód 2.3 Výpis súboru ''manifest.tx''''t''<br />
<source lang="javascript"><br />
{<br />
"betaManifestVersion": 1,<br />
"version": "1.0",<br />
"entries": [<br />
{ "url": "index.html" },<br />
{ "url": "gears_init.js" }<br />
]<br />
}<br />
</source><br />
<br />
Tabuľka 2.2 Metódy triedy ''LocalServer''. <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">LocalServer</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''createManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br><br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ManagedResourceStore <br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ManagedResourceStore alebo vytvorí novú, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''openManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ManagedResourceStore <br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ManagedResourceStore alebo vráti null, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' removeManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br><nowiki>[</nowiki>requiredCookie<nowiki>]</nowiki><br />
<br />
|-<br />
|Opis:<br />
|Odstráni ManagedResourceStore a&nbsp;odstráni všetky jej URL z&nbsp;lokálnej<br>vyrovnávacej pamäti<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''createStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br><nowiki>[</nowiki>requiredCookie<nowiki>]</nowiki><br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResourceStore<br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ResourceStore alebo vytvorí novú, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''openStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResourceStore<br><br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ResourceStore alebo vráti null, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' removeStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Opis:<br />
|Odstráni ResourceStore a&nbsp;odstráni a&nbsp;celý jeho obsah<br>vyrovnávacej pamäti<br><br />
<br />
|}<br />
<br />
====Database API====<br />
Database API je aplikačné rozhranie pre prácu s&nbsp;lokálnou databázou SQLite[4]. SQLite je&nbsp;knižnica, ktorá implementuje relačnú databázu bez potreby servera.<br />
<br />
Kód 2.4 Príklad práce s&nbsp;lokálnou databázou<br />
<source lang="javascript"><br />
<script type="text/javascript" src="gears_init.js"></script><br />
<script type="text/javascript"><br />
var db = google.gears.factory.create('beta.database');<br />
db.open('moja-databaza);<br />
db.execute('create table if not exists Zoznam' +<br />
' (Meno text, Vek int)');<br />
db.execute('insert into Zoznam values (?, ?)', ['Peter', '22']);<br />
var rs = db.execute('select * from Zoznam order by Vek desc');<br />
<br />
rs.close();<br />
</script><br />
</source><br />
<br />
Tabuľka 2.3 Opis metód triedy'' Database''''.'' <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">Database</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|'''Metóda: '''<br />
|bgcolor = "#EAEAEA"|void''' open(<nowiki>[</nowiki>name<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – voliteľný<br><br />
<br />
|-<br />
|Opis:<br />
|Otvorí databázu<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''execute(sqlStatement, <nowiki>[</nowiki>argArray<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|sqlStatement – reťazec obsahujúci SQL príkaz, so znakom <nowiki>’</nowiki>'''?''' <nowiki>’</nowiki>''' '''ako''' '''zástupný symbol previazaný s parametrami<br>argArray – voliteľné pole parametrov, ktoré nahradia symboly <nowiki>’</nowiki>'''?''' <nowiki>’</nowiki><br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResultSet<br />
<br />
|-<br />
|Opis:<br />
|Vykoná SQL príkazy. <br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''close()'''<br />
<br />
|-<br />
|Opis:<br />
|Ukončí spojenie s&nbsp;databázou. Volanie database.close() nie je potrebné<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' remove()'''<br />
<br />
|-<br />
|Opis:<br />
|Zmaže práve otvorenú databázu.<br><br />
<br />
|}<br />
<br />
Metóda ''database.execute ''po úspešnom volaní vráti objekt triedy ''ResultSet.'' Obsahuje výsledky vykonaných SQL príkazov.<br />
<br />
Tabuľka 2.4 Opis metód triedy'' ResultSe''''t''<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">ResultSet</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|boolean '''isValidRow()'''<br />
<br />
|-<br />
|Opis:<br />
|Vráti true, ak môžete volať metódy na extrakciu dát<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''next()'''<br />
<br />
|-<br />
|Opis:<br />
|Pokračuje na ďalší riadok výsledkov <br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''close()'''<br />
<br />
|-<br />
|Opis:<br />
|Je potrebné zavolať metodu close(), ak sme skončili s&nbsp;prácou s výsledkami<br><br />
<br />
|}<br />
<br />
Tabuľka 2.5 Opis metód na extrakciu dát<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4" <font color="#000000">colspan = "2"|'''Metódy na extrakciu dát'''</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Int '''fieldCount()'''<br />
<br />
|-<br />
|Opis:<br />
|Vráti počet polí výsledku<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|string '''fieldName(int fieldIndex)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldIndex – index požadovaného pola<br />
<br />
|-<br />
|Opis:<br />
|Vráti meno špecifikovaného pola.<br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''field(int fieldIndex)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldIndex – index požadovaného pola<br />
<br />
|-<br />
|Návratová hodnota:<br />
|rôzne<br />
<br />
|-<br />
|Opis:<br />
|Vráti obsah špecifikovaného pola v aktuálnom riadku<br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''fieldByName(string fieldName)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldName – názov požadovaného pola<br />
<br />
|-<br />
|Návratová hodnota:<br />
|rôzne<br />
<br />
|-<br />
|Opis:<br />
|Vráti obsah špecifikovaného pola v aktuálnom riadku<br />
<br />
|}<br />
<br />
<br />
====WorkerPool API====<br />
Aplikačné rozhranie, ktoré umožňuje spracovávať javaskriptový kód na pozadí. Vďaka tomu neblokuje vykonávanie ďalších skriptov. Kompletná špecifikácia v [6].<br />
<br />
====Blob API====<br />
Pomocou objektov typu ''Blob ''môžeme odkazovať na binárne dáta vo webových aplikáciách. Kompletná špecifikácia v [7].<br />
<br />
====BlobBuilder API====<br />
''BlobBuilder'' je pomocný objekt pre vytváranie objektov typu ''Blob. Blob ''je nemenný, read-only object, rovnaký ako reťazec v&nbsp;Javascripte. ''BlobBuilder'' je používaný na&nbsp;generovanie ''Blobu'' s&nbsp;novým obsahom. Kompletná špecifikácia v [8].<br />
<br />
====Canvas API====<br />
Prostredníctvom tejto API môžeme pracovať s&nbsp;obrázkami pomocou javaskriptu. Táto grafická API je inšpirovaná HTML5 canvasom. Obsahuje metódy na rozkódovanie a zakódovanie do&nbsp;binárnych formátov (napr. PNG, JPEG). Kompletná špecifikácia v [9].<br />
<br />
====Desktop API====<br />
Desktop API poskytuje rozhranie pre prístup k desktopovým funkciám, ako je vytváranie ikon. V&nbsp;kóde 2.5 je zobrazená funkcia ''createShortcut'', ktorá vytvorí ikony na ploche a paneli nástrojov.<br />
<br />
Kód 2.5 Ukážka práce s&nbsp;Desktop API <br />
<source lang="javascript"><br />
var desktop = google.gears.factory.create('beta.desktop');<br />
function createShortcut() {<br />
var desktop = google.gears.factory.create("beta.desktop");<br />
var description = "Vytvorenie ikonky ROZVRHU.";<br />
var icons = {<br />
"16x16": "16icon.png"<br />
"32x32": "32icon.png",<br />
"48x48": "48icon.png",<br />
"128x128": "128icon.png"<br />
};<br />
desktop.createShortcut("Rozvrh Fakulty Mechatroniky", <br />
" http://priklad.sk/index.html", <br />
icons, <br />
description); <br />
}<br />
</source><br />
<br />
V&nbsp;tabuľke 2.6 je výpis metód triedy ''Desktop.'' Kompletná špecifikácia v [10].<br />
<br />
Tabuľka 2.6 Opis metód triedy ''Desktop''<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">Desktop</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|'''Metóda: '''<br />
|bgcolor = "#EAEAEA"|createShortcut(name, url, icons, <nowiki>[</nowiki>description<nowiki>]</nowiki>)<br />
<br />
|-<br />
|Parametre:<br />
|name - meno odkazu<br>url - adresa dokumentu, ktorý sa má otvoriť<br>icons – Objekt obsahujúci jednu alebo viac hodnôt v tvare:<br>rozmer : URL ikony<br>Napr.'' <nowiki>’</nowiki>128x128<nowiki>’</nowiki>: <nowiki>’</nowiki>http://priklad. sk/icon128x128.png<nowiki>’</nowiki>''<br>descriptions – nepovinný parameter. Text sa zobrazí v potvrdzovacom dialógu.<br><br> <br><br />
<br />
|-<br />
|Opis:<br />
|Vytvorí desktopový odkaz na spustenie aplikácie<br><br />
<br />
|}<br clear="all"><br />
<br />
====Geolocation API====<br />
Geolocation API umožňuje webovej aplikácii získať používateľa geografickú polohu. Kompletnú špecifikáciu nájdete v [11].<br />
<br />
====HttpRequest API====<br />
HttpRequest API implementuje podskupinu XmlHttpRequest W3C špecifikácie. Gears poskytuje vlastný HttpRequest objekt. Obsahuje väčšinu vlastností. Kompletnú špecifikáciu nájdete v [12].<br />
<br />
====Timer API====<br />
Obsahuje metódy, ktoré umožnia nastaviť vykonanie skriptov s&nbsp;časovým oneskorením a&nbsp;podobne. Kompletnú špecifikáciu nájdete v [13].<br />
<br />
===Podpora Google Gears v&nbsp;operačných systémoch a prehliadačoch===<br />
Funkčnosť Google Gears je overená na nasledujúcich platformách a&nbsp;prehliadačoch [14]:<br />
<br />
* Apple Mac OS X (10.4 alebo vyššia, G4, G5 or Intel Processor)<br />
* Firefox 1.5 alebo vyššia<br />
* Safari 3.1.1 alebo vyššia (OS X Tiger 10.4.11<nowiki>+</nowiki> alebo Leopard 10.5.3<nowiki>+</nowiki>, G4, G5 alebo Intel Processor)<br />
* Linux<br />
* Firefox 1.5 alebo vyššia<br />
* Microsoft Windows (XP alebo vyššia)<br />
* Firefox 1.5 alebo vyššia<br />
* Internet Explorer 6 alebo vyššia<br />
* Google Chrome<br />
* Microsoft Windows Mobile (5 alebo vyššia)<br />
* Internet Explorer 4.01 alebo vyššia<br />
* Opera Mobile 9.51 (Presto build 2.1.0<nowiki>+</nowiki>) (Windows Mobile 6 len pre dotykové zariadenia)<br />
* &nbsp;Nasledovné zariadenia nie sú podporované<br />
* Samsung i320 a i320N<br />
* Orange SPV C600<br />
* Motorola Q<br />
* Android 1.0<br />
===Umiestnenie dát na disku===<br />
Umiestnenie dát webovej aplikácie na disku záleží na platforme a&nbsp;internetovom prehliadači.<br />
<br />
'''Windows Vista - Internet Explorer'''<br />
<br />
Umiestnenie: <nowiki>{</nowiki>FOLDERID_LocalAppDataLow<nowiki>}</nowiki>\Google\Google Gears for Internet Explorer<br>Príklad: C:\Users\Bob\AppData\LocalLow\Google\Google Gears for Internet Explorer<br />
<br />
'''Windows Vista - Firefox'''<br />
<br />
Umiestnenie: C:\Users\<nowiki><</nowiki>username<nowiki>></nowiki>\AppData\Local\Mozilla\Firefox\Profiles\<nowiki>{</nowiki>profile<nowiki>}</nowiki>.default\Google Gears for Firefox <br>Príklad: C:\Users\Bob\AppData\Local\Mozilla\Firefox\Profiles\uelib44s.default\Google Gears for Firefox<br />
<br />
'''Windows Vista - Chrome'''<br />
<br />
Umiestnenie: C:\Users\<nowiki><</nowiki>username<nowiki>></nowiki>\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears<br>Príklad: C:\Users\Bob\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears<br />
<br />
'''Mac OS X - Safari'''<br />
<br />
Umiestnenie: <nowiki>~</nowiki>/Library/Application Support/Google/Google Gears for Safari<br>Príklad: /Users/Bob/Library/Application Support/Google/Google Gears for Safari<br />
<br />
'''Linux - Firefox'''<br />
<br />
Umiestnenie: <nowiki>~</nowiki>''bob''/.mozilla/firefox/<nowiki><</nowiki>firefox<nowiki>’</nowiki>s profile id<nowiki>></nowiki>/Google Gears for Firefox <br>Príklad: <nowiki>~</nowiki>bob/.mozilla/firefox/08ywpi3q.default/Google Gears for Firefox<br />
<br />
===Využitie Google Gears===<br />
Ako prvá začala Google Gears využívať firma Google vo svojej čítačke kanálov Google Reader. V&nbsp;režime off-line umožňuje prehliadať až 2000 príspevkov. Postupne sa podpora pre&nbsp;toto rozšírenie pridala aj do mailovej služby Gmail a on-line kancelárskeho balíka Google Docs.<br />
<br />
Ďalšie webové služby využívajúce Google Gears:<br />
<br />
* správca úloh '''rememberthemilk.com,'''<br />
* sociálna služba '''myspace.com,'''<br />
* on-line správca hesiel '''passpack.com,'''<br />
* nástroj pre riadenie projektov''' mindmeister.com,'''<br />
* open-source redakčný systém '''wordpress.net''' a ďalší.<br />
==HTML5==<br />
<br />
HTML5 [15] je najnovšia špecifikácia značkovacieho jazyka HTML vyvíjaná medzinárodným združením W3C (World Wide Web Consortium). Najdôležitejšou zmenou v&nbsp;novej verzií je samotná&nbsp;štruktúra&nbsp;HTML dokumentu, veľké množstvo nových elementov a&nbsp;aj podpora off-line web aplikácií. Pretože Google sa snaží dodržiavať štandardy, zastavil vývoj Google Gears a&nbsp;svoju iniciatívu smeruje na HTML5. Je možné, že podpora off-line aplikácií bude mať v novej špecifikácií aj niektoré rysy, ktoré poznáme z Google Gears. V&nbsp;súčasnosti je stále HTML 5 vo&nbsp;fáze vývoja. Dokončenie je plánované na rok 2012. Niekoľko rokov však potrvá jeho úplná podpora vo väčšine prehliadačoch. Prehliadače ako napríklad Firefox podporujú už väčšiu časť nových prvkov HTML5. V&nbsp;našom prehľade sú&nbsp;zaujímavé SQL API a&nbsp;Cache API, ktoré majú poskytovať rovnakú funkcionalitu ako Google Gears.<br />
<br />
===Elementy štruktúry===<br />
Doposiaľ bola štruktúra HTML dokumentu tvorená z&nbsp;''div ''elementov. HTML5 pridáva nové elementy k&nbsp;identifikácií každého z&nbsp;nich. Tieto majú presne stanovený sémantický význam a&nbsp;lepšie sa v nich orientuje aj samotný programátor.<br />
<br />
Tabuľka 2.7 Zoznam nových sémantických elementov štruktúry HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|section<br />
|Všeobecná (často nadradená) časť, ktorá môže združovať ostatné časti stránky. Element DIV, ktorý dostal sémantické meno.<br />
<br />
|-<br />
|header<br />
|Hlavička časti, v ktorej je začlenená.<br />
<br />
|-<br />
|footer<br />
|Pätička časti, v ktorej je začlenená.<br />
<br />
|-<br />
|nav<br />
|Časť stránky, ktorá obsahuje odkazy na ostatné stránky alebo časti danej stránky.<br />
<br />
|-<br />
|article<br />
|Časť stránky, ktorá obsahuje text nezávislý od ostatných dielov stránky.<br />
<br />
|}<br />
<br />
===Elementy multimédií===<br />
Zaujímavých zmien sa dočkala aj podpora multimédií (zvuk, video). Tieto sa na webe neskutočne rýchlo rozšírili (hlavne jednoduchým šírením pomocou stránok youtube.com a&nbsp;podobne). Preto sú v&nbsp;novej verzií HTML5 prístupné tagy&nbsp;''<nowiki><</nowiki>video<nowiki>></nowiki>''&nbsp;a ''<nowiki><</nowiki>audio<nowiki>></nowiki>.''<br />
<br />
Element ''<nowiki><</nowiki>canvas<nowiki>></nowiki>'' reprezentuje 2D kresliacu plochu ovládanú javaskriptom, ktorú môžete využívať, napr. na kreslenie grafov, grafických prvkov v hrách a prezentáciách.<br />
<br />
===Inline elementy===<br />
HTML5 zavádza nové elementy, ktoré majú pomôcť uviesť základné prvky, ako je čas alebo čísla.<br />
<br />
Tabuľka 2.8 Zoznam nových inline elementov HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|mark<br />
|Označenie textu.&nbsp;Slúži napríklad na označenie hľadaného slová v zozname výsledkov<br />
<br />
|-<br />
|time<br />
|Označuje čas alebo dátum v bloku textu.<br />
<br />
|-<br />
|meter<br />
|Predstavuje skalárne meradlá.<br />
<br />
|-<br />
|progress<br />
|Reprezentuje pokrok v&nbsp;dokončení úlohy. Môže byť použitý pre vizuálne zobrazenie.<br />
<br />
|}<br />
<br />
===Podpora režimu off-line===<br />
S novou špecifikáciou jazyka HTML 5 prichádza aj podpora off-line aplikácií. K&nbsp;dispozícií máme SQL API a&nbsp;Cache API, ktorá je obdobou LocalServer API.<br />
<br />
====SQL API====<br />
SQL databáza na strane klienta umožní štruktúrované dátové úložisko. API pracuje s&nbsp;touto databázou asynchrónne. To znamená, že používateľské prostredie nebude blokované vykonávaním synchrónneho požiadavku.<br />
<br />
Tabuľka 2.9 Zoznam metód návrhu HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Object openDatabase(dbname, dbversion, displayname, size)<br />
<br />
|-<br />
|Opis:<br />
|Vytvára databázový objekt podľa zvolených parametrov<br><br />
<br />
|-<br />
|Parametre:<br />
|dbname – meno databázy<br>dbversion – verzia databázy<br>displayname – zobrazený názov databázy<br>size – predpokladaná veľkosť databázy v bajtoch<br />
<br />
|-<br />
|Ďalšie Metódy: <br />
|transaction(), executeSql()<br />
<br />
|}<br />
<br />
====LocalStorage API====<br />
Dáta na lokálnom disku bude reprezentovať objekt ''localStorage.''<br />
<br />
Tabuľka 2.10 Zoznam niektorých metód pre prácu s&nbsp;lokálnym úložiskom<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Opis<br />
<br />
|-<br />
|clear()<br />
|zmaže celý obsah objektu<br />
<br />
|-<br />
|getItem()<br />
|získa obsah objektu podľa názvu<br />
<br />
|-<br />
|key()<br />
|získa kľúč podľa čísla<br />
<br />
|-<br />
|length<br />
|Počet uložených kľúčov<br />
<br />
|-<br />
|removeItem()<br />
|odstráni položku podľa jej mena<br />
<br />
|-<br />
|setItem()<br />
|Pridá hodnotu položke<br />
<br />
|}</div>Dusanhttp://www.kiwiki.info/index.php?title=Technol%C3%B3gie_off-line_web_aplik%C3%A1ci%C3%AD&diff=6885Technológie off-line web aplikácií2010-09-05T13:06:07Z<p>Dusan: </p>
<hr />
<div>[[Kategória:Študentské práce]]<br />
[[Kategória:Bakalárske práce]]<br />
[[Kategória:Informatika]]<br />
[[Kategória:php]]<br />
[[Kategória:web]]<br />
{{Hlavička_FM|{{PAGENAME}}|Dušan Pagáč|Ing. Juraj Ďuďák|<br />
2009/2010<br />
|Semetrálna práca|Mechatronika}} <br />
{{Praca_uvod|2|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}<br />
__TOC__<br />
<br />
==Technológie off-line web aplikácií==<br />
V&nbsp;súčasnosti je dostupných niekoľko technológií, ktoré podporujú off-line aplikácie:<br />
<br />
* Google Gears<br />
* HTML5<br />
Nová špecifikácia HTML5 je zatiaľ vo vývoji a&nbsp;má byť dokončená v&nbsp;roku 2012. Niektoré jej možnosti sú už dnes podporované vo väčšine prehliadačoch.<br />
<br />
===Google Gears===<br />
Google Gears [1] je open-source projekt of firmy Google. Pridaním nových funkcií do&nbsp;prehliadača dokáže sprístupniť webovú aplikáciu aj v&nbsp;režime off-line. Používateľovi stačí nainštalovať rozšírenie (Obr. 2.1) do svojho prehliadača a&nbsp;následne povoliť (Obr. 2.2) prístup konkrétnej webovej lokalite pre použitie&nbsp;tohto rozšírenia.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_07.png|framed|none]]<br />
<br />
Obr 2.1 Zobrazenie rozšírenia Google Gears v&nbsp;správe rozšírení prehliadača Firefox<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_08.png|framed|none]]<br />
<br />
Obr 2.2 Povolenia rozšírenia pre webovú lokalitu (localhost)<br />
<br />
====Moduly Google Gears====<br />
S rozšírením Google Gears získame tri nezávislé moduly: lokálny server, databáza, spracovanie kódu na pozadí. Každý z&nbsp;nich vylepšuje nejaký aspekt programovania webovej aplikácie na strane klienta prostredníctvom konkrétneho modulu.<br />
<br />
'''Lokálny server'''<br />
<br />
Modul lokálny server (''LocalServer'') umožňuje aplikácii uložiť a&nbsp;používať jeho HTTP zdroje lokálne bez pripojenia k&nbsp;sieti. Je to špecializovaná vyrovnávacia pamäť. Požiadavky na URL vo vyrovnávacej pamäti lokálneho servera sú zachytené a&nbsp;obslúžené lokálne priamo z&nbsp;disku používateľa.<br />
<br />
'''Databáza'''<br />
<br />
Databázový modul (''Database'') poskytuje open-source databázový systém SQLite. Databázové API slúži k&nbsp;neustálemu ukladaniu používateľských dát. Pre dáta uložené v&nbsp;lokálnej databáze je definovaná bezpečnostná politika, ktorá web aplikácii nedovolí prístup mimo jej domény.<br />
<br />
'''Spracovanie kódu na pozadí'''<br />
<br />
Skript časovo náročný na spracovanie, ako napríklad zložitý výpočet, môže spôsobiť, že&nbsp;používateľské prostredie nereaguje. Technika spracovania kódu na pozadí (''WorkerPool API'') dovoľuje web aplikácii spustiť javaskriptový kód na pozadí bez blokovania vykonávania ostatných skriptov na stránke.<br />
<br />
====Google Gears API====<br />
S&nbsp;modulmi Google Gears API pracujeme pomocou metód aplikačného rozhrania. Pre prístup k&nbsp;nim musíme do aplikácie zahrnúť súbor ''gears_init.js'', ktorý sa nachádza na adrese ''http://code.google.com/intl/sk/apis/gears/gears_init.js''. V&nbsp;nasledujúcom texte budú opísané všetky moduly Google Gears API.<br />
<br />
=====Factory API=====<br />
Trieda ''Factory'' je použitá na vytvorenie inštancií všetkých Gears objektov. Vytvorenie tejto inštancie (Kód 2.1) je povinné.<br />
<br />
Kód 2.1 Volanie metódy ''create'''' ''triedy'' factory''<br />
<source lang="javascript"><br />
<script type="text/javascript" src="gears_init.js"></script><br />
<script type="text/javascript"><br />
if (window.google && google.gears) {<br />
var db = google.gears.factory.create('beta.database');<br />
}<br />
</script><br />
</source><br />
<br />
Na to aby sme vytvorili inštanciu triedy ''Factory, ''je potrebné mať nainštalované samotné rozšírenie Google Gears. Existenciu tohto rozšírenia overíme pomocou kontroly globálnych objektov ''window.google'' a ''google.gears''. V&nbsp;skripte ''gears_init.js'' je definovaný objekt ''google.gears.factory''. Metóda ''create'' triedy ''factory'' vytvorí objekt danej triedy s parametrom ''className''. Parameter ''className ''je typ objektu, ktorý sa má vytvoriť. Kompletná špecifikácia je triedy ''Factory'' je v [2].<br />
<br />
Tabuľka 2.1 Opis metód triedy'' Factory''''.'' <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">factory</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Object''' create(className, <nowiki>[</nowiki>classVersion<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Opis:<br />
|Vytvára Gears objekt danej triedy<br><br />
<br />
|-<br />
|Parametre:<br />
|className – typ objektu, ktorý sa má vytvoriť<br>classVersion – parameter sa už nepoužíva, prípadne jeho hodnota <nowiki>’</nowiki>1.0<nowiki>’</nowiki><br />
<br />
|-<br />
|Detaily:<br />
|Podporované hodnoty parametru className:<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|className<br />
|bgcolor = "#EAEAEA"|Vytvorenie Gears triedy<br />
<br />
|-<br />
|beta.blobbuilder<br />
|BlobBuilder<br />
<br />
|-<br />
|beta.canvas<br />
|Canvas<br />
<br />
|-<br />
|beta.database<br />
|Database<br />
<br />
|-<br />
|beta.desktop<br />
|Desktop<br />
<br />
|-<br />
|beta.geolocation<br />
|Geolocation<br />
<br />
|-<br />
|beta.httprequest<br />
|HttpRequest<br />
<br />
|-<br />
|beta.localserver<br />
|LocalServer<br />
<br />
|-<br />
|beta.timer<br />
|Timer<br />
<br />
|-<br />
|beta.workerpool<br />
|WorkerPool<br />
<br />
|}<br />
<br />
|}<br />
<br />
=====LocalServer API=====<br />
Na správu vyrovnávacej pamäti sú dostupné dve triedy:<br />
<br />
'''''ResourceStore'' '''– povoľuje zachytávať dáta (obrázky, PDF súbor), ktoré sú adresované s URL.<br />
<br />
'''''ManagedResourceStore''''' – zoznam URL odkazov na súbory, ktoré budú dostupné off-line, sú&nbsp;v&nbsp;súbore ''manifest.'' Pomocou tejto triedy môžeme zabezpečiť aplikácii všetky dáta, ktoré bude potrebovať. Výhoda takéhoto riešenia je v automatickej aktualizácií pri zmene súboru ''manifest''. Príklad použitia je v&nbsp;kóde 2.2.<br />
<br />
Kód 2.2 Príklad použitia metódy ''createManagedStor''''e''<br />
<source lang="javascript"><br />
<script type="text/javascript" src="gears_init.js"></script><br />
<script type="text/javascript"><br />
var localServer = google.gears.factory.create('beta.localserver');<br />
var store = localServer.createManagedStore('test-store');<br />
store.manifestUrl = 'manifest.txt';<br />
</script><br />
</source><br />
<br />
Odkazy na súbory uvedené v&nbsp;súbore'' manifest'' (Kód 2.3) sa pri synchronizácií skopírujú na&nbsp;lokálny disk.<br />
<br />
Kód 2.3 Výpis súboru ''manifest.tx''''t''<br />
<source lang="javascript"><br />
{<br />
"betaManifestVersion": 1,<br />
"version": "1.0",<br />
"entries": [<br />
{ "url": "index.html" },<br />
{ "url": "gears_init.js" }<br />
]<br />
}<br />
</source><br />
<br />
Tabuľka 2.2 Metódy triedy ''LocalServer''. <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">LocalServer</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''createManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br><br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ManagedResourceStore <br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ManagedResourceStore alebo vytvorí novú, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''openManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ManagedResourceStore <br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ManagedResourceStore alebo vráti null, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' removeManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br><nowiki>[</nowiki>requiredCookie<nowiki>]</nowiki><br />
<br />
|-<br />
|Opis:<br />
|Odstráni ManagedResourceStore a&nbsp;odstráni všetky jej URL z&nbsp;lokálnej<br>vyrovnávacej pamäti<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''createStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br><nowiki>[</nowiki>requiredCookie<nowiki>]</nowiki><br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResourceStore<br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ResourceStore alebo vytvorí novú, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''openStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResourceStore<br><br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ResourceStore alebo vráti null, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' removeStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Opis:<br />
|Odstráni ResourceStore a&nbsp;odstráni a&nbsp;celý jeho obsah<br>vyrovnávacej pamäti<br><br />
<br />
|}<br />
<br />
=====Database API=====<br />
Database API je aplikačné rozhranie pre prácu s&nbsp;lokálnou databázou SQLite[4]. SQLite je&nbsp;knižnica, ktorá implementuje relačnú databázu bez potreby servera.<br />
<br />
Kód 2.4 Príklad práce s&nbsp;lokálnou databázou<br />
<source lang="javascript"><br />
<script type="text/javascript" src="gears_init.js"></script><br />
<script type="text/javascript"><br />
var db = google.gears.factory.create('beta.database');<br />
db.open('moja-databaza);<br />
db.execute('create table if not exists Zoznam' +<br />
' (Meno text, Vek int)');<br />
db.execute('insert into Zoznam values (?, ?)', ['Peter', '22']);<br />
var rs = db.execute('select * from Zoznam order by Vek desc');<br />
<br />
rs.close();<br />
</script><br />
</source><br />
<br />
Tabuľka 2.3 Opis metód triedy'' Database''''.'' <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">Database</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|'''Metóda: '''<br />
|bgcolor = "#EAEAEA"|void''' open(<nowiki>[</nowiki>name<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – voliteľný<br><br />
<br />
|-<br />
|Opis:<br />
|Otvorí databázu<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''execute(sqlStatement, <nowiki>[</nowiki>argArray<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|sqlStatement – reťazec obsahujúci SQL príkaz, so znakom <nowiki>’</nowiki>'''?''' <nowiki>’</nowiki>''' '''ako''' '''zástupný symbol previazaný s parametrami<br>argArray – voliteľné pole parametrov, ktoré nahradia symboly <nowiki>’</nowiki>'''?''' <nowiki>’</nowiki><br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResultSet<br />
<br />
|-<br />
|Opis:<br />
|Vykoná SQL príkazy. <br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''close()'''<br />
<br />
|-<br />
|Opis:<br />
|Ukončí spojenie s&nbsp;databázou. Volanie database.close() nie je potrebné<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' remove()'''<br />
<br />
|-<br />
|Opis:<br />
|Zmaže práve otvorenú databázu.<br><br />
<br />
|}<br />
<br />
Metóda ''database.execute ''po úspešnom volaní vráti objekt triedy ''ResultSet.'' Obsahuje výsledky vykonaných SQL príkazov.<br />
<br />
Tabuľka 2.4 Opis metód triedy'' ResultSe''''t''<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">ResultSet</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|boolean '''isValidRow()'''<br />
<br />
|-<br />
|Opis:<br />
|Vráti true, ak môžete volať metódy na extrakciu dát<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''next()'''<br />
<br />
|-<br />
|Opis:<br />
|Pokračuje na ďalší riadok výsledkov <br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''close()'''<br />
<br />
|-<br />
|Opis:<br />
|Je potrebné zavolať metodu close(), ak sme skončili s&nbsp;prácou s výsledkami<br><br />
<br />
|}<br />
<br />
Tabuľka 2.5 Opis metód na extrakciu dát<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4" <font color="#000000">colspan = "2"|'''Metódy na extrakciu dát'''</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Int '''fieldCount()'''<br />
<br />
|-<br />
|Opis:<br />
|Vráti počet polí výsledku<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|string '''fieldName(int fieldIndex)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldIndex – index požadovaného pola<br />
<br />
|-<br />
|Opis:<br />
|Vráti meno špecifikovaného pola.<br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''field(int fieldIndex)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldIndex – index požadovaného pola<br />
<br />
|-<br />
|Návratová hodnota:<br />
|rôzne<br />
<br />
|-<br />
|Opis:<br />
|Vráti obsah špecifikovaného pola v aktuálnom riadku<br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''fieldByName(string fieldName)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldName – názov požadovaného pola<br />
<br />
|-<br />
|Návratová hodnota:<br />
|rôzne<br />
<br />
|-<br />
|Opis:<br />
|Vráti obsah špecifikovaného pola v aktuálnom riadku<br />
<br />
|}<br />
<br />
<br />
=====WorkerPool API=====<br />
Aplikačné rozhranie, ktoré umožňuje spracovávať javaskriptový kód na pozadí. Vďaka tomu neblokuje vykonávanie ďalších skriptov. Kompletná špecifikácia v [6].<br />
<br />
=====Blob API=====<br />
Pomocou objektov typu ''Blob ''môžeme odkazovať na binárne dáta vo webových aplikáciách. Kompletná špecifikácia v [7].<br />
<br />
=====BlobBuilder API=====<br />
''BlobBuilder'' je pomocný objekt pre vytváranie objektov typu ''Blob. Blob ''je nemenný, read-only object, rovnaký ako reťazec v&nbsp;Javascripte. ''BlobBuilder'' je používaný na&nbsp;generovanie ''Blobu'' s&nbsp;novým obsahom. Kompletná špecifikácia v [8].<br />
<br />
=====Canvas API=====<br />
Prostredníctvom tejto API môžeme pracovať s&nbsp;obrázkami pomocou javaskriptu. Táto grafická API je inšpirovaná HTML5 canvasom. Obsahuje metódy na rozkódovanie a zakódovanie do&nbsp;binárnych formátov (napr. PNG, JPEG). Kompletná špecifikácia v [9].<br />
<br />
=====Desktop API=====<br />
Desktop API poskytuje rozhranie pre prístup k desktopovým funkciám, ako je vytváranie ikon. V&nbsp;kóde 2.5 je zobrazená funkcia ''createShortcut'', ktorá vytvorí ikony na ploche a paneli nástrojov.<br />
<br />
Kód 2.5 Ukážka práce s&nbsp;Desktop API <br />
<source lang="javascript"><br />
var desktop = google.gears.factory.create('beta.desktop');<br />
function createShortcut() {<br />
var desktop = google.gears.factory.create("beta.desktop");<br />
var description = "Vytvorenie ikonky ROZVRHU.";<br />
var icons = {<br />
"16x16": "16icon.png"<br />
"32x32": "32icon.png",<br />
"48x48": "48icon.png",<br />
"128x128": "128icon.png"<br />
};<br />
desktop.createShortcut("Rozvrh Fakulty Mechatroniky", <br />
" http://priklad.sk/index.html", <br />
icons, <br />
description); <br />
}<br />
</source><br />
<br />
V&nbsp;tabuľke 2.6 je výpis metód triedy ''Desktop.'' Kompletná špecifikácia v [10].<br />
<br />
Tabuľka 2.6 Opis metód triedy ''Desktop''<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">Desktop</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|'''Metóda: '''<br />
|bgcolor = "#EAEAEA"|createShortcut(name, url, icons, <nowiki>[</nowiki>description<nowiki>]</nowiki>)<br />
<br />
|-<br />
|Parametre:<br />
|name - meno odkazu<br>url - adresa dokumentu, ktorý sa má otvoriť<br>icons – Objekt obsahujúci jednu alebo viac hodnôt v tvare:<br>rozmer : URL ikony<br>Napr.'' <nowiki>’</nowiki>128x128<nowiki>’</nowiki>: <nowiki>’</nowiki>http://priklad. sk/icon128x128.png<nowiki>’</nowiki>''<br>descriptions – nepovinný parameter. Text sa zobrazí v potvrdzovacom dialógu.<br><br> <br><br />
<br />
|-<br />
|Opis:<br />
|Vytvorí desktopový odkaz na spustenie aplikácie<br><br />
<br />
|}<br clear="all"><br />
<br />
=====Geolocation API=====<br />
Geolocation API umožňuje webovej aplikácii získať používateľa geografickú polohu. Kompletnú špecifikáciu nájdete v [11].<br />
<br />
=====HttpRequest API=====<br />
HttpRequest API implementuje podskupinu XmlHttpRequest W3C špecifikácie. Gears poskytuje vlastný HttpRequest objekt. Obsahuje väčšinu vlastností. Kompletnú špecifikáciu nájdete v [12].<br />
<br />
=====Timer API=====<br />
Obsahuje metódy, ktoré umožnia nastaviť vykonanie skriptov s&nbsp;časovým oneskorením a&nbsp;podobne. Kompletnú špecifikáciu nájdete v [13].<br />
<br />
====Podpora Google Gears v&nbsp;operačných systémoch a prehliadačoch====<br />
Funkčnosť Google Gears je overená na nasledujúcich platformách a&nbsp;prehliadačoch [14]:<br />
<br />
* Apple Mac OS X (10.4 alebo vyššia, G4, G5 or Intel Processor)<br />
* Firefox 1.5 alebo vyššia<br />
* Safari 3.1.1 alebo vyššia (OS X Tiger 10.4.11<nowiki>+</nowiki> alebo Leopard 10.5.3<nowiki>+</nowiki>, G4, G5 alebo Intel Processor)<br />
* Linux<br />
* Firefox 1.5 alebo vyššia<br />
* Microsoft Windows (XP alebo vyššia)<br />
* Firefox 1.5 alebo vyššia<br />
* Internet Explorer 6 alebo vyššia<br />
* Google Chrome<br />
* Microsoft Windows Mobile (5 alebo vyššia)<br />
* Internet Explorer 4.01 alebo vyššia<br />
* Opera Mobile 9.51 (Presto build 2.1.0<nowiki>+</nowiki>) (Windows Mobile 6 len pre dotykové zariadenia)<br />
* &nbsp;Nasledovné zariadenia nie sú podporované<br />
* Samsung i320 a i320N<br />
* Orange SPV C600<br />
* Motorola Q<br />
* Android 1.0<br />
====Umiestnenie dát na disku====<br />
Umiestnenie dát webovej aplikácie na disku záleží na platforme a&nbsp;internetovom prehliadači.<br />
<br />
'''Windows Vista - Internet Explorer'''<br />
<br />
Umiestnenie: <nowiki>{</nowiki>FOLDERID_LocalAppDataLow<nowiki>}</nowiki>\Google\Google Gears for Internet Explorer<br>Príklad: C:\Users\Bob\AppData\LocalLow\Google\Google Gears for Internet Explorer<br />
<br />
'''Windows Vista - Firefox'''<br />
<br />
Umiestnenie: C:\Users\<nowiki><</nowiki>username<nowiki>></nowiki>\AppData\Local\Mozilla\Firefox\Profiles\<nowiki>{</nowiki>profile<nowiki>}</nowiki>.default\Google Gears for Firefox <br>Príklad: C:\Users\Bob\AppData\Local\Mozilla\Firefox\Profiles\uelib44s.default\Google Gears for Firefox<br />
<br />
'''Windows Vista - Chrome'''<br />
<br />
Umiestnenie: C:\Users\<nowiki><</nowiki>username<nowiki>></nowiki>\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears<br>Príklad: C:\Users\Bob\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears<br />
<br />
'''Mac OS X - Safari'''<br />
<br />
Umiestnenie: <nowiki>~</nowiki>/Library/Application Support/Google/Google Gears for Safari<br>Príklad: /Users/Bob/Library/Application Support/Google/Google Gears for Safari<br />
<br />
'''Linux - Firefox'''<br />
<br />
Umiestnenie: <nowiki>~</nowiki>''bob''/.mozilla/firefox/<nowiki><</nowiki>firefox<nowiki>’</nowiki>s profile id<nowiki>></nowiki>/Google Gears for Firefox <br>Príklad: <nowiki>~</nowiki>bob/.mozilla/firefox/08ywpi3q.default/Google Gears for Firefox<br />
<br />
====Využitie Google Gears====<br />
Ako prvá začala Google Gears využívať firma Google vo svojej čítačke kanálov Google Reader. V&nbsp;režime off-line umožňuje prehliadať až 2000 príspevkov. Postupne sa podpora pre&nbsp;toto rozšírenie pridala aj do mailovej služby Gmail a on-line kancelárskeho balíka Google Docs.<br />
<br />
Ďalšie webové služby využívajúce Google Gears:<br />
<br />
* správca úloh '''rememberthemilk.com,'''<br />
* sociálna služba '''myspace.com,'''<br />
* on-line správca hesiel '''passpack.com,'''<br />
* nástroj pre riadenie projektov''' mindmeister.com,'''<br />
* open-source redakčný systém '''wordpress.net''' a ďalší.<br />
===HTML5===<br />
<br />
HTML5 [15] je najnovšia špecifikácia značkovacieho jazyka HTML vyvíjaná medzinárodným združením W3C (World Wide Web Consortium). Najdôležitejšou zmenou v&nbsp;novej verzií je samotná&nbsp;štruktúra&nbsp;HTML dokumentu, veľké množstvo nových elementov a&nbsp;aj podpora off-line web aplikácií. Pretože Google sa snaží dodržiavať štandardy, zastavil vývoj Google Gears a&nbsp;svoju iniciatívu smeruje na HTML5. Je možné, že podpora off-line aplikácií bude mať v novej špecifikácií aj niektoré rysy, ktoré poznáme z Google Gears. V&nbsp;súčasnosti je stále HTML 5 vo&nbsp;fáze vývoja. Dokončenie je plánované na rok 2012. Niekoľko rokov však potrvá jeho úplná podpora vo väčšine prehliadačoch. Prehliadače ako napríklad Firefox podporujú už väčšiu časť nových prvkov HTML5. V&nbsp;našom prehľade sú&nbsp;zaujímavé SQL API a&nbsp;Cache API, ktoré majú poskytovať rovnakú funkcionalitu ako Google Gears.<br />
<br />
====Elementy štruktúry====<br />
Doposiaľ bola štruktúra HTML dokumentu tvorená z&nbsp;''div ''elementov. HTML5 pridáva nové elementy k&nbsp;identifikácií každého z&nbsp;nich. Tieto majú presne stanovený sémantický význam a&nbsp;lepšie sa v nich orientuje aj samotný programátor.<br />
<br />
Tabuľka 2.7 Zoznam nových sémantických elementov štruktúry HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|section<br />
|Všeobecná (často nadradená) časť, ktorá môže združovať ostatné časti stránky. Element DIV, ktorý dostal sémantické meno.<br />
<br />
|-<br />
|header<br />
|Hlavička časti, v ktorej je začlenená.<br />
<br />
|-<br />
|footer<br />
|Pätička časti, v ktorej je začlenená.<br />
<br />
|-<br />
|nav<br />
|Časť stránky, ktorá obsahuje odkazy na ostatné stránky alebo časti danej stránky.<br />
<br />
|-<br />
|article<br />
|Časť stránky, ktorá obsahuje text nezávislý od ostatných dielov stránky.<br />
<br />
|}<br />
<br />
====Elementy multimédií====<br />
Zaujímavých zmien sa dočkala aj podpora multimédií (zvuk, video). Tieto sa na webe neskutočne rýchlo rozšírili (hlavne jednoduchým šírením pomocou stránok youtube.com a&nbsp;podobne). Preto sú v&nbsp;novej verzií HTML5 prístupné tagy&nbsp;''<nowiki><</nowiki>video<nowiki>></nowiki>''&nbsp;a ''<nowiki><</nowiki>audio<nowiki>></nowiki>.''<br />
<br />
Element ''<nowiki><</nowiki>canvas<nowiki>></nowiki>'' reprezentuje 2D kresliacu plochu ovládanú javaskriptom, ktorú môžete využívať, napr. na kreslenie grafov, grafických prvkov v hrách a prezentáciách.<br />
<br />
====Inline elementy====<br />
HTML5 zavádza nové elementy, ktoré majú pomôcť uviesť základné prvky, ako je čas alebo čísla.<br />
<br />
Tabuľka 2.8 Zoznam nových inline elementov HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|mark<br />
|Označenie textu.&nbsp;Slúži napríklad na označenie hľadaného slová v zozname výsledkov<br />
<br />
|-<br />
|time<br />
|Označuje čas alebo dátum v bloku textu.<br />
<br />
|-<br />
|meter<br />
|Predstavuje skalárne meradlá.<br />
<br />
|-<br />
|progress<br />
|Reprezentuje pokrok v&nbsp;dokončení úlohy. Môže byť použitý pre vizuálne zobrazenie.<br />
<br />
|}<br />
<br />
====Podpora režimu off-line====<br />
S novou špecifikáciou jazyka HTML 5 prichádza aj podpora off-line aplikácií. K&nbsp;dispozícií máme SQL API a&nbsp;Cache API, ktorá je obdobou LocalServer API.<br />
<br />
=====SQL API=====<br />
SQL databáza na strane klienta umožní štruktúrované dátové úložisko. API pracuje s&nbsp;touto databázou asynchrónne. To znamená, že používateľské prostredie nebude blokované vykonávaním synchrónneho požiadavku.<br />
<br />
Tabuľka 2.9 Zoznam metód návrhu HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Object openDatabase(dbname, dbversion, displayname, size)<br />
<br />
|-<br />
|Opis:<br />
|Vytvára databázový objekt podľa zvolených parametrov<br><br />
<br />
|-<br />
|Parametre:<br />
|dbname – meno databázy<br>dbversion – verzia databázy<br>displayname – zobrazený názov databázy<br>size – predpokladaná veľkosť databázy v bajtoch<br />
<br />
|-<br />
|Ďalšie Metódy: <br />
|transaction(), executeSql()<br />
<br />
|}<br />
<br />
=====LocalStorage API=====<br />
Dáta na lokálnom disku bude reprezentovať objekt ''localStorage.''<br />
<br />
Tabuľka 2.10 Zoznam niektorých metód pre prácu s&nbsp;lokálnym úložiskom<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Opis<br />
<br />
|-<br />
|clear()<br />
|zmaže celý obsah objektu<br />
<br />
|-<br />
|getItem()<br />
|získa obsah objektu podľa názvu<br />
<br />
|-<br />
|key()<br />
|získa kľúč podľa čísla<br />
<br />
|-<br />
|length<br />
|Počet uložených kľúčov<br />
<br />
|-<br />
|removeItem()<br />
|odstráni položku podľa jej mena<br />
<br />
|-<br />
|setItem()<br />
|Pridá hodnotu položke<br />
<br />
|}</div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Bakalarka_du%C5%A1an_pag%C3%A1%C4%8D_2_2_FINAL_12.png&diff=6884Súbor:Bakalarka dušan pagáč 2 2 FINAL 12.png2010-09-05T13:04:25Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Bakalarka_du%C5%A1an_pag%C3%A1%C4%8D_2_2_FINAL_11.png&diff=6883Súbor:Bakalarka dušan pagáč 2 2 FINAL 11.png2010-09-05T13:04:18Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Bakalarka_du%C5%A1an_pag%C3%A1%C4%8D_2_2_FINAL_10.png&diff=6882Súbor:Bakalarka dušan pagáč 2 2 FINAL 10.png2010-09-05T13:04:06Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Bakalarka_du%C5%A1an_pag%C3%A1%C4%8D_2_2_FINAL_09.png&diff=6881Súbor:Bakalarka dušan pagáč 2 2 FINAL 09.png2010-09-05T13:03:59Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=Syst%C3%A9my_na_vizualiz%C3%A1ciu_rozvrhu_hod%C3%ADn&diff=6880Systémy na vizualizáciu rozvrhu hodín2010-09-05T12:55:36Z<p>Dusan: </p>
<hr />
<div>[[Kategória:Študentské práce]][[Kategória:Bakalárske práce]][[Kategória:Informatika]][[Kategória:php]][[Kategória:web]]<br />
{{Praca_uvod|3|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}<br />
__TOC__<br />
<br />
<br />
<br />
=Systémy na vizualizáciu rozvrhu=<br />
Pre lepšie pochopenie problematiky tvorby rozvrhu sa budeme v tejto kapitole zaoberať aplikáciami na tvorbu a správu rozvrhu. Zaujímať nás bude hlavne akým spôsobom je riešené zobrazovanie samotného rozvrhu. <br />
<br />
==Rozvrh 4.1==<br />
Rozvrh 4.1 [16] je aplikácia na tvorbu rozvrhu pre všetky typy škôl určená pre operačný systém Windows. Program má výkonný algoritmus automatickej tvorby rozvrhu, ktorý vytvorí kompletný rozvrh školy podľa zadaných podmienok. Pri tvorbe sú dodržiavané pedagogické požiadavky na vyučovanie v&nbsp;triedach, na počet voľných hodín v rozvrhu učiteľa ako i rôzne špecifické požiadavky každej školy. V programe sú veľmi silné nástroje, ktoré umožňujú tvorcovi rozvrhu jednoducho upravovať už vytvorený rozvrh. Verzia 4.1 má funkciu export rozvrhov vo formáte HTML (Obr. 4.1), čo umožňuje jednoduchým spôsobom prezentovať rozvrh školy na internete.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_09.png|framed|none]]<br />
<br />
Obr. 4.1 Html výstup zobrazenia rozvrhu programu Rozvrh 4.1<br />
<br />
Prvý riadok reprezentuje časovú os jednotlivých vyučovacích hodín. Každý ďalší riadok zobrazuje vyučovacie hodiny v danom dni. Toto rozloženie je pravdepodobne najprehľadnejšie a veľmi intuitívne. Vhodným riešením je aj farebné označenie každého predmetu. Používateľ si daný predmet zapamätá podľa jemu priradenej farby, a tým sa mu zjednoduší orientácia v rozvrhu. <br />
<br />
==UIS Mendelovej univerzity v&nbsp;Brne==<br />
<br />
Univerzitný informačný systém je programový systém (webový informačný systém), vytvorený domácim vývojom na Mendelovej univerzite v Brne za účelom automatizácie jej študijnej a vedecko-výskumnej agendy. V súčasnej dobe tento školský informačný systém pokrýva všetky hlavné činnosti univerzity a postupne automatizuje ďalšie prevádzkové a administratívne agendy. Programový súbor je tiež postupne zavádzaný na ďalších univerzitách v Českej a Slovenskej republike. Informačný systém je vyvíjaný postupne od roku 2000 a počas svojej krátkej existencie získal rôzne ocenenia. V roku 2002 3. miesto v súťaži EUNIS Elite Award of Excellence, v roku 2007 bol v tej istej súťaži doporučený ako High Recommended a získal 2. miesto [17]. Ukážka používateľského rozhrania (Obr. 3.1).<br />
<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_10.png|framed|none]]<br />
<br />
Obr 3.2 Zobrazenie prvkov používateľského rozhrania UIS<br />
<br />
<br />
==Rozvrh fakulty mechatroniky==<br />
===Rozvrh – stará verzia aplikácie===<br />
Webová aplikácia (systém pracoval od roku 2006 do zimného semester 2009) na zobrazovanie rozvrhu fakulty mechatroniky má výpis rozvrhu riešený iným spôsobom ako v&nbsp;aplikácií Rozvh 4.1.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_11.png|framed|none]]<br />
<br />
Obr 3.3 Webová aplikácia na zobrazovanie rozvrhu Fakulty mechatroniky TnU AD<br />
<br />
Výpis môže pôsobiť trochu neprehľadne, pretože&nbsp;každý riadok reprezentuje jeden predmet. Čas jednotlivých prednášok je zobrazený v&nbsp;stĺpci s názvom ''Čas''. Deň, v&nbsp;ktorý sa daný predmet vyučuje, je v&nbsp;stĺpci s&nbsp;názvom ''Deň''. Absencia časovej osi robí problémy v&nbsp;pohodlnej orientácií v&nbsp;rozvrhu.<br />
<br />
===Rozvrh FM - AIS===<br />
Systém je nasadený od letného semestra 2010 ako celo univerzitné riešenie. V&nbsp;súčasnosti používa fakulta na správu rozvrhu modul AiS[18]. Akademický informačný systém AiS je komplexný informačný systém určený na podporu riadenie základných procesov vysokej školy. AiS je produkt, ktorý sa neustále dynamicky vyvíja na základe požiadaviek jednotlivých vysokých škôl. V súčasnosti je AiS implementovaný na 16 vysokých školách na Slovensku a k dispozícii ho má viac ako 100 tisíc študentov slovenských škôl, čo je viac ako 50% všetkých študentov slovenských vysokých škôl. Nevýhodou tohto komplexného systému je jeho zložitosť, neprehľadnosť a&nbsp;pomalé odozvy používateľského prostredia. Študent po prihlásení do systému AiS musí otvoriť niekoľko pracovných okien a&nbsp;navoliť kritéria pre zobrazenie rozvrhu pre svoj študijný obor, čo je veľmi zdĺhavé a&nbsp;nepohodlné. Ukážka používateľského prostredia (Obr. 3.1).<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_12.png|framed|none]]<br />
<br />
Obr 3.4 Zobrazenie používateľského prostredia AiS2</div>Dusanhttp://www.kiwiki.info/index.php?title=Technol%C3%B3gie_off-line_web_aplik%C3%A1ci%C3%AD&diff=6879Technológie off-line web aplikácií2010-09-05T12:37:43Z<p>Dusan: </p>
<hr />
<div>[[Kategória:Študentské práce]]<br />
[[Kategória:Bakalárske práce]]<br />
[[Kategória:Informatika]]<br />
[[Kategória:php]]<br />
[[Kategória:web]]<br />
{{Hlavička_FM|{{PAGENAME}}|Dušan Pagáč|Ing. Juraj Ďuďák|<br />
2009/2010<br />
|Semetrálna práca|Mechatronika}} <br />
{{Praca_uvod|2|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}<br />
__TOC__<br />
<br />
= =<br />
<br />
==Technológie off-line web aplikácií==<br />
V&nbsp;súčasnosti je dostupných niekoľko technológií, ktoré podporujú off-line aplikácie:<br />
<br />
* Google Gears<br />
* HTML5<br />
Nová špecifikácia HTML5 je zatiaľ vo vývoji a&nbsp;má byť dokončená v&nbsp;roku 2012. Niektoré jej možnosti sú už dnes podporované vo väčšine prehliadačoch.<br />
<br />
===Google Gears===<br />
Google Gears [1] je open-source projekt of firmy Google. Pridaním nových funkcií do&nbsp;prehliadača dokáže sprístupniť webovú aplikáciu aj v&nbsp;režime off-line. Používateľovi stačí nainštalovať rozšírenie (Obr. 2.1) do svojho prehliadača a&nbsp;následne povoliť (Obr. 2.2) prístup konkrétnej webovej lokalite pre použitie&nbsp;tohto rozšírenia.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_07.png|framed|none]]<br />
<br />
Obr 2.1 Zobrazenie rozšírenia Google Gears v&nbsp;správe rozšírení prehliadača Firefox<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_08.png|framed|none]]<br />
<br />
Obr 2.2 Povolenia rozšírenia pre webovú lokalitu (localhost)<br />
<br />
====Moduly Google Gears====<br />
S rozšírením Google Gears získame tri nezávislé moduly: lokálny server, databáza, spracovanie kódu na pozadí. Každý z&nbsp;nich vylepšuje nejaký aspekt programovania webovej aplikácie na strane klienta prostredníctvom konkrétneho modulu.<br />
<br />
'''Lokálny server'''<br />
<br />
Modul lokálny server (''LocalServer'') umožňuje aplikácii uložiť a&nbsp;používať jeho HTTP zdroje lokálne bez pripojenia k&nbsp;sieti. Je to špecializovaná vyrovnávacia pamäť. Požiadavky na URL vo vyrovnávacej pamäti lokálneho servera sú zachytené a&nbsp;obslúžené lokálne priamo z&nbsp;disku používateľa.<br />
<br />
'''Databáza'''<br />
<br />
Databázový modul (''Database'') poskytuje open-source databázový systém SQLite. Databázové API slúži k&nbsp;neustálemu ukladaniu používateľských dát. Pre dáta uložené v&nbsp;lokálnej databáze je definovaná bezpečnostná politika, ktorá web aplikácii nedovolí prístup mimo jej domény.<br />
<br />
'''Spracovanie kódu na pozadí'''<br />
<br />
Skript časovo náročný na spracovanie, ako napríklad zložitý výpočet, môže spôsobiť, že&nbsp;používateľské prostredie nereaguje. Technika spracovania kódu na pozadí (''WorkerPool API'') dovoľuje web aplikácii spustiť javaskriptový kód na pozadí bez blokovania vykonávania ostatných skriptov na stránke.<br />
<br />
====Google Gears API====<br />
S&nbsp;modulmi Google Gears API pracujeme pomocou metód aplikačného rozhrania. Pre prístup k&nbsp;nim musíme do aplikácie zahrnúť súbor ''gears_init.js'', ktorý sa nachádza na adrese ''http://code.google.com/intl/sk/apis/gears/gears_init.js''. V&nbsp;nasledujúcom texte budú opísané všetky moduly Google Gears API.<br />
<br />
=====Factory API=====<br />
Trieda ''Factory'' je použitá na vytvorenie inštancií všetkých Gears objektov. Vytvorenie tejto inštancie (Kód 2.1) je povinné.<br />
<br />
Kód 2.1 Volanie metódy ''create'''' ''triedy'' factory''<br />
<source lang="javascript"><br />
<script type="text/javascript" src="gears_init.js"></script><br />
<script type="text/javascript"><br />
if (window.google && google.gears) {<br />
var db = google.gears.factory.create('beta.database');<br />
}<br />
</script><br />
</source><br />
<br />
Na to aby sme vytvorili inštanciu triedy ''Factory, ''je potrebné mať nainštalované samotné rozšírenie Google Gears. Existenciu tohto rozšírenia overíme pomocou kontroly globálnych objektov ''window.google'' a ''google.gears''. V&nbsp;skripte ''gears_init.js'' je definovaný objekt ''google.gears.factory''. Metóda ''create'' triedy ''factory'' vytvorí objekt danej triedy s parametrom ''className''. Parameter ''className ''je typ objektu, ktorý sa má vytvoriť. Kompletná špecifikácia je triedy ''Factory'' je v [2].<br />
<br />
Tabuľka 2.1 Opis metód triedy'' Factory''''.'' <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">factory</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Object''' create(className, <nowiki>[</nowiki>classVersion<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Opis:<br />
|Vytvára Gears objekt danej triedy<br><br />
<br />
|-<br />
|Parametre:<br />
|className – typ objektu, ktorý sa má vytvoriť<br>classVersion – parameter sa už nepoužíva, prípadne jeho hodnota <nowiki>’</nowiki>1.0<nowiki>’</nowiki><br />
<br />
|-<br />
|Detaily:<br />
|Podporované hodnoty parametru className:<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|className<br />
|bgcolor = "#EAEAEA"|Vytvorenie Gears triedy<br />
<br />
|-<br />
|beta.blobbuilder<br />
|BlobBuilder<br />
<br />
|-<br />
|beta.canvas<br />
|Canvas<br />
<br />
|-<br />
|beta.database<br />
|Database<br />
<br />
|-<br />
|beta.desktop<br />
|Desktop<br />
<br />
|-<br />
|beta.geolocation<br />
|Geolocation<br />
<br />
|-<br />
|beta.httprequest<br />
|HttpRequest<br />
<br />
|-<br />
|beta.localserver<br />
|LocalServer<br />
<br />
|-<br />
|beta.timer<br />
|Timer<br />
<br />
|-<br />
|beta.workerpool<br />
|WorkerPool<br />
<br />
|}<br />
<br />
|}<br />
<br />
=====LocalServer API=====<br />
Na správu vyrovnávacej pamäti sú dostupné dve triedy:<br />
<br />
'''''ResourceStore'' '''– povoľuje zachytávať dáta (obrázky, PDF súbor), ktoré sú adresované s URL.<br />
<br />
'''''ManagedResourceStore''''' – zoznam URL odkazov na súbory, ktoré budú dostupné off-line, sú&nbsp;v&nbsp;súbore ''manifest.'' Pomocou tejto triedy môžeme zabezpečiť aplikácii všetky dáta, ktoré bude potrebovať. Výhoda takéhoto riešenia je v automatickej aktualizácií pri zmene súboru ''manifest''. Príklad použitia je v&nbsp;kóde 2.2.<br />
<br />
Kód 2.2 Príklad použitia metódy ''createManagedStor''''e''<br />
<source lang="javascript"><br />
<script type="text/javascript" src="gears_init.js"></script><br />
<script type="text/javascript"><br />
var localServer = google.gears.factory.create('beta.localserver');<br />
var store = localServer.createManagedStore('test-store');<br />
store.manifestUrl = 'manifest.txt';<br />
</script><br />
</source><br />
<br />
Odkazy na súbory uvedené v&nbsp;súbore'' manifest'' (Kód 2.3) sa pri synchronizácií skopírujú na&nbsp;lokálny disk.<br />
<br />
Kód 2.3 Výpis súboru ''manifest.tx''''t''<br />
<source lang="javascript"><br />
{<br />
"betaManifestVersion": 1,<br />
"version": "1.0",<br />
"entries": [<br />
{ "url": "index.html" },<br />
{ "url": "gears_init.js" }<br />
]<br />
}<br />
</source><br />
<br />
Tabuľka 2.2 Metódy triedy ''LocalServer''. <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">LocalServer</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''createManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br><br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ManagedResourceStore <br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ManagedResourceStore alebo vytvorí novú, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''openManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ManagedResourceStore <br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ManagedResourceStore alebo vráti null, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' removeManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br><nowiki>[</nowiki>requiredCookie<nowiki>]</nowiki><br />
<br />
|-<br />
|Opis:<br />
|Odstráni ManagedResourceStore a&nbsp;odstráni všetky jej URL z&nbsp;lokálnej<br>vyrovnávacej pamäti<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''createStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br><nowiki>[</nowiki>requiredCookie<nowiki>]</nowiki><br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResourceStore<br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ResourceStore alebo vytvorí novú, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''openStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResourceStore<br><br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ResourceStore alebo vráti null, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' removeStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Opis:<br />
|Odstráni ResourceStore a&nbsp;odstráni a&nbsp;celý jeho obsah<br>vyrovnávacej pamäti<br><br />
<br />
|}<br />
<br />
=====Database API=====<br />
Database API je aplikačné rozhranie pre prácu s&nbsp;lokálnou databázou SQLite[4]. SQLite je&nbsp;knižnica, ktorá implementuje relačnú databázu bez potreby servera.<br />
<br />
Kód 2.4 Príklad práce s&nbsp;lokálnou databázou<br />
<source lang="javascript"><br />
<script type="text/javascript" src="gears_init.js"></script><br />
<script type="text/javascript"><br />
var db = google.gears.factory.create('beta.database');<br />
db.open('moja-databaza);<br />
db.execute('create table if not exists Zoznam' +<br />
' (Meno text, Vek int)');<br />
db.execute('insert into Zoznam values (?, ?)', ['Peter', '22']);<br />
var rs = db.execute('select * from Zoznam order by Vek desc');<br />
<br />
rs.close();<br />
</script><br />
</source><br />
<br />
Tabuľka 2.3 Opis metód triedy'' Database''''.'' <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">Database</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|'''Metóda: '''<br />
|bgcolor = "#EAEAEA"|void''' open(<nowiki>[</nowiki>name<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – voliteľný<br><br />
<br />
|-<br />
|Opis:<br />
|Otvorí databázu<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''execute(sqlStatement, <nowiki>[</nowiki>argArray<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|sqlStatement – reťazec obsahujúci SQL príkaz, so znakom <nowiki>’</nowiki>'''?''' <nowiki>’</nowiki>''' '''ako''' '''zástupný symbol previazaný s parametrami<br>argArray – voliteľné pole parametrov, ktoré nahradia symboly <nowiki>’</nowiki>'''?''' <nowiki>’</nowiki><br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResultSet<br />
<br />
|-<br />
|Opis:<br />
|Vykoná SQL príkazy. <br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''close()'''<br />
<br />
|-<br />
|Opis:<br />
|Ukončí spojenie s&nbsp;databázou. Volanie database.close() nie je potrebné<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' remove()'''<br />
<br />
|-<br />
|Opis:<br />
|Zmaže práve otvorenú databázu.<br><br />
<br />
|}<br />
<br />
Metóda ''database.execute ''po úspešnom volaní vráti objekt triedy ''ResultSet.'' Obsahuje výsledky vykonaných SQL príkazov.<br />
<br />
Tabuľka 2.4 Opis metód triedy'' ResultSe''''t''<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">ResultSet</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|boolean '''isValidRow()'''<br />
<br />
|-<br />
|Opis:<br />
|Vráti true, ak môžete volať metódy na extrakciu dát<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''next()'''<br />
<br />
|-<br />
|Opis:<br />
|Pokračuje na ďalší riadok výsledkov <br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''close()'''<br />
<br />
|-<br />
|Opis:<br />
|Je potrebné zavolať metodu close(), ak sme skončili s&nbsp;prácou s výsledkami<br><br />
<br />
|}<br />
<br />
Tabuľka 2.5 Opis metód na extrakciu dát<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4" <font color="#000000">colspan = "2"|'''Metódy na extrakciu dát'''</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Int '''fieldCount()'''<br />
<br />
|-<br />
|Opis:<br />
|Vráti počet polí výsledku<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|string '''fieldName(int fieldIndex)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldIndex – index požadovaného pola<br />
<br />
|-<br />
|Opis:<br />
|Vráti meno špecifikovaného pola.<br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''field(int fieldIndex)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldIndex – index požadovaného pola<br />
<br />
|-<br />
|Návratová hodnota:<br />
|rôzne<br />
<br />
|-<br />
|Opis:<br />
|Vráti obsah špecifikovaného pola v aktuálnom riadku<br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''fieldByName(string fieldName)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldName – názov požadovaného pola<br />
<br />
|-<br />
|Návratová hodnota:<br />
|rôzne<br />
<br />
|-<br />
|Opis:<br />
|Vráti obsah špecifikovaného pola v aktuálnom riadku<br />
<br />
|}<br />
<br />
<br />
=====WorkerPool API=====<br />
Aplikačné rozhranie, ktoré umožňuje spracovávať javaskriptový kód na pozadí. Vďaka tomu neblokuje vykonávanie ďalších skriptov. Kompletná špecifikácia v [6].<br />
<br />
=====Blob API=====<br />
Pomocou objektov typu ''Blob ''môžeme odkazovať na binárne dáta vo webových aplikáciách. Kompletná špecifikácia v [7].<br />
<br />
=====BlobBuilder API=====<br />
''BlobBuilder'' je pomocný objekt pre vytváranie objektov typu ''Blob. Blob ''je nemenný, read-only object, rovnaký ako reťazec v&nbsp;Javascripte. ''BlobBuilder'' je používaný na&nbsp;generovanie ''Blobu'' s&nbsp;novým obsahom. Kompletná špecifikácia v [8].<br />
<br />
=====Canvas API=====<br />
Prostredníctvom tejto API môžeme pracovať s&nbsp;obrázkami pomocou javaskriptu. Táto grafická API je inšpirovaná HTML5 canvasom. Obsahuje metódy na rozkódovanie a zakódovanie do&nbsp;binárnych formátov (napr. PNG, JPEG). Kompletná špecifikácia v [9].<br />
<br />
=====Desktop API=====<br />
Desktop API poskytuje rozhranie pre prístup k desktopovým funkciám, ako je vytváranie ikon. V&nbsp;kóde 2.5 je zobrazená funkcia ''createShortcut'', ktorá vytvorí ikony na ploche a paneli nástrojov.<br />
<br />
Kód 2.5 Ukážka práce s&nbsp;Desktop API <br />
<source lang="javascript"><br />
var desktop = google.gears.factory.create('beta.desktop');<br />
function createShortcut() {<br />
var desktop = google.gears.factory.create("beta.desktop");<br />
var description = "Vytvorenie ikonky ROZVRHU.";<br />
var icons = {<br />
"16x16": "16icon.png"<br />
"32x32": "32icon.png",<br />
"48x48": "48icon.png",<br />
"128x128": "128icon.png"<br />
};<br />
desktop.createShortcut("Rozvrh Fakulty Mechatroniky", <br />
" http://priklad.sk/index.html", <br />
icons, <br />
description); <br />
}<br />
</source><br />
<br />
V&nbsp;tabuľke 2.6 je výpis metód triedy ''Desktop.'' Kompletná špecifikácia v [10].<br />
<br />
Tabuľka 2.6 Opis metód triedy ''Desktop''<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">Desktop</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|'''Metóda: '''<br />
|bgcolor = "#EAEAEA"|createShortcut(name, url, icons, <nowiki>[</nowiki>description<nowiki>]</nowiki>)<br />
<br />
|-<br />
|Parametre:<br />
|name - meno odkazu<br>url - adresa dokumentu, ktorý sa má otvoriť<br>icons – Objekt obsahujúci jednu alebo viac hodnôt v tvare:<br>rozmer : URL ikony<br>Napr.'' <nowiki>’</nowiki>128x128<nowiki>’</nowiki>: <nowiki>’</nowiki>http://priklad. sk/icon128x128.png<nowiki>’</nowiki>''<br>descriptions – nepovinný parameter. Text sa zobrazí v potvrdzovacom dialógu.<br><br> <br><br />
<br />
|-<br />
|Opis:<br />
|Vytvorí desktopový odkaz na spustenie aplikácie<br><br />
<br />
|}<br clear="all"><br />
<br />
=====Geolocation API=====<br />
Geolocation API umožňuje webovej aplikácii získať používateľa geografickú polohu. Kompletnú špecifikáciu nájdete v [11].<br />
<br />
=====HttpRequest API=====<br />
HttpRequest API implementuje podskupinu XmlHttpRequest W3C špecifikácie. Gears poskytuje vlastný HttpRequest objekt. Obsahuje väčšinu vlastností. Kompletnú špecifikáciu nájdete v [12].<br />
<br />
=====Timer API=====<br />
Obsahuje metódy, ktoré umožnia nastaviť vykonanie skriptov s&nbsp;časovým oneskorením a&nbsp;podobne. Kompletnú špecifikáciu nájdete v [13].<br />
<br />
====Podpora Google Gears v&nbsp;operačných systémoch a prehliadačoch====<br />
Funkčnosť Google Gears je overená na nasledujúcich platformách a&nbsp;prehliadačoch [14]:<br />
<br />
* Apple Mac OS X (10.4 alebo vyššia, G4, G5 or Intel Processor)<br />
* Firefox 1.5 alebo vyššia<br />
* Safari 3.1.1 alebo vyššia (OS X Tiger 10.4.11<nowiki>+</nowiki> alebo Leopard 10.5.3<nowiki>+</nowiki>, G4, G5 alebo Intel Processor)<br />
* Linux<br />
* Firefox 1.5 alebo vyššia<br />
* Microsoft Windows (XP alebo vyššia)<br />
* Firefox 1.5 alebo vyššia<br />
* Internet Explorer 6 alebo vyššia<br />
* Google Chrome<br />
* Microsoft Windows Mobile (5 alebo vyššia)<br />
* Internet Explorer 4.01 alebo vyššia<br />
* Opera Mobile 9.51 (Presto build 2.1.0<nowiki>+</nowiki>) (Windows Mobile 6 len pre dotykové zariadenia)<br />
* &nbsp;Nasledovné zariadenia nie sú podporované<br />
* Samsung i320 a i320N<br />
* Orange SPV C600<br />
* Motorola Q<br />
* Android 1.0<br />
====Umiestnenie dát na disku====<br />
Umiestnenie dát webovej aplikácie na disku záleží na platforme a&nbsp;internetovom prehliadači.<br />
<br />
'''Windows Vista - Internet Explorer'''<br />
<br />
Umiestnenie: <nowiki>{</nowiki>FOLDERID_LocalAppDataLow<nowiki>}</nowiki>\Google\Google Gears for Internet Explorer<br>Príklad: C:\Users\Bob\AppData\LocalLow\Google\Google Gears for Internet Explorer<br />
<br />
'''Windows Vista - Firefox'''<br />
<br />
Umiestnenie: C:\Users\<nowiki><</nowiki>username<nowiki>></nowiki>\AppData\Local\Mozilla\Firefox\Profiles\<nowiki>{</nowiki>profile<nowiki>}</nowiki>.default\Google Gears for Firefox <br>Príklad: C:\Users\Bob\AppData\Local\Mozilla\Firefox\Profiles\uelib44s.default\Google Gears for Firefox<br />
<br />
'''Windows Vista - Chrome'''<br />
<br />
Umiestnenie: C:\Users\<nowiki><</nowiki>username<nowiki>></nowiki>\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears<br>Príklad: C:\Users\Bob\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears<br />
<br />
'''Mac OS X - Safari'''<br />
<br />
Umiestnenie: <nowiki>~</nowiki>/Library/Application Support/Google/Google Gears for Safari<br>Príklad: /Users/Bob/Library/Application Support/Google/Google Gears for Safari<br />
<br />
'''Linux - Firefox'''<br />
<br />
Umiestnenie: <nowiki>~</nowiki>''bob''/.mozilla/firefox/<nowiki><</nowiki>firefox<nowiki>’</nowiki>s profile id<nowiki>></nowiki>/Google Gears for Firefox <br>Príklad: <nowiki>~</nowiki>bob/.mozilla/firefox/08ywpi3q.default/Google Gears for Firefox<br />
<br />
====Využitie Google Gears====<br />
Ako prvá začala Google Gears využívať firma Google vo svojej čítačke kanálov Google Reader. V&nbsp;režime off-line umožňuje prehliadať až 2000 príspevkov. Postupne sa podpora pre&nbsp;toto rozšírenie pridala aj do mailovej služby Gmail a on-line kancelárskeho balíka Google Docs.<br />
<br />
Ďalšie webové služby využívajúce Google Gears:<br />
<br />
* správca úloh '''rememberthemilk.com,'''<br />
* sociálna služba '''myspace.com,'''<br />
* on-line správca hesiel '''passpack.com,'''<br />
* nástroj pre riadenie projektov''' mindmeister.com,'''<br />
* open-source redakčný systém '''wordpress.net''' a ďalší.<br />
===HTML5===<br />
<br />
HTML5 [15] je najnovšia špecifikácia značkovacieho jazyka HTML vyvíjaná medzinárodným združením W3C (World Wide Web Consortium). Najdôležitejšou zmenou v&nbsp;novej verzií je samotná&nbsp;štruktúra&nbsp;HTML dokumentu, veľké množstvo nových elementov a&nbsp;aj podpora off-line web aplikácií. Pretože Google sa snaží dodržiavať štandardy, zastavil vývoj Google Gears a&nbsp;svoju iniciatívu smeruje na HTML5. Je možné, že podpora off-line aplikácií bude mať v novej špecifikácií aj niektoré rysy, ktoré poznáme z Google Gears. V&nbsp;súčasnosti je stále HTML 5 vo&nbsp;fáze vývoja. Dokončenie je plánované na rok 2012. Niekoľko rokov však potrvá jeho úplná podpora vo väčšine prehliadačoch. Prehliadače ako napríklad Firefox podporujú už väčšiu časť nových prvkov HTML5. V&nbsp;našom prehľade sú&nbsp;zaujímavé SQL API a&nbsp;Cache API, ktoré majú poskytovať rovnakú funkcionalitu ako Google Gears.<br />
<br />
====Elementy štruktúry====<br />
Doposiaľ bola štruktúra HTML dokumentu tvorená z&nbsp;''div ''elementov. HTML5 pridáva nové elementy k&nbsp;identifikácií každého z&nbsp;nich. Tieto majú presne stanovený sémantický význam a&nbsp;lepšie sa v nich orientuje aj samotný programátor.<br />
<br />
Tabuľka 2.7 Zoznam nových sémantických elementov štruktúry HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|section<br />
|Všeobecná (často nadradená) časť, ktorá môže združovať ostatné časti stránky. Element DIV, ktorý dostal sémantické meno.<br />
<br />
|-<br />
|header<br />
|Hlavička časti, v ktorej je začlenená.<br />
<br />
|-<br />
|footer<br />
|Pätička časti, v ktorej je začlenená.<br />
<br />
|-<br />
|nav<br />
|Časť stránky, ktorá obsahuje odkazy na ostatné stránky alebo časti danej stránky.<br />
<br />
|-<br />
|article<br />
|Časť stránky, ktorá obsahuje text nezávislý od ostatných dielov stránky.<br />
<br />
|}<br />
<br />
====Elementy multimédií====<br />
Zaujímavých zmien sa dočkala aj podpora multimédií (zvuk, video). Tieto sa na webe neskutočne rýchlo rozšírili (hlavne jednoduchým šírením pomocou stránok youtube.com a&nbsp;podobne). Preto sú v&nbsp;novej verzií HTML5 prístupné tagy&nbsp;''<nowiki><</nowiki>video<nowiki>></nowiki>''&nbsp;a ''<nowiki><</nowiki>audio<nowiki>></nowiki>.''<br />
<br />
Element ''<nowiki><</nowiki>canvas<nowiki>></nowiki>'' reprezentuje 2D kresliacu plochu ovládanú javaskriptom, ktorú môžete využívať, napr. na kreslenie grafov, grafických prvkov v hrách a prezentáciách.<br />
<br />
====Inline elementy====<br />
HTML5 zavádza nové elementy, ktoré majú pomôcť uviesť základné prvky, ako je čas alebo čísla.<br />
<br />
Tabuľka 2.8 Zoznam nových inline elementov HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|mark<br />
|Označenie textu.&nbsp;Slúži napríklad na označenie hľadaného slová v zozname výsledkov<br />
<br />
|-<br />
|time<br />
|Označuje čas alebo dátum v bloku textu.<br />
<br />
|-<br />
|meter<br />
|Predstavuje skalárne meradlá.<br />
<br />
|-<br />
|progress<br />
|Reprezentuje pokrok v&nbsp;dokončení úlohy. Môže byť použitý pre vizuálne zobrazenie.<br />
<br />
|}<br />
<br />
====Podpora režimu off-line====<br />
S novou špecifikáciou jazyka HTML 5 prichádza aj podpora off-line aplikácií. K&nbsp;dispozícií máme SQL API a&nbsp;Cache API, ktorá je obdobou LocalServer API.<br />
<br />
=====SQL API=====<br />
SQL databáza na strane klienta umožní štruktúrované dátové úložisko. API pracuje s&nbsp;touto databázou asynchrónne. To znamená, že používateľské prostredie nebude blokované vykonávaním synchrónneho požiadavku.<br />
<br />
Tabuľka 2.9 Zoznam metód návrhu HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Object openDatabase(dbname, dbversion, displayname, size)<br />
<br />
|-<br />
|Opis:<br />
|Vytvára databázový objekt podľa zvolených parametrov<br><br />
<br />
|-<br />
|Parametre:<br />
|dbname – meno databázy<br>dbversion – verzia databázy<br>displayname – zobrazený názov databázy<br>size – predpokladaná veľkosť databázy v bajtoch<br />
<br />
|-<br />
|Ďalšie Metódy: <br />
|transaction(), executeSql()<br />
<br />
|}<br />
<br />
=====LocalStorage API=====<br />
Dáta na lokálnom disku bude reprezentovať objekt ''localStorage.''<br />
<br />
Tabuľka 2.10 Zoznam niektorých metód pre prácu s&nbsp;lokálnym úložiskom<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Opis<br />
<br />
|-<br />
|clear()<br />
|zmaže celý obsah objektu<br />
<br />
|-<br />
|getItem()<br />
|získa obsah objektu podľa názvu<br />
<br />
|-<br />
|key()<br />
|získa kľúč podľa čísla<br />
<br />
|-<br />
|length<br />
|Počet uložených kľúčov<br />
<br />
|-<br />
|removeItem()<br />
|odstráni položku podľa jej mena<br />
<br />
|-<br />
|setItem()<br />
|Pridá hodnotu položke<br />
<br />
|}</div>Dusanhttp://www.kiwiki.info/index.php?title=Technol%C3%B3gie_off-line_web_aplik%C3%A1ci%C3%AD&diff=6878Technológie off-line web aplikácií2010-09-05T12:33:09Z<p>Dusan: </p>
<hr />
<div>[[Kategória:Študentské práce]]<br />
[[Kategória:Bakalárske práce]]<br />
[[Kategória:Informatika]]<br />
[[Kategória:php]]<br />
[[Kategória:web]]<br />
{{Hlavička_FM|{{PAGENAME}}|Dušan Pagáč|Ing. Juraj Ďuďák|<br />
2009/2010<br />
|Semetrálna práca|Mechatronika}} <br />
{{Praca_uvod|2|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}<br />
__TOC__<br />
<br />
==Technológie off-line web aplikácií==<br />
V&nbsp;súčasnosti je dostupných niekoľko technológií, ktoré podporujú off-line aplikácie:<br />
<br />
* Google Gears<br />
* HTML5<br />
Nová špecifikácia HTML5 je zatiaľ vo vývoji a&nbsp;má byť dokončená v&nbsp;roku 2012. Niektoré jej možnosti sú už dnes podporované vo väčšine prehliadačoch.<br />
<br />
===Google Gears===<br />
Google Gears [1] je open-source projekt of firmy Google. Pridaním nových funkcií do&nbsp;prehliadača dokáže sprístupniť webovú aplikáciu aj v&nbsp;režime off-line. Používateľovi stačí nainštalovať rozšírenie (Obr. 2.1) do svojho prehliadača a&nbsp;následne povoliť (Obr. 2.2) prístup konkrétnej webovej lokalite pre použitie&nbsp;tohto rozšírenia.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_07.png|framed|none]]<br />
<br />
Obr 2.1 Zobrazenie rozšírenia Google Gears v&nbsp;správe rozšírení prehliadača Firefox<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_08.png|framed|none]]<br />
<br />
Obr 2.2 Povolenia rozšírenia pre webovú lokalitu (localhost)<br />
<br />
====Moduly Google Gears====<br />
S rozšírením Google Gears získame tri nezávislé moduly: lokálny server, databáza, spracovanie kódu na pozadí. Každý z&nbsp;nich vylepšuje nejaký aspekt programovania webovej aplikácie na strane klienta prostredníctvom konkrétneho modulu.<br />
<br />
'''Lokálny server'''<br />
<br />
Modul lokálny server (''LocalServer'') umožňuje aplikácii uložiť a&nbsp;používať jeho HTTP zdroje lokálne bez pripojenia k&nbsp;sieti. Je to špecializovaná vyrovnávacia pamäť. Požiadavky na URL vo vyrovnávacej pamäti lokálneho servera sú zachytené a&nbsp;obslúžené lokálne priamo z&nbsp;disku používateľa.<br />
<br />
'''Databáza'''<br />
<br />
Databázový modul (''Database'') poskytuje open-source databázový systém SQLite. Databázové API slúži k&nbsp;neustálemu ukladaniu používateľských dát. Pre dáta uložené v&nbsp;lokálnej databáze je definovaná bezpečnostná politika, ktorá web aplikácii nedovolí prístup mimo jej domény.<br />
<br />
'''Spracovanie kódu na pozadí'''<br />
<br />
Skript časovo náročný na spracovanie, ako napríklad zložitý výpočet, môže spôsobiť, že&nbsp;používateľské prostredie nereaguje. Technika spracovania kódu na pozadí (''WorkerPool API'') dovoľuje web aplikácii spustiť javaskriptový kód na pozadí bez blokovania vykonávania ostatných skriptov na stránke.<br />
<br />
====Google Gears API====<br />
S&nbsp;modulmi Google Gears API pracujeme pomocou metód aplikačného rozhrania. Pre prístup k&nbsp;nim musíme do aplikácie zahrnúť súbor ''gears_init.js'', ktorý sa nachádza na adrese ''http://code.google.com/intl/sk/apis/gears/gears_init.js''. V&nbsp;nasledujúcom texte budú opísané všetky moduly Google Gears API.<br />
<br />
=====Factory API=====<br />
Trieda ''Factory'' je použitá na vytvorenie inštancií všetkých Gears objektov. Vytvorenie tejto inštancie (Kód 2.1) je povinné.<br />
<br />
Kód 2.1 Volanie metódy ''create'''' ''triedy'' factory''<br />
<source lang="javascript"><br />
<script type="text/javascript" src="gears_init.js"></script><br />
<script type="text/javascript"><br />
if (window.google && google.gears) {<br />
var db = google.gears.factory.create('beta.database');<br />
}<br />
</script><br />
</source><br />
<br />
Na to aby sme vytvorili inštanciu triedy ''Factory, ''je potrebné mať nainštalované samotné rozšírenie Google Gears. Existenciu tohto rozšírenia overíme pomocou kontroly globálnych objektov ''window.google'' a ''google.gears''. V&nbsp;skripte ''gears_init.js'' je definovaný objekt ''google.gears.factory''. Metóda ''create'' triedy ''factory'' vytvorí objekt danej triedy s parametrom ''className''. Parameter ''className ''je typ objektu, ktorý sa má vytvoriť. Kompletná špecifikácia je triedy ''Factory'' je v [2].<br />
<br />
Tabuľka 2.1 Opis metód triedy'' Factory''''.'' <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">factory</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Object''' create(className, <nowiki>[</nowiki>classVersion<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Opis:<br />
|Vytvára Gears objekt danej triedy<br><br />
<br />
|-<br />
|Parametre:<br />
|className – typ objektu, ktorý sa má vytvoriť<br>classVersion – parameter sa už nepoužíva, prípadne jeho hodnota <nowiki>’</nowiki>1.0<nowiki>’</nowiki><br />
<br />
|-<br />
|Detaily:<br />
|Podporované hodnoty parametru className:<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|className<br />
|bgcolor = "#EAEAEA"|Vytvorenie Gears triedy<br />
<br />
|-<br />
|beta.blobbuilder<br />
|BlobBuilder<br />
<br />
|-<br />
|beta.canvas<br />
|Canvas<br />
<br />
|-<br />
|beta.database<br />
|Database<br />
<br />
|-<br />
|beta.desktop<br />
|Desktop<br />
<br />
|-<br />
|beta.geolocation<br />
|Geolocation<br />
<br />
|-<br />
|beta.httprequest<br />
|HttpRequest<br />
<br />
|-<br />
|beta.localserver<br />
|LocalServer<br />
<br />
|-<br />
|beta.timer<br />
|Timer<br />
<br />
|-<br />
|beta.workerpool<br />
|WorkerPool<br />
<br />
|}<br />
<br />
|}<br />
<br />
=====LocalServer API=====<br />
Na správu vyrovnávacej pamäti sú dostupné dve triedy:<br />
<br />
'''''ResourceStore'' '''– povoľuje zachytávať dáta (obrázky, PDF súbor), ktoré sú adresované s URL.<br />
<br />
'''''ManagedResourceStore''''' – zoznam URL odkazov na súbory, ktoré budú dostupné off-line, sú&nbsp;v&nbsp;súbore ''manifest.'' Pomocou tejto triedy môžeme zabezpečiť aplikácii všetky dáta, ktoré bude potrebovať. Výhoda takéhoto riešenia je v automatickej aktualizácií pri zmene súboru ''manifest''. Príklad použitia je v&nbsp;kóde 2.2.<br />
<br />
Kód 2.2 Príklad použitia metódy ''createManagedStor''''e''<br />
<source lang="javascript"><br />
<script type="text/javascript" src="gears_init.js"></script><br />
<script type="text/javascript"><br />
var localServer = google.gears.factory.create('beta.localserver');<br />
var store = localServer.createManagedStore('test-store');<br />
store.manifestUrl = 'manifest.txt';<br />
</script><br />
</source><br />
<br />
Odkazy na súbory uvedené v&nbsp;súbore'' manifest'' (Kód 2.3) sa pri synchronizácií skopírujú na&nbsp;lokálny disk.<br />
<br />
Kód 2.3 Výpis súboru ''manifest.tx''''t''<br />
<source lang="javascript"><br />
{<br />
"betaManifestVersion": 1,<br />
"version": "1.0",<br />
"entries": [<br />
{ "url": "index.html" },<br />
{ "url": "gears_init.js" }<br />
]<br />
}<br />
</source><br />
<br />
Tabuľka 2.2 Metódy triedy ''LocalServer''. <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">LocalServer</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''createManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br><br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ManagedResourceStore <br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ManagedResourceStore alebo vytvorí novú, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''openManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ManagedResourceStore <br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ManagedResourceStore alebo vráti null, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' removeManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br><nowiki>[</nowiki>requiredCookie<nowiki>]</nowiki><br />
<br />
|-<br />
|Opis:<br />
|Odstráni ManagedResourceStore a&nbsp;odstráni všetky jej URL z&nbsp;lokálnej<br>vyrovnávacej pamäti<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''createStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br><nowiki>[</nowiki>requiredCookie<nowiki>]</nowiki><br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResourceStore<br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ResourceStore alebo vytvorí novú, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''openStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResourceStore<br><br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ResourceStore alebo vráti null, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' removeStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Opis:<br />
|Odstráni ResourceStore a&nbsp;odstráni a&nbsp;celý jeho obsah<br>vyrovnávacej pamäti<br><br />
<br />
|}<br />
<br />
=====Database API=====<br />
Database API je aplikačné rozhranie pre prácu s&nbsp;lokálnou databázou SQLite[4]. SQLite je&nbsp;knižnica, ktorá implementuje relačnú databázu bez potreby servera.<br />
<br />
Kód 2.4 Príklad práce s&nbsp;lokálnou databázou<br />
<source lang="javascript"><br />
<script type="text/javascript" src="gears_init.js"></script><br />
<script type="text/javascript"><br />
var db = google.gears.factory.create('beta.database');<br />
db.open('moja-databaza);<br />
db.execute('create table if not exists Zoznam' +<br />
' (Meno text, Vek int)');<br />
db.execute('insert into Zoznam values (?, ?)', ['Peter', '22']);<br />
var rs = db.execute('select * from Zoznam order by Vek desc');<br />
<br />
rs.close();<br />
</script><br />
</source><br />
<br />
Tabuľka 2.3 Opis metód triedy'' Database''''.'' <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">Database</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|'''Metóda: '''<br />
|bgcolor = "#EAEAEA"|void''' open(<nowiki>[</nowiki>name<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – voliteľný<br><br />
<br />
|-<br />
|Opis:<br />
|Otvorí databázu<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''execute(sqlStatement, <nowiki>[</nowiki>argArray<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|sqlStatement – reťazec obsahujúci SQL príkaz, so znakom <nowiki>’</nowiki>'''?''' <nowiki>’</nowiki>''' '''ako''' '''zástupný symbol previazaný s parametrami<br>argArray – voliteľné pole parametrov, ktoré nahradia symboly <nowiki>’</nowiki>'''?''' <nowiki>’</nowiki><br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResultSet<br />
<br />
|-<br />
|Opis:<br />
|Vykoná SQL príkazy. <br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''close()'''<br />
<br />
|-<br />
|Opis:<br />
|Ukončí spojenie s&nbsp;databázou. Volanie database.close() nie je potrebné<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' remove()'''<br />
<br />
|-<br />
|Opis:<br />
|Zmaže práve otvorenú databázu.<br><br />
<br />
|}<br />
<br />
Metóda ''database.execute ''po úspešnom volaní vráti objekt triedy ''ResultSet.'' Obsahuje výsledky vykonaných SQL príkazov.<br />
<br />
Tabuľka 2.4 Opis metód triedy'' ResultSe''''t''<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">ResultSet</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|boolean '''isValidRow()'''<br />
<br />
|-<br />
|Opis:<br />
|Vráti true, ak môžete volať metódy na extrakciu dát<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''next()'''<br />
<br />
|-<br />
|Opis:<br />
|Pokračuje na ďalší riadok výsledkov <br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''close()'''<br />
<br />
|-<br />
|Opis:<br />
|Je potrebné zavolať metodu close(), ak sme skončili s&nbsp;prácou s výsledkami<br><br />
<br />
|}<br />
<br />
Tabuľka 2.5 Opis metód na extrakciu dát<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4" <font color="#000000">colspan = "2"|'''Metódy na extrakciu dát'''</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Int '''fieldCount()'''<br />
<br />
|-<br />
|Opis:<br />
|Vráti počet polí výsledku<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|string '''fieldName(int fieldIndex)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldIndex – index požadovaného pola<br />
<br />
|-<br />
|Opis:<br />
|Vráti meno špecifikovaného pola.<br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''field(int fieldIndex)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldIndex – index požadovaného pola<br />
<br />
|-<br />
|Návratová hodnota:<br />
|rôzne<br />
<br />
|-<br />
|Opis:<br />
|Vráti obsah špecifikovaného pola v aktuálnom riadku<br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''fieldByName(string fieldName)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldName – názov požadovaného pola<br />
<br />
|-<br />
|Návratová hodnota:<br />
|rôzne<br />
<br />
|-<br />
|Opis:<br />
|Vráti obsah špecifikovaného pola v aktuálnom riadku<br />
<br />
|}<br />
<br />
<br />
=====WorkerPool API=====<br />
Aplikačné rozhranie, ktoré umožňuje spracovávať javaskriptový kód na pozadí. Vďaka tomu neblokuje vykonávanie ďalších skriptov. Kompletná špecifikácia v [6].<br />
<br />
=====Blob API=====<br />
Pomocou objektov typu ''Blob ''môžeme odkazovať na binárne dáta vo webových aplikáciách. Kompletná špecifikácia v [7].<br />
<br />
=====BlobBuilder API=====<br />
''BlobBuilder'' je pomocný objekt pre vytváranie objektov typu ''Blob. Blob ''je nemenný, read-only object, rovnaký ako reťazec v&nbsp;Javascripte. ''BlobBuilder'' je používaný na&nbsp;generovanie ''Blobu'' s&nbsp;novým obsahom. Kompletná špecifikácia v [8].<br />
<br />
=====Canvas API=====<br />
Prostredníctvom tejto API môžeme pracovať s&nbsp;obrázkami pomocou javaskriptu. Táto grafická API je inšpirovaná HTML5 canvasom. Obsahuje metódy na rozkódovanie a zakódovanie do&nbsp;binárnych formátov (napr. PNG, JPEG). Kompletná špecifikácia v [9].<br />
<br />
=====Desktop API=====<br />
Desktop API poskytuje rozhranie pre prístup k desktopovým funkciám, ako je vytváranie ikon. V&nbsp;kóde 2.5 je zobrazená funkcia ''createShortcut'', ktorá vytvorí ikony na ploche a paneli nástrojov.<br />
<br />
Kód 2.5 Ukážka práce s&nbsp;Desktop API <br />
<source lang="javascript"><br />
var desktop = google.gears.factory.create('beta.desktop');<br />
function createShortcut() {<br />
var desktop = google.gears.factory.create("beta.desktop");<br />
var description = "Vytvorenie ikonky ROZVRHU.";<br />
var icons = {<br />
"16x16": "16icon.png"<br />
"32x32": "32icon.png",<br />
"48x48": "48icon.png",<br />
"128x128": "128icon.png"<br />
};<br />
desktop.createShortcut("Rozvrh Fakulty Mechatroniky", <br />
" http://priklad.sk/index.html", <br />
icons, <br />
description); <br />
}<br />
</source><br />
<br />
V&nbsp;tabuľke 2.6 je výpis metód triedy ''Desktop.'' Kompletná špecifikácia v [10].<br />
<br />
Tabuľka 2.6 Opis metód triedy ''Desktop''<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">Desktop</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|'''Metóda: '''<br />
|bgcolor = "#EAEAEA"|createShortcut(name, url, icons, <nowiki>[</nowiki>description<nowiki>]</nowiki>)<br />
<br />
|-<br />
|Parametre:<br />
|name - meno odkazu<br>url - adresa dokumentu, ktorý sa má otvoriť<br>icons – Objekt obsahujúci jednu alebo viac hodnôt v tvare:<br>rozmer : URL ikony<br>Napr.'' <nowiki>’</nowiki>128x128<nowiki>’</nowiki>: <nowiki>’</nowiki>http://priklad. sk/icon128x128.png<nowiki>’</nowiki>''<br>descriptions – nepovinný parameter. Text sa zobrazí v potvrdzovacom dialógu.<br><br> <br><br />
<br />
|-<br />
|Opis:<br />
|Vytvorí desktopový odkaz na spustenie aplikácie<br><br />
<br />
|}<br clear="all"><br />
<br />
=====Geolocation API=====<br />
Geolocation API umožňuje webovej aplikácii získať používateľa geografickú polohu. Kompletnú špecifikáciu nájdete v [11].<br />
<br />
=====HttpRequest API=====<br />
HttpRequest API implementuje podskupinu XmlHttpRequest W3C špecifikácie. Gears poskytuje vlastný HttpRequest objekt. Obsahuje väčšinu vlastností. Kompletnú špecifikáciu nájdete v [12].<br />
<br />
=====Timer API=====<br />
Obsahuje metódy, ktoré umožnia nastaviť vykonanie skriptov s&nbsp;časovým oneskorením a&nbsp;podobne. Kompletnú špecifikáciu nájdete v [13].<br />
<br />
====Podpora Google Gears v&nbsp;operačných systémoch a prehliadačoch====<br />
Funkčnosť Google Gears je overená na nasledujúcich platformách a&nbsp;prehliadačoch [14]:<br />
<br />
* Apple Mac OS X (10.4 alebo vyššia, G4, G5 or Intel Processor)<br />
* Firefox 1.5 alebo vyššia<br />
* Safari 3.1.1 alebo vyššia (OS X Tiger 10.4.11<nowiki>+</nowiki> alebo Leopard 10.5.3<nowiki>+</nowiki>, G4, G5 alebo Intel Processor)<br />
* Linux<br />
* Firefox 1.5 alebo vyššia<br />
* Microsoft Windows (XP alebo vyššia)<br />
* Firefox 1.5 alebo vyššia<br />
* Internet Explorer 6 alebo vyššia<br />
* Google Chrome<br />
* Microsoft Windows Mobile (5 alebo vyššia)<br />
* Internet Explorer 4.01 alebo vyššia<br />
* Opera Mobile 9.51 (Presto build 2.1.0<nowiki>+</nowiki>) (Windows Mobile 6 len pre dotykové zariadenia)<br />
* &nbsp;Nasledovné zariadenia nie sú podporované<br />
* Samsung i320 a i320N<br />
* Orange SPV C600<br />
* Motorola Q<br />
* Android 1.0<br />
====Umiestnenie dát na disku====<br />
Umiestnenie dát webovej aplikácie na disku záleží na platforme a&nbsp;internetovom prehliadači.<br />
<br />
'''Windows Vista - Internet Explorer'''<br />
<br />
Umiestnenie: <nowiki>{</nowiki>FOLDERID_LocalAppDataLow<nowiki>}</nowiki>\Google\Google Gears for Internet Explorer<br>Príklad: C:\Users\Bob\AppData\LocalLow\Google\Google Gears for Internet Explorer<br />
<br />
'''Windows Vista - Firefox'''<br />
<br />
Umiestnenie: C:\Users\<nowiki><</nowiki>username<nowiki>></nowiki>\AppData\Local\Mozilla\Firefox\Profiles\<nowiki>{</nowiki>profile<nowiki>}</nowiki>.default\Google Gears for Firefox <br>Príklad: C:\Users\Bob\AppData\Local\Mozilla\Firefox\Profiles\uelib44s.default\Google Gears for Firefox<br />
<br />
'''Windows Vista - Chrome'''<br />
<br />
Umiestnenie: C:\Users\<nowiki><</nowiki>username<nowiki>></nowiki>\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears<br>Príklad: C:\Users\Bob\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears<br />
<br />
'''Mac OS X - Safari'''<br />
<br />
Umiestnenie: <nowiki>~</nowiki>/Library/Application Support/Google/Google Gears for Safari<br>Príklad: /Users/Bob/Library/Application Support/Google/Google Gears for Safari<br />
<br />
'''Linux - Firefox'''<br />
<br />
Umiestnenie: <nowiki>~</nowiki>''bob''/.mozilla/firefox/<nowiki><</nowiki>firefox<nowiki>’</nowiki>s profile id<nowiki>></nowiki>/Google Gears for Firefox <br>Príklad: <nowiki>~</nowiki>bob/.mozilla/firefox/08ywpi3q.default/Google Gears for Firefox<br />
<br />
====Využitie Google Gears====<br />
Ako prvá začala Google Gears využívať firma Google vo svojej čítačke kanálov Google Reader. V&nbsp;režime off-line umožňuje prehliadať až 2000 príspevkov. Postupne sa podpora pre&nbsp;toto rozšírenie pridala aj do mailovej služby Gmail a on-line kancelárskeho balíka Google Docs.<br />
<br />
Ďalšie webové služby využívajúce Google Gears:<br />
<br />
* správca úloh '''rememberthemilk.com,'''<br />
* sociálna služba '''myspace.com,'''<br />
* on-line správca hesiel '''passpack.com,'''<br />
* nástroj pre riadenie projektov''' mindmeister.com,'''<br />
* open-source redakčný systém '''wordpress.net''' a ďalší.<br />
===HTML5===<br />
<br />
HTML5 [15] je najnovšia špecifikácia značkovacieho jazyka HTML vyvíjaná medzinárodným združením W3C (World Wide Web Consortium). Najdôležitejšou zmenou v&nbsp;novej verzií je samotná&nbsp;štruktúra&nbsp;HTML dokumentu, veľké množstvo nových elementov a&nbsp;aj podpora off-line web aplikácií. Pretože Google sa snaží dodržiavať štandardy, zastavil vývoj Google Gears a&nbsp;svoju iniciatívu smeruje na HTML5. Je možné, že podpora off-line aplikácií bude mať v novej špecifikácií aj niektoré rysy, ktoré poznáme z Google Gears. V&nbsp;súčasnosti je stále HTML 5 vo&nbsp;fáze vývoja. Dokončenie je plánované na rok 2012. Niekoľko rokov však potrvá jeho úplná podpora vo väčšine prehliadačoch. Prehliadače ako napríklad Firefox podporujú už väčšiu časť nových prvkov HTML5. V&nbsp;našom prehľade sú&nbsp;zaujímavé SQL API a&nbsp;Cache API, ktoré majú poskytovať rovnakú funkcionalitu ako Google Gears.<br />
<br />
====Elementy štruktúry====<br />
Doposiaľ bola štruktúra HTML dokumentu tvorená z&nbsp;''div ''elementov. HTML5 pridáva nové elementy k&nbsp;identifikácií každého z&nbsp;nich. Tieto majú presne stanovený sémantický význam a&nbsp;lepšie sa v nich orientuje aj samotný programátor.<br />
<br />
Tabuľka 2.7 Zoznam nových sémantických elementov štruktúry HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|section<br />
|Všeobecná (často nadradená) časť, ktorá môže združovať ostatné časti stránky. Element DIV, ktorý dostal sémantické meno.<br />
<br />
|-<br />
|header<br />
|Hlavička časti, v ktorej je začlenená.<br />
<br />
|-<br />
|footer<br />
|Pätička časti, v ktorej je začlenená.<br />
<br />
|-<br />
|nav<br />
|Časť stránky, ktorá obsahuje odkazy na ostatné stránky alebo časti danej stránky.<br />
<br />
|-<br />
|article<br />
|Časť stránky, ktorá obsahuje text nezávislý od ostatných dielov stránky.<br />
<br />
|}<br />
<br />
====Elementy multimédií====<br />
Zaujímavých zmien sa dočkala aj podpora multimédií (zvuk, video). Tieto sa na webe neskutočne rýchlo rozšírili (hlavne jednoduchým šírením pomocou stránok youtube.com a&nbsp;podobne). Preto sú v&nbsp;novej verzií HTML5 prístupné tagy&nbsp;''<nowiki><</nowiki>video<nowiki>></nowiki>''&nbsp;a ''<nowiki><</nowiki>audio<nowiki>></nowiki>.''<br />
<br />
Element ''<nowiki><</nowiki>canvas<nowiki>></nowiki>'' reprezentuje 2D kresliacu plochu ovládanú javaskriptom, ktorú môžete využívať, napr. na kreslenie grafov, grafických prvkov v hrách a prezentáciách.<br />
<br />
====Inline elementy====<br />
HTML5 zavádza nové elementy, ktoré majú pomôcť uviesť základné prvky, ako je čas alebo čísla.<br />
<br />
Tabuľka 2.8 Zoznam nových inline elementov HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|mark<br />
|Označenie textu.&nbsp;Slúži napríklad na označenie hľadaného slová v zozname výsledkov<br />
<br />
|-<br />
|time<br />
|Označuje čas alebo dátum v bloku textu.<br />
<br />
|-<br />
|meter<br />
|Predstavuje skalárne meradlá.<br />
<br />
|-<br />
|progress<br />
|Reprezentuje pokrok v&nbsp;dokončení úlohy. Môže byť použitý pre vizuálne zobrazenie.<br />
<br />
|}<br />
<br />
====Podpora režimu off-line====<br />
S novou špecifikáciou jazyka HTML 5 prichádza aj podpora off-line aplikácií. K&nbsp;dispozícií máme SQL API a&nbsp;Cache API, ktorá je obdobou LocalServer API.<br />
<br />
=====SQL API=====<br />
SQL databáza na strane klienta umožní štruktúrované dátové úložisko. API pracuje s&nbsp;touto databázou asynchrónne. To znamená, že používateľské prostredie nebude blokované vykonávaním synchrónneho požiadavku.<br />
<br />
Tabuľka 2.9 Zoznam metód návrhu HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Object openDatabase(dbname, dbversion, displayname, size)<br />
<br />
|-<br />
|Opis:<br />
|Vytvára databázový objekt podľa zvolených parametrov<br><br />
<br />
|-<br />
|Parametre:<br />
|dbname – meno databázy<br>dbversion – verzia databázy<br>displayname – zobrazený názov databázy<br>size – predpokladaná veľkosť databázy v bajtoch<br />
<br />
|-<br />
|Ďalšie Metódy: <br />
|transaction(), executeSql()<br />
<br />
|}<br />
<br />
=====LocalStorage API=====<br />
Dáta na lokálnom disku bude reprezentovať objekt ''localStorage.''<br />
<br />
Tabuľka 2.10 Zoznam niektorých metód pre prácu s&nbsp;lokálnym úložiskom<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Opis<br />
<br />
|-<br />
|clear()<br />
|zmaže celý obsah objektu<br />
<br />
|-<br />
|getItem()<br />
|získa obsah objektu podľa názvu<br />
<br />
|-<br />
|key()<br />
|získa kľúč podľa čísla<br />
<br />
|-<br />
|length<br />
|Počet uložených kľúčov<br />
<br />
|-<br />
|removeItem()<br />
|odstráni položku podľa jej mena<br />
<br />
|-<br />
|setItem()<br />
|Pridá hodnotu položke<br />
<br />
|}</div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Bakalarka_du%C5%A1an_pag%C3%A1%C4%8D_2_2_FINAL_08.png&diff=6877Súbor:Bakalarka dušan pagáč 2 2 FINAL 08.png2010-09-05T12:08:23Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Bakalarka_du%C5%A1an_pag%C3%A1%C4%8D_2_2_FINAL_07.png&diff=6876Súbor:Bakalarka dušan pagáč 2 2 FINAL 07.png2010-09-05T12:08:10Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=Technol%C3%B3gie_off-line_web_aplik%C3%A1ci%C3%AD&diff=6875Technológie off-line web aplikácií2010-09-05T11:55:47Z<p>Dusan: /* */</p>
<hr />
<div>[[Kategória:Študentské práce]]<br />
[[Kategória:Bakalárske práce]]<br />
[[Kategória:Informatika]]<br />
[[Kategória:php]]<br />
[[Kategória:web]]<br />
{{Hlavička_FM|{{PAGENAME}}|Dušan Pagáč|Ing. Juraj Ďuďák|<br />
2009/2010<br />
|Semetrálna práca|Mechatronika}} <br />
{{Praca_uvod|2|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}<br />
__TOC__<br />
<br />
==Technológie off-line web aplikácií==<br />
V&nbsp;súčasnosti je dostupných niekoľko technológií, ktoré podporujú off-line aplikácie:<br />
<br />
* Google Gears<br />
* HTML5<br />
Nová špecifikácia HTML5 je zatiaľ vo vývoji a&nbsp;má byť dokončená v&nbsp;roku 2012. Niektoré jej možnosti sú už dnes podporované vo väčšine prehliadačoch.<br />
<br />
===Google Gears===<br />
Google Gears [1] je open-source projekt of firmy Google. Pridaním nových funkcií do&nbsp;prehliadača dokáže sprístupniť webovú aplikáciu aj v&nbsp;režime off-line. Používateľovi stačí nainštalovať rozšírenie (Obr. 2.1) do svojho prehliadača a&nbsp;následne povoliť (Obr. 2.2) prístup konkrétnej webovej lokalite pre použitie&nbsp;tohto rozšírenia.<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_07.png|framed|none]]<br />
<br />
Obr 2.1 Zobrazenie rozšírenia Google Gears v&nbsp;správe rozšírení prehliadača Firefox<br />
<br />
[[Image:bakalarka_dušan_pagáč_2_2_FINAL_08.png|framed|none]]<br />
<br />
Obr 2.2 Povolenia rozšírenia pre webovú lokalitu (localhost)<br />
<br />
====Moduly Google Gears====<br />
S rozšírením Google Gears získame tri nezávislé moduly: lokálny server, databáza, spracovanie kódu na pozadí. Každý z&nbsp;nich vylepšuje nejaký aspekt programovania webovej aplikácie na strane klienta prostredníctvom konkrétneho modulu.<br />
<br />
'''Lokálny server'''<br />
<br />
Modul lokálny server (''LocalServer'') umožňuje aplikácii uložiť a&nbsp;používať jeho HTTP zdroje lokálne bez pripojenia k&nbsp;sieti. Je to špecializovaná vyrovnávacia pamäť. Požiadavky na URL vo vyrovnávacej pamäti lokálneho servera sú zachytené a&nbsp;obslúžené lokálne priamo z&nbsp;disku používateľa.<br />
<br />
'''Databáza'''<br />
<br />
Databázový modul (''Database'') poskytuje open-source databázový systém SQLite. Databázové API slúži k&nbsp;neustálemu ukladaniu používateľských dát. Pre dáta uložené v&nbsp;lokálnej databáze je definovaná bezpečnostná politika, ktorá web aplikácii nedovolí prístup mimo jej domény.<br />
<br />
'''Spracovanie kódu na pozadí'''<br />
<br />
Skript časovo náročný na spracovanie, ako napríklad zložitý výpočet, môže spôsobiť, že&nbsp;používateľské prostredie nereaguje. Technika spracovania kódu na pozadí (''WorkerPool API'') dovoľuje web aplikácii spustiť javaskriptový kód na pozadí bez blokovania vykonávania ostatných skriptov na stránke.<br />
<br />
====Google Gears API====<br />
S&nbsp;modulmi Google Gears API pracujeme pomocou metód aplikačného rozhrania. Pre prístup k&nbsp;nim musíme do aplikácie zahrnúť súbor ''gears_init.js'', ktorý sa nachádza na adrese ''http://code.google.com/intl/sk/apis/gears/gears_init.js''. V&nbsp;nasledujúcom texte budú opísané všetky moduly Google Gears API.<br />
<br />
=====Factory API=====<br />
Trieda ''Factory'' je použitá na vytvorenie inštancií všetkých Gears objektov. Vytvorenie tejto inštancie (Kód 2.1) je povinné.<br />
<br />
Kód 2.1 Volanie metódy ''create'''' ''triedy'' factory''<br />
<br />
{|border="2" cellspacing="0" cellpadding="4" width="100%"<br />
|<nowiki><</nowiki>script type="text/javascript" src="gears_init.js"<nowiki>><</nowiki>/script<nowiki>></nowiki><br><nowiki><</nowiki>script type="text/javascript"<nowiki>></nowiki><br> if (window.google && google.gears) <nowiki>{</nowiki><br> var db = google.gears.factory.create(<nowiki>’</nowiki>beta.database<nowiki>’</nowiki>);<br> <nowiki>}</nowiki><br><nowiki><</nowiki>/script<nowiki>></nowiki><br />
<br />
|}<br />
<br />
Na to aby sme vytvorili inštanciu triedy ''Factory, ''je potrebné mať nainštalované samotné rozšírenie Google Gears. Existenciu tohto rozšírenia overíme pomocou kontroly globálnych objektov ''window.google'' a ''google.gears''. V&nbsp;skripte ''gears_init.js'' je definovaný objekt ''google.gears.factory''. Metóda ''create'' triedy ''factory'' vytvorí objekt danej triedy s parametrom ''className''. Parameter ''className ''je typ objektu, ktorý sa má vytvoriť. Kompletná špecifikácia je triedy ''Factory'' je v [2].<br />
<br />
Tabuľka 2.1 Opis metód triedy'' Factory''''.'' <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">factory</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Object''' create(className, <nowiki>[</nowiki>classVersion<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Opis:<br />
|Vytvára Gears objekt danej triedy<br><br />
<br />
|-<br />
|Parametre:<br />
|className – typ objektu, ktorý sa má vytvoriť<br>classVersion – parameter sa už nepoužíva, prípadne jeho hodnota <nowiki>’</nowiki>1.0<nowiki>’</nowiki><br />
<br />
|-<br />
|Detaily:<br />
|Podporované hodnoty parametru className:<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|className<br />
|bgcolor = "#EAEAEA"|Vytvorenie Gears triedy<br />
<br />
|-<br />
|beta.blobbuilder<br />
|BlobBuilder<br />
<br />
|-<br />
|beta.canvas<br />
|Canvas<br />
<br />
|-<br />
|beta.database<br />
|Database<br />
<br />
|-<br />
|beta.desktop<br />
|Desktop<br />
<br />
|-<br />
|beta.geolocation<br />
|Geolocation<br />
<br />
|-<br />
|beta.httprequest<br />
|HttpRequest<br />
<br />
|-<br />
|beta.localserver<br />
|LocalServer<br />
<br />
|-<br />
|beta.timer<br />
|Timer<br />
<br />
|-<br />
|beta.workerpool<br />
|WorkerPool<br />
<br />
|}<br />
<br />
|}<br />
<br />
=====LocalServer API=====<br />
Na správu vyrovnávacej pamäti sú dostupné dve triedy:<br />
<br />
'''''ResourceStore'' '''– povoľuje zachytávať dáta (obrázky, PDF súbor), ktoré sú adresované s URL.<br />
<br />
'''''ManagedResourceStore''''' – zoznam URL odkazov na súbory, ktoré budú dostupné off-line, sú&nbsp;v&nbsp;súbore ''manifest.'' Pomocou tejto triedy môžeme zabezpečiť aplikácii všetky dáta, ktoré bude potrebovať. Výhoda takéhoto riešenia je v automatickej aktualizácií pri zmene súboru ''manifest''. Príklad použitia je v&nbsp;kóde 2.2.<br />
<br />
Kód 2.2 Príklad použitia metódy ''createManagedStor''''e''<br />
<br />
{|border="2" cellspacing="0" cellpadding="4" width="100%"<br />
|<nowiki><</nowiki>script type="text/javascript" src="gears_init.js"<nowiki>><</nowiki>/script<nowiki>></nowiki><br><nowiki><</nowiki>script type="text/javascript"<nowiki>></nowiki><br> var localServer = google.gears.factory.create(<nowiki>’</nowiki>beta.localserver<nowiki>’</nowiki>);<br> var store = localServer.createManagedStore(<nowiki>’</nowiki>test-store<nowiki>’</nowiki>);<br> store.manifestUrl = <nowiki>’</nowiki>manifest.txt<nowiki>’</nowiki>;<br><nowiki><</nowiki>/script<nowiki>></nowiki><br />
<br />
|}<br />
<br />
Odkazy na súbory uvedené v&nbsp;súbore'' manifest'' (Kód 2.3) sa pri synchronizácií skopírujú na&nbsp;lokálny disk.<br />
<br />
Kód 2.3 Výpis súboru ''manifest.tx''''t''<br />
<br />
{|border="2" cellspacing="0" cellpadding="4" width="100%"<br />
|<nowiki>{</nowiki><br> "betaManifestVersion": 1,<br> "version": "1.0",<br> "entries": <nowiki>[</nowiki><br> <nowiki>{</nowiki> "url": "index.html" <nowiki>}</nowiki>,<br> <nowiki>{</nowiki> "url": "gears_init.js" <nowiki>}</nowiki><br> <nowiki>]</nowiki><br><nowiki>}</nowiki><br><br>V&nbsp;tabuľke 2.2 je výpis metód triedy ''LocalServer. ''Kompletná špecifikácia je v [3].<br />
<br />
|}<br />
<br />
Tabuľka 2.2 Metódy triedy ''LocalServer''. <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">LocalServer</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''createManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br><br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ManagedResourceStore <br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ManagedResourceStore alebo vytvorí novú, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''openManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ManagedResourceStore <br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ManagedResourceStore alebo vráti null, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' removeManagedStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br><nowiki>[</nowiki>requiredCookie<nowiki>]</nowiki><br />
<br />
|-<br />
|Opis:<br />
|Odstráni ManagedResourceStore a&nbsp;odstráni všetky jej URL z&nbsp;lokálnej<br>vyrovnávacej pamäti<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''createStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br><nowiki>[</nowiki>requiredCookie<nowiki>]</nowiki><br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResourceStore<br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ResourceStore alebo vytvorí novú, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''openStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResourceStore<br><br />
<br />
|-<br />
|Opis:<br />
|Otvorí existujúcu ResourceStore alebo vráti null, ak žiadna taká neexistuje<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' removeStore(string name, <nowiki>[</nowiki>string requiredCookie<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – reťazec identifikujúci úložný priestor<br>requiredCookie – nepovinný parameter identifikujúci jedinečnosť úložného priestoru<br />
<br />
|-<br />
|Opis:<br />
|Odstráni ResourceStore a&nbsp;odstráni a&nbsp;celý jeho obsah<br>vyrovnávacej pamäti<br><br />
<br />
|}<br />
<br />
=====Database API=====<br />
Database API je aplikačné rozhranie pre prácu s&nbsp;lokálnou databázou SQLite[4]. SQLite je&nbsp;knižnica, ktorá implementuje relačnú databázu bez potreby servera.<br />
<br />
Kód 2.4 Príklad práce s&nbsp;lokálnou databázou<br />
<br />
{|border="2" cellspacing="0" cellpadding="4" width="100%"<br />
|<nowiki><</nowiki>script type="text/javascript" src="'''gears_init.js'''"<nowiki>><</nowiki>/script<nowiki>></nowiki><br><nowiki><</nowiki>script type="text/javascript"<nowiki>></nowiki><br>var db = google.gears.factory.create(<nowiki>’</nowiki>beta.database<nowiki>’</nowiki>);<br>db.open(<nowiki>’</nowiki>moja-databaza);<br>db.execute(<nowiki>’</nowiki>create table if not exists Zoznam<nowiki>’</nowiki> <nowiki>+</nowiki><br> <nowiki>’</nowiki> (Meno text, Vek int)<nowiki>’</nowiki>);<br>db.execute(<nowiki>’</nowiki>insert into Zoznam values (?, ?)<nowiki>’</nowiki>, <nowiki>[’</nowiki>Peter<nowiki>’</nowiki>, <nowiki>’</nowiki>22<nowiki>’]</nowiki>);<br>var rs = db.execute(<nowiki>’</nowiki>select * from Zoznam order by Vek desc<nowiki>’</nowiki>);<br><br>rs.close();<br><nowiki><</nowiki>/script<nowiki>></nowiki><br><br>V&nbsp;kóde 2.2 je ukážka vytvorenia tabuľky v&nbsp;lokálnej databáze. Metóda ''execute'' vykoná SQL dopyt na databázu. Pri ukončení práce s&nbsp;databázou je doporučené použitie metódy ''close''. V&nbsp;tabuľke 2.3 je výpis metód triedy ''Database.'' Kompletná špecifikácia je v [5].<br />
<br />
|}<br />
<br />
Tabuľka 2.3 Opis metód triedy'' Database''''.'' <br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">Database</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|'''Metóda: '''<br />
|bgcolor = "#EAEAEA"|void''' open(<nowiki>[</nowiki>name<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|name – voliteľný<br><br />
<br />
|-<br />
|Opis:<br />
|Otvorí databázu<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''execute(sqlStatement, <nowiki>[</nowiki>argArray<nowiki>]</nowiki>)'''<br />
<br />
|-<br />
|Parametre:<br />
|sqlStatement – reťazec obsahujúci SQL príkaz, so znakom <nowiki>’</nowiki>'''?''' <nowiki>’</nowiki>''' '''ako''' '''zástupný symbol previazaný s parametrami<br>argArray – voliteľné pole parametrov, ktoré nahradia symboly <nowiki>’</nowiki>'''?''' <nowiki>’</nowiki><br />
<br />
|-<br />
|Návratová hodnota:<br />
|ResultSet<br />
<br />
|-<br />
|Opis:<br />
|Vykoná SQL príkazy. <br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''close()'''<br />
<br />
|-<br />
|Opis:<br />
|Ukončí spojenie s&nbsp;databázou. Volanie database.close() nie je potrebné<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void''' remove()'''<br />
<br />
|-<br />
|Opis:<br />
|Zmaže práve otvorenú databázu.<br><br />
<br />
|}<br />
<br />
Metóda ''database.execute ''po úspešnom volaní vráti objekt triedy ''ResultSet.'' Obsahuje výsledky vykonaných SQL príkazov.<br />
<br />
Tabuľka 2.4 Opis metód triedy'' ResultSe''''t''<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">ResultSet</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|boolean '''isValidRow()'''<br />
<br />
|-<br />
|Opis:<br />
|Vráti true, ak môžete volať metódy na extrakciu dát<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''next()'''<br />
<br />
|-<br />
|Opis:<br />
|Pokračuje na ďalší riadok výsledkov <br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|void '''close()'''<br />
<br />
|-<br />
|Opis:<br />
|Je potrebné zavolať metodu close(), ak sme skončili s&nbsp;prácou s výsledkami<br><br />
<br />
|}<br />
<br />
Tabuľka 2.5 Opis metód na extrakciu dát<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4" <font color="#000000">colspan = "2"|'''Metódy na extrakciu dát'''</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Int '''fieldCount()'''<br />
<br />
|-<br />
|Opis:<br />
|Vráti počet polí výsledku<br><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|string '''fieldName(int fieldIndex)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldIndex – index požadovaného pola<br />
<br />
|-<br />
|Opis:<br />
|Vráti meno špecifikovaného pola.<br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''field(int fieldIndex)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldIndex – index požadovaného pola<br />
<br />
|-<br />
|Návratová hodnota:<br />
|rôzne<br />
<br />
|-<br />
|Opis:<br />
|Vráti obsah špecifikovaného pola v aktuálnom riadku<br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|'''fieldByName(string fieldName)'''<br />
<br />
|-<br />
|Parametre:<br />
|fieldName – názov požadovaného pola<br />
<br />
|-<br />
|Návratová hodnota:<br />
|rôzne<br />
<br />
|-<br />
|Opis:<br />
|Vráti obsah špecifikovaného pola v aktuálnom riadku<br />
<br />
|}<br />
<br />
<br />
=====WorkerPool API=====<br />
Aplikačné rozhranie, ktoré umožňuje spracovávať javaskriptový kód na pozadí. Vďaka tomu neblokuje vykonávanie ďalších skriptov. Kompletná špecifikácia v [6].<br />
<br />
=====Blob API=====<br />
Pomocou objektov typu ''Blob ''môžeme odkazovať na binárne dáta vo webových aplikáciách. Kompletná špecifikácia v [7].<br />
<br />
=====BlobBuilder API=====<br />
''BlobBuilder'' je pomocný objekt pre vytváranie objektov typu ''Blob. Blob ''je nemenný, read-only object, rovnaký ako reťazec v&nbsp;Javascripte. ''BlobBuilder'' je používaný na&nbsp;generovanie ''Blobu'' s&nbsp;novým obsahom. Kompletná špecifikácia v [8].<br />
<br />
=====Canvas API=====<br />
Prostredníctvom tejto API môžeme pracovať s&nbsp;obrázkami pomocou javaskriptu. Táto grafická API je inšpirovaná HTML5 canvasom. Obsahuje metódy na rozkódovanie a zakódovanie do&nbsp;binárnych formátov (napr. PNG, JPEG). Kompletná špecifikácia v [9].<br />
<br />
=====Desktop API=====<br />
Desktop API poskytuje rozhranie pre prístup k desktopovým funkciám, ako je vytváranie ikon. V&nbsp;kóde 2.5 je zobrazená funkcia ''createShortcut'', ktorá vytvorí ikony na ploche a paneli nástrojov.<br />
<br />
Kód 2.5 Ukážka práce s&nbsp;Desktop API <br />
<br />
{|border="2" cellspacing="0" cellpadding="4" width="100%"<br />
|var desktop = google.gears.factory.create(<nowiki>’</nowiki>beta.desktop<nowiki>’</nowiki>);<br>function createShortcut() <nowiki>{</nowiki><br> var desktop = google.gears.factory.create("beta.desktop");<br> var description = "Vytvorenie ikonky ROZVRHU.";<br> var icons = <nowiki>{</nowiki><br> "16x16": "16icon.png"<br> "32x32": "32icon.png",<br> "48x48": "48icon.png",<br> "128x128": "128icon.png"<br> <nowiki>}</nowiki>;<br> desktop.createShortcut("Rozvrh Fakulty Mechatroniky",<br> " http://priklad.sk/index.html",<br> icons,<br> description);<br><nowiki>}</nowiki><br />
<br />
|}<br />
<br />
V&nbsp;tabuľke 2.6 je výpis metód triedy ''Desktop.'' Kompletná špecifikácia v [10].<br />
<br />
Tabuľka 2.6 Opis metód triedy ''Desktop''<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#a3d1e4"|<font color="#000000">Trieda: </font><br />
|bgcolor = "#a3d1e4"|<font color="#000000">Desktop</font><br />
<br />
|-<br />
|bgcolor = "#EAEAEA"|'''Metóda: '''<br />
|bgcolor = "#EAEAEA"|createShortcut(name, url, icons, <nowiki>[</nowiki>description<nowiki>]</nowiki>)<br />
<br />
|-<br />
|Parametre:<br />
|name - meno odkazu<br>url - adresa dokumentu, ktorý sa má otvoriť<br>icons – Objekt obsahujúci jednu alebo viac hodnôt v tvare:<br>rozmer : URL ikony<br>Napr.'' <nowiki>’</nowiki>128x128<nowiki>’</nowiki>: <nowiki>’</nowiki>http://priklad. sk/icon128x128.png<nowiki>’</nowiki>''<br>descriptions – nepovinný parameter. Text sa zobrazí v potvrdzovacom dialógu.<br><br> <br><br />
<br />
|-<br />
|Opis:<br />
|Vytvorí desktopový odkaz na spustenie aplikácie<br><br />
<br />
|}<br clear="all"><br />
<br />
=====Geolocation API=====<br />
Geolocation API umožňuje webovej aplikácii získať používateľa geografickú polohu. Kompletnú špecifikáciu nájdete v [11].<br />
<br />
=====HttpRequest API=====<br />
HttpRequest API implementuje podskupinu XmlHttpRequest W3C špecifikácie. Gears poskytuje vlastný HttpRequest objekt. Obsahuje väčšinu vlastností. Kompletnú špecifikáciu nájdete v [12].<br />
<br />
=====Timer API=====<br />
Obsahuje metódy, ktoré umožnia nastaviť vykonanie skriptov s&nbsp;časovým oneskorením a&nbsp;podobne. Kompletnú špecifikáciu nájdete v [13].<br />
<br />
====Podpora Google Gears v&nbsp;operačných systémoch a prehliadačoch====<br />
Funkčnosť Google Gears je overená na nasledujúcich platformách a&nbsp;prehliadačoch [14]:<br />
<br />
* Apple Mac OS X (10.4 alebo vyššia, G4, G5 or Intel Processor)<br />
* Firefox 1.5 alebo vyššia<br />
* Safari 3.1.1 alebo vyššia (OS X Tiger 10.4.11<nowiki>+</nowiki> alebo Leopard 10.5.3<nowiki>+</nowiki>, G4, G5 alebo Intel Processor)<br />
* Linux<br />
* Firefox 1.5 alebo vyššia<br />
* Microsoft Windows (XP alebo vyššia)<br />
* Firefox 1.5 alebo vyššia<br />
* Internet Explorer 6 alebo vyššia<br />
* Google Chrome<br />
* Microsoft Windows Mobile (5 alebo vyššia)<br />
* Internet Explorer 4.01 alebo vyššia<br />
* Opera Mobile 9.51 (Presto build 2.1.0<nowiki>+</nowiki>) (Windows Mobile 6 len pre dotykové zariadenia)<br />
* &nbsp;Nasledovné zariadenia nie sú podporované<br />
* Samsung i320 a i320N<br />
* Orange SPV C600<br />
* Motorola Q<br />
* Android 1.0<br />
====Umiestnenie dát na disku====<br />
Umiestnenie dát webovej aplikácie na disku záleží na platforme a&nbsp;internetovom prehliadači.<br />
<br />
'''Windows Vista - Internet Explorer'''<br />
<br />
Umiestnenie: <nowiki>{</nowiki>FOLDERID_LocalAppDataLow<nowiki>}</nowiki>\Google\Google Gears for Internet Explorer<br>Príklad: C:\Users\Bob\AppData\LocalLow\Google\Google Gears for Internet Explorer<br />
<br />
'''Windows Vista - Firefox'''<br />
<br />
Umiestnenie: C:\Users\<nowiki><</nowiki>username<nowiki>></nowiki>\AppData\Local\Mozilla\Firefox\Profiles\<nowiki>{</nowiki>profile<nowiki>}</nowiki>.default\Google Gears for Firefox <br>Príklad: C:\Users\Bob\AppData\Local\Mozilla\Firefox\Profiles\uelib44s.default\Google Gears for Firefox<br />
<br />
'''Windows Vista - Chrome'''<br />
<br />
Umiestnenie: C:\Users\<nowiki><</nowiki>username<nowiki>></nowiki>\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears<br>Príklad: C:\Users\Bob\AppData\Local\Google\Chrome\User Data\Default\Plugin Data\Google Gears<br />
<br />
'''Mac OS X - Safari'''<br />
<br />
Umiestnenie: <nowiki>~</nowiki>/Library/Application Support/Google/Google Gears for Safari<br>Príklad: /Users/Bob/Library/Application Support/Google/Google Gears for Safari<br />
<br />
'''Linux - Firefox'''<br />
<br />
Umiestnenie: <nowiki>~</nowiki>''bob''/.mozilla/firefox/<nowiki><</nowiki>firefox<nowiki>’</nowiki>s profile id<nowiki>></nowiki>/Google Gears for Firefox <br>Príklad: <nowiki>~</nowiki>bob/.mozilla/firefox/08ywpi3q.default/Google Gears for Firefox<br />
<br />
====Využitie Google Gears====<br />
Ako prvá začala Google Gears využívať firma Google vo svojej čítačke kanálov Google Reader. V&nbsp;režime off-line umožňuje prehliadať až 2000 príspevkov. Postupne sa podpora pre&nbsp;toto rozšírenie pridala aj do mailovej služby Gmail a on-line kancelárskeho balíka Google Docs.<br />
<br />
Ďalšie webové služby využívajúce Google Gears:<br />
<br />
* správca úloh '''rememberthemilk.com,'''<br />
* sociálna služba '''myspace.com,'''<br />
* on-line správca hesiel '''passpack.com,'''<br />
* nástroj pre riadenie projektov''' mindmeister.com,'''<br />
* open-source redakčný systém '''wordpress.net''' a ďalší.<br />
===HTML5===<br />
<br />
HTML5 [15] je najnovšia špecifikácia značkovacieho jazyka HTML vyvíjaná medzinárodným združením W3C (World Wide Web Consortium). Najdôležitejšou zmenou v&nbsp;novej verzií je samotná&nbsp;štruktúra&nbsp;HTML dokumentu, veľké množstvo nových elementov a&nbsp;aj podpora off-line web aplikácií. Pretože Google sa snaží dodržiavať štandardy, zastavil vývoj Google Gears a&nbsp;svoju iniciatívu smeruje na HTML5. Je možné, že podpora off-line aplikácií bude mať v novej špecifikácií aj niektoré rysy, ktoré poznáme z Google Gears. V&nbsp;súčasnosti je stále HTML 5 vo&nbsp;fáze vývoja. Dokončenie je plánované na rok 2012. Niekoľko rokov však potrvá jeho úplná podpora vo väčšine prehliadačoch. Prehliadače ako napríklad Firefox podporujú už väčšiu časť nových prvkov HTML5. V&nbsp;našom prehľade sú&nbsp;zaujímavé SQL API a&nbsp;Cache API, ktoré majú poskytovať rovnakú funkcionalitu ako Google Gears.<br />
<br />
====Elementy štruktúry====<br />
Doposiaľ bola štruktúra HTML dokumentu tvorená z&nbsp;''div ''elementov. HTML5 pridáva nové elementy k&nbsp;identifikácií každého z&nbsp;nich. Tieto majú presne stanovený sémantický význam a&nbsp;lepšie sa v nich orientuje aj samotný programátor.<br />
<br />
Tabuľka 2.7 Zoznam nových sémantických elementov štruktúry HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|section<br />
|Všeobecná (často nadradená) časť, ktorá môže združovať ostatné časti stránky. Element DIV, ktorý dostal sémantické meno.<br />
<br />
|-<br />
|header<br />
|Hlavička časti, v ktorej je začlenená.<br />
<br />
|-<br />
|footer<br />
|Pätička časti, v ktorej je začlenená.<br />
<br />
|-<br />
|nav<br />
|Časť stránky, ktorá obsahuje odkazy na ostatné stránky alebo časti danej stránky.<br />
<br />
|-<br />
|article<br />
|Časť stránky, ktorá obsahuje text nezávislý od ostatných dielov stránky.<br />
<br />
|}<br />
<br />
====Elementy multimédií====<br />
Zaujímavých zmien sa dočkala aj podpora multimédií (zvuk, video). Tieto sa na webe neskutočne rýchlo rozšírili (hlavne jednoduchým šírením pomocou stránok youtube.com a&nbsp;podobne). Preto sú v&nbsp;novej verzií HTML5 prístupné tagy&nbsp;''<nowiki><</nowiki>video<nowiki>></nowiki>''&nbsp;a ''<nowiki><</nowiki>audio<nowiki>></nowiki>.''<br />
<br />
Element ''<nowiki><</nowiki>canvas<nowiki>></nowiki>'' reprezentuje 2D kresliacu plochu ovládanú javaskriptom, ktorú môžete využívať, napr. na kreslenie grafov, grafických prvkov v hrách a prezentáciách.<br />
<br />
====Inline elementy====<br />
HTML5 zavádza nové elementy, ktoré majú pomôcť uviesť základné prvky, ako je čas alebo čísla.<br />
<br />
Tabuľka 2.8 Zoznam nových inline elementov HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|mark<br />
|Označenie textu.&nbsp;Slúži napríklad na označenie hľadaného slová v zozname výsledkov<br />
<br />
|-<br />
|time<br />
|Označuje čas alebo dátum v bloku textu.<br />
<br />
|-<br />
|meter<br />
|Predstavuje skalárne meradlá.<br />
<br />
|-<br />
|progress<br />
|Reprezentuje pokrok v&nbsp;dokončení úlohy. Môže byť použitý pre vizuálne zobrazenie.<br />
<br />
|}<br />
<br />
====Podpora režimu off-line====<br />
S novou špecifikáciou jazyka HTML 5 prichádza aj podpora off-line aplikácií. K&nbsp;dispozícií máme SQL API a&nbsp;Cache API, ktorá je obdobou LocalServer API.<br />
<br />
=====SQL API=====<br />
SQL databáza na strane klienta umožní štruktúrované dátové úložisko. API pracuje s&nbsp;touto databázou asynchrónne. To znamená, že používateľské prostredie nebude blokované vykonávaním synchrónneho požiadavku.<br />
<br />
Tabuľka 2.9 Zoznam metód návrhu HTML5<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Object openDatabase(dbname, dbversion, displayname, size)<br />
<br />
|-<br />
|Opis:<br />
|Vytvára databázový objekt podľa zvolených parametrov<br><br />
<br />
|-<br />
|Parametre:<br />
|dbname – meno databázy<br>dbversion – verzia databázy<br>displayname – zobrazený názov databázy<br>size – predpokladaná veľkosť databázy v bajtoch<br />
<br />
|-<br />
|Ďalšie Metódy: <br />
|transaction(), executeSql()<br />
<br />
|}<br />
<br />
=====LocalStorage API=====<br />
Dáta na lokálnom disku bude reprezentovať objekt ''localStorage.''<br />
<br />
Tabuľka 2.10 Zoznam niektorých metód pre prácu s&nbsp;lokálnym úložiskom<br />
<br />
{|class="prettytable" width="600px"<br />
|bgcolor = "#EAEAEA"|Metóda: <br />
|bgcolor = "#EAEAEA"|Opis<br />
<br />
|-<br />
|clear()<br />
|zmaže celý obsah objektu<br />
<br />
|-<br />
|getItem()<br />
|získa obsah objektu podľa názvu<br />
<br />
|-<br />
|key()<br />
|získa kľúč podľa čísla<br />
<br />
|-<br />
|length<br />
|Počet uložených kľúčov<br />
<br />
|-<br />
|removeItem()<br />
|odstráni položku podľa jej mena<br />
<br />
|-<br />
|setItem()<br />
|Pridá hodnotu položke<br />
<br />
|}</div>Dusanhttp://www.kiwiki.info/index.php?title=Off-line_funkcionalita_on-line_web_aplik%C3%A1ci%C3%AD&diff=6874Off-line funkcionalita on-line web aplikácií2010-09-05T11:20:58Z<p>Dusan: /* Štruktúra webovej aplikácie */</p>
<hr />
<div>[[Kategória:Študentské práce]]<br />
[[Kategória:Bakalárske práce]]<br />
[[Kategória:Informatika]]<br />
[[Kategória:php]]<br />
[[Kategória:web]]<br />
{{Hlavička_FM|{{PAGENAME}}|Dušan Pagáč|Ing. Juraj Ďuďák|<br />
2009/2010<br />
|Semetrálna práca|Mechatronika}} <br />
{{Praca_uvod|1|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}<br />
__TOC__<br />
{{Abstrakt<br />
|Bakalárska práca sa zaoberá web aplikáciami, ktoré sú schopné pracovať aj v režime off-line. V prvej kapitole je rozobraná architektúru web aplikácií. Zaoberá sa štruktúrou webovej aplikácie pracujúcej aj v režime off-line. V druhej časti je popísaná technológia Google Gears od firmy Google, ktorá toto umožňuje. Následne sú uvedené výhody a nevýhody tejto technológie a možnosti jej praktického využitia vo webových aplikáciách. V práci je spomenutá aj nová špecifikácia HTML5, ktorá taktiež prináša off-line podporu pre webové aplikácie. V ďalšej časti sa venuje aplikáciám na tvorbu a zobrazovanie rozvrhov a návrhu front-endu rozvrhu Fakulty mechatroniky. Na zabezpečenie off-line funkcionality sme použili rozšírenie Google Gears.<br />
|This bachelor work deals with web applications which are able to work in an off-line mode. The first part is concerned with the architecture of web applications. It is devoted to the structure of web-application able to work also in the off-line mode. The Google Gears technology by the Google company which makes this possible is described in the second part. Consequently, the advantages and the disadvantages are stated as well as the posibilities of&nbsp;the&nbsp;&nbsp;practical usage in the web aplications. The new specification HTML5 that also offers off-line support for web applications is mentioned in this work, too. The final part is&nbsp;dedicated to the applications used for creation and display of timetables and design of front-end directly for Faculty of mechatronics. The off-line functionality has been ensured by the Google Gears extention.<br />
}}<br />
<br />
<br />
=Štruktúra webovej aplikácie=<br />
<br />
Webová aplikácia je aplikácia, ktorá je prístupná pomocou webového prehliadača cez sieť internet a intranet. Skladá sa z viacerých vrstiev. Rozoznávame dvojvrstvové alebo trojvrstvové, niekedy nazývané viacvrstvové. <br />
<br />
==Dvojvrstvové web aplikácie==<br />
<br />
Dvojvrstvová aplikácia sa skladá z klientskej a dátovej vrstvy. Klientska vrstva obsahuje väčšinu aplikačnej logiky, s ktorou sa pracuje priamo nad dátovým zdrojom. Takýto dátový zdroj môže byť reprezentovaný relačnou databázou. Ďalšie zdroje môžu byť súbory alebo iné aplikácie. Schému dvojvrstvovej web aplikácie môžeme vidieť na obrázku (Obr 1.1).<br />
<br />
[[Image:Example.jpg|center|framed|Obr 1.1 Schéma dvojvrstvovej web aplikácie. Zdroj: [1] ]]<br />
<br />
Nevýhody tohto modelu sa ukázali pri vzrastajúcej komplexnosti klientskych aplikácií. S ich zložitosťou vzrastali aj výkonové nároky na klientské počítače. S masívnym rozšírením aplikácií boli softvérové firmy nútené reagovať na požiadavky klientov. Napríklad zdieľanie zdrojov, obmedzenie dátového prenosu atď. Preto sa začalo uvažovať o trojvrstvovej architektúre, ktorá by tieto požiadavky pokryla.<br />
<br />
<br />
==Trojvrstvové web aplikácie==<br />
<br />
Riešenie sa našlo v podobe pridania tretej – strednej vrstvy. Samozrejme sa nejednalo len o pridanie ďalšej vrstvy. Bolo nutné špecifikovať jednotlivé vrstvy, respektíve ich úlohu v architektúre. Trojvrstvovú architektúru zobrazuje schéma (Obr. 1.2).<br />
<br />
[[Súbor:bp_off_web_1.jpg|center|framed|Obr. 1.2 Schéma trojvrstvovej aplikácie. Zdroj: [1]]]<br />
<br />
===Zmeny v klientskej vrstve===<br />
<br />
Najväčšia zmena nastala v prípade klientskej vrstvy. Vďaka novo definovanej aplikačnej vrstve bolo možné logiku aplikácie presunúť na server tejto vrstvy. Celý výpočtový výkon bol prenesený na výkonné servery. Presunutím aplikačnej logiky na jedno miesto sme dosiahli lepšiu možnosť jej zdieľania, správy a dostupnosti. Významnou mierou sa podarilo redukovať dátový prenos, pretože komunikácia je sústredená medzi serverom a dátovým zdrojom.<br />
<br />
===Aplikačná vrstva===<br />
<br />
Z pohľadu doby prešla aplikačná vrstva najväčším vývojom. Táto vrstva, resp. aplikačná logika, zaisťuje prístup k dátam, prácu s dátami a ich poskytnutie vo vhodnom formáte (XML, HTML) pre klientskú vrstvu. <br />
<br />
==Model-View-Controller (MVC)==<br />
<br />
Model-view-controller je architektonický vzor využívaný pri tvorbe aplikácií, ktorý oddeľuje dátový model, používateľské rozhranie a riadiacu logiku. Vytváranie aplikácie s využitím architektúry MVC vyžaduje tri komponenty:<br />
<br />
===Model===<br />
Model je funkčným a dátovým základom celej aplikácie. Poskytuje prostriedky pre prístup k dátovej základni, stavom aplikácie, ukladaniu a aktualizácií.<br />
===View===<br />
View zobrazuje obsah Modelu, zaisťuje grafický či iný výstup aplikácie. Cez Model pristupuje k dátam, stavom aplikácie a špecifikuje ako majú byť prezentované. Pri zmene stavu Modelu aktualizuje zobrazenie. V prípade webových aplikácií View generuje príslušný HTML kód, ktorý je odoslaný prehliadaču ako odpoveď na požiadavka.<br />
===Controller===<br />
Controller definuje správanie aplikácie. Spracováva všetky vstupy a udalosti z používateľského rozhrania. Na ich základe volá príslušné procesy Modelu, mení stav a pod. Podľa udalostí prijatých od používateľa a podľa výsledkov akcií Modelu potom Controller vyberie vhodné View pre ďalšie zobrazenie.<br />
===Výhody vzoru MVC===<br />
* Jednoduché sprístupnenie pre rôzne druhy klientov. Pre zavedenie podpory ďalšieho klienta stačí nadefinovať len nové View.<br />
* Minimalizácia duplicity zdrojového kódu.<br />
* Rozdelenie vývojárskych úloh a&nbsp;samostatný vývoj jednotlivých častí.<br />
* Znovupoužiteľnosť kódu.<br />
* Vysoká komplexnosť návrhu a jednoduchšia rozšíriteľnosť aplikácie.<br />
<br />
<br />
==Optimálna štruktúra aplikácie s podporou režimu off-line==<br />
Webové aplikácie, ktoré sú postavené s podporou off-line režimu majú tendenciu byť štruktúrované tak, že ich dátová vrstva je izolovaná. Väčšina dnešných web aplikácií takto stavaných nie je. Pravdepodobne najvýhodnejšia štruktúra je zobrazená v schéme (Obr. 1.3). <br />
<br />
[[Súbor:bp_off_web_3.jpg|center|framed|Schéma web aplikácie podporujúcej režime off-line. Zdroj: [1]]]<br />
<br />
Hlavným krokom pre dosiahnutie vhodnej architektúry je vytvorenie lokálnej dátovej vrstvy, ktorá využíva lokálnu databázu. Podľa toho či ste on-line alebo off-line, sa dáta získavajú zo servera alebo z lokálneho úložiska. O prepínanie medzi dátovým vrstvami sa stará prepínač. Prepínač je časť kódu, ktorý rozhoduje odkiaľ sa budú dáta čerpať. <br />
<br />
==Funkcie dostupné v režime off-line==<br />
Nedá sa zabezpečiť, aby všetky dostupné funkcie web aplikácie boli prístupné aj v off-line režime. Je zbytočné kopírovať celú databázu zo servera, keď budeme využívať len časť. Preto je vhodné rozhodnúť, ktoré dáta budú uložené lokálne. Implementovaním logiky rozhodovania do našej aplikácie zabezpečíme, že určité dáta bude získavať z lokálneho úložiska a ďalšie zo servera.<br />
<br />
Niektoré dáta nemá zmysel ukladať na lokálny disk a&nbsp;je vhodnejšie ich získavať zo servera. Sú to predovšetkým:<br />
<br />
* dáta, ktoré sa menia často alebo dokonca v&nbsp;reálnom čase,<br />
* dáta, ktoré majú zmysel len v&nbsp;režime on-line ako instant messaging,<br />
* dáta, ktoré sú náročné na miesto na disku.<br />
<br />
Optimálne riešenie je používať lokálne úložisko čo najviac ako je to možné. Pretože je to obyčajne rýchlejšie ako pripojenie na vzdialený server. Ak chceme, aby aplikácia pracovala čo najviac s&nbsp;lokálnymi dátami, bude toto implementovanie náročnejšie. Preto už pri návrhu aplikácie musíme zvážiť, čo je pre nás výhodnejšie.<br />
<br />
<br />
==Forma off-line aplikácií==<br />
Typ aplikácie môže mať modálnu alebo nemodálnu formu. Modálne aplikácie obyčajne rozlišujú on-line a off-line mód indikáciou cez zmenu v používateľskom rozhraní. Používateľ sa podieľa na zmene stavu.<br />
Nemodálne aplikácie prechádzajú medzi on-line a off-line stavmi bez zmien v používateľskom rozhraní. Používateľ sa nemusí zúčastňovať na prepínaní stavov. Aplikácia to robí automaticky.<br />
<br />
<br />
===Modálne aplikácie===<br />
V&nbsp;modálnych aplikáciách, ak je aplikácia on-line, komunikuje so serverom. Ak je off-line, využíva lokálne zdroje. V&nbsp;prípade zmeny módov je nutná synchronizácia dát.<br />
<br />
Výhody:<br />
<br />
* Relatívne jednoduchá implementácia.<br />
Nevýhody:<br />
<br />
* Používateľ musí pamätať na prepínanie módov. Ak zabudne, nebude mať v&nbsp;off-line móde potrebné dáta alebo bude pracovať on-line &nbsp;bez podpory off-line úložiska.<br />
* Ak je internetové pripojenie prerušované, používateľ si musí zvoliť jedno z&nbsp;nastavení alebo si bude musieť neustále prepínať medzi módmi podľa stavu pripojenia.<br />
* Keďže lokálne zdroje nie sú vždy aktuálne, nemôžu byť pri pripojení na server využívané na zlepšenie podpory aplikácie.<br />
<br />
<br />
===Nemodálne aplikácie===<br />
V&nbsp;prípade nemodálnych aplikácií pracuje aplikácia s&nbsp;predpokladom off-line stavu alebo možnosti náhodnej straty pripojenia. Aplikácia využíva lokálne zdroje v&nbsp;maximálne možnej miere, a&nbsp;keď je server dosiahnuteľný, prebieha neustála synchronizácia dát. Tá prebieha taktiež pri prechode do on-line stavu.<br />
<br />
Výhody:<br />
<br />
* Používateľ sa nemusí starať o&nbsp;to,&nbsp;či je pripojený alebo v&nbsp;akom je stave jeho aplikácia<br />
(on-line/off-line).<br />
<br />
* Aplikácia pracuje plynulo aj v&nbsp;prípade prerušovaného pripojenia.<br />
* Keďže je lokálny zdroj aktualizovaný, môže byť využívaný na optimalizáciu serverového pripojenia.<br />
Nevýhody:<br />
<br />
* Náročná implementácia.<br />
* Musí sa dbať na to, aby proces synchronizácie nezabral príliš veľa zdrojov a&nbsp;nespôsobil spomalenie celej aplikácie.<br />
* Testovanie aplikácie ja náročnejšie, keďže logika synchronizácie sa deje na&nbsp;pozadí a&nbsp;nie ako odozva na&nbsp;špecifický krok používateľa.<br />
<br />
==Synchronizácia dát==<br />
Bez ohľadu na pripojenie alebo modálnu stratégiu dáta v&nbsp;lokálnej databáze vystupujú zo&nbsp;synchronizácie so serverovými dátami. Napríklad v&nbsp;týchto prípadoch:<br />
<br />
* Používateľ urobí zmeny v&nbsp;off-line stave.<br />
* Dáta na serveri sú zdieľané a&nbsp;môžu byť zmenené externými subjektmi.<br />
* Dáta prichádzajú z&nbsp;vonkajšieho zdroja (RSS).<br />
<br />
Proces odstraňovania týchto rozdielov tak, že dva zdroje sa stávajú totožnými, nazývame synchronizácia. Existuje mnoho prístupov k&nbsp;synchronizácii, ale&nbsp;žiadny nie je výhodný pre&nbsp;všetky situácie. Vybrané riešenie by malo byť čo najvýhodnejšie pre našu aplikáciu.<br />
<br />
Pre príklad sú uvádzané dve všeobecné synchronizačné stratégie.<br />
<br />
===Manuálna synchronizácia===<br />
Najjednoduchší spôsob synchronizácie je tzv. ''manuálna synchronizácia''. Manuálna preto, lebo používateľ sám volí čas synchronizácie. Môže byť implementovaná jednoducho nahraním všetkých starých dát na server a&nbsp;následným stiahnutím novej kópie dát zo serveru pred prechodom na off-line stav.<br />
<br />
Manuálna synchronizácia ma nasledovné požiadavky:<br />
<br />
* Objem dát dostatočne malý na stiahnutie v&nbsp;primeranom čase.<br />
* Používateľ sám stanovuje prechod do režimu off-line, väčšinou tlačidlom v&nbsp;používateľskom prostredí.<br />
<br />
Problémy tejto metódy a&nbsp;jej off-line módu:<br />
<br />
* Užívatelia nie vždy vedia okamžitý stav svojho pripojenia. Internetové pripojenie môže byť náhle odpojené alebo prerušované.<br />
* Užívatelia môžu zabudnúť synchronizovať dáta pred prechodom do stavu off-line.<br />
<br />
Manuálna synchronizácia môže byť na začiatok vhodným spôsobom synchronizácie, najmä kvôli relatívne jednoduchej implementácii. Bohužiaľ, vyžaduje uvedomelosť používateľa a&nbsp;jeho zapojenie do procesu synchronizácie.<br />
<br />
===Synchronizácia na pozadí===<br />
V prípade synchronizácie na pozadí aplikácia neustále synchronizuje dáta medzi lokálnym zdrojom a&nbsp;serverom. To môže byť uskutočňované opakovanými pokusmi pripájať sa na server alebo v&nbsp;lepšom prípade umožniť serveru presúvať dáta ku klientovi.<br />
<br />
Výhody synchronizácie na pozadí:<br />
<br />
* Dáta sú pripravené vždy, keď sa používateľ rozhodne pre prechod do režimu off-line alebo je náhodne odpojený.<br />
* Zlepšenie výkonu v&nbsp;prípade využívania pomalého internetového pripojenia.<br />
<br />
Nevýhody:<br />
<br />
* Nevýhodou je možnosť spomalenia pri kopírovaní dát na pozadí. Spomalenie sa dá minimalizovať využitím rôznych možností (Google Gears WorkerPool).<br />
<br />
[[Súbor:bp_off_web_4.jpg|center|framed|Architektúra web aplikácie so synchronizáciou na pozadí. Zdroj: [1]]]</div>Dusanhttp://www.kiwiki.info/index.php?title=Off-line_funkcionalita_on-line_web_aplik%C3%A1ci%C3%AD&diff=6873Off-line funkcionalita on-line web aplikácií2010-09-05T11:18:47Z<p>Dusan: </p>
<hr />
<div>[[Kategória:Študentské práce]]<br />
[[Kategória:Bakalárske práce]]<br />
[[Kategória:Informatika]]<br />
[[Kategória:php]]<br />
[[Kategória:web]]<br />
{{Hlavička_FM|{{PAGENAME}}|Dušan Pagáč|Ing. Juraj Ďuďák|<br />
2009/2010<br />
|Semetrálna práca|Mechatronika}} <br />
{{Praca_uvod|1|Off-line funkcionalita on-line web aplikácií|Štruktúra webovej aplikácie|Technológie off-line web aplikácií|Systémy na vizualizáciu rozvrhu hodín|Návrh používateľského rozhrania rozvrhu FM TnUAD}}<br />
__TOC__<br />
{{Abstrakt<br />
|Bakalárska práca sa zaoberá web aplikáciami, ktoré sú schopné pracovať aj v režime off-line. V prvej kapitole je rozobraná architektúru web aplikácií. Zaoberá sa štruktúrou webovej aplikácie pracujúcej aj v režime off-line. V druhej časti je popísaná technológia Google Gears od firmy Google, ktorá toto umožňuje. Následne sú uvedené výhody a nevýhody tejto technológie a možnosti jej praktického využitia vo webových aplikáciách. V práci je spomenutá aj nová špecifikácia HTML5, ktorá taktiež prináša off-line podporu pre webové aplikácie. V ďalšej časti sa venuje aplikáciám na tvorbu a zobrazovanie rozvrhov a návrhu front-endu rozvrhu Fakulty mechatroniky. Na zabezpečenie off-line funkcionality sme použili rozšírenie Google Gears.<br />
|This bachelor work deals with web applications which are able to work in an off-line mode. The first part is concerned with the architecture of web applications. It is devoted to the structure of web-application able to work also in the off-line mode. The Google Gears technology by the Google company which makes this possible is described in the second part. Consequently, the advantages and the disadvantages are stated as well as the posibilities of&nbsp;the&nbsp;&nbsp;practical usage in the web aplications. The new specification HTML5 that also offers off-line support for web applications is mentioned in this work, too. The final part is&nbsp;dedicated to the applications used for creation and display of timetables and design of front-end directly for Faculty of mechatronics. The off-line functionality has been ensured by the Google Gears extention.<br />
}}<br />
<br />
=Štruktúra webovej aplikácie=<br />
<br />
Webová aplikácia je aplikácia, ktorá je prístupná pomocou webového prehliadača cez sieť internet a intranet. Skladá sa z viacerých vrstiev. Rozoznávame dvojvrstvové alebo trojvrstvové, niekedy nazývané viacvrstvové. <br />
<br />
==Dvojvrstvové web aplikácie==<br />
<br />
Dvojvrstvová aplikácia sa skladá z klientskej a dátovej vrstvy. Klientska vrstva obsahuje väčšinu aplikačnej logiky, s ktorou sa pracuje priamo nad dátovým zdrojom. Takýto dátový zdroj môže byť reprezentovaný relačnou databázou. Ďalšie zdroje môžu byť súbory alebo iné aplikácie. Schému dvojvrstvovej web aplikácie môžeme vidieť na obrázku (Obr 1.1).<br />
<br />
[[Image:Example.jpg|center|framed|Obr 1.1 Schéma dvojvrstvovej web aplikácie. Zdroj: [1] ]]<br />
<br />
Nevýhody tohto modelu sa ukázali pri vzrastajúcej komplexnosti klientskych aplikácií. S ich zložitosťou vzrastali aj výkonové nároky na klientské počítače. S masívnym rozšírením aplikácií boli softvérové firmy nútené reagovať na požiadavky klientov. Napríklad zdieľanie zdrojov, obmedzenie dátového prenosu atď. Preto sa začalo uvažovať o trojvrstvovej architektúre, ktorá by tieto požiadavky pokryla.<br />
<br />
<br />
==Trojvrstvové web aplikácie==<br />
<br />
Riešenie sa našlo v podobe pridania tretej – strednej vrstvy. Samozrejme sa nejednalo len o pridanie ďalšej vrstvy. Bolo nutné špecifikovať jednotlivé vrstvy, respektíve ich úlohu v architektúre. Trojvrstvovú architektúru zobrazuje schéma (Obr. 1.2).<br />
<br />
[[Súbor:bp_off_web_1.jpg|center|framed|Obr. 1.2 Schéma trojvrstvovej aplikácie. Zdroj: [1]]]<br />
<br />
===Zmeny v klientskej vrstve===<br />
<br />
Najväčšia zmena nastala v prípade klientskej vrstvy. Vďaka novo definovanej aplikačnej vrstve bolo možné logiku aplikácie presunúť na server tejto vrstvy. Celý výpočtový výkon bol prenesený na výkonné servery. Presunutím aplikačnej logiky na jedno miesto sme dosiahli lepšiu možnosť jej zdieľania, správy a dostupnosti. Významnou mierou sa podarilo redukovať dátový prenos, pretože komunikácia je sústredená medzi serverom a dátovým zdrojom.<br />
<br />
===Aplikačná vrstva===<br />
<br />
Z pohľadu doby prešla aplikačná vrstva najväčším vývojom. Táto vrstva, resp. aplikačná logika, zaisťuje prístup k dátam, prácu s dátami a ich poskytnutie vo vhodnom formáte (XML, HTML) pre klientskú vrstvu. <br />
<br />
==Model-View-Controller (MVC)==<br />
<br />
Model-view-controller je architektonický vzor využívaný pri tvorbe aplikácií, ktorý oddeľuje dátový model, používateľské rozhranie a riadiacu logiku. Vytváranie aplikácie s využitím architektúry MVC vyžaduje tri komponenty:<br />
<br />
===Model===<br />
Model je funkčným a dátovým základom celej aplikácie. Poskytuje prostriedky pre prístup k dátovej základni, stavom aplikácie, ukladaniu a aktualizácií.<br />
===View===<br />
View zobrazuje obsah Modelu, zaisťuje grafický či iný výstup aplikácie. Cez Model pristupuje k dátam, stavom aplikácie a špecifikuje ako majú byť prezentované. Pri zmene stavu Modelu aktualizuje zobrazenie. V prípade webových aplikácií View generuje príslušný HTML kód, ktorý je odoslaný prehliadaču ako odpoveď na požiadavka.<br />
===Controller===<br />
Controller definuje správanie aplikácie. Spracováva všetky vstupy a udalosti z používateľského rozhrania. Na ich základe volá príslušné procesy Modelu, mení stav a pod. Podľa udalostí prijatých od používateľa a podľa výsledkov akcií Modelu potom Controller vyberie vhodné View pre ďalšie zobrazenie.<br />
===Výhody vzoru MVC===<br />
* Jednoduché sprístupnenie pre rôzne druhy klientov. Pre zavedenie podpory ďalšieho klienta stačí nadefinovať len nové View.<br />
* Minimalizácia duplicity zdrojového kódu.<br />
* Rozdelenie vývojárskych úloh a&nbsp;samostatný vývoj jednotlivých častí.<br />
* Znovupoužiteľnosť kódu.<br />
* Vysoká komplexnosť návrhu a jednoduchšia rozšíriteľnosť aplikácie.<br />
<br />
<br />
==Optimálna štruktúra aplikácie s podporou režimu off-line==<br />
Webové aplikácie, ktoré sú postavené s podporou off-line režimu majú tendenciu byť štruktúrované tak, že ich dátová vrstva je izolovaná. Väčšina dnešných web aplikácií takto stavaných nie je. Pravdepodobne najvýhodnejšia štruktúra je zobrazená v schéme (Obr. 1.3). <br />
<br />
[[Súbor:bp_off_web_3.jpg|center|framed|Schéma web aplikácie podporujúcej režime off-line. Zdroj: [1]]]<br />
<br />
Hlavným krokom pre dosiahnutie vhodnej architektúry je vytvorenie lokálnej dátovej vrstvy, ktorá využíva lokálnu databázu. Podľa toho či ste on-line alebo off-line, sa dáta získavajú zo servera alebo z lokálneho úložiska. O prepínanie medzi dátovým vrstvami sa stará prepínač. Prepínač je časť kódu, ktorý rozhoduje odkiaľ sa budú dáta čerpať. <br />
<br />
==Funkcie dostupné v režime off-line==<br />
Nedá sa zabezpečiť, aby všetky dostupné funkcie web aplikácie boli prístupné aj v off-line režime. Je zbytočné kopírovať celú databázu zo servera, keď budeme využívať len časť. Preto je vhodné rozhodnúť, ktoré dáta budú uložené lokálne. Implementovaním logiky rozhodovania do našej aplikácie zabezpečíme, že určité dáta bude získavať z lokálneho úložiska a ďalšie zo servera.<br />
<br />
Niektoré dáta nemá zmysel ukladať na lokálny disk a&nbsp;je vhodnejšie ich získavať zo servera. Sú to predovšetkým:<br />
<br />
* dáta, ktoré sa menia často alebo dokonca v&nbsp;reálnom čase,<br />
* dáta, ktoré majú zmysel len v&nbsp;režime on-line ako instant messaging,<br />
* dáta, ktoré sú náročné na miesto na disku.<br />
<br />
Optimálne riešenie je používať lokálne úložisko čo najviac ako je to možné. Pretože je to obyčajne rýchlejšie ako pripojenie na vzdialený server. Ak chceme, aby aplikácia pracovala čo najviac s&nbsp;lokálnymi dátami, bude toto implementovanie náročnejšie. Preto už pri návrhu aplikácie musíme zvážiť, čo je pre nás výhodnejšie.<br />
<br />
<br />
==Forma off-line aplikácií==<br />
Typ aplikácie môže mať modálnu alebo nemodálnu formu. Modálne aplikácie obyčajne rozlišujú on-line a off-line mód indikáciou cez zmenu v používateľskom rozhraní. Používateľ sa podieľa na zmene stavu.<br />
Nemodálne aplikácie prechádzajú medzi on-line a off-line stavmi bez zmien v používateľskom rozhraní. Používateľ sa nemusí zúčastňovať na prepínaní stavov. Aplikácia to robí automaticky.<br />
<br />
<br />
===Modálne aplikácie===<br />
V&nbsp;modálnych aplikáciách, ak je aplikácia on-line, komunikuje so serverom. Ak je off-line, využíva lokálne zdroje. V&nbsp;prípade zmeny módov je nutná synchronizácia dát.<br />
<br />
Výhody:<br />
<br />
* Relatívne jednoduchá implementácia.<br />
Nevýhody:<br />
<br />
* Používateľ musí pamätať na prepínanie módov. Ak zabudne, nebude mať v&nbsp;off-line móde potrebné dáta alebo bude pracovať on-line &nbsp;bez podpory off-line úložiska.<br />
* Ak je internetové pripojenie prerušované, používateľ si musí zvoliť jedno z&nbsp;nastavení alebo si bude musieť neustále prepínať medzi módmi podľa stavu pripojenia.<br />
* Keďže lokálne zdroje nie sú vždy aktuálne, nemôžu byť pri pripojení na server využívané na zlepšenie podpory aplikácie.<br />
<br />
<br />
===Nemodálne aplikácie===<br />
V&nbsp;prípade nemodálnych aplikácií pracuje aplikácia s&nbsp;predpokladom off-line stavu alebo možnosti náhodnej straty pripojenia. Aplikácia využíva lokálne zdroje v&nbsp;maximálne možnej miere, a&nbsp;keď je server dosiahnuteľný, prebieha neustála synchronizácia dát. Tá prebieha taktiež pri prechode do on-line stavu.<br />
<br />
Výhody:<br />
<br />
* Používateľ sa nemusí starať o&nbsp;to,&nbsp;či je pripojený alebo v&nbsp;akom je stave jeho aplikácia<br />
(on-line/off-line).<br />
<br />
* Aplikácia pracuje plynulo aj v&nbsp;prípade prerušovaného pripojenia.<br />
* Keďže je lokálny zdroj aktualizovaný, môže byť využívaný na optimalizáciu serverového pripojenia.<br />
Nevýhody:<br />
<br />
* Náročná implementácia.<br />
* Musí sa dbať na to, aby proces synchronizácie nezabral príliš veľa zdrojov a&nbsp;nespôsobil spomalenie celej aplikácie.<br />
* Testovanie aplikácie ja náročnejšie, keďže logika synchronizácie sa deje na&nbsp;pozadí a&nbsp;nie ako odozva na&nbsp;špecifický krok používateľa.<br />
<br />
==Synchronizácia dát==<br />
Bez ohľadu na pripojenie alebo modálnu stratégiu dáta v&nbsp;lokálnej databáze vystupujú zo&nbsp;synchronizácie so serverovými dátami. Napríklad v&nbsp;týchto prípadoch:<br />
<br />
* Používateľ urobí zmeny v&nbsp;off-line stave.<br />
* Dáta na serveri sú zdieľané a&nbsp;môžu byť zmenené externými subjektmi.<br />
* Dáta prichádzajú z&nbsp;vonkajšieho zdroja (RSS).<br />
<br />
Proces odstraňovania týchto rozdielov tak, že dva zdroje sa stávajú totožnými, nazývame synchronizácia. Existuje mnoho prístupov k&nbsp;synchronizácii, ale&nbsp;žiadny nie je výhodný pre&nbsp;všetky situácie. Vybrané riešenie by malo byť čo najvýhodnejšie pre našu aplikáciu.<br />
<br />
Pre príklad sú uvádzané dve všeobecné synchronizačné stratégie.<br />
<br />
===Manuálna synchronizácia===<br />
Najjednoduchší spôsob synchronizácie je tzv. ''manuálna synchronizácia''. Manuálna preto, lebo používateľ sám volí čas synchronizácie. Môže byť implementovaná jednoducho nahraním všetkých starých dát na server a&nbsp;následným stiahnutím novej kópie dát zo serveru pred prechodom na off-line stav.<br />
<br />
Manuálna synchronizácia ma nasledovné požiadavky:<br />
<br />
* Objem dát dostatočne malý na stiahnutie v&nbsp;primeranom čase.<br />
* Používateľ sám stanovuje prechod do režimu off-line, väčšinou tlačidlom v&nbsp;používateľskom prostredí.<br />
<br />
Problémy tejto metódy a&nbsp;jej off-line módu:<br />
<br />
* Užívatelia nie vždy vedia okamžitý stav svojho pripojenia. Internetové pripojenie môže byť náhle odpojené alebo prerušované.<br />
* Užívatelia môžu zabudnúť synchronizovať dáta pred prechodom do stavu off-line.<br />
<br />
Manuálna synchronizácia môže byť na začiatok vhodným spôsobom synchronizácie, najmä kvôli relatívne jednoduchej implementácii. Bohužiaľ, vyžaduje uvedomelosť používateľa a&nbsp;jeho zapojenie do procesu synchronizácie.<br />
<br />
===Synchronizácia na pozadí===<br />
V prípade synchronizácie na pozadí aplikácia neustále synchronizuje dáta medzi lokálnym zdrojom a&nbsp;serverom. To môže byť uskutočňované opakovanými pokusmi pripájať sa na server alebo v&nbsp;lepšom prípade umožniť serveru presúvať dáta ku klientovi.<br />
<br />
Výhody synchronizácie na pozadí:<br />
<br />
* Dáta sú pripravené vždy, keď sa používateľ rozhodne pre prechod do režimu off-line alebo je náhodne odpojený.<br />
* Zlepšenie výkonu v&nbsp;prípade využívania pomalého internetového pripojenia.<br />
<br />
Nevýhody:<br />
<br />
* Nevýhodou je možnosť spomalenia pri kopírovaní dát na pozadí. Spomalenie sa dá minimalizovať využitím rôznych možností (Google Gears WorkerPool).<br />
<br />
[[Súbor:bp_off_web_4.jpg|center|framed|Architektúra web aplikácie so synchronizáciou na pozadí. Zdroj: [1]]]</div>Dusanhttp://www.kiwiki.info/index.php?title=Preh%C4%BEad_architekt%C3%BAry_PSoC&diff=5722Prehľad architektúry PSoC2010-06-23T10:58:50Z<p>Dusan: </p>
<hr />
<div>[[Category:Mikroprocesorové systémy]]<br />
__NOTOC__<br />
{{Draft}}<br />
'''Mikroprocesory PSoC''' <ref>http://www.cypress.com</ref> (Programmable System on Chip – Programovateľný systém na čipe) sa skladajú z konfigurovateľných blokov analógových obvodov a digitálnej logiky, ktoré sú vzájomne programovo prepojené. Uvedená architektúra umožňuje vytvárať zákaznícke konfigurácie mikroprocesora tak, aby boli splnené požiadavky potrebné na realizáciu jednotlivých aplikácií. Bloková schéma na Obr. 1.1 zobrazuje architektúru celej rodiny mikroprocesorov PSoC. <br />
<br />
== Vnútorná štruktúra PSoC ==<br />
<br />
Spoločnosť '''Cypress''' vyvinula niekoľko desiatok typov súčiastok typov PSoC. Líšia sa predovšetkým množstvom a druhom blokov, veľkosťou pamäti programu ([http://sk.wikipedia.org/wiki/FLASH FLASH]), pamäťou dát ([http://sk.wikipedia.org/wiki/Pam%C3%A4%C5%A5_s_priamym_pr%C3%ADstupom RAM]), veľkosťou a druhom puzdier a ďalšími parametrami. V závislosti na type obsahujú 4-16 digitálnych a 3-12 analógových blokov. <br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_struktura.png]]<br />
|-<br />
| align="center" | Obr. 1.1 Vnútorná štruktúra PSoC<br />
|}<br />
</center><br />
<br />
== M8C – procesorové jadro ==<br />
<br />
Na Obr. 2.1 sú zobrazené prvky architektúry jadra PSoC. Procesor je 8-bitový a dokáže spracovať až 4 milióny inštrukcií za sekundu.<br />
8-bitová architektúra podporuje použitie až 64 kilobajtov pamäti Flash, v ktorej je uložená užívateľská aplikácia. Flash pamäť je „in-circuit programmable“, takže PSoC je možné programovať aj potom, ako je zapojený do dosky plošných spojov. Flash je zároveň aj „in-application programmable“, čo znamená, že mikroprocesor je schopný dynamicky meniť svoju vlastnú pamäť. [http://sk.wikipedia.org/wiki/Procesor Procesor] je pripojený k viacerým digitálnym a analógovým blokom, ktoré poskytujú funkcionalitu a flexibilitu charakteristickú pre celú rodinu PSoC. <br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_JadroPSoC.png]]<br />
|-<br />
| align="center" | Obr. 2.1 Jadro PSoC<br />
|}<br />
</center><br />
<br />
=== Registre procesora M8C ===<br />
<br />
'''M8C''' je 8-bitový [http://sk.wikipedia.org/wiki/Mikroprocesor mikroprocesor] MIPS harvardskej architektúry s voliteľnou hodinovou frekvenciou od 93.7 kHz do 24 MHz. Má päť vnútorných [http://sk.wikipedia.org/wiki/Register_(procesor) registrov], ktoré sú využívané pri vykonávaní programu.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_registreprocesora.png]]<br />
|-<br />
| align="center" | Obr. 2.2 Registre procesora M8C<br />
|}<br />
</center><br />
<br />
=== Štruktúra pamäte M8C ===<br />
<br />
M8C má tri adresné priestory: [http://sk.wikipedia.org/wiki/ROM ROM], RAM a registre. K adresnému priestoru ROM pristupujeme cez jeho vlastné adresy a dátovú [http://sk.wikipedia.org/wiki/Zbernica#Zbernica_po.C4.8D.C3.ADta.C4.8Da zbernicu]. ROM zahŕňa SROM a Flash pamäte. V pamäti Flash je uložený firmvér zariadenia a je rozdelená do 64-bajtových blokov. Používateľ nemusí ošetrovať prechod programu na ďalšiu pamäťovú stránku, pretože M8C automaticky zvyšuje 16-bitový register PC pri každej inštrukcii presahujúcej hranice aktuálnej stránky. V pamäti SROM je uložený program využívaný na spúšťanie PSoC, kalibrovanie obvodov a vykonávanie operácií s pamäťou Flash. Funkcie zabezpečované SROM sú volané z programu uloženého v pamäti Flash alebo pomocou programátora. Adresný priestor registrov je využívaný na konfigurovanie programovateľných blokov mikroprocesora. Skladá sa z dvoch 256-bajtových blokov. Na prepínanie medzi blokmi sa nastavuje bit XIO v registri F. Ak je F nastavený, zvolí sa blok1, ak nie je nastavený, zvolí sa blok0.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_adresnypriestor.png]]<br />
|-<br />
| align="center" | Obr. 2.3 Adresný priestor<br />
|}<br />
</center><br />
<br />
=== Inštrukčné formáty ===<br />
<br />
M8C má spolu sedem inštrukčných formátov, ktoré používajú inštrukcie o dĺžkach jeden, dva a tri bajty. Všetky bajty inštrukcie sú vyvolávané z programovej pamäte Flash, za použitia adries a dátovej zbernice, ktoré sú nezávislé od adries a dátovej zbernice používaných pre registre a prístup do pamäte RAM. <br />
<br />
== Digitálne a analógové bloky PSoC ==<br />
<br />
'''Digitálne a analógové bloky sú moduly''' vytvorené z digitálnych a analógových prvkov, ktoré sú konfigurovateľné pre rôzne druhy operácií pomocou registrov špecifických pre každý blok.<br />
<br />
=== Digitálne bloky ===<br />
<br />
'''Digitálne bloky''' <ref>http://www.lubino.sk/rs/3/files/diplomka_-_ubo.pdf</ref> redukujú potrebu použitia ďalších externých obvodov pre požadovanú funkcionalitu pripravovaného zariadenia. Sú určené na spracovávanie a generovanie hlavne digitálneho signálu. Dajú sa programovať a variovať tak, aby poskytovali funkčnosť štandardných elektronických integrovaných obvodov ako napríklad počítadlo, šírkový generátor pulzov, RS-232, IrDA, SPI, I2C príjem a binárnych dát, generátory pseudonáhodných čísel a iné. Taktiež sa používajú na prípravu požadovaného taktovacieho signálu pre analógové bloky, prípadne na spracovanie signálov z analógových blokov (možné prepojenie cez vstupno-výstupné piny). Ich činnosť je nezávislá na behu programu mikroprocesora, avšak môže byť moderovaná programom pomocou [http://sk.wikipedia.org/wiki/Application_programming_interface API] funkcií.<br />
<br />
* PWMs (8 to 32 bit)<br />
* [http://www.cypress.com/?docID=19560 PWMs with Dead band (8 to 32 bit)] <br />
* [http://www.cypress.com/?docID=19121 Counters (8 to 32 bit)]<br />
* [http://www.cypress.com/?docID=19152 Timers (8 to 32 bit)]<br />
* [http://www.cypress.com/?docID=19130 UART 8 bit with selectable parity (up to 2)]<br />
* [http://www.cypress.com/?docID=19104 SPI slave and master (up to 2)]<br />
* [http://www.cypress.com/?docID=20823 I2C slave and multi-master (1 available as a System Resource)]<br />
* [http://www.cypress.com/?docID=16559 Cyclical Redundancy Checker/Generator (8 to 32 bit)]<br />
* [http://www.cypress.com/?docID=19131 IrDA (up to 2)]<br />
* [http://www.cypress.com/?docID=19082 Pseudo Random Sequence Generators (8 to 32 bit)]<br />
<br />
=== Analógové bloky ===<br />
<br />
'''Analógové bloky''' <ref>http://www.lubino.sk/rs/3/files/diplomka_-_ubo.pdf</ref> sú taktiež zdrojom prostriedkov pre aplikácie, avšak orientované na spracovávanie a generovanie analógových signálov. Základom analógových blokov sú obvody spínače, prepínače, operačné zosilňovače a spínané kondenzátory. Každý analógový obvod ma viac potenciálne použiteľných vstupov a výstupov. K dispozícii sú vždy tieto tri výstupy:<br />
* analógová výstupná zbernica (ABUS)<br />
* porovnávacia zbernica (CBUS)<br />
* výstupná zbernica (OUT)<br />
<br />
Zoznam analógových blokov:<br />
<br />
* Analog-to-digital converters (up to 4, with 6- to 14-bit resolution, selectable as Incremental, Delta Sigma, and SAR)<br />
* Filters (2, 4, 6, and 8 pole band-pass, low-pass, and notch)<br />
* Amplifiers (up to 4, with selectable gain to 48x)<br />
* [http://www.cypress.com/?docID=16708 Instrumentation amplifiers (up to 2, with selectable gain to 93x)]<br />
* Comparators (up to 4, with 16 selectable thresholds)<br />
* DACs (up to 4, with 6- to 9-bit resolution)<br />
* Multiplying DACs (up to 4, with 6- to 9-bit resolution)<br />
* High current output drivers (four with 30 mA drive as a Core Resource)<br />
* 1.3V reference (as a System Resource)<br />
* [http://www.cypress.com/?docID=17257 DTMF Dialer]<br />
* Modulators<br />
* Correlators<br />
* Peak detectors<br />
* Many other topologies possible<br />
<br />
Analógová výstupná zbernica je vodičom analógového signálu. Túto zbernicu spolu zdieľajú analógové bloky v jednom stĺpci. Keďže je takýchto stĺpcov viac, je viac aj zberníc tohoto typu. Vo väčšine modelov mikroprocesora sú 4. K tejto zbernici je pripojený analógový výstupný zásobník (Analog Output Buffer), ktorý v závislosti od nastavenia prepojí zbernicu s nastaveným analógovým výstupným pinom. Porovnávacia zbernica je digitálnou zbernicou a taktiež ju zdieľajú všetky analógové bloky v jednom stĺpci. Túto zbernicu nie je možné pripojiť na vstupno-výstupný pin, ale je možné pripojiť ju na vstup niektorého digitálneho bloku. Podobne aj výstupná zbernica je zdieľaná vrámci jedného stĺpca.<br />
<br />
<references/></div>Dusanhttp://www.kiwiki.info/index.php?title=Preh%C4%BEad_architekt%C3%BAry_PSoC&diff=5718Prehľad architektúry PSoC2010-06-23T10:54:25Z<p>Dusan: </p>
<hr />
<div>[[Category:Mikroprocesorové systémy]]<br />
__NOTOC__<br />
{{Draft}}<br />
'''Mikroprocesory PSoC''' <ref>http://www.cypress.com</ref> (Programmable System on Chip – Programovateľný systém na čipe) sa skladajú z konfigurovateľných blokov analógových obvodov a digitálnej logiky, ktoré sú vzájomne programovo prepojené. Uvedená architektúra umožňuje vytvárať zákaznícke konfigurácie mikroprocesora tak, aby boli splnené požiadavky potrebné na realizáciu jednotlivých aplikácií. Bloková schéma na Obr. 1.1 zobrazuje architektúru celej rodiny mikroprocesorov PSoC. <br />
<br />
== Vnútorná štruktúra PSoC ==<br />
<br />
Spoločnosť '''Cypress''' vyvinula niekoľko desiatok typov súčiastok typov PSoC. Líšia sa predovšetkým množstvom a druhom blokov, veľkosťou pamäti programu ([http://sk.wikipedia.org/wiki/FLASH FLASH]), pamäťou dát ([http://sk.wikipedia.org/wiki/Pam%C3%A4%C5%A5_s_priamym_pr%C3%ADstupom RAM]), veľkosťou a druhom puzdier a ďalšími parametrami. V závislosti na type obsahujú 4-16 digitálnych a 3-12 analógových blokov. <br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_struktura.png]]<br />
|-<br />
| align="center" | Obr. 1.1 Vnútorná štruktúra PSoC<br />
|}<br />
</center><br />
<br />
== M8C – procesorové jadro ==<br />
<br />
Na Obr. 2.1 sú zobrazené prvky architektúry jadra PSoC. Procesor je 8-bitový a dokáže spracovať až 4 milióny inštrukcií za sekundu.<br />
8-bitová architektúra podporuje použitie až 64 kilobajtov pamäti Flash, v ktorej je uložená užívateľská aplikácia. Flash pamäť je „in-circuit programmable“, takže PSoC je možné programovať aj potom, ako je zapojený do dosky plošných spojov. Flash je zároveň aj „in-application programmable“, čo znamená, že mikroprocesor je schopný dynamicky meniť svoju vlastnú pamäť. [http://sk.wikipedia.org/wiki/Procesor Procesor] je pripojený k viacerým digitálnym a analógovým blokom, ktoré poskytujú funkcionalitu a flexibilitu charakteristickú pre celú rodinu PSoC. <br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_JadroPSoC.png]]<br />
|-<br />
| align="center" | Obr. 2.1 Jadro PSoC<br />
|}<br />
</center><br />
<br />
=== Registre procesora M8C ===<br />
<br />
'''M8C''' je 8-bitový [http://sk.wikipedia.org/wiki/Mikroprocesor mikroprocesor] MIPS harvardskej architektúry s voliteľnou hodinovou frekvenciou od 93.7 kHz do 24 MHz. Má päť vnútorných [http://sk.wikipedia.org/wiki/Register_(procesor) registrov], ktoré sú využívané pri vykonávaní programu.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_registreprocesora.png]]<br />
|-<br />
| align="center" | Obr. 2.2 Registre procesora M8C<br />
|}<br />
</center><br />
<br />
=== Štruktúra pamäte M8C ===<br />
<br />
M8C má tri adresné priestory: [http://sk.wikipedia.org/wiki/ROM ROM], RAM a registre. K adresnému priestoru ROM pristupujeme cez jeho vlastné adresy a dátovú [http://sk.wikipedia.org/wiki/Zbernica#Zbernica_po.C4.8D.C3.ADta.C4.8Da zbernicu]. ROM zahŕňa SROM a Flash pamäte. V pamäti Flash je uložený firmvér zariadenia a je rozdelená do 64-bajtových blokov. Používateľ nemusí ošetrovať prechod programu na ďalšiu pamäťovú stránku, pretože M8C automaticky zvyšuje 16-bitový register PC pri každej inštrukcii presahujúcej hranice aktuálnej stránky. V pamäti SROM je uložený program využívaný na spúšťanie PSoC, kalibrovanie obvodov a vykonávanie operácií s pamäťou Flash. Funkcie zabezpečované SROM sú volané z programu uloženého v pamäti Flash alebo pomocou programátora. Adresný priestor registrov je využívaný na konfigurovanie programovateľných blokov mikroprocesora. Skladá sa z dvoch 256-bajtových blokov. Na prepínanie medzi blokmi sa nastavuje bit XIO v registri F. Ak je F nastavený, zvolí sa blok1, ak nie je nastavený, zvolí sa blok0.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_adresnypriestor.png]]<br />
|-<br />
| align="center" | Obr. 2.3 Adresný priestor<br />
|}<br />
</center><br />
<br />
=== Inštrukčné formáty ===<br />
<br />
M8C má spolu sedem inštrukčných formátov, ktoré používajú inštrukcie o dĺžkach jeden, dva a tri bajty. Všetky bajty inštrukcie sú vyvolávané z programovej pamäte Flash, za použitia adries a dátovej zbernice, ktoré sú nezávislé od adries a dátovej zbernice používaných pre registre a prístup do pamäte RAM. <br />
<br />
== Digitálne a analógové bloky PSoC ==<br />
<br />
'''Digitálne a analógové bloky sú moduly''' vytvorené z digitálnych a analógových prvkov, ktoré sú konfigurovateľné pre rôzne druhy operácií pomocou registrov špecifických pre každý blok.<br />
<br />
=== Digitálne bloky ===<br />
<br />
'''Digitálne bloky''' <ref>http://www.lubino.sk/rs/3/files/diplomka_-_ubo.pdf</ref> redukujú potrebu použitia ďalších externých obvodov pre požadovanú funkcionalitu pripravovaného zariadenia. Sú určené na spracovávanie a generovanie hlavne digitálneho signálu. Dajú sa programovať a variovať tak, aby poskytovali funkčnosť štandardných elektronických integrovaných obvodov ako napríklad počítadlo, šírkový generátor pulzov, RS-232, IrDA, SPI, I2C príjem a binárnych dát, generátory pseudonáhodných čísel a iné. Taktiež sa používajú na prípravu požadovaného taktovacieho signálu pre analógové bloky, prípadne na spracovanie signálov z analógových blokov (možné prepojenie cez vstupno-výstupné piny). Ich činnosť je nezávislá na behu programu mikroprocesora, avšak môže byť moderovaná programom pomocou [http://sk.wikipedia.org/wiki/Application_programming_interface API] funkcií.<br />
<br />
* PWMs (8 to 32 bit)<br />
* [http://www.cypress.com/?docID=19560 PWMs with Dead band (8 to 32 bit)] <br />
* [http://www.cypress.com/?docID=19121 Counters (8 to 32 bit)]<br />
* [http://www.cypress.com/?docID=19152 Timers (8 to 32 bit)]<br />
* [http://www.cypress.com/?docID=19130 UART 8 bit with selectable parity (up to 2)]<br />
* [http://www.cypress.com/?docID=19104 SPI slave and master (up to 2)]<br />
* [http://www.cypress.com/?docID=20823 I2C slave and multi-master (1 available as a System Resource)]<br />
* [http://www.cypress.com/?docID=16559 Cyclical Redundancy Checker/Generator (8 to 32 bit)]<br />
* [http://www.cypress.com/?docID=19131 IrDA (up to 2)]<br />
* [http://www.cypress.com/?docID=19082 Pseudo Random Sequence Generators (8 to 32 bit)]<br />
<br />
=== Analógové bloky ===<br />
<br />
'''Analógové bloky''' <ref>http://www.lubino.sk/rs/3/files/diplomka_-_ubo.pdf</ref> sú taktiež zdrojom prostriedkov pre aplikácie, avšak orientované na spracovávanie a generovanie analógových signálov. Základom analógových blokov sú obvody spínače, prepínače, operačné zosilňovače a spínané kondenzátory. Každý analógový obvod ma viac potenciálne použiteľných vstupov a výstupov. K dispozícii sú vždy tieto tri výstupy:<br />
* analógová výstupná zbernica (ABUS)<br />
* porovnávacia zbernica (CBUS)<br />
* výstupná zbernica (OUT)<br />
<br />
Zoznam analógových blokov:<br />
<br />
* Analog-to-digital converters (up to 4, with 6- to 14-bit resolution, selectable as Incremental, Delta Sigma, and SAR)<br />
* Filters (2, 4, 6, and 8 pole band-pass, low-pass, and notch)<br />
* Amplifiers (up to 4, with selectable gain to 48x)<br />
* Instrumentation amplifiers (up to 2, with selectable gain to 93x)<br />
* Comparators (up to 4, with 16 selectable thresholds)<br />
* DACs (up to 4, with 6- to 9-bit resolution)<br />
* Multiplying DACs (up to 4, with 6- to 9-bit resolution)<br />
* High current output drivers (four with 30 mA drive as a Core Resource)<br />
* 1.3V reference (as a System Resource)<br />
* DTMF Dialer<br />
* Modulators<br />
* Correlators<br />
* Peak detectors<br />
* Many other topologies possible<br />
<br />
Analógová výstupná zbernica je vodičom analógového signálu. Túto zbernicu spolu zdieľajú analógové bloky v jednom stĺpci. Keďže je takýchto stĺpcov viac, je viac aj zberníc tohoto typu. Vo väčšine modelov mikroprocesora sú 4. K tejto zbernici je pripojený analógový výstupný zásobník (Analog Output Buffer), ktorý v závislosti od nastavenia prepojí zbernicu s nastaveným analógovým výstupným pinom. Porovnávacia zbernica je digitálnou zbernicou a taktiež ju zdieľajú všetky analógové bloky v jednom stĺpci. Túto zbernicu nie je možné pripojiť na vstupno-výstupný pin, ale je možné pripojiť ju na vstup niektorého digitálneho bloku. Podobne aj výstupná zbernica je zdieľaná vrámci jedného stĺpca.<br />
<br />
<references/></div>Dusanhttp://www.kiwiki.info/index.php?title=Diskusia:Elektrick%C3%A9_a_mechanick%C3%A9_parametre_architekt%C3%BAry_PSoC&diff=5654Diskusia:Elektrické a mechanické parametre architektúry PSoC2010-06-23T08:04:09Z<p>Dusan: Vytvorená stránka „neviem čo doplniť“</p>
<hr />
<div>neviem čo doplniť</div>Dusanhttp://www.kiwiki.info/index.php?title=Diskusia:Preh%C4%BEad_architekt%C3%BAry_PSoC&diff=5650Diskusia:Prehľad architektúry PSoC2010-06-23T08:00:27Z<p>Dusan: </p>
<hr />
<div>Zdravím, v práci som použil časti textu z práce vašeho študenta z UK Luboša Strapka(lubino@gmail.com), ktorého som kontaktoval.<br />
Dostal som od neho povolenie a napísal, že by chcel na Vás kontakt.</div>Dusanhttp://www.kiwiki.info/index.php?title=Diskusia:Preh%C4%BEad_architekt%C3%BAry_PSoC&diff=5648Diskusia:Prehľad architektúry PSoC2010-06-23T07:57:48Z<p>Dusan: Vytvorená stránka „Zdravím, v práci som použil časti textu z práce vašeho študenta z KU Luboša Strapka(lubino@gmail.com), ktorého som kontaktoval. Dostal som od neho povolenie a nap…“</p>
<hr />
<div>Zdravím, v práci som použil časti textu z práce vašeho študenta z KU Luboša Strapka(lubino@gmail.com), ktorého som kontaktoval.<br />
Dostal som od neho povolenie a napísal, že by chcel na Vás kontakt.</div>Dusanhttp://www.kiwiki.info/index.php?title=U%C5%BE%C3%ADvate%C4%BE:Dusan&diff=5509Užívateľ:Dusan2010-06-22T19:30:34Z<p>Dusan: </p>
<hr />
<div>[[Image:Well-formed-xml-tags.jpg|right|top]]<br />
<properties><br />
meno=Dušan Pagáč<br />
pôsobnosť=študent, teda aspoň to vravia<br />
čo viem= vyhovárať sa<br />
čo neviem= ?<br />
na kiwiki som= varený pečený<br />
kontakt=pagacdusan85[zavinac]gmail[bodka]com<br />
na kiwiki poradím pri= vkladaní bakalárskych prác<br />
</properties><br />
<br />
<br />
Volám sa Dušan Pagáč a tretím rokom sa snažím študovať ME na FM.<br />
Mojou úlohou na ''http://kiwiki.fmtnuni.sk'' je vás sledovať.<br />
<br />
Upozorňujem Vás, že na tej foto nie som ja takže mi nepíšte, že chcete telefóne číslo.</div>Dusanhttp://www.kiwiki.info/index.php?title=U%C5%BE%C3%ADvate%C4%BE:Dusan&diff=5507Užívateľ:Dusan2010-06-22T19:28:07Z<p>Dusan: Vytvorená stránka „top <properties> meno=Dušan Pagáč pôsobnosť=študent, teda aspoň to vravia čo viem= vyhovárať sa čo neviem= ? na kiwiki s…“</p>
<hr />
<div>[[Image:Well-formed-xml-tags.jpg|right|top]]<br />
<properties><br />
meno=Dušan Pagáč<br />
pôsobnosť=študent, teda aspoň to vravia<br />
čo viem= vyhovárať sa<br />
čo neviem= ?<br />
na kiwiki som= varený pečený<br />
kontakt=pagacdusan85[zavinac]gmail[bodka]com<br />
na kiwiki poradím pri= vkladaní bakalárskych prác<br />
</properties><br />
<br />
<br />
Volám sa Dušan Pagáč a tretím rokom sa snažím študovať ME na FM.<br />
<br />
Mojou úlohou na ''http://kiwiki.fmtnuni.sk'' je vás sledovať.</div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Well-formed-xml-tags.jpg&diff=5506Súbor:Well-formed-xml-tags.jpg2010-06-22T19:24:32Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=V%C3%BDvojov%C3%A9_prostredie_pre_syst%C3%A9my_PSoC&diff=5503Vývojové prostredie pre systémy PSoC2010-06-22T18:40:48Z<p>Dusan: </p>
<hr />
<div>K vytváraniu aplikácie, resp. programu, pro PSoC je z programátorského hľadiska najlepšie použiť k tomu firmou Cypress určené vývojové prostredie PSoC Designer<ref>http://www.cypress.com</ref>. Slúži na návrh správneho nastavenia všetkých registrov, zberníc<br />
a blokov ako aj naprogramovanie algoritmu pre mikrokontrolér. Je to grafické prostredie, kde je možné skúšať jednotlivé varianty, ktoré<br />
sa dajú z PSoC blokov zapojiť. Obsahuje množstvo modulov aj s dokumentáciou a potrebným rozhraním pre nastavovanie ich jednotlivých parametrov. PSoC Designer obsahuje aj podprogram, pre kontrolu korektného zapojenia jednotlivých modulov a rovno počas navrhovania vnútornej štruktúry môže užívateľ vidieť jednotlivé možnosti zapojenia. Typickým digitálnym užívateľským modulom je UART a typickým analógovým užívateľským modulom je napríklad 12-bitový ADC. <br />
<br />
PSoC Designer:<br />
* Návrh na úrovni chipu<br />
** Návrh architektúry (bloky a ich vlastnosti)<br />
** Assembler<br />
** C Kompilátor<br />
** Programátor<br />
** ICE (In Circuit Emulator) Debuger<br />
* Návrh na úrovni systému<br />
** Grafické programovanie<br />
** Definovanie vlastností a vzťahov medzi vstupmi a výstupmi<br />
<br />
HW nároky:<br />
* PC (1GHz, 512MB RAM), OS Windows<br />
* Programátor<br />
* ICE pre náročnejšiu prácu<br />
<br />
OS Linux:<br />
* Virtual Box + Win XP, zdielané adresáre s OS<br />
* PSoC Designer je kompletne funkčný vrátane USB programátora, Debuggera ICE box atď.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_pdchip.png]]<br />
|-<br />
| align="center" | Obr. 1.1 PSoC Designer - Chip Level design<br />
|}<br />
</center><br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_pdsl.png]]<br />
|-<br />
| align="center" | Obr. 1.2 PSoC Designer - System Level Design<br />
|}<br />
</center><br />
<br />
<br />
<references/></div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Pagac_pdsl.png&diff=5502Súbor:Pagac pdsl.png2010-06-22T18:40:09Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=S%C3%BAbor:Pagac_pdchip.png&diff=5501Súbor:Pagac pdchip.png2010-06-22T18:37:57Z<p>Dusan: </p>
<hr />
<div></div>Dusanhttp://www.kiwiki.info/index.php?title=V%C3%BDvojov%C3%A9_prostredie_pre_syst%C3%A9my_PSoC&diff=5500Vývojové prostredie pre systémy PSoC2010-06-22T18:33:59Z<p>Dusan: </p>
<hr />
<div>K vytváraniu aplikácie, resp. programu, pro PSoC je z programátorského hľadiska najlepšie použiť k tomu firmou Cypress určené vývojové prostredie PSoC Designer<ref>http://www.cypress.com</ref>. Slúži na návrh správneho nastavenia všetkých registrov, zberníc<br />
a blokov ako aj naprogramovanie algoritmu pre mikrokontrolér. Je to grafické prostredie, kde je možné skúšať jednotlivé varianty, ktoré<br />
sa dajú z PSoC blokov zapojiť. Obsahuje množstvo modulov aj s dokumentáciou a potrebným rozhraním pre nastavovanie ich jednotlivých parametrov. PSoC Designer obsahuje aj podprogram, pre kontrolu korektného zapojenia jednotlivých modulov a rovno počas navrhovania vnútornej štruktúry môže užívateľ vidieť jednotlivé možnosti zapojenia. Typickým digitálnym užívateľským modulom je UART a typickým analógovým užívateľským modulom je napríklad 12-bitový ADC. <br />
<br />
PSoC Designer:<br />
* Návrh na úrovni chipu<br />
** Návrh architektúry (bloky a ich vlastnosti)<br />
** Assembler<br />
** C Kompilátor<br />
** Programátor<br />
** ICE (In Circuit Emulator) Debuger<br />
* Návrh na úrovni systému<br />
** Grafické programovanie<br />
** Definovanie vlastností a vzťahov medzi vstupmi a výstupmi<br />
<br />
HW nároky:<br />
* PC (1GHz, 512MB RAM), OS Windows<br />
* Programátor<br />
* ICE pre náročnejšiu prácu<br />
<br />
OS Linux:<br />
* Virtual Box + Win XP, zdielané adresáre s OS<br />
* PSoC Designer je kompletne funkčný vrátane USB programátora, Debuggera ICE box atď.<br />
<br />
<br />
<br />
<br />
<br />
<references/></div>Dusanhttp://www.kiwiki.info/index.php?title=Preh%C4%BEad_architekt%C3%BAry_PSoC&diff=5499Prehľad architektúry PSoC2010-06-22T18:15:10Z<p>Dusan: </p>
<hr />
<div>'''Mikroprocesory PSoC''' <ref>http://www.cypress.com</ref> (Programmable System on Chip – Programovateľný systém na čipe) sa skladajú z konfigurovateľných blokov analógových obvodov a digitálnej logiky, ktoré sú vzájomne programovo prepojené. Uvedená architektúra umožňuje vytvárať zákaznícke konfigurácie mikroprocesora tak, aby boli splnené požiadavky potrebné na realizáciu jednotlivých aplikácií. Bloková schéma na Obr. 1.1 zobrazuje architektúru celej rodiny mikroprocesorov PSoC. <br />
<br />
== Vnútorná štruktúra PSoC ==<br />
<br />
Spoločnosť '''Cypress''' vyvinula niekoľko desiatok typov súčiastok typov PSoC. Líšia sa predovšetkým množstvom a druhom blokov, veľkosťou pamäti programu ([http://sk.wikipedia.org/wiki/FLASH FLASH]), pamäťou dát ([http://sk.wikipedia.org/wiki/Pam%C3%A4%C5%A5_s_priamym_pr%C3%ADstupom RAM]), veľkosťou a druhom puzdier a ďalšími parametrami. V závislosti na type obsahujú 4-16 digitálnych a 3-12 analógových blokov. <br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_struktura.png]]<br />
|-<br />
| align="center" | Obr. 1.1 Vnútorná štruktúra PSoC<br />
|}<br />
</center><br />
<br />
== M8C – procesorové jadro ==<br />
<br />
Na Obr. 2.1 sú zobrazené prvky architektúry jadra PSoC. Procesor je 8-bitový a dokáže spracovať až 4 milióny inštrukcií za sekundu.<br />
8-bitová architektúra podporuje použitie až 64 kilobajtov pamäti Flash, v ktorej je uložená užívateľská aplikácia. Flash pamäť je „in-circuit programmable“, takže PSoC je možné programovať aj potom, ako je zapojený do dosky plošných spojov. Flash je zároveň aj „in-application programmable“, čo znamená, že mikroprocesor je schopný dynamicky meniť svoju vlastnú pamäť. [http://sk.wikipedia.org/wiki/Procesor Procesor] je pripojený k viacerým digitálnym a analógovým blokom, ktoré poskytujú funkcionalitu a flexibilitu charakteristickú pre celú rodinu PSoC. <br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_JadroPSoC.png]]<br />
|-<br />
| align="center" | Obr. 2.1 Jadro PSoC<br />
|}<br />
</center><br />
<br />
=== Registre procesora M8C ===<br />
<br />
'''M8C''' je 8-bitový [http://sk.wikipedia.org/wiki/Mikroprocesor mikroprocesor] MIPS harvardskej architektúry s voliteľnou hodinovou frekvenciou od 93.7 kHz do 24 MHz. Má päť vnútorných [http://sk.wikipedia.org/wiki/Register_(procesor) registrov], ktoré sú využívané pri vykonávaní programu.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_registreprocesora.png]]<br />
|-<br />
| align="center" | Obr. 2.2 Registre procesora M8C<br />
|}<br />
</center><br />
<br />
=== Štruktúra pamäte M8C ===<br />
<br />
M8C má tri adresné priestory: [http://sk.wikipedia.org/wiki/ROM ROM], RAM a registre. K adresnému priestoru ROM pristupujeme cez jeho vlastné adresy a dátovú [http://sk.wikipedia.org/wiki/Zbernica#Zbernica_po.C4.8D.C3.ADta.C4.8Da zbernicu]. ROM zahŕňa SROM a Flash pamäte. V pamäti Flash je uložený firmvér zariadenia a je rozdelená do 64-bajtových blokov. Používateľ nemusí ošetrovať prechod programu na ďalšiu pamäťovú stránku, pretože M8C automaticky zvyšuje 16-bitový register PC pri každej inštrukcii presahujúcej hranice aktuálnej stránky. V pamäti SROM je uložený program využívaný na spúšťanie PSoC, kalibrovanie obvodov a vykonávanie operácií s pamäťou Flash. Funkcie zabezpečované SROM sú volané z programu uloženého v pamäti Flash alebo pomocou programátora. Adresný priestor registrov je využívaný na konfigurovanie programovateľných blokov mikroprocesora. Skladá sa z dvoch 256-bajtových blokov. Na prepínanie medzi blokmi sa nastavuje bit XIO v registri F. Ak je F nastavený, zvolí sa blok1, ak nie je nastavený, zvolí sa blok0.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_adresnypriestor.png]]<br />
|-<br />
| align="center" | Obr. 2.3 Adresný priestor<br />
|}<br />
</center><br />
<br />
=== Inštrukčné formáty ===<br />
<br />
M8C má spolu sedem inštrukčných formátov, ktoré používajú inštrukcie o dĺžkach jeden, dva a tri bajty. Všetky bajty inštrukcie sú vyvolávané z programovej pamäte Flash, za použitia adries a dátovej zbernice, ktoré sú nezávislé od adries a dátovej zbernice používaných pre registre a prístup do pamäte RAM. <br />
<br />
== Digitálne a analógové bloky PSoC ==<br />
<br />
'''Digitálne a analógové bloky sú moduly''' vytvorené z digitálnych a analógových prvkov, ktoré sú konfigurovateľné pre rôzne druhy operácií pomocou registrov špecifických pre každý blok.<br />
<br />
=== Digitálne bloky ===<br />
<br />
'''Digitálne bloky''' <ref>http://www.lubino.sk/rs/3/files/diplomka_-_ubo.pdf</ref> redukujú potrebu použitia ďalších externých obvodov pre požadovanú funkcionalitu pripravovaného zariadenia. Sú určené na spracovávanie a generovanie hlavne digitálneho signálu. Dajú sa programovať a variovať tak, aby poskytovali funkčnosť štandardných elektronických integrovaných obvodov ako napríklad počítadlo, šírkový generátor pulzov, RS-232, IrDA, SPI, I2C príjem a binárnych dát, generátory pseudonáhodných čísel a iné. Taktiež sa používajú na prípravu požadovaného taktovacieho signálu pre analógové bloky, prípadne na spracovanie signálov z analógových blokov (možné prepojenie cez vstupno-výstupné piny). Ich činnosť je nezávislá na behu programu mikroprocesora, avšak môže byť moderovaná programom pomocou [http://sk.wikipedia.org/wiki/Application_programming_interface API] funkcií.<br />
<br />
=== Analógové bloky ===<br />
<br />
'''Analógové bloky''' <ref>http://www.lubino.sk/rs/3/files/diplomka_-_ubo.pdf</ref> sú taktiež zdrojom prostriedkov pre aplikácie, avšak orientované na spracovávanie a generovanie analógových signálov. Základom analógových blokov sú obvody spínače, prepínače, operačné zosilňovače a spínané kondenzátory. Každý analógový obvod ma viac potenciálne použiteľných vstupov a výstupov. K dispozícii sú vždy tieto tri výstupy:<br />
* analógová výstupná zbernica (ABUS)<br />
* porovnávacia zbernica (CBUS)<br />
* výstupná zbernica (OUT)<br />
<br />
Analógová výstupná zbernica je vodičom analógového signálu. Túto zbernicu spolu zdieľajú analógové bloky v jednom stĺpci. Keďže je takýchto stĺpcov viac, je viac aj zberníc tohoto typu. Vo väčšine modelov mikroprocesora sú 4. K tejto zbernici je pripojený analógový výstupný zásobník (Analog Output Buffer), ktorý v závislosti od nastavenia prepojí zbernicu s nastaveným analógovým výstupným pinom. Porovnávacia zbernica je digitálnou zbernicou a taktiež ju zdieľajú všetky analógové bloky v jednom stĺpci. Túto zbernicu nie je možné pripojiť na vstupno-výstupný pin, ale je možné pripojiť ju na vstup niektorého digitálneho bloku. Podobne aj výstupná zbernica je zdieľaná vrámci jedného stĺpca.<br />
<br />
<references/></div>Dusanhttp://www.kiwiki.info/index.php?title=Preh%C4%BEad_architekt%C3%BAry_PSoC&diff=5497Prehľad architektúry PSoC2010-06-22T18:07:39Z<p>Dusan: </p>
<hr />
<div>'''Mikroprocesory PSoC''' <ref>http://www.cypress.com</ref> (Programmable System on Chip – Programovateľný systém na čipe) sa skladajú z konfigurovateľných blokov analógových obvodov a digitálnej logiky, ktoré sú vzájomne programovo prepojené. Uvedená architektúra umožňuje vytvárať zákaznícke konfigurácie mikroprocesora tak, aby boli splnené požiadavky potrebné na realizáciu jednotlivých aplikácií. Bloková schéma na Obr. 1.1 zobrazuje architektúru celej rodiny mikroprocesorov PSoC. <br />
<br />
== Vnútorná štruktúra PSoC ==<br />
<br />
Spoločnosť '''Cypress''' vyvinula niekoľko desiatok typov súčiastok typov PSoC. Líšia sa predovšetkým množstvom a druhom blokov, veľkosťou pamäti programu ([http://sk.wikipedia.org/wiki/FLASH FLASH]), pamäťou dát ([http://sk.wikipedia.org/wiki/Pam%C3%A4%C5%A5_s_priamym_pr%C3%ADstupom RAM]), veľkosťou a druhom puzdier a ďalšími parametrami. V závislosti na type obsahujú 4-16 digitálnych a 3-12 analógových blokov. <br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_struktura.png]]<br />
|-<br />
| align="center" | Obr. 1.1 Vnútorná štruktúra PSoC<br />
|}<br />
</center><br />
<br />
== M8C – procesorové jadro ==<br />
<br />
Na Obr. 2.1 sú zobrazené prvky architektúry jadra PSoC. Procesor je 8-bitový a dokáže spracovať až 4 milióny inštrukcií za sekundu.<br />
8-bitová architektúra podporuje použitie až 64 kilobajtov pamäti Flash, v ktorej je uložená užívateľská aplikácia. Flash pamäť je „in-circuit programmable“, takže PSoC je možné programovať aj potom, ako je zapojený do dosky plošných spojov. Flash je zároveň aj „in-application programmable“, čo znamená, že mikroprocesor je schopný dynamicky meniť svoju vlastnú pamäť. [http://sk.wikipedia.org/wiki/Procesor Procesor] je pripojený k viacerým digitálnym a analógovým blokom, ktoré poskytujú funkcionalitu a flexibilitu charakteristickú pre celú rodinu PSoC. <br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_JadroPSoC.png]]<br />
|-<br />
| align="center" | Obr. 2.1 Jadro PSoC<br />
|}<br />
</center><br />
<br />
=== Registre procesora M8C ===<br />
<br />
'''M8C''' je 8-bitový [http://sk.wikipedia.org/wiki/Mikroprocesor mikroprocesor] MIPS harvardskej architektúry s voliteľnou hodinovou frekvenciou od 93.7 kHz do 24 MHz. Má päť vnútorných [http://sk.wikipedia.org/wiki/Register_(procesor) registrov], ktoré sú využívané pri vykonávaní programu.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_registreprocesora.png]]<br />
|-<br />
| align="center" | Obr. 2.2 Registre procesora M8C<br />
|}<br />
</center><br />
<br />
=== Štruktúra pamäte M8C ===<br />
<br />
M8C má tri adresné priestory: [http://sk.wikipedia.org/wiki/ROM ROM], RAM a registre. K adresnému priestoru ROM pristupujeme cez jeho vlastné adresy a dátovú [http://sk.wikipedia.org/wiki/Zbernica#Zbernica_po.C4.8D.C3.ADta.C4.8Da zbernicu]. ROM zahŕňa SROM a Flash pamäte. V pamäti Flash je uložený firmvér zariadenia a je rozdelená do 64-bajtových blokov. Používateľ nemusí ošetrovať prechod programu na ďalšiu pamäťovú stránku, pretože M8C automaticky zvyšuje 16-bitový register PC pri každej inštrukcii presahujúcej hranice aktuálnej stránky. V pamäti SROM je uložený program využívaný na spúšťanie PSoC, kalibrovanie obvodov a vykonávanie operácií s pamäťou Flash. Funkcie zabezpečované SROM sú volané z programu uloženého v pamäti Flash alebo pomocou programátora. Adresný priestor registrov je využívaný na konfigurovanie programovateľných blokov mikroprocesora. Skladá sa z dvoch 256-bajtových blokov. Na prepínanie medzi blokmi sa nastavuje bit XIO v registri F. Ak je F nastavený, zvolí sa blok1, ak nie je nastavený, zvolí sa blok0.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_adresnypriestor.png]]<br />
|-<br />
| align="center" | Obr. 2.3 Adresný priestor<br />
|}<br />
</center><br />
<br />
=== Inštrukčné formáty ===<br />
<br />
M8C má spolu sedem inštrukčných formátov, ktoré používajú inštrukcie o dĺžkach jeden, dva a tri bajty. Všetky bajty inštrukcie sú vyvolávané z programovej pamäte Flash, za použitia adries a dátovej zbernice, ktoré sú nezávislé od adries a dátovej zbernice používaných pre registre a prístup do pamäte RAM. <br />
<br />
== Digitálne a analógové bloky PSoC ==<br />
<br />
'''Digitálne a analógové bloky sú moduly''' vytvorené z digitálnych a analógových prvkov, ktoré sú konfigurovateľné pre rôzne druhy operácií pomocou registrov špecifických pre každý blok.<br />
<br />
=== Digitálne bloky ===<br />
<br />
'''Digitálne bloky''' <ref>http://www.lubino.sk/rs/3/files/diplomka_-_ubo.pdf</ref> redukujú potrebu použitia ďalších externých obvodov pre požadovanú funkcionalitu pripravovaného zariadenia. Sú určené na spracovávanie a generovanie hlavne digitálneho signálu. Dajú sa programovať a variovať tak, aby poskytovali funkčnosť štandardných elektronických integrovaných obvodov ako napríklad počítadlo, šírkový generátor pulzov, RS-232, IrDA, SPI, I2C príjem a binárnych dát, generátory pseudonáhodných čísel a iné. Taktiež sa používajú na prípravu požadovaného taktovacieho signálu pre analógové bloky, prípadne na spracovanie signálov z analógových blokov (možné prepojenie cez vstupno-výstupné piny). Ich činnosť je nezávislá na behu programu mikroprocesora, avšak môže byť moderovaná programom pomocou [http://sk.wikipedia.org/wiki/Application_programming_interface API] funkcií.<br />
<br />
=== Analógové bloky ===<br />
<br />
'''Analógové bloky''' <ref>http://www.lubino.sk/rs/3/files/diplomka_-_ubo.pdf</ref> sú taktiež zdrojom prostriedkov pre aplikácie, avšak orientované na spracovávanie a generovanie analógových signálov. Základom analógových blokov sú obvody spínače, prepínače, operačné zosilňovače a spínané kondenzátory. Každý analógový obvod ma viac potenciálne použiteľných vstupov a výstupov. K dispozícii sú vždy tieto tri výstupy:<br />
* analógová výstupná zbernica (ABUS)<br />
* porovnávacia zbernica (CBUS)<br />
* výstupná zbernica (OUT)<br />
<br />
Analógová výstupná zbernica je vodičom analógového signálu. Túto zbernicu spolu zdieľajú analógové bloky v jednom stĺpci. Keďže je takýchto stĺpcov viac, je viac aj zberníc tohoto typu. Vo väčšine modelov mikroprocesora sú ich 4. K tejto zbernici je pripojený analógový výstupný zásobník (Analog Output Buffer), ktorý v závislosti od nastavenia prepojí zbernicu s nastaveným analógovým výstupným pinom. Porovnávacia zbernica je digitálnou zbernicou a taktiež ju zdieľajú všetky analógové bloky v jednom stĺpci. Túto zbernicu nie je možné pripojiť na vstupno-výstupný pin, ale je možné pripojiť ju na vstup niektorého digitálneho bloku. Podobne aj výstupná zbernica je zdieľaná vrámci jedného stĺpca.<br />
<br />
<references/></div>Dusanhttp://www.kiwiki.info/index.php?title=Preh%C4%BEad_architekt%C3%BAry_PSoC&diff=5496Prehľad architektúry PSoC2010-06-22T18:05:47Z<p>Dusan: </p>
<hr />
<div>Mikroprocesory PSoC <ref>http://www.cypress.com</ref> (Programmable System on Chip – Programovateľný systém na čipe) sa skladajú z konfigurovateľných blokov analógových obvodov a digitálnej logiky, ktoré sú vzájomne programovo prepojené. Uvedená architektúra umožňuje vytvárať zákaznícke konfigurácie mikroprocesora tak, aby boli splnené požiadavky potrebné na realizáciu jednotlivých aplikácií. Bloková schéma na Obr. 1.1 zobrazuje architektúru celej rodiny mikroprocesorov PSoC. <br />
<br />
== Vnútorná štruktúra PSoC ==<br />
<br />
Spoločnosť Cypress vyvinula niekoľko desiatok typov súčiastok typov PSoC. Líšia sa predovšetkým množstvom a druhom blokov, veľkosťou pamäti programu ([http://sk.wikipedia.org/wiki/FLASH FLASH]), pamäťou dát ([http://sk.wikipedia.org/wiki/Pam%C3%A4%C5%A5_s_priamym_pr%C3%ADstupom RAM]), veľkosťou a druhom puzdier a ďalšími parametrami. V závislosti na type obsahujú 4-16 digitálnych a 3-12 analógových blokov. <br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_struktura.png]]<br />
|-<br />
| align="center" | Obr. 1.1 Vnútorná štruktúra PSoC<br />
|}<br />
</center><br />
<br />
== M8C – procesorové jadro ==<br />
<br />
Na Obr. 2.1 sú zobrazené prvky architektúry jadra PSoC. Procesor je 8-bitový a dokáže spracovať až 4 milióny inštrukcií za sekundu.<br />
8-bitová architektúra podporuje použitie až 64 kilobajtov pamäti Flash, v ktorej je uložená užívateľská aplikácia. Flash pamäť je „in-circuit programmable“, takže PSoC je možné programovať aj potom, ako je zapojený do dosky plošných spojov. Flash je zároveň aj „in-application programmable“, čo znamená, že mikroprocesor je schopný dynamicky meniť svoju vlastnú pamäť. [http://sk.wikipedia.org/wiki/Procesor Procesor] je pripojený k viacerým digitálnym a analógovým blokom, ktoré poskytujú funkcionalitu a flexibilitu charakteristickú pre celú rodinu PSoC. <br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_JadroPSoC.png]]<br />
|-<br />
| align="center" | Obr. 2.1 Jadro PSoC<br />
|}<br />
</center><br />
<br />
=== Registre procesora M8C ===<br />
<br />
M8C je 8-bitový [http://sk.wikipedia.org/wiki/Mikroprocesor mikroprocesor] MIPS harvardskej architektúry s voliteľnou hodinovou frekvenciou od 93.7 kHz do 24 MHz. Má päť vnútorných [http://sk.wikipedia.org/wiki/Register_(procesor) registrov], ktoré sú využívané pri vykonávaní programu.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_registreprocesora.png]]<br />
|-<br />
| align="center" | Obr. 2.2 Registre procesora M8C<br />
|}<br />
</center><br />
<br />
=== Štruktúra pamäte M8C ===<br />
<br />
M8C má tri adresné priestory: [http://sk.wikipedia.org/wiki/ROM ROM], RAM a registre. K adresnému priestoru ROM pristupujeme cez jeho vlastné adresy a dátovú [http://sk.wikipedia.org/wiki/Zbernica#Zbernica_po.C4.8D.C3.ADta.C4.8Da zbernicu]. ROM zahŕňa SROM a Flash pamäte. V pamäti Flash je uložený firmvér zariadenia a je rozdelená do 64-bajtových blokov. Používateľ nemusí ošetrovať prechod programu na ďalšiu pamäťovú stránku, pretože M8C automaticky zvyšuje 16-bitový register PC pri každej inštrukcii presahujúcej hranice aktuálnej stránky. V pamäti SROM je uložený program využívaný na spúšťanie PSoC, kalibrovanie obvodov a vykonávanie operácií s pamäťou Flash. Funkcie zabezpečované SROM sú volané z programu uloženého v pamäti Flash alebo pomocou programátora. Adresný priestor registrov je využívaný na konfigurovanie programovateľných blokov mikroprocesora. Skladá sa z dvoch 256-bajtových blokov. Na prepínanie medzi blokmi sa nastavuje bit XIO v registri F. Ak je F nastavený, zvolí sa blok1, ak nie je nastavený, zvolí sa blok0.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_adresnypriestor.png]]<br />
|-<br />
| align="center" | Obr. 2.3 Adresný priestor<br />
|}<br />
</center><br />
<br />
=== Inštrukčné formáty ===<br />
<br />
M8C má spolu sedem inštrukčných formátov, ktoré používajú inštrukcie o dĺžkach jeden, dva a tri bajty. Všetky bajty inštrukcie sú vyvolávané z programovej pamäte Flash, za použitia adries a dátovej zbernice, ktoré sú nezávislé od adries a dátovej zbernice používaných pre registre a prístup do pamäte RAM. <br />
<br />
== Digitálne a analógové bloky PSoC ==<br />
<br />
Digitálne a analógové bloky sú moduly vytvorené z digitálnych a analógových prvkov, ktoré sú konfigurovateľné pre rôzne druhy operácií pomocou registrov špecifických pre každý blok.<br />
<br />
=== Digitálne bloky ===<br />
<br />
Digitálne bloky <ref>http://www.lubino.sk/rs/3/files/diplomka_-_ubo.pdf</ref> redukujú potrebu použitia ďalších externých obvodov pre požadovanú funkcionalitu pripravovaného zariadenia. Sú určené na spracovávanie a generovanie hlavne digitálneho signálu. Dajú sa programovať a variovať tak, aby poskytovali funkčnosť štandardných elektronických integrovaných obvodov ako napríklad počítadlo, šírkový generátor pulzov, RS-232, IrDA, SPI, I2C príjem a binárnych dát, generátory pseudonáhodných čísel a iné. Taktiež sa používajú na prípravu požadovaného taktovacieho signálu pre analógové bloky, prípadne na spracovanie signálov z analógových blokov (možné prepojenie cez vstupno-výstupné piny). Ich činnosť je nezávislá na behu programu mikroprocesora, avšak môže byť moderovaná programom pomocou [http://sk.wikipedia.org/wiki/Application_programming_interface API] funkcií.<br />
<br />
=== Analógové bloky ===<br />
<br />
Analógové bloky <ref>http://www.lubino.sk/rs/3/files/diplomka_-_ubo.pdf</ref> sú taktiež zdrojom prostriedkov pre aplikácie, avšak orientované na spracovávanie a generovanie analógových signálov. Základom analógových blokov sú obvody spínače, prepínače, operačné zosilňovače a spínané kondenzátory. Každý analógový obvod ma viac potenciálne použiteľných vstupov a výstupov. K dispozícii sú vždy tieto tri výstupy:<br />
* analógová výstupná zbernica (ABUS)<br />
* porovnávacia zbernica (CBUS)<br />
* výstupná zbernica (OUT)<br />
<br />
Analógová výstupná zbernica je vodičom analógového signálu. Túto zbernicu spolu zdieľajú analógové bloky v jednom stĺpci. Keďže je takýchto stĺpcov viac, je viac aj zberníc tohoto typu. Vo väčšine modelov mikroprocesora sú ich 4. K tejto zbernici je pripojený analógový výstupný zásobník (Analog Output Buffer), ktorý v závislosti od nastavenia prepojí zbernicu s nastaveným analógovým výstupným pinom. Porovnávacia zbernica je digitálnou zbernicou a taktiež ju zdieľajú všetky analógové bloky v jednom stĺpci. Túto zbernicu nie je možné pripojiť na vstupno-výstupný pin, ale je možné pripojiť ju na vstup niektorého digitálneho bloku. Podobne aj výstupná zbernica je zdieľaná vrámci jedného stĺpca.<br />
<br />
<references/></div>Dusanhttp://www.kiwiki.info/index.php?title=Preh%C4%BEad_architekt%C3%BAry_PSoC&diff=5493Prehľad architektúry PSoC2010-06-22T17:53:15Z<p>Dusan: </p>
<hr />
<div>Mikroprocesory PSoC <ref>http://www.cypress.com</ref> (Programmable System on Chip – Programovateľný systém na čipe) sa skladajú z konfigurovateľných blokov analógových obvodov a digitálnej logiky, ktoré sú vzájomne programovo prepojené. Uvedená architektúra umožňuje vytvárať zákaznícke konfigurácie mikroprocesora tak, aby boli splnené požiadavky potrebné na realizáciu jednotlivých aplikácií. Bloková schéma na Obr. 1.1 zobrazuje architektúru celej rodiny mikroprocesorov PSoC. <br />
<br />
== Vnútorná štruktúra PSoC ==<br />
<br />
Spoločnosť Cypress vyvinula niekoľko desiatok typov súčiastok typov PSoC. Líšia sa predovšetkým množstvom a druhom blokov, veľkosťou pamäti programu (FLASH), pamäťou dát (RAM), veľkosťou a druhom puzdier a ďalšími parametrami. V závislosti na type obsahujú 4-16 digitálnych a 3-12 analógových blokov. <br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_struktura.png]]<br />
|-<br />
| align="center" | Obr. 1.1 Vnútorná štruktúra PSoC<br />
|}<br />
</center><br />
<br />
== M8C – procesorové jadro ==<br />
<br />
Na Obr. 2.1 sú zobrazené prvky architektúry jadra PSoC. Procesor je 8-bitový a dokáže spracovať až 4 milióny inštrukcií za sekundu.<br />
8-bitová architektúra podporuje použitie až 64 kilobajtov pamäti Flash, v ktorej je uložená užívateľská aplikácia. Flash pamäť je „in-circuit programmable“, takže PSoC je možné programovať aj potom, ako je zapojený do dosky plošných spojov. Flash je zároveň aj „in-application programmable“, čo znamená, že mikroprocesor je schopný dynamicky meniť svoju vlastnú pamäť. Procesor je pripojený k viacerým digitálnym a analógovým blokom, ktoré poskytujú funkcionalitu a flexibilitu charakteristickú pre celú rodinu PSoC. <br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_JadroPSoC.png]]<br />
|-<br />
| align="center" | Obr. 2.1 Jadro PSoC<br />
|}<br />
</center><br />
<br />
=== Registre procesora M8C ===<br />
<br />
M8C je 8-bitový mikroprocesor MIPS harvardskej architektúry s voliteľnou hodinovou frekvenciou od 93.7 kHz do 24 MHz. Má päť vnútorných registrov, ktoré sú využívané pri vykonávaní programu.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_registreprocesora.png]]<br />
|-<br />
| align="center" | Obr. 2.2 Registre procesora M8C<br />
|}<br />
</center><br />
<br />
=== Štruktúra pamäte M8C ===<br />
<br />
M8C má tri adresné priestory: ROM, RAM a registre. K adresnému priestoru ROM pristupujeme cez jeho vlastné adresy a dátovú zbernicu. ROM zahŕňa SROM a Flash pamäte. V pamäti Flash je uložený firmvér zariadenia a je rozdelená do 64-bajtových blokov. Používateľ nemusí ošetrovať prechod programu na ďalšiu pamäťovú stránku, pretože M8C automaticky zvyšuje 16-bitový register PC pri každej inštrukcii presahujúcej hranice aktuálnej stránky. V pamäti SROM je uložený program využívaný na spúšťanie PSoC, kalibrovanie obvodov a vykonávanie operácií s pamäťou Flash. Funkcie zabezpečované SROM sú volané z programu uloženého v pamäti Flash alebo pomocou programátora. Adresný priestor registrov je využívaný na konfigurovanie programovateľných blokov mikroprocesora. Skladá sa z dvoch 256-bajtových blokov. Na prepínanie medzi blokmi sa nastavuje bit XIO v registri F. Ak je F nastavený, zvolí sa blok1, ak nie je nastavený, zvolí sa blok0.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_adresnypriestor.png]]<br />
|-<br />
| align="center" | Obr. 2.3 Adresný priestor<br />
|}<br />
</center><br />
<br />
=== Inštrukčné formáty ===<br />
<br />
M8C má spolu sedem inštrukčných formátov, ktoré používajú inštrukcie o dĺžkach jeden, dva a tri bajty. Všetky bajty inštrukcie sú vyvolávané z programovej pamäte Flash, za použitia adries a dátovej zbernice, ktoré sú nezávislé od adries a dátovej zbernice používaných pre registre a prístup do pamäte RAM. <br />
<br />
== Digitálne a analógové bloky PSoC ==<br />
<br />
Digitálne a analógové bloky sú moduly vytvorené z digitálnych a analógových prvkov, ktoré sú konfigurovateľné pre rôzne druhy operácií pomocou registrov špecifických pre každý blok.<br />
<br />
=== Digitálne bloky ===<br />
<br />
Digitálne bloky <ref>http://www.lubino.sk/rs/3/files/diplomka_-_ubo.pdf</ref> redukujú potrebu použitia ďalších externých obvodov pre požadovanú funkcionalitu pripravovaného zariadenia. Sú určené na spracovávanie a generovanie hlavne digitálneho signálu. Dajú sa programovať a variovať tak, aby poskytovali funkčnosť štandardných elektronických integrovaných obvodov ako napríklad počítadlo, šírkový generátor pulzov, RS-232, IrDA, SPI, I2C príjem a binárnych dát, generátory pseudonáhodných čísel a iné. Taktiež sa používajú na prípravu požadovaného taktovacieho signálu pre analógové bloky, prípadne na spracovanie signálov z analógových blokov (možné prepojenie cez vstupno-výstupné piny). Ich činnosť je nezávislá na behu programu mikroprocesora, avšak môže byť moderovaná programom pomocou API funkcií.<br />
<br />
=== Analógové bloky ===<br />
<br />
Analógové bloky <ref>http://www.lubino.sk/rs/3/files/diplomka_-_ubo.pdf</ref> sú taktiež zdrojom prostriedkov pre aplikácie, avšak orientované na spracovávanie a generovanie analógových signálov. Základom analógových blokov sú obvody spínače, prepínače, operačné zosilňovače a spínané kondenzátory. Každý analógový obvod ma viac potenciálne použiteľných vstupov a výstupov. K dispozícii sú vždy tieto tri výstupy:<br />
* analógová výstupná zbernica (ABUS)<br />
* porovnávacia zbernica (CBUS)<br />
* výstupná zbernica (OUT)<br />
<br />
Analógová výstupná zbernica je vodičom analógového signálu. Túto zbernicu spolu zdieľajú analógové bloky v jednom stĺpci. Keďže je takýchto stĺpcov viac, je viac aj zberníc tohoto typu. Vo väčšine modelov mikroprocesora sú ich 4. K tejto zbernici je pripojený analógový výstupný zásobník (Analog Output Buffer), ktorý v závislosti od nastavenia prepojí zbernicu s nastaveným analógovým výstupným pinom. Porovnávacia zbernica je digitálnou zbernicou a taktiež ju zdieľajú všetky analógové bloky v jednom stĺpci. Túto zbernicu nie je možné pripojiť na vstupno-výstupný pin, ale je možné pripojiť ju na vstup niektorého digitálneho bloku. Podobne aj výstupná zbernica je zdieľaná vrámci jedného stĺpca.<br />
<br />
<references/></div>Dusanhttp://www.kiwiki.info/index.php?title=Preh%C4%BEad_architekt%C3%BAry_PSoC&diff=5492Prehľad architektúry PSoC2010-06-22T17:51:55Z<p>Dusan: </p>
<hr />
<div>Mikroprocesory PSoC <ref>http://www.cypress.com</ref> (Programmable System on Chip – Programovateľný systém na čipe) sa skladajú z konfigurovateľných blokov analógových obvodov a digitálnej logiky, ktoré sú vzájomne programovo prepojené. Uvedená architektúra umožňuje vytvárať zákaznícke konfigurácie mikroprocesora tak, aby boli splnené požiadavky potrebné na realizáciu jednotlivých aplikácií. Bloková schéma na Obr. 1.1 zobrazuje architektúru celej rodiny mikroprocesorov PSoC. <br />
<br />
== Vnútorná štruktúra PSoC ==<br />
<br />
Spoločnosť Cypress vyvinula niekoľko desiatok typov súčiastok typov PSoC. Líšia sa predovšetkým množstvom a druhom blokov, veľkosťou pamäti programu (FLASH), pamäťou dát (RAM), veľkosťou a druhom puzdier a ďalšími parametrami. V závislosti na type obsahujú 4-16 digitálnych a 3-12 analógových blokov. <br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_struktura.png]]<br />
|-<br />
| align="center" | Obr. 1.1 Vnútorná štruktúra PSoC<br />
|}<br />
</center><br />
<br />
== M8C – procesorové jadro ==<br />
<br />
Na Obr. 2.1 sú zobrazené prvky architektúry jadra PSoC. Procesor je 8-bitový a dokáže spracovať až 4 milióny inštrukcií za sekundu.<br />
8-bitová architektúra podporuje použitie až 64 kilobajtov pamäti Flash, v ktorej je uložená užívateľská aplikácia. Flash pamäť je „in-circuit programmable“, takže PSoC je možné programovať aj potom, ako je zapojený do dosky plošných spojov. Flash je zároveň aj „in-application programmable“, čo znamená, že mikroprocesor je schopný dynamicky meniť svoju vlastnú pamäť. Procesor je pripojený k viacerým digitálnym a analógovým blokom, ktoré poskytujú funkcionalitu a flexibilitu charakteristickú pre celú rodinu PSoC. <br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_JadroPSoC.png]]<br />
|-<br />
| align="center" | Obr. 2.1 Jadro PSoC<br />
|}<br />
</center><br />
<br />
=== Registre procesora M8C ===<br />
<br />
M8C je 8-bitový mikroprocesor MIPS harvardskej architektúry s voliteľnou hodinovou frekvenciou od 93.7 kHz do 24 MHz. Má päť vnútorných registrov, ktoré sú využívané pri vykonávaní programu.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_registreprocesora.png]]<br />
|-<br />
| align="center" | Obr. 2.2 Registre procesora M8C<br />
|}<br />
</center><br />
<br />
=== Štruktúra pamäte M8C ===<br />
<br />
M8C má tri adresné priestory: ROM, RAM a registre. K adresnému priestoru ROM pristupujeme cez jeho vlastné adresy a dátovú zbernicu. ROM zahŕňa SROM a Flash pamäte. V pamäti Flash je uložený firmvér zariadenia a je rozdelená do 64-bajtových blokov. Používateľ nemusí ošetrovať prechod programu na ďalšiu pamäťovú stránku, pretože M8C automaticky zvyšuje 16-bitový register PC pri každej inštrukcii presahujúcej hranice aktuálnej stránky. V pamäti SROM je uložený program využívaný na spúšťanie PSoC, kalibrovanie obvodov a vykonávanie operácií s pamäťou Flash. Funkcie zabezpečované SROM sú volané z programu uloženého v pamäti Flash alebo pomocou programátora. Adresný priestor registrov je využívaný na konfigurovanie programovateľných blokov mikroprocesora. Skladá sa z dvoch 256-bajtových blokov. Na prepínanie medzi blokmi sa nastavuje bit XIO v registri F. Ak je F nastavený, zvolí sa blok1, ak nie je nastavený, zvolí sa blok0.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_adresnypriestor.png]]<br />
|-<br />
| align="center" | Obr. 2.3 Adresný priestor<br />
|}<br />
</center><br />
<br />
=== Inštrukčné formáty ===<br />
<br />
M8C má spolu sedem inštrukčných formátov, ktoré používajú inštrukcie o dĺžkach jeden, dva a tri bajty. Všetky bajty inštrukcie sú vyvolávané z programovej pamäte Flash, za použitia adries a dátovej zbernice, ktoré sú nezávislé od adries a dátovej zbernice používaných pre registre a prístup do pamäte RAM. <br />
<br />
== Digitálne a analógové bloky PSoC ==<br />
<br />
Digitálne a analógové bloky sú moduly vytvorené z digitálnych a analógových prvkov, ktoré sú konfigurovateľné pre rôzne druhy operácií pomocou registrov špecifických pre každý blok.<br />
<br />
=== Digitálne bloky ===<br />
<br />
Digitálne bloky redukujú potrebu použitia ďalších externých obvodov pre požadovanú funkcionalitu pripravovaného zariadenia. Sú určené na spracovávanie a generovanie hlavne digitálneho signálu. Dajú sa programovať a variovať tak, aby poskytovali funkčnosť štandardných elektronických integrovaných obvodov ako napríklad počítadlo, šírkový generátor pulzov, RS-232, IrDA, SPI, I2C príjem a binárnych dát, generátory pseudonáhodných čísel a iné. Taktiež sa používajú na prípravu požadovaného taktovacieho signálu pre analógové bloky, prípadne na spracovanie signálov z analógových blokov (možné prepojenie cez vstupno-výstupné piny). Ich činnosť je nezávislá na behu programu mikroprocesora, avšak môže byť moderovaná programom pomocou API funkcií.<br />
<br />
=== Analógové bloky ===<br />
<br />
Analógové bloky sú taktiež zdrojom prostriedkov pre aplikácie, avšak orientované na spracovávanie a generovanie analógových signálov. Základom analógových blokov sú obvody spínače, prepínače, operačné zosilňovače a spínané kondenzátory. Každý analógový obvod ma viac potenciálne použiteľných vstupov a výstupov. K dispozícii sú vždy tieto tri výstupy:<br />
* analógová výstupná zbernica (ABUS)<br />
* porovnávacia zbernica (CBUS)<br />
* výstupná zbernica (OUT)<br />
<br />
Analógová výstupná zbernica je vodičom analógového signálu. Túto zbernicu spolu zdieľajú analógové bloky v jednom stĺpci. Keďže je takýchto stĺpcov viac, je viac aj zberníc tohoto typu. Vo väčšine modelov mikroprocesora sú ich 4. K tejto zbernici je pripojený analógový výstupný zásobník (Analog Output Buffer), ktorý v závislosti od nastavenia prepojí zbernicu s nastaveným analógovým výstupným pinom. Porovnávacia zbernica je digitálnou zbernicou a taktiež ju zdieľajú všetky analógové bloky v jednom stĺpci. Túto zbernicu nie je možné pripojiť na vstupno-výstupný pin, ale je možné pripojiť ju na vstup niektorého digitálneho bloku. Podobne aj výstupná zbernica je zdieľaná vrámci jedného stĺpca.<br />
<br />
<references/></div>Dusanhttp://www.kiwiki.info/index.php?title=Preh%C4%BEad_architekt%C3%BAry_PSoC&diff=5491Prehľad architektúry PSoC2010-06-22T17:46:41Z<p>Dusan: /* Digitálne bloky */</p>
<hr />
<div>Mikroprocesory PSoC <ref>http://www.cypress.com</ref> (Programmable System on Chip – Programovateľný systém na čipe) sa skladajú z konfigurovateľných blokov analógových obvodov a digitálnej logiky, ktoré sú vzájomne programovo prepojené. Uvedená architektúra umožňuje vytvárať zákaznícke konfigurácie mikroprocesora tak, aby boli splnené požiadavky potrebné na realizáciu jednotlivých aplikácií. Bloková schéma na Obr. 1.1 zobrazuje architektúru celej rodiny mikroprocesorov PSoC. <br />
<br />
== Vnútorná štruktúra PSoC ==<br />
<br />
Spoločnosť Cypress vyvinula niekoľko desiatok typov súčiastok typov PSoC. Líšia sa predovšetkým množstvom a druhom blokov, veľkosťou pamäti programu (FLASH), pamäťou dát (RAM), veľkosťou a druhom puzdier a ďalšími parametrami. V závislosti na type obsahujú 4-16 digitálnych a 3-12 analógových blokov. <br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_struktura.png]]<br />
|-<br />
| align="center" | Obr. 1.1 Vnútorná štruktúra PSoC<br />
|}<br />
</center><br />
<br />
== M8C – procesorové jadro ==<br />
<br />
Na Obr. 2.1 sú zobrazené prvky architektúry jadra PSoC. Procesor je 8-bitový a dokáže spracovať až 4 milióny inštrukcií za sekundu.<br />
8-bitová architektúra podporuje použitie až 64 kilobajtov pamäti Flash, v ktorej je uložená užívateľská aplikácia. Flash pamäť je „in-circuit programmable“, takže PSoC je možné programovať aj potom, ako je zapojený do dosky plošných spojov. Flash je zároveň aj „in-application programmable“, čo znamená, že mikroprocesor je schopný dynamicky meniť svoju vlastnú pamäť. Procesor je pripojený k viacerým digitálnym a analógovým blokom, ktoré poskytujú funkcionalitu a flexibilitu charakteristickú pre celú rodinu PSoC. <br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_JadroPSoC.png]]<br />
|-<br />
| align="center" | Obr. 2.1 Jadro PSoC<br />
|}<br />
</center><br />
<br />
=== Registre procesora M8C ===<br />
<br />
M8C je 8-bitový mikroprocesor MIPS harvardskej architektúry s voliteľnou hodinovou frekvenciou od 93.7 kHz do 24 MHz. Má päť vnútorných registrov, ktoré sú využívané pri vykonávaní programu.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_registreprocesora.png]]<br />
|-<br />
| align="center" | Obr. 2.2 Registre procesora M8C<br />
|}<br />
</center><br />
<br />
=== Štruktúra pamäte M8C ===<br />
<br />
M8C má tri adresné priestory: ROM, RAM a registre. K adresnému priestoru ROM pristupujeme cez jeho vlastné adresy a dátovú zbernicu. ROM zahŕňa SROM a Flash pamäte. V pamäti Flash je uložený firmvér zariadenia a je rozdelená do 64-bajtových blokov. Používateľ nemusí ošetrovať prechod programu na ďalšiu pamäťovú stránku, pretože M8C automaticky zvyšuje 16-bitový register PC pri každej inštrukcii presahujúcej hranice aktuálnej stránky. V pamäti SROM je uložený program využívaný na spúšťanie PSoC, kalibrovanie obvodov a vykonávanie operácií s pamäťou Flash. Funkcie zabezpečované SROM sú volané z programu uloženého v pamäti Flash alebo pomocou programátora. Adresný priestor registrov je využívaný na konfigurovanie programovateľných blokov mikroprocesora. Skladá sa z dvoch 256-bajtových blokov. Na prepínanie medzi blokmi sa nastavuje bit XIO v registri F. Ak je F nastavený, zvolí sa blok1, ak nie je nastavený, zvolí sa blok0.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_adresnypriestor.png]]<br />
|-<br />
| align="center" | Obr. 2.3 Adresný priestor<br />
|}<br />
</center><br />
<br />
=== Inštrukčné formáty ===<br />
<br />
M8C má spolu sedem inštrukčných formátov, ktoré používajú inštrukcie o dĺžkach jeden, dva a tri bajty. Všetky bajty inštrukcie sú vyvolávané z programovej pamäte Flash, za použitia adries a dátovej zbernice, ktoré sú nezávislé od adries a dátovej zbernice používaných pre registre a prístup do pamäte RAM. <br />
<br />
== Digitálne a analógové bloky PSoC ==<br />
<br />
Digitálne a analógové bloky sú moduly vytvorené z digitálnych a analógových prvkov, ktoré sú konfigurovateľné pre rôzne druhy operácií pomocou registrov špecifických pre každý blok.<br />
<br />
=== Analógové bloky ===<br />
<br />
Na rozdiel od digitálnych blokov, kde blok z užívateľského hľadiska vlastne predstavuje sústavu registrov v ktorých sa zvolí funkcia bloku, sú analógové bloky v podstate založené na obvodovom zapojení obsahujúce jeden operačný zosilovač (OZ) obklopený rôznymi, vo vnútri integrovanými, súčiastkami pripojovanými k OZ cez programovateľné spínače. Tie sú už ovládané nastavením bitov registrov bloku prístupné užívateľovi. Takto je možné u každého bloku definovať použité vstupy i spätné väzby. Analógové bloky: PGA, komparátory, ADC 6-14 bitov, rôzne konfigurácie, DAC 6-9 bitov.<br />
<br />
=== Digitálne bloky ===<br />
<br />
Digitálne bloky <ref>http://www.lubino.sk/rs/3/files/diplomka_-_ubo.pdf</ref> redukujú potrebu použitia ďalších externých obvodov pre požadovanú funkcionalitu pripravovaného zariadenia. Sú určené na spracovávanie a generovanie hlavne digitálneho signálu. Dajú sa programovať a variovať tak, aby poskytovali funkčnosť štandardných elektronických integrovaných obvodov ako napríklad počítadlo, šírkový generátor pulzov, RS-232, IrDA, SPI, I2C príjem a binárnych dát, generátory pseudonáhodných čísel a iné. Taktiež sa používajú na prípravu požadovaného taktovacieho signálu pre analógové bloky, prípadne na spracovanie signálov z analógových blokov (možné prepojenie cez vstupno-výstupné piny). Ich činnosť je nezávislá na behu programu mikroprocesora, avšak môže byť moderovaná programom pomocou API funkcií.<br />
<br />
Každý digitálny blok má priradených niekoľko registrov, ktorými sa nastavuje vnútorné zapojenie jeho obvodov a prepojenia s globálnou zbernicou. Tieto registre je možné meniť aj počas práce (za behu) mikroprocesora pomocou programu, a tým aj meniť funkčnosť a zapojenie blokov. Podrobná dokumentácia registrom je rozsiahla a voľne dostupná. Pre prácu s mikroprocesorom, kde za behu programu nedochádza k zmene štruktúry, nie je nutné registre detailne poznať, pretože o ich nastavenie sa postará grafický dizajnér, v ktorom sú už pred pripravené konfigurácie blokov na použitie pre niektoré základné zapojenia a funkcionality. Každé takéto zapojenie spotrebuje jeden alebo viac z blokov mikroprocesora. <br />
<br />
Globálne vstupy a výstupy dodávajú digitálnym blokom možnosti na prepájanie taktovacích a dátových vstupov. Podobne ako digitálne bloky, aj globálne<br />
vstupy a výstupy sa nastavujú pomocou k nim prislúchajúceho registra. Podľa konfigurácie registra, jednotlivé bloky pripoja na 8 bitovú, globálnu, vstupnú zbernicu alebo 8 bitovú, globálnu, výstupnú zbernicu. K týmto zberniciam je možné pripojiť i vstupno-výstupné vývody mikroprocesoru.<br />
<br />
<br />
<references/></div>Dusanhttp://www.kiwiki.info/index.php?title=V%C3%BDvojov%C3%A9_prostredie_pre_syst%C3%A9my_PSoC&diff=5489Vývojové prostredie pre systémy PSoC2010-06-22T17:24:36Z<p>Dusan: </p>
<hr />
<div>K vytváraniu aplikácie, resp. programu, pro PSoC je z programátorského hľadiska najlepšie použiť k tomu firmou Cypress určené vývojové prostredie PSoC Designer<ref>http://www.cypress.com</ref>. Slúži na návrh správneho nastavenia všetkých registrov, zberníc<br />
a blokov ako aj naprogramovanie algoritmu pre mikrokontrolér. Je to grafické prostredie, kde je možné skúšať jednotlivé varianty, ktoré<br />
sa dajú z PSoC blokov zapojiť. Obsahuje množstvo modulov aj s dokumentáciou a potrebným rozhraním pre nastavovanie ich jednotlivých parametrov. PSoC Designer obsahuje aj podprogram, pre kontrolu korektného zapojenia jednotlivých modulov a rovno počas navrhovania vnútornej štruktúry môže užívateľ vidieť jednotlivé možnosti zapojenia. Typickým digitálnym užívateľským modulom je UART a typickým analógovým užívateľským modulom je napríklad 12-bitový ADC. <br />
<br />
PSoC Designer:<br />
* Návrh na úrovni chipu<br />
** Návrh architektúry (bloky a ich vlastnosti)<br />
** Assembler<br />
** C Kompilátor<br />
** Programátor<br />
** ICE (In Circuit Emulator) Debuger<br />
* Návrh na úrovni systému<br />
** Grafické programovanie<br />
** Definovanie vlastností a vzťahov medzi vstupmi a výstupmi<br />
<br />
<br />
<br />
<br />
<br />
<br />
<references/></div>Dusanhttp://www.kiwiki.info/index.php?title=Elektrick%C3%A9_a_mechanick%C3%A9_parametre_architekt%C3%BAry_PSoC&diff=5472Elektrické a mechanické parametre architektúry PSoC2010-06-22T16:50:14Z<p>Dusan: </p>
<hr />
<div>== Mechanické vlastnosti ==<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_mechanicke.png]]<br />
|-<br />
| align="center" | Obr. 1.1 Mechanické vlastnosti<br />
|}<br />
</center><br />
<br />
== Elektrické vlastnosti ==<br />
<br />
* Napájanie<br />
** 5V, 3.3V, vstavaný menič pre napájanie z jednej AA batérie<br />
* Hodiny CPU<br />
** Nastaviteľné od 930kHz do 24 MHz (spotreba), odvodené od vlastného oscilátora na čipe<br />
** Možnosť synchronizácie externým kryštálom 32 kHz<br />
* Spotreba<br />
** počas práce 15 - 70 mW (cca 80 hodín na AA batériu)<br />
** sleep mód 10 - 70 μW (cca 10rokov na AA batériu)</div>Dusanhttp://www.kiwiki.info/index.php?title=Elektrick%C3%A9_a_mechanick%C3%A9_parametre_architekt%C3%BAry_PSoC&diff=5471Elektrické a mechanické parametre architektúry PSoC2010-06-22T16:48:25Z<p>Dusan: </p>
<hr />
<div>== Mechanické vlastnosti ==<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_mechanicke.png]]<br />
|-<br />
| align="center" | Obr. 1.1 Mechanické vlastnosti<br />
|}<br />
</center><br />
<br />
== Elektrické vlastnosti ==<br />
<br />
* Napájanie<br />
** 5V, 3.3V, vstavaný menič pre napájanie z jednej AA batérie<br />
*Hodiny CPU<br />
** Nastaviteľné od 930kHz do 24 MHz (spotreba), odvodené od vlastného<br />
oscilátora na čipe<br />
** Možnosť synchronizácie externým kryštálom 32 kHz<br />
* Spotreba<br />
** počas práce 15 - 70 mW (cca 80 hodín na AA batériu)<br />
** sleep mód 10 - 70 μW (cca 10rokov na AA batériu)</div>Dusanhttp://www.kiwiki.info/index.php?title=Preh%C4%BEad_architekt%C3%BAry_PSoC&diff=5463Prehľad architektúry PSoC2010-06-22T16:40:28Z<p>Dusan: /* Analógové bloky */</p>
<hr />
<div>Mikroprocesory PSoC <ref>http://www.cypress.com</ref> (Programmable System on Chip – Programovateľný systém na čipe) sa skladajú z konfigurovateľných blokov analógových obvodov a digitálnej logiky, ktoré sú vzájomne programovo prepojené. Uvedená architektúra umožňuje vytvárať zákaznícke konfigurácie mikroprocesora tak, aby boli splnené požiadavky potrebné na realizáciu jednotlivých aplikácií. Bloková schéma na Obr. 1.1 zobrazuje architektúru celej rodiny mikroprocesorov PSoC. <br />
<br />
== Vnútorná štruktúra PSoC ==<br />
<br />
Spoločnosť Cypress vyvinula niekoľko desiatok typov súčiastok typov PSoC. Líšia sa predovšetkým množstvom a druhom blokov, veľkosťou pamäti programu (FLASH), pamäťou dát (RAM), veľkosťou a druhom puzdier a ďalšími parametrami. V závislosti na type obsahujú 4-16 digitálnych a 3-12 analógových blokov. <br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_struktura.png]]<br />
|-<br />
| align="center" | Obr. 1.1 Vnútorná štruktúra PSoC<br />
|}<br />
</center><br />
<br />
== M8C – procesorové jadro ==<br />
<br />
Na Obr. 2.1 sú zobrazené prvky architektúry jadra PSoC. Procesor je 8-bitový a dokáže spracovať až 4 milióny inštrukcií za sekundu.<br />
8-bitová architektúra podporuje použitie až 64 kilobajtov pamäti Flash, v ktorej je uložená užívateľská aplikácia. Flash pamäť je „in-circuit programmable“, takže PSoC je možné programovať aj potom, ako je zapojený do dosky plošných spojov. Flash je zároveň aj „in-application programmable“, čo znamená, že mikroprocesor je schopný dynamicky meniť svoju vlastnú pamäť. Procesor je pripojený k viacerým digitálnym a analógovým blokom, ktoré poskytujú funkcionalitu a flexibilitu charakteristickú pre celú rodinu PSoC. <br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_JadroPSoC.png]]<br />
|-<br />
| align="center" | Obr. 2.1 Jadro PSoC<br />
|}<br />
</center><br />
<br />
=== Registre procesora M8C ===<br />
<br />
M8C je 8-bitový mikroprocesor MIPS harvardskej architektúry s voliteľnou hodinovou frekvenciou od 93.7 kHz do 24 MHz. Má päť vnútorných registrov, ktoré sú využívané pri vykonávaní programu.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_registreprocesora.png]]<br />
|-<br />
| align="center" | Obr. 2.2 Registre procesora M8C<br />
|}<br />
</center><br />
<br />
=== Štruktúra pamäte M8C ===<br />
<br />
M8C má tri adresné priestory: ROM, RAM a registre. K adresnému priestoru ROM pristupujeme cez jeho vlastné adresy a dátovú zbernicu. ROM zahŕňa SROM a Flash pamäte. V pamäti Flash je uložený firmvér zariadenia a je rozdelená do 64-bajtových blokov. Používateľ nemusí ošetrovať prechod programu na ďalšiu pamäťovú stránku, pretože M8C automaticky zvyšuje 16-bitový register PC pri každej inštrukcii presahujúcej hranice aktuálnej stránky. V pamäti SROM je uložený program využívaný na spúšťanie PSoC, kalibrovanie obvodov a vykonávanie operácií s pamäťou Flash. Funkcie zabezpečované SROM sú volané z programu uloženého v pamäti Flash alebo pomocou programátora. Adresný priestor registrov je využívaný na konfigurovanie programovateľných blokov mikroprocesora. Skladá sa z dvoch 256-bajtových blokov. Na prepínanie medzi blokmi sa nastavuje bit XIO v registri F. Ak je F nastavený, zvolí sa blok1, ak nie je nastavený, zvolí sa blok0.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_adresnypriestor.png]]<br />
|-<br />
| align="center" | Obr. 2.3 Adresný priestor<br />
|}<br />
</center><br />
<br />
=== Inštrukčné formáty ===<br />
<br />
M8C má spolu sedem inštrukčných formátov, ktoré používajú inštrukcie o dĺžkach jeden, dva a tri bajty. Všetky bajty inštrukcie sú vyvolávané z programovej pamäte Flash, za použitia adries a dátovej zbernice, ktoré sú nezávislé od adries a dátovej zbernice používaných pre registre a prístup do pamäte RAM. <br />
<br />
== Digitálne a analógové bloky PSoC ==<br />
<br />
Digitálne a analógové bloky sú moduly vytvorené z digitálnych a analógových prvkov, ktoré sú konfigurovateľné pre rôzne druhy operácií pomocou registrov špecifických pre každý blok.<br />
<br />
=== Analógové bloky ===<br />
<br />
Na rozdiel od digitálnych blokov, kde blok z užívateľského hľadiska vlastne predstavuje sústavu registrov v ktorých sa zvolí funkcia bloku, sú analógové bloky v podstate založené na obvodovom zapojení obsahujúce jeden operačný zosilovač (OZ) obklopený rôznymi, vo vnútri integrovanými, súčiastkami pripojovanými k OZ cez programovateľné spínače. Tie sú už ovládané nastavením bitov registrov bloku prístupné užívateľovi. Takto je možné u každého bloku definovať použité vstupy i spätné väzby. Analógové bloky: PGA, komparátory, ADC 6-14 bitov, rôzne konfigurácie, DAC 6-9 bitov.<br />
<br />
=== Digitálne bloky ===<br />
<br />
Digitálne bloky sú združené v poli digitálnych blokov (Array of Digital PSoC Blocks), pričom sú tu rôzne bloky (užívateľské modely) z pohľadu ich funkcie. Obecne však platí, že každý blok je 8bitový, ale združovaním viacerých blokov dohromady je možné vytvoriť viac bitovú funkciu, napr. 16, 24 alebo 32bitovú. Nutný je iba dostatočný počet blokov.<br />
Digitálny blok ako taký je z užívateľského hľadiska definovaný ako sada registrov, ktorými sa nastavujú vlastnosti daného bloku. Nie je teda možné, na rozdiel od obvodov FPGA a CPLD, predstavovať si konkrétne zapojenie blokov. Je len možné vymenovať funkcie, ktoré ktoré sa dajú registrami „zapnúť“. Obvykle sa blokmi poskytujú funkcie časovača, čítača, PWM, sériové vysielače a prijímače, UART, SPI, I2C, IrDA...<br />
<br />
<references/></div>Dusanhttp://www.kiwiki.info/index.php?title=Preh%C4%BEad_architekt%C3%BAry_PSoC&diff=5457Prehľad architektúry PSoC2010-06-22T16:36:43Z<p>Dusan: </p>
<hr />
<div>Mikroprocesory PSoC <ref>http://www.cypress.com</ref> (Programmable System on Chip – Programovateľný systém na čipe) sa skladajú z konfigurovateľných blokov analógových obvodov a digitálnej logiky, ktoré sú vzájomne programovo prepojené. Uvedená architektúra umožňuje vytvárať zákaznícke konfigurácie mikroprocesora tak, aby boli splnené požiadavky potrebné na realizáciu jednotlivých aplikácií. Bloková schéma na Obr. 1.1 zobrazuje architektúru celej rodiny mikroprocesorov PSoC. <br />
<br />
== Vnútorná štruktúra PSoC ==<br />
<br />
Spoločnosť Cypress vyvinula niekoľko desiatok typov súčiastok typov PSoC. Líšia sa predovšetkým množstvom a druhom blokov, veľkosťou pamäti programu (FLASH), pamäťou dát (RAM), veľkosťou a druhom puzdier a ďalšími parametrami. V závislosti na type obsahujú 4-16 digitálnych a 3-12 analógových blokov. <br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_struktura.png]]<br />
|-<br />
| align="center" | Obr. 1.1 Vnútorná štruktúra PSoC<br />
|}<br />
</center><br />
<br />
== M8C – procesorové jadro ==<br />
<br />
Na Obr. 2.1 sú zobrazené prvky architektúry jadra PSoC. Procesor je 8-bitový a dokáže spracovať až 4 milióny inštrukcií za sekundu.<br />
8-bitová architektúra podporuje použitie až 64 kilobajtov pamäti Flash, v ktorej je uložená užívateľská aplikácia. Flash pamäť je „in-circuit programmable“, takže PSoC je možné programovať aj potom, ako je zapojený do dosky plošných spojov. Flash je zároveň aj „in-application programmable“, čo znamená, že mikroprocesor je schopný dynamicky meniť svoju vlastnú pamäť. Procesor je pripojený k viacerým digitálnym a analógovým blokom, ktoré poskytujú funkcionalitu a flexibilitu charakteristickú pre celú rodinu PSoC. <br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_JadroPSoC.png]]<br />
|-<br />
| align="center" | Obr. 2.1 Jadro PSoC<br />
|}<br />
</center><br />
<br />
=== Registre procesora M8C ===<br />
<br />
M8C je 8-bitový mikroprocesor MIPS harvardskej architektúry s voliteľnou hodinovou frekvenciou od 93.7 kHz do 24 MHz. Má päť vnútorných registrov, ktoré sú využívané pri vykonávaní programu.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_registreprocesora.png]]<br />
|-<br />
| align="center" | Obr. 2.2 Registre procesora M8C<br />
|}<br />
</center><br />
<br />
=== Štruktúra pamäte M8C ===<br />
<br />
M8C má tri adresné priestory: ROM, RAM a registre. K adresnému priestoru ROM pristupujeme cez jeho vlastné adresy a dátovú zbernicu. ROM zahŕňa SROM a Flash pamäte. V pamäti Flash je uložený firmvér zariadenia a je rozdelená do 64-bajtových blokov. Používateľ nemusí ošetrovať prechod programu na ďalšiu pamäťovú stránku, pretože M8C automaticky zvyšuje 16-bitový register PC pri každej inštrukcii presahujúcej hranice aktuálnej stránky. V pamäti SROM je uložený program využívaný na spúšťanie PSoC, kalibrovanie obvodov a vykonávanie operácií s pamäťou Flash. Funkcie zabezpečované SROM sú volané z programu uloženého v pamäti Flash alebo pomocou programátora. Adresný priestor registrov je využívaný na konfigurovanie programovateľných blokov mikroprocesora. Skladá sa z dvoch 256-bajtových blokov. Na prepínanie medzi blokmi sa nastavuje bit XIO v registri F. Ak je F nastavený, zvolí sa blok1, ak nie je nastavený, zvolí sa blok0.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_adresnypriestor.png]]<br />
|-<br />
| align="center" | Obr. 2.3 Adresný priestor<br />
|}<br />
</center><br />
<br />
=== Inštrukčné formáty ===<br />
<br />
M8C má spolu sedem inštrukčných formátov, ktoré používajú inštrukcie o dĺžkach jeden, dva a tri bajty. Všetky bajty inštrukcie sú vyvolávané z programovej pamäte Flash, za použitia adries a dátovej zbernice, ktoré sú nezávislé od adries a dátovej zbernice používaných pre registre a prístup do pamäte RAM. <br />
<br />
== Digitálne a analógové bloky PSoC ==<br />
<br />
Digitálne a analógové bloky sú moduly vytvorené z digitálnych a analógových prvkov, ktoré sú konfigurovateľné pre rôzne druhy operácií pomocou registrov špecifických pre každý blok.<br />
<br />
=== Analógové bloky ===<br />
<br />
Na rozdiel od digitálnych blokov, kde blok z užívateľského hľadiska vlastne predstavuje sústavu registrov v ktorých sa zvolí funkcia bloku, sú analógové bloky v podstate založené na obvodovom zapojení obsahujúce jeden operačný zosilovač (OZ) obklopený rôznymi, vo vnútri integrovanými, súčiastkami pripojovanými k OZ cez programovateľné spínače. Tie sú už ovládané nastavením bitov registrov bloku prístupné užívateľovi. Takto je možné u každého bloku definovať použité vstupy i spätné väzby. Analógové bloky: PGA, komparátory, ADC 6-14 bitov, rôzne konfigurácie, DAC 6-9 bitov, DAC 6-9 bitov.<br />
<br />
=== Digitálne bloky ===<br />
<br />
Digitálne bloky sú združené v poli digitálnych blokov (Array of Digital PSoC Blocks), pričom sú tu rôzne bloky (užívateľské modely) z pohľadu ich funkcie. Obecne však platí, že každý blok je 8bitový, ale združovaním viacerých blokov dohromady je možné vytvoriť viac bitovú funkciu, napr. 16, 24 alebo 32bitovú. Nutný je iba dostatočný počet blokov.<br />
Digitálny blok ako taký je z užívateľského hľadiska definovaný ako sada registrov, ktorými sa nastavujú vlastnosti daného bloku. Nie je teda možné, na rozdiel od obvodov FPGA a CPLD, predstavovať si konkrétne zapojenie blokov. Je len možné vymenovať funkcie, ktoré ktoré sa dajú registrami „zapnúť“. Obvykle sa blokmi poskytujú funkcie časovača, čítača, PWM, sériové vysielače a prijímače, UART, SPI, I2C, IrDA...<br />
<br />
<references/></div>Dusanhttp://www.kiwiki.info/index.php?title=Preh%C4%BEad_architekt%C3%BAry_PSoC&diff=5452Prehľad architektúry PSoC2010-06-22T16:28:31Z<p>Dusan: </p>
<hr />
<div>Mikroprocesory PSoC (Programmable System on Chip – Programovateľný systém na čipe) sa skladajú z konfigurovateľných blokov analógových obvodov a digitálnej logiky, ktoré sú vzájomne programovo prepojené. Uvedená architektúra umožňuje vytvárať zákaznícke konfigurácie mikroprocesora tak, aby boli splnené požiadavky potrebné na realizáciu jednotlivých aplikácií. Bloková schéma na Obr. 1.1 zobrazuje architektúru celej rodiny mikroprocesorov PSoC. <br />
<br />
== Vnútorná štruktúra PSoC ==<br />
<br />
Spoločnosť Cypress vyvinula niekoľko desiatok typov súčiastok typov PSoC. Líšia sa predovšetkým množstvom a druhom blokov, veľkosťou pamäti programu (FLASH), pamäťou dát (RAM), veľkosťou a druhom puzdier a ďalšími parametrami. V závislosti na type obsahujú 4-16 digitálnych a 3-12 analógových blokov. <br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_struktura.png]]<br />
|-<br />
| align="center" | Obr. 1.1 Vnútorná štruktúra PSoC<br />
|}<br />
</center><br />
<br />
== M8C – procesorové jadro ==<br />
<br />
Na Obr. 2.1 sú zobrazené prvky architektúry jadra PSoC. Procesor je 8-bitový a dokáže spracovať až 4 milióny inštrukcií za sekundu.<br />
8-bitová architektúra podporuje použitie až 64 kilobajtov pamäti Flash, v ktorej je uložená užívateľská aplikácia. Flash pamäť je „in-circuit programmable“, takže PSoC je možné programovať aj potom, ako je zapojený do dosky plošných spojov. Flash je zároveň aj „in-application programmable“, čo znamená, že mikroprocesor je schopný dynamicky meniť svoju vlastnú pamäť. Procesor je pripojený k viacerým digitálnym a analógovým blokom, ktoré poskytujú funkcionalitu a flexibilitu charakteristickú pre celú rodinu PSoC. <br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_JadroPSoC.png]]<br />
|-<br />
| align="center" | Obr. 2.1 Jadro PSoC<br />
|}<br />
</center><br />
<br />
=== Registre procesora M8C ===<br />
<br />
M8C je 8-bitový mikroprocesor MIPS harvardskej architektúry s voliteľnou hodinovou frekvenciou od 93.7 kHz do 24 MHz. Má päť vnútorných registrov, ktoré sú využívané pri vykonávaní programu.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_registreprocesora.png]]<br />
|-<br />
| align="center" | Obr. 2.2 Registre procesora M8C<br />
|}<br />
</center><br />
<br />
=== Štruktúra pamäte M8C ===<br />
<br />
M8C má tri adresné priestory: ROM, RAM a registre. K adresnému priestoru ROM pristupujeme cez jeho vlastné adresy a dátovú zbernicu. ROM zahŕňa SROM a Flash pamäte. V pamäti Flash je uložený firmvér zariadenia a je rozdelená do 64-bajtových blokov. Používateľ nemusí ošetrovať prechod programu na ďalšiu pamäťovú stránku, pretože M8C automaticky zvyšuje 16-bitový register PC pri každej inštrukcii presahujúcej hranice aktuálnej stránky. V pamäti SROM je uložený program využívaný na spúšťanie PSoC, kalibrovanie obvodov a vykonávanie operácií s pamäťou Flash. Funkcie zabezpečované SROM sú volané z programu uloženého v pamäti Flash alebo pomocou programátora. Adresný priestor registrov je využívaný na konfigurovanie programovateľných blokov mikroprocesora. Skladá sa z dvoch 256-bajtových blokov. Na prepínanie medzi blokmi sa nastavuje bit XIO v registri F. Ak je F nastavený, zvolí sa blok1, ak nie je nastavený, zvolí sa blok0.<br />
<br />
<center> <br />
{|class="wikitable"<br />
| align="center" | [[Image:Pagac_adresnypriestor.png]]<br />
|-<br />
| align="center" | Obr. 2.3 Adresný priestor<br />
|}<br />
</center><br />
<br />
=== Inštrukčné formáty ===<br />
<br />
M8C má spolu sedem inštrukčných formátov, ktoré používajú inštrukcie o dĺžkach jeden, dva a tri bajty. Všetky bajty inštrukcie sú vyvolávané z programovej pamäte Flash, za použitia adries a dátovej zbernice, ktoré sú nezávislé od adries a dátovej zbernice používaných pre registre a prístup do pamäte RAM. <br />
<br />
== Digitálne a analógové bloky PSoC ==<br />
<br />
Digitálne a analógové bloky sú moduly vytvorené z digitálnych a analógových prvkov, ktoré sú konfigurovateľné pre rôzne druhy operácií pomocou registrov špecifických pre každý blok.<br />
<br />
=== Analógové bloky ===<br />
<br />
Na rozdiel od digitálnych blokov, kde blok z užívateľského hľadiska vlastne predstavuje sústavu registrov v ktorých sa zvolí funkcia bloku, sú analógové bloky v podstate založené na obvodovom zapojení obsahujúce jeden operačný zosilovač (OZ) obklopený rôznymi, vo vnútri integrovanými, súčiastkami pripojovanými k OZ cez programovateľné spínače. Tie sú už ovládané nastavením bitov registrov bloku prístupné užívateľovi. Takto je možné u každého bloku definovať použité vstupy i spätné väzby. Analógové bloky: PGA, komparátory, ADC 6-14 bitov, rôzne konfigurácie, DAC 6-9 bitov, DAC 6-9 bitov.<br />
<br />
=== Digitálne bloky ===<br />
<br />
Digitálne bloky sú združené v poli digitálnych blokov (Array of Digital PSoC Blocks), pričom sú tu rôzne bloky (užívateľské modely) z pohľadu ich funkcie. Obecne však platí, že každý blok je 8bitový, ale združovaním viacerých blokov dohromady je možné vytvoriť viac bitovú funkciu, napr. 16, 24 alebo 32bitovú. Nutný je iba dostatočný počet blokov.<br />
Digitálny blok ako taký je z užívateľského hľadiska definovaný ako sada registrov, ktorými sa nastavujú vlastnosti daného bloku. Nie je teda možné, na rozdiel od obvodov FPGA a CPLD, predstavovať si konkrétne zapojenie blokov. Je len možné vymenovať funkcie, ktoré ktoré sa dajú registrami „zapnúť“. Obvykle sa blokmi poskytujú funkcie časovača, čítača, PWM, sériové vysielače a prijímače, UART, SPI, I2C, IrDA...</div>Dusan