Printing i Bulk med Flex
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Dette casestudy viser hvordan du bruker PrintAdvancedDataGrid og en tilpasset itemRenderer å skrive ut flere sider med data og grafikk, bruker SWFloader komponent.
< h2> Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot - nedenfor er en oversikt over en 12 siders PDF skrives ut fra en Flex-program ved hjelp av teknikker i denne artikkelen:
< hr>
demonstrert i denne veiledningen:...
Bruk FlexPrintJob klasse
Bruk PrintAdvancedDataGrid
Opprette et tilpasset itemRenderer med en SWFLoader
< li> Skrive ut en topp- og bunntekst.
Filtrering et collectionView.
Skrive ut en Datagrid med høyde som overstiger 7500.
noen vanskeligheter med hensyn til Flex Printing:.
innhold eller Datagrid rader må alle være synlig på scenen, eller de vil ikke skrive ut
Legge manuelle sideskift er vanskelig, og oppnådd gjennom å sette din rowHeight å matche hva du vil ha vist på hver utskrevne side.
Flextrykk går floke hvis din totale PrintAdvancedDataGrid innhold høyden er større enn ca 7500 piksler, necesitating en midlertidig løsning av flere PrintAdvancedDataGrids.
Trinn 1: Importere Skrive Classes
Begynn ved å importere de nødvendige trykte klasser, samt utskrifts renderer inn Flex prosjekt:
import mx.printing.FlexPrintJob, importere mx.printing. FlexPrintJobScaleType; import com.reiman.PrintItemRenderer;
Trinn 2: Lag en visning for PrintAdvancedDataGrid og itemRenderer
Lag en visning State for bulk utskrift. I mitt tilfelle, jeg opprettet en tilstand som kalles printState.
* alternativt kan du opprette en forekomst av din PrintAdvancedDataGrid og itemRenderer og legge dem til scenen via Actionscript, men for en bulk utskrift prosjekt jeg fant dette å være for vanskelig å jobbe med, og som jeg prøvde å skrive ut SWF som XML drevet, jeg trengte for å være sikker på at mine SWF ble vises riktig før du skriver
Trinn 3:. Legg din PrintAdvancedDataGrid
< mx: PrintAdvancedDataGrid paddingTop = "0" paddingBottom = "0" synlig = "true" rowHeight = "200" sizeToPage = "true" showHeaders = "false" id = "printGrid" creationComplete = "stripQuiz ();" height = "{grid_height}" width = "300" > < mx: kolonner > < mx: AdvancedDataGridColumn width = "200" id = "printColumn" itemRenderer = "com.reiman.PrintItemRenderer" sorterbar = "false" /> < /MX: kolonner > < /mx: PrintAdvancedDataGrid >
Hvis du trenger en total utskrifts areal større enn 7500 i høyden, trenger du en annen PrintAdvancedDataGrid for hvert område
Trinn 4: Angi PrintAdvancedDataGrid alternativer
En ting jeg fant viktig var å sette alternativet
sizetoPage = "true"
Ifølge PrintDataGrid kontroll siden fra Adobe Flex 3 LiveDocs, gjør sizeToPage egenskapen at PrintAdvancedDataGrid kontroll fjerner alle delvis synlige eller tomme rader og endre størrelsen på seg til å omfatte bare komplette rader i gjeldende visning
Trinn 5:.. Legg din itemRenderer
Legg en itemRenderer til din AdvancedDataGridColumn
< mx: AdvancedDataGridColumn width = "200" id = "printColumn" itemRenderer = "com.reiman.PrintItemRenderer" sorterbar = "false" />
Trinn 6: Lag itemRenderer Component
I mitt tilfelle, jeg ønsket å oppnå flere ting med itemRenderer:
legge til en SWFLoader
legge til en topptekst med sidetittelen
legge til en side bunntekst med min url
legge avstand til toppen, bunnen og sidene for riktig utskrift
Siden min URL fungert bedre som vertikal tekst, fant jeg det mye bedre å bruke en SWF for denne teksten i stedet for en tekstboks. Du kan være kreativ med itemRenderer, og legger data elementer fra XML eller datakilde samt logoer, webadresser, etc. Her er de vise elementer fra innsiden min kode for itemRenderer komponent, som også finnes i src /com /Reiman /PrintItemRenderer.mxml Velg utskriftsjobben skalatype du vil bruke (for å lese om FlexPrintJob skalatyper, sjekk Flex LiveDocs siden her ), og eventuelt sette printasBitmap alternativet. Jeg ønsket min eks å skrive ut som vektor, og faktisk denne innstillingen var nøkkelen til min innhold ut på riktig måte Legg noen varsler eller handlinger du vil utføre på utskrift (for eksempel en Alert å fortelle brukeren om å slå på LANDSKAP utskrift). For eksempel: Hvis du ønsker å sette en Alert, må det utføres før utskriften starter. Vennligst se på koden gitt i nedlastingen assocated med denne opplæringen for printAlert () i main.mxml Sett din før utskrift Still inn nye verdier for høyde, bredde og rowHeight å tilsvare FlexPrintJob verdier Legg inn kode for å imøtekomme legge til flere sider til utskriftsjobben. Ifølge Flex LiveDocs, er dette nextpage () sjekk ment å sikre at innholdet vil bli skrevet ut på riktig måte uavhengig av AdvancedDataGrid høyde, selv om jeg fant ut at etter en høyde på ca 7500, svikter trykking for å fullføre korrekt. Jeg fant ut at jeg fikk færre trykkfeil når jeg lagt dette til koden fra Trinn 12: Så nå min totale kode for Step 12 ser slik ut: Dette ser ut til å ha å gjøre med Flex 3 problem eller bug angående utskrift datagrids med en stor høyde, som er et reelt problem for utskrift ting som flere SWF-filer eller bilder, fordi Datagrid høyden må faktisk reflektere den totale høyden av bilder eller SWF som skrives Steng din utskriftsjobben, og utføre eventuelle tilleggsfunksjoner som en Alert, og tilbakestille printGrid og printColumn verdier tilbake til slik de var før utskrift. Hvis du bruker en visning State for utskrift, der brukeren har kanskje en utskriftssenteret type grensesnitt hvor de kan se hva de er i ferd med å skrive ut, ville dette være nyttig. Hvis du velger å legge den PrintAdvancedDataGrid til scenen via Actionscript, da dette ville være unødvendig, og i dette trinnet vil du i stedet fjerne PrintAdvancedDataGrid fra scenen Min dataanrop så slik ut opprinnelig: Alt jeg trengte å gjøre var å legge til en ekstra resultat handler, slik at dataene for andre PrintAdvancedDatagrid ville være atskilt: Så jeg har lagt et nytt resultat handler: Dette nye dataprovider for andre PrintAdvancedDatagrid er satt i min stripQuiz2 () filterfunksjon I mitt tilfelle, jeg trengte å legge 3 nye ListCollectionViews, og en mer dataprovider: product: [bind] private Var removeQuiz: ListCollectionView = new ListCollectionView () [bind] private Var removeQuiz2: ListCollectionView = new ListCollectionView (); [bind] private Var itemsQuiz: ListCollectionView = new ListCollectionView (); [bind] private Var lessonsDataProvider2: ArrayCollection = new ArrayCollection (); For de to datagrids jeg ønsket å skrive ut fra, jeg trengte filtre som kan utføre følgende funksjoner: Dette resulterte i etableringen av følgende funksjoner: Før du sender utskriftsjobben, la jeg den andre PrintAdvancedDatagrid som skal skrives: For en bedre titt på den fullstendige koden, kan du laste ned kildefilene knyttet til denne opplæringen og ta en titt på main.mxml Dette er kanskje ikke den mest elegante løsningen for å bulk utskrift SWF-filer fra Flex, men det er en løsning som jeg fant fungerer pålitelig, med høy kvalitet. Skrive i Flex kan være en ekte bjørn, men det betyr ikke at du bør overse de alternativene som er tilgjengelige for deg, særlig gjennom bruk av PrintDatagrid og PrintAdvancedDatagrid. Tusen takk for at du leser min tutorial, og jeg ser frem til noen spørsmål og kommentarer du måtte ha.
fil i nedlastingspakken for denne opplæringen:
< mx: VBox width = "100%" > < mx: Spacer height = "10" width = "100% "/> < mx: HBox horizontalAlign =" center "width =" 100% "> < mx: Tekst Tekstjustering =" center "styleName =" printHeader "text =" {appy.printGrid.dataProvider.getItemAt (0 ) .title} - {row.lessonTitle} © Insta spansk 2011 "width =" 92% "x =" 10 "y =" - 7 "/> < mx: Bilde høyre =" 20 " source="{row.lessonIcon=='video'?video:row.lessonIcon=='worksheet'?worksheet:row.lessonIcon=='lesson'?activity:row.lessonIcon=='hover'?hover:row.lessonIcon=='drag'?matching:row.lessonIcon=='song'?song:row.lessonIcon=='memory'?memory:row.lessonIcon=='downloads'?'assets/images/icons/downloads.swf':row.lessonIcon=='hangman'?hangman:row.lessonIcon=='quiz'?quiz:row.lessonIcon=='wordgame'?wordgame:row.lessonIcon=='flashcards'?flashcard:row.lessonIcon=='oral'?oral:row.lessonIcon=='cloze'?cloze:empty}" height = "25" width = "25" /> < /mx: HBox > < /mx: VBox > < mx: VBox id = "print_vbox" horizontalScrollPolicy = "off" verticalScrollPolicy = "off" verticalAlign = " middle "height =" 100% "width =" 100% "> < mx: Spacer height =" 5% "/> < mx: HBox horizontalScrollPolicy =" off "verticalScrollPolicy =" off "verticalAlign =" middle " height = "100%" width = "100%" > < mx: Spacer width = "3%" /> < mx: SWFLoader id = "swfPrintLoader" height = "90%" width = "90%" scaleContent = "true" source = "{row.fileName}" Autoload = "true" /> < mx: Spacer height = "1%" /> < mx: SWFLoader height = "198" width = "20" scaleContent = "true" source = "midler /images /wwwinstaspanishcom .swf "/> < /mx: HBox > < /mx: VBox >
Trinn 7: Legg Basic Action FlexPrintJob kode til din main.mxml File
offentlig funksjon print (): void {var utskriftsjobben: FlexPrintJob = new FlexPrintJob (); printJob.printAsBitmap = false; if (printJob.start ()) {printJob.addObject (printGrid); printJob.send ();}}
Trinn 8: Sett utskriftsjobben Scale Type
printJob.printAsBitmap = false;
Trinn 9:. Legg koden som skal utføres før utskriftsjobben
Alert.show ("Vennligst sett skriverinnstillingene til LANDSKAP" + "\\ n '+" eller din quiz vil ikke riktig ut! ")
fil
Trinn 10:. Angi utskrifts bredde og høyde variabler
bredde og høyde verdier for PrintAdvancedDataGridwidth, og rowHeight
Var before_widdy = printColumn.width; Var before_hiddy = printGrid.rowHeight; Var widdy = printJob.pageWidth; Var hiddy = printJob.pageHeight;
Trinn 11: Sett de nye verdiene
printColumn.width = widdy; printGrid.width = widdy; printGrid.rowHeight = hiddy;
Trinn 12: Legg Multiple Pages Kode til FlexPrintJob
While ( true) {printGrid.nextPage (); if (printGrid.validNextPage!) {printJob.addObject (printGrid); gå i stykker; }}
Trinn 13: Valgfritt Juster printGrid Høyde
printGrid.height = printGrid. measuredHeight; printGrid.verticalScrollPolicy = "off";
while (true) {printGrid.nextPage (); if (printGrid.validNextPage!) {printGrid.height = printGrid.measuredHeight; printGrid.verticalScrollPolicy = "off"; printJob.addObject (printGrid); gå i stykker; }}
Trinn 14: Legg retningslinjene for å legge noe annet å din utskriftsjobben
printJob.addObject (printGrid2); printJob.addObject (swfLoader, FlexPrintJobScaleType.NONE);
Trinn 15: Send ditt utskriftsjobben
printJob.send (.); printColumn.width = before_widdy; printGrid.width = before_widdy; printGrid.rowHeight = before_hiddy; Alert.show ("Print Job Complete!»)
Trinn 16: Legg til en PrintAdvancedDataGrid Hvis innholdet overstiger 7500 Høyde
< mx: PrintAdvancedDataGrid paddingTop = "0" paddingBottom = "0" synlig = " sanne "rowHeight =" 200 "sizeToPage =" true "showHeaders =" false "id =" printGrid2 "creationComplete =" stripQuiz2 (); " height = "{grid_height}" width = "300" > < mx: kolonner > < mx: AdvancedDataGridColumn width = "200" id = "printColumn2" itemRenderer = "com.reiman.PrintItemRenderer" sorterbar = "false" /> < /MX: kolonner > < /mx: PrintAdvancedDataGrid >
Trinn 17: Duplicate Din dataprovider og resultHandler
< mx: HTTPService id = "httpService" url = "{myUrl}" resultFormat = "objekt" resultat = "httpResult_handler (event)" feil = "Alert.show ('data load error')" />
< mx: HTTPService id = "httpService" url = "{myUrl}" resultFormat = "objekt" resultat = "httpResult_handler (hendelse), httpResult_handler2 (event)" utsette = "Alert.show ('data load error')" />
privat funksjon httpResult_handler2 (evt: ResultEvent): void {if (evt.result.lessons. rad) {var resultAC: ArrayCollection = evt.result.lessons.row som ArrayCollection; for (var i: int = 0; i & lt; resultAC.length; i ++) {var rad: Row = new Row (); row.fill (resultAC [i]); lessonsDataProvider2.addItem (rad); } GetSelectedItem ()}
Trinn 18:. Legg collectionView Variabler og Tilleggsdataprovider
Trinn 19: Legg filterFunction Funksjoner
stripe ut visse typer aktivitet fra min utskrift liste, som noen var ikke nødvendig
avkorte data 12 oppføringer, som etter omfattende testing fant jeg ut at dette var grensen for vellykket utskrift helsides SWF fra Datagrid
Ta de første 12 oppføringer fra ListCollectionView for andre PrintAdvancedDatagrid
privat funksjon stripQuiz (): void {removeQuiz = new ListCollectionView (lessonsDataProvider); removeQuiz.filterFunction = quizStripped; removeQuiz.refresh (); quizLimit (); removeQuiz.refresh (); printGrid.dataProvider = removeQuiz;} private funksjon stripQuiz2 (): void {removeQuiz2 = new ListCollectionView (lessonsDataProvider2); removeQuiz2.filterFunction = quizStripped; removeQuiz2.refresh (); quizPage2 (); removeQuiz2.refresh (); printGrid2.dataProvider = removeQuiz2;} private funksjon quizStripped (verdi: Object): Boolean {return String (value.lessonIcon) .toUpperCase () = "QUIZ" & & String (value.lessonIcon) .toUpperCase () = "HANGMAN" &! &Amp; String (value.lessonIcon) .toUpperCase () = "Cards" &! &Amp; String (value.lessonIcon) .toUpperCase () = "Nedlastinger" &! &Amp; String (value.lessonIcon) .toUpperCase () = "VIDEO" &! &Amp; String (value.fileName) .toUpperCase () = "assets /AKTIVITETER /WORKSHEET_KIDS_AUDIO.SWF" &! &Amp; String (value.fileName) .toUpperCase () = "assets /AKTIVITETER /WORKSHEET_KIDS_AUDIO5.SWF";} private funksjons quizLimit (): void {for (var i: int = removeQuiz.length-1; i > = 0; i -) {if (removeQuiz.length > = 13) removeQuiz.removeItemAt (i);}} privat funksjon quizPage2 (): void {if (removeQuiz2.length > = 13) removeQuiz2.removeItemAt (12); removeQuiz2.removeItemAt (11); removeQuiz2.removeItemAt (10); removeQuiz2.removeItemAt (9); removeQuiz2.removeItemAt (8); removeQuiz2.removeItemAt (7); removeQuiz2.removeItemAt (6); removeQuiz2.removeItemAt (5); removeQuiz2.removeItemAt (4); removeQuiz2.removeItemAt (3); removeQuiz2.removeItemAt (2); removeQuiz2.removeItemAt (1); }
Trinn 20: Legg Second printGrid til utskriftsjobben
printJob.addObject (printGrid2); printJob.send ();.
fil
Konklusjon