internet programiranje

INTERNET PROGRAMIRANJE Autor: Mr Bogdan Brkid BANJA LUKA COLLEGE Banja Luka 2013/2014

Sadržaj

│Internet programiranje

Sadržaj

MODULI 1-3: HTML

1. Uvod

2. Tagovi

2.1. Deklaracija HTML dokumenta i zaglavlje (head)

2.2. Naslovi H1,...,H6

2.3. Paragraf

2.4. Formatiranje teksta

2.5. Horizontalna linija

2.6. Boja pozadine stranice i podrazumijevana boja teksta

2.7. Nenumerisane liste (unordered lists)

2.8. Numerisane liste (ordered lists)

2.9. Definicione liste (definition lists)

2.10. Prikazivanje slika

2.11. Linkovi

2.12. Tabele

2.13. Frejmovi

2.14. Zvuk

2.15. Forme

MODULI 4-7: CSS

MODULI 8-9: Uvod u programski jezik JAVA

Tri tipa aplikacija

Edicije Java platforme

Paketi i dokumentacija

Upotreba paketa

Definisanje paketa

Organizacija Java programa

Primjer Java programa

Stil pisanja koda

Komentari

Imena

UgraĎeni tipovi

Promjenljive

Konstante

Često korištene klase: System, Math, String, Scanner

Sadržaj


Klase omotači: Byte, Short, Integer, Long, Float, Double, Character i Boolean

Operatori

Složene naredbe

Metodi - procedure i funkcije u programskom jeziku Java

MODUL 10: Osnove objektno orjentisanog programiranja u Javi

Definicija klase

Promjenljive klasnog tipa

Konstrukcija i inicijalizacija objekata

Uklanjanje objekata

Enkapsulacija - skrivanje podataka - public vs private

This prefiks polja

NasleĎivanje klasa

Hijerarhija klasa

Rezervisana riječ super – zaklanjanje polja i nadjačavanje metoda

Modifikator final – sprečavanje nadjačavanja metoda i zaklanjanja klasa

Konstruktori naslijeĎenih klasa

Klasa Object

Polimorfizam

Polimorfizam i preopterećeni metodi

Polimorfizam i nadjačani metodi

MODUL 11: Java – nizovi matrice i obrada grešaka

Nizovi i matrice

Višedimenzionalni nizovi

Metodi sa promjenljivim brojem argumenata

Ograda grešaka u Java programima - izuzeci

MODUL 12: Java Servlets

Java Web aplikacije

Radno okruženje za kreiranje Java Servleta

Instalacija potrebnih programa

Kreiranje testnog servleta

Jednostavan servlet sa instalacijom na Tomcat server

Servleti

Obrada GET metoda

Obrada POST metoda

MODUL 13: JavaServer Pages

MODUL 14: Tehnologije Java Internet programiranja - JavaServer Faces

MODUL 15: JavaServer Faces - RichFaces

HTML 1-3-1


MODULI 1-3: HTML 1. Uvod HTML (HyperText Markup Language) je jezik koji služi za kreiranje stranica koje se mogu prikazivati u čitačima Web-a. HTML ne zavisi od platforme na kojoj se izvršava. HTML se piše u formi elemenata koji se sastoje od tagova (npr. <html> tag), unutar kojih se nalazi sadržaj. HTML tagovi se najčešde koriste u parovima kao npr. <h1> i </h1>, ali ima tagova koji se ne koriste u parovima kao npr. <img> tag. U „uparenim“ tagovima prvi tag se obično naziva početni ili otvarajudi, a drugi krajnji ili zatvarajudi. Između uparenih tagova mogude je dodati: tekst, druge tagove, komentare ili neki drugi tekst-bazirani sadržaj. Sadržaj koji opisuje HTML kod obično se nalazi u .html ili .htm fajlovima. Svrha Web čitača je da ispravno interpretira/prikaže HTML stranice. Čitač ne prikazuje tagove odnosno izvorni HTML kod, ved ga interpretira kao sadržaj stranice. HTML tagovi su gradivni elementi svake stranice. U HTML stranice mogude je dodati i slike i druge objekte kao što su kod za formatiranje (CSS) ili kod za izvršavanje naredbi u nekom skript jeziku (JavaScript). Takođe je mogude kreirati i interaktivne forme, čime se omogudava prihvat podataka od posjetioca stranice. HTML stranice mogu se nalaziti na serveru koji je na Internetu, u lokalnoj mreži ili na desktop računaru. Često se kaže da se pomodu HTML jezika generiše hipertekst. Odatle i potiče skradenica HTML. Šta je hipertekst? Hipertekst je sadržaj koji sadrži veze prema drugim stranicama ili prema samoj sebi. Te veze se zovu hiperveze. Interakcija sa korisnikom najčešde se ostvaruje pritiskom na hipervezu. Za kreiranje HTML stranica mogu se koristiti i najobičniji tekst procesor kao npr. Notepad, Notepad++, WordPad, ... ali i neki GUI program kao npr. Adobe DreamWeaver. HTML stranice pregledaju se „Web čitačima“. Najpoznatiji su: Mozilla Firefox, Internet Explorer, Opera, Google Chrome, ... Kratak istorijat:

HTML 2.0 1995 HTML 3.2 1997 HTML 4.0.1 1999 HTML 5 2012 (još uvijek u razvoju; smanjuje potrebu za dodacima, bolja obrada grešaka, markap oznake koje smanjuju potrebu za skriptovima, novi elementi/tagovi i kontrole forme, bolje podrška za audio i video, ...)

HTML 1-3-2


2. Tagovi

Tagovi su osnovni elementi HTML jezika.

Tagovi omogudavaju čitaču stranice da zna kako da prikazuje sadržaj.

Tagovi nisu „case sensitive“.

Tagovi se pišu unutar oznaka <>.

Početni tag svakog HTML dokumenta je <html>, a završni je </html>.

Postoje prosti (neupareni) i složeni (upareni) tagovi.

Unutar taga je mogude koristiti atribute koji omogudavaju dodatne informacije o

tagovima. Atributi se uvijek navode u početnom tagu. Daju se u formi ime/vrijednost

primjer: name=“value“

Zajednički atributi svih tagova su:

class predstavlja ime klase i povezuje se sa stylesheet-ovima za definisanje stila elemenata,

id predstavlja jedinstveni identifikator elementa/taga u HTML dokumentu,

style definiše CSS stil za element i

title sadrži dodatne informacije o elementu. Svaki HTML dokument mora imati sledede tagove:

<html></html>

<head></head>

<title></title>

<body></body>

Primjer minimalnog HTML dokumenta: <html> <head><title>Prvi HTML</title></head> <body>Ovo je minimalni HTML dokument.</body> </html>

Komentari u HTML jeziku se označavaju na slededi način: <!—ovo je komentar--> 2.1. Deklaracija HTML dokumenta i zaglavlje (head) Ispred <html> taga nalazi se deklaracija koja omogudava čitačima da ispravno interpretiraju HTML stranicu. Za HTML 4 deklaracija je: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 1-3-3


dok za HTML 5 nije potrebno navoditi deklaraciju. NAPOMENA: Ako želimo pregledati izvorni kod stranice onda u čitaču desnim klikom na površinu na kojoj po mogudnosti nema elemenata desnim klikom sa iskačude liste biramo opciju "View Source Code" ili sličnu. Head dio sadrži informacije o HTML dokumentu i ne prikazuje se u čitaču (osim naslova), dok se u body dijelu nalazi sadržaj koji želimo prikazati. <head> sekcija pored <title> taga koji čuva naslov strane, koja se ispisuje na traci u vrhu čitača, može sadržati i tagove: <style>, <link>, <meta>, <script>, <noscript> i <base>. <style> tag se koristi za definisanje stila.

<style type="text/css"> body { background-color: yellow; } p { color: blue; } </style>

<link> tag se koristi za povezivanje sa nekim drugim fajlovima, a najčešde za povezivanje sa .css fajloviam u kojima se čuvaju stilovi.

<link rel="stylesheet" type="text/css" href="mojstil.css">

Meta podaci se čuvaju u <meta> tagovima. To mogu biti podaci o npr. ključnim riječima, opisima, autoru dokumenta, ...

<meta name="keywords" content="internet, programiranje, html, javascript, css, blc"> <meta name="description" content="Web stranica BLC Banja Luka"> <meta name="author" content="Markovic Marko">

<base> tag definiše podrazumijevanu putanju za sve linkove na stranici. <script> tag omogudava da se unutar njega napiše skripta u nekom od skript-jezika, najčešde JavaScript i obično se koristi za ostvarivanje nekog vida interakcijeinterakcije. 2.2. Naslovi H1,...,H6 Naslove (Headings) treba upotrebljavati kada se stvarno žele istaknuti pojedini naslovi. Headings-e ne treba upotrebljavati da bi se postigao efekat boldovanja ili neki drugi efekat. Za takve efekte treba koristiti odgovarajude tagove.

Primjer upotrebe naslova: <html> <body> <h1>This is heading 1</h1>

HTML 1-3-4


<h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>

2.3. Paragraf Paragraf omogudava formatiranje teksta i može se koristiti sa atributima. Najčešde se koristi align atribut za: lijevo, desno ili centralno poravnavanje teksta

Primjer više paragrafa: <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p>

Unutar paragrafa mogude je prelomiti tekst neuparenim tagom <br>.

<p>Ovaj tekst se nalazi u prvoj liniji<br>a ovaj u drugoj.</p>

HTML 1-3-5


Za poravnavanje čitavog paragrafa koristi se atribut align.

Primjer poravnavanja paragrafa <p align="left">lijevo poravnat paragraf</p> <p align="center">centralno poravnanje</p> <p align="right">desno poravnat paragraf</p>

Vedina čitača de ispravno prikazati paragraf iako on nema zatvarajudi tag. Treba voditi računa da u tom slučaju novi paragraf počinje slededim tagom <p> a do tada važe podešavanja data prethodnim <p> tagom.

Treba primijetiti da sadržaj za koji se čini da je formatiran u editoru teksta možda nede biti ispravno prikazan u čitaču. U slededem primjeru vidi se da je potrebno koristiti <br> tagove: <p>Bio jednom jedan lav Kakav lav? Strasan lav, narogusen i ljut sav! Strasno, strasno! </p>

Da bismo postigli da nam svaki stih bude prikazan u jednom redu moramo na kraju svakog stiha doadati tag <br> !!!

2.4. Formatiranje teksta Za formatiranje teksta koristimo tagove <font></font> i atribute face, color i size.

Primjer formatiranja teksta: <font face="Arial"> Tekst fontom Arial. </font> <font color="#ff0000"> Tekst crvene boje.</font> <font size=5> Tekst velicine 5. </font>

Još jedan primjer formatiranja teksta: <font size=1> Tekst velicine 1. </font><br> <font size=2> Tekst velicine 2. </font><br>

HTML 1-3-6


<font size=3> Tekst velicine 3. </font><br> <font size=4> Tekst velicine 4. </font><br> <font size=5> Tekst velicine 5. </font><br> <font size=6> Tekst velicine 6. </font><br> <font size=7> Tekst velicine 7. </font><br>

Za formatiranje možemo koristiti i tagove:

<b></b> za boldovanje,

<strong></strong> za naglašavanje,

<i></i> za iskošavanje,

<u></u> za podvlačenje,

<strike></strike> za precrtavanje teksta,

<sub></sub> za ispisivanje indeksa (ai) i

<sup></sup> za ispisivanje potencija (b2) .

Primjer: <b>za boldovanje</b><br> <strong>za naglašavanje</strong><br> <i>za iskošavanje</i><br> <u>za podvlačenje</u><br> <strike>za precrtavanje teksta</strike><br> <br> <b>Pitagorina teorema glasi:</b><br><br> c<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup><br> <br> <b>Dat je niz brojeva:</b><br><br> a<sub>1</sub>,a<sub>2</sub>,a<sub>3</sub>,...

Ako želimo da dodamo praznine između riječi koristimo specijalnu oznaku za razmak

Zašto jednostavno ne bismo jednostavno unijeli više razmaka između dvije riječi kada je to potrebno? <p>Ovo je pokušaj ukucavanja vise razmaka izmedju dvije rijeci. Neuspjesan!!!</p> <p>Za razliku od ovog.</p>

HTML 1-3-7


Mogude je koristiti još neke specijalne kodove: < za < > za > & za & © ili © za © ® za ® € za € ... Formatiranje fonta

Font dijela teksta se definiše <font></font> tagovima. Za određivanje fonta, veličine slova i boje koriste se atributi face, size i color. <font color="#ff0000">predmet</font><br> <font face="Comic Sans MS">Internet</font><br> <font size=7>programiranje</font> Za atribut size mogu se koristiti vrijednosti od 1 do 7. Skraćenice

Tag za skradenice je <abbr>. Title atribut obezbjeđuje prikaz sadržaja u iskačudem prozoru.

<abbr title="Banja Luka College">BLC</abbr> je osnovan 2005.godine.

Ispis teksta zdesna ulijevo

Koristi se tag <bdo>. <bdo dir="rtl">Ovaj tekst bice ispisan unatraske. </bdo>

Citiranje

Tagovi: <blockquote> za citat, <q> za znakovenavoda i <cite> za

<h1>About WWF</h1> <p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>

HTML 1-3-8


<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream"> <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p>

2.5. Horizontalna linija Tag za horizontalnu liniju je <hr>. Atributi koji se mogu koristiti su: size za debljinu linije, width za širinu linije, color za boju linije, align za poravnanje i noshade ako se želi zasjenčena linija.

<hr size="4" width="50%"> <hr color=red width="50%" align="left"> <hr size="4" width="50%" noshade>

HTML 1-3-9


2.6. Boja pozadine stranice i podrazumijevana boja teksta Boju pozadine stranice i podrazumijevanu boju teksta postavljamo pomodu bgcolor i text atributa body taga.

<html> <body bgcolor="#ffff00" text="#008000"> <p>Ovo je sadrzaj.</p> </body> </html>

Boje se, pored heksadecimalne notacije, mogu navoditi i imenima. 17 standardnih boja su: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white i yellow. Umjesto boje pozadine, za pozadinu stranice se može postaviti i slika i to pomodu atributa background taga body.

<body background="https://www.google.com/images/srpr/logo11w.png">

2.7. Nenumerisane liste (unordered lists) Označavaju se tagovima <ul></ul> unutar kojih se nalazi proizvoljan broj neuparenih <li> tagova koje nije neophodno „zatvarati“ </li> tagom. Atribut type sa vrijednostima (circle,disc,square) taga <ul>, određuje simbol ispred svakog elementa liste.

Slededi HTML kod demonstrira tri različita stila markera kao i to da tagove u HTML kodu ne moramo kucati u novom redu (novi red isključivo doprinosi čitljivosti, a tagovi kao što su <p> ili <br> utiču na prelom teksta). <ul type="circle"> <li>zima <li>proljece <li>ljeto <li>jesen </ul> <br> <ul type="disc"> <li>zima<li>proljece<li>ljeto<li>jesen </ul> <br> <ul type="square"><li>zima<li>proljece<li>ljeto<li>jesen</ul>

HTML 1-3-10


2.8. Numerisane liste (ordered lists) Označavaju se tagovima <ol></ol> unutar kojih se nalazi proizvoljan broj neuparenih <li> tagova. Atribut type sa vrijednostima (1 za arapske brojeve - podrazumijevan, A za velika slova, a za mala slova, I za rimske brojeve i i za male rimske brojeve) taga <ul>, određuje vrstu brojčane oznake ispred svakog elementa liste.

Ispis numerisane liste sa velikim rimskim brojevima: <ol type="I"> <li>zima <li>proljece <li>ljeto <li>jesen </ol>

2.9. Definicione liste (definition lists) Definicione liste (tagovi <dl></dl>) su nenumerisane liste kod kojih svaka stavka ima termin (tag <dt>) i definiciju (tag <dd>).

Primjer nabrajanja godišnjih doba sa datumima početka i završetka: <dl> <dt>Proljece: <dd>od 21. marta do 21. juna. <dt>Ljeto: <dd>od 21. juna do 21. septembra. <dt>Jesen: <dd>od 21. septembra do 21. decembra. <dt>Zima: <dd>od 21. decembra do 21. marta. </dl>

HTML 1-3-11


Mogude je kreirati i ugnežđene liste i istovremeno koristiti i nenumerisane i numerisane.

Primjer: <ul> <li> 1. godina <ul> <li> Arhitektura racunara <li> Informacioni sistemi </ul> <li> 2. godina <ul type="disc"> <li> Osnove programiranja <li> Baze podataka 1 </ul> <li> 3. godina <ul type="square"> <li> Programiranje <li> Internet programiranje <li> Baze podataka 1 <li> Algoritmi i strukture podataka </ul> </ul>

HTML 1-3-12


2.10. Prikazivanje slika Slike se u HTML sadržaj umedu pomodu taga img koji mora imati barem atribut src.

Primjer: <img src=" https://www.google.com/images/srpr/logo11w.png">

Atribut align sa mogudim vrijednostima: left, right, top, bottom, middle, absmiddle omogudava poravnanje sliku na sledede načine:

left – uz lijevu ivicu dokumenta

right – uz desnu ivicu dokumenta

top – sa vrhom slova u tekudem redu

bottom – sa dnom slova u tekudem redu

middle – donja ivica slova je na sredini slike

absmiddle – sredina slova i sredina slike se poklapaju Za promjenu veličine slike koriste se atributi width i height. Vrijednosti se mogu navoditi kao vrijednosti u pikselima ili procentualno u odnosu na originalnu visinu i širinu. Primjer – slika u HTML-u:  <img src="http://www.w3schools.com/images/w3logotest2.png"><br> <img src="http://www.w3schools.com/images/w3logotest2.png" width="140"><br> <img src="http://www.w3schools.com/images/w3logotest2.png" width="140" height="8"><br><br> <p> <img src="http://www.w3schools.com/images/w3logotest2.png" align="left"><br> <img src="http://www.w3schools.com/images/w3logotest2.png" align="right"><br> </p> <p>TEKST <img src="http://www.w3schools.com/images/w3logotest2.png" align="top"></p> <p>TEKST <img src="http://www.w3schools.com/images/w3logotest2.png" align="bottom"></p> <p>TEKST <img src="http://www.w3schools.com/images/w3logotest2.png" align="middle" height="64"></p> <p>TEKST <img src="http://www.w3schools.com/images/w3logotest2.png" align="absmiddle" height="64"></p>

HTML 1-3-13


Postoji još nekoliko tagova koji se mogu koristiti sa img tagom:

hspace – definiše prostor između okolnog teksta i slike u pikselima (gore i dole),

vspace – definiše prostor između okolnog teksta i slike u pikselima (lijevo i desno),

border – debljina okvira oko slike i

alt – tekst koji de se ispisati: ukoliko sliku nije mogude učitati, ako je u browser-u isključeno prikazivanje slika ili za starije browser-e koji slike nisu ni mogli prikazivati.

Primjer:  <img src="http://www.w3schools.com/images/w3logotest2.png" border="1"> <img src="http://www.w3schools.com/images/w3logotest2.png" hspace="50" vspace="100" border="1"> <img src="http://www.w3schools.com/images/w3logotestXYZ.png" alt="nema slike">

HTML 1-3-14


Ako se slika nalazi na istom sajtu treba navesti samo putanju do foldera.

<img src="/images/w3logotest2.png" border="1">

Ako se slika nalazi na drugom serveru/računaru u odnosu na HTML stranicu, onda treba navesti URL servera i punu putanju.

<img src="https://www.google.com/images/srpr/logo11w.png" border="1">

Sliku je mogude izdijeliti na regione što omogudava da svaki region slike predstavlja link prema nekom drugom sadržaju. Da bismo ovo realizovali moramo koristiti usemap tag u kom navodimo naziv mape. Mapa sadrži informacije o regijama i definiše se unutar map tagova. Svaka regija slike (area tag) obavezno mora sadržati atribute:

shape koji pokazuje kakava je vrsta regiona po obliku u pitanju i može biti: rect, circle i poly,

coords su koordinate regiona i to: četiri broja za koordinate pravougaonika, tri za definisanje kruga gdje prve dvije predstavljaju centar a treda poluprečnik i potreban broj x-y parova za definisanje poligona i

href atribut za definisanje hiperlinka.

Primjer mapiranja Google logotipa tako da svako slovo omogudava link prema jednoj od podsekcija Google-a: <p>Kliknite na jedno od slova da bi ste odabrali jednu od Google stranica:</p> <img src="https://www.google.com/images/srpr/logo11w.png" usemap="#google_sekcije"> <map name="google_sekcije"> <area shape="rect" coords="0,0,137,144" href="https://mail.google.com/mail"> <area shape="circle" coords="187,92,49" href="https://www.google.com/images"> <area shape="circle" coords="285,92,49" href="https://www.google.com/maps"> <area shape="rect" coords="328,42,421,187" href="https://www.google.com/news"> <area shape="rect" coords="415,0,466,141" href="https://www.google.com/play"> <area shape="circle" coords="496,92,49" href="https://www.google.com/translate"> </map>

HTML 1-3-15


2.11. Linkovi Linkovi omogudavaju da sa jedne HTML stranice pređemo na drugu ili da se u okviru iste stranice pozicioniramo na neko drugo mjesto. Da bismo koristili link potrebno je da upotrijebimo uparene tagove <a></a>. Ako želimo da otvorimo link u novom prozoru koristimo atribut target: target="_blank"

<a href=“adresa krajnje pozicije“>Tekst koji opisuje link</a>

Primjeri: <a href="http://www.google.com/ncr">Google</a><br> <a href="http://www.w3schools.com/tags/tag_a.asp">Opis a taga</a><br> <a href="tag_a.asp">Opis a taga</a>

Link može da pokazuje na neku poziciju u okviru iste stranice. Primjer za ovakvu upotrebu linkova može biti npr. pravljenje sadržaja na vrhu stranice. Neophodno je koristiti id ili name atribut.

Slededi primjer omogudava da se sa vrha stranice pozicioniramo direktno na četrnaesto poglavlje sadržaja stranice: <html><body> <p><a href="#C4">See also Chapter 4.</a></p> <h2>Chapter 1</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2><p>This chapter explains ba bla bla</p> <h2><a id="C4">Chapter 4</a></h2><p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 10</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 11</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 12</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 13</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 14</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 15</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 16</h2><p>This chapter explains ba bla bla</p> <h2>Chapter 17</h2><p>This chapter explains ba bla bla</p> </body></html>

HTML 1-3-16


Da bismo razlikovali: neposjedene, posjedene i aktivne linkove možemo ih označiti različitim bojama i za to koristimo atribute link, vlink i alink atributa <body> taga.

<body link="#0000ff" vlink="#ee82ee" alink="#ff0000">

Link (<a> tag) koji ima id ili name atribut je u stvari „sidro“ (anchor) tj. mjesto kom se može pristupiti pritiskom na neki drugi link koji ukazuje na tu lokaciju-sidro. Ako je sidro u nekom drugom fajlu, bilo da je u istom folderu, istom sajtu ili u nekom drugom domenu, navodi se i naziv fajla ili čitav URL.

<a href="content.html#C4">See also Chapter 4.</a> ili <a href="http://www.contoso.com/content.html#C4">See also Chapter 4.</a>

Slika u dokumentu takođe može predstavljati link. To postižemo ugnježđavanjem <img> taga u <a></a> tagove.

<a href="http://www.google.com/ncr"> <img src=" https://www.google.com/images/srpr/logo11w.png ">

</a>

Mogude je kreirati link koji de omoguditi slanje e-mail poruke pokretanjem odgovarajudeg programa:

<a href="mailto:[email protected]">Posaljite e-mail poruku asistentu!</a>

Pored adrese primaoca u link možemo unijeti i podrazumijevani tekst za naslov i sadržaj e-mail poruke:

<a href="mailto:[email protected]?subject=Pitanje za asistenta&body=Ovdje postavite Vase pitanje"> Posaljite e-mail poruku asistentu!</a>

2.12. Tabele Za realizaciju tabela se koriste upareni tagovi: <table>, <tr>, <td> i <th. Njihovo značenje je:

<table> služi za označavanje početka i kraja tabele,

<tr> služi za označavanje početka i kraj reda tabele (unutar <table> tagova),

<td> služi za označavanje početka i kraja kolone/delije (unutar <tr> tagova) i

<th> omogudava realizaciju delija heder reda.

Primjer jednostavne tabele sa dva reda i dvije kolone: <table border="1"> <tr> <td>Red 1, delija 1</td> <td>Red 1, delija 2</td> </tr> <tr>

HTML 1-3-17


<td>Red 2, delija 1</td> <td>Red 2, delija 2</td> </tr> </table>

U istu ovu tabelu rad zaglavlja dodajemo na slededi način: <table border="1"> <tr> <th>Kolona 1</th> <th>Kolona 2</th> </tr> <tr> <td>Red 1, delija 1</td> <td>Red 1, delija 2</td> </tr> <tr> <td>Red 2, delija 1</td> <td>Red 2, delija 2</td> </tr> </table>

Margine delija mogu se podesiti atributima cellpadding i cellspacing taga <table>. Cellpadding atribut u pikselima predstavlja udaljenost sadržaja svake delije od ivice delije, dok cellspacing u pikselima predstavlja udaljenost delija od ruba tabele i od ostalih delija.

U slededem primjeru su prikazane dvije tabele. Jedna je bez, a druga sa atributima cellpadding i cellspacing. <table border="3"> <tr> <td>hello</td> <td>hello3</td> <td>hello5</td> </tr> </table><br> <table border="3" cellpadding="55" cellspacing="5"> <tr> <td>hello</td> <td>hello3</td> <td>hello5</td> </tr> </table>

Visinu i širinu tabele i delija možemo zadavati apsolutno (u pikselima) i relativno (u postocima) i to preko atributa width i height tabele, redova i kolona. Pri tome treba voditi računa da vrijednosti navedene za dimenzije tabele moraju biti u skladu sa dimenzijama redova i kolona. U protivnom može dodi do neželjenog efekta u prikazu elemenata stranice.

Primjer dimenzionisane tabele sa dimenzionisanim redovima i kolonama: <table border="2" height="50%" width="80%">

HTML 1-3-18


<tr height="20%"> <th width="25%">Actor Firstname:</th> <th width="25%">Actor LastName:</th> <th width="50%">E-mail:</th> </tr> <tr height="80%"> <td>Chuck</td> <td>Norris</td> <td>[email protected]</td> </tr> </table>

Ako istu ovu tabelu kreiramo bez height i width atributa, čitač Web-a de sam da formatira tabelu, najčešde u minimalnom obliku: <table border="2"> <tr> <th>Actor Firstname:</th> <th>Actor LastName:</th> <th>E-mail:</th> </tr> <tr> <td>Chuck</td> <td>Norris</td> <td>[email protected]</td> </tr> </table>

Dva važna i veoma primijenjivana atributa <td> taga koji definiše kolonu odnosno deliju unutar reda tabele su colspan i rowspan. Colspan atribut omogudava "protezanje" jedne delije reda duž više delija prethodnog reda. Naravno, takva delija i dalje ostaje u svom redu. Analogno tome, rowspan omogudava “protezanje“ delije po visini duž više redova prethodne kolone. Ova dva atributa najbolje demo objasniti primjerima:

Primjer upotrebe colspan atributa: <table border="1"> <tr> <th>Ispit iz predmeta</th> <th>Ocjena</th> </tr> <tr> <td>Osnove programiranja</td> <td>10</td> </tr> <tr> <td>Programiranje</td> <td>8</td>

HTML 1-3-19


</tr> <tr> <td>Internet programiranje</td> <td>9</td> </tr> <tr> <td colspan="2">Prosjecna ocjena: 8.00</td> </tr> </table>

Primjer upotrebe rowspan atributa: <table border="1"> <tr> <th>Ispit iz predmeta</th> <th>Ocjena</th> <th>Prosjecna ocjena</th> </tr> <tr> <td>Osnove programiranja</td> <td>10</td><td rowspan="3">8.00</td> </tr> <tr> <td>Programiranje</td><td>8</td> </tr> <tr> <td>Internet programiranje</td> <td>9</td> </tr> </table>

Boju pozadine možemo promijeniti pomodu bgcolor atributa i to:

čitavoj tabeli (<table bgcolor=“....“>),

čitavom redu (<tr bgcolor=“....“>),

delijiama pojedinačno (<td bgcolor=“....“>) i

delijama zaglavlja (<th bgcolor=“....“>).

Primjer promijene boje tabele, zaglavlja, reda i delije: <table border="1" bgcolor="red"> <tr> <th bgcolor="white">Kolona 1</th> <th>Kolona 2</th> </tr> <tr> <td bgcolor="blue">Red 1, delija 1</td> <td bgcolor="blue">Red 1, delija 2</td> </tr> <tr bgcolor="violet"> <td>Red 2, delija 1</td> <td>Red 2, delija 2</td> </tr>

HTML 1-3-20


2.13. Frejmovi

Frame okviri Frejmovi omogudavaju da se na jednom prikazu čitača u različitim zonama (površne čitača koja je namijenjena prikazu stranice) prikaže nekoliko dokumenata. Na početku treba istadi da su frejmovi, iako podržani u verziji 4 HTML specifikacije, u praksi ved odavno napušten koncept.

Dademo jednostavan primjer upotrebe frejmova. Čitač treba da učita dvije različite stranice u gornju i donju zonu područja za prikaz sadržaja. <html> <head> <title>Primjer upotrebe frejmova</title> </head> <frameset rows="50%, 50%" frameborder="no" border="3"> <frame src="http://www.w3schools.com/html/default.asp"> <frame src="http://www.w3schools.com/css/default.asp"> </frameset> <noframes>Vas Web citac ne podrzava frejmove !!!</noframes> </html>

HTML 1-3-21


Bez upuštanja u detaljno objašnjavanje navešdemo samo neke atribute "frame" tagova:

src - definiše dokument koji se prikazuje,

bordercolor - definiše širinu linije koja odvaja frejmove,

marginwidth i marginheight - definišu veličinu praznog prostora oko frejma,

name - definiše ime frejma kako bi mu se mogao obratiti neki skript jezik kao npr. JS,

noresize - pokazuje da li korisnik može da mijenja veličinu frejma i

scrolling - pokazuje da li korisnik može da "skroluje" sadržaj kroz frejm. Osim frejmova mogude je koristiti i „inline“ frejmove tj. ugrađene frejmove. Postoji nekoliko stvari koje razlikuju frejmove <frame> i ugrađene frejmove <iframe>:

frejmovi služe da se prostor za prikazivanje sadržaja izdijeli u pravougaonu mrežu, odnosno regije, dok se ugrađeni frejmovi mogu koristiti bilo gdje na stranici bez da se zahtijeva od dizajnera stranice da je segmentira u mrežu,

i u frejmove i u ugrađene frejmove se učitava HTML stranica, ali upotrebom ugrađenih frejmova <iframe> mogude je uključiti samo jednu vanjsku stranicu dok obični frejmovi sa svojom segmentacijom podrazumijevaju uključivanje više stranica,

iako postoji podrška svih čitača stranica za frejmove <frames> postoje problemi kod nekih, posebno mobilnih, prilikom njihovog procesiranja,

sa frejmovima <frames> teže je realizovati markere „bookmark“,

organizacija stranice koja koristi frejmove <frames> može biti nejasna za onoga ko je pregleda,

upotreba frejmova <frames> ostavlja manje prostora za preostali sadržaj ...

IFrame okviri Ugrađeni frejmovi se realizuju tagovima <iframe></iframe> a osnovni atributi koji se koriste su:

src sadrži URL stranice koja se prikazuje u frejmu <iframe>,

align za poravnavanje frejma u odnosu na ostali sadržaj stranice,

frameborder koji omogudava prikazivanje 1 ili neprikazivanje 0 ruba oko frejma,

height i width služe za podešavanje visine i širine frejma,

marginheight i marginheight određuju horizontalne i vertikalne margine frejma,

name specifikuje ime frejma i

scrolling obezbjeđuje skrolovanje sadržaja u frejmu (yes, no, auto). Unutar <iframe></iframe> tagova se nalazi tekst koji de biti ispisan ukoliko čitač ne podržava ugrađene frejmove.

<iframe src="http://www.w3schools.com"> <p>Your browser does not support iframes.</p> </iframe>

HTML 1-3-22


Ako želimo u okviru iste stranice obezbijediti da neki link učita novu stranicu u ugrađeni frejm a da osnovna stranica ostane nepromijenjena, onda ugrađeni frejm obavezno moramo imenovati navodedi name atribut, a odredište linka treba da sadrži ime frejma.

U slededem primjeru na nekoj stranici imamo frejm, naziva „MojFrejm“, u koji je inicijalno učitana stranica http://www.w3schools.com. Želimo da pritiskom na neki hiperlink sa glavne stranice u frejm učitamo stranicu sa lokacije http://www.w3schools.com/css/default.asp. To postižemo na sleddi način: <a href="http://www.w3schools.com/css/default.asp" target=”MojFrejm”> Promena frejma u CSS kurs</a> <iframe src="http://www.w3schools.com" name=”MojFrejm”> <p>Vas citac ne podrzava iframes.</p> </iframe> Odmah po učitavanju glavne stranice, a prije pritiska na link, u frejm je učitana stranica koja je navedena u src atributu frejma::

Nakon pritiska na link u frejm se učitava stranica koja je navedena u href atributu linka:

HTML 1-3-23


2.14. Zvuk Unutar HTML stranice možemo omoguditi reprodukciju audio snimka. Ovo je mogude uraditi na tri načina:

upotrebom <embed> taga,

upotrebom <object> taga ili

hiperlinkom.

Primjer reprodukcije zvuka na HTML stranici upotrebom <embed> taga: <embed height="100" width="300" src="http://www.imagevienna.com/fileadmin/mp3/Walzer-An-der-schoenen-blauen-Donau-schloss-schoenbrunn-konzerte-wien.mp3"> <p>Ako ne cujete zvuk Vas citac ne podrzava MP3 audio format.</p> <p>Ili niste ukljucili zvucnike off :)</p> upotrebom <object> taga: <object height="100" width="300" data="http://www.imagevienna.com/fileadmin/mp3/Walzer-An-der-schoenen-blauen-Donau-schloss-schoenbrunn-konzerte-wien.mp3"></object> <p>Ako ne cujete zvuk Vas citac ne podrzava MP3 audio format.</p> <p>Ili niste ukljucili zvucnike off :)</p> ili upotrebom hiperlinka: <a href=" http://www.imagevienna.com/fileadmin/mp3/Walzer-An-der-schoenen-blauen-Donau-schloss-schoenbrunn-konzerte-wien.mp3">Sviraj</a>

HTML 1-3-24


2.15. Forme Forme omogudavaju osobi koja pregleda stranicu da preko elemenata za unos podataka unese neke vrijednosti i unesene podatke pošalje na Web server gdje se oni procesiraju. Iz ovoga je jasno da pored statičnih elemenata koje imamo na klijentskoj strani tj. u samom HTML dokumentu, na serverskoj strani moramo imati odgovarajudi skript u nekom skript jeziku (PHP, ASP, ...) koji de obraditi primljene podatke. Forme se realizuju unutar tagova <form></form>. Prije nego što pređemo na elemente/tagove koji se umedu unutar same forme napomenimo da <form> tag ima dva veoma važna atributa:

action koji sadrži putanju do skript fajla kom de se podaci poslati na obradu i

method kojim je opisana metoda prenosa podataka i koji može biti ili GET ili POST. Za potrebe ovog kursa koristidemo gotove skripte sa sajta http://www.w3schools.com ne analizirajudi način na koji oni rade.

Primjer forme: <form name="input" action="html_form_action.asp" method="get"> . . </form>

Sami <form></form> tagovi nisu dovoljni za realizaciju forme ved su nam potrebni dodatni tagovi kao npr.:

tekstualna polja - <input type="text" ...>,

polja za unos lozinke - <input type="password" ...>,

radio dugmad - <input type="radio" ...>,

čekboksovi - <input type="checkbox" ...>,

dugmad - <input type="submit">,

tekstualna polja za unos vede količine teksta - <textarea> i

padajude liste - <select><option>. Treba primijetiti da se neke kontrole definišu istim tagom <input>, a razlikuju su drugačijim vrijednostima za atribut type. Generalno pravilo je da se unutar forme <form></form> mogu ugnijezditi slededi tagovi:

<input>

<textarea>

<button>

<select>

<option>

<optgroup>

HTML 1-3-25


<fieldset>

<label> <input> tag Kako bismo obuhvatili sve elemente koji se realizuju preko ovog taga obradidemo prvo njegovo svojstvo type koje može da ima sledede vrijednosti:

button

checkbox

file

hidden

image

password

radio

reset

submit

text Primjer upotrebe dugmeta:

<html> <head> <script> function poruka() { alert("Hello world!"); } </script> </head> <body> <form> <input type="button" value="Pritisni me" onclick="poruka()"> </form> <p>Pritisak dugmeta ce aktivirati JavaScript kod.</p> </body> </html>

HTML 1-3-26


Primjer upotrebe CheckBox-ova:

<form action="demo_form.asp"> <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car"> I have a car<br> <input type="checkbox" name="vehicle" value="Boat"> I have a boat<br> <input type="submit" value="Submit"> </form>

Primjer odabira fajla sa lokalnog računara:

<form action="demo_form.asp"> Odaberite fajl: <input type="file" name="img"> <input type="submit"> </form>

Primjer upotrebe skrivenog polja:

<form action="demo_form.asp"> Vase ime: <input type="text" name="fname"><br> <input type="hidden" name="country" value="RS-BIH"> <input type="submit" value="Submit"> </form> <p>Obratite paznju da skriveno polje nije vidljivo korisniku.</p>

Primjer upotrebe dugmeta-slike:

<form action="demo_form.asp"> Ime: <input type="text" name="fname"><br> Prezime: <input type="text" name="lname"><br> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form> <p><b>NAPOMENA:</b> Kada je type="image" salju se X i Y koordinate koje aktiviraju dugme.</p>

HTML 1-3-27


Primjer unosa lozinke:

<form action="demo_form.asp"> Email: <input type="text" name="email"><br> Password: <input type="password" name="pwd" maxlength="8"><br> <input type="submit"> </form>

Primjer upotrebe radio dugmadi:

<form action="demo_form.asp"> <input type="radio" name="gender" value="male"> Muski<br> <input type="radio" name="gender" value="female"> Zenski<br> <input type="submit" value="Submit"> </form>

Primjer upotrebe Reset i Submit dugmadi:

<form action="demo_form.asp"> Email: <input type="text" name="email"><br> Pin: <input type="text" name="pin" maxlength="4"><br> <input type="reset" value="Reset"> <input type="submit" value="Submit"> </form> <p>Kliknite na Reset dugme da bi ste postavili pocetne vrijednosti.</p>

HTML 1-3-28


Primjer upotrebe tekstualnih polja:

<form action="demo_form.asp"> Ime: <input type="text" name="fname" value="... unesite ime ..."><br> Prezime: <input type="text" name="lname" value="... unesite prezime ..."><br> <input type="submit"> </form>

<textarea> tag Ovaj tag omogudava unos vede količine teksta:

<textarea rows="4" cols="50">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>

<button> tag Omogudava dizajneru HTML stranice, da pored Submit i Reset dugmeta, postavi i vlastitu dugmad koja mogu da se koriste u sprezi sa nekim skript jezikom, najčešde JavaScript.

Primjer upotrebe dugmeta na formi: <button type="button" onclick="alert('Hello world!')">Pritisni me !!!</button>

<select> tag Omogudava kreiranje padajudih lista za odabir jedne od ponuđenih opcija. Lista je okarakterisana <select></select> tagovima unutar kojih se za svaku opciju nalazi po jedan <option></option> tag. Ako navedemo multiple atribut mogude je selektovati više vrijednosti iz liste.

HTML 1-3-29


Primjer upotrebe padajude liste: <select> <option value="ar" disabled>Arhitektura racunara</option> <option value="op">Osnove programiranja</option> <option value="pr">Programiranje</option> <option value="ip" selected>Internet programiranje</option> <option value="asp">Algoritmi i strukture podataka</option> </select>

Primjedujemo da atributi disabled i selected omogudavaju da se neka od opcija onemogudi za odabir ili podrazumijevano selektuje. <optgroup> tag Omogudava grupisanje opcija sa padajude liste.

<select> <optgroup label="I godina"> <option value="ar" disabled>Arhitektura racunara</option> </optgroup> <optgroup label="II godina"> <option value="op">Osnove programiranja</option> </optgroup> <optgroup label="III godina"> <option value="pr">Programiranje</option> <option value="ip" selected>Internet programiranje</option> <option value="asp">Algoritmi i strukture podataka</option> </optgroup> </select>

HTML 1-3-30


<fieldset> tag Služi za grupisanje srodnih grupa opcija na nekoj formi. Tag <legend> služi za opis grupe.

<form> <fieldset> <legend>Licni podaci:</legend> Prezime i ime: <input type="text"><br> Adresa stanovanja: <input type="text"><br> Privatni e-mail: <input type="text"><br> Datum rodjenja: <input type="text"> </fieldset> <br> <fieldset> <legend>Podaci o zaposlenju:</legend> Ustanova u kojoj je zaposlen: <input type="text"><br> Adresa ustanove: <input type="text"><br> Sluzbeni e-mail: <input type="text"> </fieldset> </form>

<label> tag Label tag opisuje istale input kontrole. Veza sa input kontrolom se stvara preko for atributa. <form action="demo_form.asp"> <label for="male">Musko</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Zensko</label> <input type="radio" name="sex" id="female" value="female"><br><br> <input type="submit" value="Prihvati"> </form>

HTML 1-3-31


DIV i SPAN elementi DIV tagovi koriste se odvajanje blokova HTML tagova i podjelu stranice u sekcije. Najčešde se koristi u sprezi sa CSS stilovima kako bi se postigao odgovarajudi izgled i pozicioniranje pojedinih dijelova stranice. Treba naglasiti da atribut align DIV taga nije preporučen od HTML verzije 4 a u verziji 5 se ne koristi.

<div id="sadrzaj"> Ova sekcija sadrzi osnovni sadrzaj dokumenta. </div>

SPAN tagovi se koriste za grupisanje elemenata u dokumentu ili kako bi se na pojedine, ved formatirane dijelove teksta, primijenio drugačiji stil.

<p> U ovom paragrafu <span style="color: blue; font-weight: bold;">ovaj dio teksta</span> je drugacijeg stila.</p>

CSS 4-1


MODULI 4-7: CSS CSS je nastao kao potreba da se unutar HTML dokumenta razdvoji sadržaj od formatiranja. Naime, ukoliko Web stranica, a obično je to slučaj, ima više HTML strana veoma je nepraktično formatiranje ponavljati u svakom HTML fajlu pojedinačno. Ako želimo da sve HTML strane našeg sajta izgledaju uniformno onda moramo ostati dosljedni i sa dosadašnjim znanjem sa ovog kursa shvatamo da sva formatiranja u svim pojedinačnim HTML fajlovima moraju biti ista. Problem nastaje kada je potrebno napraviti izmjene u stilu (formatiranju) nekog od elemenata kao što su npr. tabele, naslovi, liste, forme, ... Izmjenu moramo raditi u velikom broju fajlova. U nastavku teksta ravnopravno demo koristiti termine formatiranje i stil. Čak i ako imamo samo jedan HTML dokument može se javiti problem da u istom imamo nekoliko istih elemenata, npr. tabela, pa izmjena stila takođe podrazumijeva promjene na nekoliko mjesta u fajlu. Rješenje za ovaj problem se brzo iskristalisao u vidu CSS-a (skradeno od "Cascading Style Sheets"). Značenje termina "kaskadni" može se protumačiti na dva načina:

promjene u .css fajlu kaskadno se odražavaju na sve dokumente koji koriste date stilove ili

ako imamo nekoliko definicija stila koje su u koliziji primjenjuje se ona lista koja je na dnu.

Prednosti korištenja CSS tehnologije u odnosu na nekorištenje su:

razdvajanje sadržaja od formatiranja,

mogudnost kontrolisanja formatiranja velikog broja dokumenata i

izbjegavanje ponavljanja definicija stilova što dovodi do bržeg učitavanja stranica (CSS fajlovi se keširaju na računaru korisnika pa se izbjegava stalno pribavljanje istih podataka o formatiranju).

Postoji 6 tehnika za primjenu CSS stilova:

stil pretraživača - ukoliko ne definišemo niti jedan stil ovo je podrazumijevani,

korisnički stil - korisnik može da definiše vlastiti stil na nivou pretraživača (ne treba ga miješati sa sledede 4 tehnike),

inlajn stil - definisanje stila unutar elemenata pomodu atributa style,

ugrađeni stil - stil na nivou dokumenta koji se koristi za više elemenata a navodi se unutar taga style,

vezani stil - izdvajanje stilova u .css fajlove i povezivanje pomodu link taga i

uvezeni stil - "uvoženje" stilova pomodu vezane liste stilova.

CSS 4-2


U nastavku kursa koristidemo: inlajn stilove, ugrađene stilove i vezane stilove. Primjer teksta bez stilizovanja:

<html> <body> <h1>CSS primjer!</h1> <p>Ovo je paragraf.</p> </body> </html>

Primjer upotrebe inlajn stilova:

<html> <body style="background-color:#d0e4fe;"> <h1 style="color:orange; text-align:center;">CSS primjer!</h1> <p style="font-family:Times New Roman; font-size:20px;"> Ovo je paragraf.</p> </body> </html>

Primjer upotrebe ugrađenih stilova:

<html> <head> <style> body {background-color:#d0e4fe;} h1 { color:orange; text-align:center;} p { font-family:"Times New Roman"; font-size:20px;} </style> </head> <body> <h1>CSS primjer!</h1> <p> Ovo je paragraf.</p> </body> </html>

CSS 4-3


Primjer upotrebe vezanih stilova:

Sadržaj proba.html fajla:

<html> <head> <link rel="stylesheet" type="text/css" href="proba.css"> </head> <body> <h1>CSS primjer!</h1> <p> Ovo je paragraf.</p> </body> </html>

a sadržaj proba.css fajla sa stilovima je:

body {background-color:#d0e4fe;} h1 { color:orange; text-align:center;} p { font-family:"Times New Roman"; font-size:20px;}

Nasleđivanje stilova U prethodnom primjeru definisali smo stil boje pozadine stranice sa:

<body style="background-color:#d0e4fe;">

Treba primijetiti da su i elementi h1 i p takođe imali istu boju pozadine. Iz ovoga možemo zaključiti da se stilovi nasleđuju kroz hijerarhiju tagova. Kada kažemo kroz hijerarhiju, to znači da body tag ne može naslijediti stil od h1 ili p taga. Tagovi/elementi "djeca" nasleđuju stilove koje i sami mogu definisati od "roditeljskih" tagova/elemenata ako stil za njih nije eksplicitno naveden. Vezane liste stilova - link tag Ved smo rekli da vezane liste stilova podrazumijevaju izdvajanje CSS koda u zasebne fajlove koji se po potrebi sa HTML fajlovima povezuju pomodu link tagova. Razmotrimo atribute link taga:

rel - opisuje vezu linka i za CSS stilove je uvijek stylesheet,

type - definiše format povezanog fajla,

href - ukazuje na fajl sa kojim se vrši povezivanje i

media - omogudava definisanje različitih stilova za različite medije; mogude vrijednosti su: screen, print i handheld a ako se izostavi smatra se da de stil biti podrazumijevan za sve uređaje

CSS 4-4


Formatiranje CSS-a i komentari Pri pisanju CSS koda moguda su dva načina formatiranja: 1. pisanje u istom redu

h1 {background-color:#d0e4fe; color:orange; text-align:center;}

2. pisanje u više redova

h1 { background-color:#d0e4fe; color:orange; text-align:center; }

Iako postoje rasprave o tome da drugi način u velikim CSS fajlovima nosi dodatnu količinu bita/bajtova zbog dodatnih razmaka i prelazaka u novi red, smatra se da je to manje značajno u odnosu na prednost koju nosi čitljivost CSS fajla čiji sadržaj je pisan u više redova. Oznake h1, body, p, table, tr, th, td, ... u CSS kodu zovu se selektori. Selektore možemo i grupisati i na taj način primijeniti jedan stil na više elemenata.

h1, h2, h3 {background-color:#d0e4fe; color:orange; text-align:center;}

Ako za neke elemente čiji je stil definisan grupisanjem selektora u CSS-u pojedine atribute definisati kao jedinstvene onda samo za te selektore i njihove atribute definišemo posebne stilove. Npr. h1 , h2 i h3 elementi imaju istu boju pozadine ali je različita boja ispisa teksta elemenata h3:

h1, h2, h3 {background-color:#d0e4fe; text-align:center;} h1, h2 { color:red;} h3 { color:blue;}

Kao i u vedini programskih i jezika za označavanje i CSS dozvoljava upotrebu komentara. Komentar počinje oznakom /* a završava se oznakom */. Sve što je između ovih oznaka čitači Web-a nede interpretirati. Boje Pomodu CSS tehnologije mogude je odrediti boju pozadine ili neku drugu visualnu karakteristiku boje: čitave stranice, pojedinih elemenata ili tabela. Vrijednosti boje mogu se zadavati na sledede načine:

heksadecimalnim vrijednostima npr. #d0e4fe,

skradenim heksadecimalnim vrijednostima npr. #6C3,

RGB notacijom npr rgb(128,128,128),

CSS 4-5


RGB procentualno npr. rgb(50%,100%,100%) i

imenima npr. red, blue, black, ... Za boju pozadine se može koristiti i vrijednost transparent što omogudava "providnost" elementa. Boja pozadine se može dodijeliti stranici ili pojedinim elementima. Primjeri:

body { background-color> #CCC} h1 { background-color> #CCC} p { background-color> #CCC} table { background-color> #CCC} th { background-color> #CCC} tr { background-color> #CCC} td { background-color> #CCC}

Iz svih ovih primjera vidljivo je da se koristi svojstvo background-color.

<html> <head> <style> body {background-color:#d0e4fe;} h1 { background-color:red; text-align:center;} p { background-color:rgb(0,255,0);} table { background-color:rgb(10%,20%,30%);} th { background-color:#0000ff;} tr { background-color:#00ffff;} td { background-color:#ff0000;} </style> </head> <body> <h1>CSS primjer!</h1> <h2>Podnaslov</h2> <p> Ovo je paragraf.</p> <table border="1"> <tr><th>Kolona 1</th><th>Kolona 2</th></tr> <tr><td>Red 1, delija 1</td><td>Red 1, delija 2</td></tr> <tr><td>Red 2, delija 1</td><td>Red 2, delija 2</td></tr> </table> </body> </html>

CSS 4-6


Prethodni primjer pokazuje kako su zadati stilovi boja pozadine pojedinih elemenata. Treba uočiti još nešto:

tag <h2> nema definisan vlastiti stil pa je stil boje pozadine naslijedio od body taga,

svi tagovi koji imaju definisan stil boje pozadine nadjačali su stil boje pozadine body taga,

tagovi <th>, <tr> i <td> vlastitim stilovima nadjačavaju stil postavljen za <table> i

stil boje za <td> nadjačava stil boje za <tr> ukoliko su oba definisana. Prisjetimo se jednog od objašnjenja termina "kaskadni" kada smo objašnjavali skradenicu "Cascading Style Sheets". Selektori elemenata i klasa Do sada smo koristili samo selektore elemenata. Na koji način? Kada smo željeli da definišemo stil nekog elementa onda smo prvo u definiciji stila navodili naziv elementa/taga a zatim smo navodili podatke o stilu/formatiranju. Primjer: body {background-color:#d0e4fe;} Isto smo radili i sa delijama tabele. Postavlja se logično pitanje: "Šta ako želimo da samo jednoj deliji pridružimo stil razliit od svih ostalih delija? Kako to uraditi?". U tom slučaju koristimo klase i selektore klasa. Da bi smo pojedinom elementu/tagu pridružili klasu koristimo atribut class i navodimo ime klase. Zatim u dijelu u kom definišemo CSS stilove definišemo željeni stil za klasu. Definisani stil klase nadjačava stil elementa. Primjer definicije klase: <td class="highlight">Programski jezik C</td> Primjer definicije stila za klasu: .highlight {background-color: #fff; color: orange;}

CSS 4-7


U slededem primjeru imamo jednu tabelu koja ima samo jedan atribut: cellspacing="5". Svi ostali atributi koji bi eventualno bili iskorišteni za formatiranje izgleda tabele prebačeni su u CSS definiciju stilova. Stil donje desne delije definisan je selektorom klase.

<html> <head> <title>Rad sa stilovima</title> <style type="text/css"> body {color: white;} caption {background-color: #999; border: 1px solid black;} table {background-color: #ccc; border: 1px solid black; padding: 5px; width: 90%;} th {background-color: #333; border:} tr {background-color: #999;} td {background-color: #ccc; border: 1px solid black;} .highlight {background-color: #fff; color: orange;} </style> </head> <body> <table cellspacing="5"> <caption>Programerski predmeti na trecoj i cetvrtoj godini</caption> <tr> <th>Semestar</th> <th>Predmet</th> <th>Opis</th> </tr> <tr> <th>7</th> <td>Internet programiranje</td> <td>HTML, CSS, JavaScript, Java</td> </tr> <tr> <th>6</th> <td>Programiranje</td> <td class="highlight">Programski jezik C</td> </tr> </table> </body> </html>

CSS 4-8


Slike u pozadinama Pozadina stranice ali i bilo kog drugog kog drugog elementa može biti slika. Za ovu namjenu koristi se svojstvo background-image nakon koje se navodi naziv slike sa putanjom upotrebom url() funkcije.

body {background-image: url(http://www.w3schools.com/images/w3logotest2.png);}

Za ponavljanje slike u pozadini koristi se svojstvo background-repeat čije vrijednosti mogu biti:

repeat-x za horizontalno ponavljanje slike,

repeat-y za vertikalno ponavljanje slike ili

no-repeat za prikazivanje bez ponavljanja Ako se ovo svojstvo ne navede ponavljanje je i horizontalno i vertikalno.

<html> <head> <style type="text/css"> body {background-image: url(http://www.w3schools.com/images/w3logotest2.png); background-repeat: repeat-x;} </style> </head> <body>Pozadina ove stranice je slika koja se horizontalno ponavlja.</body> </html>

Način na koji smo do sada postavljali sliku u pozadinu podrazumijevao je pozicioniranje u gornji lijevi ugao odnosno u početak stranice. Ako sliku želimo postaviti na neko drugo mjesto na pozadini stranice koristimo svojstvo background-position nakon kog se navode dvije vrijednosti:

podatak za horizontalno pozicioniranje i

podatak za vertikalno pozicioniranje. Odmak slike pozadine po vertikali i horizontali posmatra se od gornjeg desnog ugla stranice. Vrijednosti za odmak mogu se dati: procentualno, u pikselima ili ključnim riječima.

CSS 4-9


background-position: 0% 0%; gornji lijevi ugao background-position: 100% 100%; donji desni ugao background-position: 20% 70%; 20% desno i 70% dole background-position: 100px 300px; 100px desno i 300px dole background-position: right center; krajnje desno i na pola visine

Ukoliko se koriste postoci i ključne riječi treba redi da se za visinu ne uzima čitava površina čitača za prikazivanje sadržaja ved samo površina koju popunjava HTML sadržaj. Za ključne riječi mogu se koristiti: left, right, top, bottom i center i to u svim logičnim kombinacijama po visini i širini. Npr. besmisleno je istovremeno koristiti vrijednosti right i left. Mogude je koristiti i samo jednu ključnu riječ.

background-position: top; gore na sredini background-position: bottom; dole na sredini background-position: left; lijevo na sredini (po visini) background-position: right; desno na sredini (po visini) background-position: center; na sredini po visini i širini

Vrijednosti u postocima i pikselima se mogu kombinovati ali se ne mogu kombinovati sa ključnim riječima. Ako se zada samo jedna vrijednost (procentualno ili u pikselima) ona se primjenjuje na horizontalno poravnanje a za vertikalno se uzima centralno ili 50%.

<html> <head> <style type="text/css"> body {background-image: url(http://www.w3schools.com/images/w3logotest2.png); background-repeat: no-repeat; background-position: 70% 10%;} </style> </head> <body> <p>Pozadina ove stranice je slika koja se horizontalno ponavlja.</p> <p>Paragraf 2</p> <p>Paragraf 3</p> <p>Paragraf 4</p> <p>Paragraf 5</p> </body> </html>

CSS 4-10


Fiksiranje pozadinskih slika Pozadinsku sliku je mogude postaviti tako da se ne krede prilikom "skrolovanja" stranice ali i tako da se krede zajedno sa stranicom. Za podešavanje ove osobine koristi se svojstvo background-attachment sa vrijednostima scroll (podrazumijevana vrijednost) ili fixed.

<html> <head> <style type="text/css"> body {background-image: url(http://www.w3schools.com/images/w3logotest2.png); background-repeat: no-repeat; background-position: right; background-attachment: fixed;} </style> </head> <body> <p>Pozadina ove stranice je slika koja se horizontalno ponavlja.</p> <p>Paragraf 2 <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> </p> <p>Paragraf 3</p> <p>Paragraf 4</p> <p>Paragraf 5</p> </body> </html>

Skradeno navođenje selektora Neke selektore koji se odnose na istu osobinu elementa kao što je npr. background možemo skratiti. Npr. umjesto:

body { background-color: cyan; background-image: url(http://www.w3schools.com/images/w3logotest2.png); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; }

stil možemo definisati kao:

body {background: cyan fixed url(http://www.w3schools.com/images/w3logotest2.png) no-repeat right top;}

Web dizajnerima se ostavlja na izbor da li de koristiti duži i čitljiviji način ili kradi i manje čitljiv. U skradenoj verziji nije bitan redoslijed vrijednosti.

CSS 4-11


CSS stilizacija teksta Najčešde formatiranje koje se primjenjuje na tekst je određivanje fonta. Fontove prema obliku možemo podijeliti u pet grupa:

serif fontovi sa "bogato ukrašenim" slovima i koriste se za tekst, zaglavlja i naslova; poznatiji fontovi ove grupe su Times i Georgia,

sans-serif ili u prevodu "bez serifa" odnosno bez "bogatog ukrašavanja"; karakterišu ih zaobljena, oštra i šira slova; ne preporučuju se za kratki tekst ili boldovani tekst; poznatiji sans-serif fontovi su: Arial, Helvetica i Verdana,

monospace su fontovi kod kojih su sva slova iste širine; tipičan predstavnik je Courier,

fantasy su dekorativni fontovi i rjeđe se koriste; primjer fantasy fonta je Western,

cursive su fontovi koji imaju oblik rukom pisanih slova i kao i fantasy rijetko se koriste; primjer ovakvog fonta je Lucida Hendwritting.

Sa aspekta pisanja HTML/CSS koda prethodno pobrojane činjenice nisu mnogo značajne ali ih navodimo kako bi smo bolje mogli razumjeti svojstvo font-family. Font-family svojstvo se koristi za definisanje grupe fontova ili određenog fonta. Ovo svojstvo možemo koristiti na nekoliko načina:

navođenjem naziva fonta npr. Arial,

navođenjem grupe fontova pri čemu de čitač odabrati jedan iz grupe npr. sans-serif i

navođenjem jednog ili više naziva fonta i grupa pri čemu de čitač primijeniti prvi instalirani font koji je pronašao uzevši u obzir redoslijed navođenja fontova i grupa.

Primjeri:

body {font-family: Arial;} h1 {font-family: fantasy;} h1 {font-family: Arial, sans-serif;} body {font-family: Arial, Helvetica, Verdana, sans-serif;} body {font-family: Georgia, Times, serif;} h1, h2 {font-family: Arial, Helvetica, sans-serif;}

Kako smo ved savladali način na koji se stilovi generalno definišu i pošto poznajemo pojmove kao što su: element, svojstvo i vrijednost preostala moguda formatiranja teksta dademo u slededoj tabeli:

Svojstvo Mogude vrijednosti Opis

font-size: apsolutno: xx-small, x-small, small,

medium, large, x-large, xx-large

definisanje veličine - apsolutno; veličina medium je obično podrazumijevana veličina u čitaču

font-size: larger, smaller relativno u odnosu na veličinu koja je ved definisana

CSS 4-12


font-size: em, ex, px relativno u jedinicama

font-size: pt, pc, in, mm, cm apsolutno u jedinicama - u svim čitačima tekst izgleda isto

font-size: % relativno u odnosu na neku drugu prethodno definisanu veličinu

font-weight: 100-900; 100 veoma tanka, 900 najdeblja

i 400 normalna "težina" (debljina) slova

font-weight: bold=400, bolder, lighter

"težina" (debljina) slova; bold apsolutno; bolder i lighter relativno u odnosu na prethodnu definiciju

font-style: normal, italic, oblique

stil slova; italic-iskošena; oblique-stilizovanje i ne može se primijeniti na sve fontove

color: heksadecimalno, skradeno

heksadecimalno, rgb(x,y,z) , rgb(x%,y%,z%), imenima

boja teksta

text-align: left, center, right, justify poravnanje teksta

text-decoration: none, underline, overline,

line-through, blink dekoracija teksta

text-indent: apsolutno u px ili relativno %

uvlačenje teksta; relativna vrijednost je u odnosu na pravougaonik oko tok elementa npr. <p>; za izvlačenje teksta mogu se koristiti negativne vrijednosti

text-transform: capitalize, uppercase, lowercase, none

transformacija teksta; capitalize-velika početna slova; uppercase-sva slova velika; lowercase-sva slova mala

font-variant: small-caps, normal promjena izgleda teksta (razlikuje se od promjene veličine fonta)

line-height: apsolutno px, apsolutno, relativno % visina linije teksta; apsolutno bez piksela ima značenje: 1-single, 2-double, ...

letter-spacing: apsolutno px, relativno em ex razmak između slova

word-spacing: apsolutno px, relativno em ex razmak između riječi

CSS 4-13


Primjer primjene formatiranja na različite dijelove teksta:

<head> <title>Rad sa stilovima</title> <style type="text/css"> body {font-family: Georgia, Times, serif; color: black;} h1 {font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-variant: small-caps;} h2 {font-family: Georgia, Times, serif; color: #999; font-size: 18px; font-style: italic; text-transform: lowercase;} .accent {font-weight: 700; color: red; text-transform: uppercase;} p {font-size: 16px; text-transform: capitalize;} </style> </head> <body> <h1>Ovo je H1 naslov sa stilom font-variant: small-caps</h1> <h2>Naslov Sa Svakim Velikim Pocetnim Slovom I Stilom font-variant: small-caps</h2> <p>Paragraf kod kog su prva slova svake rijeci velika jer je text-transform: capitalize , <span class="accent">dok su ova sva velika i crvena jer je ovdje text-transform: uppercase</span> , za razliku od ovih sa kraja paragrafa.</p> </body> </html>

Primjer koji pokazuje kako se podešava visina reda teksta:

<p style="line-height: 20px;">Ovo je paragraf u kom je visina linije zadata sa line-height: 20px; Dodacemo jos malo teksta da bi smo vidjeli koliki je taj razmak kada imamo vise linija teksta.</p> <p style="line-height: 2;">Ovo je paragraf u kom je visina linije zadata sa line-height: 2; Dodacemo jos malo teksta da bi smo vidjeli koliki je taj razmak kada imamo vise linija teksta.</p> <p style="line-height: 65%;">Ovo je paragraf u kom je visina linije zadata sa line-height: 65%; Dodacemo jos malo teksta da bi smo vidjeli koliki je taj razmak kada imamo vise linija teksta.</p>

CSS 4-14


CSS dozvoljava promjenu stila prve linije paragrafa ili nekog drugog elementa kao i promjenu stila prvog slova u paragrafu ili nekom drugom elementu. Za ovu namjenu koriste se selektori pseudoelemenata. Ved smo objasnili pojam selektora i elemenata. Pseudoelement ima takav naziv jer ne predstavlja niti jedan element/tag HTML jezika ved na osobinu pojedinog elementa. Pseudoelement se definiše tako da se nazivu elementa dodaju dvotačka i naziv svojstva. U slučaju podešavanja stila prve linije pragrafa i prvog slova paragrafa koriste se pseudoelementi p:first-line i p:first-letter. Primjeri jos nekih Primjer promjene stila prve linije i prvog slova paragarafa:

<html> <head> <style> p:first-line {font-weight: bold; color: #f00;} p:first-letter {font-style: italic; color: #999;} </style> </head> <body> <p>Ovo je paragraf u kom se razlikuje stil prve linije od ostalih linija teksta. Prva linija je boldovana i crvene je boje dok su ostale linije bez bolda i slova su crna. Prvo slovo u prvoj liniji koje je ujedno i prvo slovo paragrafa je veliko.</p> </body> </html>

Kao i kod pozadina i u definiciji stila fonta mogude je koristiti skradenice.

p {font: italic small-caps bold 14px/15px Arial, Helvetica, sans-serif;}

CSS 4-15


Stil linkova Prije pojave CSS-a neke osobine elemenata su se dinamički mogle promijeniti samo upotrebom nekog od skript jezika kao što je na primjer JavaScript. Pojavom CSS ovo je mogude uraditi i bez skript jezika. Jedan od upečatljivih primjera za to je promjena stila linka prilikom promjene njegovog stanja. Stil linkova se mijenja da bi se korisniku naznačilo:

da je neki dio teksta u stvari hiperveza - link,

da je neka od stranica sa odgovarajudim linkom ved posjedivana - visited,

da je tekst iznad kog se nalazi pokazivač miša u stvari hiperveza - hover i

da je link aktiviran - active. Na taj način korisnik može lakše da se snalazi u navigaciji i donosi odluke o daljem toku pretraživanja. Da bi smo pokazali kako se pomodu CSS-a mijenja stil linkova uvedimo dva nova pojma:

pseudo klasa odražava neko od stanja elementa i u slučaju linkova pseudo klase su link i visited,

dinamička pseudo klasa odražava neku akciju koja je vezana za element i u slučaju linkova dinamičke pseudoklase su hover i active.

Kao i u slučaju pseudoselektora i kod pseudoklasa se element i klasa odvajaju dvotačkom pa dobijamo pseudoklase: a:link, a:visited, a:hover i a:active. Da b i stilovi linkova ispravno bili primijenjeni potrebno je da s navode u redoslijedu: link, visited, hover pa active. Primjer:

<html> <head><style> body {font: 14px Georgia, Times, serif; color: white; background-color: black;} a {color: orange;} a:link {color: orange;} a:visited {color: yellow;} a:hover {color: fuchsia;} a:active {color: red;} </style></head> <body><p>Ovo je paragraf u kom imamo primjer linka prema <a href="http://www.google.com">Google-u</a> sa primijenjenim stilovima za linkove.</p> </body> </html>

CSS 4-16


Jedna od popularnih modifikacija linka je da se ne prikazuje u podvučenom stilu i nekom upadljivom bojom:

a {color: orange; text-decoration: none;}

Ukoliko odredimo stilove upotrebom "a pseudoklasa", onda demo na čitavoj stranici imati linkove sa istim stilom što i jeste čest slučaj. Međutim, ponekada se javi potreba da na istoj stranici postoje linkovi sa različitim stilovima. U tom slučaju za pojedine linkove treba definisati posebne klase i nakon toga za njih definisati i stilove. Primjer:

<html> <head> <style> a {color: orange; text-decoration: none;} a:link {color: orange;} a:visited {color: yellow;} a:hover {color: fuchsia;} a:active {color: red;} a.nav {color: white; text-decoration: none;} a.nav:link {color: red;} a.nav:visited {color: yellow;} a.nav:hover {color: orange;} a.nav:active {color: fuschia;} </style> </head> <body> <p>Ovo je paragraf u kom imamo primjer linka prema <a href="http://www.google.com">Google-u</a> sa primijenjenim stilovima za linkove.</p> <p>A ovo je link <a class="nav" href="http://www.yahoo.com">Yahoo</a> sa posebnim stilom.</p> </body> </html>

Definisanje stilova pomodu nasleđivanja Iskoristidemo prethodni primjer da objasnimo još jedan način definisanja stilova različitih opsega ali i da uvedemo pojam nasleđivanje.

CSS 4-17


Ponekada je nepraktično primjenjivati stilove upotrebom klasa jer moramo definisati veliki broj klasa i voditi računa da ne ispustimo neki element kako bi stil bio primijenjen na sve elemente na koje to želimo. Sa druge strane, ne želimo da izgubimo mogudnost da na pojedine grupe elemenata primjenjujemo različite stilove. Primjer za ovo bio bi slededi problem: na sve linkove (kojih ima nekoliko desetaka) jednog dijela stranice potrebno je primijeniti jedan stil, a na sve linkove drugog dijela stranice (kojih takođe ima mnogo) potrebno je primijeniti potpuno drugačiji stil. Iz svega do sada izloženo znamo da upotreba klasa rješava problem ali smo ved zaključili da je ovaj način neefikasan. Zato demo koristiti ID selektore i nasleđivanje stilova. ID selektori se koriste tako da najprije u HTML sadržaju pojedine dijelove izdvajamo definisanjem ID atributa npr.:

<div id="primjer1">.....</div>

Nakon toga u definiciji CSS stila imamo odjeljak koji počinje sa znakom #, slijedi ga naziv identifikatora, jedno prazno mjesto ("space"), a zatim naziv atributa za koji se definiše stil.

#primjer1 a {color: red;}

Ovako postupamo sa svim sekcijama koje imaju ID selektore i svim elementima unutar njih za koje želimo specifično formatiranje. Suštinska razlika između klasa i ID selektora je ta da se klase unutar jednog dokumenta mogu i najčešde se i ponavljaju dok se jedan ID selektor može iskoristiti samo jednom u čitavoj stranici. Ako za neki ID selektor ne postoji poseban stil onda se primjenjuju stilovi koji važe za ostatak stranice koja takođe nema posebno definisane stilove. Primjer:

<html> <head> <style> a {color: orange; text-decoration: none;} a:link {color: orange;} a:visited {color: yellow;} a:hover {color: fuchsia;} a:active {color: red;} #primjer2 a {color: white; text-decoration: none;} #primjer2 a:link {color: red;}

CSS 4-18


#primjer2 a:visited {color: yellow;} #primjer2 a:hover {color: blue;} #primjer2 a:active {color: fuschia;} </style> </head> <body> <p>Ovo je paragraf u kom imamo primjer linka prema <a href="http://www.google.com">Google-u</a> sa primijenjenim stilovima za linkove.</p> <div id="primjer1"> <p>Ovo je link <a href="http://www.yahoo.com">Yahoo</a> sa ID selektorom DIV odjeljka za koji nije definisan stil pa je prikazan istim stilom kao i gornji link.</p> </div> <div id="primjer2"> <p>A ovo je isti taj link <a href="http://www.yahoo.com">Yahoo</a> sa naslijedjenim stilo odjeljka sa ID selektorom primjer2.</p> </div> </body> </html>

Stilovi uređenih lista Za stilove uređenih lista koriste se dva svojstva: list-style-type i list-style-image. Svojstvo list-style-type može da dobije sledede vrijednosti:

decimal-leading-zero sa numeracijom u arapskim brojevima gdje prva opcija ima oznaku 0,

lower-roman sa numeracijom predstavljenom malim rimskim brojevima: i,ii,iii,iv, ...

upper-roman sa numeracijom predstavljenom malim rimskim brojevima: I,II,III,IV, ... Ako se ne definiše niti jedan stil numeracija je u arapskim brojevima i počinje od 1. Primjer:

<ol> <li>prva <li>druga <li>treca </ol> <ol style="list-style-type: decimal-leading-zero ;"> <li>prva <li>druga

CSS 4-19


<li>treca </ol> <ol style="list-style-type: lower-roman;"> <li>prva <li>druga <li>treca </ol> <ol style="list-style-type: upper-roman ;"> <li>prva <li>druga <li>treca </ol>

Ukoliko koristimo slike za oznake opcija onda moramo koristiti i klase koje pridružujemo svakoj opciji i za svaku klasu definišemo stil. Primjer:

<ol> <li style="list-style-image: url(http://www.w3schools.com/css/sqorange.gif)">jedan <li style="list-style-image: url(http://www.w3schools.com/css/sqpurple.gif)">dva <li style="list-style-image: url(http://www.w3schools.com/css/sqpurple.gif)">tri </ol>

Na <li> elemente takođe je mogude primjenjivati klase i ID selektore. Stilovi neuređenih lista Za stilove neuređenih lista koriste se svojstva:

list-style-type (disc, circle, square),

list-style-image (kao i kod uređenih lista) i

list-style-position (outside, inside) Kod svojstva list-style-position vrijednost outside postavlja oznaku izvan bloka dok za vrijednost inside nema "izvlačenja" oznake ved se ona prikazuje u liniji bloka. Skradenice za CSS stilove listi Kao i kod drugih elemenata i za stilove listi je mogude koristiti skradenu notaciju:

ul {list-style: url(arrow.gif) inside;}

CSS 4-20


Vertikalne i horizontalne navigacije realizovane pomodu lista sa bojama i slikama u pozadini Jedna od čestih primjena listi, iako to na prvi pogled nije toliko očigledno, je kreiranje sistema za navigaciju. Primjer jednostavne navigacije riješene pomodu hiperlinkova u listi:

<html> <head> <title>Jednostavna navigacija u listi</title> <style type="text/css"> body {font: 14px Georgia, Times, serif; color: black;} ul {list-style-type: none;} a {color: orange; text-decoration: none;} a:link {color: orange;} a:visited {color: yellow;} a:hover {color: fuchsia; text-decoration: underline;} /* font-style: italic; font-weight: bold; background-color: aqua; */ a:active {color: red;} </style> </head> <body> <ul> <li><a href="home.html">Home</a></li> <li><a href="ip.html">Internet programiranje</a></li> <li><a href="pr.html">Programiranje</a></li> <li><a href="op.html">Osnove programiranja</a></li> <li><a href="as.html">Algoritmi i strukture podataka</a></li> </ul> </body> </html>

Ako u liniji u kojoj je definisan stil a:hover umjesto postojede definicije stavimo definiciju iz komentara koji se nalazi u slededoj liniji, linkovi preko kojih prelazimo dobide obojenu pozadinu.

CSS 4-21


U slededem primjeru je listi dodana slika pozadine a sve njene opcije su oivičene.

<html> <head> <title>Jednostavna navigacija u listi sa okvirima i slikom u pozadini</title> <style type="text/css"> body {font: 14px Georgia, Times, serif; color: black;} ul {list-style-type: none; padding: 0; width: 100px; background-image: url(https://www.google.com/images/srpr/logo11w.png); border: 2px solid orange;} li {padding-left: 5px; padding-bottom: 5px; border-bottom: 1px solid orange;} a {color: orange; text-decoration: none;} a:link {color: orange;} a:visited {color: yellow;} a:hover {color: fuchsia;} a:active {color: red;} </style> </head> <body> <ul> <li><a href="home.html">Home</a></li> <li><a href="ip.html">Internet programiranje</a></li> <li><a href="pr.html">Programiranje</a></li> <li><a href="op.html">Osnove programiranja</a></li> <li><a href="as.html">Algoritmi i strukture podataka</a></li> </ul> </body> </html>

I na kraju imamo primjer vertikalnog menija sa promjenom pozadine linka (slike) iznad kog je pokazivač miša:

<html> <head> <title>Vertikalna navigacija u listi sa slikama u pozadini</title> <style type="text/css"> body {font: bold 15px Georgia, Times, serif; color: black;} a {color: white; text-decoration: none; display: block;} a:link {color: white;} a:visited {color: yellow;} a:hover {color: red; background-image: url('gradient2.png');} a:active {color: red;}

CSS 4-22


#nav, #nav a, #nav li {width: 250px; margin: 0; padding: 0; list-style-type: none;} li {background-image: url('bgdesert.jpg'); border-bottom: 3px solid white;} </style> </head> <body> <div id="nav"> <ul> <li><a href="home.html">Home</a></li> <li><a href="ip.html">Internet programiranje</a></li> <li><a href="pr.html">Programiranje</a></li> <li><a href="op.html">Osnove programiranja</a></li> <li><a href="as.html">Algoritmi i strukture podataka</a></li> </ul> </div> </body> </html>

Primjer horizontalnog menija sa promjenom boje:

<html> <head><title>Horizontalna navigacija sa promjenom boje</title>

<style type="text/css"> body {font: 14px Georgia, Times, serif; color: black; } ul#navlist {margin-left: 0; padding-left: 0; white-space: nowrap;} #navlist li {display: inline; list-style-type: none;} #navlist a { padding: 3px 10px; } #navlist a:link, #navlist a:visited {color: white; background-color: orange; text-decoration: none;} #navlist a:hover {color: orange; background-color: yellow; text-decoration: none;} </style>

</head> <body>

<ul id="navlist"> <li><a href="home.html">Home</a></li> <li><a href="ip.html">Internet programiranje</a></li> <li><a href="pr.html">Programiranje</a></li> <li><a href="op.html">Osnove programiranja</a></li> <li><a href="as.html">Algoritmi i str. podataka</a></li> </ul>

</body> </html>

CSS 4-23


dok bi isti primjer sa slikama u pozadini opcija bio:

<html> <head> <title>Vertigalna navigacija u listi sa slikama u pozadini</title> <style type="text/css"> body {font: bold 14px Georgia, Times, serif; color: black; } ul#navlist {margin-left: 0; padding-left: 0; white-space: nowrap;} #navlist li {display: inline; list-style-type: none;} #navlist a { padding: 3px 10px; } #navlist a:link, #navlist a:visited {color: white; background-image: url('bgdesert.jpg'); text-decoration: none;} #navlist a:hover {color: white; background-image: url('gradient2.png'); text-decoration: none;} </style> </head> <body> <ul id="navlist"> <li><a href="home.html">Home</a></li> <li><a href="ip.html">Internet prog.</a></li> <li><a href="pr.html">Programiranje</a></li> <li><a href="op.html">Osnove programiranja</a></li> <li><a href="as.html">Algoritmi i str. podataka</a></li> </ul> </body> </html>

CSS 4-24


Margine, okviri i rastojanja Posmatrano iz perspektive CSS-a možemo redi da svi HTML elementi imaju: margine, okvire i rastojanja. Svaki element na stranici, iako ga mi možda drugačije doživljavamo, je u stvai predstavljen pravougaonikom. Postoje dva tipa elemenata u odnosu na prirodu pravougaonika koji ih definiše:

blokovi i

linijski pravougaonici. Primjer linijskog pravougaonika su H blokovi dok je tipičan primjer bloka link. Demonstrirademo to na jednom primjeru.

<h1 style="background-color: red">Ovako izgleda blok oko H1 elementa</h1> <br> <p>a ovo je linijski pravougaonik koji formira <a href="http://www.google.com/ncr" style="background-color: green">Google</a> link</p>

Blokovi su pravougaonici vezani za elemente na nivou bloka dok su linijski pravougaonici tzv. ubačeni pravougaonici. Najznačajnije u vezi sa blokovima i pravougaonicima i blokovima (u daljem tekstu "pravougaonik") je to što im se mogu podešavati: margina, okvir i rastojanja. Margina (margin) predstavlja odmak pravougaonika od ostalih elemenata. Okvir (border) može da ima različite stilove i različite debljine. Rastojanja (padding) predstavlja rastojanje između sadržaja i okvira. Na slededoj slici se vidi odnos ove tri karakteristike.

CSS 4-25


Margine Margine podešavamo pomodu četiri svojstva:

margin-top,

margin-bottom,

margin-left i

margin-right. Vrijednosti navodimo u px. Vrijednosti margina mogu biti i negativne. Podešavanje margina mogude je i skradenom notacijom:

body {margin: 30px 60px 90px 130px} što je identično definiciji: body {margin-top: 30px margin-right: 60px margin-bottom: 90px margin-left: 130px}

Ako se navedu samo dvije vrijednosti onda se one tretiraju kao parovi vrijednosti top-bottom i left-right:

body {margin: 30px 60px}

Ako se navedu tri vrijednosti onda se one tretiraju kao vrijednosti za marginu na vrhu, lijevu-desnu i donju marginu:

body {margin: 30px 60px 90px}

Ako je navedena samo jedna vrijednost onda se ona odnosi na sve margine:

body {margin: 30px}

Okviri

Svojstvo Mogude vrijednosti Opis

border-width px, ems

ili thin (tanak), medium (srednji), thick (debelo)

debljina okvira

border-style

dotted - tačkasto dashed - crtice

solid - linija double - dupla linija

groove, ridge, inset, outset, hidden none - bey okvira

stil linije okvira

border-color heksadecimalno, skradeno heksadecimalno,

rgb(x,y,z) , rgb(x%,y%,z%), imenima boja okvira

CSS 4-26


Ukoliko se između riječi border i odgovarajudeg atributa umetne jedna od riječi: left, right, top ili bottom onda de stil biti primijenjen na određenu stranicu okvira.

border-bottom-width: 2px; border-left-width: thick;

Kao i kod margina mogude je koristiti skradenu notaciju. Ako se koriste riječ border i oznaka stranice onda se stilovi odnose samo na tu stranicu:

border-right: 1px dotted red;

Ako se koristi skradena notacija korištenjem samo riječi border onda se stil odnosi na sve četiri stranice:

border: thick ridge white;

Rastojanja Za razliku od margina koje predstavljaju rastojanje između okvira (border) i ostalih elemenata, rastojanja (padding) predstavljaju udaljenost sadržaja do okvira. Kao i okviri, može se primijenjivati na sve četiri strane: left, right, top ili bottom

padding-top, padding-right, padding-bottom, padding-left

ili na sve četiri strane istovremeno

padding

Mogu se koristiti vrijednosti u pikselima ili procentualne vrijednosti. Skradena notacija za rastojanja

p {padding: 15px 30px 25px 0;}

ima sledede značenje: redom su navedene vrijednosti za gornje, desno, donje i lijevo rastojanje. Mogu se koristiti kombinacije dvije ili tri vrijednosti prema istim pravilima kao i za margine.

<html> <head> <style type="text/css"> body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: white; background-color: black; margin-top: 10px;} h1 {font-size: 24px; color: orange; border-bottom: 2px dotted lime; padding-bottom: 10px;} h2 {font: italic 20px Georgia, Times, serif; color: #ccc; text-indent: 15px;} p {border: thin solid orange; padding-top: 15px; padding-right: 30px; padding-bottom: 0;

CSS 4-27


padding-left: 30px;} </style> </head> <body> <h1>Margine, okviri i rastojanja</h1> <p>Ovo je paragraf sa podesenim marginama, okvirima i rastojanjima.</p> </body> </html>

Pozicioniranje, tok i Z-indeks sadržaja Pod pozicioniranjem se smatra izdvajanje dijela HTML sadržaja u blok i njegovo postavljanje na određeno mjesto. Realizuje se pomodu CSS-a. Tok omogudava da se primjenom CSS tehnologije tekst postavi oko elemenata. Primjer za ovo je tekst sa desne i donje strane slike. Z-indeks omogudava da se elementi ili blokovi postavljaju jedni ispred ili iza drugih. Pozicioniranje Da bi smo objasnili pozicioniranje najprije demo objasniti dvije tehnike prikazivanja sadržaja:

normalan tok, gdje se sadržaj pozicionira u odnosu na rubove vidljive površine čitača nemijenjenu za prikaz sdaržaja ili

blokovsko grupisanje, gdje se sadržaj grupiše u blokove. Normalan tok:

<html> <head> <title>working with style</title> </head> <body> <h1>The Black Cat</h1> <h2>By Edgar Allen Poe</h2> <p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p> <p>This latter was a <a href="http://www.poemuseum.org/">remarkably</a> large and beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of

CSS 4-28


his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent allusion to the ancient popular notion, which regarded all black cats as witches in disguise. Not that she was ever serious upon this point - and I mention the matter at all for no better reason than that it happens, just now, to be remembered.</p> </body> </html>

Grupisanje u blokove:

<div id="content"> <h1>The Black Cat</h1> <h2>By Edgar Allen Poe</h2> <p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p> <p>This latter was a <a href="http://www.poemuseum.org/">remarkably</a> large and beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent allusion to the ancient popular notion, which regarded all black cats as witches in disguise. Not that she was ever serious upon this point - and I mention the matter at all for no better reason than that it happens, just now, to be remembered.</p> </div>

CSS 4-29


Prethodna dva primjera mogu dovesti do zaključka da nema razlike u prikazima, međutim, treba uočiti da su paragrafi u odnosu na cijeli HTML dokument hijerarhijski podređeni <html> odnosno <body> elementima, dok su u drugom slučaju hijerarhijski pozicionirani unutar <div> elementa. Objasnidemo tri načina pozicioniranja: apsolutno, relativno i fiksno. Pozicioniranje - apsolutno pozicioniranje Apsolutno pozicioniranje podrazumijeva pozicioniranje jednog bloka u odnosu na blok u kom se nalazii bilo da se radi o tome da je pozicioniran unutar cijelog HTML dokumenta ili unutar nekog drugog elementa. Primjer jednog DIV bloka koji je apsolutno pozicioniran unutar korijena HTML dokumenta:

<html> <head> <title>working with style</title> <style type="text/css"> #content { position: absolute; left: 100px; top: 50px; border: 1px solid red; } </style> </head> <body> <div id="content"> <h1>The Black Cat</h1> <p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p> </div> </body> </html>

CSS 4-30


Primjer pozicioniranja DIV bloka unutar drugog DIV bloka:

<html> <head> <title>working with style</title> <style type="text/css"> #main { position: absolute; left: 50px; top: 20px; border: 1px solid green; } #content { position: absolute; left: 100px; top: 50px; width: 300px; border: 1px solid red; background-color: #ccc; } ul, li, a { list-style-type: none; display: inline; text-decoration: none; } </style> </head> <body> <div id="main">

<div id="nav"> <ul> <li><a href="home.html">Home</a></li> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact</a></li> </ul>

</div> <div id="content">

<h1>The Black Cat</h1> <p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p>

</div> </div> </body> </html>

CSS 4-31


Na prethodnoj slici se vidi da je blok <div id="main"> apsolutno pozicioniran u odnosu na gornji lijevi došak čitave stranice (20px dole i 50px desno), dok je blok <div id="content"> pozicioniran u odnosu na <div id="main"> blok (50px dole i 100px desno od gornjeg lijevog doška "main" bloka). Apsolutno pozicioniranje se zadaje tako što se definiše atribut taga position: absolute. Pozicioniranje - relativno pozicioniranje Relativno pozicioniranje vodi računa o normalnom toku elemenata. Pogledajmo jedan primjer relativno pozicioniranog DIV taga:

<html> <head> <title>working with style</title> <style type="text/css"> * {margin: 0;} #content { position: relative; left: 45px; top: 10px; width: 400px; border: 1px solid red; } </style> </head> <body> <h1>The Black Cat</h1> <p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold

CSS 4-32


fish, a fine dog, rabbits, a small monkey, and a cat.</p> <div id="content"> <p>This latter was a <a href="http://www.poemuseum.org/">remarkably</a> large and beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent allusion to the ancient popular notion, which regarded all black cats as witches in disguise. Not that she was ever serious upon this point - and I mention the matter at all for no better reason than that it happens, just now, to be remembered.</p> </div> <p>Pluto - this was the cat's name - was my <a href="http://www.poemuseum.org/">favorite< /a> pet and playmate. I alone fed him, and he attended me wherever I went about the house. It was even with difficulty that I could prevent him from following me through the streets .</p> </body> </html>

Relativno pozicioniranje što je vidljivo iz prethodnog primjera vodi računa o normalnom toku tj. DIV element se prikazuje kao i sav ostali sadržaj unutar <p> tagaova i to 45px lijevo od normalnog toka (margine dokumenta) i 10px dole u odnosu na tekst koji mu prethodi. Razliku između apsolutnog i relativnog pozicioniranja se najlakše shvata ako se posmatra isti primjer ali sa apsolutnim pozicioniranjem:

Zaključujemo da se DIV element pozicionira u odnosu na gornji lijevi ugao čitavog dokumenta i ignoriše normalan tok.

CSS 4-33


CSS stil:

* {margin: 0;}

određuje margine svih elemenata dokumenta. Pozicioniranje - fiksno pozicioniranje Fiksno pozicioniranje omogudava da se blok postavi bilo gdje na strani i da prilikom skrolovanja stranice na dole taj blok zadrži svoju poziciju. Nije podržano u Internet Exploreru.

<html> <head> <title>working with style</title> <style type="text/css"> #nav { position: fixed; left: 0px; top: 0px; background: #ccc; width: 100%; } ul, li, a { list-style-type: none; display: inline; text-decoration: none; padding-left: 3px; padding-right: 3px; } </style> </head> <body> <h1>The Black Cat</h1> <p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> Last row <div id="nav"> <ul> <li>Home <li>Products <li>Services <li>About us <li>Contact </ul> </div>

CSS 4-34


</body> </html>

Tok Ved smo objasnili da tok omogudava da se primjenom CSS tehnologije tekst postavi oko elemenata. Kada ne bi postojao tok teško bi bio realizovati prikazivanje nekog sadržaja oko blokova koji su npr. postavljeni apsolutno ili oko slika.

<html> <head> <title>working with style</title> <style type="text/css"> #nav { float: right; left: 0px; top: 0px; background: #ccc; } </style> </head> <body>

CSS 4-35


<div id="nav"> <ul> <li>Home <li>Products <li>Services <li>About us <li>Contact </ul> </div> <h1>The Black Cat</h1> <p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p> </body> </html>

Isto bi se desilo ako bi smo umjesto DIV bloka postavili sliku:

<html> <head> <title>working with style</title> <style type="text/css"> img { float: right; } </style> </head> <body> <img src="https://www.google.com/images/srpr/logo11w.png"> <h1>The Black Cat</h1> <p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p> </body> </html>

CSS 4-36


Mogude je dodati i više elemenata koji de definisati poziciju ostatka sadržaja. Primjer:

<html> <head> <title>working with style</title> <style type="text/css"> #nav1 { float: left; left: 0px; top: 0px; background: red; width: 20%; } #nav2 { float: right; left: 0px; top: 0px; background: blue; width: 20%; } </style> </head> <body> <div id="nav1"> <ul> <li>Home1 <li>Products1 <li>Services1 <li>About us1 <li>Contact1 </ul> </div> <div id="nav2"> <ul> <li>Home2 <li>Products2

CSS 4-37


<li>Services2 <li>About us2 <li>Contact2 </ul> </div> <h1>The Black Cat</h1> <p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p> </body> </html>

Atributom clear mogude je "očistiti" sadržaj pored bloka. Primjer:

<html> <head> <title>working with style</title> <style type="text/css"> #nav { float: right; left: 0px; top: 0px; background: red; width: 20%; } #content { clear: right; } </style> </head> <body> <div id="nav"> <ul> <li>Home <li>Products <li>Services <li>About us

CSS 4-38


<li>Contact </ul> </div> <div id="content"> <h1>The Black Cat</h1> <p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p> </div> </body> </html>

A ako se clear atribut primijeni na blok sa tekstualnim sadržajem onda imamo:

<html> <head> <title>working with style</title> <style type="text/css"> #nav1 { float: left; left: 0px; top: 0px; background: red; width: 20%; } #nav2 { float: right; left: 0px; top: 0px; background: blue; width: 20%; } #content {

CSS 4-39


clear: both; } </style> </head> <body> <div id="nav1"> <ul> <li>Home1 <li>Products1 <li>Services1 <li>About us1 <li>Contact1 </ul> </div> <div id="nav2"> <ul> <li>Home2 <li>Products2 <li>Services2 <li>About us2 <li>Contact2 </ul> </div> <div id="content"> <h1>The Black Cat</h1> <p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p> </div> </body> </html>

CSS 4-40


Z-indeks Z-indeks omogudava postavljanje blokova ispred drugih blokova. U slededem primjeru su postavljena tri DIV blokakoji se "preklapaju". Blokovi su apsolutno pozicionirani. Blokovi sa najvedim indeksom z-indexi su na vrhu, a sa najmanjim su najviše u pozadini.

<html> <head> <title>working with style</title> <style type="text/css"> #crveni { position: absolute; top: 10px; left: 10px; background: #F00; width: 300px; height: 200px; z-index: 1; } #plavi { position: absolute; top: 30px; left: 30px; background: #00F; width: 300px; height: 200px; z-index: 3; } #zeleni { position: absolute; top: 20px; left: 20px; background: #0F0; width: 300px; height: 200px; z-index: 2; } </style> </head> <body> <div id="zeleni"></div> <div id="plavi"></div> <div id="crveni"></div> </body> </html>

Treba primijetiti da pozicioniranje DIV blokova ne zavisi niti od redoslijeda navođenja elemenata niti od redoslijeda navođenja stilova.

CSS 4-41


Kreiranje rasporeda blokova pomodu CSS-a Upotrebom DIV elemenata i CSS stilova mogude je kreirati formu sajta i izbjedi upotrebu zastarjelih i nepreporučenih metoda kao što je upotreba tabela za formatiranje. Vedina čitača podržava ovu tehniku. Neki od mogudih organizacija sadržaja na stranici su:

tri kolone sa bočnim regijama fiksne širine,

tri kolone sa zaglavljem i podnožjem i

forma sa ugniježđenim blokovima. Naravno ovo nisu najčešde organizacije, ali su možda najčešde korištene. Tri kolone sa bočnim regijama fiksne širine

<html> <head> <title>working with style</title> <style type="text/css"> #nav {position: absolute; left: 10px; top: 50px; width: 200px; background: #F00;} #content {margin-left: 200px; margin-right: 200px; margin-top: 10px; background: #00F;} #sidebar {position: absolute; right: 10px; top: 10px; width: 200px; background: #0F0;} </style> </head> <body> <div id="nav">navigacija</div> <div id="content">sadrzaj</div> <div id="sidebar">desna traka</div> </body> </html>

CSS 4-42


Tri kolone sa zaglavljem i podnožjem

<html> <head> <title>working with style</title> <style type="text/css"> #header {width: 100%; clear: both;} #nav {position: absolute; left: 10px; top: 50px; width: 200px; background: #F00;} #content {margin-left: 200px; margin-right: 200px; margin-top: 10px; background: #00F;} #sidebar {position: absolute; right: 10px; top: 10px; width: 200px; background: #0F0;} #footer {width: 100%; clear: both;} </style> </head> <body> <div id="header">gornje zaglavlje</div> <div id="nav">navigacija</div> <div id="content">sadrzaj</div> <div id="sidebar">desna traka</div> <div id="footer">donje zaglavlje</div> </body> </html>

Primjer ugniježđenog bloka:

<html> <head> <title>working with style</title> <style type="text/css"> #content {margin: 10px; border: 1px solid orange;} #content #nav {float: right; width: 150px; border: 1px solid orange; margin-left: 5px;} </style> </head> <body> <div id="content"> <div id="nav">

CSS 4-43


<ul> <li><a href="home.html">Home</a></li> <li><a href="poe3.html">Forward</a></li> <li><a href="poe1.html">Back</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <h1>The Black Cat</h1> <h2>By Edgar Allen Poe</h2> <p>I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the <a href="http://vig.prenhall.com/">most</a> agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p> . . . </div> </body> </html>

Primjenom pomenutih tehnika mogude je dobiti dizajn kakav se često viđa na stranicama, možda se malo više grafike:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>working with style</title> <style type="text/css"> #container {position: absolute; left: 50%; margin-left: -300px; width: 600px; margin-top: 10px;} #masthead {width: 600px;} #nav {float: left; width: 150px;} #content {float: left; width: 290px; margin-right: 5px; margin-left: 5px;} #sidebar {float: right; width: 140px; margin-right: 10px;} #footer {clear: both; width: 600px;} </style> <link rel="stylesheet" type="text/css" href="layout.css"> </head> <body>

CSS 4-44


<div id="container"> <div id="masthead"> <h1>Readings from Edgar Allen Poe</h1> </div> <div id="nav"> <ul> <li><a href="home.html">Home</a></li> <li><a href="poe3.html">Forward</a></li> <li><a href="poe1.html">Back</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div id="content"> <h1>The Black Cat</h1> <h2>By Edgar Allen Poe</h2> <p>I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the <a href="http://vig.prenhall.com/">most</a> agreeable kind. We had birds, gold fish , a fine dog, rabbits, a small monkey, and a cat.</p> <p>This latter was a <a href="http://vig.prenhall.com/">remarkably</a> large and beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent allusion to the ancient popular notion, which regarded all black cats as witches in disguise. Not that she was ever serious upon this point - and I mention the matter at all for no better reason than that it happens, just now, to be remembered.</p> <p>Pluto - this was the cat's name - was my <a href="http://vig.prenhall.com/">favorite</a> pet and playmate. I alone fed him, and he attended me wherever I went about the house. It was even with difficulty that I could prevent him from following me through the streets.</p> </div> <div id="sidebar"> <h2>poe trivia</h2> <p> Best known for his poems and short fiction, Edgar Allan Poe, born in Boston, Jan. 19, 1809, died Oct. 7, 1849 in Baltimore, deserves more credit than any other writer for the transformation of the short story from anecdote to art.</p> <p>He virtually created the detective story and perfected the psychological thriller. He also produced some of the most influential literary criticism of his time -- important theoretical statements on poetry and the short story -- and has had a worldwide influence on literature.</p> </div> <div id="footer"> <p class="footertext">All text content is in the public domain. Images © 2004</p> </div> </div> </body> </html>

CSS 4-45


Uvod u programski jezik JAVA 8-1


MODULI 8-9: Uvod u programski jezik JAVA Tri tipa aplikacija

aplikacije - samostalni programi,

apleti - programi koji se izvršavaju unutar čitača Web-a i čitač ih automatski poziva i izvršava i

servleti i JSP (Java Server Pages) programi koje izvršavaju serveri i dinamički generišu dijelove Web stranica

Edicije Java platforme

Java SE (Standard Edition) - standardni programi, standardni skup biblioteka

Java ME (Micro Edition) - za uređaje sa manjim hardverskim mogudnostima

Java EE (Enterprise Edition) - za složene aplikacije i širok spektar uređaja Paketi i dokumentacija Veliki broj kotovih klasa se isporučuju sa samom Javom. Zbog vrelikog broja klasa one se grupišu u pakete.Osnovni paketi su:

java.lang

java.util

java.net

java.awt

java.math ... Java ima ukupno oko 200 paketa sa oko 4000 klasa. Sa sajta www.java.com se mogu preuzeti uputstva za korištenje svakog paketa. Upotreba paketa

punim imenom klase ili "uvoženje" klase import naredbom



uvoženje više klasa istog paketa (najčešdi način upotrebe) Definisanje paketa Svaka klasa mora pripadati nekom paketu. Ako se navede kom paketu klase pripadaju onda je to zajednički anonimni paket kom pripadaju sve klase. Za određivanje pripadnosti paketu koristi se naredba package.

Fajl NovaKlasa.java mora biti u ovom slučaju u folderu koji se zove "nekipaket". U grafičkom okruženju o ovome brine softver a u komandnom o ovome treba da brine programer. Organizacija Java programa Sav kod, osim package i import naredbi se moraju nalaziti u nekoj klasi. Naravno. može postojati više klasa. Primjer programa sa više klasa: Klase su: Restoran, Gost, Kelner, Jelovnik i Račun. Za svaku klasu imamo poseban .java fajl.

Kompajliramo pet .java fajlova.



Izvršava se logički početna klasa programa:

java Restoran Primjer Java programa

// služi za komentarisanje u kodu

import java.util.*; omogudava korištenje svih klasa iz java.util paketa

klasa Scanner je iz paketa java.util

klasa System je iz java.lang paketa koji je podrazumijevano uključen u Java aplikacije i ne mora se uključivati import naredbom

definicija klase počinje rezervisanom riječi class

ključna riječ public pokazuje da se objekti definisane klase mogu koristiti u bilo kojoj drugoj klasi

da bi klasa predstavljala program mora imati metod (proceduru) main

između vitičastih zagrada navode se naredbe koje čine tijelo programa

svaka naredba u tijelu se završava tačka-zarezom ;

naredba new kreira novi objekat

standardni ulaz u Javi je predstavljen objektom System.in

metod nextLine() omogudava učitavanje teksta u promjenljivu dok nextInt() omogudava unos cijelog broja



System.out.print ispisuje tekst i prelazi u novi red. System.out.println ispisuje tekst i ne prelazi u novi red. Stil pisanja koda

uvlačenja su dozvoljena i poželjna zbog bolje čitljivosti koda

više nardbi se može pisati u jednom redu

između riječi teksta može biti proizvoljan broj razmaka

između redova može postojati proizvoljan broj praznh redova Komentari Mogu se navesti iza dvostruke kose crte // ili ako su višelinijski unutar oznaka /* .......*/. Postoje i dokumentacioni komentari /** ..... */ na osnovu kojih se programom javadoc kreiraju dokumentacioni HTML fajlovi. Imena Imena moraju biti formirana od slova, cifara i znaka _. Ime mora početi slovom ili _. Velika i mala slova se ne interpretiraju isto. Službene riječi se ne mogu koristiti za imena (if, else, while, ...). Ugrađeni tipovi

cijeli brojevi

realni brojevi

karakteri

logičke vrijednosti byte -128,127 ili -27, 27-1; osam bita = 1 bajt short -215, 215-1; 16 bitova int -231, 231-1; 32 bita long -263, 263-1; 64 bita dozvoljen je oktalni zapis 053 i heksadecimalni 0x2A float ±1038 sa 8 značajnih cifara double ±10308 sa 15-16 značajnih cifara realni brojevi se mogu zapisivati i preko mantise 0.32e-4 char 2-bajtni karakteri po Unicode standardu specijalni znakovi: \t tabulator, \n novi red, \\ kosa crta \ boolean true ili false



Cjelobrojni literali dobijaju podrazumijevani tip (byte, short ili int) u zavisnosti od veličine. Ako želimo literal tipa long onda na kraj moramo dodati l ili L npr. -32L. Literal koji označava realan broj podrazumijevano je tipa double a ako želimo da bude tipa float na kraj dodajemo f ili F npr. 1.2F ili 1.2f. Dvostrukim navodnicima unutar stringa mora prethoditi \ pa se upotrebljava \". Promjenljive Da bi se koristile promjenljive se prvo moraju deklarisati:

tip promjenljiva; gdje je tip neki od primitivnih ili klasnih promjenljivih. Prilikom deklaracije odmah se može dodijeliti i vrijednost:

tip promjenljiva = vrijednost; Primjeri:

U jednom redu je mogude deklarisati više promjenljivih:

Kada se koriste unutar metoda onda su to klasične promjenljive, a ako se koriste van metoda u klasi onda se radi o poljima i služe za opis atributa objekata klase. PRIMJER: Pretvaranje Farenhajtovih stepeni u celzijusove c=5*(f-32)/9



Konstante Konstante se u Javi realizuju preko promjenljivih tako što se u deklaraciji na početku dodaje ključna riječ final.

Često korištene klase: System, Math, String, Scanner Metod ima ulogu procedure iz drugih programskih jezika. Postoji veliki broj metoda unaprijed definisanih koji znatno olakšavaju programiranje.

Klase u Javi imaju tri uloge:

služe kao okvir za grupisanje polja i metoda,

koriste se kao sredstvo za opisivanje objekata

omogudavaju definisanje novog tipa podataka u cilju proširivanja osnovnih tipova

System

System.out standardni izlaz (out je statičko polje klase System) System.out.print() ispis na ekran (metod) System.out.println() ispis na ekran (metod) System.out.printf() ispis formatiranih podataka na ekran (metod) System.exit(par) bezuslovno prekidanje programa; par=0 normalan završetak; par=-1 greška(metod)

Math

Math.sqrt(x) korijen broja x Math.abs(x) apsolutna vrijednost broja Math.sin(x) sinus Math.cos(x) kosinus Math.tan(x) tangens



Math.exp(x) ex Math.log(x) prirodni logaritam ln Math.pow(x,y) stepenovanje xy Math.floor(x) odbacivanje decimala realnog broja Math.round(x) zaokruživanje na najbliži cijeli broj Math.random(x) slučajan broj iz [0,1) Primjeri:

String

s1.length() dužina stringa s1.equals(s2) poređenje s1 i s2 s1.equalsIgnoreCase (s2) poređenje s1 i s2 (mala i velika slovase ne razlikuju pri poređenju) s1.charAt(n) karakter na n-toj poziciji stringa s1 s1.substring(n,m) izdvajanje podstringa s1.indexOf(s2) prvo pojavljivanje s2 u s1 s1.compareTo(s2) vrada 0 ako je s1=s2, inače -1 s1.toUpperCase() s1 velikim slovima s1.trim() uklanjanje vodedih i krajnjih praznina konkatenacija (spajanje) se vrši operacijom + Primjeri:

Primjer spajanja:

Primjer automatske konverzije tipova (r je npr. double):

Upotreba klasnih tipova: Ved smo rekli da se promjenljive prije upotrebe moraju deklarisati:

tip promjenljiva; tip promjenljiva = vrijednost;



Klasne promjenljive odnosno objekti bilo kog klasnog tipa se prije korištenja moraju konstruisati:

NekaKlasa promjenljiva = new NekaKlasa(inicijalnaVrijednost);

Primjer:

ali smo isto tako mogli napisati koristedi jednostavniji zapis:

New je operator koji obavlja dvije operacije:

kreira novi objekat u memoriji i

promjenljivoj vrada referencu na objekat. Scanner

Primjer deklaracije: tastatura.next() očitavanje znakova sa tastature do prvog razmaka, tabulatora ili novog reda tastatura.nextInt() učitavanje numerika tipa int sa tastature tastatura.nextDouble() ... učitavanje numerika tipa double sa tastature tastatura.nextLine() učitavanje niza znakova do kraja reda i vrada String (u stringu su i razmaci i tabulatori) tastatura.hasNext() vrada true ako je ulazni niz znakova raspoloživ sa tastature tastatura.hasNextInt() vrada true ako je vrijednost tipa int raspoloživa sa tastature tastatura.hasNextDouble() ... vrada true ako je vrijednost tipa double raspoloživa sa tastature tastatura.hasNextLine() vrada true ako je niz znakova raspoloživa sa tastature



Klase omotači: Byte, Short, Integer, Long, Float, Double, Character i Boolean Nekada postoji potreba da se primitivne klase tretiraju kao objekti. Klase omotači prvenstveno konstruišu objekte koji predstavljaju primitivne tipove, ali i pružaju i velik broj metoda za obradu podataka datog tipa. Klase omotači se koriste na ved pomenut način:

KlasaOmotac promjenljiva = new KlasaOmotac (inicijalnaVrijednost); Nakon toga se promjenljiva tj. objekat najčešde koristi preko svojih metoda.

Primjer: kreiranje promjenljive klasnog tipa Double i prenošenje vrijednosti promjenljivoj tipa double

Od verzije Java 5 za svaki primitivni tip postoji odgovarajuda klasa omotač. Automatska interpretacija vrijednosti naziva se autopakovanje.

Primjer: automatsko određivanje klasnog tipa na osnovu dodijeljene vrijednosti tipa int

je identično naredbi

Suprotan proces određivanja odgovarajudeg primitivnog tipa naziva se raspakivanje:

Primjer: d tipa Double se tokom množenja automatski konvertuje (prilagođava) tipu promjenljive u koju se smiješta rezultat a to je double

Još jedan od razloga za korištenje klasa omotača nasuprot primitivnim tipovima je i lakše korištenje pojedinih konstantnih vrijednosti koje se više ne moraju pamtiti. Npr. MIN_VALUE i MAX_VALUE klase Integer. Klase omotači sadrže veliki broj statičkih metoda za rad sa odgovarajudim tipom podataka. Integer.parseInt("17") pretvara string u cijeli broj tipa int Double.parseDouble("3.14") pretvara string u realan broj tipa double Integer.valueOf("17") pretvara string u objekat tipa Integer Double.valueOf("3.14") pretvara string u objekat tipa Double Character.isLetter(par) pokazuje da li je parametar par tipa char slovo Character.isLowerCase(par) pokazuje da li je parametar par tipa char malo slovo



Operatori

Aritmetičke operacije za operatore moraju imati vrijednosti istog tipa. Ako u programu navedemo drugačije deside se konverzija tipa.

Primjer: Pri računanju izraza 17.4 + 10 cijeli boj 10 de se konvertovati u realan 10.0 pa de se izvršiti sabiranje.

Ako se aritmetičke operacije izvode nad istim tipovima i rezultat je tog tipa. Drugi način za eksplicitno dobijanje željenog tipa je kastovanje (cast). Tip rezultata se navodi unutar malih zagrada ispred samog izraza.

Primjer je dijeljenje dva cijela broja: (double) n/m Drugi primjer je odabir slučajnog cijelog broja iz nekog opsega npr. od 1 do 6. Koriste se klasa Math i njen metod random koji daje vrijednost iz opsega 0-0.99999... (int) (6 * Math.random()) + 1

Operator % koristi se za cjelobrojno dijeljenje: 10%3 = 1 Operatori ++ i -- služe za inkrementiranje (uvedavanje broja za 1) i dekrementiranje (umanjivanje broja za 1) i mogu se koristiti kao prefiksni ili postfiksni. Npr. x=1; System.out.print(++x); System.out.print(x++); Relacijski operatori: >, <, >=, <=, != i == se koriste za poređenje dvije vrijednosti. Logički operatori su: && - logičko I || - logičko ILI ! - negacija



Operator izbora je ternarni operator (tri operanda) može zamijeniti IF naredbu grananja:

logicki_izraz ? rezultat_ako_je_ispunjen : rezultat_ako_NIJE_ispunjen

Operator dodjele = treba razlikovati od relacijsko operatora ==. Npr. x = 10; promjenljivoj x dodjeljuje vrijednost 10, dok y = (x == 10); promjenljivoj dodjeljuje vrijednost "tačno" ili "netačno" (true/false). Neki od operatora dodjele ( +=, -=, *=, /=, %= ) uključuju i matematičke operacije koje se prethodno obavljaju prema slededem pravilu:

promjenljiva operator_dodjele izraz

promjenljiva = promjenljiva odgovarajudi_operator izraz gdje su operator_dodjele iz skupa {+=,-=,*=,/=,%=}, a odgovarajuci_operator iz skupa {+,-,*,/,%} Prioritet operatora može se predstaviti slededom tabelom:

Operatori u istom redu su istog prioriteta. Operatori u višim redovima su vedeg prioriteta.



Složene naredbe Blok naredbi - počinje i završava vitičastim zagradama

Naredba grananja - IF

Naredba SWITCH



Naredba WHILE

ili

Naredba DO-WHILE

ili

Naredba FOR

ili

gdje je kontrolni dio:

Naredbe BREAK i CONTINUE Naredba break; prekida izvršavanje petlje i obezbjeđuje prelazak na prvu liniju iza petlje. Naredba continue; prekida trenutnu iteraciju petlje i obezbjeđuje prelazak na slededu.



Postavlja se pitanje kako break i continue utiču na ugniježđene petlje? U ugniježđenim petljama break i continue utiču na prvu unutrašnju petlju kojom su obuhvadene. Ako se želi uticati na vanjsku petlju moraju se koristiti označene petlje:

vanjska_petlja: while (...) ..... unutrasnja_petlja: for ... break vanjska_petlja; ili continue vanjska_petlja;



Metodi - procedure i funkcije u programskom jeziku Java Metodi predstavljaju potprograme za programski jezik Java. Omogudavaju rješavanje složenijih problema razlaganjem u manje, jednostavnije probleme. Definisanje metoda Definicija metoda (kod metoda) se satoji iz dva dijela:

zaglavlje (modifikatori, tip rezultata, ime metoda i lista parametara) i

tijelo metoda (blok naredbi)

U navedenom primjeru značenje pojedinih dijelova metoda je sledede:

public (metod se može koristiti u bilo kojoj drugoj klasi) i static (metod je statički a ne objektni) su modifikatori,

void daje podatak o tipu rezultata (void znači da se ne vrada nikakva vrijednost),

main je naziv metoda (main metod je podrazumijevani metod koji se izvršava kada se pokrene program) i

String[] args predstavlja listu parametara. Pošto smo ved pomenuli modifikator public, pomenimo i ostale "specifikatore pristupa":

public pokazuje da se metod može koristiti u bilo kojoj drugoj klasi,

private pokazuje da se metod može koristiti samo u klasi u kojoj je definisan,

protected ograničava metod na klasu u kojoj je definisan i sve iz nje izvedene klase. Za metod za koji nije navedeno da je statički static podrazumijeva se da je objektni. Kod navođenja modifikatora pravilo je da se navode redoslijedom:

specifikator pristupa (public, private, protected),

static modifikator (ili se ne navodi),

tip rezultata Ako se u zaglavlju ne navede niti jedan modifikator pristupa ved zaglavlje počne od tipa rezultata, metod se može pozvati samo u bilo kojoj klasi paketa ali ne i izvan paketa. Redoslijed metoda unutar klase nije bitan.



Primjer definisanja i poziva metoda:

Kada se metod poziva unutar iste klase onda je pri pozivanju dovoljno navesti samo naziv metoda i parametre. Kada se metod poziva iz druge klase, onda se mora navest i ime klase ispred naziva metoda.

Ovaj način pozivanja ved smo koristili za pozivanje metoda nekih Javinih gotovih klasa:

Math.sqrt(9), Math.pow(1,2), ... Rezultati metoda se vradaju naredbom return:

return rezultat; Primjer: računanje obima pravouglog trougla datog sa dužinama dviju kateta

Metode koje ne vradaju niti jednu vrijednost (void metode) imaju neredbu:

return;



Preopteredeni metodi Termin "preopteredeni", iako sugeriše, nema nikakve veze sa greškama u programu. Ovo je tehnika koja omogudava da se unutar jedne klase definiše više metoda sa identičnim nazivom ali sa drugim parametrima, pa prema tome najvjerovatnije i drugačijim tijelom metoda. Posmatrajmo neki metod:

Ime metoda, broj parametara, njihov redoslijed i tip predstavljaju potpis metoda. Potpis metoda iz prethodnog primjera bio bi:

Opteredivanje podrazumijeva da više metoda ima isti naziv ali različite potpise.



Lokalne i globalne promjenljive - vidljivost promjenljivih Rekli smo da klasa obuhvata definicije metoda. Pored definicija metoda klasa može da obuhvati i definicije promjenljivih. Ovakve promjenljive su polja klase, vidljive su u svim metodama klase pa kažemo da su globalne. Promjenljive definisane u metodama, vidljive su samo unutar metoda pa kažemo da su lokalne. Globalne promjenljive se automatski inicijalizuju unaprijed definisanim vrijednostima. Lokalne promjenljive se ne inicijalizuju prilikom izvršavanja metoda ved im treba dodijeliti vrijednost prije upotrebe. Lokalne promjenljive "žive" sve dok traje izvršavanje metoda, a globalne sve dok postoji klasa ili objekat klase u kojoj su definisani. Globalne promjenljive su dostupne svim metodama klase. Lokalna promjenljiva može imati isto ime kao i globalna, ali tada je u metodu dostupna samo lokalna a globalna nije. Kaže se da je globalna promjenljiva zaklonjena. Oblast važenja promjenljive definisane u zaglavlju FOR petlje je samo ta petlja. Po završetku petlje promjenljiva nije dostupna. Redefinisanje (ponovno definisanje) promjenljive unutar oblasti važenja niej dozvoljeno, čak i kada se promjenljiva definiše istim tipom. Statički metod može se pozvati unutar neke klase a da do tada objekat kom pripadaju metode i polja još nije konstruisan. Ovo je slučaj sa našim dosadašnjim i uobičajenim pozivima metoda. Objektni metodi i polja se ne mogu koristiti u statičkim metodama. Rekurzivni metodi Rekurzivni metodi su takvi koji unutar tijela imaju direktan ili indirektan poziv samog sebe. Indirektan poziv znači da npr. metod1 poziva metod2 koji opet poziva metod1. Školski primjer rekurzije je metod koji računa stepen broja:

Osnove objektno orjentisanog programiranja u Javi 10-1


MODUL 10: Osnove objektno orjentisanog programiranja u Javi Klasa je programska cjelina koja se sastoji iz polja (globalnih promjenljivih deklarisanih na nivou klase) i metoda koje omogudavaju obradu tih promjenljivih. Definicija polja ima isti oblik kao i definicija promjenljivih sa dvije razlike:

definicija polja se nalazi izvan metoda a unutar klase i

tipu i imenu prethode modifikatori (static, publi i private) Modifikator static definiše statičko polje, a ako se ne navede podrazumijeva se da je polje objektno. Private polje se može koristiti samo unutar klase, a polje public i izvan klase. Za upotrebu polja koristi se "tačka-notacija", pri čemu je za statička polja

klasa.polje a za objektna

objekat.polje. Najvažnija namjena klasa je ta da služe za kreiranje objekata. Nedemo se detaljnije upuštati u OOP koncepte nego demo samo redi da klasa služi kao šablon za objekte. Objekat konstruisan iz klase zvademo instanca klase. Klasa se definiše u samom programu i stvara se tokom prevođenja programa. Zajedno sa svojim statičkim poljima postoji od početka do kraja izvršavanja programa. Objekti se kreiraju tokom izvršavanja programa. Njihova nestatička polja postoje samo od trenutka kreiranja objekta pa do uklanjanja objekta. Primjer statičih polja:

i klase sa nestatičkim poljima:



Pošto je klasa Klijent ima nestatička polja ime i id, ne postoje promjenljive Klijent.ime i Klijend.id. Ovo nije nedostatak. Smisao je da svi objekti kreirani iz klase Klijent imaju polja ime i id. Klase mogu imati istovremeno i statička i nestatička polja:

Nestatička polja ime i uzrast bide različita za različite objekte, dok de statičko polje prezime biti zajedničko za sve članove porodice. Slično pravilo važi i za metode. Statičke metode pripadaju klasi tokom čitavog izvršavanja programa i mogu se pozivati bez obzira na postojanje objekata kreiranih iz klase. Nestatički (objektni) metodi pripadaju objektima klase tj. mogu se primjenjivati samo na objekte klase. Metod čestitajRođendan može se primijeniti samo na objekt klase ČlanPorodice, a ne i na klasu npr.

Milan.čestitajRođendan() je ispravno dok

ČlanPorodice.čestitajRođendan() nije ispravno. Definicija klase

Modifikator public definiše klasu koja je vidljiva i izvan paketa. Tijelo klase sadrži definicije statičkih i nestatičkih polja i metoda (članova klase).



U prethodnom primjeru ni jedno polje ni metod nisu static pa klasu ima smisla koristiti za kreiranje objekata. Svaki objekat de imati polja ime, id, test1, test2 i test3 kao i metod prosjek(). Promjenljive klasnog tipa Promjenljive mogu biti i klasnog tipa. Ovakve promjenljive se definišu na slededi način (prethodni primjer):

a naredba

kreira objekat new Student() i dodjeljuje referencu tog objekta promjenljivoj s. Ako u nekom trenutku u programu želimo da promjenljiva ne ukazuje niti na jedan objekat onda joj dodjeljujemo specijalnu referencu null.

Promjenljive s1 i s3 ukazuju na isti objekat u memoriji a ne na dva objekta koji imaju iste vrijednosti polja. Naredba s3=s1 ne kreira novi objekat ved kopira referencu.



Mogude je koristiti i ovakvu konstrukciju:

if (s1==s3) .. pri čemu se provjerava relacija između svih odgovarajudih polja objekata s1 i s3.

Objekti se fizički nalaze u memoriji, a promjenljive samo ukazuju na njih. Ako je promjenljiva klasnog tipa deklarisana modifikatorom final njena vrijednost nakon inicijalizacije se ne može promijeniti. Ovo ne treba miješati sa mogudnošdu promjene sadržaja polja objekta koja je i dalje izvodljiva.

Ako se promjenljiva klasnog tipa prenosi kao paramater nekom metodu, vrijednost te promjenljive se ne može mijenjati ali se može promijeniti neka od vrijednosti polja:



Konstrukcija i inicijalizacija objekata Deklaracija promjenljive se može izvesti sa dvije naredbe:

ili sa jednom naredbom:

KockaZaIgru() iza operatora new je konstruktor klase. Ovo je metod koji piše programer koji kreira klasu. Ako se ovaj metod konstruktor klase ne piše on je podrazumijevan i nema niti jednu naredbu u tijelu metoda. Pravila za pisanje konstruktora su ista kao i za ostale metode uz dodatna pravila:

ime konstruktora moa biti isto kao i ime klase,

dozvoljeni modifikatori su public, private i protected,

konstruktor nema tip rezultata pa čak ni void. Metod konstruktor može da prihvati i parametre koji de se koristiti tokom njegovog izvršavanja.

Primjer kreiranja objekta iz ovakve klase bi mogao biti:

Konstruktori se mogu preopteredivati kao i drugi metodi.



Iz konstruktora se mogu pozivati i neki drugi metodi:

U ovom slučaju objekti se mogu kreirati na dva načina:

new KockaZaIgru() ili new KockaZaIgru(5) Konstruktori se pozivaju ISKLJUČIVO uz operator new. Uklanjanje objekata Objekat se automatski uklanja iz memorije kada se završi opseg njegove vidljivosti, npr. po završetku metoda u kom je kreiran.

Drugi način je da se eksplicitno ukaže da objekat nije potreban:



Enkapsulacija - skrivanje podataka - public vs private Enkapsulacija je tehnika kojom se pojedina polja "skrivaju" od vanjskog koda. To znači da postoje private polja koja se mogu koristiti samo unutar metoda klase u kojoj se nalazi i to polje. Dva su razloga za ovakav pristup:

polja se mogu mijenjati samo na kontrolisan način iz klase i

sakrivaju se detalji implementacije interfejsa i stvara se princip "crne kutije" - ne zanima nas "kako rad" ved samo "da ispravno radi".



Sva polja su privatna pa slededi kod rezultuje greškom:

dok je slededi kod korektan:

Metode koje samo vradaju vrijednosti polja zovu se "geteri" a oni koja postavljaju vrijednosti polja "seteri". Zato se najčešde i koriste, mada nije obavezno, prefiksi get i set. Naravno, ni ovakvi metodi nisu ograničeni isključivo na postavljanje i vradanje vrijednosti poljima.

Postoji još jedan slučaj kada se može koristiti enkapsulacija, a to je kada se želi ostvariti interna implementacija koja ima drugačiju reprezentaciju prema korisniku objekta. Klasi radnik iz prethodnog primjera možemo dodati i polje prezime kao i metodu getIme() koja vrada ime i prezime.



This prefiks polja Ključna riječ this se koristi da se u definiciji klase ukaže kako neko polje ili metod pripadaju objektu koji de biti kreiran iz te klase npr. this.plata, this.procenat, ...

Prefiks this se može koristiti kako bi se jasno razlikovala objektna polja klase od lokalnih promjenljivih metoda. Druga situacija kada se koristi prefiks this je kod preopteredenih konstruktora. Rekli smo da se konstruktori mogu pozivati samo iza operatora new. Međutim, unutar jednog konstruktora mogude je pozvati drugi konstruktor. U tom slučaju se ne koristi naziv konstruktora ved forma:

Npr. imamo novi konstruktor koji prima samo dva parametra u odnosu na 4 u prvom konstruktoru koji smo ved definisali:

Umjesto ovoga smo mogli pisati:

koristedi ranije definisan konstruktor koji prihvata četiri parametra.



Nasleđivanje klasa Druga važna karakteristika objektno orjentisanog programiranja, pored enkapsulacije i polimorfizma, je nasleđivanje. Nasleđivanje je mogudnost klase da se formira iz ved postojede klase i da naslijedi polja i metode. Objekti nove klase imaju sve atribute i mogudnosti koje definiše roditeljska klasa. Za nasleđivanje se koristi rezervisana riječ extends na slededi način:

Primjer:

Konkretan primjer bi mogao biti klasa radnika sa metodom za obračun plata:



Problem sa ovakvom definicijom klase se javlja kada obračun plate nije jedinstven za sve radnike. Jedno od rješenja je proširivanje metode za obračun plate.

Međutim, mogu se pojavljivati novi načini obračuna plata pa bi uz svakog radnika trebalo navoditi tip obračuna plate kroz novo polje i na osnovu njega u metodu obračunajPlatu() vršiti različite obračune.

Trede rješenje je da se klasa radnik podijeli u više klasa. Međutim, po prirodi klasa, radnike treba opisati jednom klasom jer oni predstavljaju istu grupu objekata ali sa vlastitim specifičnostima. Primjer podjele u više klasa:



Na kraju, dolazimo do principa nasleđivanja koji nam daje najbolje rješenje. Svi objekti koji se tretiraju klasom su u stvari radnici, pa trebaju biti instance iste lase. Oni imaju zajedničke atribute kao što su: ime, jmbg i račun. Ono što ih razlikuje je način obračuna plate pa demo tu raličitost realizivati kroz nove klase, izveden iz klase Radnik, takve da svaka ima vlastiti metod obračuna plate:



Zatim demo definisati nove klase, nasljednice klase Radnik, sa vlastitim metodama izačunajPlatu().

Hijerarhija klasa Svaka klasa može nasleđivati samo jednu klasu, ali jedna klasa može biti nasleđena od više drugih klasa. Relacija nasleđivanja obično se prikazuje klasnim dijagramom:



Konkretan primjer bi mogla biti hijerarhija klasa vozila:

Sva putnička i teretna vozila su vozila. Svi automobili i motori su putnička vozila.



Izvršavanjem komande: Auto bmw = new Auto() dobija se objekat:

Naredbe:

ili su potpuno ispravne. Klasna promjenljiva x klasnog tipa A može sadržati reference na objekte svih klasa koje nasleđuju klasu A. Tako je ispravno napisati:

Operator instanceof omogudava provjeru pripadnosti objekta klasi:

npr:

Princip podtipa u obrnutom smjeru ne važi pa je slededi primjer neispravan:



Kao i kod primitivnih tipova i kod klasnih tipova je mogude vršiti konverziju:

ili

Primjer:

Rekli smo da pored public i private članova klase postoje i protected članovi. Oni se mogu koristiti u svakoj nasleđenoj klasi. Rezervisana riječ super – zaklanjanje polja i nadjačavanje metoda Ved znamo da ukoliko se u klasi koja B nasleđuje neku klasu A koriste polja ili metode istog naziva, da de se referenciranjem na takvo polje ili metodu koristiti polje ili metoda iz klase B. Ovakva osobina se naziva zaklanjanje polja i nadjačavanje metoda. Ovo ne znači da polje ili metoda ne postoje i u roditeljskoj klasi. Postavlja se pitanje da li je mogude pozivati polja i metode (sa istim nazivom u roditeljskoj i dijete klasi) i iz klase roditelj. Zaklonjeno polje ili nadjačani metod roditeljske klase se i dalje mogu koristiti upotrebom ključne riječi super.

super.zaklonjeni-član ili super.nadhačani-metod()



U ovom primjeru metode prikaži() u obe klase imaju isti potpis što znači da je metoda prikaži() klase Dijete nadjačana metodom prikaži() klase Učenik. Ako bi smo u glavnom programu imali naredbu:

oa bi prouzrokovala slededi ispis:

Modifikator final – sprečavanje nadjačavanja metoda i zaklanjanja klasa Ako želimo da spriječimo da neki metod u naslijeđenoj klasi bude zaklonjen ili da obezbijedimo da se klasa ne može naslijediti tj. da je klasa konačna u hijerarhijskom stablu klasa, koristimo ključnu riječ final.



Ovakva definicija metoda obezbjeđuje da metod nekiMetod() bude nadjačan u naslijeđenoj klasi.

Ovakvom definicijom klase se sprečava da klasa NekaKlasa() bude naslijeđena. Ovim je obezbijeđeno da klase koje su značajne, kao što su npr. standardne klase System ili String ne budu mijenjane. U kombinaciji sa klasama ključna riječ final se može upotrijebiti kada se pojavljuje klasa koja po svom značenju ne može imati klase naslednike. Konstruktori naslijeđenih klasa Nasleđivanje klasa ima efekta na polja i na metode ali ne i na konstruktore, što znači da se konstruktori ne nasleđuju. Međutim, postoji mogudnost da se u naslijeđenoj klasi koristi i konstruktori roditeljske klase. Ovo se postiže upotrebom ključne riječi super. Jedan ovakav slučaj ved smo imali u prethodnom primjeru:

U ovom slučaju je u konstruktoru klase Učenik pozvan konstuktor klase Dijete:

super(ime,uzrast); Poziv konstruktora roditeljske klase mora biti prva naredba u konstruktoru naslijeđene klase. Redoslijed pozivanja roditeljskih konstruktora i naslijeđenoj klasi je slededi:

ako je prva naredba naslijeđene klase obična naredba (nije niti this niti super) onda se onda se podrazumijevano najprije izvršava konstruktor roditeljske klase bez parametara super(),

ako je prva naredba konstruktora super onda se poziva taj konstruktor roditeljske klase,



ako je prva naredba kostruktora poziv preopteredenog konstruktora roditeljske klase onda se poziva preopteredeni konstruktor roditelja i

na kraju se nastavlja sa izvršavanjem preostalih naredbi. Ukoliko imamo nasleđivanje klasa u hijerarhiji sa više nivoa, pozivi konstruktora se po dubini izvršavaju rekurzivno. Klasa Object Na vrhu hijerarhije klasa nalazi se klasa Object. Iako smo ranije rekli da klasa može naslijediti samo jednu klasu sve klase su naslednice klase Object. Razlog za ovo je taj što klasa Object definiše osnovne mogudnosti koje moraju imati svi objekti. Ako neka klasa nije klasa naslednica onda je ona automatski naslednica klase Object pa je naredba:

ekvivalentna

Klasa Object ima definisanih nekoliko metoda koji su dio svake klase. To su:

equals() – omogudava poređenje objekata,

hashCode() – omogudava poređenje objekata kreiranjem hash vrijednosti,

toString() – vrada String objekat koji predstavlja objekat za koji je metod pozvan i

clone() – kreira kopiju objekta za koji je pozvan. Kod metoda equals() ne treba miješati provjeru jednakosti objekata po poljima sa provjerom da li dvije klasne promjenljive ukazuju na isti objekat. Equals() provjerava da li dvije klasne promjenljive ukazuju na isti objekat. Ako se želi realizovati provjera po jednakosti polja treba nadjačati metod equals().



Drugi primjer bi bio pogrešno provjeravanje objekata klase String po jednakosti:

nije isto što i

Klasne promjenljive Ime i korisničkoIme mogu da imaju iste vrijednosti ali da ukazuju na dvije različite klasne promjenljive pa bi ispitivanje ovakvih uslova moglo da vrati vrijednost false. Metod hashCode() daje jedinstvenu numeričku vrijednost nekog objekta pa na taj način omogudava provjeru jednakosti dva objekta prema vrijednostima u poljima. Metod toString() daje string (objekat tipa String) koji predstavlja objekat za koji je pozvan. Ona vrada string koji se sastoji od:

naziva klase kojoj objekat pripada,

znaka @ i

hash vrijednosti tog objekta. Primjer rezultata poziva metoda toString mogao bi biti: Dete@62f72617 Metod toString() nerijetko se nadjačava u naslijeđenim klasama:

Polimorfizam Riječ „polimorfizam“ prevedena sa grčkog jezika imala bi značenje „mnoštvo oblika“. U programskom jeziku Java polimorfizam se uglavnom povezuje sa preopteredenim i nadjačanim metodama:

preopteredeni metodi – metodi koji imaju isti naziv ali različit broj ili tip parametara tj. različit potpis i

nadjačani metodi – metodi nasleđenih klasa koji imaju isto ime i isti broj i tip parametara odnosno jednak potpis.



Polimorfizam i preopteredeni metodi Imamo primjer klase A i klase B koja nasleđuje klasu A. U klasi B imamo preopteredene metode: m(int x) i m(String y) i preopteredeni metod m() u roditeljskoj klasi A. Metod m() roditeljske klase A nije nadjačan jer ima različit potpis od metoda klase B.

Ved u fazi prevođenja programa jasno je koji metod de se izvršiti u poslednje tri linije koda pa se ovakvo povezivanje poziva metoda sa tijelom metoda koje de se izvršiti naziva statičko ili rano povezivanje.



Polimorfizam i nadjačani metodi U slededem primjeru imamo naslijeđene klase sa metodama istog naziva kao i u roditeljskoj klasi i sa identičnim potpisima.

Naredbe:

daju slededi ispis:

Odluka o tome koji metod de se pozvati donosi se tokom izvršavanja programa pa se ovakvo povezivanje poziva metoda sa tijelom metoda koje de se izvršiti naziva dinamičko ili kasno povezivanje.

Java - nizovi matrice i obrada grešaka 11-1


MODUL 11: Java – nizovi matrice i obrada grešaka Nizovi i matrice Kao i u drugim programskim jezicima i Java nudi mogudnost korištenja nizova. Niz je numerisani niz podataka istog tipa. Pojedinačni podaci u nizu nazivaju se elementi niza. Ukupan broj elemenata niza zove se dužina niza. Numeracija elemenata u Javi počinje od 0 i završava sa n-1. Definisanje niza:

int[] a; a = new int[100];

ili u jednoj naredbi:

int[] a = new int[100];

Broj u srednjim zagradama predstavlja broj elemenata niza. Elementi niza mogu biti i klasnog tipa npr.:

Student[] a = new Student[100];

Broj elemenata niza je fiksan. Polje length vrada broj elemenata niza. Dok se elementi niza ne inicijalizuju oni imaju podrazumijevane vrijednosti u zavisnosti od tipa podataka: nula (numerički), false (logički), "\u0000" (znakovni), null (klasni), ... Prilikom kreiranja nizova mogude je dodijeliti i inicijalne vrijednosti elementima:

int[] a = new int[] {1,2,3,4,5,6,7,8,9,10};

Na ovaj način automatski se određuje dužina niza. Konstrukcija: new int[] {1,2,3,4,5,6,7,8,9,10}

(anonimni niz) se može koristiti i kao parametar za metode bez da se koriste promjenljive koje pokazuju na nizove.



Na primjer, umjesto:

možemo pisati:

Elementi novoformiranog niza ne moraju biti konstante ved mogu biti i objekti:

Najčešdi način upotrebe nizova je prolazak i obrada kroz for petlju:

Treba biti obazriv sa naredbama tipa:

a = b;

gdje su a i b nizovi. Ova naredba nede iskoprati vrijednosti elemenata niza b elementima niza a ved de za referencu promjenljive a dodijeliti referencu promjenljive b, a ona pokazuje na niz u memoriji. Ako se žele upisati vrijednosti niza b elementima niza a onda treba koristiti petlju i naredbu tipa:

a[i] = b[i];

Prisjetimo se deklaracije metoda main koju smo imali u ve'ini dosada[njih primjera:

Parametar ovog metoda je niz stringova što znači da pozivom programa iz komandne linije, navodedi vrijednosti nakon naziva programa, navodimo proizvoljan broj parametara tipa string. Generalni oblik poziva programa tj. njegove glavne klase je:



Prethodni primjer ispisuje sve parametre sa komandne linije

public class argumentiMain { public static void main(String[] args) { for (int i=0; i<args.length; i++) System.out.println(" "+args[i]); } }

Kako bi se što lakše radilo sa nizovima mogude je koristiti klasu Arrays paketa java.util. Ova klasa sadrži nekoliko statičkih metoda za rad sa nizovima:

String toString(tip[] a) - vrada prezentaciju niza u obliku stringa,

tip[] copyOf(tip[] a, int n) - kreira novu kopiju niza a od prvih n elemenata,

tip[] copyOfRange(tip[] a, int i, int j) - kreira novu kopiju niza od pozicije i do pozicije j,

void sort(tip[] a) - sortira niz u rastudem poretku,

int binarySearch(tip[] a, tip v) - pronalazi vrijednost u nizu binarnom pretragom,

void fill(tip[] a, tip v) - dodjeljuje svim elementima niza a vrijednost v i

boolean equals(tip[] a, tip[] b) - vrada vrijednost true ako nizovi a i b imaju istu dužinu i jednake odgovarajude elemente inače vrada false.

Naredba for-each je oblik for petlje koja se koristi za nizove ali i za neke druge tipove podataka (kolekcije). Primijenjena na nizove ima oblik:

gdje je bazni-tip odgovarajudi prosti ili klasni tip elemenata niza, elem kontrolna promjenljiva i niz niz kroz koji se vrši prolazak u petlji. Prrethodna programska konstrukcija je ekvivalentna slededoj for petlji:



Primjedujemo da se upotrebom for petlje ne mora voditi računa o indeksima elemenata. Višedimenzionalni nizovi Sve navedeno za jednodimenzionalne nizove vrijedi i za višedimenzionalne. Specifičnosti višedimenzionalnih nizova su:

definisanje

konstruisanje

ili sve u jednoj naredbi

definisanje sa inicijalnim vrijednostima

Primjer: suma svih članova matrice (dvodimenzionalnog niza) for i for-each petljama



Metodi sa promjenljivim brojem argumenata Nerijetko se javlja potreba da se metodu može proslijediti proizvoljan broj parametara. Npr. imamo metod koji računa prosječnu ocjenu tj prosjek određenog broja numeričkih podataka. Poziv takvog metoda bi mogao biti:

Metod prosjek koji rješava zadatak računanja prosjeka bi bio oblika:

i mogao bi da izgleda:

ili

Zaključujemo da se iza tipa promjenljive i njenog naziva stavljaju tri tačke i one predstavljaju mogudnost slanja promjenljivog broja parametara metodi. Prilikom izvršavanja metoda parametri se smještaju u niz istog naziva kao što je i parametarska promjenljiva (u našem slučaju brojevi) i sa njim se manipuliše kao i sa svakim drugim nizom. U našem primjeru vidimo da je niz brojevi tretiram for i for-each petljom a dužina tj. broj parametara je dobijen iz atributa length. Ako metod prihvata više parametara onda onaj sa promjenljivim brojem argumenata mora biti na poslednjem mjestu.



Ograda grešaka u Java programima - izuzeci U svakom programu moguda je pojava grešaka. Neke greške mogu se pojaviti tokom izvršavanja programa a da pri tome nije obavezno da moraju biti prepoznate od strane kompajlera. Neke od klasičnih grešaka koje se često dešavaju u programima su:

prekoračenje opsega niza,

dijeljenje sa nulom,

nedozvoljene operacije sa negativnim brojevima kao što je npr. korijenovanje, ... Javin mehanizam za obradu grešaka su izuzeci. Izuzetak je događaj koji se dešava tokom izvršavanja Java aplikacije. Termini koji su u vezi sa izuzecima su:

izbacivanje izuzetaka, trenutak odnosno događaj kada se izuzetak desio,

hvatanje izuzetaka, tehnika prepoznavanja izuzetka i donošenje odluke o načinu njegove obrade i

obrada tj. izvršavanje programskog koda koji otklanja probleme nastale izvršavanjem programa.

Izuzetak je predstavljen objektom određene klase. Ti objekti sadrže:

opis uzroka koji je doveo do pojave izuzetka,

listu metoda koji su bili izvršavani do trenutka nastanka izuzetka i

ostale informacije o događaju. Svo objekti izuzetaka pripadaju nekoj klasi koja je nasljednica klase Throwable.



Na prethodnoj slici je prikazana hijerarhija klasa koje se odnose na izuzetke. Klasa Error i njene naslednice predstavljaju ozbiljne greške u izvršavanju programa. Nije predviđeno da se izuzeci tipa Error uhvate i obrade u programu. Nasuprot njima, za Exception izuzetke je predviđeno da se uhvate i obrade u programu kako ne bi izazvali naslian prekid programa. Podklasa RuntimeException predstavljaju programske greške koje se dešavaju tokom izvršavanja programa. Takve greške mogu biti:

prosleđivanje nedozvoljenog argumenta metoda,

prekoračenje granice niza,

korištenje nepostojedih referenci, ... Svjetlije oznake za klase Error i RuntimeException govore nam da se ovi događaji ne moraju obrađivati. Tačnije, ako se ovi događaji ne presretnu i ne obrade program de biti nasilno prekinut. Ostale klase predstavljaju izuzetke koje je neophodno obraditi. Klasa Throwable sadrži nekoliko zajedničkih metoda za sve klase nasljednice:

e.getMessage() - vrada tekstualni opis greške,

e.printstackTrace() - vrada listu aktivnih metoda u trenutku nastanka izuzetka i

e.tostring - vrada reprezentaciju objekta u obliku stringa. Obrada izuzetaka Najopštiji oblik naredbe koja omogudava presretanje i obradu izuzetaka je slededi:

try { . . // naredbe koje mogu izazavati pojavu izuzetka . } catch (tip-izuzetka promjenljiva) { . . // naredbe koje obrađuju izuzetak . } . . // ostali catch blokovi . finally { . . // naredbe koje se uvijek izvršavaju . }



Try blok je blok naredbi u kom potencijalno može da se desi pojava izuzetka. Catch blok je blok naredbi koji se izvršava kada se desi određeni izuzetak. Prepoznavanje catch bloka se vrši preko identifikatora tip-izuzetka. Mogude je da postoji više catch blokova što omogudava obradu više različitih izuzetaka. Finally blok se izvršava bezuslovno, bez obzira da li je došlo do pojave izuzetka ili nije odnosno bez obzira da li se izvršio neki od catch blokova ili nije. Uz jednu catch naredbu može postojati samo jedan finally blok. Ukoliko se u programu pojavi catch naredba obavezno je postojanje ili jednog catch ili barem jednog finally bloka. Još jednom ponavljamo, mogude je da postoji jedan, više ili niti jedan catch blok i jedan ili niti jedan finally blok. Primjer:

try { a[i] = 0;

} catch ( ArrayIndexOutOfBoundsException e) {

System.out.println("Indeks "+i+" niza a je van granica !!!") e.printStackTrace();

} catch ( NullPointerException e) {

System.out.println("Niz a ne postoji !!!") e.printStackTrace();

}

Umjesto objekata klasa ArrayIndexOutOfBoundsException i NullPointerException mogli smo koristiti i objekat jedne od zajedničkih roditeljskih klasa kao npr. RuntimeException.

try { a[i] = 0;

} catch (RuntimeException e) {

System.out.println("Greška "+e.getMessage()) e.printStackTrace();

}

Primjer za korištenje izuzetaka može biti mrežno programiranje. Pretpostavimo da za neke potrebe otvorimo mrežnu konekciju. Nakon toga trebe da izvršimo niz operacija tokom kojih se može a ne mora desiti da konekcija "pukne". Tada treba koristiti finally blok za zatvaranje mrežne konekcije bilo da je catch blok izvršen bez ili sa prekidom.

try { // rad preko otvorene konekcije } catch (IOException e) { // obrada greške; dalji rad nije mogud } finally { // zatvaranje konekcije i oslobađanje resursa }



Programer ima mogudnost da sam generiše izuzetak naredbom throw:

throw objekat-izuzetka gdje objekat-izuzetka mora pripadati klasi Throwable ili nekoj njenoj nasljednici. Primjer:

throw new ArithmeticException("Dijeljenje sa nulom") Ako se želi ukazati na to da u tijelu metoda može dodi do pojave izuzetka onda se takva mogudnost predstavlja proširivanjem zaglavlja metoda klauzulom throws:

public void nekiMetod(...) throws ArithmeticException { .... }

public class Izuzeci2App { public static void main(String[] args) { kvadratnaJednacina(1, 4, 2); kvadratnaJednacina(0, 4, 2); kvadratnaJednacina(1, 4, 5); } public static void kvadratnaJednacina(double a, double b, double c) throws IllegalArgumentException { if (a==0) throw new IllegalArgumentException("a==0 Nije kvadratna jednacina"); else if (b*b-4*a*c<0) throw new IllegalArgumentException("Korijeni nisu realni"); else { System.out.println(-b+Math.sqrt(b*b-4*a*c)); System.out.println(-b-Math.sqrt(b*b-4*a*c)); } } }

Ako se izuzetak pojavljuje u metodu koji se poziva iz nekog drugog metoda onda se posmatra da li je linija koda u kojoj se on desio obuhvadena try blokom. Ako jeste, izuzetak se obrađuje unutar tog metoda. Ako nije obrađuje se unutar meoda koji je pozvao metod u kom je došlo do izuzetka. Ako ni tu ne postoji mehanizam obrade izuzetaka ide se na prethodni metod u hijerarhiji pokrenutih metoda ("na gore"). Ukoliko se dođe do main metode i nema koda za obradu izuzetaka program se prekida.



Ved smo rekli da izuzetke možemo podijeliti na:

neprovjeravane (unchecked exceptions; Error i RuntimeException i njihove izvedene klase) i

provjeravane (checked exceptions; sve ostale klase i njihove izvedene klase). Takođe smo objasnili rekli da se izuzeci obrađuju:

direktno - unutar bloka try-catch ili

indirektno - klauzulom throws. Iz ovoga zaključujemo da programeri moraju voditi računa o provjeravanim izuzecima i moraju ih obraditi direktno ili indirektno. Ako metod A poziva metod B unutar kog se može desiti provjeravani izuzetak, onda unutar metoda A poziv metoda B mora biti unutar try-catch bloka ili se pri definiciji bloka A mora koristiti throws klauzula. Primjer: čitanje datoteke sa diska



Klase izuzetaka Kao i u nekim drugim slučajevima i prilikom obrade grešaka je mogude koristiti nasleđivanje i iz klase Throwable ili neke njene naslednice nasleđivanjem definisati neku drugu klasu. Pisanjem vlastitih klasa za izuzetke može se proširiti funkcionalnost i na vlastiti način obraditi izuzetak, ali isto tako i iskoristiti ved ugrađeni sistem za obradu izuzetaka. Takođe je mogude pozvati i konstruktore roditeljskih klasa upotrebom naredbe super(). U nastavku je dat primjer klase izuzetaka:

PogresanPrecnikIzuzetak.java public class PogresanPrecnikIzuzetak extends Exception { public PogresanPrecnikIzuzetak(String poruka) { super(poruka); } } Krug.java public class Krug { private double precnik; public Krug(double p) throws PogresanPrecnikIzuzetak { promijeniPrecnik(p); } public void promijeniPrecnik(double p) throws PogresanPrecnikIzuzetak { if (p>=0) precnik = p; else throw new PogresanPrecnikIzuzetak("Negativan precnik kruga"); } public double getPrecnik() { return precnik; } public double povrsina() { return Math.PI * precnik * precnik; } }



TestKrug.java public class TestKrug { public static void main(String[] args) { try { System.out.println("Konstruisanje prvog kruga ..."); Krug k1 = new Krug(5); k1.promijeniPrecnik(-1); System.out.println("Konstruisanje drugog kruga ..."); Krug k2 = new Krug(-5); } catch (PogresanPrecnikIzuzetak e) { System.out.println(e.getMessage()); } } }

Java Servlets 12-1


MODUL 12: Java Servlets Java Web aplikacije Java Web aplikacije su kolekcije dinamičkih resursa kao što su: servleti, JavaServer Pages, Java klase i jar fajlovi, ... kao i statički resursi (HTML stranice, slike, ...). Java Web aplikacija može biti razvijena kao .war fajl. To je kompresovana (zipovana) datoteka u kojoj se nalazi kompletan sadržaj Web aplikacije. Java tehnologije su definisane kroz standardni proces koji se zove Java Community Process (JCP). JCP definiše sledede tri tehnologije:

Servlets – servleti su Java klase koji proširuju HttpServlet klasu i odgovaraju na HTTP zahtjeve,

JavaServer Pages (JSP) – tehnologija koju predstavljaju fajlovi koji sadrže HTML i Java kod; JSP sadržaji se prilikom prvog pristupa kompajliraju u servlete,

JavaServer Pages Standard Tag Library (JSTL) – „omotavaju“ osnovne funkcionalnosti zajedničke za mnoge Web aplikacije u jednostavne tagove.

Radno okruženje za kreiranje Java Servleta Da bi mogli pisati i izvršavati Java servlete potrebni su nam:

Java razvojno okruženje – koristidemo „Eclipse IDE for Java EE Developers“ i

Java server – koristidemo „Apache Tomcat“. „Eclipse IDE for Java EE Developers“ se može preuzeti sa Eclipse Web lokacije http://www.eclipse.org/downloads/ . Treba obratiti pažnju da nam je potrebna EE verzija - Enterprise Edition. Instalacija je data u vidu .zip fajla koji je samo potrebno raspakovati i pokrenuti program eclipse.exe iz eclipse foldera. U vrijeme pisanja ovih priprema za vježbu (12/2013) preporučuje se verzija Eclipse Kepler (4.3.1) tj. fajlovi:

eclipse-jee-kepler-SR1-win32.zip za 32-bitne operativne sisteme ili

eclipse-jee-kepler-SR1-win32-x86_64.zip za 64-bitne sisteme. Preduslov za kreiranje i izvršavanje Java aplikacija je postojanje Java Runtime Environment-a JRE koji se može preuzeti i instalirati sa lokacije http://java.com/en/download/index.jsp . U vrijeme pisanja ovih priprema za vježbu (12/2013) preporučuje se verzija JRE 7 Update 45 tj. fajlovi:

jdk-7u45-windows-i586.exe za 32-bitne operativne sisteme ili

jdk-7u45-windows-x64.exe za 64-bitne operativne sisteme.

http://www.eclipse.org/downloads/

http://java.com/en/download/index.jsp

Java Servlets 12-2


Ovo uputstvo podrazumijeva upotrebu odgovarajudeg Windows operativnog sistema. Da bi servleti mogli da se izvršavaju potreban nam je i server aplikacija. Koristidemo Apache Tomcat. U vrijeme pisanja ovih priprema za vježbu (12/2013) korištena je verzija 7 tj. instalacioni fajl apache-tomcat-7.0.47.exe koji se može preuzeti sa lokacije http://tomcat.apache.org . Instalacija potrebnih programa Prvo je potrebno instalisati Java Runtime Environment. Zatim slijedi instalacija Eclipse razvojnog okruženja. Tokom ovih instalacija prihvatiti sve podrazumijevano postavljene opcije. Na kraju slijedi instalacija Apache Tomcat servera i podešavanje Eclipse-a za integraciju sa njim. Tokom instalacije Apache Tomcat servera, pored vedine koraka koji imaju podrazumijevane opcije, navešdemo samo neka podešavanja:

Za sve ostale korake u instalaciji prihvatiti ponuđene opcije. Na kraju instalacije NE POKRETATI Apache Tomcat Server kao što pokazuje slededa slika (pritisnuti dugme Finish):

http://tomcat.apache.org/

Java Servlets 12-3


Nakon instalacije Apache Tomcat servera potrebno je podesiti Eclipse kako bi se kreirani servleti mogli izvršavati. Najprije demo podesiti okruženje za izvršavanje aplikacija (Runtime Environment) odabirom opcije Window -> Preferences -> Server -> Runtime Environments -> Add dugme. Treba odabrati „Apache Tomcat v7.0“ server i podesiti server na slededi način:

Pritisnuti Finish. Zatim treba „kreirati“ server. Najprije provjeriri da li postoji kartica sa listom servera:

Ako je stanje kao na prethodnoj slici ili slično tj. ako ne postoji kartica server onda bi sa menija, odabirom opcije Window -> Show Views -> Servers, trebalo da se pojavi kartica (slededa slika) u kojoj demo kreirati server.

Kliknuti na link „No servers are available. Click this link to create a new server.“.

Java Servlets 12-4


U formi koja de se pojaviti odabrati / unijeti opcije kao na slededoj slici i nakon toga kliknuti na dugme Finish.

Kreirani server trebalo bi da se pojavi na spisku servera:

Java Servlets 12-5


Kreiranje testnog servleta Kreirademo testni server koji prikazuje broj posjeta. Kreiranje projekta počinjemo opcijom File -> New -> Other... -> Web -> Dynamic Web Project . Obratiti pažnju na prametar „Dynamic web module version“ koji treba da je 2.5.

Zatim kreiramo novi paket opcijom sa menija File -> New -> Other... -> Java -> Package naziva „intprog.filecounter.dao“ i klasu File -> New -> Other... -> Class naziva „FileDao“:

i unesemo kod:

Java Servlets 12-6


package intprog.filecounter.dao;

import java.io.BufferedReader;

import java.io.File;

import java.io.FileReader;

import java.io.FileWriter;

import java.io.IOException;

import java.io.PrintWriter;

public class FileDao {

public int getCount() {

int count = 0;

// Load the file with the counter

FileReader fileReader = null;

BufferedReader bufferedReader = null;

PrintWriter writer = null ;

try {

File f = new File("FileCounter.initial");

if (!f.exists()) {

f.createNewFile();

writer = new PrintWriter(new FileWriter(f));

writer.println(0);

}

if (writer !=null){

writer.close();

}

fileReader = new FileReader(f);

bufferedReader = new BufferedReader(fileReader);

String initial = bufferedReader.readLine();

count = Integer.parseInt(initial);

} catch (Exception ex) {

if (writer !=null){

writer.close();

}

}

if (bufferedReader != null) {

try {

bufferedReader.close();

} catch (IOException e) {

e.printStackTrace();

}

}

return count;

}

public void save(int count) throws Exception {

FileWriter fileWriter = null;

PrintWriter printWriter = null;

fileWriter = new FileWriter("FileCounter.initial");

printWriter = new PrintWriter(fileWriter);

printWriter.println(count);

// make sure to close the file

if (printWriter != null) {

printWriter.close();

}

}

}

Java Servlets 12-7


Konačno kreiramo i servlet opcijom File -> New -> Other... -> Java -> Web -> Servlet pod nazivom FileCounter kao na slededoj slici:

Zatim unesemo slededi kod: package intprog.filecounter.dao;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import intprog.filecounter.dao.FileDao;

/** * Servlet implementation class FileCounter */

public class FileCounter extends HttpServlet {

private static final long serialVersionUID = 1L;

int count;

private FileDao dao;

public void init() throws ServletException {

dao = new FileDao();

try {

count = dao.getCount();

} catch (Exception e) {

getServletContext().log("An exception occurred in FileCounter", e);

throw new ServletException("An exception occurred in FileCounter"

+ e.getMessage());

}

Java Servlets 12-8


}

protected void doGet(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

// Set a cookie for the user, so that the counter does not increate

// every time the user press refresh

HttpSession session = request.getSession(true);

// Set the session valid for 5 secs

session.setMaxInactiveInterval(5);

response.setContentType("text/plain");

PrintWriter out = response.getWriter();

if (session.isNew()) {

count++;

}

out.println("This site has been accessed " + count + " times.");

}

public void destroy() {

super.destroy();

try {

dao.save(count);

} catch (Exception e) {

e.printStackTrace();

}

}

}

Servlet izvršavamo na jedan od četiri načina: 1. Selektujemo servlet FileCounter.java u Project Exploreru, u stablu FileCounter -> JavaResources -> src -> intprog.filecounter.dao -> FileCounter.java i desnim klikom sa padajudeg menija biramo opciju Run As -> Run on Server. Vidjeti sliku:

Java Servlets 12-9


2. Drugi način je da selektujemo pomenuti fajl i sa tastature pritisnemo kombinaciju tipki Alt+Shit+X a nakon toga tipku R pa dugme Finish. 3. Tredi način je da uz prethodno selektovanje servleta FileCounter.java, sa menija biramo opciju: Run -> Run As -> Run on Server . 4. Poslednji način na koji možemo pokrenuti servlet je da nakon selekcije servleta

(FileCounter.java) sa toolbar-a biramo opciju Run pritiskom na ikonu . Rezultat pokretanja servleta prikazan je slededom slikom:

Nakon pokretanja servleta na jedan od pomenutih načina, servlet možemo testirati i pozivom iz Web čitača. U adresno polje čitača treba unijeti adresu:

http://localhost:8080/FileCounter/FileCounter Rezultat poziva servleta je:

Java Servlets 12-10


Jednostavan servlet sa instalacijom na Tomcat server Kreirati projekat File -> New -> Other -> Web -> Dynamic Web Project i dati mu naziv Project name: Zdravo a zatim postaviti Dynamic web module version: 2.5. U projektu kreirati servlet: File -> New -> Other -> Web -> Servlet sa Class name: Zdravo. U kreirani Zdravo.java fajl dodati kod:

na vrhu fajla dodati naredbu: import java.io.PrintWriter;

u protected void doGet metod dodati dvije linije koda: PrintWriter out = response.getWriter(); out.println("Zdravo!");

Snimiti Zdravo.java i pokrenuti na ranije opisane načine. Pokretanje servleta unutar Eclipse okruženja osim izvršavanja servleta ima za posledicu i prethodno kreiranje .class fajla koji nam je potreban za „instalaciju“ servleta na Tomcat server. Zaustaviti server unutar Eclipse okruženja i pokrenuti Apache Tomcat server. Da bi se servlet pokretao iz čitača Web-a sa Apache tomcat servera i bez Eclipse okruženja treba uraditi sledede:

Treba pronadi fajl Zdravo.class i premjestiti ga iz Eclipse radnog prostora u Apache Tomcat fajl sistem u odgvarajudi folder.

Lokaciju fajla Zdravo.class određujemo tako što u Project Exploreru Eclipse-a desnim klikom kliknemo na projekat i biramo opciju Properties. U dijelu Resource parametar Location sadrži putanju do potrebnih fajlova. U Windows Exploreru pronadi taj folder i otidi u foldere build -> classes i kopirati Zdravo.class (Ctrl+C).

Ovaj fajl treba postaviti (Ctrl+V) u Apache Tomcat folder u kom treba da se nalaze servleti npr:

C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\examples\WEB-INF\classes

U folderu: C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\examples\WEB-INF pronadi fajl web.xml i editovati ga dodajudi tagove:

<servlet> <servlet-name>Zdravo</servlet-name> <servlet-class>Zdravo</servlet-class>

</servlet> <servlet-mapping>

<servlet-name>Zdravo</servlet-name> <url-pattern>/servlets/servlet/Zdravo</url-pattern>

</servlet-mapping>

<servlet> tagove dodati iza ostalih <servlet> tagova, a <servlet-mapping> iza ostalih

<servlet-mapping> tagova. Snimiti web.xml i završiti njegovo editovanje.

Java Servlets 12-11


Pokrenuti Apache Tomcat server tako što sa Start menija Windowsa treba pronadi program Monitor Tomcat i odabrati opciju Start Service.

Sada bi trebalo da je sve spremno za pokretanje našeg prvog servleta. U Web čitaču treba kucati adresu servleta koja može da zavisi od instalacije Apache Tomcat-a ali je najvjerovatnije:

http://localhost:8080/examples/servlets/servlet/Zdravo

Servleti Iz osnovnog primjera:

import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class Zdravo extends HttpServlet{

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {

PrintWriter out = response.getWriter(); out.println(“Zdravo!”);

} }

možemo zaključiti nekoliko stvari:

servleti su Java klase naslednice klase HttpServlet,

servleti mogu nadjačati metod doGet primajudi klasne objekte tipa HttpServletRequest i HttpServletResponse,

naredba import java.io.*; omogudava da koristimo PrintWriter klasu,

naredba import java.servlet.*; je neophodna za pisanje servleta,

Java Servlets 12-12


naredba import java.servlet.http.*; omogudava korištenje HttpServletRequest i HttpServletResponse klasa,

request je klasnog tipa HttpServletRequest i sadrži podatke koji mogu biti poslani GET ili POST metodom sa Web stranice,

response parametar je klasnog tipa HttpServletResponse i omogudava slanje odgovora Web čitaču tj. klijentu koji je uputio zahtjev serveru.

U tijelo doGet metoda možemo staviti slededi kod koji de kao odgovor servleta poslati HTML stranicu:

PrintWriter out = response.getWriter(); String docType = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">\n"; out.println(docType + "<HTML>\n" + "<HEAD><TITLE>Zdravo</TITLE></HEAD>\n"+ "<BODY BGCOLOR=\"#FDF5E6\">\n" + "<H1> Zdravo </H1>\n" + "</BODY></HTML>");

Obrada GET metoda

import java.io.*; import javax.servlet.*; import javax.servlet.http.*; .............. public class ObradaGetMetodaServlet extends HttpServlet { public void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<html>" + "<head><title>Primjer citanja vrijednosti parametra</title></head>"); String servletPar1 = request.getParameter("par1"); if (servletPar1 != null) {

out.println("<body>" + servletPar1); }

out.println("</body></html>"); out.close(); } } ...........

Java Servlets 12-13


Da bi smo testirali ovaj servlet u Eclipse-u ga jednom pokrenemo pa kreirani fajl ObradaGetMetodaServlet.class iskopiramo na način kako je to ved objašnjeno. Za potrebe testiranja servleta napravidemo ObradaGetMetodaServletTest.html fajl slededeg sadržaja:

<!DOCTYPE html> <html> <body> <form name="input" action="http://localhost:8080/examples/servlets/servlet/ObradaGetMetodaServlet" method="get"> Ime: <input type="text" name="par1" value="Marko"><br> Prezime: <input type="text" name="par2" value="Markovic"><br> <input type="submit" value="Prihvati (get)"> </form> <p>Uneseni podaci ce biti poslani servletu GET </p> </body> </html>

i postavidemo ga u http://localhost:8080/examples/ folder Apache Tomcat-a tačnije u fajl sistem na lokaciji C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\examples . Sa pokrenutim Apache Tomcat-om u Web čitaču otvaramo URL:

http://localhost:8080/examples/ObradaGetMetodaServletTest.html U oba polja unesemo vrijednosti i pritisnemo dugme Posalji. Servlet je podrazmijevana akcija za formu i ispisuje vrijednost unesenu u prvom polju. Do istog rezultata smo mogli dodi navođenjem parametra par1 u URL-u poziva servleta:

http://localhost:8080/examples/servlets/servlet/ObradaGetMetodaServlet?par1=Marko Obrada POST metoda Na sličan način se servletom može obraditi i POST metod sa HTML forme. Kao i kod obrade GET slanja podataka sa forme potreban nam je jedan servlet i jedan HTML fajl koji de pozivati kreirani servlet. S obzirom da se radi o POST metodi slanja podataka iz forme ne može se koristiti unos parametara u URL servleta kao kod GET metode.

http://localhost:8080/examples/

Java Servlets 12-14


Kod servleta bi bio:

import java.io.*; import javax.servlet.*; import javax.servlet.http.*; .............. public class ObradaPostMetodaServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<html>" + "<head><title>Primjer citanja vrijednosti parametra</title></head>"); String servletPar1 = request.getParameter("par1"); if (servletPar1 != null) { // prikazivanje procitane vrijednosti out.println("<body>" + servletPar1); } out.println("</body></html>"); out.close(); } ...........

dok bi odgovarajuci ObradaPostMetodaServletTest.html fajl imao sadržaj:

<!DOCTYPE html> <html> <body> <form name="input" action="http://localhost:8080/examples/servlets/servlet/ObradaPostMetodaServlet" method="post"> Ime: <input type="text" name="par1" value="Marko"><br> Prezime: <input type="text" name="par2" value="Markovic"><br> <input type="submit" value="Prihvati (post)"> </form> <p>Uneseni podaci ce biti poslani servletu POST</p> </body> </html>

Na kraju, napomenimo još dva značajna metoda HttpServletRequest objekta:

getParameter(imeparametra) – URL dekodovana vrijednost prvog parametra,

getParameterValues(imeparametra) – niz URL dekodovanih vrijednosti zadatog imena i

getParameterNames() – vrada Enumeration ili Map objekat poslatih elemenata.

JavaServer Pages 13-1


MODUL 13: JavaServer Pages

Tehnologije Java Internet programiranja - JavaServer Faces 14-1


MODUL 14: Tehnologije Java Internet programiranja - JavaServer Faces JavaServer Faces je jedna od najčešde korištenih tehnologija Java Internet programiranja. Ona omogudava automatizovanje izrade aplikacija i jednostavnije izvršavanje najčešdih operacija. Glavne karakteristike JavaServer Faces su:

sadrži skup UI komponenti,

omogudava kreiranje „događajima vođene“ aplikacije koja je sposobna da reaguje i obradi različite događaje iz aplikacije i

sadrži model komponenti koji omogudava razvoj dodatnih serverskih komponenti Neke od najčešde korištenih JavaServer Faces komponenti su:

ulazna polja,

komandna dugmad,

tabele podataka,

stabla, ... Ove komponente sadržesav potreban kôd za obradu događaja i organizaciju komponenti pa programer može da se fokusira na logiku aplikacije umjesto na nepotrebne detalje. JavaServer Faces je dio Java Enterprise Edition što podrazumijeva da je uključen u svaki Java EE aplikacioni server.



Vježba 1: Kreirati Web sajt koji sadrži stranice: Početna, O fakultetu, Misija i Vizija. Stranice treba kreirati pomodu Facelets šablona kreiranog na osnovu proizvoljno odabranog CSS templejta sa Interneta. Tok vježbe:

Kreiranje novog projekta U Eclipse kreirati novi projekat tipa „Dynamic Web Project“ sa parametrima: Project name=V14_01, Target runtime=Apache Tomcat v7.0, Dynamic web module version=3.0 i Configuration=JavaServer Faces v2.0 Project. Next. Next. Čekirati Generate web.xml. Next. Čekirati: MyFaces 2.0.20. Finish. Ovim smo kreirali novi projekat.

Kreiranje templejta Sa Interneta preuzeti proizvoljan CSS templejt npr. sa sajta http://www.freecsstemplates.org i raspakovati ga po preuzimanju. U ovoj vježbi je korišten šablon temporaryissue.zip koji se nalazi u fajlu rješenja ove vježbe. Koji god šablon da koristimo dobidemo index.html fajl i ostale .css i grafičke fajlove koji definišu šablon. Sadržaj fajla index.html demo modifikovati i iskoristiti za kreiranje našeg templejta dok demo sve ostale fajlove kopirati u workspace folder: V14_01 -> WebContent To je fajl style.css i folder images. Zatim kreiramo fajl šablona template.xhtml. To radimo na slededi način: desnim klikom na folder WebContent sa menija biramo New -> Other -> XHTML page. Next, a za File name unesemo template.xhtml. Sa sledede strane čarobnjaka za kreiranje XHTML fajla biramo opciju „Blank JSF Page“. Next, Finish. Sada treba da editujemo ovaj fajl i na taj način kreiramo šablon. Unutar tagova <h:head>

</h:head> dodamo slededi kod: <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title><ui:insert name="title" /></title>

a odmah iza toga i liniju koja je preuzeta iz index.html šablona koji koristimo: <link rel="stylesheet" type="text/css" href="style.css" />

Sav sadržaj unutar <body></body> tagova fajla index.html kopiramo unutar <body></body> tagova fajla template.xhtml. Pronadjemo navigaciju (u našem slučaju opcije: Home, Our Services, Our Portfolio, ...) i modifikujemo ih tako što umjesto njih ubacujemo sledede tagove:

http://www.freecsstemplates.org/



<a href="index.xhtml">Početna stranica</a> <a href="ofakultetu.xhtml">O fakultetu</a> <a href="misija.xhtml">Misija</a> <a href="vizija.xhtml">Vizija</a> Fajlove: index.xhtml, ofakultetu.xhtml, misija.xhtml i vizija.xhtml tek demo da kreiramo. Poslednje dvije stavke postojedeg menija: Blog i Contact Us demo obrisati. Zatim demo obrisati sav sadržaj unutar tagova <div id="main"></div> i umjesto njega dodati slededi tag: <ui:insert name="content" /> Ovaj tag de nam omoguditi prikazivanje sadržaja kada budu pozivani fajlovi: index.xhtml, ofakultetu.xhtml, misija.xhtml i vizija.xhtml. Da rezimiramo, šablon smo kreirali tako što smo:

dodali tag <ui:insert name="title" />,

zamijenili navigacioni meni dodajudi hiperveze prema našim .xhtml fajlovima i

unutar body tagova dodali tag <ui:insert name="content" /> koji de omoguditi prikazivanje sadržaja.

Sada nam još preostaje da kreiramo .xhtml fajlove. Kreiranje .xhtml fajlova Kreiranje .xhtml fajlova objasnidemo na jednom primjeru (index.xhtml) a ostale .xhtml fajlove kreiramo analogno. Kao i kod template.xhtml na isti način u folderu WebContent kreiramo index.xhtml fajl. Zatim čitav sadržaj ovog fajla zamijenimo sa slededim: <html xmlns="http://www.w3c.org/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <ui:composition template="/template.xhtml"> <ui:define name="title">xyz</ui:define> <ui:define name="content">abc</ui:define> </ui:composition> </body> </html>



Pokretanje sajta Desnim klikom na fajl index.xhtml odaberemo opciju Run As sa menija i, ukoliko je sve dobro urađeno, otvoride se početna stranica.



Vježba 2: Kreirati Web sajt koji omogudava rad sa tabelom City MySQL baze World. Instalirati MySQL server (npr. Apache stek-server WAMP) i importovati demo bazu World sa sajta dev.mysql.com. Aplikacija treba da sadrži stranice:

osnovnu koja omogudava tabelarni pregled podataka iz tabele City,

stranicu za unos novog grada u tabelu baze i

stranicu koja omogudava izmjenu sloga tabele city. Korititi <h:...> tagove.

Tok vježbe:




Kreiranje .xhtml i .java fajlova Potrebne .xhtml fajlove kreiramo u folderu WebContent. Osnovni .xhtml fajl je index.xhtml i on de sadržavati tabelu sa osnovnim podacima o gradovima kao i linkove prema opcijama/stranicama za unos novog i izmjenu postojedeg sloga grada. Uz svaki slog stajade i opcija za brisanje grada. Izmjene demo vršiti preko fajla izmjene.xhtml a unos novog preko fajla novi.xhtml. Struktura tabele city može se predstaviti slededim upitom:

CREATE TABLE IF NOT EXISTS `city` ( `ID` int(11) NOT NULL AUTO_INCREMENT, `Name` char(35) NOT NULL DEFAULT '', `CountryCode` char(3) NOT NULL DEFAULT '', `District` char(20) NOT NULL DEFAULT '', `Population` int(11) NOT NULL DEFAULT '0', PRIMARY KEY (`ID`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4090 ;

index.xhtml <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </h:head> <h:body> <a href="novi.xhtml">Dodaj grad</a> <div id="rightColumn" style="width: 80%; float: left; padding: 10px; background-color: #E0CBC1;"> <h:form> <h:dataTable value="#{citiesDB.cities}" var="grad" width="100%" border="1" > <h:column> <f:facet name="header">Grad</f:facet> <h:outputLabel value="#{grad.name}" /> </h:column> <h:column> <f:facet name="header">Kod drzave</f:facet> <h:outputLabel value="#{grad.countryCode}" /> </h:column> <h:column> <f:facet name="header">Oblast</f:facet> <h:outputLabel value="#{grad.district}" /> </h:column> <h:column> <f:facet name="header">Broj st.</f:facet> <h:outputLabel value="#{grad.population}" /> </h:column> <h:column> <f:facet name="header"></f:facet> <h:commandLink value="Izmijeni" action="#{citiesDB.selectCityById(grad.id)}" /><h:outputLabel> </h:outputLabel><br/> <h:commandLink value="Briši" action="#{citiesDB.deleteCity(grad.id)}" /> </h:column> </h:dataTable> </h:form> </div>



</h:body> </html>

Vidimo da je index.xhtml veoma sličan klasičnom .html fajlu s tim da su korišteni <h:... i <f:... tagovi umjesto klasičnih HTML tagova. Čitanje i manipulaciju podataka iz baze omogudavaju nam kôd oblika ="#{citiesDB.cities}". Ovo je veza sa našim Java kodom koji de na serverskoj strani obavljati povezivanje sa bazom podataka i vršiti čitanje, dodavanje i izmjenu podataka. izmjene.xhtml <html xmlns = "http://www.w3c.org/1999/xhtml" xmlns:f = "http://java.sun.com/jsf/core" xmlns:h = "http://java.sun.com/jsf/html"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </h:head> <body> <h2>Izmjena podataka o gradu</h2> <a href="index.xhtml">Gradovi</a> <div id="leftColumn" style="width: 20%; float: left; background-color: #BAA9A0; padding: 10px;"> <h:form> <h:outputLabel>Grad: </h:outputLabel><br/> <h:inputText id="nazivGrada" value="#{citiesDB.currentCity.name}" required="true" requiredMessage=" * Polje je obavezno" /> <h:message for="nazivGrada" style="color: red;" /><br/> <h:outputLabel>Kod drzave: </h:outputLabel><br/> <h:inputText id="kodDrzave" value="#{citiesDB.currentCity.countryCode}" required="true" requiredMessage=" * Polje je obavezno" /> <h:message for="kodDrzave" style="color: red;" /><br/> <h:outputLabel>Oblast: </h:outputLabel><br/> <h:inputText id="oblast" value="#{citiesDB.currentCity.district}" /><br/> <h:outputLabel>Broj stanovnika: </h:outputLabel><br/> <h:inputText id="brojStanovnika" value="#{citiesDB.currentCity.population}" /><br/> <h:commandButton id="izmijeniGrad" value="Sačuvaj izmjene" action="#{citiesDB.updateCityById()}" /> </h:form> </div> </body> </html>

novi.xhtml <html xmlns = "http://www.w3c.org/1999/xhtml" xmlns:f = "http://java.sun.com/jsf/core" xmlns:h = "http://java.sun.com/jsf/html">



<h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </h:head> <body> <h2>Dodavanje novog grada</h2> <a href="index.xhtml">Gradovi</a> <div id="leftColumn" style="width: 20%; float: left; background-color: #BAA9A0; padding: 10px;"> <h:form> <h:outputLabel>Grad: </h:outputLabel><br/> <h:inputText id="nazivGrada" value="#{citiesDB.currentCity.name}" required="true" requiredMessage=" * Polje je obavezno" /> <h:message for="nazivGrada" style="color: red;" /><br/> <h:outputLabel>Kod drzave: </h:outputLabel><br/> <h:inputText id="kodDrzave" value="#{citiesDB.currentCity.countryCode}" required="true" requiredMessage=" * Polje je obavezno" /> <h:message for="kodDrzave" style="color: red;" /><br/> <h:outputLabel>Oblast: </h:outputLabel><br/> <h:inputText id="oblast" value="#{citiesDB.currentCity.district}" /><br/> <h:outputLabel>Broj stanovnika: </h:outputLabel><br/> <h:inputText id="brojStanovnika" value="#{citiesDB.currentCity.population}" /><br/> <h:commandButton id="kreirajGrad" value="Dodaj" action="#{citiesDB.addCity()}" /> </h:form> </div> </body> </html>

Kao što smo ved rekli, vezu između .xhtml kôda i baze podataka upotpunjuje Java kod. On se nalazi u dva fajla koji su zasebnim paketima (package).



Citiy.java Ovaj fajl je, u stvari, bean i odražava strukturu tabele sa kojom se radi. package dto; public class City { private int Id = 0; private String Name = null; private String CountryCode = null; private String District = null; private Integer Population = null; public int getId() { return Id; } public String getName() { return Name; } public String getCountryCode() { return CountryCode; } public String getDistrict() { return District; } public Integer getPopulation() { return Population; } public void setId(int Id) { this.Id = Id; } public void setName(String Name) { this.Name = Name; } public void setCountryCode(String CountryCode) { this.CountryCode = CountryCode; } public void setDistrict(String District) { this.District = District; } public void setPopulation(Integer Population) { this.Population = Population; } } CitiesDB.java package dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList;



import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import dto.City; @ManagedBean @SessionScoped public class CitiesDB { private City currentCity = new City(); private String driver = "com.mysql.jdbc.Driver"; private String url = "jdbc:mysql://127.0.0.1:3306/world?characterEncoding=utf8"; private String username = "root"; private String password = ""; private Connection connection = null; private PreparedStatement ps = null; private String SELECT_CITIES = "SELECT * FROM city ORDER BY ID ASC"; private String INSERT_CITIES = "INSERT INTO city (Name, CountryCode, District, Population) VALUES (?,?,?,?)"; private String DELETE_CITIES = "DELETE FROM city WHERE ID=?"; private String SELECT_CITY_BY_ID = "SELECT * FROM city WHERE ID = ?"; private String UPDATE_CITY_BY_ID = "UPDATE city SET Name = ?, CountryCode = ?, District = ?, Population = ? WHERE ID = ?"; public CitiesDB() throws ClassNotFoundException, SQLException { Class.forName(driver); connection = DriverManager.getConnection(url,username,password); } public City getCurrentCity() { return currentCity; } public void setCurrentCity(City currentCity) { this.currentCity = currentCity; } public ArrayList<City> getCities() throws SQLException { ArrayList<City> cities = new ArrayList<City>(); ps = connection.prepareStatement(SELECT_CITIES); ResultSet rs = ps.executeQuery(); while(rs.next()) { City temp = new City(); temp.setId(rs.getInt("ID")); temp.setName(rs.getString("Name")); temp.setCountryCode(rs.getString("CountryCode")); temp.setDistrict(rs.getString("District")); temp.setPopulation(rs.getInt("Population")); cities.add(temp); } return cities; }



public String addCity() throws SQLException { ps = connection.prepareStatement(INSERT_CITIES); ps.setString(1, currentCity.getName()); ps.setString(2, currentCity.getCountryCode()); ps.setString(3, currentCity.getDistrict()); ps.setInt(4, currentCity.getPopulation()); ps.execute(); currentCity = new City(); return "index.xhtml"; } public String deleteCity(Integer id) throws SQLException { System.out.println("Brisanje grada ID = " + id.toString()); ps = connection.prepareStatement(DELETE_CITIES); ps.setString(1, id.toString()); ps.execute(); return "index.xhtml"; } public String selectCityById(int id) throws SQLException { ps = connection.prepareStatement(SELECT_CITY_BY_ID); ps.setInt(1, id); ResultSet rs = ps.executeQuery(); currentCity = new City(); while (rs.next()) { currentCity.setId(rs.getInt("ID")); currentCity.setName(rs.getString("Name")); currentCity.setCountryCode(rs.getString("CountryCode")); currentCity.setDistrict(rs.getString("District")); currentCity.setPopulation(rs.getInt("Population")); } return "izmjene.xhtml"; } public String updateCityById() throws SQLException { ps = connection.prepareStatement(UPDATE_CITY_BY_ID); ps.setString(1, currentCity.getName()); ps.setString(2, currentCity.getCountryCode()); ps.setString(3, currentCity.getDistrict()); ps.setInt(4, currentCity.getPopulation()); ps.setInt(5, currentCity.getId()); ps.execute(); return "index.xhtml"; } }

JavaServer Faces - RichFaces 15-1


MODUL 15: JavaServer Faces - RichFaces Kako smo vidjeli u prethodnom poglavlju upotreba JavaServer Faces tehnologije omogudava povezivanje sa bazom podataka i manipulaciju podatak. Isto tako smo vidjeli da se ovakve aplikacije baziraju na klasičnim HTML tagovima. Da bi se dobile aplikacije koje su grafički bogatije i kako bi se na što lakši način upotrebljavale klijentske tehnologije kao što su JavaScript ili AJAX potrebno je koristiti neku od velikog broja biblioteka kao što je npr. JBoss RichFaces. RichFaces je biblioteka za JavaServer Faces tehnologiju otvorenog koda sa mogudnošdu upotrebe AJAX tehnologije. Kao primjer demo kreirati aplikaciju iz prethodnog modula upotrebom RichFaces biblioteke. Vježba 1: Kreirati Web sajt koji omogudava rad sa tabelom City MySQL baze World. Instalirati MySQL server (npr. Apache stek-server WAMP) i importovati demo bazu World sa sajta dev.mysql.com. Aplikacija treba da sadrži trad sa tsadrži stranice: Početna, O fakultetu, Misija i Vizija. Stranice treba i stranice:

osnovnu koja omogudava tabelarni pregled podataaka iz tabele City,

stranicu za unos novog grada u tabelu baze i

stranicu koja omogudava izmjenu sloga tabele city. Za kreiranje front-end dijela korititi RichFaces biblioteku. Tok vježbe:


Uključivanje potrebnih biblioteka (.jar fajlova) Da bi smo mogli da koristimo RichFaces biblioteku potrebno je uključiti određene .jar fajlove. Osim .jar fajlova koji se odnose na RichFaces tu su i neki drugi neophodni za izvršavanje aplikacije kao što je npr. mysql-connector-java koji omogudava povezivanj sa bazom podataka.



Sve ovo možemo uradit preko Project Properties (desni klik na projekat pa odabrati opciju Properties) -> Java Build Path -> Libraries a zatim dodati .jar fajlove koje smo prethodno iskopirali u WebContent\WEB-INF\lib folder.

Kreiranje .xhtml i .java fajlova Struktura potrebnih fajlova predstavljena je slededom slikom:



index.xhtml <html xmlns = "http://www.w3c.org/1999/xhtml" xmlns:f = "http://java.sun.com/jsf/core" xmlns:h = "http://java.sun.com/jsf/html" xmlns:rich = "http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </h:head> <h:body> <h2>Gradovi</h2> <h:form> <h:panelGrid columnClasses="acent"> <rich:dataScroller for="table" maxPages="10" /> <rich:dataTable id="table" value="#{citiesDB.cities}" var="grad" rows="10"> <rich:column sortOrder="ascending" > <f:facet name="header">ID</f:facet> <h:outputText value="#{grad.id}" /> </rich:column> <rich:column> <f:facet name="header">Grad</f:facet> <h:outputText value="#{grad.name}" /> </rich:column> <rich:column> <f:facet name="header">Kod drzave</f:facet> <h:outputText value="#{grad.countryCode}" /> </rich:column> <rich:column> <f:facet name="header">Oblast</f:facet> <h:outputText value="#{grad.district}" /> </rich:column> <rich:column> <f:facet name="header">Broj st.</f:facet> <h:outputText value="#{grad.population}" /> </rich:column> <rich:column> <f:facet name="header">Akcije</f:facet> <h:commandLink value="Izmijeni" action="#{citiesDB.selectCityById(grad.id)}" /><h:outputLabel> </h:outputLabel><br/> <h:commandLink value="Briši" action="#{citiesDB.deleteCity(grad.id)}" /> </rich:column> </rich:dataTable> </h:panelGrid> </h:form> <a href="novi.xhtml">Dodaj grad</a> </h:body> </html> izmjene.xhtml <html xmlns = "http://www.w3c.org/1999/xhtml" xmlns:f = "http://java.sun.com/jsf/core" xmlns:h = "http://java.sun.com/jsf/html" xmlns:rich = "http://richfaces.org/rich" xmlns:a4j = "http://richfaces.org/a4j"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </h:head>



<h:body> <h2>Izmjena podataka o gradu</h2> <a href="index.xhtml">Gradovi</a> <h:form> <rich:panel> <h:outputLabel>Grad: </h:outputLabel><br/> <h:inputText id="nazivGrada" value="#{citiesDB.currentCity.name}" required="true" requiredMessage=" * Polje je obavezno" /> <h:message for="nazivGrada" style="color: red;" /><br/> <h:outputLabel>Kod drzave: </h:outputLabel><br/> <h:inputText id="kodDrzave" value="#{citiesDB.currentCity.countryCode}" required="true" requiredMessage=" * Polje je obavezno" /> <h:message for="kodDrzave" style="color: red;" /><br/> <h:outputLabel>Oblast: </h:outputLabel><br/> <h:inputText id="oblast" value="#{citiesDB.currentCity.district}" /><br/> <h:outputLabel>Broj stanovnika: </h:outputLabel><br/> <h:inputText id="brojStanovnika" value="#{citiesDB.currentCity.population}" /><br/> <h:commandButton id="izmijeniGrad" value="Sačuvaj izmjene" action="#{citiesDB.updateCityById()}" /> </rich:panel> </h:form> </h:body> </html> novi.xhtml <html xmlns = "http://www.w3c.org/1999/xhtml" xmlns:f = "http://java.sun.com/jsf/core" xmlns:h = "http://java.sun.com/jsf/html" xmlns:rich = "http://richfaces.org/rich" xmlns:a4j = "http://richfaces.org/a4j"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </h:head> <h:body> <h2>Dodavanje novog grada</h2> <a href="index.xhtml">Gradovi</a> <h:form> <rich:panel> <h:outputLabel>Grad: </h:outputLabel><br/> <h:inputText id="nazivGrada" value="#{citiesDB.currentCity.name}" required="true" requiredMessage=" * Polje je obavezno" /> <h:message for="nazivGrada" style="color: red;" /><br/> <h:outputLabel>Kod drzave: </h:outputLabel><br/> <h:inputText id="kodDrzave" value="#{citiesDB.currentCity.countryCode}" required="true" requiredMessage=" * Polje je obavezno" /> <h:message for="kodDrzave" style="color: red;" /><br/> <h:outputLabel>Oblast: </h:outputLabel><br/>



<h:inputText id="oblast" value="#{citiesDB.currentCity.district}" /><br/> <h:outputLabel>Broj stanovnika: </h:outputLabel><br/> <h:inputText id="brojStanovnika" value="#{citiesDB.currentCity.population}" /><br/> <h:commandButton id="kreirajGrad" value="Dodaj" action="#{citiesDB.addCity()}" /> </rich:panel> </h:form> </h:body> </html>

City.java package dto; public class City { private int Id = 0; private String Name = null; private String CountryCode = null; private String District = null; private Integer Population = null; public int getId() { return Id; } public String getName() { return Name; } public String getCountryCode() { return CountryCode; } public String getDistrict() { return District; } public Integer getPopulation() { return Population; } public void setId(int Id) { this.Id = Id; } public void setName(String Name) { this.Name = Name; } public void setCountryCode(String CountryCode) { this.CountryCode = CountryCode; } public void setDistrict(String District) { this.District = District; } public void setPopulation(Integer Population) { this.Population = Population; } }

CitiesDB.java package dao;



import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import dto.City; @ManagedBean @SessionScoped public class CitiesDB { private City currentCity = new City(); private String driver = "com.mysql.jdbc.Driver"; private String url = "jdbc:mysql://127.0.0.1:3306/world?characterEncoding=utf8"; private String username = "root"; private String password = ""; private Connection connection = null; private PreparedStatement ps = null; private String SELECT_CITIES = "SELECT * FROM city ORDER BY ID ASC"; private String INSERT_CITIES = "INSERT INTO city (Name, CountryCode, District, Population) VALUES (?,?,?,?)"; private String DELETE_CITIES = "DELETE FROM city WHERE ID=?"; private String SELECT_CITY_BY_ID = "SELECT * FROM city WHERE ID = ?"; private String UPDATE_CITY_BY_ID = "UPDATE city SET Name = ?, CountryCode = ?, District = ?, Population = ? WHERE ID = ?"; public CitiesDB() throws ClassNotFoundException, SQLException { Class.forName(driver); connection = DriverManager.getConnection(url,username,password); } public City getCurrentCity() { return currentCity; } public void setCurrentCity(City currentCity) { this.currentCity = currentCity; } public ArrayList<City> getCities() throws SQLException { ArrayList<City> cities = new ArrayList<City>(); ps = connection.prepareStatement(SELECT_CITIES); ResultSet rs = ps.executeQuery(); while(rs.next()) { City temp = new City(); temp.setId(rs.getInt("ID")); temp.setName(rs.getString("Name")); temp.setCountryCode(rs.getString("CountryCode")); temp.setDistrict(rs.getString("District")); temp.setPopulation(rs.getInt("Population")); cities.add(temp); } return cities; } public String addCity() throws SQLException { ps = connection.prepareStatement(INSERT_CITIES);



ps.setString(1, currentCity.getName()); ps.setString(2, currentCity.getCountryCode()); ps.setString(3, currentCity.getDistrict()); ps.setInt(4, currentCity.getPopulation()); ps.execute(); currentCity = new City(); return "index.xhtml"; } public String deleteCity(Integer id) throws SQLException { System.out.println("Brisanje grada ID = " + id.toString()); ps = connection.prepareStatement(DELETE_CITIES); ps.setString(1, id.toString()); ps.execute(); return "index.xhtml"; } public String selectCityById(int id) throws SQLException { ps = connection.prepareStatement(SELECT_CITY_BY_ID); ps.setInt(1, id); ResultSet rs = ps.executeQuery(); currentCity = new City(); while (rs.next()) { currentCity.setId(rs.getInt("ID")); currentCity.setName(rs.getString("Name")); currentCity.setCountryCode(rs.getString("CountryCode")); currentCity.setDistrict(rs.getString("District")); currentCity.setPopulation(rs.getInt("Population")); } return "izmjene.xhtml"; } public String updateCityById() throws SQLException { ps = connection.prepareStatement(UPDATE_CITY_BY_ID); ps.setString(1, currentCity.getName()); ps.setString(2, currentCity.getCountryCode()); ps.setString(3, currentCity.getDistrict()); ps.setInt(4, currentCity.getPopulation()); ps.setInt(5, currentCity.getId()); ps.execute(); return "index.xhtml"; } }

Treba primijetiti da u .java fajlovima nije bilo nikakvih izmjena u odnosu na prethodni zadatak. Izmijenjeni su djelimično samo .xhtml fajlovi što govori da smo radili samo na prilagođavanju korisničkog interfejsa.

internet programiranje

Documents