1

Projektovanje sistema elektronskog poslovanja - Vežbe Java i NetBeans IDE 6.5

Kreiranje korisni čkog interfejsa web aplikacije Primer jednostavne aplikacije:

1. Odabrati opciju File > New Project 2. Meñu kategorijama odabrati Java Web i podkategoriju Web Application

3. Dati naziv projektu, i podesiti opcije kao na slici:

4. U narednom koraku odabrati server i verziju Jave:

2

5. U Frameworks panelu odabrati sledeće opcije:

6. NetBeans kreira početnu stranicu i daje joj naziv page1.jsp:

3

Sa Visual Web JSF aplikacijama, koristi se JavaServer Pages (JSP) tehnologija umesto HTML stranica

1. U prozoru Projects kliknuti desnim na Web Pages i odabrati New > Visual Web JSF Page, kao na slici:

7. Prihvatiti default naziv Page2 i kliknuti Finish. Otvara se Page2 stranica.

4

Stranica se dizajnira uz pomoć komponenti sa palete:

Table 1: Input Components

Komponenta Opis Sekcija Palete

Text Field Polje za unos sa jednom linijom teksta. (Woodstock) Basic

Text Area Polje za unos sa više linija teksta. (Woodstock) Basic

Drop Down List

Padajući meni tzv. combo box. (Woodstock) Basic

Listbox Lista iz koje korisnik može da odabere jedan ili više elemenata

(Woodstock) Basic

Checkbox Polje za čekiranje (Woodstock) Basic

Radio Button Jedno radio dugme koje korisnik može selektovati (Woodstock) Basic

Password Field

Polje za unos gde su karakteri koji se unose sakriveni (Woodstock) Basic

File Upload Komponenta sa poljem za unos i Browse dugmetom koji prikazuje formu za izbor fajla za upload

(Woodstock) Basic

Add Remove Dve liste (jedna koja nudi dostupne opcije a druga koja sadrži odabrane opcije) sa dugmadima za premeštanje elemenata iz jedne liste u drugu

(Woodstock) Composite

Calendar Polje za unos i kalendar za odabir datuma (Woodstock) Basic

Table 2: Display Components

Component Opis Palette Section

Label Tekstualno polje koje se može vezati za polje za unos i za koju se mogu definisati font stilovi

(Woodstock) Basic

Static Text Polje za prikazivanje teksta. (Woodstock) Basic

Image Slika (Woodstock) Basic

5

Message Polje sa tekstom koji je povezan sa posebnom komponentom za prikaz različitih grešaka

(Woodstock) Basic

Message Group

Polje sa tekstom za prikaz grešaka pri izvršavanju, programski generisanih grešaka idr.

(Woodstock) Basic

Page Alert Slično kao komponenta ispod samo prikazuje informacije na posebnoj stranici

(Woodstock) Layout

Alert Prikazuje ikonu i informativni tekst kao što su upozorenja, greške ili uspešan završetak neke akcije

(Woodstock) Composite

Hidden Field Nevidljivo polje koje se koristi za čuvanje podataka ili prosleñivanje informacija serveru

(Woodstock) Basic

Page Separator

Horizontalna linija koja se širi na do proizvoljne širine stranice koju selektuje korisnik

(Woodstock) Layout

Form Za dodavanje forme (Woodstock) Layout

Inline Help Nudi kratku pomoć koja se pojavljuje na stranici (Woodstock) Composite

Bubble Help Dizajnirano da se poljavljuje kada se miš nadnese. (Woodstock) Composite

Accordion Koristi se za vertikalne tabove (Woodstock) Composite

Table 3: Grouping Components

Component Description Palette Section

Checkbox Group Čekbox kompnenta (Woodstock) Basic

Radio Button Group Dva ili više radio dugmeta od kojih je u svakom trenutku najviše jedan selektovan

(Woodstock) Basic

Table, Table Row Group, and Table Column

Prikazuje podatke iz niza ili tabele baye podataka

(Woodstock) Basic

Grid Panel Organizuje komponente u odgovarajućoj mreži kolona i vrsti

(Woodstock) Layout

Group Panel Grupiše komponente u plutajućem modu (Woodstock) Layout

Layout Panel Grupiše skup komponenti u plutajućem ili mrežnom

(Woodstock) Layout

6

Tab Set and Tab Navigacioni alat ili se koristi kao prikaz različitih oblika iste stranice

(Woodstock) Layout

Page Fragment Box Grupiše komponente koje želimo prikazati na više stranica

(Woodstock) Layout

Property Sheet, Property Sheet Section, and Property

Postavlja kolonu označenih komponenti i deli ih u sekcije.

(Woodstock) Layout

Breadcrumbs Postavlja niz linkovnih komponenti razdvojenih simbolom: >.

(Woodstock) Composite

Table 4: Action Components

Component Description Palette Section

Button Dugme koje sabmituje odgovarajuću formu (Woodstock) Basic

Hyperlink Tektualno polje koje sabmituje URL ili formu (Woodstock) Basic

Image Hyperlink

Slika koja sabmituje URL ili formu. (Woodstock) Basic

Tab Podkomponenta skupa tabova. (Woodstock) Layout

Common Task Link ka Visual web JSF stranici gde korisnik može obaviti neku akciju

(Woodstock) Composite

8. Na novoj stranici postaviti naredne elemente da bi izgledalo kao na slici :

7

a. Ubaciti Button komponentu na stranicu uneti naziv dugmeta (npr Submit!) U Properties prozoru je takoñe moguće promeniti opciju text u željeni naziv. U Properties prozoru čekirati opciju primary.

b. Postaviti Text Field komponentu na stranicu. Zatim postaviti Label komponentu i dodeliti joj naziv Ime: Ctrl-Shift-klik uraditi na komponentu Label i odvući do Text Field komponente, isto i za još dva polja za unos i tekst Prezime i Godine

c. Postaviti Message komponentu odmah pored treće Text Field komponente. Control-Shift-klik uraditi na Message komponentu i odvući do Text Field komponente

d. Postaviti Drop Down List komponentu i promeniti opciju label na Boja:. Desnim klikom na Drop Down List komponenu odabrati opciju Configure Default Options.

e. U Display koloni uneti tri vrednosti za boje: plava, bela, zelena. f. Slično postaviti i podesit Radio Button Group komponentu . Takoñe čekirati

Select Items, i odabrati jedno od polja kao default. U Properties prozoru promeniti opciju columns na 3 da bi opcije bile poreñane vodoravno a ne uspravno.

g. Desnim klikom na praznom mesto na stranici odabrati Preview in Browser.

Sa F6 ili odabirom Run > Run Main Project iz glavnom menija se pokreće web aplikacija.

NetBeans obavlje naredne akcije:

• Čuva sve potrebne fajlove • kompajlira sve fajlove koje je potrebno • pokreće application server ako nije već pokrenut • pokreće aplikaciju preko application server-a. • pokreće web browser koji prikazuje odgovarajuću početnu stranicu:

8

Povezivanje više stranica

1. Desnim klikom na praznu povrinu stranice odabrati opciju Page Navigation 2. povezati odgovarajuću dugmad ili hyperlinkove sa stranicama kojima vode

Provera unosa korisnika

NetBeans nudi validator i converter objekte koji služe za proveravanje ispravnosti unosa u različitim komponentama. Ovi se objekti mogu naći na paleti.

Validator se povezuje sa komponentom za unos kao što je Text Field komponenta tako što se prevuče Validator komponenta na tu komponentu

1. Kliknuti desnim na treću Text Field komponentu i odabrati opciju Add Binding Attribute. 2. U paleti iz Validators sekcije odvući Double Range Validator i pustiti ga na Text Field

komponentu. U Navigator prozoru selektovati upravo kreiranu komponenu verovatno nazvanu RangeValidator1. U Properties prozoru postaviti maksimalnu vrednost na 30 a minimalnu na 20. Ovima će se proveravati da li je uneta vrednost u ovom intervalu

3. Iz Palette, iz Converters sekcije odvući Integer Converter i pustiti ga na Text Field komponentu. Time se proverava da li uneta vrednost Integer tipa

4. Dodati Message komponentu na stranicu. Pritisnuti Ctrl-Shift i odvući od komponente do Text Field komponente.

5. Aplikacija će odbijati neodgovarajuće vrednosti i javljati odgovarajuće greške

9

Upotreba fragmenata

Fragment stranice predstavlja deo stranice, kao što je header, footer ili deo za navigaciju koji se može ponovno koristiti na drugim stranicama. Fragmenti mogu sadržati logo komanije, grafičke elemente, menije za navigaciju...

1. Kreirati nov Java Web projekat i nazvati ga FragmentExample. Uključiti Visual Web JavaServer Faces šablon.

Sledeća slika predstavlja stranicu koju ćemo kreirati u narednim koracima:

2. Iz Layout sekcije Components Palette, odvući Page Fragment Box komponentu u gornji levi ugao stranice

Otvara se Select Page Fragment dijalog.

10

Kliknuti na Create New Page Fragment. Uneti CompanyLogo u polje za naziv i kliknuti na OK Fragment se pojavljuje na stranici

3. Kliknuti na Close da bi zatvorili Select Page Fragment dijalog.

Isprekidana linija prikazuje veličinu fragmenta. Default veličina je 400x200 piksela

Postaviti drugi fragment na levoj strani stranice ispod prethodnog fragmenta Ovaj fragment nazvati: Navigation.

4. Iz Basic sekcije palete dovući Static Text komponentu na stranicu i postaviti je desno od drugog fragmenta. Ispisati tekst: dobrodošli u Sky kompaniju

5. Kliknuti na stranicu gde ne postoji ni jedna komponenta i u prozoru Properties izmeniti Title u Sky Company Home.

Kreiranje sadržaja logo fragmenta

Naredni koraci su definisanje sadržaja CompanyLogo fragmenta, kao što je prikazano na slici:

11

1. Dvostrukim klikom na fragment CompanyLogo otvoriti komponentu u vizuelnom dizajneru.

Bela pozadina prikazuje veličinu fragmenta.

2. U prozoru Properties promeniti širinu (Width)na 720px a visinu (Height) na 120px. 3. Iz Basic sekcije palete dovući Image komponentu u gornji levi ugao fragmenta 4. U prozoru Properties kliknuti na elipsoidno dugme pored Image's url. U dijalogu odabrati

proizvoljnu sliku sa računara da pi postavili kao logo kompanije. 5. Ako je potrebno postaviti sliku na željeno mesto. 6. Preći na tab stranice koja sadrži fragment da bi videli načinjene izmene

Kreiranje sadržaja navigacionog fragmenta

Naredni koraci su definisanje sadržaja Navigation fragmenta, kao što je prikazano na slici:

Dvostrukim klikom na fragment Navigation otvoriti komponentu u vizuelnom dizajneru.

1. U prozoru Properties promeniti širinu (Width)na 150px a visinu (Height) na 100px.

2. Iz Basic sekcije palete dovući Hyperlink (ili Button) komponentu u gornji levi ugao fragmenta . Dati mu naziv Početna

3. U prozoru Properties postaviti Id na homeLink a url na: /faces/Page1.jsp.

4. Kliknuti desnim na hyperlink i odabrati opciju Add Binding Attribute.

5. Postaviti i drugi hyperlink i nazvati ga: Novosti. 6. U prozoru Properties postaviti Id na newsLink a url na:

/faces/News.jsp

Stranicu sa novostima ćemo kreirati u narednim koracima

7. Kliknuti desnim na hyperlink i odabrati opciju Add Binding Attribute.

12

Dodavanje fragmenata na drugu stranicu

1. u prozoru Projects kliknuti desnim na FragmentExample > Web Pages i odabrati opciju: New > Visual Web JSF Page. Novu stranicu nazvati News i kliknuti na Finish.

News stranica se otvara.

1. Iz Page1 taba kopirati komponente: Page Fragment i Static Text u stranicu News (višestruke komponente selektovati sa ctrl dugmetom)

2. U prozoru Navigator otvoriti: News > page1 > html1 > body1. Desnim kliknuti na form1 i odabrati paste.

3. Promeniti tekst komponente Static Text u Novosti iz kompanije. 4. Kliknuti na stranicu gde ne postoji ni jedna komponenta i u prozoru Properties izmeniti

Title u Sky Company News. 5. Promeniti boju pozadine u Background odeljku

13

Projektovanje sistema elektronskog poslovanja - Vežbe II

Java i NetBeans IDE 6.5

Konekcija na bazu podataka i povezivanje tabela i komponenti

Stranica se povezuje sa tabelom iz baze podataka tako što se tabela iz Data sources odeljka odvuče i pusti na stranicu ili na neku komponentu kao što je tabela ili polje za unos. Tako se obezbeñuje Data provider za stranicu.

Moguće je i desnim klikom na neku od komponenti i odabirom opcije Bind to Data, povezati komponentu sa odreñenim podacima iz tabele.

U dijalogu Bind to Data kliknuti na Bind to Data Provider tab. Padajući meni The Choose a Data Provider prikazuje sve moguće baze iz kojih je moguće preuzeti podatke. Nakon izbora baze (Data provider-a) potrebno je odabrati i odgovarajuću kolonu koja se vezuje za komponenu. Za neke komponente, kao što je padajući meni, potrebno je odabrati i Value i Display polje

14

Projektovanje sistema elektronskog poslovanja - Vežbe Microsoft Office Publisher

Izgled programa Microsoft Office Publisher:

Za kreiranje novog sajta odabrati opciju:

15

Odabrati opcije koje želimo naš sajt da poseduje:

Uneti osnovne podatke o preduzeću:

16

Odabrati raspored glavnog menija i rasporeda komponenti:

Odabrati raspored sadržaja:

Moguće je promeniti dizajn stranice:

17

Moguće je promeniti vizički dizajn samih stanica kao i upotrebljene boje:

Sajt se pokreće uz pomoć opcije Publish to web