Vizualno programiranje

Uvod

Pod tem naslovom naj bi spoznali naslednje pojme:
 Vendar se v nadaljevanju tega vrstnega reda ne bomo držali. Pod vizualnim programiranjem namreč lahko razumemo tudi kaj drugega. Zato pojdimo raje po vrsti:

Vizualno programiranje je programiranje, pri katerem na pomen vpliva več kot ena dimenzija. Primeri takih dodatnih dimenzij so večdimenzijski predmeti, uporaba prostorskih relacij ali uporaba časovne domenzije za prikaz pomena »prej-potem«.

Primeri vizualnih izrazov vključujejo diagrame, skice, ikone ali predstavitve akcij, ki jih izvajajo grafični objekti.

Pri tradicionalnem programiranju kljub navideznim dvem dimenzijam, ki jih predstavljajo okna naših urejevalnikov teksta,  v pomenskem smislu govorimo le o eni dimenziji.

Malo zgodovine

Prvi poskusi vizualnega programiranja so tekli v več smereh:

Veliko zgodnjih sistemov je izgledalo privlačno in intuitivno za primere majhnih programov, problemi pa so se porajali pri bolj realnih in obsežnih programih.  Zato so vizualno programirane omejili na le posamezne dele programiranja, na primer za načrtovanje grafičnih programskih vmesnikov (GUI), za elektronsko podporo programerskih diagramov in za vizualizacijo relacij med strukturami. Tako vizualno programiranje je še vedno integrirano s tekstualnim vnašanjem programskih enot. Med prvimi takimi komercialnimi sistemi zasledimo Microsoftov Visual Basic. Po drugi strani pa za bolj kompleksne programske aplikacije tudi orodja CASE ( Computer-Aided Software Engineering), ki z diagrami omogočajo vizualno specifikacijo relacij med programskimi modulu in celo avtomatsko generacijo kode.  

Jeziki za vizualno programiranje

Jezik za vizualno programiranje (VPL,  Visual programming language) je katerikoli programski jezik, ki omogoča uporabniku specifikacijo programa z grafičnimi elementi namesto s tekstom. Programer mora imeti na voljo vizualne izraze, prostorsko razporejanje teksta in grafičnih simbolov. Večina jezikov za vizualno p'rogramiranje temelji na »likih in puščicah«, ki te like (pravokotnike, kroge ipd) povezujejo.

Jezike za vizualno programiranje lahko naprej razdelimo glede na tip uporabljenih vizualnih izrazov. Poznamo:

Vizualna programerska okolja (VPE, Visual programming environment) nudijo grafične elemente ali ikone, ki jih lahko interaktivno uporabljamo v skladu s »prostorsko slovnico« za gradnjo programov.

Nekaj primerov vizualnih programskih jezikov:

Opomba: Microsoft Visual Studio in jeziki, ki jih vsebuje, v bistvu niso vizualni programski jeziki. Ti jeziki so v bistvu tekstovni in ne grafični. Sam MS Visual Studio je vizualno programersko okolje, ne pa vizualni programski jezik.

Gradniki, obrazci,  oblikovanje vmesnika

In kaj pomeni vizualno programiranje za razvijalca programskih aplikacij?  Predvsem to, da lahko s primernim orodjem »nariše« grafični uporabniški vmesnik, takoimenovani GUI (Graphical User Interface) aplikacije, ki je sicer zapisana v izbranem programskem jeziku ( na primer Javi). Taka orodja so pogosto združena v integrirana zazvojna okolja (IDE, Integrated Development Environment), ni pa to nujno. 

Kot dober primer orodja za vizualni programiranje si oglejmo »JframeBuilder«, ki generira javanske aplikacije.  Enake koncepte zasledimo tudi pri drugih orodjih: Tipičen izgled zaslonske slike je naslednji:

Kot velja za integrirana razvojna okolja, imamo tudi tu več delovnih polj. Pri okoljih za klasično programiranje je najbolj pomembno polje ali okno, v katerem imamo urejevalnik kode, Pri vizualnem programiranju pa je najbolj pomembno okno, v katerem »rišemo« grafični vmesnik. Ta je tipično sestavljen in okna, v katerem so (v skladu z bodočo aplikacijo) razporejeni grafični gradniki (gumbi, tekstovna polja, tabele, drsniki ipd).

Za naš primer vidimo načrtovanje grafičnega vmesnika na levi sliki.

In kakšne komponente lahko vnašamo v tako polje? Običajno jih imamo z ikonami nanizane v ustrezni orodni vrstici. V našem primeru ta vrstica izgleda tako:

S klikanjem izberemo ustrezen tip grafične komponente in jo nato z drugim klikom »ustvarimo v grafičnem oknu. Tu lahko komponente z miško prestavljamo, povečujemo in tako popravljamo izgled bodočega grafičnega vmesnika. Ker je za programerja pomembno, da se nauči konceptov takega programiranja in ne nekega določenega orodja, si oglejmo »Java Gui Builder«,  soroden primer prosto dostopnega orodja za vizualno programiranje:

Polje z možnimi grafičnimi komponentami vidimo tu na levi strani. V sredini pa je okno bodočega grafičnega vmesnika.

Kaj je skupnega obema predstavljenima orodjema in tudi drugim tovrstnim orodjem?, To, da imamo v primerni ordodni vrstrici ali stolpcu na voljo različne  grafične komponente (gumbe, drsnike, tekstovna polja  in tekstovne oznake, izbirne sezname in menuje, izbire itd. Izbiramo med temi gradniki in jih z miško nameščamo in premeščamo po delovnem polju, ki predstavja okno bodočega grafičnega vmesnika programske aplikacije. Temu vmesniku bi lahko rekli tudi obrazec.
Še nekaj je značilno za večino takih orodij: Komponente torej vstavljamo in nameščamo v okno. To okno je zato "vsebovalnik" ("container" teh komponent. Pogosto imamo možnost, da osnovni vsebovalnik poleg osnovnih gradnikov vstavljamo nove vsebovalnike. Ti  seveda tudi sami lahko vsebujejo osnovne gradnike in (zakaj ne) nove vsebovalnike. Smisel tega je večja urejenost in s tem preglednost grafičnega vmesnika.

Primer na levi sliki kaže vsebovalnik "container1", v njem pa rumeni in modri vsebovalnik, ki vsebujeta nekaj grafičnih gradnikov.


Lastnosti gradnikov

Posamezne grafične komponente, ki sestavljajo naš grafični uporabniški vmesnik, imajo svoje lastnosti. Predvsem je to relativni položaj komponente v vsebovalniku ter njena širina in višina. Vsaka komponenta ima tudi svoje ime, ki ga v začetku urejevalnik sam avtomatsko izbere (na primer jButton1, jButton2, jButton3..), nato pa ji lahko izberemo kaj bolj smiselnega (na primer gumbZapri, gumbOdpri ipd).

Zgornji primer razkriva, da imajo komponente še druge lastnosti. Določimo lahko barvo ozadja (background) in črnila (foreground) komponente, Pogosto lahko tudi font morebitnih napisov, pa še kaj. Tako lahko izberemo še, ali je komponenta vidna ali skrita, ali je aktivirana (enabled, ali deaktivirana (disabled) ipd. Te lastnosti izberemo s primernim urejevalnikom, ki mu običajno pravimo "lastnosti" (properties), včasih pa ga najdemo pod imenom "Object inspector". Vse komponente so namreč v bistvu objekti.

Povrnimo se spet k orodju »JframeBuilder« in si oglejmo to možnost:

Ko izberemo poljubno od narisanih grafičnih komponent, lahko tem nastavimo lastnosti, kot je njihova barva, velikost, položaj v oknu, ime ipd s posebnim urejevalnikom lastnosti (Properties). 

Kako je s programsko kodo?

Sam izgled grafičnega vmesnika res lahko narišemo, vendar to za bodoči program še ne zadošča. Kaj v resnici program dela, moramo še vedno sprogramirati. Vendar je programiranje tu vseeno drugačno in po svoje lažje.  Namesto, da bi morali razmišljati o zelo kompleksne in obsežni programski kodi, moramo sedaj razmišljati zgolj, kaj se zgodi, če pride do nekega dogodka oziroma akcije s posamezno grafično komponento.

Na primer, kaj naj se zgodi, če kliknemo na nek gumb, izberemo neko komponento ali če vtipkamo nek znak v tekstovno polje ipd. V bistvu kompleksen programerski problem zamenja množica bolj preprostih problemov. Govorimo o dogodkovno vodenem programiranju (event driven programming).

Ker so taki dogodki in njim ustrezna koda vezani na določen grafični gradnik, imamo ustrezen urejevalnik pogosto kar v istem urejevalniku, le bv zavihku z z imenom "events" (dogodki).

Na levi vidimo primer takega urejevalnika.

Ni nujno, da določimo kodo za vse možne dogodke. Izberemo le tiste, ki jih nameravamo uporabljati.

Po izbiri ustrezne akcije  tak urejevalnik tipično tvori osnovni skelet programske kode, v katerega s klasičnim urejevalnikom sprogramiramo, kar pač ob danem dogodku pričakujemo.


In kaj dobimo s takim vizualnim programiranjem. Na koncu dobimo programsko kodo, ki  bi jo lahko dobili tudi s klasičnim programerskim pristopom. Le delo smo si močno olajšali.

Česa še nismo povedali?

Nekaj naj bi povedali še o projektih,  metodah, obravnavi izjem ter o gradnikih za baze podatkov. Vendar vse to ni specifično za vizualno programiranje. Zato le nekaj pojasnil:

Ideja projektov  je znana tudi pri  nevizualnem programiranju in jo zasledimo pri vsakem dobrem integriranem razvojnem okolju (IDE, Integrated Development Environment).  Malo bolj kompleksni programi so namreč sestavljeni iz večjega števila datotek in smiselno je, da vse te datoteke obravnavamo kot skupino. Ne nazadnje tudi zato, da vemo, kaj  vse potrebujemo za naš "izdelek".  Če želimo kasneje "izdelek" (v našem primeru program) popravljati ali izpopolnjevati, shranjeni projekt spet odpremo, popravimo, kar je pač treba in tvorimo (build) nov izdelek.

Da sama zamisel projekta ni tesno povezana z vizualnim programiranjem, pokažeta tudi obe prej omenjeni orodji (JframeBuilder, Java GUI Builder), ki projektov ne poznata.

Tudi metode in izjeme nimajo zveze z vizualnim programiranjem. Oboje srečamo pri sodobnih pristopih objektno usmerjenega programiranja, kar pa je druga zgodba.

Isto velja za delo s podatkovnimi bazami.