Build en Multi-Purpose Form av kontakt med Flex
Del
Del
en
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vi skal opprette en tilpasset Flex-bygget kontaktskjema. Vi kommer til å gjennomføre mange av de fantastiske innebygde funksjonene i Flex-rammeverket, som valideringsmetoder, varselboks og datefield komponenter for å gi vårt kontaktskjema ekstra funksjonalitet. Vi vil også se nærmere justere CSS egenskaper til å gi vår søknad et unikt utseende og stil.
Oversikt
Vi re kommer til å være å skape et kontaktskjema i Flex Builder. Grunnen til at vi bruker Flex Builder løpet Flash seg selv, er på grunn av funksjonalitet innebygd i Flex-rammeverket. Det er lett tilgjengelig og ville ha tatt ganske mye koding for å oppnå i Flash. Vi kommer til å være ute på valideringsmetoder og varselvinduet tilgjengelig i Flex-rammeverket, samt mange av komponentene som gjør bruk Flex som litt mer spesielle.
For de av dere som fristed 't ned eller brukes Flex Builder men du kan få en prøveversjon herfra.
Hvis du ikke har brukt det ennå, så best du prøve og få tak i ved hjelp av Flex Builder og kanskje prøve ut noen mer grunnleggende opplæring først .
Trinn 1: La oss komme i gang
Først la oss lage et nytt Flex prosjekt ved å velge. fil > ny > Flex prosjekt. Gi prosjektet et navn; Jeg har valgt kontaktskjema. Vi trenger ikke å legge noen ekstra biblioteker så lar alle som som standard og bare klikk finish.
Flex Builder vil nå opprette prosjektet og når den er ferdig, bør du ha grunnleggende Flex prosjektet mappestruktur.
Trinn 2:. Legge til komponenter
Vi ønsker nå å redigere vår viktigste MXML klasse, som vi kommer til å legge mye av eiendeler til søknaden. Jeg pleier å være enklere i utformingsmodus, så hvis vi bare slå vår arbeidsplass over vi kan komme i gang med å skape noen bilder.
Det første vi kommer til å legge en Panel komponent til scenen. Gjør dette ca 400 x 574 px ved å justere feltene i oppsettet boksen på venstre på skjermen:
Vi har ikke tenkt å bekymre deg for mye om hvordan det ser ut i øyeblikket som vi kommer å være i endring dette med CSS litt senere. Vi skal bare konsentrere seg om å få komponentene på scenen
vi nå må legge til noen tekstinntasting komponenter til scenen.; en for hver - fornavn, etternavn, e-post og telefon. Jeg har gitt hver inngang boks en bredde på 210 piksler og en X verdi av 130; de blir deretter fordeles jevnt på Y-aksen. Vi trenger da å legge til en etikett komponent til venstre for hver av disse for å la brukeren vet hva vi forventer dem å gå inn og flytte alle disse slik at de justeres pent ved siden av tekstboksene.
Til slutt må vi gi hver av våre tekstinntastingsfelter et unikt id slik at de kan være målrettet med Actionscript. For å gjøre dette må vi gå inn i id i ID-boksen av den felles fane i Flex eiendommer panel, for mine innspill boksene jeg har valgt fornavn, etternavn, e-post og telefon
Trinn 3:. Datofelt og Combo bokser.
Vi trenger nå å legge datofeltet komponenter til søknaden ved å dra datofeltet komponent fra komponenten panelet til scenen. En gang for den "fra" dato og deretter igjen for "å" date. Igjen må vi gi disse en unik id i id-boksen, og jeg har valgt todate og from for mine.
Vi deretter gjøre det samme for ComboBox komponent. For ComboBox komponent trenger vi også å fortelle det hvor det vil være å få sin informasjon fra å diktere nedtrekkslisten produseres når brukeren klikker ComboBox. For å gjøre dette, i dataleverandøren boksen for denne komponenten i felles fane, går vi inn {comboText}. Det vi gjør her er å fortelle Flex at når teksten er innkapslet i en spenne som det bør være på utkikk etter en variabel for å gi denne informasjonen. Vi er senere kommer til å gjøre denne variabelen bind til kombinasjonsboks, slik at swf er stadig å se på denne informasjonen for noen endring.
Trinn 4:. Sjekk Esker og radioer
Til slutt vil vi legge til to check box komponenter og to radioknapper, sammen med relevante etiketter for å vise den nødvendige informasjonen til brukeren. For disse avmerkingsbokser og alternativknapper må vi legge en lytter via Actionscript for å se etter en endring i sin nåværende tilstand, og som vi vil overføre data til den aktuelle variabelen som skal lagres for php form. For å gjøre dette kan vi legge inn en funksjon i onClick boksen i felles fane. For formålet med vår funksjon vi trenger å passere en parameter i den. I tilfelle av frokost boksen i onClick boksen ville vi inn funksjonsnavnet med parameteren innkapslet i parentes slik: mealsAndCot (frokost) og for middag boksen det ville være: mealsAndCot (middag) etc. Vi vil gå mer i detalj på dette en liten stund senere.
Trinn 5. endelige berører
Til slutt, må vi legge en textarea og gi det en relevant ID for kommentarfeltet, sammen med to knapper under det; nullstillings og send-knappen. For de knappene vi trenger også å legge inn en onClick mål funksjon, for på nullstillingsknappen vil dette være reset () og for send-knappen vil dette bli sende (), fin og enkel. Nå er alt på skjemaet er lagt ut pent og har de relevante elementene har fått og ID for Actionhenvisning. La oss nå gå inn å få skjemaet til å se hvordan vi ønsker før vi går videre til Action
Trinn 6:. CSS
Applications i Flex Builder har en ekstra bonus for å være i stand til å være. enkelt endres med enkle CSS stilark. Hvis du høyreklikker på vårt prosjekt rot, kan du da har en mulighet til å gå til ny > CSS-fil. Dette vil skape et CSS dokument for oss å redigere. Redigere et stilark i Flex Builder er veldig enkelt, selv om du egentlig ikke forstår CSS, som stilark er enda redigeres i utformingsmodus. For å gjøre dette med stilark åpnet i Flex Builder kan du deretter klikke på utformingsmodus. Dette vil åpne opp CSS-filen i design modus som skal vise en blank skjerm som stilark for øyeblikket har ingenting satt i den. For å legge til en innstilling, klikk på knappen øverst på skjermen som ser ut som en liten haug av murstein med et plusstegn over den. Dette vil få opp en dialogboks som lar oss velge en komponent for å legge til en ny stil til. La oss starte med panelet. Du vil merke en forhåndsvisning av gjeldende innstilling for panelet.
Til venstre for dette i egenskapsvinduet er alle feltene som kan endres. For denne opplæringen har jeg valgt å fjerne standard avrundede hjørner og farge grensen svart med en 75% dekkevne. Fyllet jeg har endret til en mørk grå og endret teksten til en lys grå i Myriad Pro font. Hvis du klikker på kategorivisning eller Alfabetisk syn på øverst til høyre på eiendommene panelet vil du se at det er mye mer som kan endres, slik at du ikke bare begrenset til hva som er tilgjengelig på standardvisningen. Du er også i stand til å totalt endre skinning av komponenten ved å koble den til en swf eller SWC laget i flash eller en png /jpg opprettet i fyrverkeri, Photoshop eller Illustrator, men som er utenfor mandatet for denne opplæringen som vi er bare arbeider med CSS her nå
Trinn 7:. CSS Extras
Vi trenger bare å endre de komponentene som vi skal bruke i denne søknaden. Det betyr at de grunnleggende komponenter som vi har lagt til scenen allerede, nemlig skriving av tekst boksene, etiketter, datofeltene, ComboBox og knappene. De radioknapper og boksene er basert på knappen komponenter slik at vi ikke trenger å bekymre deg for dem, men det er noen skjulte komponenter som vi trenger å bekymre seg for.
Når vi skaper de valideringer med Action vi også skal bruke den Alert window.We derfor må endre CSS for dette, sammen med dato velgeren. Datoen velgeren er rullegardin kalenderen som vises når brukeren klikker på den datefield komponent. Men så at Flex vet at datefield bruker CSS fra vår stilark vi trenger å endre en verdi i datefield CSS. Hvis du endrer visningen i egenskapsvinduet til kategorivisning vil du se en stil som heter "dateChooserStyle" vi trenger å endre dette til "contactStyle", som er navnet på vår stilark. Andre kloke Flex vil bare bruke standard grå for datoen velgeren komponent.
Vi må også gjøre dette for ComboBox, hvis rullegardinmenyen er faktisk en liste komponent. Vi lenker til det ved å endre CSS av listen komponenten og ComboBox er dropDownStyleName verdi til navnet på vår stilark. Nå er jeg ikke kommer til å gå inn i for mye detalj om detaljene av stilene jeg valgte for mine komponenter i forhåndsvisnings eksempel, bortsett fra at jeg har valgt en svart /grå fargevalget og gjort alle mine hjørner skarpere med en tynn 1 pixel svart ramme. Du kan sette din slik du vil, og for å få en idé om hva som kan gjøres ta en titt på den contactStyle.css stilark også tilgjengelig i kilde for denne opplæringen Twitter /* CSS fil * /Panel {controlBarStyleName. PanelControlBar; titleStyleName: panelTitle; Skriftstørrelse: 12; fontWeight: normal; fontfamily: "Arial"; borderColor: # 010101; borderAlpha: 0.75; borderThicknessLeft: 10; roundedBottomCorners: false; cornerRadius: 0; borderThicknessRight: 10; bakgrunnsfarge: # 5C5B5B; farge: #DDDEDE; backgroundSize: auto;} DateField {fontfamily: "Arial"; borderColor: # 1A1A1A; dateChooserStyleName: contactStyle;} Tekstfelt {bakgrunnsfarge: # 9B9A9A; borderColor: # 131313;} ScrollBar {borderColor: # 3C3D3D; trackColors: # 363737, # 818383; fillAlphas: 1,0, 1,0, 1,0, 1,0; fillColors: # 9B9A9A, # 413E3E, # 9B9A9A, # 393838; cornerRadius: 0;} DateChooser {bakgrunnsfarge: # 3B3939; headerColors: # 313132, # 313132; color: # E2E6E7; borderThickness: 1; borderColor: # 1A1A1A; cornerRadius: 0; fontfamily: "Arial"; Skriftstørrelse: 12;} Button {cornerRadius: 0; borderColor: # 5B5C5C; fillAlphas: 1.0, 1.0; fillColors: # 9F9E9E, # 3F3E3E; color: # C3CACB; textRollOverColor: # B9BCBF; fontfamily: "Arial"; fontWeight: normal;} TextInput {bakgrunnsfarge: # 9B9A9A; borderColor: # 1C1D1D; borderThickness: 1; Border: solid;} ComboBox {fontfamily: "Arial"; fontWeight: normal; cornerRadius: 0; dropDownStyleName: contactStyle;} List {bakgrunnsfarge: # 676565; borderColor: # 202020; fontfamily: "Arial"; farge: #DBDDDE;} Etikett {fontfamily: "Arial"; Skriftstørrelse: 12;} Alert {borderColor: # 151515; bakgrunnsfarge: # 939292; backgroundSize: auto;} panelTitle {fontfamily: "Arial";} @ font-face {fontfamily:. "Arial"; fontWeight: normal; fontStyle: normal; src: lokale ("Arial");} @ font-face {fontfamily: "Arial"; fontWeight: normal; fontStyle: normal; src: lokale ("Arial");}
Trinn 8:.
Knytte CSS til søknaden vår nå som vi har stylet vår stilark må vi fortelle vår søknad til å vedta denne looken. Dette er veldig enkelt, og vi gjør det ved å legge denne bit av koden til vår MXML klasse:
< mx: Stil source = "contactStyle.css" > < /mx: Stil >
Nå hvis du går tilbake i utformingsvisning og sjekk ut programmet, så lenge alt er gjort riktig vil du se at komponentene er endret i henhold til CSS stilark
Trinn 9:. La oss komme Coding
!
OK, så nå at vi har ting å se hvordan vi vil ha dem, er det på tide å legge noe av funksjonaliteten til vårt kontaktskjema og dette er gjort med den magiske Actionscript. Tilbake til kildemodus, la oss legge et script blokk til vår søknad ved å skrive:
< mx: Script > < /mx: Script >
Heldigvis, med Flex trenger vi ikke å legge noen import uttalelser. Som standard legges det til dem for oss mens vi går sammen, slik at vi kan begynne med å lage relevante variabler. Vi trenger en variabel for å holde informasjon for boksene, en Array som vi kaller måltider, deretter en annen variabel for barneseng alternativknapper. Ettersom disse knappene er merket ja eller nei, vil vi gjøre denne variabelen en boolsk slik at den returnerer sant eller usant. Vi trenger også å opprette en forekomst av Alert klassen, slik at vi kan manipulere den senere under på send-funksjonen. Til slutt må vi legge til variabelen som vil holde informasjon for vår Combobox som definert tidligere. Dette vi kaller comboText, vil det være en Array og som nevnt tidligere vi gjør denne variabelen bind ved å legge til søkeordet "bind" før erklærte variabelen
private Var alertWindow: Alert;. private Var måltider: Array = []; private Var sprinkelseng: Boolean = false; [Bind] private Var comboText: Array = [{label: "King sized room"}, {label: "Double room"}];
Trinn 10:. Passerer Radio og Check Box data
Vår neste funksjon vil passere data fra radio og avmerkingsbokser til brukbar informasjon. For å lage disse komponentene ga vi dem en onClick lytteren og inn i dette vi passerte en parameter som som du kan se fra selve funksjonen var et "objekt". I løpet av denne funksjonen sjekker vi for å se hva dette objektet er via en "hvis" statement og gjennom det, manipulere våre data. I dette tilfellet har vi en matrise for måltid krav der vi skyver informasjon, eller for den boksen vi har en boolsk som er satt til true for ja i boksen eller usant for ingen i boksen.
Privat funksjon mealsAndCot (objekt: Object): void {if (objekt == frokost) {meals.push ("frokost"); } Else if (objekt == middag) {meals.push ("middag"); } Else if (objekt == yesCot) {barneseng = true; } Else {barneseng = false; }}
Denne informasjonen kan deretter sendes til vår php script under submitToPHP funksjon når alt har blitt sjekket ved sende funksjonen neste
Trinn 11:.. Validering
Nå er det tid til å trekke i bygget i validerings metoder fra Flex-rammeverket, og vi gjør dette på samme måte til å skape en ny komponenter. For det første skal vi skape en forekomst av mx: stringValidator å kontrollere og godkjenne fornavn og etternavn. For å gjøre dette for det første navnet valideringskontrollen vi skriver under teksten, under programmet noden utenfor mx: skriptkodene:
< mx: StringValidator id = "validFirstName" source = "{fornavn}" property = " tekst "/>
Som du kan se parametrene som trengs for validatoren er en id, og en kilde som skal sjekkes, i dette tilfellet fornavn. Vi gjør det samme ved å opprette en validator for å sjekke etternavn. For e-post og telefonnummer gjør vi det samme, men, Flex har andre validatorer, nemlig e-validator og nummer validator som kan brukes pent for disse feltene, så manuset under våre viktigste programmet koden skal se ut slik:
< mx: StringValidator id = "validFirstName" source = "{fornavn}" property = "text" /> < mx: StringValidator id = "validSurName" source = "{etternavnet}" property = "text" /> < mx: EmailValidator id = "validEmail" source = "{email}" property = "text" /> < mx: NumberValidator id = "validPhone" source = "{telefon}" property = "text" />
Trinn 12: Send inn Function
Hoved kjøtt av vår søknad er på send-funksjonen.. Dette kalles når brukeren klikker på send-knappen for å sende den innskrevne tekst og informasjon gjennom kontaktskjemaet.
Som i denne funksjonen vi kommer til å sjekke den angitte teksten og trengte felt, starter vi med å lage instantiations av ValidationResultEvent. Heller enn å kalle det her som en hendelse lytteren, kommer vi til å si at det er lik resultatet av valideringskontrollen utføres av Validator selv. Vi selvsagt lage en av disse instantiations for hver av valideringskontroller og deretter sende resultatene til "hvis" utsagn for å skape arrangementet gjennomføres avhengig av resultatet
privat funksjon levere (). Void {var firstNameValidation: ValidationResultEvent = validFirstName.validate (); Var surNameValidation: ValidationResultEvent = validSurName.validate (); Var emailValidation: ValidationResultEvent = validEmail.validate (); Var phoneValidation: ValidationResultEvent = validPhone.validate (); if (firstNameValidation.type == ValidationResultEvent.INVALID || surNameValidation.type == ValidationResultEvent.INVALID) {Alert.show ("Du må skrive inn en gyldig navn"); } Else if (emailValidation.type == ValidationResultEvent.INVALID) {Alert.show ("Vennligst skriv inn en gyldig e-postadresse"); } Else if (phoneValidation.type == ValidationResultEvent.INVALID) {Alert.show ("Skriv inn et gyldig telefonnummer"); } Else if (comments.text == "") {Alert.show ("Legg inn en beskjed"); } Else {submitToPHP (); }}
Trinn 13:.. The Alert Box
Som du kan se av funksjon, vi passerer hver valideringskontroll til en "hvis" statement og bruke UGYLDIG ValidationResultEvent snarere enn GYLDIG å skape en Alert boksen ved å kalle funksjonen Alert.show (). Hvis du noen gang har programmert med Javascript vil du være godt klar over varselvindu som du kan bruke til å lage en pop-up boks som varsler brukeren av nettleseren med en knapp til å klikke som vanligvis sier "OK". Som du er alle brukere av ulike nettlesere, vil dere alle være kjent med varselboks. The Alert klasse i Flex-rammeverket er nøyaktig det samme, og er en fin bit av funksjonalitet som vi kan bruke bare ved å ringe Alert.show funksjonen. Parametrene som trengs for dette er rett og slett strengen som skal vises i varsel boksen selv.
Selvfølgelig, hvis alle inngangsdata er skrevet inn riktig og samsvarer ikke med noen av forholdene, vi deretter gå videre til submitToPHP funksjon
Trinn 14:.. Innsending av data til PHP
Nå som alle de angitte data har blitt sjekket vi kan sende informasjonen til et PHP-script til e-post til mottakeren . PHP-script vi bruker er et enkelt sende mail script som passerer all den informasjon som er samlet inn i en vanlig tekstmelding, men det er ingenting som hindrer deg å lage en full html melding, ved hjelp av variable passerte her.
å passere denne info til vår PHP-script vi først opprette en forekomst av URLVariable klasse her kalt variabler, der vi passerer all informasjonen samlet. Vi deretter opprette en URLRequest i dette tilfellet heter phpUrl, som er rettet mot php script beliggenhet. Vi passerer URLVariable til URLRequest ved hjelp:
phpUrl.data = variabler;
Som du ser, når du passerer data fra inntastingsfelter og andre komponenter på søknaden vi bare tildele teksten i den boksen til den aktuelle variabelen eiendelen. Med måltidet Array, vi bare passere dette med toString () metode for å lage en streng fra tabellen selv. Vi deretter opprette en URLLoader å sende alle disse dataene til den aktuelle nettadressen og deretter legge en lytter til å lytte ut for ferdigstillelse av overgang eller for eventuelle feil i sending for å vise den aktuelle meldingen i varslingsboksen som vil dukke opp.
privat funksjon submitToPHP (): void {var variabler: URLVariables = nye URLVariables (); Var phpUrl: URLRequest = new URLRequest ("http://www.ultravisual.co.uk/Test/sendform.php"); phpUrl.method = URLRequestMethod.GET; phpUrl.data = variabler; variables.firstname_text = firstName.text; variables.surname_text = surName.text; variables.email_text = email.text; variables.phone_text = telephone.text; variables.comment_text = comments.text; variables.room_text = comBo.text; variables.datefrom_text = fromDate.text; variables.dateto_text = toDate.text; variables.meals = meals.toString (); variables.cot = barneseng; Var loader: URLLoader = new URLLoader (); loader.dataFormat = URLLoaderDataFormat.TEXT; loader.addEventListener (Event.COMPLETE, completeHandler); try {loader.load (phpUrl); alertWindow = Alert.show ("Sende ........"); } Catch (error: Feil) {Alert.show ("Feil å sende skjemaet."); }}
Trinn 15:. Komplett
I forsøk resultatet i den siste funksjonen kan du se at i stedet for bare å bruke Alert.show (), har vi opprettet en forekomst av Alert klasse og brukt det å lage pop up. Grunnen til dette er at i den fullstendige funksjon trenger vi å lukke denne boksen for å vise vår suksess melding i neste funksjon. Hvis vi ikke opprette en forekomst av Alert klasse for dette, vil blitsen bare lage en varselboks og kle den på toppen av vår siste, heller enn å lukke eventuelle eksisterende. Som du kan se, vi lukke den eksisterende varslingsboksen ved å bruke:
PopUpManager.removePopUp (alertWindow);
Vi kan da bruke Alert.show () for å vise en ny varselboks som vil vente på brukermedvirkning. Vi deretter bruke reset-funksjonen som er beskrevet nedenfor for å tilbakekontaktskjemaet tilbake til sin opprinnelige tilstand
Trinn 16:.. Reset Funksjon
Etter å ha gjort våre knapper, har vi nå to funksjoner som trenger som skal opprettes, nemlig nullstille og sende. Denne funksjonen kalles også ved ferdigstillelse av sendToPHP funksjonen. Reset vil i utgangspunktet nullkontaktskjemaet tilbake til sin base ved å renske boksene og eventuell tekst. Dette vil også bli kalt en gang kontaktskjemaet har blitt gjennomført og informasjon er blitt sendt til PHP script. Tilbakestillingsfunksjonen er svært enkel:
privat funksjon resetForm (): void {firstName.text = ""; surName.text = ""; comBo.selectedIndex = 1; telephone.text = ""; email.text = ""; comments.text = ""; fromDate.text = ""; toDate.text = ""; noCot.selected = false; yesCot.selected = false; breakfast.selected = false; dinner.selected = false; }
Dette bare forteller swf at teksten som skal vises for hver av tekstfeltene er lik ingenting og at ingen av de radioknapper eller er merket av, og så skal vises som så.
Konklusjon
Som du kan se, ved hjelp av valideringsmetoder og varselboks i Flex er veldig enkelt, så vel som å bruke funksjonaliteten til mange av komponentene. For mer informasjon om noen av Flex komponenter og metoder mer informasjon kan samles inn ved å se på adobe referansesidene for Flex. Takk for følge med! Anmeldelser