Personalizando la aplicación

Hola, bueno, este es un post diferente a los que he pensado trabajar inicialmente, resulta que en un foro que visito bastante, surgio una inquietud sobre como mostrar una imagen de acuerdo a un usuario determinado (pueden ver el post aca), asi que deseoso de colaborar y de seguir aprendiendo he construido un ejemplo pequeño, con el cual quiero mostrar o dar un camino sobre somo se podria realizar dicha funcion, la idea es la siguiente, tener una pagina de inicio, para poder trabajar con un usuario especifico, para esto utilice el control login, y luego, de ingresar con datos correctos, permitir al usuario elegir una imagen, y cuando vuelva a ingresar el usuario mostrar la imagen elegida, el ejemplo es basico, pero cumple con la funcion, luego si me queda un poco mas de tiempo, lo hare mas completo...

la interfaz de usuario es:



en donde en el combo listo las imagenes existentes, y en la imagen del lado se muestar la imagen seleccionada, ahi un boton que permite guardar la imagen elegida, y en la parte superior se va a mostrar la imagen que el usuario ha seleccionado, cuado ingrese nuevamente.. es decir:



y como podemos ver, se carga la imagen que el usuario ha seleccionado, en este caso, la de una casita... espero que este ejemplo te ayude un poco con tu labor..

Descarga del ejemplo !!

Reportes - ReportViewer

Hola a todos, muchas veces nos hemos preguntado como podemos imprimir o generar archivos en pdf, y si lo que necesitamos hacer es bastante complejo, muchas veces hacerlo todo a pedal resulta bastante tedioso, lo cual nos pone a pensar en una manera más rapida y fácil, en mi caso personal, la primera opción que se vino a la cabeza fue hacer mis reportes con crystal, ya que lo habia trabajado hace bastante tiempo, sin embargo, y más en entorno web, comprar la licencia del crystal a veces es complicado (aunque si peden hacerlo mejor), y algo muy parecido me sucedio con reporting services, además que necesitaba trabajar con versiones de sql express...

Así que tome la decisión de usar un control del toolbox de visual studio, el reportviewer, aunque no tenga la misma potencia de crystal reports, me ha sido de bastante utilidad. Lo que generalmente hago es tener una página exclusiva para mis reportes, asi por código lo que hago es cambiar el reporte y demas datos necesarios acorde a lo que deseo mostrar... sin más carreta comencemos...

Se debe tener en cuenta, que en el servidor en el cual se instale la aplicaciñon se debe correr un runtime para poder generar los reportes (esto sucede igual que con crystal).. es bastente liviano y no molesta para nada, descargalo !!

En ejemplo que voy a mostrar (bastante sencillo), tengo una página inicial la cual me muestra el nombre de algunas personas, con el nombre del país y la ciudad, esto lo hago con el control gridview.. y tengo dos botones, el primero me redirige a la página que muestra mi reporte, y allí puedo elegir si exportarlo o imprimirlo, y el segundo boton, me crea e reporte y automaticamente me permite elegir si abrirlo o guardarlo, sin salir de la página actual (en realidad si voy hasta la otra página, pero el usuario no se dará cuenta)... es decir, mi pantalla inicial es:



Lo único que se ha hecho es llenar el gridview con los datos...ahora lo que nos interesa, el reporte !!.

Creo una nueva página, la cual contiene un control ReportViewer, y ya, ahi acabo el diseño (sencillo verdad); en mi base de datos, he creado un procedimiento almacenado bastante sencillo, el cual me trae la información que vemos en la grilla, dicho procedimiento almacenado, recibe como parametro el codigo de la presona, para el ejemplo voy a enviar un % para que me los traiga todos, así que luego de tener el procedimiento, agrego un nuevo item de tipo dataset, para luego vincularselo al reporte, al agregar el dataset, este se encuentra vacio, asi q con clic derecho > agregar > tableadapter.. y ahi se muestra un asistente, en el cual configuramos la conexion, en este caso, la llamo del webconfig, luego le decimos que use un procedimiento almacenado existente y listo, tenemos nuestro dataset.

Luego agregamos un nuevo item de tipo informe (.rdlc), luego en la barra de menús vamos a Informe > origenes de datos, y alli escogemos el dataset que hemos creado, en mi caso se llamo dataset1_pa_imprimepersonas, y en la parte de la izquierda (generalmente) en el explorador de datos de sitios web, podemos ver que alli se encuentra el dataset, con el procedimiento almacenado, con los campos que nos trae el procedimiento, asi q ahora es solo diseñar el reporte arrastrando los campos, para el ejemplo he usado una tabla...

Ahora, si código.. en la primera página, vamos a programar el evento click de los botones, para ambos botones serña practicamente igual...

Protected Sub ButtonImprimir_Click(ByVal sender As Object, ByVal e As EventArgs) Handles ButtonImprimir.Click
Context.Items.Add("descargar", "no")
Context.Items.Add("persona", "%")
Server.Transfer("Reporte.aspx", True)
End Sub

Protected Sub ButtonDownload_Click(ByVal sender As Object, ByVal e As EventArgs) Handles ButtonDownload.Click
Context.Items.Add("descargar", "si")
Context.Items.Add("persona", "%")
Server.Transfer("Reporte.aspx", True)
End Sub

Podemos ver, que vamos a enviar a enviar dos variables por contexto, la primera es para saber si dse debe descargar el reporte y la segunda es el valor del parametro del procedimiento almacenado, luego se redirecciona a la página que tiene el reporte

En la página del reporte:
1. En el evento load verificamos por cual lado irnos, si mostrar el reporte o si hacer la descarga de una vez:

Dim sDescargar As String = CType(Context.Items("descargar"), String)
If sDescargar = "no" Then
Call Reporte()
Else
Call ReporteDownload()
End If

2. Aqui voy a mostrar solor el código cuando seleccionamos que no se debe descargar, en el ejemplo tienen todo:

Private Sub Reporte()
Dim sQuery As String = "PA_IMPRIMEPERSONAS"
cmd = New SqlCommand(sQuery)
cmd.Parameters.AddWithValue("@_codpersona", CType(Context.Items("persona"), String))
Dim dtpersonas As DataTable = oConexion.GetSP(cmd)
If Not dtpersonas Is Nothing AndAlso Not dtpersonas.Rows.Count = 0 Then
reportesReportViewer.Visible = True
reportesReportViewer.LocalReport.ReportPath = "Reportes\Reporte.rdlc"
Dim oReport As New ReportDataSource("DataSet1_PA_IMPRIMEPERSONAS", dtpersonas)
reportesReportViewer.LocalReport.DataSources.Clear()
reportesReportViewer.LocalReport.DataSources.Add(oReport)
reportesReportViewer.LocalReport.Refresh()
End If
End Sub

Ahora, como funciona este código?
declaro una variable la cual contiene el nombre del procedimiento almacenado, al command le paso el valor del parametro, luego en mi clase de conexion, la función que ejecuta procedimientos me devuelve un datatable, verifico que el datatable tenga datos, hago el reporte visible, se que en diseño ya lo hice, pero algunas veces si no lo ponia no me lo muestra,luego le asigno el reporte (.rdlc) que he diseñado (aqui podemos ver, que podemos enrutar cualquier reporte), lleno un reportdatasource para vincularselo a mi reportviewer, el primer parametro del constructor, debe ser el nombre del dataset que hemos creado anteriormente,luego se lo asigno al reportviewer y por último le hago un refresh...y amigos eso es todo, espero que este ejemplo un poco largo les sea de utilidad, ahi otras menaras de hacerlo, pero yo lo hago así y me ha funcionado muy bien...en el ejemplo encuentras el proyecto y la copia de la base de datos,en la base de datos ahi una tabla con todos lo paises, creo que les sera util...

Descarga el ejemplo aqui!!

Nos vemos en un proximo post donde vamos a hacer un menu contextual para un gridview, asi evitaresmo tener varios botones (eliminar, editar,imprimir,borrar,etc)

Paginando el gridview

Hola, bueno como dije en mi anterior post, quiero mostrar como podemos hacer una paginación elegante y un poco más funcional de nuestros afamado gridview.

Muchas veces, necesitamos y queremos q nuestra interfaz de usuario sea más amigable y bonita, puesto que lo que el usuario ve es la interfaz (muchas veces no le importa lo que está por detrás)...

En ejemplo vamos a cargar un gridview desde un archivo xml el cual contiene la lista de todos los paises del mundo (si falta alguno disculpad); dicha lista contine 241 paises, lo cual haría que nuestro gridview se extendiera demasiado hacia abajo, para evitar que esto suceda vamos a usar la paginación.

La idea es disponer de un dropdownlist el cual va a contener todas las páginas del gridview, así podremos cambiar de página facilmente. Además, se visualizará cuatros imagenes las cuales tendrán la función de ir al primer, anterior, siguiente y último registro.

Es decir, al final nuestro gridview debe lucir parecido a:



Para lograr esta funcionalidad, ahi varias cosas que se deben definir.
1.Establecer la propiedad AllowPaging="true" del gridview
2.Establecer el número de filas o registros que deseamos ver por página en el grid (ej: PageSize="10")
3.Personalizar el pagertemplate.
4.En el dropdownlist del pagertemplate, se ha definido el evento OnSelectedIndexChanged="GoPage", en este evento vamos a cambiar el la página q estamos visualizando, asi en nuestro codebehind, vamos a definir un procedimiento protected (protected para que pueda ser accedido desde el html).

Además de los pasos anteriores es necesario
1.Definir el procedimiento para cargar el gridview
2.Añadir la lógica necesaria en el evento PageIndexChanging para que nuestros botones de navegación funcionen, en este caso, con la variable e podemos acceder al numero de la página a traves de la propiedad NewPageIndex.
3.En el evento RowDataBound del gridview, se debe cargar el dropdownlist; y el label para mostrar el número total de páginas.

Como se puede ver, con solo unos pequeños pasos extendemos la funcionalidad de la paginación del gridview.

Descarga del ejemplo !

Nos vemos en el siguiente post, para seguir mostrando mas funcionalidades del control gridview...

GridView y PopupControlExtender

Hola a todos, a diario en mi trabajo, he tenido q trabajar bastante con el control gridview de asp, y he tenido que agregarle varias funcionalidades, para que sea mas amigable al usuario y para que su funcionamiento sea mas adecuado... asi que he decidido hacer varios post (este seré el primero sobre este control), para que cualquiera pueda mejorar la usabilidad de este control).

En este post, quiero mostrar como podemos mostrar detalles del gridview de forma "modal" con el popupcontrolextender, y asi darle mas usabilidad a nuestro gridview...
sin más carreta vamos a lo que nos interesa.

La idea es poder mostrar detalles de nuestro gridview con solo pasar el mouse por encima de un boton de detalles, como vemos en la siguiente imagen:



Asi, al pasar el mouse por cada uno de las imagenes, vamos a visualizar el nombre del pais y de la ciudad (un ejemplo simple, ya ustedes veran como aplicarlo).

Pero que necesitamos, como mencione anteriormente, vamos a usar el popucontrolextender del toolkit de ajax (si no lo tienes descargarlo aqui)

Ahora vamos a comenzar a constriur nuestro programa.

Agregamos un control grdiview a nuestra pagina aspx, y dentro de la definición de las columnas, agregamos un imagebutton y un popupcontrol extender, lo importante aqui, es que debemos comunicarnos con el servidor para poder hacer la consulta contra la base de datos y asi poder mostar los detalles, asi que en la propiedad DynamicServiceMethod del popupcontrolextender le damos el nombre de un WebMethodAttribute existente en nuesto codebehind, y en la propiedad DynamicContextKey le vamos a enviar los parametros para poder hacer los filtros en la consulta....

Dentro de nuestro WebMethodAttribute el cual debemos definir como shared en visual basic (static en c#), vamos a realizar laconsulta contra la base de datos, asi como se debe crear una tabla el la cual visualicemos los resultados...

Bien es sabido, que el popupcontrol se activa al dar click en un control (es nuestro caso imagebutton), y como la idea es mostrar los detalles con solo pasar el mouse por encima de la imagen, se debe agregar este comportamiento, lo cual hacemos en el evento rowcreated del gridview...alli agregamos los enventos onmouseover para mostrar los detalles al pasar el mouse por encima y onmouseout para ocultarlo cuando quitemos el mouse...

Como ven, no es algo complicado y si hará que nuestras aplicaciones sean más rápidas y mas fáciles para el usuario...lo cual es algo fundamental...

Link con el ejemplo !!

Espero les sea util este ejemplo y nos vemos en un próximo ejemplo, donde mostraré como hacer una paginación elegante y funcional del gridview...

TreeView y Usercontrols

Hola a todos, este es un pequeño ejemplo el cual quiere mostrar una forma de como usar usercontrol en asp.net, la vez pasada, se me planteo una situación en la cual, un usuario podría tener desde 1 hasta unas 50 opciones disponibles en una página, pero debería simular o hacer sentir al usuario que todo se encontraba en la misma página, además que debía poder guardar los datos digitados en una opción o sección apenas se cambiará a una nueva.

Mirando ese pequeño planteamiento, lo primero que se me ocurrió fue usar tabs al estilo de jquery, opción que fue eliminada, ya que debía tener todo el código en la misma página, y luego comenzar a ocultar divs y así sucesivamente, luego se me ocurrió crear diferentes páginas, una para cada sección, tener un iframe el cual me iba a alojar la página, opción que funcionaba, sin embargo no podía hacer el guardado al cambiar de sección.

Luego de mirar algunas opciones más, opte por usar controles de usuario, y en mi página principal tener un multiview, el cual va a tener un view por cada sección, y asi desde codebehind solo me es necesario cambiar el view activo, además, por ser controles de usuarios, en cada control puedo declarar métodos públicos los cuales puedo llamar desde otra página….
Lo importante a tener en cuenta, es que cuando se carga la página principal se carga, mis controles de usuario también lo hacen, por este motivo, lo mejor es no hacer ningún tipo de carga en el load del control de usuario, sino tener un procedimiento público el cual se llame cuando necesito ese control de usuario.

Para hacer el llamado de cada sección, creo un treeview, donde cada nodo me hará el llamado de una sección diferente...



Espero les sea de utilidad...Especial agradecimiento a Marc Rubiño !!

Descarga del código fuente...

Mensajes de usuario con Ajax

Muchas veces nos preguntamos, como mostrar mensajes al usuario en nuestra aplicación, ya sea informando sobre un error o bien indicando que una acción termino correctamente.

En esta ocasión, voy a mostrar como soluciones este problema usando el grandioso ajax, más en detalle el modalpopup extender.

La idea es mostrar tres tipos de mensajes (correcto,advertencia y error), para que el usuario sepa exactamente lo que ha sucedido. Así, la pariencia final de nuestros mensajes serán:



Lo primero que debemos hacer es añadir la referencia al toolkit de ajax, luego de agregarlo, definimos la interfaz (para el ejemplo serán tres botones, uno para cada tipo de diálogo).

Luego, añadimos un panel, esta panel será el encargado de contener el mensaje, y será el panel objeto del modalpopupextender de ajax.

Dentro del panel se han definido dos tablas, las cuales contendrán el encabezado del mensaje y el cuerpo del mensaje.

Luego añadimos el control de ajax, en donde pnlMensaje es el panel que contiene todo el cuadro de mensaje, el okcontrolid, es el id del control que cerrará el mensaje, BackgroundCssClass es el estilo definido para el resto de la pantalla, asi el usuario no podrá realizar ninguna acción mientras que el mensaje este visible, y el targetcontrolid "supuestamente" el control que mostrara el mensaje, pero luego veremos que no sera asi, sin embargo se debe definir el control con un estilo en display none para que no sea visto en la página.

Luego de crear la interfaz, pasamos al codebehind, y alli realmente sera en donde se llame cada mensaje.

Primero creamos una enumeracion, la cual contiene los tres tipos de mensajes:

Private Enum TipoMensaje
eerror = 1
correcto = 2
advertencia = 3
End Enum

Luego, creamos un procedimiento el cual se encargara de mostrar el mensaje, y definir el estilo q se aplicará. Este procedimiento recibirara dos parametros, el mensaje para el usuario y el tipo del mensaje (el cual sera sesgado por la enumeracion creadada). Dentro de la funcion definimos los estilos para cada mensaje dependiendo del tipo de mensaje recibido.

Private Sub mostrarmensaje(ByVal mensaje As String, ByVal Tipo As TipoMensaje)
Select Case CInt(Tipo)
Case 1
pnlMensaje.CssClass = "CajaDialogoError"
mensajeheaderPanel.CssClass = "MensajeHeaderError"
Case 2
pnlMensaje.CssClass = "CajaDialogoCorrecto"
mensajeheaderPanel.CssClass = "MensajeHeaderCorrecto"
Case 3
pnlMensaje.CssClass = "CajaDialogoAdvertencia"
mensajeheaderPanel.CssClass = "MensajeHeaderAdvertencia"
End Select
mensajeLabel.Text = mensaje
mpeMensaje.Show()
End Sub

y listo... ya tenemos para nuestro sitio tres tipos de mensajes... cualquier duda o comentario julito_gtu@hotmail.com

Puedes descargar el ejemplo aquí !!

TextBox solo números

Hola, por algún tiempo, estuve desarrollando aplicaciones de escritorio (aún lo hago, pero no tan frecuente) en las cuales podemos decir que poseemos el control de todo, sin embargo, cuando damos ese paso al desarrollo Web, nos encontramos con muchos obstaculos, por ejemplo el validar lo que el usuario digita, lo cual es muy util cuando deseamos una aplicación más versatil y segura.

Bueno, cuando tenia que validar lo que el usuario digita, me encontre con que la mejor manera de hacer dicha validación es con JavaScript, ya que nos evitamos el ir hasta el servidor, así todo queda en el cliente.

Bueno lo primero que se debe hacer crear la función de javascript, en el ejemplo tengo dos funciones, una valida que solo se ingresen letras y la otra que solo sean números, las funciones realmente son muy fáciles, pero pueden extenderse aún más:

function Numeros() {
var key = window.event.keyCode;
if (key <> 57) {
window.event.keyCode = 0;
}

}

function letras() {
var key = window.event.keyCode;
if (key <> 57) {

}
else {
window.event.keyCode = 0;
}

}

En las anterioes funciones, simplemente validamos por código ascii cual fue el caracter digitado, y dependiendo del caracter cancelamos el evento o no.
Luego, en el evento load de la página, le agregamos el evento o atributo al campo o campos de texto que deseamos validar de la siguiente manera:

numerosTextBox.Attributes.Add("onKeyPress", "Numeros()")
letrasTextBox.Attributes.Add("onKeyPress", "letras()")

Lo que debemos hacer, es que al campo de texto le agregamos un nueo atributo, que seria el evento keypress.... bueno eso es todo.. un rápido y fácil ejemplo para tener un poco más de control en nuestras aplicaciones...

Puedes descargar el ejemplo aqui !!