2. dio – [Sučelje FB-a]

.::Adobe Flash Builder::. – 2. dio [Sučelje Flash Buildera]

Pokrenuli ste Flash Builder (FB) i ne znate što dalje? Pa nikakvo čudo, svi smo mi nekada bili početnici u nečemu. Ovdje ću pokušati objasniti sučelje FB-a,odnosno one elemente sučelja koje se najčešće koriste. FB je vrlo,vrlo prilagodljiv program što se tiče sučelja,pa i ostalog. Prilikom pokretanja dočekati će vas sljedeći prizor:

fb1

Slika 1: Osnovni izgled FB-a

Idemo po redu:

1. Traka sa izbornicima
2. Alatna traka
3. Traka za izmjenu perspektive (o tome malo kasnije u nekom sljedećem nastavku)
4. Preglednik projekata (ovdje će se nalaziti svi vaši budući projekti)
5. Outline – sada se ne vidi ništa,ali ovdje idu komponente kao; gumbi,labeli, grupe….
6. Ovo je glavni dio FB-a te ćete tu provesti najviše vremena (prazno je zbog toga što još nemamo niti jedan projekt učitan.
7. Ovdje nam je najzanimljiviji dio “Problems” jer će ovdje biti izlistane sve greške koje je program uspio detektirati.

NAPOMENA:
Na glavnom dijelu (broj 6) prikazati će vam se “Welcome screen”,ali ga kod mene nema jer sam ga isključio.

Svi prozori (Outline,Project Explorer itd…) mogu se premjestiti na željenu poziciju na ekranu,možete im promijeniti veličinu ili samo određeni prozor prikazati samostalno preko (gotovo) cijelog ekrana. Možete ih rasporediti po volji kako vam odgovara i spremiti taj raspored koji želite. To će biti nova perspektiva i vidljiva u traci za perspektive (broj 3).

Ukoliko se malo zaigrali i napravili takav nered na ekranu da se ne možete više snaći, možete resetirati raspored prozora na zadane vrijednosti,dakle onako kako je bilo na početku. To ćete napraviti ovako:
U izborniku “Window” odaberite “Reset Perspective…”. Nakon toga će vas tražiti potvrdu za ovu akciju,vi kliknite YES i to je to. (Vidi sliku 2)

Eto tako izgleda FB dok u njemu nema pokrenutih projekata. Ukoliko FB zatvorite, a u njemu imate neki otvoreni projekt, FB će spremiti sve promijene i zapamtiti koje ste projekte imali otvorene i prilikom sljedećeg pokretanja će ih automatski otvoriti za vas.

resetperspective

Slika 2: Reset Perspective…

Na slikama 3 i 4 možete vidjeti kako izgleda FB kada u njega učitamo neki projekt. FB posjeduje dva načina prikaza projekata. Postoje dizajnerski mod i “Source” mod sa prikazom koda aplikacije. Dizajnerski mod nam omogućava da lakše razmjestimo komponente po ekranu programa,ali nemamo mogućnost (odnosno jako je ograničena) upisivanja koda. Za to koristimo “Source” mod i u njemu upisujemo kod.
Dakle, slika 3 prikazuje ono što korisnik aplikacije nikada neće vidjeti,kod programa, dok slika 4 prikazuje sučelje-vizualni dio aplikacije.

sourcemode

Slika 3: “Source” mod

designmode

Slika 4: “Design” mod

Prebacivanjem u Design mod dogodile su se neke očigledne promijene. Dolje lijevo pokraj “Outline” sada imate “Components”. Na desnoj strani pojavio se čitam stupac novih mogućnosti;”States”, “Properties”…itd.

Sada neću opisivati pojedine funkcije nekog elementa sučelja,jer to nije tema ovog tutorijala, već nekog sljedećeg,ali želim reći da slobodno istražujte što se gdje skriva, premještajte do mile volje,a ako nešto zapne, vidi sliku 2.

Od sučelja još su samo opisati jednu traku,a ostale ću opisivati u sljedećim tutorijalima usporedno sa sadržajem koji će se tamo nalaziti. Jer neke funkcije je glupo opisivati ovako “na prazno”, ali dobiju smisao tijekom izrade projekta.

Kao što možete vidjeti na slici 4, ova traka se nalazi na vrhu glavnog prozora i biti će vam jedna od najčešće upotrebljavanih alatnih traka.

Slika 5 prikazuje njezin izgled,a ja ću je opisati gledano sa lijeve strane na desnu.

toolbar1

Slika 5: Alatna traka glavnog prozora

1. “Source” – prebacuje trenutni pogled u “Source mod”
2. “Design” – prebacuje iz “Source moda” u dizajnerski mod
3. Refresh – naravno osvježavanje
4. “Device” – odabir uređaja, želite li simulaciju većeg ili manjeg ekrana to možete odabrati ovdje
5. Olovka – u biti služi za prilagodbu uređaja iz rubrike “Device”
6. Odaberite Landscape ili Portrait način prikaza
7. “State”- usko povezan sa brojem 6 i prozorom “States” gore desno. Detaljnije objašnjenje tijekom izrade projekta
8. “Strelica” – služi za odabir elementa na ekranu
9. “Ruka” – povezana sa brojem 10. Ukoliko vam je zoom veći od 100% poslužiti će vam za pomicanje po ekranu
10. Zoom – odabir postotka za približavanje ili udaljavanje prikaza uređaja

U sljedećem nastavku krećemo sa izradom klasične ultrajednostavne”Hello World” aplikacije za vaš Android uređaj.

Do sljedeće lekcije, srdačan pozdrav!!!

logo

U privitku isti ovaj tutorijal u PDF formatu,ako vam je tako draže.

.::Adobe Flash Builder::. – 2 dio [Sučelje Flash Buildera] PDF