Cambio de blog

He decidido cambiarme a wordpress... asi que esta es la nueva dirección..

New Blog !!

Utilizando el namespace My

Bueno, una de las grandes ventajas (a mi parecer) para todos aquellos que desarrollamos con visual basic.net es la posibilidad de poder usar el namespace my para algunas tareas comunes como acceder a la información del equipo, operacion de entrada y salida de archivos y capertas, acceso a puertos, entre otras.

Aunque es posible usarlo tambien con C# referenciando la libreria Microsoft.VisualBasic.dll para el lenguaje visua basic .net digamos que es nativo...

Esta vez no explicare todo el código, ya que el uso es realmente sencillo, además que podemos extender este namespace para agregarle nuevas funcionalidades, lo cual hare en un proximo post... por el momento solo comentar que el ejemplo obtengo información del sistema, realizo operaciones comunes con archivos como abrir, crear, copiar y eliminar un archivo y por último accedo al folder de música, se cargan las canciones en un listbox y tenemos dos botones uno para escuchar y el otro para detener la canción, lo único a tener en cuenta es que las canciones deben ser de tipo wav (en un proximo post veremos como hacer un reproductor de mp3 de una manera bastante fácil).

Sin más les dejo el ejemplo con una cancion en formato wav, solo deben copearla a la carpeta de música predefinida... espero que les sea de utilidad !!

Descarga del ejemplo !!

Creando un servicio windows...

Primero que todo, voy a explicar de una manera muy coloquial lo que es un servicio windows. Un servicio windows es una aplicación cliente sin interfaz de usuario, la cual se ejecuta de manera "transparente" al usuario, generalmente un servicio windows se inicia con la carga del sistema operativo.

Se puede decir que un servicio windows es un proceso que corre en background. Un servicio windows es una aplicación que se ejecuta constantemente sin interacción con el usuario.

Un aspecto muy importante, es que para probar un servicio windows este debe estar instalado en el equipo, no es posible ejecutarlo simplemente con f5 como con una aplicación asp.net o de escritorio.

Bueno ahora si a lo q te truje..jajaja

1. Crear un prpyecto de servicio windows:
Bueno en mi caso tengo el vs 2010, asi que vamos a File > New Project > seleccionamos windows, luego windows service, le asignamos un nombre y por último damos clic en ok.



2. Luego que Visual Studio ha creado el proyecto, se muestra una pantalla azul con un texto en el centro, el cual ofrece dos posibilidades: a) Arrastrar objetos desde la barra de herramientas (toolbox) y b) cambiar a la vista de código, siendo está la opción a usar.

3.En la pantalla de diseño del servicio, dar clic en cualquier area limpia para poder mostrar en el panel de propiedades las propiedades del prpyecto, y en las propiedades cambiamos el nombre del servicio, y establacemos las propiedades CanPauseAndContinue y CanShutdown en true, estas propiedades indican si el servicio puede ser pausaso y reinicicado, y si puede ser detenido respectivamente.

4.Ahora para este ejemplo, se debe agregar como referencia el namespace System.Net.

Se da clic derecho sobre el nombre del proyecto y luego seleccionar Add reference...



5. Ahora si seleccionamos la opción cambiar a vista de código, y automaticamente se cambia al editor de código donde se visualizan dos métodos a) OnStart y b) OnStop.

Adicionalmenete vamos a adicionar el código necesario para sobreescribir los métodos a) OnContinue y b)OnPause.

Aunque se sobreentiede lo que realiza cada método, lo voy a mencionar:
a)OnStart: código a ejecutar cuando se inicia el servicio.
b)OnStop: código a ejecutar cuando se detiene el servicio.
c)OnContinue: código a ejecutar cuando se reinicia el servicio.
d)OnPause: código a ejecutar cuando se pausa el servicio.

Adicionalmente importamos el espacio de nombres System.Timers, System.IO, Imports System.Diagnostics.Process y Imports System.Text, luego creamos de manera global un objeto de tipo Timer.



6.Ahora en el constructor de la clase, instanciamos la variable timer y le pasamos como argumento el valor en milisegundos del tiempo de espera para realizar un nuevo evento.

Un objeto de tipo Timer realiza una acción cada cierto tiempo, así que se define el tiempo ente cada "pasada".

Luego adicionamos un manejador para el timer.

Public Sub New()
InitializeComponent()
oTimer = New Timer(8000)
AddHandler oTimer.Elapsed, New ElapsedEventHandler(AddressOf Me.oTimer_Elapsed)
End Sub

Luego en los 4 eventos antes mencionados simplemente iniciamos el timer o lo detenemos respectivamente.

Inciar/Reiniciar: oTimer.Start()
Detener/Pausar: oTimer.Stop()

7.Ahora creamos el método Elapsed del timer, debajo de donde dice Me.oTimer_Elapsed vemos una rayita roja, la cual indica que el método no esta definido, así que para aprovechar una de las nuevas características de visual studio 2010 nos paramos con el mouse sobre la linea, expandemos las opciones y seleccionamos generar método para....y visual studio on genera la definición del método:



8.Ahora lo interesante, la idea es q el servicio windows cada 8 segundos abra el explorador de internet en una página específica y genere un documento en el cual se guarde la hra y fecha de intento de acceso a internet.


Private Sub oTimer_Elapsed(ByVal sender As System.Object, ByVal e As ElapsedEventArgs)

        Dim sUrl As String = "http://jtodonet.blogspot.com/"

        Dim sTexto As New StringBuilder

        Dim sRuta As String = AppDomain.CurrentDomain.SetupInformation.ApplicationBase & "MyLog.txt"



        If My.Computer.Network.IsAvailable Then

            sTexto.AppendLine("FECHA: " & Now)

            sTexto.AppendLine("ESTADO DE RED: disponible")

            sTexto.AppendLine("----------------------------------------------------------")

        Else

            sTexto.AppendLine("FECHA: " & Now)

            sTexto.AppendLine("ESTADO DE RED: no disponible")

            sTexto.AppendLine("----------------------------------------------------------")

        End If



        Try

            Dim oTextWriter As TextWriter = New StreamWriter(sRuta, True)

            oTextWriter.WriteLine(sTexto.ToString)

            oTextWriter.Close()

        Catch ex As Exception

            EventLog.WriteEntry("MyWindowsService", "Error: " & ex.Message.ToString)

        End Try

    End Sub


Bueno aunque el post es sobre crear un servicio windows, explicare brevemente el código:
a) Se crea una variable que tenga la dirección de la página web.
b) Variable que almacenara los datos a escribier en el archivo
c) Variable que tiene la ruta para el archivo de texto
d) Se verifica si el pc tiene acceso a internet (Con el espacio de nombres My que veremos en un proximo post)
e) Se crean los datos para escribir en el archivo
f) Se intenta crear y escribir en el archivo
g) Se controla todas las posibloes execpcionesy se mandar al visor de sucesos (Lo trataré en un proximo post).

Ahora que ya tenemos todos, hacemos un build al proyecto y verificamos que todo este bien.

En mi caso obtuve el siguiente error:

'Sub Main' was not found in 'MyWindowsService.Service1', el cual me indica que mi servicio no tiene un punto de entrada, asi que doy doble clic sobre el error y selecciono el método:



Ahora que tenemos el servicio listo, vamos a crear un instalador para el servicio:

1. En la vista de diseño, sobre la parte azul damos clic derecho y seleccionamos Add Installer...



Y automaticamente en el Solution Explorer vemos un elemento llamado ProjectInstaller.vb y se carga la vista de diseño del mismo.

2. Ahora a configurar el ServiceInstaller:

a) StartType: Indica el modo de inicio del servicio, manual quiere decir que el servicio debe ser iniciado por el usuario (panel de control > servicios), automatico que el servicio se iniciará cuando se cargue el sistema operativo y deshabilitado. Vamos a dejarlo en automático.

b)Description: Descripción del servicio. Para nuestro caso "Mi servicio windows". Está serpa la descripción que se verá en panel de control > servicios

c)DisplayName: Nombre del servicio mostrado el panel de control > servicios. Para el ejemplo "MyService"

d)Account: Indica la cuenta que maneja el servicio. Para el ejemplo LocalSystem. [Esta opción la vemos al seleccionar ServiceProcessInstaller1]

Luego y ya para terminar adicionamos un proyecto de instalador a la solución y lo usamos para generar el instalador de nuestro servicio (en el proximo post lo explicare en forma detallada)

Descarga del ejemplo !!

Icono de notificación en Windows Form

Hola, muchas veces deseamos darle una mayor profesionalidad a nuestras aplicaciones, por ejemplo, implementar las nuevas funcionalidades de Windows 7, realizar una excelente interfaz con WPF, etc.

Sin embargo, una buena opción es realizar una aplicación la cual disponga de un icono de notificación al estilo de Windows Live Messenger o alguno de nuestros antivirus, y aunque este proceso es realmente sencillo, es raro que sea utilizado.. así que voy a mostrarles como poder usar un icono de notificación de una manera sencilla y bonita...

Lo primero es crear un proyecto de aplicación windows, le damos un nombre y lo primero que vamos a ver es un windows form en blanco, para el ejemplo vamos a usar este formulario.

A este formulario vamos a cambiarle los valores de algunas propiedades las cuales son:

Text: Icono de notificación
StartPosition: CenterScreen || Con esta propiedad lo que hacemos es que el formulario siempre se cargará en la parte central de la pantalla.
AutoSizeMode: GrowAndShirink || Con este valor lo que hacemos es bloquear la posibilidad de redimensionar el formulario.
Opacity: 75% || Hacemos el formulario medio transparente.
MinimizeBox: False || Quitamos el boton de minimizar.
MaximizeBox: False || Quitamos el boton de maximizar.
Icon: Aca vamos a establecer el icono que deseamos tenga el formulario en la barra de titulo.

Ahora vamos a agregar un par de controles al formulario para que no se vea vacio, así que nuestro formulario debe verse algo así:



Hasta ahora un formulario normal, ahora vamos a nuestro toolbox y agregamos un objeto de tipo NotifyIcon...



En este caso, cuando agregamos un objeto de tipo NotifyIcon, el cual se conoce como componente este no es visualizado sobre la superficie del formulario, al contrario lo vemos debajo del formulario, y allí es donde podremos ver todos los componentes (objetos que no son dibujados sobre la interfaz del formulario) como los cuadros de diálogo y en nuestro caso el NotifyIcon.

Para el notifyicon, en la propiedad icon establecesmo el icono que deseamos usar, y en la propiedad text el texto que se va a mostrar cuando el mouse este sobre el icono.

Sin embargo, hasta el momento nuestro icono de notificación no hace nada, ahora vamos a configurarle un menu contextual que debe aparecer cuando se de click derecho sobre el icono, para este efecto agregamos un objeto de tipo ContextMenuStrip, el cual se debe visualizar en la parte inferior del formulario.

Cuando seleccionamos el ContextMenuStrip, en la parte superior izquierda del formulario podemos ver nuestro menu, alli definimos las diferentes opciones que tendrá el menu.

Ahora para que nuestro menu sea diferente a lo que estamos aconstumbrados, en la propiedad BackgroundImage del contextmenustrip seleccionamos una imagen para el fondo del menu.

Por último en la propiedad ContextMenuStrip del NotifyIcon seleccionamos el contextmenustrip que hemos acabo de crear... y listo ya tenemos un bonito icono de notificación.

En la imagen podemos ver como se muestra el icono definido y el menu que hemos creado.



Espero que les sea de utilidad.

Descargar ejemplo !!

Leer pdf desde windows form

Hola a todos, bueno hoy quiero mostrarles como de una manera rápida podemos tener un lector de archivos pdf en nuestra aplicación windows, asi no necesitamos tener que lanzar un acrobat reader o algo parecido.

Bien, lo que vamos a hacer es acceder al componente COM del adobe reader y asi crear una instancia de el en nuestra aplicación...

Bueno manos a la obra, lo primero será crear un nuevo proyecto de tipo windows, asi el visual no generá un formulario por defecto... vamos a trabajar con este formulario, si desean pueden setear las propiedas como el tamaño, el título y demás características que deseen.

Ahora lo que vamos a hacer es en nuestro toolbox damos click derecho y luego seleccionamos elegir elementos...o en choose items si lo tienen en inglés...



luego se abrirá una ventana en la cual disponemos de varias pestañas, pero en este casp la que nos interesa en al pestaña que dice componentes COM (COM Components), y alli seleccionamos Adobe PDF Reader...



al seleccionar este componenete y dar clic en ok, debe aparecer en nuestro toolbox un objeto llamado Adobe Pdf Reader...



ahora solo debemos arrastrar nuestro nuevo objeto al formulario. Ahora lo que haremos sera darle la opción al usuario qiue pueda buscar un archivo y este sea cargado en el formulario, asi que ya han visto la interfaz (básica) que he diseñado, lo que voy a explicar será el code behind... como siempre en vb..

Primero instanciamos un nuevo objeto de tipo OpenFileDialog, este objeto nos permite hacer una búsqueda de archivos en nuestro equipo:

Dim oOpenFileDialog As New OpenFileDialog

Ahora en el load del formulario, vamos a limitar los tipos de archivo que podemos buscar estableciendo un valor para la propiedad filter de nuestro cuadro de diálogo, basicamente establecemos un nombre y le asociamos una extensión, en este caso .pdf:

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
oOpenFileDialog.Filter = "Archivos PDF (*.pdf) | *.pdf"
End Sub

Ahora en el boton de buscar archivo, lo que hacemos es establecer la propiedad filtername a vacio, abrir el cuadro de diálogo y si el usuario selecciona archivo y presiona ok entonces mostrar la ruta del archivo en el cuadro de texto:

Private Sub ButtonArchivo_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ButtonArchivo.Click
oOpenFileDialog.FileName = String.Empty
If oOpenFileDialog.ShowDialog() = Windows.Forms.DialogResult.OK Then
TextBoxFile.Text = oOpenFileDialog.FileName
End If
End Sub

Bueno, ahora que ya tenemos la ruta del archivo, por fin vamos a cargar el archivo pdf en el formulario, lo único que debemos hacer el al componente COM asignarle el archivo pdf con la función LoadFile, la cual retorna un true si el cargue ha sido exitoso y false en caso contrario, en esta caso simplemente mostramos un mensaje informando si ocurrio un error o si no:

Private Sub ButtonCargar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ButtonCargar.Click
If ComPDF.LoadFile(TextBoxFile.Text) Then
MsgBox("Archivo cargado con éxito", MsgBoxStyle.Information, "Sistema")
Else
MsgBox("Ocurrió un error al cargar el archivo", MsgBoxStyle.Information, "Sistema")
End If
End Sub

Bueno y eso es todo, ya podemos ver nuestros pdf sin salir de nuestra aplicación.

Descarga el código de ejemplo !!

Nos vemos proximamente...

Autocomplete con Jquery

Hola a todos, el dia de hoy quiero mostrarles como gracias a JQuery podemos hacer un autocompletar en u textbox de una manera rápida y sencilla, y así poder ofrecer al usuario una mejor experiencia y nuestro webform será un poco más profesional.

En el ejemplo se hara una búsqueda de nombres en una lista genérica, la cual contiene unos nombres preestablecidos, la idea aquí sería llenar la lista con datos desde una base de datos, en esta caso lo único que cambiaría sería el llenado de la lista, lo demás será pracricamente igual, pero veamos como quedaría nuestro campo de texto cuando se encuentran coincidencias...



Ahora q vimos como se verá la función de autocomplete pues manos a la obra..

Lo primero será diseñar la interfaz de usuario, en este caso solo necesitamos un label y un textbox, luego referenciamos los scripts de jquery y jquery ui a nuestra página, es decir:


<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>

<script src="Scripts/jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>


Para nuestro ejemplo, como tenemos q hacer todo en codebehind, porque las conicidencias se deberián cargar de una base de datos (en el ejemplo usaremos una lista), entonces agregamos un scriptmanager a la página, y le establecemos la propiedad EnablePageMethods en true para poder acceder a la función que retorna las conicidencias ya que debemos comunicar el cliente con el servidor una forma de hacerlo es usando un WebMethod. Es decir, el control scriptmanager quedaria:


<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>


Ahora, en nuestro codebehind vamos a declarar una función la cual hará la consulta a la lista de nombres y retornará solo aquellos q sean coincidentes con lo que el usuario va escribiendo en el textbox. Lo importante a tener en cuenta es que el método debe ser declarado como public shared y debe tener el atributo WebMethod(). Es decir, la función quedaria:


<WebMethod()> _

    Public Shared Function ObtieneNombres(ByVal sNombre As String) As Object

        Dim oListNombres As List(Of String) = New List(Of String)()

        oListNombres.Add("Julio Avellaneda")

        oListNombres.Add("Javier Alfredo")

        oListNombres.Add("Juan Manuel")

        oListNombres.Add("Jesus Alfredo")

        oListNombres.Add("Jose Manuel")

        oListNombres.Add("Luis Carlos")

        oListNombres.Add("Julieta")



        sNombre = sNombre.ToLower()

        If Not oListNombres Is Nothing Then

            Dim oNombres As Object

            oNombres = From nombre In oListNombres _

                        Where nombre = sNombre OrElse nombre.ToLower.StartsWith(sNombre) _

                        Select nombre



            Return oNombres

        Else

            Return Nothing

        End If

    End Function


Vamos a explicar la función:La funciñon recibe un parámetro de tipo String, este parámetro es lo que el usuario va tecleando en el textbox, ahora se crea una lista genérica de tipo string para almacenar los nombres de los usuarios, luego simplemente llenamos la lista (aquí sería el lugar en donde se llena la lista desde la base de datos), luego verificamos que la lista no este vacía para poder hacer la comparación y así mostrar los datos coincidentes.
Ahora, se declara una variable de tipo object, y a esa variable le asignamos el resultado de una consulta con linq hecha sobre la lista para poder consultar los items relacionados, la consulta de linq lo que hace es en la primera linea es especificar en donde vamos a realizar la búsqueda (en este caso en la lista creada), en la segunda línea especificamos las condiciones de búsqueda, en este caso donde almacenado en la lista sea igual a lo tecleado por el usuario o los items que comienzen por lo tecleado por el usuario, en la tercera línea le especificamos lo que deseamos mostrar, finalmente retornamos las coincidencias.

Ahora que vimos la lógica para traer las coincidencias, vamos a revisar como debemos trabajar en el cliente con jquery, nuestro script de jquery sería:


<script type="text/javascript">

         jQuery(document).ready(function () {

             $("#<%= TextBoxNombre.ClientID  %>").autocomplete({

                delay: 0,

                source: function (request, response) {

                    PageMethods.ObtieneNombres(request.term,

                            function (data) {

                                var nombres = (typeof data) == 'string' ? eval('(' + data + ')') : data;

                                response(nombres);

                            },

                            fnLlamadaError);

                },

                minLength: 1

            });

        });



        function fnLlamadaError(excepcion) {

            alert('Ha ocurrido un error al traer los nombres: ' + excepcion.get_message());

        }


Pero como funciona este código:
Lo primero es relacionar el plugin de autocomplete jquery con el textbox, luego comenzamos a definir las propiedades del plugin, delay hace referencia al tiempo en que tarde en aparecer las coincidencias, minLength especifica el número de caracteres minimos para poder comenzar a usar el autocomplete, source hace referencia a la fuente de valores en la cual se va a hacer la comparación, en nuestro caso hacemos un llamado al webmethod creado, para llamarlo usamos PageMethods., por último especificamos una función para informar al usuario mediante un mensaje sise produjo algún error al llamar a la función.

Bueno y eso es todo lo que debemos hacer para poder usar un autocomplete de jquery, en el ejemplo encuentran la hoja de estilo y los scripts de jquery... hasta un próximo post que espero no se tarde más de dos semanas !!

Descarga del ejemplo !!

Crea un gif de loading

Hola, bueno solo quiero recomendarles esta buena página en donde podemos crear un gif de cargando con los colores que nos gusten, asi como podemos elegir si será con fondo transparente o no...

http://ajaxload.info/

Alli lo unico q hacemso el tipo de gif, luego si deseamos que tenga fondo transparente y por ultimo el color que deseamos tenga el gif...luego le damos generar y podemos ver el gif.. por último damos clic en download y listo.. tenemos nuestro gif !!

GridView, JQuery y un menú contextual

Hola a todos, bueno luego de algún tiempo sin subir nada, y se que entienden cuando se esta termiando un proyecto, hoy quiero mostrarles como podemos hacer un menú contextual con jquery y un gridview.

Pero por que hacer un menú contextual?... muchas veces nos cansamos de tener 2,3 o mas botones en cada fila del grid.. y que mejor q un menú contextual apra tener todas las opciones en el mismo sitio..!!

Como primero quiero mostrarles como va a quedar nuestro menú.



Bueno ya sabemos como debe quedar, ahora manos a la obra.

Lo primero que necesitamos son dos librerias de jquery (en el ejemplo adjunto las encuentran), las agregamos a nuestro proyecto y posteriormente las referenciamos en nuestra página... es decir, no debe quedar algo asi:


<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>

<script src="Scripts/jquery.contextMenu.js" type="text/javascript"></script>


y alli lo q estamos haciendo es referenciando los archivos de script a la página.

Ahora, el menú contextual no es nada más que una simple lista, la cual definimos de la siguiente manera:


<ul id="myMenu" class="contextMenu">

<li class="Opcion"><a href="#Opcion1">Opción 1</a></li>

<li class="Opcion"><a href="#Opcion2">Opción 2</a></li>

<li class="Opcion"><a href="#Opcion3">Opción 3</a></li>

</ul>


en donde definimos tantos items de lista como opciones de menú necesitemos.

Luego de tener creado el "menú", en la definición de las columnas del gridview, se debe definir una columna la cual tendrña una imagen o link o boton (lo que deseen) para que ar dar clic derecho podamos visualizar el menú), en resumen la columna quedaria:


<asp:TemplateField>

<ItemTemplate>

<div id="myDiv">

<img src="~/images/options.png" id="img" runat="server" title="Ver opciones [click derecho]" />

</div>

</ItemTemplate>

</asp:TemplateField>


Lo importante aqui es q el div que se define será el encargado de mostrar el menú contextual, por eso antes decia que se puede usar una imagen, un boton, etc, y dentro del div definimos el control, en mi caso usé una imagen de html.

Y en este punto ya hemos terminado con el diseño del gridview y del menú contextual, ahora lo que debemos hacer es con jquery crear de verdad el menú...nuestro código jquery quedaría así:


<script type="text/javascript">

    $(function() {

       $("#GridViewDatos div").click(function() {

            $("#GridViewDatos div").enableContextMenu();

    });



    $(document).ready(function() {

       $("#GridViewDatos div").contextMenu({

          menu: 'myMenu'

          }, function(action, el, pos) {

             switch (action) {

               case "Opcion1":

                  {

                   alert('Ha seleccionado la opción 1');

                   break;

                  }

               case "Opcion2":

                  {

                   alert('Ha seleccionado la opción 2');

                   break;

                  }

               case "Opcion3":

                  {

                   alert('Ha seleccionado la opción 3');

                   break;

                  }

               }

           });

       });

    });

    </script>


Bueno ahora vamos a comentar...

La primera función que tenemos, lo que hace activar el menú contextual en pocas palabras, y la segunda función la cual es la más compleja, y lo que hace es al div que encuentra dentro del gridview le asigna el menú que creamos, es decir la lista que se definio, por eso el id de la lista es el mismo valor del atributo menu. Luego viene una función que tiene tres argumentos, los cuales sirven para capturar la acción o el item seleccionado del menú contextual, una manera fácil es hacer un switch al action y definir diferentes case para cada opción, los case son definidos con base al valor href de la etiqueta "a" de la lista creada, por eso en el ejemplo se ha definido 3 case (opcion1,opcion2 y opcion3).. luego se muestra un mensaje informando la opción elegida, ya depende de cada necesidad definir la funcionaldiad deseada...

Buenos espero que les sea de ayuda el ejemplo... como siemore cualquier comentario es bien recibido...

Descarga del código fuente !!

En el siguiente post el cual espero subir la otra semana, vamos a realizar un autocomplete contra una base de datos sql con jquery...

Recursos de estudio

Hola a todos, bueno no he tenido el tiempo suficiente para hacer el ejemplo, pero les aseguro que para la otra semana estara arriba... hoy les quiero traer dos páginas en las que podrán encontrar cursos, videos y demos sobre todo en .net... espero les sesa de utilidad..

http://dotnet-u.com/Courses.aspx

http://geeks.ms/blogs/ajimenez/archive/2010/03/11/actualizado-cursos-de-programaci-243-n-web-c-vb-azure-windows-7-dynamics-mobile-silverlight-etc.aspx

Bueno ajala lo aprovechen...

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í !!