Understanding Date (): Lage en kalender i AS3
5
Del
en
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I dag skal vi bygge en fullt funksjonell kalender widget bruker AS3. Det er ikke rocket science, bare et utmerket eksempel på bruk Date klassen, som kan håndtere all kompleksiteten ved utpakking ganger, datoer, måneder og år. Vi kommer også til å bruke noen Flash-komponenter, og sørge for at denne kalenderen er bærbar til Flash Builder, FlashDevelop, og så videre.
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Idémyldring
Før du begynner å bygge koden, la oss ta en titt på hva vi trenger: I dette trinnet skal vi skape en grunnleggende strukturen i vår Calendar.as Jeg er sikker på at du har lagret denne klassen filen som Calendar.as Skritt for skritt skal vi endre denne Calendar.as I neste trinn vil vi skape noen tekst felt å merke hverdager og datoer I dette trinnet vil vi endre vår klasse ved å erklære noen variabler og skape en ny funksjon setTextFormat (fontFace, fontstørrelse). Vi vil også passerer noen parametere til konstruktøren av klassen. I første omgang vil det se ut som "syntetisk sukker", men som opplæringen skrider det vil bli "Syntaktisk Salt". Beklager, men vi ønsker å holde denne klassen kompakt slik som å gjøre det lett bærbar. Ideen er å ha bare én klasse, og det er alt. Så holder nøye øye med konstruktøren er antall parametre og deres rekkefølge som vi fremgang. Tilbake til modifisere dokumentet klassen. .. Følg alle parametere som sendes til konstruktøren: vi har allerede tildelt verdier til dem. Dette er en måte for å opprette standardverdier for parametrene. Hvis noen parametere er spesifisert når Instantiating klassen, vil disse standardverdiene brukes i stedet. Vi vil se dette i kommende trinn. Ingenting synlig ennå. Vent noen skritt Kalenderen består av rader og kolonner som danner et rutenett Men ? hvor mange rader og kolonner Det kommer an på kalenderen type -. vertikal eller horisontal Vertikal view trenger 7 (rader) x 6 (kolonner), mens horisontal visning trenger 6 (rader) x 7 (kolonner) som vist: Som vår kalender er begrenset til horisontal visning for denne opplæringen, vil vi trenge 7 kolonner og 6 rader. Dermed totalt (7 x 6) = 42 celler. Så, la oss endre vår klasse, slik at det vil generere et rutenett som kreves for kalendervisning. Sammen med å legge en import uttalelse, nye variabler og konstruktørparametre, vil vi også legge til en ny funksjon makeDatesCellGrid (..) til klassen som vist: Oops, massevis av koden er skrevet og ingenting synlig ennå. Jeg vet at du venter på å se noen synlige resultater. For det vil vi gjøre en midlertidig endring i makeDatesCellGrid ved å legge en ny linje som vist: Vent ... Vent. Nå opprette en ny Flash-fil for Actionscript 3.0 og lagre denne filen med et navn (helst Calendar.fla Nå teste filmen Det er et par ting å fikse, som å sette opp datoene for inneværende måned, etiketter for dager, etc. Vær også oppmerksom på at selv om konstruktør kan ta parametere, så vi et resultat uten å passere noen verdier for parametere. Dette er hva jeg snakket om i forrige trinn Legg merke til følgende to linjer vi plassert inne i konstruktøren, etter cellW = cellWidth;. CellP = padding; Vi skapte disse vars for global tilgang . Vi har tildelt verdier til disse variablene fra konstruktørparametre. Vi brukte "cellW" for å plassere cellene i rutenettet form. Vi vil bruke "cellP", dvs. celle padding (gapet mellom naboceller), i kommende trinn. Så vent og se. En ting til. Etter å ha testet koden ovenfor, fjerne linjen allDatesCells [i] .text = i; fra makeDatesCellGrid (..) -funksjonen. Vi har lagt det for testformål. Egentlig har vi tenkt å sette datoer på disse tekstfelt i kommende trinn I dette trinnet vil vi legge til etiketter for ukedager til vår kalender . For at vi skal legge til en ny funksjon makeDaysLabels (...) og kaller det inne i konstruktøren. Først av alt, legge til nye rekke ukedagene [] ved starten av klassen under //Variabler erklæring delen. Denne rekken hold navnene på alle hverdager som vist: Nå kan du legge følgende funksjon for klassen Til slutt, kaller denne funksjonen inne konstruktør som vist: Ukedager er klar og venter på datoer å ha sine riktige stedene I denne skritt vi vil gjøre tekstfeltet bakgrunn som er synlig, slik at det er ikke nødvendig å tegne et rektangel form. Men hvis du ønsker å legge til mer stil da etter å ha fullført denne opplæringen gå videre og lage rektangel tilfeller eksempel datoer 'celler bakgrunn og legge til en gradient farge til dem. .. For nå er det ok å sette tekstfeltet bakgrunn for å true og bruke en farge til det Legg til følgende nye funksjonen til klassen vår Deretter kaller denne funksjonen inne konstruktør som vist: Test filmen Cool ... Cellene er klar til å holde datoer for valgt måned Vi vil legge til en ny funksjon arrangeDates (). Dette er den viktigste funksjonen for Kalender-applikasjonen Vi skal fullføre følgende må-gjøre oppgaver gjennom denne funksjonen.. Pretty utfordrende oppgaver, men interessant. Ok, tilbake til jobben. Først vil vi erklære noen variabler i starten av klassen under //Variabler seksjonen som vist: Her currDateTime gir det nåværende tidspunkt, dagens dato, og gjeldende måned og år firstDay gir all informasjon om den første dagen (dvs. Dato 1) for den aktuelle måneden. Observer at vi har passert verdien for tredje parameter som "1" for date. Prøv tracing med ulike datoer for å få en idé om hva dette gjør. Men husk å gjøre det "1" igjen etter testing. firstDayColumn, som navnet antyder, gir kolonnenummeret for den første dagen i måneden, har daysOfMonths rekke maksimalt antall dager fra "Januar ..." til "... Desember". Men for "februar" vi har "28" dager; ved skuddår må vi tildele "29" dager som det maksimale antall dager for februar. Vi vil se det senere i dette trinnet. maxDays vil holde maksimalt antall dager for inneværende måned. Fin. God nok forklaring for hvert var. Det er tid for nye funksjons arrangeDates (). For å forstå denne funksjonen pent, vil vi endre det gradvis. Så først, I denne funksjonen vil vi få kolonnenummeret for første dag (dvs. Dato 1) for en valgt måned som vist: Denne "firstDayColumn" er viktig fordi når vi får kolonnenummer for første dag (dvs. Date 1) deretter plassere neste dato blir veldig enkelt. Vi vil rett og slett bruke denne "firstDayColumn" nummer inne i en for loop å plassere de neste datoene. Vi vil se det snart i kommende trinn Vi vil endre "arrangeDates ()" funksjonen for å få maksimal dager for valgt måned som vist: Den ovenfor nye linjen er en forkortelse metode for en hvis setningen. Nye brukere kan vurdere det "Syntaktisk Salt", men når vant til det vil vurdere det "Syntaktisk Sugar". Legg merke til spørsmålstegnet "?" i den ovennevnte linje. På venstre side av denne spørsmålstegn - dvs. "firstDay.getFullYear ()% 4 == 0 & & firstDay.getMonth () == 1" - er et betinget utsagn. Hvis dette venstre side er sant da uttalelsen etter "?" mark (her 29) er kjørt; hvis den er falsk setningen på høyre side av ":" -merket (her daysOfMonths [firstDay.getMonth ()]) utføres. Se bildet nedenfor for en bedre forståelse. Ok, tilbake til vår stenografi hvis setningen. Det gir maksimalt antall dager for valgt måned. Men du må vurdere skuddår, også. I et skuddår, har 29. februar maksimum dager. Dette skuddår kommer hvert fjerde år. Så har vi to forhold, er en for å sjekke om det er skuddår, og andre er å sjekke om det er februar. For å sjekke om værende år er skuddår vi brukte modulus operator (som gir resten etter deling av en rekke etter hverandre), som i "firstDay.getFullYear ()% 4". Hvis det gir en rest på 0 (null) så kan vi si at det er et skuddår. For eksempel er 2012 et skuddår, som (2012% 4 == 0). Tilsvar (2 016% 4 == 0), så 2 016 er et skuddår, og så videre. Hvis resten er null så åpenbart det er ikke et skuddår. Dermed kan vi oppdage skuddår Først legger disse import uttalelser til klassen, etter import flash.events.Event;. Import fl.controls.ComboBox, import fl.data.DataProvider; Deretter legger nye variabler ved oppstart av klassen i henhold //Variabler seksjonen som vist: Vi vil bruke "måneder" array å sette verdier inne ComboBoxen Ok, nå la oss endre konstruktøren funksjon som vist. Vi har lagt parametrene "CBX" og "CBY" i konstruktøren underskrift for å passere posisjonsverdier som er angitt av brukeren, eller for å bruke standardverdier hvis ikke spesifisert Så vi opprettet en ComboBox eksempel som "monthPickerCB = new ComboBox ()". Vi kalte "monthPicker (...)" på forhånd, så vi kommer til å lage det nå. Så Vi vil legge til to nye funksjoner "monthPicker (...)" og "pickMonth (...)" som vist: Ett skritt, og vi er ferdig med å legge den ComboBox Dra ComboBox fra Component panel i din Flash filens Bibliotek-panelet.. (Bruk vindusmenyen hvis du ikke finner panelene.) På denne måten kan vi få tilgang til ComboBox komponent og sine klasser under kjøring. Test filmen for å se kombinasjonsboks nederst til venstre i kalenderen (som standardverdi). Nå kan du vise alle månedene, for inneværende år. Spennende ... Så vi vil nå legge år valg, noe som gir enda en dimensjon til vår kalender. Velge noen år vil legge til én dimensjon til vår kalender. Til å velge noen år innenfor et område, er det NumericStepper komponent et godt valg. Derfor vil vi legge til "NumericStepper" komponent som vil tillate brukeren å øke eller redusere det valgte året. Som med ComboBox, vil vi sende parametre til konstruktøren for å angi X og Y stillinger Hvis du vil legge til og plassere en NumericStepper, må vi utføre følgende oppgaver:. Først legger følgende import uttalelse til klassen, etter import fl.controls.NumericStepper; Deretter legger en ny variabel i starten av klassen under //Variabler seksjonen som vist: Ok, nå la oss endre konstruktør funksjon som vist: Vi har lagt til tre parametere: "NSX", "nsY" og "monthsRange". De to første er å angi posisjonen, og den tredje er å angi området (forrige og neste månedene). 39 vil tillate å plukke noen år i løpet av de neste og forrige 40. OK, nå vil vi legge til to nye funksjoner "yearPicker (...)" og "pickYear (...)", som vist: Ett skritt, og vi er ferdig med å legge den numeriske stepper Dra tall Stepper komponent fra Component panelet til Flash filens Bibliotek-panelet.. På denne måten kan vi få tilgang til tall Stepper komponent og sine klasser under kjøring. Det var det. Test din film å se en enkel kalender app som kjører Vi tester Kalender-applikasjonen med standardverdier. Nå vil vi tilpasse den ved å sende forskjellige parameterverdier til sin konstruktør. Til å begynne med, vil vi prøve å bruke de ulike skriftene som er tilgjengelige på vårt system. Så, i Flash-filen, gå til den første setningen i Actionscript panelet som vist: Klikk i parentes ved siden av ny kalender, og skriv "Courier New". Nå kontoutskriften din vil se slik ut: Test filmen for å se den nye skrifttypen brukes på datoer Nå kan du prøve å endre neste. parameter (skriftstørrelse) som så: Når du skriver neste parameter vil du se en kode hint dukker opp, som viser alle nødvendige parametere med sine standardverdier, som så: Kontroller at alle parametere er det i koden hint popup. Det er en bug (?) Jeg har funnet når jeg jobbet på ett prosjekt, som jeg ønsker å gjøre deg oppmerksom på. Når jeg skrev et dokument klasse, på et tidspunkt da det var bare fire parametere i konstruktøren signatur, jeg lukket denne klassen filen. Da jeg kom tilbake til arbeidet, fortsatte jeg å jobbe på denne klassen. På et tidspunkt var det seks parametere. Så jeg ønsket å sjekke dette parameteroverføring ting. Så jeg åpnet Flash-filen jeg laget for dette prosjektet, og begynte å skrive parametre, slik vi gjorde i vår kalender Flash-fil. Jeg hadde ventet meg nylig lagt parametere som skal vises i kode hint ... men overraskende var det fortsatt bare fire parametere. Jeg har lagret, og gjenopptok alle relaterte filer, men resultatet var det samme. Etter mye testing fant jeg grunn. Grunnen var at jeg opprettet en ny mappe i samme mappe der dokumentet klassen ble plassert. Jeg fjernet denne mappen utenfor hovedmappen, da jeg åpnet klassen filen for å gjøre noen endringer og jeg lagret den. Så gikk jeg tilbake til Flash-fil, og begynte å skrive parametere og denne gangen alle parametere dukket opp Ok, ikke en alvorlig bug, men lærdommen er:.. Være forsiktig mens du setter opp en mappestruktur for prosjektet Så tilbake til et punkt der vi slapp. Prøv passerer riktige verdier for ulike parametere. Du kan også sette opp variabler i Flash-fil (eller i en klasse), så hvis en verdi endres deretter andre relaterte parametere vil også bli justert tilsvarende - for eksempel hvis du ønsker å øke fontstørrelsen deretter cellebredden må øke tilsvarende, og så videre Den virkelige kraften i denne klassen er at du kan bruke den i noen av prosjektet slik: < .no> Vi har allerede sett hvordan på å bruke Calendar.as Nå vil vi se hvordan å kalle det i en annen klasse. Det er ikke mye som vi må gjøre annerledes når du ringer vår klasse fra en annen. Vi bare sette den samme koden vi har skrevet i Flash tidslinjen i en annen klasse. Se "Main.as" class nedenfor for bedre forståelse: Du kan bruke de ovennevnte "Main.as" i Flash, FlashDevelop, FlashBuilder, FDT. Bare du er nødt til å bære Calendar.as I Flash IDE satt denne "Main.as" som Document klasse bruker Eiendom Inspector panel. Sørg for at du har både Calendar.as Nå skal vi teste den med FlashDevelop 4. Opprett en ny mappe "Calendar_FD". Åpne FlashDevelop, opprette et nytt prosjekt, og finn fram til de ovennevnte "Calendar_FD" -mappen. Trykk OK for å opprette et nytt prosjekt Inside "Calendar_FD" -mappen, vil du se tre nye mapper:. "Bin", "lib" og "src" Nå i "src". mappen kopi Calendar.as Nå alt er satt opp. Men hva med "ComboBox" og "NumericStepper" komponenter? Her ingen Bibliotek-panelet er til stede, i motsetning til i Flash IDE. Løsningen på dette problemet er å gjøre SWC-filer. Vi vil skape en "CalendarComp.swc" fil. Opprett en ny FLA (i Flash Pro), den navnet "CalendarComp.fla", og lagre det hvor som helst (men husk sin vei). Åpne Publish Settings og i "Flash" -kategorien check "Export SWC" under "SWF-innstillinger" gruppe. Hit Publish. "CalendarComp.swc" opprettes i mappen der du lagret "CalendarComp.fla", så bla deg frem til denne mappen og kopiere "CalendarComp.swc" til "lib" -mappen i "Calendar_FD "hovedmappen. Tilbake i FlashDevelop, se i prosjektpanelet. Høyreklikk "CalendarComp.swc" og velg "Legg til i bibliotek". Nå kan vi få tilgang til alle klasse filer som kreves for våre komponenter, akkurat som i Flash IDE. Til slutt klikker "Test Project" for å se kalenderen app kjører. Opprett en ny mappe, "Calendar_FB". Åpne Flash Builder og opprette et nytt prosjekt. Bla til de ovennevnte "Calendar_FB " mappe. Også angi et prosjektnavn (jeg brukte "mittprosjekt" som et prosjektnavn). Trykk Fullfør for å opprette et nytt prosjekt. Inne i "Calendar_FB" -mappen, vil du se en "src" directoy, som allerede inneholder "MyProject.as" som den viktigste klassen. Kopier vår Calendar.as Som i, FlashDevelop er det ingen bibliotek panel som Flash IDE har. Så hvordan du får "ComboBox" og "NumericStepper" komponenter? Løsningen er å bruke en SWC, som vi gjorde med FlashDevelop. Men du trenger å angi klassen banen i Flash Builder. Så først kopiere "CalendarComp.swc" vi skapte i avsnittet over for FlashDevelop, og lime denne filen inne i "src" mappen i "Calendar_FB "hovedmappen. I Flash Builder vi må legge til en klassebanen. Så klikker du på Project > Egenskaper for å åpne "Properties" vinduet. Velg "Action Build Path" og klikk på "Legg SWC ..." -knappen. Deretter bla for "CalendarComp.swc" som du limte i "src" -mappen Endre "MyProject.as" som vist. Til slutt klikker du på "Kjør My Project" for å se kalenderen app kjører. Så, venner, ønsker jeg å stoppe på dette stadiet. Jeg håper du har fått noe nyttig fra denne opplæringen som vil hjelpe på dine kommende prosjekter. Lykke til ... Se deg snart. I denne opplæringen vi så logisk bruk av "Date ()" class i AS3. Vi adressert skuddår problemet. Vi vist neste og forrige måneds datoer. Vi så hvordan man skal håndtere Flash-komponenter. Vi har også sjekket portabilitet av denne kalenderen app bruker FlashDevelop, Flash Builder og Flash Pro. I løpet av prosessen har vi også sett hvordan du oppretter og bruker SWC-filer for å få tilgang til Flash-komponenter utenfor Flash Pro. Alle gode. Venner, holde lesing Activetuts +. Enjoy!
En klasse fil, Calendar.as
, etter
En celle rutenett, for å plassere dato, etter
Etiketter for dagen navn,
Funksjon for å få dagens dato, måned og år, etter
Funksjon for å få tidligere måneders dager, etter
Funksjon for å få fremtidige måneders dager, etter
Noe å adressere skuddår problemet, etter
Interface for å plukke noen måned og år, etter
Portabilitet (for Flash Builder, FlashDevelop, og andre IDE).
Trinn 2:. Klar Calendar.as
Class File
klasse fil
< p> Det er flere måter å lage Action klasse fil, som å bruke FDT, Flash Builder, FlashDevelop. Og, selvfølgelig, den "Higgs Boson" av denne multimedia verden: den ene sanne Flash IDE. Jeg bruker Flash Professional. Opprett en Actionscript 3.0 klasse fil. Følgende er den grunnleggende strukturen i Calendar.as
å starte med
pakke {import flash.display.Sprite.; public class Calendar strekker Sprite {//variabler offentlig funksjon Calendar () {//konstruktør kode}}}
i den nye mappen for denne kalenderen app. Hvis ikke må du lagre det.
å gjøre det fullt funksjonell.
Trinn 3:. Sette opp tekstformater for Datoer og Hverdager
pakke {import flash.display.Sprite; import flash.text.TextFormat; public class Calendar strekker Sprite {//variabler privat Var dateCellFormat: tekstformat; private Var dayLabelTxtFmt: tekstformat; offentlig funksjon Kalender (fontFace: String = "Arial", fontstørrelse: int = 15) {setTextFormat (fontFace, skrift); } Private funksjon setTextFormat (whichFont: String, størrelse: int): void {//dato tekstformat dateCellFormat = new tekstformat (); dateCellFormat.font = whichFont; dateCellFormat.color = 0xFFFFFF; dateCellFormat.size = størrelse; dateCellFormat.align = "center"; //dag etikett tekstformat dayLabelTxtFmt = new tekstformat (); dayLabelTxtFmt.font = "_sans"; dayLabelTxtFmt.color = 0x000000; dayLabelTxtFmt.size = størrelse - 3; }}}
Trinn 4:.. Opprette Cell Grid Ordne Datoer
pakke {import flash.display.Sprite; import flash.text.TextFormat; import flash.text.TextField; public class Calendar strekker Sprite {//variabler privat Var cellW: Number; //cellebredden privat Var cellP: Number; //celle padding private Var allDatesCells: Array = new Array (); private Var dateCellFormat: tekstformat; private Var dayLabelTxtFmt: tekstformat; offentlig funksjon Kalender (fontFace: String = "Arial", fontstørrelse: int = 15, cellWidth: Number = 30, padding: Number = 3, originX: Number = 15, originY: Number = 15) {cellW = cellWidth; cellP = padding; setTextFormat (fontFace, skrift); makeDatesCellGrid (originX, originY); } Private funksjon setTextFormat (whichFont: String, størrelse: int): void {//dato tekstformat dateCellFormat = new tekstformat (); dateCellFormat.font = whichFont; dateCellFormat.color = 0xFFFFFF; dateCellFormat.size = størrelse; dateCellFormat.align = "center"; //dag etikett tekstformat dayLabelTxtFmt = new tekstformat (); dayLabelTxtFmt.font = "_sans"; dayLabelTxtFmt.color = 0x000000; dayLabelTxtFmt.size = størrelse - 3; } Private funksjon makeDatesCellGrid (cellXPos: Number, cellYPos: Number): void {//Opprett rutenett av dato celler for (var i: int = 0; i < 42; i ++) {var dateCell: Textfield = new Textfield (); addChild (dateCell); //position celler til å danne et gitter (7 x 6 = 42) dateCell.x = cellXPos + (cellW * (i- (Math.floor (i /7) * 7))); dateCell.y = cellYPos + (cellW * Math.floor (i /7)); //setter alle dato celler i matrisen for videre tilgang allDatesCells.push (dateCell); }}}}
privat funksjons makeDatesCellGrid (cellXPos: Antall, cellYPos: Number): void {//Opprett rutenett av dato celler for (var i: int = 0; i < 42; i ++) {var dateCell: Textfield = new Textfield (); addChild (dateCell); //position celler til å danne et gitter (7 x 6 = 42) dateCell.x = cellXPos + (cellW * (i- (Math.floor (i /7) * 7))); dateCell.y = cellYPos + (cellW * Math.floor (i /7)); //setter alle dato celler i matrisen for videre tilgang allDatesCells.push (dateCell); allDatesCells [i] .text = i; }}
som jeg gjorde) i den samme mappen der du lagret Calendar.as
. Nå åpner Actionpanelet ved å trykke "F9" og skriv inn følgende kode:
Var myCalendar. Sprite = new Calendar (); addChild (myCalendar);
Trinn 5:. Legge Navn på Hverdager
private Var Hverdager: Array = new Array ("Sun", "man", "ti", "Tor", "to", "Fri", "Sat");
private funksjons makeDaysLabels (cellXPos: Antall, cellYPos: Number): void {//Legg ukedag navn for (var i.: int = 0; i < 7; i ++) {var dayLabel: Textfield = new Textfield (); addChild (dayLabel); dayLabel.selectable = false; dayLabel.text = ukedagene [i]; dayLabel.setTextFormat (dayLabelTxtFmt); dayLabel.x = cellXPos + (cellW * i); dayLabel.y = cellYPos - 15; }}
offentlig funksjon Calendar (fontFace: String = "Arial", fontstørrelse: int = 15, cellWidth: Number = 30, padding: Number = 3, originX: Antall = 15, originY: Number = 15) {cellW = cellWidth; cellP = padding; setTextFormat (fontFace, skrift); makeDatesCellGrid (originX, originY); makeDaysLabels (originX, originY);}
Trinn 6:. Initial og tapetsering Datoer 'Cells
privat funksjon monthSetup (): void {for (var i: int = 0, jeg < 42; i ++) {allDatesCells [i] .text = ""; //dekor alle celler allDatesCells [i] .background = true; allDatesCells [i] .backgroundColor = 0x000000; allDatesCells [i] .border = true; allDatesCells [i] .borderColor = 0xCCCCCC; allDatesCells [i] .selectable = false; allDatesCells [i] .width = allDatesCells [i] .height = cellW - cellP; allDatesCells [i] .setTextFormat (dateCellFormat); }}
offentlig funksjon Calendar (fontFace: String = "Arial", fontstørrelse: int = 15, cellWidth: Number = 30, padding: Number = 3, originX: Antall = 15, originY: Number = 15) {cellW = cellWidth; cellP = padding; setTextFormat (fontFace, skrift); makeDatesCellGrid (originX, originY); makeDaysLabels (originX, originY); monthSetup ();}
Trinn 7: Ordne Datoer for Selected.. måned
Identifisere kolonnenummeret for første dag i måneden som er valgt.
Få maksimalt antall dager for den valgte måneden (med hensyn til skuddår, hvis det er aktuelt).
Putting datoer på riktige steder for valgt måned.
Opplyser dagens dato, hvis valgt måned er gjeldende måned.
private Var currDateTime: Date = new Date (); privat Var firstDay: Date = new Date (currDateTime.fullYear, currDateTime. måned, 1); privat Var firstDayColumn: uint = firstDay.day; private Var daysOfMonths: Array = new Array (31,28,31,30,31,30,31,31,30,31,30,31); privat Var maxDays. UINT;
private funksjons arrangeDates (): void {//få kolonnenummer for første dag i måneden hvis (firstDay.day == 0) {//når siste ankomst forrige måned er på lørdag og deretter flytte til andre rad firstDayColumn = firstDay.day + 7; } Else {firstDayColumn = firstDay.day; }}
Trinn 8:. Å få maksimalt antall dager for valgt måned
privat funksjons arrangeDates (): void {//få kolonnenummer for første dag i måneden hvis (firstDay.day == 0) {//når datoen for forrige måned siste er på lørdag deretter flytte til andre rad firstDayColumn = firstDay.day + 7; } Else {firstDayColumn = firstDay.day; } //Få maks dager for inneværende måned wrt skuddår hvis noen maxDays = (firstDay.getFullYear ()% 4 == 0 & & firstDay.getMonth () == 1 29: daysOfMonths [firstDay.getMonth ()]? );}
private Var måneder: Array = [{label: "January", data: 0} {label: "februar", data: 1 } {label: "March", data: 2}, {label: "April", data: 3} {label: "May", data: 4} {label: "June", data: 5} {label: "July", data: 6} {label: "August", data: 7} {label: "September", data: 8} {label: "October", data: 9} {label : "November", data: 10} {label: "Skuffet", data: 11}]; privat Var monthPickerCB: ComboBox; //ComboBoxen å plukke en måned
offentlig funksjon Calendar (fontFace : String = "Arial", fontstørrelse: int = 15, cellWidth: Number = 30, padding: Number = 3, originX: Number = 15, originY: Number = 15, CBX: Number = 15, CBY: Number = 15) { cellW = cellWidth; cellP = padding; monthPickerCB = new ComboBox (); setTextFormat (fontFace, skrift); makeDatesCellGrid (originX, originY); makeDaysLabels (originX, originY); monthSetup (); monthPicker (CBX, CBY);.}
privat funksjon monthPicker (CBX: Antall, CBY: Number): void {monthPickerCB.dataProvider = ny dataprovider (måneder); addChild (monthPickerCB); //posisjon ComboBoxen monthPickerCB.x = CBX; monthPickerCB.y = (cellW * 6) + CBY; monthPickerCB.selectedIndex = currDateTime.month; monthPickerCB.addEventListener (Event.CHANGE, pickMonth);} private funksjon pickMonth (e: Hendelses): void {firstDay.month = ComboBox (e.target) .selectedItem.data; monthSetup ();}
Trinn 14: Legge til Capability velger noen år
< li> Bestått parametere for NumericStepper er "X" og "Y" posisjoner til konstruktøren.
Legge til ny funksjon "yearPicker (...)" hvor vi vil manipulere NumericStepper.
Legge til én mer ny funksjon "pickYear ()", som vil høre NumericStepper hendelser og vil fortelle vise det valgte året.
Importere NumericStepper komponent ved å dra den fra Component panelet til biblioteket panel av vår FLA.
private Var yearPickerNS: NumericStepper; //numerisk stepper å plukke et år
offentlig funksjon Calendar (fontFace: String = "Arial", fontstørrelse: int = 15, cellWidth: Number = 30, padding : Number = 3, originX: Number = 15, originY: Number = 15, CBX: Number = 15, CBY: Number = 15, NSX: Number = 26, nsY: Number = 15, monthsRange: int = 39) {cellW = cellWidth; cellP = padding; monthPickerCB = new ComboBox (); yearPickerNS = new NumericStepper (); setTextFormat (fontFace, skrift); makeDatesCellGrid (originX, originY); makeDaysLabels (originX, originY); monthSetup (); monthPicker (CBX, CBY); yearPicker (NSX, nsY, monthsRange);}
privat funksjon yearPicker (NSX: Antall, nsY: Antall, maxYrsRange: int): void {yearPickerNS.maximum = currDateTime.fullYear + maxYrsRange; yearPickerNS.minimum = currDateTime.fullYear - maxYrsRange; yearPickerNS.value = currDateTime.fullYear; addChild (yearPickerNS); //posisjon numerisk stepper yearPickerNS.x = monthPickerCB.width + NSX; yearPickerNS.y = (cellW * 6) + nsY; yearPickerNS.addEventListener (Event.CHANGE, pickYear);} private funksjon pickYear (e: Hendelses): void {firstDay.fullYear = e.target.value; monthSetup ();}
Trinn 15:. Tilpasse Kalender
Var myCalendar: Sprite = new Calendar (); addChild (myCalendar);
Var myCalendar: Sprite = new Calendar ("Courier New");
Var myCalendar: Sprite = new Calendar ("Courier New", 17);
Trinn 16:. Kontroll av portabilitet av denne kalenderen App
Bruk i Flash IDE (som vi har gjort)
Kalle dette Calendar.as
inne i et annet dokument klasse.
Ved hjelp av det med FlashDevelop.
Bruk den med Flash Builder.
i Flash tidslinje koden gjennom denne opplæringen.
pakke {import flash.display.Sprite; public class Hoved strekker Sprite {offentlig funksjon main (): void {init (); } Private funksjon init (): void {var c: Sprite = new Calendar (); addChild (c); }}}
, "Main.as" i dine prosjektmapper.
, "Main.as" i prosjektmappen. Pass også på at du har "Combobox" og "NumericStepper" i biblioteket panel. Nå kan du teste filmen for å se på arbeidskalenderen.
FlashDevelop
. Også kopiere over "Main.as" vi laget og erstatte den med autogenerert "Main.as" i samme mappe.
< p> Drag "ComboBox" og "NumericStepper" komponenter til Bibliotek-panelet og lagre filen.
Flash Builder
< p> Hva med Flash Builder 4?
klassen filen til denne mappen. Det er nå synlig i "Package Explorer".
Pakke {import flash.display.Sprite; public class mittprosjekt strekker Sprite {offentlig funksjon mittprosjekt (): void {var myCalendar: Sprite = new Calendar (); addChild (myCalendar); }}}
Konklusjon