Diese Fallstudie demonstriert die Verwendung PrintAdvancedDataGrid und eine Gewohnheit itemRenderer Um mehrere Seiten mit Daten und Grafiken zu drucken, verwenden Sie die SWFloader Komponente.
Endergebnisvorschau
Lassen Sie uns einen Blick auf das Endergebnis werfen, auf das wir hinarbeiten werden. Nachfolgend finden Sie eine Übersicht über ein 12-seitiges PDF-Dokument, das mit einer Flex-Anwendung nach den in diesem Artikel beschriebenen Verfahren gedruckt wurde:
In diesem Tutorial demonstriert:
Verwenden der FlexPrintJob-Klasse.
Verwenden PrintAdvancedDataGrid.
Benutzerdefiniert erstellen itemRenderer mit einer SWFLoader.
Kopf- und Fußzeile drucken.
Filtern a collectionView.
Drucken a DataGrid mit einer Höhe von mehr als 7500.
Einige Schwierigkeiten bezüglich des Flex-Druckens:
Ihr Inhalt oder DataGrid Zeilen müssen alle auf der Bühne sichtbar sein, oder sie werden nicht gedruckt.
Das Hinzufügen von manuellen Seitenumbrüchen ist schwierig und wird durch das Festlegen Ihres erreicht Zeilenhöhe mit dem übereinstimmen, was auf jeder gedruckten Seite angezeigt werden soll.
Flex-Druck geht drunter und drüber hinaus PrintAdvancedDataGrid Die Inhaltshöhe ist größer als ungefähr 7500 Pixel, was eine Problemumgehung von mehreren erforderlich macht PrintAdvancedDataGrids.
Schritt 1: Importieren Sie die Druckklassen
Beginnen Sie mit dem Importieren der erforderlichen Druckklassen sowie Ihres Druckrenderers in Ihr Flex-Projekt:
Schritt 2: Erstellen Sie eine Ansicht für PrintAdvancedDataGrid und itemRenderer
Erstellen Sie einen Ansichtsstatus für den Massendruck. In meinem Fall habe ich einen Status namens printState erstellt.
* Alternativ können Sie eine Instanz von Ihrem erstellen PrintAdvancedDataGrid und itemRenderer und fügen sie über ActionScript der Bühne hinzu. Für ein Bulk-Printing-Projekt war es jedoch zu schwierig, damit zu arbeiten. Als ich versuchte, XML-basierte SWF-Dateien zu drucken, musste ich sicherstellen, dass meine SWF-Dateien vorhanden waren wird vor dem Drucken korrekt angezeigt.
Schritt 3: Fügen Sie Ihre hinzu PrintAdvancedDataGrid
Wenn Sie eine Gesamtdruckfläche von mehr als 7500 in der Höhe benötigen, benötigen Sie eine andere PrintAdvancedDataGrid für jeden Bereich
Schritt 4: Stellen Sie Ihr ein PrintAdvancedDataGrid Optionen
Ich fand es wichtig, die Option festzulegen
sizetoPage = "true"
Auf der PrintDataGrid-Steuerungsseite der Adobe Flex 3 LiveDocs wird durch die sizeToPage-Eigenschaft sichergestellt, dass das PrintAdvancedDataGrid-Steuerelement alle teilweise sichtbaren oder leeren Zeilen entfernt und die Größe ändert, sodass nur vollständige Zeilen in der aktuellen Ansicht angezeigt werden.
Schritt 5: Fügen Sie Ihre hinzu itemRenderer
Fügen Sie einen itemRenderer zu Ihrem hinzu AdvancedDataGridColumn.
Schritt 6: Erstellen Sie die itemRenderer Komponente
In meinem Fall wollte ich mit dem itemRenderer:
füge hinzu ein SWFLoader
Fügen Sie einen Header mit dem Seitentitel hinzu
Füge eine Seitenfußzeile mit meiner URL hinzu
Fügen Sie Abstand zum oberen, unteren und seitlichen Bereich hinzu, um einen einwandfreien Druck zu gewährleisten
Da meine URL besser als vertikaler Text funktionierte, war es für mich viel besser, anstelle eines Textfelds eine SWF-Datei für diesen Text zu verwenden. Sie können kreativ sein mit Ihrem itemRenderer, Hinzufügen von Datenelementen aus Ihrer XML- oder Datenquelle sowie Logos, URLs usw. Hier sind die Anzeigeelemente aus meinem Code für die itemRenderer Komponente, die auch in der gefunden wird src / com / reiman / PrintItemRenderer.mxml Datei im Downloadpaket für dieses Tutorial:
Schritt 7: Fügen Sie das Basisaktionsskript hinzu FlexPrintJob Code in Ihre main.mxml-Datei
öffentliche Funktion print (): void var printJob: FlexPrintJob = new FlexPrintJob (); printJob.printAsBitmap = false; if (printJob.start ()) printJob.addObject (printGrid); printJob.send ();
Schritt 8: Set printJob Skalentyp
Wählen Sie das printJob Skalentyp, den Sie verwenden möchten (zum Lesen von FlexPrintJob Skalierungstypen, überprüfen Sie die Flex LiveDocs-Seite hier) und legen Sie optional das fest printasBitmap Möglichkeit. Ich wollte, dass meine Artikel als Vektor gedruckt werden, und tatsächlich war diese Einstellung der Schlüssel zum korrekten Drucken meines Inhalts.
printJob.printAsBitmap = false;
Schritt 9: Fügen Sie vor dem Ausführen Code hinzu printJob
Fügen Sie alle Warnmeldungen oder Aktionen hinzu, die Sie beim Drucken ausführen möchten (z. B. eine Warnmeldung, um den Benutzer anzuweisen, den LANDSCAPE-Druck zu aktivieren). Zum Beispiel:
Alert.show ("Bitte setzen Sie Ihre Druckereinstellungen auf LANDSCAPE" + '\ n' + "oder Ihr Quiz wird NICHT korrekt gedruckt!")
Wenn Sie ein einstellen möchten Warnen, es muss ausführen Vor Ihr Druckvorgang beginnt. Schauen Sie sich den Code an, der im Download für dieses Tutorial enthalten ist printAlert () in dem main.mxml Datei.
Schritt 10: Stellen Sie den Druck ein Breite und Höhe Variablen
Setze deine vor dem Drucken Breiten- und Höhenwerte für die PrintAdvancedDataGridBreite, und Zeilenhöhe
var before_widdy = printColumn.width; var before_hiddy = printGrid.rowHeight; var widdy = printJob.pageWidth; var hiddy = printJob.pageHeight;
Schritt 11: Legen Sie die neuen Werte fest
Stellen Sie die neuen Werte für die ein Höhe, Breite, und Zeilenhöhe gleich der FlexPrintJob Werte
Schritt 12: Fügen Sie den Code für mehrere Seiten hinzu FlexPrintJob
Fügen Sie Ihren Code hinzu, um das Hinzufügen mehrerer Seiten zu ermöglichen printJob. Laut den Flex LiveDocs ist dies der Fall Nächste Seite() check soll sicherstellen, dass Ihre Inhalte unabhängig von Ihrem Inhalt korrekt gedruckt werden AdvancedDataGrid Höhe, obwohl ich festgestellt habe, dass nach einer Höhe von ungefähr 7500 der Druckvorgang nicht korrekt abgeschlossen werden kann.
while (true) printGrid.nextPage (); if (! printGrid.validNextPage) printJob.addObject (printGrid); brechen;
Schritt 13: Optionales Einstellen der printGrid Höhe
Ich habe festgestellt, dass ich weniger Druckfehler erhielt, als ich dies dem Code aus Schritt 12 hinzufügte:
while (true) printGrid.nextPage (); if (! printGrid.validNextPage) printGrid.height = printGrid.measuredHeight; printGrid.verticalScrollPolicy = "off"; printJob.addObject (printGrid); brechen;
Dies scheint mit dem Problem oder dem Fehler von Flex 3 in Bezug auf das Drucken von Datagrids mit einer großen Höhe zu tun zu haben. Dies ist ein echtes Problem für das Drucken von Objekten wie mehreren SWFs oder Bildern, da Ihre Datagridhöhe tatsächlich die Gesamthöhe der Bilder oder SWFs widerspiegeln muss gedruckt werden!
Schritt 14: Fügen Sie den Code hinzu, um alles andere zu Ihrem hinzuzufügen printJob
Schliesse dein printJob, und führen Sie zusätzliche Funktionen aus, wie z Warnen, und das zurücksetzen printGrid und printColumn Werte wieder so, wie sie vor dem Drucken waren. Wenn Sie zum Drucken einen Ansichtsstatus verwenden, in dem der Benutzer möglicherweise über eine Print Center Typschnittstelle, wo sie sehen können, was sie gerade drucken wollen, wäre dies nützlich. Wenn Sie sich für das Hinzufügen entscheiden PrintAdvancedDataGrid auf die Bühne über ActionScript, dann wäre dies unnötig, und in diesem Schritt würden Sie stattdessen das entfernen PrintAdvancedDataGrid von der Bühne.
Schritt 16: Fügen Sie einen anderen hinzu PrintAdvancedDataGrid Wenn Ihr Inhalt die Höhe von 7500 überschreitet
Schritt 17: Duplizieren Sie Ihre Datenanbieter und resultHandler
Mein Datenanruf sah ursprünglich so aus:
Alles was ich tun musste, war, einen zusätzlichen Ergebnis-Handler hinzuzufügen, so dass die Daten für den zweiten PrintAdvancedDatagrid wäre getrennt:
Dann habe ich einen neuen Ergebnis-Handler hinzugefügt:
private Funktion httpResult_handler2 (evt: ResultEvent): void if (evt.result.lessons.row) var resultAC: ArrayCollection = evt.result.lessons.row als ArrayCollection; für (var i: int = 0; i
Das neue Datenanbieter für den zweiten PrintAdvancedDatagrid ist in meinem gesetzt stripQuiz2 () Filterfunktion.
Schritt 18: Hinzufügen collectionView Variablen und zusätzliche Datenanbieter
In meinem Fall musste ich 3 neue hinzufügen ListCollectionViews und 1 mehr Datenanbieter:
[Bindbar] private var removeQuiz: ListCollectionView = new ListCollectionView (); [Bindbar] private var removeQuiz2: ListCollectionView = new ListCollectionView (); [Bindbar] private var itemsQuiz: ListCollectionView = new ListCollectionView (); [Bindbar] private var lessonsDataProvider2: ArrayCollection = new ArrayCollection ();
Schritt 19: Hinzufügen filterFunction Funktionen
Für die beiden Datagrids, von denen ich drucken wollte, brauchte ich Filter, die die folgenden Funktionen ausführen:
Entfernen Sie bestimmte Aktivitätsarten aus meiner Druckliste, da einige nicht erforderlich waren
Kürzen Sie die Daten bei 12 Einträgen, da ich nach ausführlichen Tests festgestellt habe, dass dies die Grenze für das erfolgreiche Drucken ganzseitiger SWF-Dateien aus dem Datagrid war
Entfernen Sie die ersten 12 Einträge aus der ListCollectionView für den 2. PrintAdvancedDatagrid
Dies führte zur Erstellung der folgenden Funktionen:
Laden Sie die mit diesem Lernprogramm verknüpften Quelldateien herunter und werfen Sie einen Blick auf die main.mxml Datei.
Fazit
Dies ist möglicherweise nicht die eleganteste Lösung für das Drucken großer SWF-Dateien von Flex, aber es ist eine Lösung, die meines Erachtens zuverlässig funktioniert und qualitativ hochwertige Ergebnisse liefert. In Flex zu drucken kann ein echter Bär sein, aber das bedeutet nicht, dass Sie die Optionen, die Ihnen zur Verfügung stehen, insbesondere durch die Verwendung von PrintDatagrid und PrintAdvancedDatagrid. Vielen Dank, dass Sie mein Tutorial gelesen haben, und ich freue mich auf Ihre Fragen und Kommentare.
Share
Accentsconagua
