Questa casestudy dimostra come usare PrintAdvancedDataGrid e una consuetudine itemRenderer per stampare più pagine di dati e grafici, usando il SWFLoader componente.
Anteprima del risultato finale
Diamo un'occhiata al risultato finale su cui lavoreremo: sotto c'è una panoramica di un PDF di 12 pagine stampato da un'applicazione Flex utilizzando le tecniche in questo articolo:
Dimostrato in questo tutorial:
Utilizzo della classe FlexPrintJob.
utilizzando PrintAdvancedDataGrid.
Creare una custom itemRenderer con un SWFLoader.
Stampa un'intestazione e un piè di pagina.
Filtraggio a CollectionView.
Stampa a DataGrid con altezza superiore a 7500.
Alcune difficoltà per la stampa flex:
Il tuo contenuto o DataGrid le righe devono essere tutte visibili sullo stage o non verranno stampate.
L'aggiunta di interruzioni di pagina manuali è difficile e viene raggiunta impostando le tue altezza della riga per abbinare ciò che vuoi visualizzato su ogni pagina stampata.
La stampa flex va in tilt se il totale PrintAdvancedDataGrid l'altezza del contenuto è superiore a circa 7500 pixel, supponendo una soluzione multipla PrintAdvancedDataGrids.
Passaggio 1: importare le classi di stampa
Inizia importando le classi di stampa necessarie e il tuo renderer di stampa nel tuo progetto Flex:
Passaggio 2: crea una vista per PrintAdvancedDataGrid e itemRenderer
Crea uno stato di visualizzazione per la stampa di massa. Nel mio caso, ho creato uno stato chiamato printState.
* In alternativa, puoi creare un'istanza del tuo PrintAdvancedDataGrid e itemRenderer e aggiungerli allo stage tramite actionscript, ma per un progetto di stampa di massa ho trovato che questo era troppo difficile da lavorare e, mentre stavo provando a stampare file SWF che sono basati su XML, dovevo assicurarmi che i miei file SWF fossero visualizzazione corretta prima della stampa.
Passaggio 3: aggiungi il tuo PrintAdvancedDataGrid
Se hai bisogno di un'area di stampa totale superiore a 7500 di altezza, ne avrai bisogno di un'altra PrintAdvancedDataGrid per ogni area
Passaggio 4: imposta il tuo PrintAdvancedDataGrid opzioni
Una cosa che ho trovato importante era impostare l'opzione
sizetoPage = "true"
In base alla pagina PrintDataGrid Control di Adobe Flex 3 LiveDocs, la proprietà sizeToPage si assicura che il controllo PrintAdvancedDataGrid rimuova le righe parzialmente visibili o vuote e ridimensiona se stesso per includere solo le righe complete nella vista corrente.
Passaggio 5: aggiungi il tuo itemRenderer
Aggiungi un itemRenderer al tuo AdvancedDataGridColumn.
Passaggio 6: creare il itemRenderer Componente
Nel mio caso, volevo realizzare diverse cose con il itemRenderer:
aggiungere un SWFLoader
aggiungi un'intestazione con il titolo della pagina
aggiungi un footer laterale con il mio url
aggiungi spaziatura in alto, in basso e sui lati per una stampa corretta
Poiché il mio URL ha funzionato meglio come testo verticale, ho trovato molto meglio usare un SWF per questo testo anziché una casella di testo. Puoi essere creativo con il tuo itemRenderer, aggiungendo elementi di dati dal tuo XML o origine dati così come i loghi, URL, ecc. Ecco gli elementi di visualizzazione all'interno del mio codice per il itemRenderer componente, che si trova anche nel src / com / Reiman / PrintItemRenderer.mxml file nel pacchetto di download per questo tutorial:
Passaggio 7: aggiungere il Actionscript di base FlexPrintJob Codice al file main.mxml
public function print (): void var printJob: FlexPrintJob = new FlexPrintJob (); printJob.printAsBitmap = falso; if (printJob.start ()) printJob.addObject (printGrid); PrintJob.send ();
Step 8: Set PrintJob Tipo di scala
Scegli il PrintJob il tipo di scala che si desidera utilizzare (da leggere in merito FlexPrintJob tipi di scala, controllare qui la pagina Flex LiveDocs) e, facoltativamente, impostare il printAsBitmap opzione. Volevo che i miei articoli venissero stampati come vettori, e in effetti questa impostazione era la chiave per la corretta stampa dei miei contenuti.
printJob.printAsBitmap = falso;
Passaggio 9: aggiungere codice all'esecuzione prima del PrintJob
Aggiungi eventuali avvisi o azioni che desideri eseguire sulla stampa (ad esempio un avviso per informare l'utente di attivare la stampa LANDSCAPE). Per esempio:
Alert.show ("Imposta le impostazioni della stampante su LANDSCAPE" + '\ n' + "altrimenti il tuo quiz NON verrà stampato correttamente!")
Se si desidera impostare un Mettere in guardia, deve essere eseguito prima la tua stampa inizia Si prega di guardare il codice fornito nel download associato con questo tutorial per il printAlert () nel main.mxml file.
Passaggio 10: impostare la stampa larghezza e altezza variabili
Imposta il tuo prima di stampare valori di larghezza e altezza per il PrintAdvancedDataGridlarghezza, e altezza della riga
var before_widdy = printColumn.width; var before_hiddy = printGrid.rowHeight; var widdy = printJob.pageWidth; var hiddy = printJob.pageHeight;
Passaggio 11: impostare i nuovi valori
Imposta i nuovi valori per il altezza, larghezza, e altezza della riga uguagliare il FlexPrintJob valori
Passaggio 12: aggiungere il codice di più pagine a FlexPrintJob
Aggiungi il tuo codice per accogliere l'aggiunta di più pagine al PrintJob. Secondo Flex LiveDocs, questo pagina successiva() il controllo dovrebbe garantire che i tuoi contenuti vengano stampati correttamente indipendentemente dal tuo AdvancedDataGrid altezza, anche se ho trovato che dopo un'altezza di circa 7500, la stampa non riesce a completare correttamente.
while (true) printGrid.nextPage (); if (! printGrid.validNextPage) printJob.addObject (printGrid); rompere;
Passaggio 13: opzionale Regolare il PrintGrid Altezza
Ho scoperto che ho ottenuto un minor numero di errori di stampa quando ho aggiunto questo al codice del passaggio 12:
Quindi ora il mio codice totale per il passaggio 12 si presenta così:
while (true) printGrid.nextPage (); if (! printGrid.validNextPage) printGrid.height = printGrid.measuredHeight; printGrid.verticalScrollPolicy = "off"; printJob.addObject (PrintGrid); rompere;
Questo sembra avere a che fare con il problema o il bug di Flex 3 relativo alla stampa di datagrids con una grande altezza, che è un vero problema per la stampa di file SWF o immagini multiple, perché l'altezza del datagrid deve in realtà riflettere l'altezza totale delle immagini o dei file SWF in fase di stampa!
Passaggio 14: aggiungi il codice per aggiungere altro al tuo PrintJob
Chiudi il tuo PrintJob, ed eseguire eventuali funzioni aggiuntive come ad esempio Mettere in guardia, e resettare il PrintGrid e printColumn riporta di nuovo a ciò che erano prima della stampa. Se si utilizza uno stato di visualizzazione per la stampa, in cui l'utente ha probabilmente a Centro Stampa tipo di interfaccia in cui possono vedere ciò che stanno per stampare, questo sarebbe utile. Se si sceglie di aggiungere il PrintAdvancedDataGrid allo stage tramite actionscript, quindi questo non sarebbe necessario, e in questo passo si dovrebbe invece rimuovere il PrintAdvancedDataGrid dal palco.
Passaggio 16: aggiungi un altro PrintAdvancedDataGrid se il contenuto supera 7500 altezza
Passaggio 17: Duplica il tuo dataProvider e resultHandler
La mia chiamata dati sembrava in origine:
Tutto quello che dovevo fare era aggiungere un gestore di risultati aggiuntivo, in modo che i dati per il secondo PrintAdvancedDatagrid sarebbe separato:
Poi ho aggiunto un nuovo gestore di risultati:
funzione privata httpResult_handler2 (evt: ResultEvent): void if (evt.result.lessons.row) var resultAC: ArrayCollection = evt.result.lessons.row as ArrayCollection; per (var i: int = 0; i
Questo nuovo dataProvider per il secondo PrintAdvancedDatagrid è ambientato nel mio stripQuiz2 () funzione di filtro.
Passaggio 18: Aggiungi CollectionView Variabili e aggiuntive dataProvider
Nel mio caso, avevo bisogno di aggiungere 3 nuovi ListCollectionViews, e 1 altro dataProvider:
[Bindable] private var removeQuiz: ListCollectionView = new ListCollectionView (); [Bindable] private var removeQuiz2: ListCollectionView = new ListCollectionView (); [Bindable] private var itemsQuiz: ListCollectionView = new ListCollectionView (); [Associabile] lezioni private varDataProvider2: ArrayCollection = new ArrayCollection ();
Step 19: Aggiungi filterFunction funzioni
Per i due datagrids da cui desideravo stampare, avevo bisogno di filtri che svolgessero le seguenti funzioni:
Elimina alcuni tipi di attività dalla mia lista di stampa, poiché alcuni non erano necessari
Troncare i dati in 12 voci, poiché dopo numerosi test ho scoperto che questo era il limite per stampare correttamente file SWF a pagina intera dal datagrid
Rimuovere le prime 12 voci dal ListCollectionView per il 2 ° PrintAdvancedDatagrid
Ciò ha portato alla creazione delle seguenti funzioni:
Per una migliore visione del codice completo, scaricare i file sorgente associati a questo tutorial e dare un'occhiata al main.mxml file.
Conclusione
Questa potrebbe non essere la soluzione più elegante per la stampa di massa di file SWF di Flex, ma è una soluzione che ho trovato affidabile, con risultati di alta qualità. La stampa in Flex può essere un vero orso, ma ciò non significa che dovresti trascurare le opzioni a tua disposizione, in particolare attraverso l'uso di PrintDatagrid e PrintAdvancedDatagrid. Grazie mille per aver letto il mio tutorial e non vedo l'ora di ricevere eventuali domande e commenti.
Share
Accentsconagua
