Javascript Smooth Scroll

•10 Febrero, 2008 • No hay comentarios

df Javascript Smooth Scroll es una pequeña librería que te permitirá agregar un efecto de transición al acceder a los anchor en una página web. Es compatible con la mayoría de navegadores y solo pesa 1024 bytes.

smoothscroll.jpg

Típicamente al acceder a un anchor, el browser se mueve directamente a la posición del anchor, pero si deseamos aplicarlo un movimiento suave para acceder al anchor esta es la librería que necesitamos.

Como utilizar Smooth Scroll
El uso es muy sencillo, luego de descargar los archivos fuentes desde df_smooth_scroll.zip, luego al momento de crear nuestro html debemos incluir el archivo smooth.pack.js de la siguiente forma:

  1. <script type="text/javascript" src="smooth.pack.js"></script>

Lo siguiente es agregar los anchor de la forma normal es decir no hace falta agregar ningún código adicional para el funcionamiento.

  1. <a href="#footer" name="top">Go To Footer</a>
  2. <p> text body </p>
  3. <a href="#top" name="footer">Go To Header</a>

Uniendo estas lineas, obtendremos un resultado muy agradable pues los movimientos son muy suaves lo que facilita el proceso de moverse en la página. Finalmente pueden ver el ejemplo funcionando en df_smooth_scroll.html.

ThickBox: Ventanas flotantes

•10 Febrero, 2008 • 2 comentarios

ThickBox es una librería javascript que permite abrir ventanas flotantes sobre páginas HTML. Esto nos permitirá mostrar imágenes o paginas sobre una ventana emergente y sin necesidad de abrir una ventana nueva, evitando de esa forma también el Bloqueador de popup de nuestro navegador.

thickbox.gif

ThickBox, creado por Cody Lindley y que acaba de llegar a la versión 2.0 es sencilla de utilizar. Primero debes descargar los archivos necesarios para su funcionamiento:

  • jquery.js: Librería necesaria para el funcionamiento e thickbox.
  • thickbox.js: Funciones thickbox para abrir las ventanas.
  • thickbox.css: Hoja de estilos para la ventana emergente.
  • loader.gif: imagen que se mostrará mientras se carga el contenido de la ventana emergente

Entonces una vez que se tienen todos los archivos, lo siguiente es incluir las librerías, la hoja de estilos en nuestro HTML, esto se incluye antes de cerrar el tag HEAD.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="thickbox.js"></script>
  3. <link rel="stylesheet" href="thickbox.css" type="text/css" />

Luego cuando se quiere insertar una pantalla flotante con una imagen, esto se hace sobre un enlace, por ejemplo si deseamos incluir un enlace para abrir una imagen:

  1. <a href=“flash9.gif” class=“thickbox” title=“Ejemplo ThickBox”>

Donde se tiene que class=”thickbox” es el que indica a las librerías thickbox que se abrirá una ventana emergente, el otro dato importante es que lo que se asigne a la propiedad title se mostrará como titulo de la ventana emergente. Resumiendo podemos decir que a cualquier enlace que tengamos en nuestra página solo es necesario aplicarlo el estilo thickbox.

Esto es para el caso de las imágenes, pero si deseamos incluir una página externa, el código cambio poco, donde tenemos que incluir el ancho y el alto de la ventana emergente en la url que se le pasará a la propiedad href, veamos el siguiente ejemplo donde abrimos la página de Google.

  1. <a
    
  2. href="http://www.google.com?TB_iframe=true&height=420&width=600"
  3. title="Google"
  4. class="thickbox">Google</a>

            Se observa que el código adicional es ?TB_iframe=true&height=420&width=600, es obvio donde se pone el ancho y alto de la ventana.

            Crear arrays de controles en Visual basic 2005

            •17 Enero, 2008 • 1 comentario

            COMO USAR LA CLASE?

            1. Hay que declarar lo siguiente: Dim m_TextBox1 As ArrayControles(Of TextBox)

            2. Instanciar la clase:  m_TextBox1 = New ArrayControles(Of TextBox)(“datos”, Me)
                 Donde el valor “datos” que se le pasa al constructor es el prefijo de todos vuestros controles(textbox en este caso).

            Es importante que los controles tengan la siguiente estructura:
            datos_00, datos_01…etc
            La clase extraera el numero para saber con cual esta tratando, ese es su index vaya.
            El nombre es indiferente, pero al llamar al constructor tienes que pasarle el nombre que le hayas puesto.

            Para hacer el array con otro tipo de elementos solo hay que indicar en (Of TextBox) cual es el tipo de elementos. Ejemplo:

                Private m_Label1 As ArrayControles(Of Label)
                Private m_TextBox1 As ArrayControles(Of TextBox)
                Private m_RadioButton1 As ArrayControles(Of RadioButton)

            EJEMPLO SENZILLO

            Creas tres textbox en tu formulario y le pones de nombre: txtCampo_00, txtCampo_01, txtCampo_02.
            Despues creas un boton y en su evento click colocas lo siguiente:

            Dim m_TextBox1 As ArrayControles(Of TextBox)Dim i As Integer

            i = 0

            m_TextBox1 = New ArrayControles(Of TextBox)(“txtCampo”, Me)For i = 0 To 2m_TextBox1(i).Text = “Este es el campo de texto numero ” & i

            Next

            CLASSE A UTILIZAR

            Option Strict OnImports Microsoft.VisualBasic

            Imports System

            Imports System.Collections.Generic

            Imports System.Windows.Forms

            Imports System.Drawing Public Class ArrayControles(Of T As Control)Inherits System.Collections.Generic.List(Of T)Private m_Nombre As String

            ”’ <summary>

            ”’ En el constructor se debe indicar el nombre del control.

            ”’ </summary>

            ”’ <param name=”elNombre”>

            ”’ El nombre base de los controles del array,

            ”’ esos controles deben tener el nombre: elNombre_numero.

            ”’ No se admite una cadena vacía.

            ”’ </param>

            ”’ <remarks></remarks>

            Public Sub New(ByVal elNombre As String)MyBase.New()If String.IsNullOrEmpty(elNombre) Then

            Throw New ArgumentException( _“El nombre del control no puede ser una cadena vacía”)End If

            ‘ Asignarlo a la propiedad

            ‘ para que se convierta en minúsculas

            ‘ o cualquier otra comprobación.

            Me.Nombre = elNombreEnd Sub

            ”’ <summary>

            ”’ Constructor para inicializar directamente la colección de controles

            ”’ </summary>

            ”’ <param name=”ctrls”>

            ”’ Colección de controles en la que están los que debemos usar.

            ”’ </param>

            ”’ <param name=”elNombre”>

            ”’ El nombre base de los controles a tener en cuenta.

            ”’ </param>

            ”’ <remarks></remarks>

            Public Sub New( _ByVal elNombre As String, _

            ByVal ctrls As Control.ControlCollection)Me.New(elNombre)

            Me.Clear()asignarLosControles(ctrls)

            Me.Reorganizar()End Sub

            ”’ <summary>

            ”’ Constructor para inicializar directamente la colección de controles

            ”’ </summary>

            ”’ <param name=”contenedor”>

            ”’ El contenedor que tiene los controles a comprobar.

            ”’ </param>

            ”’ <param name=”elNombre”>

            ”’ El nombre base de los controles a tener en cuenta.

            ”’ </param>

            ”’ <remarks></remarks>

            Public Sub New( _ByVal elNombre As String, _

            ByVal contenedor As ContainerControl)Me.New(elNombre, contenedor.Controls)End Sub

            ”’ <summary>

            ”’ Asignar los controles de la colección indicada.

            ”’ </summary>

            ”’ <param name=”ctrls”>

            ”’ Colección de controles en la que están los que debemos usar.

            ”’ El nombre usado será el indicado al crear la colección.

            ”’ </param>

            ”’ <remarks>

            ”’ La colección de controles puede ser Me.Controls

            ”’ ya que aquí solo se tendrán en cuenta los controles

            ”’ que tengan el nombre usado en esta clase,

            ”’ y se recorren todas las colecciones de controles que haya.

            ”’ </remarks>

            Public Sub AsignarControles(ByVal ctrls As Control.ControlCollection)Me.Clear()asignarLosControles(ctrls)

            Me.Reorganizar()End Sub

            ”’ <summary>

            ”’ Asignar los controles del contenedor indicado.

            ”’ </summary>

            ”’ <param name=”contenedor”>

            ”’ El contenedor de los controles en los que se buscarán

            ”’ los del tipo indicado en esta colección.

            ”’ </param>

            ”’ <remarks></remarks>

            Public Sub AsignarControles(ByVal contenedor As ContainerControl)Me.Clear()asignarLosControles(contenedor.Controls)

            Me.Reorganizar()End Sub

            Private Sub asignarLosControles(ByVal ctrls As Control.ControlCollection)‘ El tipo debe ser Control, para tener en cuenta todos los controles

            ‘ que haya en la colección indicada.

            For Each ctr As Control In ctrls‘ Hacer una llamada recursiva por si este control “contiene” otros

            If ctr.Controls.Count > 0 Then

            asignarLosControles(ctr.Controls)

            End If

            If ctr.Name.ToLower().IndexOf(m_Nombre) > -1 Then

            Me.Add(TryCast(ctr, T))End If

            Next

            End Sub

            ‘ Sobrecargas de la propiedad predeterminada (Item)

            ”’ <summary>

            ”’ Propiedad predeterminada para devolver

            ”’ el control con el nombre indicado.

            ”’ </summary>

            ”’ <param name=”name”>

            ”’ El nombre del control a buscar.

            ”’ </param>

            ”’ <value></value>

            ”’ <returns>

            ”’ El control que tiene el nombre indicado.

            ”’ </returns>

            ”’ <remarks></remarks>

            Default Public Overloads ReadOnly Property Item(ByVal name As String) As TGet

            Dim index As Integer = Me.Index(name)‘ Si existe, devolverlo, sino, devolver un valor nulo

            If index = -1 Then

            Return Nothing

            End If

            Return Me(index)End Get

            End Property

            ”’ <summary>

            ”’ Sobrecarga de la propiedad predeterminada

            ”’ para permitir el acceso con un valor de tipo Object.

            ”’ Aunque el tipo debe ser del que contiene la colección,

            ”’ si no es así, se devuelve un valor nulo.

            ”’ </summary>

            ”’ <param name=”obj”>

            ”’ El control a comprobar

            ”’ </param>

            ”’ <value></value>

            ”’ <returns>

            ”’ Si el parámetro es del tipo adecuado,

            ”’ se devuelve con el tipo de la colección,

            ”’ si no lo es, se devuelve un valor nulo.

            ”’ </returns>

            ”’ <remarks></remarks>

            Default Public Overloads ReadOnly Property Item(ByVal obj As Object) As TGet

            Dim ctrl As T = TryCast(obj, T)Return ctrl‘ Quita estos comentarios y comenta el Return anterior

            ‘ si quieres que se compruebe exactamente el control.

            ” Buscar ese control en la colección,

            ” para asegurarnos de que en realidad está.

            ‘If ctrl Is Nothing Then

            ‘ Return Nothing

            ‘End If

            ‘For Each c As T In Me

            ‘ If c Is ctrl Then

            ‘ Return c

            ‘ End If

            ‘Next

            ‘Return Nothing

            End Get

            End Property

            ”’ <summary>

            ”’ Devuelve el índice del control de esta colección

            ”’ que tenga el mismo índice que el del parámetro.

            ”’ Ese parámetro puede ser cualquier control,

            ”’ y lo que se tendrá en cuenta será el nombre usado,

            ”’ el cual debe tener la forma nombre_indice,

            ”’ de forma que se devolverá el control que tenga ese mismo índice.

            ”’ </summary>

            ”’ <param name=”obj”>

            ”’ El control a comprobar si existe un índice como el indicado.

            ”’ Al ser de tipo Object no es necesario que sea del mismo tipo

            ”’ que los que contiene esta colección.

            ”’ </param>

            ”’ <returns>

            ”’ El índice correspondiente.

            ”’ Aunque no se comprueba si existe en la colección.

            ”’ En el caso de que el parámetro no tenga el formato adecuado,

            ”’ se devuelve -1.

            ”’ </returns>

            ”’ <remarks>

            ”’ Esta sobrecarga se puede usar para buscar el control correspondiente

            ”’ con el del índice de otro control, por ejemplo:

            ”’ i = m_TextBox1.Index(sender)

            ”’ Por supuesto, el parámetro debe ser de tipo Control.

            ”’ Este método podría estar compartido, pero debido a que su uso

            ”’ sería ArrayControles(Of TIPO).Index(sender)

            ”’ he preferido dejarlo como de instancia.

            ”’ </remarks>

            Public Function Index(ByVal obj As Object) As Integer

            Dim ctrl As Control = TryCast(obj, Control)If ctrl Is Nothing Then

            Return -1End If

            Dim i As Integer = -1i = ctrl.Name.LastIndexOf(“_”)If i > -1 Then

            i = CInt(ctrl.Name.Substring(i + 1))End If

            Return iEnd Function

            ”’ <summary>

            ”’ Devuelve el índice del control con el nombre indicado.

            ”’ </summary>

            ”’ <param name=”name”>

            ”’ Nombre del control a buscar en la colección.

            ”’ </param>

            ”’ <returns>

            ”’ Un valor de tipo entero con el índice del control.

            ”’ </returns>

            ”’ <remarks></remarks>

            Public Function Index(ByVal name As String) As Integer

            Dim hallado As Integer = -1For i As Integer = 0 To Me.Count - 1

            Dim ctrl As T = Me(i)If String.Compare(ctrl.Name, name, True) = 0 Then

            hallado = i

            Exit For

            End If

            Next

            Return halladoEnd Function

            ”’ <summary>

            ”’ Devuelve el índice del control indicado.

            ”’ </summary>

            ”’ <param name=”ctrl”>

            ”’ El control del que queremos averiguar el índice.

            ”’ </param>

            ”’ <returns>

            ”’ Un valor de tipo entero con el índice del control.

            ”’ </returns>

            ”’ <remarks></remarks>

            Public Function Index(ByVal ctrl As T) As Integer

            Dim i As Integer = ctrl.Name.LastIndexOf(“_”)‘ Si el nombre no tiene el signo _

            If i = -1 Then

            i = Me.IndexOf(ctrl)Else

            i = CInt(ctrl.Name.Substring(i + 1))End If

            Return iEnd Function

            ”’ <summary>

            ”’ La propiedad Nombre, externamente será de solo lectura.

            ”’ </summary>

            ”’ <value>El nombre de la colección de controles</value>

            ”’ <returns>

            ”’ El nombre de la colección de controles.

            ”’ </returns>

            ”’ <remarks>

            ”’ </remarks>

            Public Property Nombre() As String

            Get

            Return m_NombreEnd Get

            Private Set(ByVal value As String)m_Nombre = value.ToLower()

            End Set

            End Property

            ”’ <summary>

            ”’ Reorganizar el contenido de la colección,

            ”’ ordenando por el índice indicado después del guión bajo

            ”’ </summary>

            ”’ <remarks></remarks>

            Public Sub Reorganizar()Dim ca As New List(Of T)

            For i As Integer = 0 To Me.Count - 1For Each ctr As T In Me

            If i = Me.Index(ctr) Then

            ca.Add(ctr)

            Exit For

            End If

            Next

            Next

            Me.Clear()For Each ctr As T In ca

            Me.Add(ctr)Next

            End SubEnd Class

            DOCUMENTACION

            http://www.elguille.info/NET/vs2005/como/array_controles_visual_basic_2005.htm

            Visual Basic .NET 2005 y con conexion a MySQL

            •17 Enero, 2008 • 15 comentarios

            El tutorial de VB-MySQL - Parte 3

            Por Mike Hillyer

            Última Actualización: 15 de Febrero, 2004

            1. Introducción
            2. Diseño de un Sistema de Acceso
            3. Utilizar MySQL Administrator
              • Descarga e Instalación MySQL Administrator
              • Conexión a MySQL Server
              • Agregar Un Usuario
            4. Connector/NET
              • Descarga e Instalación de Connector/NET
            5. Visual Basic.NET
              • Descarga e Instalación de Visual Basic.NET 2005 Express Edition
              • Inicio de Visual Basic.NET
              • La Ventana Principal de VB.NET
              • Asignar un Nombre al Formulario por Defecto
              • Agregar Referencias
              • Guardar el Proyecto
            6. Diseño del Formulario de Acceso
            7. Creación de un Evento
            8. Inicio de la Aplicación
            9. Importación del Sistema de Nombres de Connector/NET
            10. Agregar un Objeto MySqlConnection
            11. Instanciación del Objeto MySqlConnection
            12. Armado del String de Conexión
            13. Apertura de la Conexión
            14. Utilización de un MessageBox
            15. Cierre de la Conexión
            16. Eliminación del Objeto MySqlConnection
            17. Captura de Errores
            18. Prueba del Proyecto
            19. Mejoras
            20. Conclusión

            Introducción

            Este artículo es la tercera parte de una serie de artículos realizados para documentar la creación de aplicaciones de Windows® utilizando Visual Basic.NET y MySQL. En los artículos anteriores, he descrito cómo diseñar una aplicación y base de datos, instalar MySQL y MySQL Query Browser y cómo completar nuestra tabla utilizando la función Script Editor de MySQL Query Browser.

            En este artículo, describiré cómo instalar Microsoft Visual Basic 2005 Express Edition, MySQL Administrator y MySQL Connector/NET. Utilizaremos estas herramientas para crear un formulario de acceso al sistema para nuestra aplicación de registro.

            Diseño de un Sistema de Acceso

            Existen varias opciones posibles al trabajar en un sistema de accesos pero generalmente se opta por una de dos opciones:

            1. Crear tu propio sistema de acceso. Almacena nombres de usuarios y contraseñas en una tabla de MySQL y utiliza una única cuenta de usuario para todas las instancias de la aplicación que se conecte a MySQL. Cada instancia de la aplicación se conectará a una cuenta de servidor y luego validará el usuario utilizando las tablas que se han creado.
            2. Utilizar las tablas de seguridad propias de MySQL. Crea usuarios MySQL para cada cuenta y deja que MySQL se encargue de la administración de la autenticación y los privilegios.

            Ambos enfoques tienen sus respectivas ventajas y desventajas. Cuando construyes un sistema de acceso, potencialmente tienen mayor control sobre los usuarios, grupos y privilegios. Tienes un manejo más simple de los permisos porque se necesita un único MySQL nativo. Por otra parte, existe una mayor probabilidad de que existan problemas de seguridad porque lo que crees no pasará por un proceso de revisión como el que tiene el servidor MySQL. Además, tienes un punto débil en cuanto a la seguridad ya que cada instalación del cliente tiene una copia de la cuenta central de usuario para conectarse a MySQL y esa cuenta debe tener la mayor cantidad de permisos posible para un usuario administrativo. Estas consideraciones no son tan importantes al desarrollar una aplicación web porque es más fácil manejar una instancia web que una colección de aplicaciones de escritorio.

            Cuando uses las opciones de seguridad propias de MySQL, obtienes un sistema de administración de privilegios robusto que ha sido minuciosamente revisado y probado. Puedes restringir los privilegios con gran detalle e incluso asignar distintos permisos basados en el host desde el cual se conecta un usuario. La desventaja tiene que ver con la complejidad: sacarle el mayor provecho a la autenticación propia de MySQL es más difícil que hacer una por tu cuenta y deberás agregar un usuario al servidor MySQL cada vez que quieras agragar un nuevo usuario a tu aplicación.

            Como esta no es una aplicación basada en web, crearemos nuestra aplicación utilizando el sistema de privilegios propio de MySQL. Para poder crear un usuario nativo en MySQL tendremos que instalar primero MySQL Administrator, una aplicación GUI para la administración de servidores.

            Utilizar MySQL Administrator

            MySQL Administrator es una herramienta GUI lanzada por MySQL AB para administrar tu servidor MySQL. MySQL Administrator puede utilizarse para administrar usuarios, cambiar la configuración del servidor, manipular las bases de datos del servidor y monitorear el estado del servidor.

            Descarga e Instalación de MySQL Administrator

            MySQL Administrator puede descargarse desde http://dev.mysql.com/downloads/administrator/1.0.html. En nuestro caso, necesitamos la versión de Windows que incluye el instalador, evita tomar la versión ‘Without Installer’ (Sin Instalador). Guarda el instalador en tu disco y haz doble clic en el icono del instalador para comenzar la instalación. El instalador es un instalador estándar de Windows y no debería requerir ninguna acción especial.

            Conexión a MySQL Server

            Luego de que finalice la instalación, debería aparecer un icono de MySQL Administrator en tu escritorio. Haz doble clic en el icono de MySQL Administrator para ver el formulario de acceso. También puedes iniciar MySQL Administrator haciendo clic en Inicio > Programas > MySQL > MySQL Administrator.

            El formulario de acceso de MySQL Administrator es casi idéntico al formulario de acceso a MySQL Query Browser, con la diferencia de que MySQL Administrator no requiere que se le especifique un esquema por defecto. Ingresa tu información de acceso como usuario root y presiona el botón OK (Aceptar) para abrir MySQL Administrator.

            Agregar Un Usuario

            Haz clic en la opción User Administration (Administración de Usuarios) del panel de menúes de la izquierda para ver la pantalla de administración de usuarios.

            Presiona el botón New User (Nuevo Usuario) para crear una cuenta como nuevo usuario. En la opción MySQL User (Usuario de MySQL) utiliza el valor de username (nombre de usuario) que estableciste en tu fila de usuario en el tutorial anterior. Agrega una contraseña y establece cualquier Información Adicional que quieras especificar (toda la información de la sección Additional Information es opcional).

            Cuando ya hayas puesto un nombre de usuario y contraseña, presiona la solapa Schema Privileges (Privilegios del Esquema). Haz clic sobre la base de datos entrada_salida y luego sobre el botón para asignarle a tu usuario todos los privilegios disponibles para la base de datos (refinaremos la lista de privilegios en el futuro). Presiona el botón Apply Changes (Aplicar Cambios) para crear el nuevo usuario. Ahora puedes cerrar MySQL Administrator.

            Connector/NET

            A principios de 2004 MySQL AB contrató a Reggie Burnett de ByteFX y adquirió su proveedor de datos ByteFX .NET para MySQL. El proveedor se renombró por Connector/NET y no sólo se provee gratis bajo los términos de la GNU Public License, sino que es uno de las más completos y mejores proveedores de .NET para MySQL disponibles en la actualidad. Connector/NET fue escrito en C# y es un código completamente manipulable, permitiendo su portabilidad a cualquier plataforma que soporte .NET, incluso Mono. Una ventaja que ofrece Connector/NET por sobre otras soluciones es su uso del protocolo MySQL nativo: muchas otras soluciones envuelven la librería de cliente C de MySQL y sufren una pérdida de performance como consecuencia.

            Descarga e Instalación de Connector/NET

            MySQL Connector/NET puede ser descargado desde http://dev.mysql.com/downloads/connector/net/. Descarga la versión que incluye el instalador a tu disco rígido local y descomprime el archivo Zip.

            Haz doble clic sobre el archivo de instalación para comenzar el proceso de instalación. Realiza una instalación completa en el directorio por defecto.

            Visual Basic.NET

            Visual Basic.NET es la nueva versión de Visual Basic. Si bien comparte el nombre Visual Basic, existen diferencias significativas entre Visual Basic 6 y Visual Basic.NET. VB.NET ya está entrando en su tercera versión. La primera versión fue Visual Basic.NET, la segunda fue Visual Basic.NET 2003 y la nueva versión es Visual Basic.NET 2005. Visual Basic.NET 2005 está actualmente en su fase de prueba beta y además esta versión presenta una nueva versión Express que utilizaremos en este tutorial.

            La versión Express de Visual Basic.NET es básicamente una versión pelada que conserva toda las funciones necesarias para producir aplicaciones básicas (no quise lograr ningún juego de palabras).

            Descarga e Instalación de Visual Basic.NET 2005 Express Edition

            VB.NET 2005 Express Edition puede descargarse desde http://lab.msdn.microsoft.com/express/vbasic/default.aspx. Busca algún hipervínculo de descarga para la Community Technical Preview (Adelanto para la Comunidad Técnica) o algún hipervínculo tipo Download Now (Descargue Ahora).

            Cuando hayas descargado el instalador, hazle doble clic para comenzar el proceso de instalación. Las opciones de la instalación por defecto deberían ser suficientes.

            Inicio de Visual Basic.NET

            Cuando ya hayas instalado VB.NET 2005, busca un acceso dentro de la sección Programas de tu menú Inicio que diga Visual Basic 2005 Express Edition Beta. Inicia VB.NET y presiona Ctrl + N para crear un nuevo proyecto.

            Ingresa un nombre para el proyecto y elige la plantilla Windows Application (Aplicación para Windows). Presiona el botón OK (Aceptar) para crear el proyecto.

            La Ventana Principal de VB.NET Window

            Cuando se cree tu proyecto, deberías ver una ventana parecida a esta:

            A la izquierda se encuentra la barra de herramientas. Puedes arrastrar elementos de la barra de herramientas para agregarlos a tu aplicación. En el centro tenemos el espacio de trabajo, el cual nos muestra el primer formulario en la vista Diseño. A la derecha está el Solution Explorer (Explorador de Soluciones), que muestra todos los archivos involucrados en nuestro proyecto.

            Asignar un Nombre al Formulario por Defecto

            Primero haz clic en el objeto Form1.vb del Solution Explorer y elige la opción Properties (Propiedades). Esto te mostrará una ventana de diálogo de propiedades donde podremos renombrar el archivo.

            La herramienta Propiedades se utiliza para establecer varias propiedades de los objetos que manejaremos a medida que trabajemos en nuestro proyecto. En este caso, queremos cambiar la propiedad File Name (Nombre de Archivo) para reflejar más apropiadamente el propósito del formulario. Agregaré el prefijo frm a los nombres de los formularios. No cambies la extensión del archivo del formulario.

            Cuando hayas cambiado el nombre del archivo, haz clic en el formulario dentro del espacio de trabajo. La herramienta Propiedades cambiará para reflejar las propiedades del formulario. Desplázate hacia abajo hasta que encuentres la propiedad Text (Texto) y ponle algo apropiado. En mi caso, le puse Entrada-Salida - Acceso. La propiedad Text determina lo que aparece como título del formulario y puedes ver esto reflejado en el espacio de trabajo.

            Agregar Referencias

            Antes de comenzar a utilizar Connector/NET con Visual Basic, necesitamos agregar una referencia a nuestro proyecto. Al agregar una referencia, le estamos diciendo a VB.NET dónde debe buscar MySQL Connector/NET para poder acceder a los objetos y métodos de Connector/NET.

            Para agregar una referencia, elige la opción Add Reference… (Agregar Referencia…) del menú Project (Proyecto). Elige la solapa Browse (Examinar) y localiza la instalación de Connector/NET, generalmente ubicada en C:\Program Files\MySQL\MySQL Connector Net 1.0.2\bin\.NET 1.1 (o su equivalente C:\Archivos de Programa\MySQL\MySQL Connector Net 1.0.2\bin\.NET 1.1) (La ruta puede variar dependiendo del número de versión de Connector/NET). Elige el archivo MySql.Data.dll y connector/NET se agregará a tu proyecto.

            Guardar el Proyecto

            Ahora que ya hemos configurado algunas opciones de nuestro proyecto, deberíamos guardar el proyecto antes de continuar. Elige la opción Save All (Guardar Todo) del menú File (Archivo). Como esta es la primera vez que guardamos el proyecto, aparece la siguiente pantalla de diálogo:

            Estas opciones deberían aceptarse generalmente, guardando el proyecto en una nueva carpeta dentro de la carpeta Mis Documentos/Visual Studio/Projects (en mi caso utilizo una ruta personalizada a Mis Documentos). Presiona el botón Save (Guardar) para guardar tu proyecto.

            Diseño del Formulario de Acceso

            Para diseñar el formulario de acceso, arrastra los objetos desde la barra de herramientas hasta el formulario. En nuestra primera versión necesitaremos pedirles a los usuarios un nombre de servidor, nombre de usuario y contraseña. Haz clic en el objeto TextBox de la barra de herramientas y arrástralo hasta el formulario. Una vez que se ubique dentro del formulario, lo puedes estirar, mover y generalmente mejorar su tamaño y posición. Cuando estés contento con la ubicación del cuadro de texto, ve a la herramienta Propiedades y busca la propiedad Name (Nombre). Cambia el nombre para reflejar mejor el uso del cuadro de texto (en mi caso le puse txtServidor). Agrega dos cuadros de texto adicionales y llámalos txtUsuario y txtContraseña.

            Aunque nos parezca obvio cuál es el propósito de cada cuadro de texto, el usuario final probablemente necesite algo de ayuda. Utilizaremos objetos Label (Etiquetas) como indicios para el usuario que le indicarán para qué se utiliza cada cuado de texto. Arrastra el objeto etiqueta hasta el formulario y ubícala en la misma línea que el primer cuadro de texto. Una vez que está ubicada, busca la propiedad Text (Texto) en la herramienta Propiedades y ponle algo como Servidor:. Repite este proceso dos veces más para los objetos TextBox restantes. Como no utilizaremos las etiquetas en el código verdadero de la apliación, no hay necesidad de cambiar los nombres por defecto de las etiquetas.

            El elemento final que debe agregarse a nuestro formulario será un par de botones; uno para iniciar el proceso de acceso y el otro para cancelar. Arrastra los botones al formulario y establece la propiedad Name (Nombre) a cmdIngresar y cmdCancelar. Cambia la propiedad Text (Texto) a Ingresar y Cancelar, respectivamente.

            Cuando hayas terminado este proceso, tu formulario debería verse así:

            Creación de un Evento

            Voy a empezar creando un evento para el botón Cancelar. Un evento es algo que dispara la ejecución de código dentro de VB.NET. En este caso, el evento en cuestión será el haber presionado el botón Cancelar. La forma más simple de crear un evento de clic de botón es hacer doble clic en el botón del formulario. Cuando haces doble clic en el botón cancelar, se mostrará la vista Código del formulario y podrás ver el siguiente código:

            Public Class frmAcceso Private Sub cmdCancelar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmdCancelar.Click  End Sub End Class

            La línea Public Class indica que esta clase describe nuestro formulario y la línea Private Sub muestra que esta es una subfunción que maneja el evento Click del objeto cmdCancelar. Las dos líneas End muestran dónde termina el código de cada una de estas secciones.

            Agregaremos una única línea a la subfunción para cerrar la aplicación cuando se haga clic en el botón:

            Application.Exit()

            Esta línea le indica a la aplicación que debe cerrarse y será ejecutada cuando hagamos clic en el botón Cancelar. Ahora, tu código debería verse así:

            Public Class frmAcceso Private Sub cmdCancelar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

            Handles cmdCancelar.Click

            Application.Exit()

            End Sub

            End Class

            Inicio de la Apliación

            Una vez que hayas ingresado el código, guarda el proyecto y presiona la tecla F5 para probar la aplicación. También puedes elegir la opción Start (Iniciar) desde el menú Debug (Depuración) hacer clic en el icono verde de la barra de herramientas.

            Tu formulario debería mostrarse y si haces clic en el botón Cancelar, el formulario debería desaparecer para cerrar la aplicación. Si presionas el botón Ingresar, no sucederá nada ya que no hemos creado ningún código para el evento de presionar el botón Ingresar.

            Importación del Sistema de Nombres de Connector/NET

            Los objetos de VB.NET se organizan en sistemas de nombres. Los sistemas de nombres son agrupaciones lógicas de objetos que se utilizan para facilitar la organización los distintos objetos disponibles en VB.NET.

            Para utilizar un objeto Connection necesitas definirlo como MySql.Data.MySqlClient.MySqlConnection (hablaremos más sobre este objeto luego). Por supuesto que esto es muy largo para escribirlo seguido por lo que podemos utilizar la sentencia Imports para acortarlo.

            Si agregamos Imports MySql.Data.MySqlClient al principio del archivo fuente, nos podemos referir al objeto Connector/NET como MySqlConnection.

            Agregar un Objeto MySqlConnection

            MySQL Connector/NET es básicamente una colección de objetos utilizados para acceder a una base de datos MySQL. El primer objeto que utilizaremos es el objeto MySqlConnection. El objeto de conexión funciona como un intermediario entre los demás objetos contenidos dentro de Connector/NET y el servidor MySQL. El objeto de conexión maneja el proceso de acceso y es el objeto que utilizaremos para verificar que la información de acceso de un usuario es correcta.

            Existen dos pasos para crear un objeto. Primero, declaramos el objeto, luego lo instanciamos. Cuando declaramos un objeto, le asignamos un nombre que usaremos para referirnos a él y también indicamos el alcance del objeto, o en otras palabras, qué funciones y procedimientos puede acceder el objeto. En nuestro caso, tenemos que asegurarnos de que cualquier función o procedimiento dentro del formulario tenga acceso al objeto de conexión, por lo tanto declararemos el objeto de conexión en primer lugar dentro de la clase:

            Imports MySql.Data.MySqlClient

            Public Class frmAcceso

            Dim con As MySqlConnection

            Private Sub cmdCancelar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

            Handles cmdCancelar.Click

            Application.Exit()

            End Sub

            End Class

            La palabra clave Dim se utiliza al declarar objetos y variables. Yo utilicé con como nombre para mi objeto de conexión. La palabra clave As se usa para indicar qué estamos declarando (un objeto, una variable, etc). Finalmente, MySqlConnection es el objeto que estamos declarando.

            Instanciación del Objeto MySqlConnection

            Ahora que ya hemos declarado el objeto de conexión, debemos instanciarlo. Hasta que no hayamos instanciado un objeto, no estará disponible para ser utilizado. Instanciaremos el objeto dentro de la subfunción que maneja el evento click del botón Ingresar. Haz doble clic en el botón Ingresar en la vista Diseño para crear la subfunción.

            Para instanciar el objeto utilizaremos la palabra clave New:

            Private Sub cmdIngresar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

            Handles cmdIngresar.Click

            con = New MySqlConnection()

            End Sub

            Armado del String de Conexión

            El objeto MySqlConnection utiliza un string de conexión para conocer a qué servidor debe conectarse, qué base de datos acceder y qué nombre de usuario y contraseña utilizar para autenticarse. Las distintas propiedades se separan con punto y coma. Este es un ejemplo de un string de conexión:

            server=localhost; user id=mike; password=12345; database=entrada_salida

            Obviamente, necesitamos que el string de conexión refleje la información que el usuario ingrese en el formulario. Para hacer esto utilizaremos el carácter & para unir los distintos strings y el valor .Text de los objetos TextBox. Adicionalmente, utilizaré el carácter _ para separar el código en varias líneas:

            Private Sub cmdIngresar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
            Handles cmdIngresar.Click 

            con = New MySqlConnection() 

            con.ConnectionString = “server=” & txtServidor.Text& “;” _ 

            & “user id=” & txtUsuario.Text& “;” _ 

            & “password=” & txtContraseña.Text& “;” _ 

            & “database=NOMBRE_BASEDATOS”  

            End Sub

            Apertura de la Conexión

            Lo último que nos queda por hacer es indicarle al objeto de conexión que abra la conexión con el servidor MySQL mediante el método .Open() del objeto de conexión:

            Private Sub cmdIngresar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

            Handles cmdIngresar.Click

            con = New MySqlConnection()

            con.ConnectionString = “server=” & txtServidor.Text& “;” _

            & “user id=” & txtUsuario.Text& “;” _

            & “password=” & txtContraseña.Text& “;” _

            & “database=NOMBRE_BD”

            con.Open()

            End Sub

            Utilización de un MessageBox

            Cuando hayamos abierto la conexión con éxito, querremos que el usuario sepa si su nombre de usuario y contraseña eran correctos. Podemos lograr esto con el objeto MessageBox. En su forma más simple, el objeto MessageBox (cuadro de mensaje) le mostrará un mensaje al usuario con un botón Aceptar. Esta es una simple línea de código para mostrar un MessageBox:

            MessageBox.Show("Conexión Abierta Con Éxito!")

            Cierre de la Conexión

            Cuando hayamos terminado con el objeto de conexión tendremos que cerrarlo. Al cerrar la conexión liberamos los recursos necesarios para mantener la conexión activa. Es una buena práctica cerrar las conexiones ni bien hayas terminado de utilizarlas. Una conexión se cierra con el método .Close().

            con.Close()

            Eliminación del Objeto MySqlConnection

            Cada vez que hayamos terminado de trabajar por completo con un objeto es una buena práctica eliminarlo, reduciendo así el consumo de recursos de nuestra aplicación. Cuando eliminamos un objeto, los recursos que ocupaba se liberan y el objeto deja de existir. Eliminamos un objeto llamando a su método .Dispose().

            con.Dispose()

            Captura de Errores

            Actualmente, nuestro código es apropiado para una situación ideal. Si no podemos conectarnos al servidor o si ingresamos un nombre de usuario o contraseña equivocada el objeto de conexión devolverá un error, también conocido como excepción. Para manejar errores, VB.NET tiene una sintaxis especial de TRY … CATCH … FINALLY. Ponemos el código con los errores potenciales después de la palabra clave TRY pero antes de la palabra clave CATCH. LA palabra CATCH se utiliza para indicar qué clase de error nos podemos encontrar (en nuestro caso, el error devuelto será un objeto Connector/NET MySqlException). Todo el código ubicado a continuación de la palabra clave FINALLY será ejecutado haya o no un error. Si ocurre una excepción, el código restante de la sección TRY no será ejecutado.

            Este es el código final que maneja la conexión:

            Private Sub cmdIngresar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

            Handles cmdIngresar.Click

            con = New MySqlConnection()

            con.ConnectionString = “server=” & txtServidor.Text& “;” _

            & “user id=” & txtUsuario.Text& “;” _

            & “password=” & txtContraseña.Text& “;” _

            & “database=entrada_salida”

            Try  
            con.Open() 
            MessageBox.Show(”Conexión Abierta Con Éxito”) 
            con.Close() 

            Catch mierror As MySqlException 
            MessageBox.Show(”Error de Conexión a la Base de Datos: ” & mierror.Message) 

            Finally 
            con.Dispose() 

            End Try 

            End Sub

            Esto combina todo el código de conexión y permite manejar errores sin que la aplicación se cierre por operaciones inválidas. Instanciamos el objeto de conexión y le asignamos un string de conexión. Dentro de un bloque TRY … CATCH de manejo de errores, intentamos abrir la conexión al servidor y, si se realiza con éxito, le mostramos un MessageBox al usuario indicando el éxito y luego cerramos la conexión.

            Si ocurre un error al conectarse, se ejecutará el código del bloque CATCH. En este caso le mostraremos al usuario un MessageBox con la propiedad .Message del objeto MySQLException, que contiene el mensaje asociado al error comprensible para los humanos.

            En el bloque FINALLY eliminamos el objeto de conexión. Hacemos esto en el bloque FINALLY porque haya o no tenido éxito la conexión, querremos eliminar el objeto.

            Prueba del Proyecto

            Cuando el código esté en su lugar, guarda el proyecto y presiona la tecla F5 para iniciar la aplicación en modo depuración. Prueba la verdadera dirección del servidor, nombre de usuario y contraseña, luego prueba usar una dirección de servidor equivocada y luego prueba una contraseña errónea. Notarás distintos mensajes de error al utilizar una dirección errónea que al utilizar una contraseña errónea. El mensaje de error al utilizar un nombre de usuario erróneo es el mismo que al utilizar una contraseña errónea, ya que un mensaje de error separado constituiría una amenaza a la seguridad ya que un potencial intruso podría saber si un nombre de usuario es correcto o no.

            Mejoras

            Hay algunas mejoras que deberán hacerse a nuestro formulario de acceso. En primer lugar, nuestro usuario no debería tener que ingresar la dirección del servidor cada vez que deseen usar la aplicación y en un futuro veremos cómo guardar la dirección del servidor en un archivo de configuración.

            La segunda mejora es con respecto al manejo de errores. Mostrar el mensaje de error de MySQL está bien durante la etapa de desarrollo pero la versión final de nuestra aplicación no debería mostrar los errores de la base de datos directamente. Podemos utilizar la propiedad .Number del objeto MySqlException para determinar qué clase de error estamos tratando y luego crear un mensaje de error personalizado.

            Para finalizar, obviamente necesitaríamos lograr que una conexión exitosa nos lleve a un nuevo formulario en nuestra aplicación. Si nuestra aplicación consistiera en formulario de acceso y nada más, seguramente no será muy popular.

            Conclusión

            En este tutorial hemos explicado la instalación de MySQL Administrator y la creación de una nueva cuenta de usuario MySQL. Luego instalamos VB.NET y MySQL Connector/NET. Finalmente utilizamos VB.NET para crear un formulario de acceso para nuestra aplicación que nos conecta al servidor MySQL (suponiendo que ingresamos la dirección de servidor y el nombre de usuario y contraseña correcta). El formulario se configuró para manejar errores durante la conexión mediante el uso de la sintaxis TRY … CATCH … FINALLY.

            El archivo del proyecto creado en este tutorial está disponible en el hipervínculo de abajo. Los archivos del proyecto son para Visual Basic 2005 Express Edition.

            En el próximo tutorial crearemos nuestro primer evento y haremos un formulario para mostrar el estado actual de nuestros usuarios.
            Código de Ejemplo #1
            Descargar Código de Ejemplo Adjunto

            Centrar capa completamente en pantalla

            •17 Diciembre, 2007 • No hay comentarios

            Aqui un mini-tutorial para centrar tus capas completamente en tu pantalla y en todas las resoluciones y tamaños de ventana.

            #capa{

            position:absolute;
            width:200px;
            height:200px;
            top:50%;
            left:50%;
            margin-left:-100px;
            margin-top:-100px;

            }

            Con esto creamos una capa de 200×200 píxeles.
            Despues le decimos al navegador que queremos que esta capa se situe en top 50% y left 50%, osea el vortice superior izquierdo de la capa quedara anclado justamente en la mitad de pantalla.
            Por ultimo como lo que queremos centrar es la capa en si no su esquina superior izquierda, le restamos al top y al left la mitad de la anchura y altura de la misma, asi el punto central de la capa sera el punto central de la pantalla.