Această casestudy demonstrează modul de utilizare PrintAdvancedDataGrid și un obicei itemRenderer pentru a imprima mai multe pagini de date și grafice, utilizând SWFloader component.
Rezultatul final al rezultatelor
Să aruncăm o privire asupra rezultatului final la care vom lucra - mai jos este o prezentare generală a unui PDF format de 12 pagini tipărit dintr-o aplicație Flex folosind tehnicile din acest articol:
Demonstrat în acest tutorial:
Folosind clasa FlexPrintJob.
Utilizarea PrintAdvancedDataGrid.
Crearea unui personalizat itemRenderer cu SWFLoader.
Imprimarea unui antet și a unui subsol.
Filtrarea a collectionView.
Imprimarea a Grila de date cu o înălțime care depășește 7500.
Unele dificultăți în ceea ce privește Flex Printing:
Conținutul dvs. sau Grila de date rândurile trebuie să fie vizibile pe scenă sau nu vor fi imprimate.
Adăugarea de rupturi de pagină manuală este dificilă și este realizată prin setarea înălțimea rândului pentru a se potrivi cu ceea ce doriți să fie afișat pe fiecare pagină imprimată.
Imprimarea flexibila se intampla in cazul in care totalul tau PrintAdvancedDataGrid înălțimea de conținut este mai mare de aproximativ 7500 pixeli, necesitând o soluție de multiple PrintAdvancedDataGrids.
Pasul 1: Importați clasele de imprimare
Începeți prin importarea clasei de imprimare necesare, precum și a aplicației dvs. de imprimare în proiectul dvs. Flex:
Pasul 2: Creați o vizualizare pentru PrintAdvancedDataGrid și itemRenderer
Creați o stare de vizualizare pentru imprimarea în bloc. În cazul meu, am creat un stat numit printState.
* Alternativ, puteți crea o instanță a dvs. PrintAdvancedDataGrid și itemRenderer și le adăugați la scenă prin acțiuni, dar pentru un proiect de tipărit în vrac am considerat că acest lucru este prea dificil de a lucra și, pe măsură ce încercam să tipăresc SWF care sunt bazate pe XML, trebuia să mă asigur că SWF- afișarea corectă înainte de imprimare.
Pasul 3: Adăugați-vă PrintAdvancedDataGrid
Dacă aveți nevoie de o suprafață totală de imprimare mai mare de 7500 înălțime, veți avea nevoie de un altul PrintAdvancedDataGrid pentru fiecare zonă
Pasul 4: Setați-vă PrintAdvancedDataGrid Opțiuni
Un lucru pe care l-am găsit a fost important de a stabili opțiunea
sizetoPage = "true"
Conform paginii PrintDataGrid Control de la Adobe Flex 3 LiveDocs, proprietatea sizeToPage se asigură că controlul PrintAdvancedDataGrid elimină toate rândurile parțial vizibile sau goale și să se redimensioneze pentru a include numai rânduri complete în vizualizarea curentă.
Pasul 5: Adăugați-vă itemRenderer
Adăugați un elementRenderer către dvs. AdvancedDataGridColumn.
Pasul 6: Creați itemRenderer component
În cazul meu, am vrut să realizez câteva lucruri cu itemRenderer:
adauga o SWFLoader
adăugați un antet cu titlul paginii
adăugați un subsol lateral împreună cu adresa mea URL
adăugați spații la partea superioară, inferioară și laterală pentru a imprima corespunzător
Deoarece adresa mea URL a funcționat mai bine ca text vertical, am găsit mult mai bine să folosesc un SWF pentru acest text în loc de o casetă de text. Puteți fi creativ cu dvs. itemRenderer, adăugând elemente de date din XML sau sursă de date, precum și logo-uri, adrese URL etc. Aici sunt elementele de afișare din interiorul codului meu pentru itemRenderer componentă, care se regăsește și în src / com / Reiman / PrintItemRenderer.mxml fișier în pachetul de descărcare pentru acest tutorial:
Pasul 7: Adăugați ActScriptul de bază FlexPrintJob Codul pentru fișierul principal.mxml
funcția publică (): void var printJob: FlexPrintJob = nou FlexPrintJob (); printJob.printAsBitmap = false; dacă (printJob.start ()) printJob.addObject (printGrid); printJob.send ();
Pasul 8: Setați printJob Tip de scalare
Alege printJob pe care doriți să îl utilizați (pentru a citi FlexPrintJob , verificați pagina Flex LiveDocs aici) și setați opțional printasBitmap opțiune. Am dorit ca articolele mele să fie tipărite ca vector și, de fapt, această setare a fost cheia pentru imprimarea corectă a conținutului meu.
printJob.printAsBitmap = false;
Pasul 9: Adăugați codul pentru a executa înainte de printJob
Adăugați alertele sau acțiunile pe care doriți să le efectuați la imprimare (cum ar fi o alertă pentru a le spune utilizatorului să activeze imprimarea LANDSCAPE). De exemplu:
Alert.show ("Vă rugăm să setați setările imprimantei la LANDSCAPE" + "\ n '+" sau testul NU va fi imprimat corect! ")
Dacă doriți să setați un Alerta, trebuie să execute inainte de imprimarea începe. Vă rugăm să consultați codul furnizat în descărcare asocidat cu acest tutorial pentru printAlert () în main.mxml fişier.
Pasul 10: Setați imprimarea lăţime și înălţime variabile
Setați-vă înainte de imprimare lățimea și înălțimea pentru PrintAdvancedDataGridlăţime, și înălțimea rândului
var înainte_widdy = printColumn.width; var înainte_hiddy = printGrid.rowHeight; var widdy = printJob.pageWidth; var hiddy = printJob.pageHeight;
Pasul 11: Setați noile valori
Setați noile valori pentru înălţime, lăţime, și înălțimea rândului pentru a egala FlexPrintJob valorile
Pasul 12: Adăugați codul de pagini multiple pentru a FlexPrintJob
Adăugați codul pentru a adăuga adăugarea mai multor pagini la printJob. În conformitate cu Flex LiveDocs, acest lucru pagina următoare() verificarea trebuie să vă asigure că conținutul dvs. va fi imprimat corect, indiferent de dvs. AdvancedDataGrid înălțime, deși am constatat că, după o înălțime de aproximativ 7500, imprimarea nu reușește să se încheie corect.
în timp ce (true) printGrid.nextPage (); dacă (! printGrid.validNextPage) printJob.addObject (printGrid); pauză;
Pasul 13: Opțional ajustați printGrid Înălţime
Am constatat că am primit mai puține erori de imprimare când am adăugat acest lucru la codul de la pasul 12:
Deci, acum codul meu total pentru Pasul 12 arată astfel:
în timp ce (true) printGrid.nextPage (); dacă (! printGrid.validNextPage) printGrid.height = printGrid.measuredHeight; printGrid.verticalScrollPolicy = "dezactivat"; printJob.addObject (printGrid); pauză;
Acest lucru pare să aibă de-a face cu problema sau bug-ul Flex 3 în ceea ce privește tipărirea datagridurilor cu o înălțime mare, ceea ce reprezintă o problemă reală pentru imprimarea unor lucruri cum ar fi mai multe SWF-uri sau imagini, deoarece înălțimea datagrid trebuie să reflecte înălțimea totală a imaginilor sau SWF-urilor fiind imprimate!
Pasul 14: Adăugați codul pentru a adăuga orice altceva printJob
Inchide-ti printJob, și să efectueze orice alte funcții suplimentare, cum ar fi Alerta, și resetarea printGrid și printColumn valorile înapoi la ceea ce au fost înainte de imprimare. Dacă utilizați o stare de vizualizare pentru imprimare, unde utilizatorul are, probabil, a Centrul de imprimare tip de interfață în cazul în care acestea pot vedea ceea ce sunt pe cale de a imprima, acest lucru ar fi util. Dacă alegeți să adăugați PrintAdvancedDataGrid la scena prin acțiuni, atunci acest lucru ar fi inutil, iar în acest pas veți elimina în schimb PrintAdvancedDataGrid din scenă.
Pasul 17: Duplicați-vă dataProvider și resultHandler
Apelul meu de date a arătat astfel:
Tot ce trebuia să fac este să adaug un handler de rezultat suplimentar, astfel încât datele pentru al doilea PrintAdvancedDatagrid ar fi separat:
Apoi am adăugat un nou handler pentru rezultate:
funcția privată httpResult_handler2 (evt: ResultEvent): void if (evt.result.lessons.row) var rezultatAC: ArrayCollection = evt.result.lessons.row ca ArrayCollection; pentru (var i: int = 0; i
Acest nou dataProvider pentru al doilea PrintAdvancedDatagrid este setat în meu stripQuiz2 () filtru.
Pasul 18: Adăugați collectionView Variabile și suplimentare dataProvider
În cazul meu, trebuia să adaug 3 noi ListCollectionViews și încă 1 dataProvider:
[Bindable] priv: var removeQuiz: ListCollectionView = new ListCollectionView (); [Bindable] priv: var removeQuiz2: ListCollectionView = nou ListCollectionView (); [Bindable] obiecte private varQuiz: ListCollectionView = new ListCollectionView (); [Bindable] lecții private varDataProvider2: ArrayCollection = new ArrayCollection ();
Pasul 19: Adăugați filterFunction funcţii
Pentru cele două agende de date pe care am dorit să le tipăresc, aveam nevoie de filtre care să îndeplinească următoarele funcții:
Îndepărtați anumite tipuri de activități din lista mea de imprimare, deoarece unele nu erau necesare
Trunchiați datele la 12 intrări, deoarece după teste ample am constatat că aceasta a fost limita pentru imprimarea cu succes a SWF-urilor de pagină complete din datagrid
Eliminați primele 12 intrări din ListCollectionView pentru al doilea PrintAdvancedDatagrid
Pentru o privire mai bună la codul complet, vă rugăm să descărcați fișierele sursă asociate acestui tutorial și să aruncați o privire la main.mxml fişier.
Concluzie
Este posibil ca aceasta să nu fie soluția cea mai elegantă pentru tipărirea în vrac a SWF-urilor de la Flex, dar este o soluție pe care am găsit-o în mod fiabil, cu ieșire de înaltă calitate. Imprimarea în Flex poate fi un adevărat urs, dar asta nu înseamnă că trebuie să treceți peste opțiunile care vă sunt disponibile, în special prin utilizarea PrintDatagrid și PrintAdvancedDatagrid. Mulțumesc foarte mult pentru că ați citit tutorialul meu și aștept cu nerăbdare orice întrebări și comentarii pe care le puteți avea.
Share
Accentsconagua
