Visoka Tehnicka Skola Nis. Vezba 8 jquery UI

Transcription

1 Vezba 8 jquery UI Cilj vežbe: Upoznavanje sa naprednim mogućnostima jquery UI biblioteke Korišćenje widgeta i prosleđivanje parametara Korišćenje metoda za interakciju jqueryui omogućava apstrakciju za interakciju i animaciju niskog nivoa, napredne animacione efekte i themable widget-e visokog nivoa. Napravljen je on top jquery biblioteke kako bi omogućio pravljenje visoko bi-interaktivnih veb aplikacija. Još od nastanka veb aplikacija programeri su imali problem sa ograničenim brojem kontrola (elemenata) koje su im na raspolaganju po HTML standardu. Iako podrška za osnovnu paletu kontrola postoji, ona značajno zaostaje za mogućnostima koje pružaju kontrole u desktop aplikacijama. Takođe je menjanje izgleda kontrola i Slika 1 - logo jqueryui bilioteke usaglašavanje izgleda naporan i težak posao. HTML5 standard donosi značajni napredak na ovom polju, a biblioteke kao što je jqueryui nam nude skup najčešće korišćenih kontrola koje nedostaju u standardnom skupu onih definisanih HTML standardom, kao i CSS framework za uređivanje izgleda ovih kontrola. U poglavlju 4 ćemo se detaljnije baviti lakom proširivošću jquery biblioteke i pisanjem plugin-ova. Sam jqueryui je više od običnog plugin-a. On uživa status zvanične ekstenzije jezgra jquery-ja u cilju pružanja naprednog bogatog i intuitivnog korisničkog interfejsa sa UI konstruktima (widget-ima) visokog nivoa. Na sajtu sa koga se ova biblioteka može preuzeti piše da je jquery biblioteka za interakcju i widget-e implementirana preko jquery JavaScript biblioteke koju možete koristiti za kreiranje visoko interaktivnih veb aplikacija. Korisnički interfejs modernih Web aplikacija zahteva brzi razvoj i proverene rezultate. jqueryui pruža solidnu platformu za razvoj bogatih i interaktivnih interfejsa sa maksimalnim stepenom stabilnosti i kompatibilnosti, sa minimalno uloženog truda i utrošenog vremena. Ova biblioteka nam omogućava dodavanje različitih efekata kao što su selektovanje, sortiranje, menjanje veličine elemenata, drag and drop, kao i nekoliko gotovih widget-a sjajnog izgleda sa nizom logičnih, konzistentnih opcija. Na ovaj način je količina koda koju je potrebno napisati da bi projekat prošao proces od koncepcije do gotove aplikacije značajno smanjena. Zamislite widget za izbor datuma (datepicker) koji se jako često koristi. Mogli bismo da analiziramo zahteve i da ga implementiramo u jquery-ju, ali UI biblioteka je već analizirala najčešće korišćene komponente u veb stranama i pruža nam gotove, već implementirane komponente, spremne za korišćenje sa minimalnom količinom podešavanja. Pošto se jqueryui izvršava preko jquery biblioteke, sintaksa za inicijalizaciju, konfiguraciju i manipulisanje različitim komponentama je napisana u istom prepoznatljivom stilu koji je lak za korišćenje. Automatski dobijamo na korišćenje i sve sjajne jquery funkcionalnosti. Biblioteka je takođe podržana raznim korisnim 1

2 alatima, kao što je CSS framework koji pruža niz pomoćnih CSS klasa i sjajni alat ThemeRoler koji vam omogućava da kompletno kreirate vizuelni izgled (temu) vaših widget-a, odnosno aplikacije. 1. Kategorije komponenti Za razliku od jquery biblioteke, UI je skup zasebnih modula koji mogu da funkcionišu nezavisno jedan od drugog. Na sajtu biblioteke možete izabrati koje komponente su vam neophodne i preuzmete samo njih, a naravno možete preuzeti i celu biblioteku. Komponente su podeljene u tri grupe: Efekti - napredni efekti koji nisu podržani osnovnom bibliotekom; Interakcije - funkcije niskog nivoa koje su uglavnom dizajnirane kao odgovor na događaje miša; Widget-i niz obično korišćenih kontrola (kao što su progress bar, klizači, dijalozi, tabovi) dizajniranih za specifičnu funkciju, koji rezultiraju vidljivim objektom na strani. Interakcijske funkcije trenutno podržane od verzije 1.11 su: Draggable omogućava prevlačenje komponente Droppable omogućava spuštanje komponente Resizable omogućava menjanje veličine komponente Selectable omogućava selekciju komponente Sortable omogućava sortiranje komponente Widgeti visokog nivoa koji su trenutno podržani su: Accordion vrsta kontejner elementa, slično kao tab Autocomplete mogućnost automatskog kompletiranja reči u input poljima Button dugme koje je moguće stilizovati Datepicker widget za biranje datuma Dialog dijalog, modalni ili običan Manu - Meni Progressbar Slider klizač Spinner Tabs Tabovi Tooltip 2

3 Može se reći da trenutno jqueryui biblioteka prolazi kroz period ubrzanog razvoja i proširenja. Konstantno se unapređuje i dodaju se nove funkcionalnosti i komponente pa je nemoguće sveobuhvatnije je analizirati, jer se nove komponente izbacuju na bukvalno nekoliko meseci. API za svaku komponentu se sastoji iz niza različitih metoda. Iako su tehnički sve ovo metode, bilo bi korisno da ih organizujemo na osnovu njihovih funkcionalnosti. Plugin metode se koriste za inicijalizaciju widget-a i predstavljaju jednostavno ime tog widget-a Zajedničke metode su metode koje postoje u svim komponentama. Metoda Destroy se može iskoristiti za kompletno ukidanje (disable) widget-a i najčešće vraćanje stanja HTML strukture u originalno stanje. Metoda options koriste sve komponente za postavljanje i čitanje neke opcije nakon inicijalizacije. Metode enable i disable koriste gotovo svi widget-i. Hendlere za događaje na primer tab widget ima događaje activate i load za koje se može vezati neki handler Metode se pozivaju tako što se ime metode prosledi kao prvi parametar u obliku stringa, a zatim se prosledi i ostali parametri po potrebi. Navedimo primere poziva za neke od metoda: $("#someelement").datepicker(); // inicijalizacija datepicker widgeta $("#someelement").tabs("disable", 1); //Onemogućavanje taba sa id-jem 1 $("#someelement").tabs("enable", 1); //Prikazivanje taba sa idjem 1 $("#someelement").accordion("options", //postavljanje opcije nakon inic. "fillspace", true); 2. ThemeRoller kako kreirati svoju temu ThemeRoller je alat napisan u jquery-ju i PHP-u. Omogućava da vizuelno kreirate vašu sopstvenu jqueryui temu i skinete je kao fajl, koji zatim dodate u vašu aplikaciju kao običan CSS fajl. Možete ga naći na adresi zajedno sa detaljnim uputstvom za korišćenje, pa se time nećemo detaljnije baviti u ovo radu. 3

4 CSS frejmvrok jqueryui, naročito skup widget-a, se dosta oslanja na CSS klase koje su definisane u okviru fajla koji dobijete zajedno sa jqueryui bibliotekom i koji morate da uključite u vašu aplikaciju. Ali, kao što ćemo pokazati u sledećim redovima, imena klasa koja su dodeljena elementima widget-a se koriste za mnogo više stvari od stilizovanja. Štaviše, imena klasa se koristiti kao neka vrsta meta podataka pomoću kojih elementima dodeljujemo semantičko značenje. Postoji više načina da postavite temu na koju se oslanja jqueryui. Tako možete: Izabrati gotovu temu sa sajta biblioteke; Upotrebiti ThemeRoler, Web aplikaciju za kreiranje potpuno nove teme, ili možete modifikovati neku od već postojećih; Na kraju možete ručno menjati fajlove koje ste preuzeli sa sajta UI biblioteke i na taj način modifikovati temu. Pogledajmo kako su CSS fajlovi i imena klasa organizovani: Pregled CSS Frameworka Iako su predefinisane teme odlične, mala je verovatnoća da ćemo naći neku koja se potpuno uklapa se u stil naše veb aplikacije. Verovatno vam se nije jednom desilo da naručilac aplikacije kaže: "A da li bi mogla ova boja da bude tamno plava?". ThemeRoller nam može pomoći da napravimo temu koja ima tačno one boje, teksture i ikone koje želimo. Čak i tada ćemo verovatno morati da radimo minimalne korekcije na svakoj od strana. Zato je bitno da razumemo na koji način se CSS klase dodeljuju i koriste od strane jquery biblioteke. Imenovanje klasa Imenovajne klasa u jquery-ju je opsežno ali dobro organizovano. Imena klasa su odabrana tako da reflektuju ne samo značenje, već i način i mesto upotrebe ovih klasa. Prvo, da bismo obezbedili da ne dođe do poklapanja sa klasama iz drugih biblioteka, sva imena jquery klasa počinju sa ui-. Imena su uvek napisana malim slovima, a crtica se koristi za razdvajanje reči, na primer ui-state-active. Neke klase se koriste često i na više mesta u biblioteci. Gore navedenu klasu ui-state-active koriste svi elementi biblioteke da označe da je element aktivan. Na primer, Tab widget će je koristiti da označi otvoreni tab, a accordion će njom označiti otvoreni accordion panel. Kada je klasa specifična za određenu komponentu, bilo u widget-u ili u komponenti za interakciju, ime te komponente ćemo navesti odmah iza ui- prefiksa. Na primer ui-autocomplete ili uiresizable. Identifikovanje Widgeta Kada se kreira widget, neki elementi mogu biti kreirani od strane UI biblioteke, a neki mogu biti definisani ranije i već prisutni na Web strani. Kako bi označio elemente koji čine widget, jquery koristi skup klasa koje počinju sa ui-widget. Klasa ui-widget se koristi da označi master element widget-a, obično kontejner element koji je roditelj svih ostalih elemenata koji čine widget. Ostale klase kao ui-widget-header i ui-widget-content se koriste za odgovarajuće elemente widget-a. Način na koji se one koriste je specifičan za svaki widget. 4

5 Ikone jqueryui biblioteka definiše veliki broj ikona koje se mogu koristiti u različitim widget-ima. Na primer, dodavanje ikone nekom dugmetu. Svaka ikona je definisana imenom klase koje počinje sa ui-icon, na primer, ui-icon-person, ui-icon-print i ui-icon-arrowthick-1-sw. Rukovanje ikonama je maksimalno optimizovano tako što su sve smeštene u okviru jedne slike stranice sa ikonama. Na taj način kada se ova slika jednom skine i kešira od strane čitača, vaša aplikacija nema potrebu za dodatnim zahtevima serveru jer će sve ikone (njih ukupno 173) čitati iz keša klijenta. Imena klasa ikona određuju poziciju, odnosno deo slike koji treba iseći i dodeliti je kao pozadinu selektovanom elementu. Primer 1: Dodavanje jquery UI biblioteke <link rel="stylesheet" href=" /> <script src=" <script src=" Primer 2: Pozivanje dijaloga <script> $(function() { $( "#dialog" ).dialog(); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); </script> <body> <div id="dialog" title="basic dialog"></div> <button id="opener">open Dialog</button> </body> </html> Primer 3: Kreiranje dijaloga sa parametrima koji sadrži formu $(function() { $( "#dialog" ).dialog({ autoopen: false, show: { effect: "blind", duration: 1000, hide: { effect: "explode", duration: 1000 $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); 5

6 Primer 4: Primer korišćenja Dragable interakcije za kreiranje shoping liste $(function() { $( "#catalog" ).accordion(); $( "#catalog li" ).draggable({ appendto: "body", helper: "clone" $( "#cart ol" ).droppable({ activeclass: "ui-state-default", hoverclass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", $( this ).find( ".placeholder" ).remove(); $( "<li></li>" ).text( ui.draggable.text() ).appendto( this ); ).sortable({ items: "li:not(.placeholder)", sort: function() { // gets added unintentionally by droppable interacting with sortable // using connectwithsortable fixes this, but doesn't allow you to customize active/hoverclass options $( this ).removeclass( "ui-state-default" ); Primer 5: Primer Dropable funkcionalnosti $(function() { $( "#japanpeople" ).draggable(); $( "#indiapeople" ).draggable(); $( "#japan" ).droppable({ accept: "#japanpeople", $( this ).addclass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" ); $( "#india" ).droppable({ accept: "#indiapeople", $( this ).addclass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" ); $( "#javatutorial" ).draggable({scope : "java" $( "#springtutorial" ).draggable({scope : "spring" $( "#java" ).droppable({ scope: "java", $( this ).addclass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" ); 6

7 $( "#spring" ).droppable({ scope: "spring", $( this ).addclass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" ); Samostalan rad studenta Zadatak 1: Napraviti web stranicu sa jednim edit box elementom. Klikom na element otvoriće se datepicker widget. Zadatak 2: Napraviti bar dva date polja sa date picker widgetom. Drugo polje ograničiti tako da je moguće izabrati samo datume od 15. Novembra do 15. Januara. Zadatak 3: Napraviti web stranicu na kojoj će se nalaziti dugme. Klikom na dugme otvoriće se dijalog. Na otvaranje dijaloga primeniti različite efekte (za otvaranje blind, za zatvaranje explode). Zadatak 4: Kreirati dva datepicker polja. U prvo uneti datum za predaju projekta. U drugo uneti datum obrane projekta. Klikom na dugme otvoriti dijalog u kome će biti ispisan tekst: Datum za predaju projekta je Wed Jan Odbrana projekta je: Thu

8 Zadatak 5: Kreirati web stranicu sa tab widgetom koji ima bar 3 taba i dodati proizvoljan tekst unutra. Zadatak 6: Izmeniti kod u primeru 3 tako da se svi uneti podaci u dijalogu prikažu u tabeli na istoj strani. (kao pomoć pročitati API za dijalog widget, naročito sledeći link Zadatak 7: Izmeniti kod u primeru 4 tako da se ispod korpe za kupovinu prikaze i broj artikla koji se trenutno nalaze u korpi. 8

9 Zadatak 8: Izmeniti kod u primeru 5 tako da je element nemoguće pomeriti nakon što se on spusti na svoje predviđeno mesto. ( hint: ). 3. Literatura Student Overava 9