Informe e impresión en Flex; Tutorial.

por: Mario Santos

Muchas veces tenemos que imprimir algo en nuestro proyecto flex, pero no sabía cómo hacerlo ... ahora, y si hemos tenido diferentes plantillas para imprimir lo que queremos? no es fácil? Es en este tutorial voy a explicar un proceso muy simple de que nuestros informes casi listo para recibir datos que se va a imprimir ... vamos a acciones, crear un nuevo proyecto con el nombre testRelatorio. y, a continuación, crear una carpeta raíz (por lo general, src) que el proyecto denominado de impresión e imprimir dentro de esa carpeta crear una nueva carpeta de activos ...


En mi ejemplo, utilizar el logotipo del blog, si quieren seguir el tutorial, copie la siguiente imagen y colem la siguiente imagen en esta carpeta activos:

Logo

Pronto

Estamos ahora se establece un nuevo componente. Menús: Archivo-> Nueva-> Componente MXML y elegir las siguientes definiciones:

Novo MXML Component

Nueva componente MXML

Haga clic en Finalizar

Tenemos nuestra plantilla, plantilla que ponemos todo el código a continuación:

Descarga: template.mxml
  1. <? Xml " 1.0 " version = "1.0" " utf-8 " ?> encoding = "UTF-8">
  2. <Mx: Lienzo   " http://www.adobe.com/2006/mxml " xmlns: mx = "http://www.adobe.com/2006/mxml" " 595 " width = "595" " 842 " height = "842" " #FDF8F8 " backgroundColor = "# FDF8F8" " 1 " > backgroundAlpha = "1">
  3.     <Mx: Lienzo   " 33 " x = "33" " 34 " y = "34" " 526 " width = "526" " 775 " height = "775" " safeArea " > id = "safeArea">
  4.         <Mx: Texto   " 10 " y = "10" " Header " text = "Encabezado" " 288 " width = "288" " 117 " height = "117" " DOC_HEADER_TEXTO " id = "DOC_HEADER_TEXTO" " #030303 " color = "# 030303" " 10 " derecho = "10" " Verdana " fontFamily = "Verdana" " 13 " Tamaño de fuente = "13" " italic " FontStyle = "cursiva" " right " /> textAlign = "derecha" />
  5.         <Mx: Lienzo   " 0 " x = "0" " 192 " y = "192" " 526 " width = "526" " 583 " height = "583" " DOC_CONTEUDO " > id = "DOC_CONTEUDO">
  6.         </ Mx: Lienzo>
  7.     </ Mx: Lienzo>
  8.     <Mx: Imagen   " 33 " x = "33" " 34 " y = "34" " @Embed(source='assets/logo.png') " source = "@ Incrustar (fuente = 'activos / logo.png')" " DOC_LOGO " /> id = "DOC_LOGO" />
  9.     <Mx: Etiqueta   " 33 " x = "33" " 185 " y = "185" " Titulo " text = "Título" " 526 " width = "526" " 27 " height = "27" " bold " fontWeight = "negrita" " normal " FontStyle = "normal" " center " textAlign = "centro" " 13 " Tamaño de fuente = "13" " #CD3E06 " color = "# CD3E06" " DOC_TITULO " /> id = "DOC_TITULO" />
  10.     <Mx: Etiqueta   " 805 " y = "805" " Rodape " text = "pie de página" " 526 " width = "526" " center " textAlign = "centro" " 0 " horizontalCenter = "0" " DOC_RODAPE " id = "DOC_RODAPE" " #919394 " /> color = "# 919394" />
  11. </ Mx: Lienzo>
Descarga: template.mxml

Y listo, tenemos nuestra plantilla preparada, con zonas de logo, cabecera, título, contenido y pies de página, debe ser como la imagen:

Parte 2 - template.mxml

Parte 2 - template.mxml

Volver a nuestra aplicación creada en el iniciador del proyecto (testRelatorio.mxml) y pegar este código:

Descarga: testRelatorio.mxml
  1. <? Xml " 1.0 " version = "1.0" " utf-8 " ?> encoding = "UTF-8">
  2. <Mx: Aplicación   " http://www.adobe.com/2006/mxml " xmlns: mx = "http://www.adobe.com/2006/mxml" " absolute " layout = "absoluta" " [1.0, 1.0] " backgroundGradientAlphas = [1,0, 1,0] " " [#FFFDFD, #FFFDFD] " > backgroundGradientColors = "[FFFDFD #, # FFFDFD]">
  3. <Mx: Script>
  4.     <! [CDATA [
  5. mx.collections.ArrayCollection importación;
  6. [Bindable]
  7. var datos privados: ArrayCollection = new ArrayCollection ([(título: "el Libro", el bacalao: "# 5345", el precio: "50 €"), (título: "Cader B", el bacalao: "# 553", el precio: "12 €"), (título: "VERDE FLEX," bacalao "# 5885", el precio: "30 € "}]);
  8. ]]>
  9. </ Mx: Script>
  10.     <Mx: DataGrid   " {dados} " DataProvider = "(datos)" " 350 " width = "350" " 0 " horizontalCenter = "0" " 0 " verticalCenter = "0" " minhaDataGrid " > id = "minhaDataGrid">
  11.         <Mx: Columns>
  12.             <Mx: DataGridColumn   " Cod. " headerText = "Bacalao". " cod " de datos = "bacalao" " 30 " /> width = "30" />
  13.             <Mx: DataGridColumn   " Artigo 1 " headerText = "Artículo 1" " 270 " width = "270" " titulo " /> de datos = "title" />
  14.             <Mx: DataGridColumn   " Preco " headerText = "Precio" " preco " de datos = "precio" " 50 " /> width = "50" />
  15.         </ Mx: columnas>
  16.     </ Mx: DataGrid>
  17.     <Mx: El botón   " Imprime " label = "Imprimir" " 350 " width = "350" " 0 " horizontalCenter = "0" " 90 " /> verticalCenter = "90" />
  18.    
  19. </ Mx: Aplicación>
Descarga: testRelatorio.mxml

Deberíamos tener algo como:

Parte 3 - testeRelatorio.mxml

Parte 3 - testeRelatorio.mxml

Ahora sólo falta la luz de nuestra impresión.

ponemos en nuestra testeRelatorio.mxml después de nuestra arrayCollection:

  1. importación template ; imprimir. plantilla;
  2.     importación   printing . FlexPrintJob ; mx. impresión. FlexPrintJob;
  3.    
  4.     ( source = " print/assets/logo.png " )] [Incrustar (fuente = "print / activos / logo.png")]
  5.     privado   var Class logo: Clase
  6.    
  7.     privado   función : void print (): void (
  8.        
  9.         var   template = new Modelo: plantilla = new plantilla;
  10.         visible = false ; modelo. Visible = false;
  11.         modelo ) ; addChild (modelo);
  12.         DOC_HEADER_TEXTO . text = " Exmo. Sr. Antunes Costa \n\n Relatorio resumido das compras por pagar! " ; modelo. DOC_HEADER_TEXTO. text = "Sir Sr. Costa Antunes \ n \ n informe de síntesis de las compras a pagar!";
  13.         DOC_LOGO . source = logotipo ; //convem ser uma imagem já embebida, podemos usar caminho, mas a class é mais rapida a ser carregada e impede que haja falta de foto na impressão. modelo. DOC_LOGO. source = logo; / / debe ser una imagen ya empapado, podemos utilizar camino, pero la clase es a cargar con mayor rapidez y evitar que había una falta de impresión fotográfica.
  14.         DOC_TITULO . text = " RELATORIO FALTAS! " modelo. DOC_TITULO. text = "INFORME desaparecidos!"
  15.         DOC_RODAPE . text = " Listagem de falhas de pagamento. Para mais informações contacte +225 554 25485 " ; modelo. DOC_RODAPE. text = "Lista de los fracasos de pago. Para obtener más información, póngase en contacto +225 554 25485";
  16.         DOC_CONTEUDO . addChild ( minhaDataGrid ) ; //adicionamos a datagrid como child do nosso conteudo modelo. DOC_CONTEUDO. addChild (minhaDataGrid); / / añadir el DataGrid como hijo de nuestro contenido
  17.         / / Agregar el modelo para permanecer en el escenario, invisible.
  18.        
  19.         / / Declarar el trabajo de impresión
  20.         var   FlexPrintJob = new PrintJob: FlexPrintJob = new ; FlexPrintJob ();
  21.         / / Iniciar el trabajo de impresión
  22.         . start ()) if (printJob. inicio ())   (
  23.            
  24.         / / Añadir a nuestra página para imprimir
  25.         addObject ( modelo ) ; PrintJob. addObject (modelo);
  26.         / / Enviar el trabajo a la impresora
  27.         send () ; PrintJob. send ();
  28.         / / Eliminar nuestro modelo de la etapa
  29.         modelo ) ; removeChild (modelo);
  30.  
  31.             )
  32.        
  33.         )

y poner en nuestro botón para imprimir, dentro de su etiqueta, haga clic en el = "print ()";

  1. <Mx: El botón " Imprime " label = "Imprimir" " 350 " width = "350" " 0 " horizontalCenter = "0" " 90 " verticalCenter = "90" " imprime() " /> haga clic = "print ()" />

Allí, su solicitud de guardar y ejecutar el ejemplo, haga clic en imprimir y ver lo fácil que es :)

Si quieren pueden crear otras plantillas, una variedad de formas y ejemplos .. y que debe importar y lo añade a la etapa cuando no invisible a estropear su aplicación ... en este caso el DataGrid desaparece porque me cambió mi niño ... añadiendo a la plantilla. Si desea siempre visible, la creación de una nueva igualdad en DataGrid template.mxml con el nombre DOC_DATAGRID y cuando se agrega la impresión de la misma dataProvider:

modelo.DOC_DATAGRID.dataProvider = datos;

¡y voilà!

Sugerencia. Si desea imprimir en PDF, o utilizar el AlivePDF o utilizar un controlador de adobe para añadir una impresora a pdf del que envía el trabajo de impresión para el conductor que escribe en formato pdf.

Pueden ver el ejemplo en línea con el código fuente disponible aquí

Espero que sea útil.

Abrazar.

la versión en formato pdf disponible temporalmente.
Dejar un comentario o una licencia Trackback

4 Comentarios

  1. Silva Desarrolladores
    7 de agosto de 2008 a 6:34 pm | Permalink

    Felicidades por el post, muy informativo, objetivo y esclarecedor.

    Recuerdos,

    Silva Desarrolladores

  2. Mario Santos
    8 de agosto de 2008 a 7:47 am | Permalink

    Gracias! :)

    Abrazar.

  3. Víctor García claves
    8 de septiembre de 2008 a 1:49 pm | Permalink

    Mario muy bueno! Abrazar.

  4. Pedro Neves
    8 de octubre de 2008 a 7:55 pm | Permalink

    Muy buena Mario.
    Ayudó mucho!

Déjanos tu comentario

Su dirección de correo electrónico nunca es publicado o compartido. Los campos obligatorios están marcados con un *