Flash aplikacije. Primjer: Izrada osnovne aplikacije. Problemi prilikom izrade aplikacija
03.12.2009
Članak je posvećen brzom razvoju aplikacija za Flash, koristeći vodeći proizvod Adobe Flex Builder 3. Treba napomenuti da je tradicionalno okruženje za Flash Adobe Flash, ali je uglavnom namijenjeno crtanju i stvaranju animacija. Programiranje je puno lakše uz Flex Builder.
Ovaj će članak pokazati kako stvoriti prilično jednostavnu i istodobno tipičnu aplikaciju - katalog proizvoda s mogućnošću izračunavanja troškova narudžbe i uzimajući u obzir dodatne opcije. Ovaj program je namijenjen restoranima: korisnik će imati pristup katalogu jela podijeljenih po kategorijama, kao i opciju "dostava" i indikaciju broja naručenih porcija.
Mora se priznati da bi instaliranje čak i jednostavnog sustava podrške online trgovini na web mjestu riješilo i ovaj i druge probleme (osobito stvaranje košarice za narudžbe ili njezino slanje e-poštom). Međutim, ne treba zaboraviti da će ovo biti samo demonstracija sljedećih mogućnosti:
Ponovno izračunajte trošak u hodu, bez ponovnog učitavanja stranice. Da ste koristili HTML, morali biste pribjeći JavaScriptu, što nije uvijek jednostavno. Osim toga, bilo bi potrebno trajno pohraniti odabrane opcije korisnika.
Korištenje animacijskih efekata prilikom učitavanja fotografija.
Implementacija kataloga proizvoda pomoću 40 linija programskog koda.
Naravno, za daljnji rad na aplikaciji potrebno je imati ideju o tome što je XML (ovo je jezik za strukturno predstavljanje podataka, za više detalja pogledajte http://ru.wikipedia.org/ wiki/XML), te imati barem malo iskustva u razvoju desktop aplikacija (u Delphi ili Visual Studio okruženju).
Dakle, počnimo. Za rad trebat će vam instaliran Adobe Flex Builder 3.
Odmah nakon pokretanja vidjet ćete prozor dobrodošlice koji nudi poveznice na lekcije o izradi aplikacija. To se može učiniti kasnije - korisno je za učenje početnika. Da biste započeli implementaciju softverskog projekta, prvo morate pozvati naredbu izbornika File New Flex Project. U prozor koji se pojavi za kreiranje novog projekta unesite naziv projekta i mjesto gdje će se nalaziti. Među dodatnim opcijama odaberite Web aplikacija i Aplikacijski poslužitelj: Ništa (budući da za sada ne planirate koristiti složenu interakciju s poslužiteljem), a zatim kliknite gumb Završi.
Cijeli radni prostor Flex Buildera podijeljen je u četiri dijela koji sadrže:
Prozor navigatora projekta (Flex Navigator), koji odražava strukturu datoteke;
Okvirni prozor koji odražava strukturu programa ili dostupne komponente (prilikom prelaska u način rada za dizajn);
Glavni prozor programa s dvije kartice - Izvor (uređivač koda) i Dizajn (način vizualnog dizajna);
Prozor Problemi, gdje se prikazuju poruke prevoditelja, informacije o ispravljanju pogrešaka i druge servisne poruke.
Ako promijenite dizajn aplikacije, vidjet ćete da se promijenio i njen kod. To je točno jer, u biti, radite s MXML kodom. Jezik MXML dizajniran je za opisivanje sučelja aplikacije (određen broj komponenti, moguće ugniježđenih jedna u drugu) u XML formatu. Sličnu tehnologiju nazvanu XAML koristi Microsoft pri razvoju Silverlight aplikacija.
Sada malo o specifičnostima aplikacije koja se stvara:
Jela u kreiranom katalogu podijeljena su u kategorije (predjela, glavna jela, desert, pića);
Uz svako jelo nalazi se fotografija, naziv, opis i cijena;
Moguće je naručiti više porcija i dostavu.
Trebat će vam slike kao i informacije o jelima na strukturiran način.
Za slike, trebali biste stvoriti img podmapu u src mapi projekta (njegova glavna mapa) i tamo staviti potrebne objekte. Svako jelo ima identifikator (na primjer, 53), a velika fotografija jela imenuje se pomoću predloška 53big.jpg, a mala - 53mini.jpg.
Podaci se moraju smjestiti u datoteku config.xml i smjestiti u mapu src. Takva je datoteka prikazana u ispisu 1.
XML datoteka sadrži grupe jela. Svaki od njih može sadržavati nekoliko jela (item), koji označavaju identifikator slike (img), naslov (ime), cijenu u rubljima (cijena) i višeredni opis (desc). Na kraju konfiguracijske datoteke, zasebni element prikazuje trošak isporuke u rubljima (dostavka).
Sada idite izravno na sučelje aplikacije i prvo odredite veličinu njenog prozora: 800x500 piksela. Bilo bi moguće napraviti “stretching” aplikaciju koja ispunjava cijeli zaslon, ali za sada je bolje ograničiti se na onu koja ima fiksnu širinu i visinu.
Zatim postavite na pozornicu dva statična teksta (komponenta Label), padajući popis kategorija (komponenta ComboBox), galeriju odabira jela (komponenta HorizontalList), tri promjenjiva tekstualna elementa - naziv, cijenu i konačni trošak (također komponente Label) , komponenta za promjenu broja porcija (NumericStepper), zastavica za odabir dostave (CheckBox). Osim toga, dodijelite identifikator svakoj komponenti (ID na ploči svojstava komponente).
A sada će početi stvarno programiranje ponašanja Flash aplikacije. Da biste to učinili, morat ćete razumjeti dva koncepta: izvor podataka (Data provider) i povezivanje podataka (Data binding).
Izvori podataka
Uzmimo za primjer padajući popis na kojem možete odabrati vrstu jela (“Grickalice”, “Pića” itd.). Izvor podataka za njega je XML datoteka opisana na samom početku.
Programsko okruženje Flex nudi automatske alate za rad s izvorima povezivanja podataka. Prvo, većina komponenti koje rade s popisima, tablicama i stablima imaju svojstvo dataProvider koje se može odnositi na potrebne podatke. Drugo, postoje posebne konstrukcije koje vam omogućuju da se referirate na popise unutar XML dokumenta, na primjer, popis grupa jela opisanih skupom oznaka unutar dokumenta.
Da biste implementirali ovaj koncept, učinite sljedeće (pogledajte Ispis 2).
Postavite izvor podataka. U tom slučaju učitajte podatke iz datoteke config.xml i dajte joj configXML ID.
Navedite izvor podataka za padajući popis - dataProvider=?© (configXML.group)?©.
Navedite koje XML svojstvo treba koristiti za postavljanje tekstova unutar padajućeg popisa. Recimo da biste željeli (s obzirom na XML datoteku koju ste stvorili) da elementi popisa budu atributi imena odgovarajuće oznake grupe (tj. nazivi - "Grickalice", "Deserti" itd.). Da biste to učinili, postavite svojstvo labelField=?©@name?© (simbol @ znači da imate posla s atributom, a ne podoznakom), a zatim će vaše grupe postati elementi odgovarajuće liste.
Povezivanje podataka
Pretpostavimo da ste promijenili kategoriju odabranih jela na padajućem popisu. Očito bi se tada trebao promijeniti i njihov odabir. Za tu svrhu postoji posebna direktiva, označena vitičastim zagradama (()). To implicira sljedeće: "Ako se izvor podataka promijenio, tada se mora promijeniti i prikaz podataka u trenutnoj komponenti."
Kako to provesti u praksi? Imate komponentu HorizontalList koja prikazuje skup fotografija jela u trenutnoj kategoriji (grickalice ili pića) i komponentu ComboBox gdje možete odabrati kategoriju na temelju XML podataka. A ono što je sjajno jest da ComboBox (i većina komponenti popisa u Flexu) imaju svojstvo selectedItem. Njegova se vrijednost mijenja ovisno o tome koju stavku popisa korisnik odabere i sadrži li dio izvora podataka koji odgovara odabiru. U ovom slučaju, kada je izvor podataka XML, ovo će svojstvo uključivati XML podstablo odabrane grupe jela.
Pogledajmo kako se takav koncept provodi u praksi i u nastavku nabrojimo što je za to potrebno instalirati:
Padajući ID: id=?©cmbGroup?©;
Izvor podataka za popis jela dataProvider=?©(cmbGroup.selectedItem.item)?©.
Usput, slično ponašanje treba primijeniti pri odabiru zasebnog jela - promijeniti njegovu sliku, naziv, cijenu i opis. Da biste to učinili, instalirajte sljedeće:
Identifikator popisa odabira hrane: id=?©lstProduct?©;
Izvor podataka za adresu vaših slika: source=?©img/(lstProduct.selectedItem.img).big.jpg?© (Flex također podržava takve složene strukture za povezivanje podataka); izvori podataka za sve elemente teksta, na primjer za cijenu (text=?©Price: (lstProduct.selectedItem.price) rub.?©).
Nakon dovršetka ovih koraka, dobit ćete potpuno funkcionalan katalog proizvoda, koji mijenja popis proizvoda kada odaberete drugu kategoriju, te opis kada promijenite proizvod. Imajte na umu da niste napisali niti jedan red koda! Sama ova činjenica pokazuje da je programiranje za Flash pomoću Flex alata iznimno zabavno.
Za izračun iznosa narudžbe potreban vam je samo programski kod. Kod je napisan unutar posebnih oznaka (vidi Ispis 2). Morate definirati proceduru onChange() i ona će biti pozvana svaki put kada korisnik učini jednu od tri radnje:
Izabrat će drugi proizvod. Za svaku komponentu, kada se dogodi posebna situacija, generira se događaj koji se može programski obraditi. U tom slučaju morate postaviti obradu događaja za događaj promjene (promjena odabranog jela) za listu jela: change=?©onChange();?©
Mijenja stanje potvrdnog okvira Omogući isporuku. Slično kao change=?©onChange();?© za potvrdni okvir “Dostava”. 3. Promijenite broj naručenih porcija. Na isti način change=?©onChange();?© za polje za unos broja porcija.
Ovime je dovršen glavni dio vaše prijave. A sada nešto o mogućnostima "glancanja" njegovog izgleda:
Kako glavna slika ne bi izgledala usamljeno, trebali biste joj dodati sivi efekt isticanja koristeći programske linijske filtere=?©()?©; osim toga, možete primijeniti druge grafičke efekte;
Kako se prilikom mijenjanja posuđa slika ne bi odmah promijenila, već lijepo isplivala, dodan je efekt izgleda: completeEffect=?©(Fade)?©. Usput, uz malo dodatnog truda bilo bi moguće podesiti njegovo trajanje, kao i implementirati efekte Zoom i Move podržane unutar Flexa. Ovdje je dana najjednostavnija opcija.
Zbog ograničenog opsega članka, morao sam "sakriti" jednu važnu značajku - organizaciju popisa slika jela u komponenti HorizontalList. Da biste to učinili, trebali biste stvoriti malu dodatnu ItemImg komponentu (još tri retka koda, ali bi opisivanje takvog procesa zauzelo puno prostora) i postaviti svojstvo itemRenderer=?©ItemImg?©.
Osim toga, namjerno sam izostavio aspekte učitavanja XML konfiguracijske datoteke (pomoću trenutnog koda ona je “ušivena” u program), slanja odabranih jela i kreiranja košarice, jer bi sve to povećalo duljinu članka zbog ne vrlo zanimljivi tehnički detalji.
U ovom sam članku pokušao pokazati učinkovitost korištenja Flasha (i Flexa) na primjeru općenito ne tako jednostavnog zadatka izrade kataloga proizvoda. Dobiveno rješenje (uključujući sučelje) stane u 40 redaka koda i može se objaviti izravno na stranicama časopisa. Po mom mišljenju, ovo je najbolji dokaz učinkovitosti izrade aplikacija u Flashu u usporedbi s aplikacijama u HTML-u i JavaScriptu. Naravno, zaključak koji se ovdje izvodi nije uvijek točan. Ipak, nadam se da sam vas doveo do ideje da se određeni problemi mogu jednostavno i lijepo riješiti pomoću Flasha.
Radna aplikacija korištena ovdje kao primjer prikazana je s manjim poboljšanjima na World PC disku.
Prilikom izrade aplikacije u Flex Builderu, možete birati između opcija web aplikacije i desktop aplikacije. U drugom slučaju, kreirana aplikacija će se izvoditi u tzv. AIR virtualnom stroju (Adobe Integrated Runtime), zahvaljujući kojem će imati pristup datotekama, autorun i drugim svojstvima računala. AIR virtualni stroj sada je dostupan za Windows, Macintosh i neke Linux sustave, omogućujući vam da učinkovito kreirate višeplatformske desktop aplikacije koristeći standardne Flash mogućnosti. Osobno, dugo sam preferirao ovu značajku u odnosu na razvoj aplikacija u Delphiju.
Budući da je naziv Flex bio zbunjujući za neke korisnike, programeri su najavili da će se sljedeća verzija zvati Adobe Flash Builder 4. Trenutno je u beta testiranju.
Inače, Adobe Flex Builder službeno je besplatno dostupan studentima svih uzrasta, od srednjoškolaca do maturanata. Da biste to detaljnije upoznali, trebali biste otići na http://habrahabr.ru/blogs/flex/41597/,
Započnimo
Da biste izradili flash aplikaciju, morate imati određenu ideju o njoj. To je da biste trebali razmisliti o barem grubom scenariju primjene. Nakon toga možete početi raditi izravno u uređivaču flasha.
Prvo morate odrediti veličinu buduće aplikacije. Na primjer, ako se radi o standardnom banneru, njegove će dimenzije biti 468 mm x 60 mm. Specificirajte ove parametre u odjeljku Svojstva filma u poljima Širina i Visina - oni označavaju širinu i visinu. Zatim odaberite boju glavne pozadine flash aplikacije. Za dovršetak postavki unesite broj sličica u sekundi u polje Frame Rate.
Poseban program pomoći će vam u izradi flash aplikacije
Odmah nakon dovršetka postavki kliknite lijevom tipkom miša na gumb OK. Sada na scenu stupa sam flash editor koji će vam pomoći da napravite flash aplikaciju.
Počinjemo stvarati animirane aplikacije - na primjer, pokretni natpis. Da biste to učinili, odaberite alat Tekst i otvorite ploču s postavkama – Znakovi prozorskih ploča. U izborniku Font koji se pojavi kliknite na ploču Znakovi i odaberite font, na primjer, Times New Roman. Postavite mu boju i željenu veličinu, npr. 26, napišite im poruku ili prijedlog. Osnovni temelj vaše flash aplikacije je spreman!
Flash aplikaciju možete napraviti u animiranom obliku
Nakon toga možete to učiniti. Da biste to učinili, trebate pretvoriti ono što ste napisali u simbol. Da biste to učinili, koristite naredbu Insert Convert to Symbol. Također mu dodijelite naziv kako biste ga kasnije mogli spremiti na tvrdi disk.
Nakon toga na Timelineu odaberite kadar br. 20 i naredbom Insert Keyframe umetnite prvi, tzv. ključni okvir. U tom slučaju, na lijevoj strani novog okvira vidjet ćete sivu traku koja ide u smjeru ključnog okvira.
Sada sve što trebate učiniti je aktivirati flash aplikaciju. Da biste to učinili, ponovno se vratite na prvi okvir i pomaknite natpis koji ste napravili izvan njegove granice na proizvoljno mjesto iza desnog ruba. Zatim, bez uklanjanja odabira iz prvog okvira, otvorite ploču Okvir panela prozora i odmah prijeđite na karticu Okvir.
Sve što trebate učiniti je odabrati vrstu animacije koju trebate iz izbornika Tweening. Odmah nakon toga, siva traka koja razdvaja ključne okvire postat će plava. To je sve, jednostavna flash aplikacija je spremna!
Flash je platforma koja se koristi za razvoj aplikacija i multimedijskih sadržaja - bannera, animacija i igrica. Za interakciju s okolinom stvoreno je nekoliko programa koji vam omogućuju izradu gore navedenih materijala. O njima će biti riječi u ovom pregledu.
Ovaj program, koji je razvio Adobe, možda je najpoznatiji alat za izradu Flash aplikacija, crtića i animiranih web objekata. Sadrži veliki broj funkcija, od kojih je jedna mogućnost programiranja naredbi u akcijskoj skripti.
Adobe Flash Builder
Flash Builder moćan je uređivač izvornog koda aplikacije sa značajkama otklanjanja pogrešaka. Može raditi kao samostalni alat za razvoj programa ili kao pomoćni alat za uređivanje projekata izrađenih u Adobe Flash Professional.
KoolMoves
Zamisao američkih programera Lucky Monkey Designs dizajnirana je da se natječe s Adobe proizvodima. Posjedujući iste osnovne funkcije - proizvodnju animacija i programiranje akcije - program ima ugodnije sučelje i lakše ga je naučiti.
Pregledali smo nekoliko predstavnika softvera dizajniranih za pomoć u razvoju multimedijskih aplikacija. Prva dva proizvoda međusobno se nadopunjuju i, s pravim pristupom i vještinom, mogu se nositi s bilo kojim zadatkom, ali su vrlo složeni. KoolMoves je, s druge strane, kompaktniji i lakši za korištenje alat.
ActionScript 3.0 može se koristiti u nekoliko okruženja za razvoj aplikacija, uključujući alate Flash Professional i Flash Builder te bilo koji uređivač teksta.
Ovaj primjer prolazi kroz korake za stvaranje i modernizaciju jednostavne ActionScript 3.0 aplikacije pomoću programa Flash Professional ili Flash Builder. Aplikacija koju izradite jednostavan je model za korištenje vanjskih datoteka klase ActionScript 3.0 u alatima Flash Professional i Flex.
Dizajniranje ActionScript aplikacije
Ovaj primjer je standardna ActionScript aplikacija pod nazivom "Hello World" koja ima jednostavnu strukturu.
Aplikacija se zove HelloWorld.
Prikazuje jedan tekstni okvir s riječima "Hello World!"
Aplikacija koristi jednu objektno orijentiranu Greeter klasu. Ova struktura omogućuje da se klasa koristi u Flash Professional ili Flex projektu.
Ovaj primjer najprije stvara osnovnu verziju aplikacije. Zatim se dodaju funkcije tako da korisnik može unijeti svoje ime, a aplikacija provjerava nalazi li se ime na popisu poznatih korisnika.
Nakon ove kratke definicije možete krenuti s izradom svoje aplikacije.
Stvaranje projekta HelloWorld i klase Greeter
Sažetak dizajna za aplikaciju Hello World navodi da bi se njezin kod trebao lako ponovno koristiti. Da bi se postigao ovaj cilj, aplikacija koristi jednu objektno orijentiranu klasu Greeter. Ova se klasa koristi u aplikaciji stvorenoj u Flash Builderu ili Flash Professionalu.
Stvaranje HelloWorld projekta i Greeter klase u Flexu
U Flash Builderu odaberite File > New > Flex Project.
Unesite HelloWorld u polje Naziv projekta. Provjerite je li Vrsta aplikacije postavljena na "Web (Radi u Adobe Flash Playeru)", a zatim kliknite Završi.
Flash Builder stvara projekt i prikazuje ga u prozoru Package Explorer. Prema zadanim postavkama, projekt sadrži datoteku pod nazivom HelloWorld.mxml, koja se otvara u uređivaču.
Sada, da biste stvorili prilagođenu datoteku ActionScript klase u Flash Builderu, odaberite Datoteka > Novo > ActionScript klasa.
U dijaloškom okviru New ActionScript Class u polju Name unesite Pozdravljač kao naziv klase i kliknite Završi.
Za izradu klase Greeter u Flash Professionalu slijedite ove korake:
U programu Flash Professional odaberite Datoteka > Novo.
U dijaloškom okviru Novi dokument odaberite ActionScript datoteku i kliknite U redu.
Sada će se pojaviti prozor za uređivanje nove ActionScript datoteke.
Klasa Greeter definira objekt Greeter koji se koristi u aplikaciji HelloWorld.
Dodavanje koda u Greeter klasu
Unesite sljedeći kod u novu datoteku (neki kodovi su možda već dodani):
Paket ( public class Greeter ( public function sayHello():String ( var greeting:String; greeting = "Hello World!"; return greeting; ) ) )
Klasa Greeter uključuje jednu metodu, sayHello(), koja vraća niz s izrazom "Hello World!"
Da biste spremili ovu ActionScript datoteku, odaberite Datoteka > Spremi.
Klasa Greeter sada je spremna za korištenje u aplikaciji.
Stvorite aplikaciju pomoću ActionScript koda
Klasa Greeter koju smo upravo stvorili definira samostalan skup softverskih funkcija, ali ne predstavlja potpunu aplikaciju. Da biste koristili klasu, morate izraditi Flash Professional dokument ili Flex projekt.
Prilikom izrade koda morate koristiti instancu klase Greeter. Sljedeće opisuje postupak za korištenje klase Greeter u aplikaciji.
Za izradu ActionScript aplikacije pomoću alata Flash Professional slijedite ove korake:
Odaberite Datoteka > Novo.
U dijaloškom okviru New Document odaberite Flash File (ActionScript 3.0) i kliknite OK.
Otvara se prozor za izradu dokumenta.
Na paleti alata Flash Professional odaberite alat Type. Povucite ga na pozornici kako biste definirali novi tekstni okvir koji je približno 300 piksela širok i 100 piksela visok.
Na ploči Svojstva, dok je tekstualni okvir još uvijek odabran u radnom području, postavite vrstu teksta na Dinamički tekst i unesite glavniTekst kao naziv instance tekstualnog polja.
Pritisnite prvi okvir vremenske trake. Otvorite ploču Radnje odabirom Prozor > Radnje.
Na ploči Radnje unesite sljedeću skriptu:
Var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello();
Spremite datoteku.
Za izradu ActionScript aplikacije pomoću alata Flash Builder slijedite ove korake:
Označiti
Označiti
Označiti
Označiti
Otvorite datoteku HelloWorld.mxml i dodajte kod prema sljedećem ispisu:
Ovaj Flex projekt uključuje četiri MXML oznake:
Kod u oznaci
Za spremanje aplikacije odaberite File > Save.
Objavite i testirajte ActionScript aplikaciju
Razvoj softvera je interaktivan proces. Nakon što je kod napisan, mora se kompajlirati i uređivati dok u potpunosti ne ispuni ciljeve. Morate pokrenuti kompajliranu aplikaciju i provjeriti obavlja li zadatke opisane u zadatku. Ako nije, trebate urediti kôd dok ne dobijete željeni rezultat. Razvojna okruženja Flash Professional i Flash Builder pružaju nekoliko načina za objavljivanje, testiranje i uklanjanje pogrešaka u aplikacijama.
U nastavku su navedeni glavni koraci za testiranje aplikacije HelloWorld u svakom od navedenih okruženja.
Da biste objavili i testirali ActionScript aplikaciju pomoću alata Flash Professional, slijedite ove korake:
Objavite svoju aplikaciju i provjerite ima li pogrešaka kompilacije. U programu Flash Professional odaberite Upravljanje > Testiranje filma za kompajliranje ActionScript koda i pokretanje aplikacije HelloWorld.
Ako testirate svoju aplikaciju i vidite pogreške i upozorenja u izlaznom prozoru, ispravite pogreške u datoteci HelloWorld.fla ili HelloWorld.as. Zatim ponovno provjerite aplikaciju.
Ako nema pogrešaka kompilacije, aplikacija Hello World pojavit će se u prozoru Flash Playera.
Nakon uspješnog stvaranja jednostavne, ali potpune objektno orijentirane ActionScript 3.0 aplikacije, možete započeti.
Za objavljivanje i testiranje ActionScript aplikacije pomoću alata Flash Builder, slijedite ove korake:
Ako testirate svoju aplikaciju i vidite pogreške i upozorenja u izlaznom prozoru, ispravite pogreške u datoteci HelloWorld.mxml ili Greeter.as. Zatim ponovno provjerite aplikaciju.
Ako nema pogrešaka kompilacije, aplikacija Hello World pojavit će se u prozoru preglednika koji se otvori. Zaslon bi trebao prikazati tekst "Hello World!"
Odaberite Pokreni > Pokreni HelloWorld.
Pokrenut će se aplikacija HelloWorld.
Nakon što ste uspješno izradili jednostavnu, ali potpunu objektno orijentiranu ActionScript 3.0 aplikaciju, možete početi Nadogradnja aplikacije HelloWorld.
Nadogradnja aplikacije HelloWorld
Kako biste aplikaciju učinili zanimljivijom, u nju možete unijeti potvrdu korisničkog imena nakon provjere prema danom popisu imena.
Prije svega, moramo ažurirati klasu Greeter, proširujući njezinu funkcionalnost. Zatim biste trebali ažurirati aplikaciju kako bi mogla iskoristiti prednosti novih značajki.
Ažuriranje datoteke Greeter.as
Otvorite datoteku Greeter.as.
Promijenite sadržaj datoteke na sljedeći način (novi i promijenjeni redovi podebljani su):
Paket ( javna klasa Greeter ( /** * Definira imena koja dobivaju pravilan pozdrav. */ public static var validNames:Array = ["Sammy", "Frank", "Dean"]; /** * Gradi pozdravni niz koristeći zadano ime. */ javna funkcija sayHello( korisničko ime: niz = ""):String ( var greeting:String; ako (korisničko ime == "") { greeting = "Zdravo. Upišite svoje korisničko ime, a zatim pritisnite " + "tipku Enter."; } else if (validName(userName)) { pozdrav = "Zdravo, " + korisničko ime + "."; } drugo { greeting = "Žao nam je " + userName + ", niste na popisu."; } uzvratiti pozdrav; ) /** * Provjerava nalazi li se ime na popisu validNames. */ javna statička funkcija validName(inputName:String = ""):Boolean { if (validNames.indexOf(inputName) > -1) { vratiti istinito; } drugo { vratiti lažno; } } } }
Klasa Greeter sada ima nova svojstva:
Niz validNames sadrži popis dopuštenih korisničkih imena. Kada se klasa Greeter učita, niz se postavlja na popis od tri imena.
Metoda sayHello() uzima korisničko ime i mijenja pozdrav ovisno o određenim uvjetima. Ako je korisničko ime userName navedeno kao prazan niz (""), svojstvo pozdrava postavljeno je tako da traži korisničko ime. Ako je korisničko ime prihvaćeno, pozdrav izgleda ovako: "Zdravo, Korisničko ime." I konačno, ako prethodna dva uvjeta nisu ispunjena, varijabla pozdrava postavlja se na sljedeći način: "Oprostite Korisničko ime, niste na popisu." ("Žao nam je, [korisničko ime], niste na popisu").
Metoda validName() vraća true ako je uneseni inputName pronađen u nizu validNames i vraća false ako ime nije pronađeno. Naredba validNames.indexOf(inputName) provjerava svaki red niza validNames prema nizu unesenog imena, inputName. Metoda Array.indexOf() vraća poziciju indeksa prve instance objekta u nizu. Vraća -1 ako objekt nije pronađen u nizu.
Zatim trebate izmijeniti aplikacijsku datoteku u kojoj postoji referenca klase ActionScript.
Za promjenu aplikacije pomoću alata Flash Professional, slijedite ove korake:
Prva dva retka jednostavno postavljaju granice za dva tekstualna polja.
Polje za unos teksta, kao što je textIn, ima skup događaja koje može distribuirati. Metoda addEventListener() omogućuje vam da odredite funkciju koja se pokreće kada se dogodi događaj određene vrste. U ovom slučaju, ovaj događaj će biti pritisak tipke na tipkovnici.
Prilagođena funkcija keyPressed() provjerava hoće li se pritisnuti tipka Enter. Ako se pritisne željena tipka, metoda sayHello() objekta myGreeter prosljeđuje tekst iz tekstualnog polja textIn kao parametar. Ova metoda vraća pozdravni niz na temelju vrijednosti koja mu je proslijeđena. Vraćeni niz se zatim dodjeljuje tekstualnom svojstvu tekstualnog polja mainText.
Otvorite datoteku HelloWorld.fla.
Promijenite skriptu u okviru 1 tako da prazan niz ("") ide u metodu sayHello() klase Greeter:
Var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello("");
Odaberite alat Type iz palete Tools. Napravite dva nova tekstualna polja u radnom području. Postavite ih jedno do drugog ispod postojećeg polja teksta mainText.
U prvi novi tekstualni okvir, koji je oznaka, unesite tekst Korisničko ime:.
Odaberite drugo tekstualno polje i postavite njegovu vrstu u Property inspektoru na Input Text. Odaberite jednu liniju kao vrstu linije. Unesi textIn kao naziv instance.
Pritisnite prvi okvir vremenske trake.
Na ploči Radnje dodajte sljedeće retke na kraj postojeće skripte:
MainText.border = istina; textIn.border = istina; textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); function keyPressed(event:KeyboardEvent):void ( if (event.keyCode == Keyboard.ENTER) ( mainText.text = myGreeter.sayHello(textIn.text); ) )
Novi kôd dodaje sljedeću funkcionalnost:
Kompletna skripta za Frame 1 izgleda ovako:
Var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello(""); mainText.border = istina; textIn.border = istina; textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); function keyPressed(event:KeyboardEvent):void ( if (event.keyCode == Keyboard.ENTER) ( mainText.text = myGreeter.sayHello(textIn.text); ) )
Spremite datoteku.
Za pokretanje aplikacije odaberite naredbe “Manage” > “Test Movie”.
Kada pokrenete aplikaciju, od vas se traži da unesete svoje korisničko ime. Ako program prihvati ime, pojavit će se potvrdna poruka "zdravo".
Za izmjenu aplikacije pomoću alata Flash Builder, slijedite ove korake:
Otvorite datoteku HelloWorld.mxml.
Zatim promijenite oznaku
Sada dodajte sljedeće retke neposredno nakon završne oznake
Atribut enter specificira akcije koje se izvode kada korisnik pritisne tipku Enter u polju userNameTxt. U ovom primjeru, kod prosljeđuje tekst unesen u polje metodi Greeter.sayHello(). Pozdrav u polju mainTxt mijenja se u skladu s tim.
Datoteka HelloWorld.mxml izgleda ovako:
Spremite uređenu datoteku HelloWorld.mxml. Odaberite Pokreni > Pokreni HelloWorld za pokretanje aplikacije.
Kada pokrenete aplikaciju, od vas se traži da unesete svoje korisničko ime. Ako je ime (Sammy, Frank ili Dean) prihvaćeno od strane programa, pojavit će se potvrdna poruka "Zdravo, Korisničko ime».