BAZA ZNANJA

Kurs: Programiranje u realnom vremenu - Web programiranje

Modul: Kontrole za navigaciju

Autor: dr. Goran Aritonović

Naziv jedinice: Kreiranje menija i TreeView-a

Kreiranje menija  i TreeView-a  

Kreiraćemo novi web sajt pod nazivom Navigacija. Kreiraćemo stranu pod nazivom GlavnaStrana.aspx. Pored ove strane kreiraćemo strane : Strana2.aspx, Strana3.aspx, Strana31.aspx, Strana311.aspx, i Strana312.aspx. Na ovim stranama ispisaćemo tekst u cilju identifikacije strane. Npr. Na strani dva ispisaćemo tekst Ovo je strana 2 itd. Organizovaćemo najpre stranu u vidu tabele da bi se olakšalo manipulisanje delovima web strane. Sa Navigation sekcije toolbox-a dodaćemo kontrolu Menu. ID kreiranog menija je Menu1. Podrazumevana vrednost svojstva Orientation je Vertikal. Promenićemo je u Horizontal da bi meni bio raspoređen po horizontali web sajta slično kao u desktop aplikacijama. U prozoru Menu Tasks... odabraćemo opciju Edit Menu Items... , pri čemu se otvara Menu Item Editor koji se koristi za kreiranje stavki i podtavki menija.

Kliknimo na dugme Add Root Item (zeleni krstić) da bismo dodali prvu stavku osnovne linije menija. Text svojstvo prve stavke menija postavićemo na vrednost  "Firma". Dok je novo kreirana stavka menija selektovana kliknimo na dugme Add a child Item. Dodaćemo podstavku ove stavke menija pod nazivom Borland. NavigateUrl svojstvo ove podstavke postavićemo na vrednost http://www.borland.com. Na sličan način dodaćemo podstavku Sun sa vrednošću NavigateUrl  http://www.sun.com  i podstavku Microsoft sa vrednošću NavigateUrl  http://www.microsoft.com/.

Sda ćemo kreirati drugu stavku menija pod nazivom " Idi na "   . Ova stavka menija ima podstavke Strana2 i Strana3. Kada kreiramo podstavke menija koje referenciraju strane unutar istog web sajta svojstvo NavigateUrl se može definisati klikom na dugme "sa tri tačke" pored ovog svojstva a zatim selektovanjem željene strane web sajta. Podstavka Strana2 referenciraće stranu Strana2.aspx a podstavka Strana3 referenciraće stranu Strana3.aspx.

Treća stavka menija imaće naziv Strana3 imaće podstavku Strana31. Stavka Strana31 imaće podstavke Strana311 i Strana312. Sve ove stavke menija referenciraće odgovarajuće apsx strane web sajta sa istim imenom.

Na ovaj način je ostvarena osnovna funkcionalnost kontrole Menu a to je navigacija.

Sada ćemo definisati izgled menija primenom stilova. Podesićemo najpre statički meni, tj. Meni koji je uvek vidljiv na web strani. U property prozoru menu kontrole kliknite na znak + pored StaticMenuStyle i postavite sledeće atribute:

StaticMenuItemStyle:

StaticSelectedItemStyle:

StaticHoverStyle:

DynamicmenuItemStyle :

DinamicHoverStyle:

Na ovaj način je kreiran meni za web aplikaciju bez pisanja koda. Boje menija odabrane su da bi se razlikovali stilovi menija. Sada možete da boje prilagodite svojim potrebama.

Kontrola TreeView je slična Menu kontroli stim da su podaci organizovani u vidu stabla. Kreira se prevlačenjem kontrole TreeView sa Navigation sekcije Toolboxa. Iz prozora TreeView Tasks... odaberimo opciju EditNodes. Kliknimo na dugme Add a root Node. Svaki čvor može da sadrži podčvorove koji se kreiraju opcijom Add a child Node. Svakom čvoru se može dodeliti NavigationUrl svojstvo u cilju obezbeđivanja navigacije.

Ukoliko želimo da čvorove povežemo linijama ShowLines svojstvo TreeView kontrole postavićemo na vrednsot true. U sekciji ParentNodeStyle  posredstvom svojstva ImageUrl postavićemo sliku koja će predstavljati sve čvorove u stablu koji sadrže podčvorove. Neka je to slika folder.gif.

U sekciji LeafNodeStyle primenom svojstva ImageUrl označićemo sve čvorove koji nemaju podčvorove (tj. Čvorove lista). Neka je čvorovima lista dodeljena slika ikona.jpg.

Usekciji HoverNodeStyle postavićemo BackColor na vrednost #FFC0FF. Čime će tekst svakog čvor biti obojen definisanom bojom kada se iznad njega nađe pokazivač miša.

Izborom opcije File>Close Project zatvorićemo web sajt.