domingo, 28 de septiembre de 2014

ReportViewer y Rdlc, ejemplo Factura- Eviar Imagen


El envió de imágenes a un reporte Local o remoto siempre es muy necesario, en muchas ocasiones se requieren para hacer un reporte personalizado utilizando el logo de la empresa, firma digital, etc. o simplemente para embellecer nuestros reportes “recordando que una imagen vale mal que mil palabras”

En este articulo aprovecharemos un proyecto anterior que ya tenemos creado y creo que la mayoría de ustedes ya analizo  y puso en practica los conceptos ahí mencionados para mostrar como enviar una imagen a un Local Report, si aun no tiene el proyecto anterior o tiene dudas sobre como crear un reporte local por favor antes de continuar sírvase a revisar el articulo abajo mencionado:
ReportViewer y Rdlc, ejemplo Factura (Base de datos)
Extenderemos el proyecto insertando un objeto Imagen al Report1.rdlc y enviándole un arreglo de Bytes desde el formulario principal dicho arreglo contendrá los bytes de archivo tipo *.png

Antes de comenzar a leer este articulo recuerde que: “El objetivo no es otro mas que el de orientar a los Parvulos .Net sobre como Utilizar el control Imagen de un Local Report, todo lo escrito en este articulo no es ensayado y no es revisado por nadie mas, por lo cual podría contener errores gramaticales y sintácticos, el articulo y sus conceptos no pretenden ser la verdad absoluta del tema, siéntase en confianza de dejar sus comentarios y opiniones en la sección de comentarios al final del mismo y si lo considera prudente envíeme un correo electrónico por medio del formulario de contacto y por ultimo si el articulo le es de utilidad por favor considere dejar un comentario de agradecimiento.

Requisitos: Visual Studio 2012, Framework 4.0

1. Para empezar, descargue el proyecto ofrecido en el articulo anterior, ábralo utilizando Vs2012, espere a que termine la conversión del código.

2. Abra el formulario principal llamado Form1
image

3. Cree el siguiente diseño utilizando un PictureBox y un Botón (recuerde que el objetivo del articulo es mostrar como se envía un objeto imagen a un Local Report así que ignore mi escaso sentido del diseño), nombre a los controles como pctboxLogo y btnSeleccionar respectivamente.
image

4. En las propiedades del objeto PictureBox, seleccione StretchImage para que la imagen que seleccione se autoajuste al tamaño de nuestro control.
image

5. Haga doble clic sobre el botón que acabamos de crear a fin de generar la estructura de código del evento Click, dentro coloque las siguientes líneas de código:

private void btnSeleccionar_Click(object sender, EventArgs e)
{
    //
    //Utilizaremos el la clase OpenFileDialog para seleccionar una imagen
    OpenFileDialog fileDialog = new OpenFileDialog();
    //
    //Definimos los filtros necesarios para evitar ver archivos que no corresponden a archivo de imagen
    fileDialog.Filter = "Archivo JPG (*.jpg)|*.jpg| Archivo PNG (*.png)|*.png| Archivo BMP (*.bmp)|*bmp";

    if (fileDialog.ShowDialog() == DialogResult.OK)
    {
        //
        //Cargamos nuestro control PictureBox con el archivo de imagen seleccionado
        pctboxLogo.Image = Image.FromFile(fileDialog.FileName);
    }

Probemos estas líneas de código:
image

Puesto que pudimos cargar una imagen a nuestro PictureBox el código anterior funciona. Continuemos…

Para poder enviar nuestro arreglo de Bytes al Local Report necesitamos crear una nueva propiedad que será la encargada de transportar los Bytes, como el Logo forma parte del Header de la factura, usaremos la clase EFactura, para esto.

6. Desde el “Explorador de Soluciones” haga doble clic sobre la clase EFactura y cree una nueva propiedad llamada Logo la cual será de tipo Bytes[] con acceso publico:

using System;using System.Collections.Generic;
namespace ReportViewerInvoiceReport_CSharp
{
    public class EFactura
    {
        public int Numero { get; set; }
        public string Nombre { get; set; }
        public string Rfc { get; set; }
        public string Direccion { get; set; }
        public decimal Subtotal { get; set; }
        public decimal Iva { get; set; }
        public decimal Total { get; set; }
        public DateTime FechaFacturacion { get; set; }
        //
        //Propiedad con acceso publico del tipo Byte, será el encargado de transportar los bytes de nuestro imagen
        public Byte[] Logo { get; set; }

        //Creamos una lista con una nueva Instancia de la clase Articulo
        //esta lista contendra el detalle de la factura
        public List<EArticulo> Detail = new List<EArticulo>();
    }
}

7. Ahora vayamos a configurar nuestro Local Report para recibir esta imagen como parte de los datos que debe de mostrar, para ello, desde el Explorador de Soluciones abra el reporte llamado Report1.rdlc haciendo doble clic sobre el:
image

Tendremos que modificar un poco nuestro  diseño a fin de darle espacio en el Header al control Imagen, que será el encargado de mostrar la imagen que fungirá como logo de la empresa.

8. Modifique el diseño arrastrando los controles hacia abajo hasta que considere prudente.
image

Antes de continuar con nuestro diseño tenemos que actualizar nuestro origen de datos a fin de tener acceso a la propiedad Logo de nuestra clase EFactura, pero antes de eso observe que la propiedad agregada pasos anteriores aun no esta visible y por lo tanto no esta disponible para ser utilizado en nuestro reporte:
image

image

y por mas que hagamos Clic derecho Actualizar no veremos jamás esta propiedad hasta que no hagamos una nueva compilación de nuestro proyecto, así que:

10. Diríjase a la barra de Menús –> Compilar –> Compilar Solución
image

11. Observe como después de la compilación en el cuadro de Origen de Datos podemos visualizar una nueva propiedad llamada Logo:
image

12. Diríjase al cuadro “Datos del informe”- > clic derecho sobre el origen “Encabezado” –> Actualizar y observe que nuestra propiedad se hace presente en este origen de datos.
image

Ahora que tenemos nuestra nueva propiedad como parte del origen de datos de nuestro informe podemos utilizarlo para asignárselo al objeto Imagen.

13. Desde el cuadro de herramientas ubique el control Imagen y arrástrelo al Header de nuestro local report.
image

14. Automáticamente veremos el cuadro de dialogo “Propiedades de la imagen”, ubique la opción “Seleccionar el origen de la imagen” y seleccione “Base de datos”, ubique la opción “Usar este campo:” y seleccione “=First(Fields!Logo.Value, "Encabezado")”, ubique la opción “Usar este tipo MIME:” y seleccione “image/png” (esta ultima opción lo dejo a su consideración no necesariamente tiene que ser este tipo de imagen)
image

15. Haga clic en “Aceptar” y observe como nuestro nuevo control fue agregado al Header de nuestro Local Report, juegue un poco con  el tamaño.
image

Para continuar vayamos a nuestro Form1 a terminar de configurar el envió del arreglo de bytes

16. En la parte superior de nuestra estructura de código, cree el siguiente método que nos ayudara a la transformación de nuestra imagen en un arreglo de bytes.

private byte[] GetBytes(Image imageIn)
{
    //
    //Usamos la clase MemoryStream para contener los bytes que compone la imagen
    MemoryStream ms = new MemoryStream();
    imageIn.Save(ms, ImageFormat.Png);
    //
    //Retornamos el arreglo de bytes
    return ms.ToArray();
}

17. Ubique el método InvoiceGenerate() y agregue las siguiente líneas de código:
//
// Usamos la Función GetBytes() para convertir la imagen cargada al PicureBox en un arreglo de Bytes para establecérselo a nuestra propiedad Logo_factura.Logo = GetBytes(pctboxLogo.Image);

Después de haber realizado todo lo anterior solo nos resta probar nuestra aplicación.

Ejecute la aplicación presionado la tecla “F5” o desde el menú presione el botón “Iniciar”
image

En el campo “Numero” ingrese cualquier valor del 1 al 5 y presione “Enter”
image

Haga Clic sobre el botón “…” para seleccionar una imagen (yo escogeré una imagen del tipo png)
image

Observe como nuestro PictureBox muestra la imagen seleccionada:
image

Presione el botón “Imprimir” y observe como nuestra imagen es mostrada en nuestro Local Report
image
image

Repita esta operación con tantas imágenes guste…

Por ultimo recuerde que el origen de la imagen podrías ser un arreglo de bytes almacenado en un campo de una base datos, el resultado siempre será el mismo ya que al Local Report no le interesa ni necesita saber el origen de la imagen siempre y cuando esta venga como un arreglo de Bytes

Escribir este articulo me llevo mas de 3 horas, dejar un comentario de agradecimiento le tomara 5 minutos.

Saludos desde Monterrey, Nuevo León México!

Ejemplo C#
Ejemplo Vb.Net


Nota: Al momento de migrar la aplicación de Vs2010 a Vs2012 recibí este mensaje de advertencia

Advertencia    1    El proyecto hace referencia a una versión anterior de SQL Server Compact que no tiene compatibilidad con el diseñador en la versión actual de Visual Studio. Para continuar sin compatibilidad con el diseñador, descargue SQL Server Compact 3.5 del centro de descarga de Microsoft (http://go.microsoft.com/fwlink/?LinkId=229598). Para actualizar los activos a SQL Server Compact 4.0 y habilitar la compatibilidad con el diseñador, abra el proyecto y use el cuadro de diálogo Agregar conexión para crear una conexión a la base de datos. ReportViewerInvoiceReport-CSharp”

No tuve la necesidad de realizar absolutamente nada para poder trabajar con el proyecto de ejemplo pero si usted lo desea podría actualizar la base de datos a la versión 4.0, el script para crear las estructuras de las tablas la podrá descargar en el link proporcionado en el proyecto anterior.

miércoles, 24 de septiembre de 2014

Programación en 3 capas

Hola a todos:

Después de tantos meses de tener abandonado el Blog por fin hoy se libera un espacio en mi agenda, tiempo que he decidido compartir con todos y cada uno de ustedes.

En este articulo hablare y tratare de explicar con los detalles mas mínimos que es la arquitectura 3 capas, cuales son sus ventajas, como empezar un proyecto 3 capas, cuales son las diferencias entre cada una de ellas, como comunicarlas y como crear un proyecto con la arquitectura 3 capas utilizando Visual Studio 2012.

Antes de comenzar a leer este articulo recuerde que: “El objetivo no es otro mas que el de orientar a los Parvulos .Net sobre la arquitectura de software 3 capas, todo lo escrito en este articulo no es ensayado, no es revisado por nadie mas, por lo cual podría contener errores gramaticales y sintácticos, el articulo y sus conceptos no pretenden ser la verdad absoluta del tema, siéntase en confianza de dejar sus comentarios y opiniones en la sección de comentarios al final del mismo y si lo considera prudente envíeme un correo electrónico por medio del formulario de contacto y por ultimo si el articulo le es de utilidad por favor considere dejar un comentario de agradecimiento.

Requisitos: Visual Studio 2012, Framework 4.0, el proveedor de datos SqlCompact 4.0 instalado en su equipo y muchas ganas de aprender.

Como siempre recomiendo encarecidamente que antes de descargar los proyectos de ejemplo (que les pondré al final de articulo), traten de hacerlo ustedes mismos siguiendo paso a paso todo lo que se mencionara aquí, si tienen dudas en uno en especifico no duden en contactarme.

Dicho todo lo anterior, comencemos…

Arquitectura 3 capas en .Net

¿Ha creado usted software?…¿Si?, entonces sabe lo complejo que resulta crear rutinas y funciones para cada uno de los formularios, importar todas las referencias del motor de base de datos en cada uno de los formularios, cambiar código aquí y allá (porque tiene copias del mismo código en muchos lugares), escribir la lógica de validación de campos dentro del evento, corregir los bugs que pudieran presentarse y no se diga de implementarles mejoras al software, etc., ¿No? entonces no se preocupe este es un buen manual de como evitarse muchos dolores de cabeza en diseño de su arquitectura a seguir.

Para que se de una mejor idea de que hablo, por favor descargue este proyecto de ejemplo, ejecútelo, analice el código, observe como para realizar una misma funcionalidad en dos lugares diferentes tuvimos que escribir casi las mismas líneas de código.

A partir de aquí en adelante estaremos trabajando con el proyecto descargado, aplicándole la Arquitectura 3 capas para demostrar como esta Arquitectura de Diseño nos ayuda a:
  • Separar responsabilidades, cada capa tiene una función especifica y no interviene con la de las demás.
  • Reutilizar código
  • La separación de roles en tres capas, hace mas fácil reemplazar o modificar a una, sin afectar a los módulos restantes
  • El código de la capa intermedia puede ser reutilizado por múltiples
  • Capacidad de migrar nuestro motor de Base de Datos sin grandes impactos al resto del proyecto.
  • Poder cambiar el Front de nuestra aplicación sin afectar a la lógica de nuestra aplicación ni a la Base de datos
Bien como ya hemos mencionado La Arquitectura de diseño 3 capas, consiste en dividir el diseño del software en sus tres principales componentes:
  1. La Interfaz o UI (User interface): Esta Capa es la encargada de interactuar con el usuario, es decir, son aquellas ventanas, mensajes, cuadros de diálogos o paginas web (en el caso del desarrollo web), que el usuario final utiliza para comunicarse con la aplicación, por medio de esta capa el usuario solicita que se ejecuten las tareas proporcionando parámetros de entrada y recibiendo datos como respuesta. Esta capa se comunica con la capa de Lógica de Negocio, enviando y solicitando información y con la capa de Entidades usando sus objetos para enviar y recibir esta información.
  2. La lógica de negocio o Business Logic: Se encarga de implementar, como su nombre lo dice, la lógica del negocio, es decir, todo lo que el Software debe de considerar antes de realizar una acción o el proceso que debe de seguir después de realizar una acción.