NetCódigo

Virtual Earth Map Control

Felipe Santana — Mon, 06 Apr 2009 10:33:38 +0000

Como ya comenté en el último post, veremos en sucesivos cómo integrar servicios de Windows Live en nuestros proyectos de Visual Studio. Hoy veremos el control Virtual Earth Map.

Lo primero que debemos hacer es instalarnos Windows Live Tools for Visual Studio. La última release es de Noviembre del 2008. Esta herramienta nos habilitará los distintos controles que hasta esa fecha incluye. También instalará plantillas para nuevos proyectos aunque esto solo será posible si usamos la versión inglesa de Visual Studio. Si no es así, no hay problema, simplemente no podremos elegir la plantilla de Windows Live Web Site, no tiene mayor importancia.

Para utilizar Virtual Earht Map control lo único que tenemos que hacer es arrastrar dicho control a nuestra página.

Esta acción incluirá una referencia en nuestra página a Microsoft.Live.ServerControls. Además, hay que incluir en la página un ScriptManager para hacer posible la funcionalidad Ajax que brinda el control. Tan sencillo como esto. Este sería el código de la página.

<%@ Page Language=”VB” AutoEventWireup=”false” CodeFile=”Default.aspx.vb” Inherits=”_Default” %>

<%@ Register Assembly=”Microsoft.Live.ServerControls.VE” Namespace=”Microsoft.Live.ServerControls.VE”
TagPrefix=”ve” %>

Con simplemente este código conseguimos esto:

Sencillito ¿no?

El control viene muy bien, tiene bastantes propiedades para su personalización, a destacar:

ID. Obligatorio. Id del control.
Height. Opcional. Altura, por defecto 400px
Width. Opcional. Ancho, por defecto 400px
ZoomLevel. Opcional. Zoom por defecto
Altitude. Opcional. Altitud en metros
Center-Latitude. Opcional. Latitud en grados
Center-Longitude. Opcional. Longitud en grados. Desde -180 a 180

El resto de propiedades las puede ver aquí.

Pero para mí, lo más interesante del control es la posibilidad de controlar eventos del mismo. En el link anterior pueden ver la lista completa de los mismos.

Como pueden observar muy sencillito añadir a una página este tipo de servicios. Hasta otra.

Windows Live Dev

Felipe Santana — Fri, 03 Apr 2009 17:15:47 +0000

Supongo que todos sabrán qué es Windows Live Dev, como tengo la intención de escribir algún que otro post al respecto he pensado hacer uno describiendolo de manera somera.

Windows Live Dev es una plataforma pensada para desarrolladores de software. Ofrece una serie de herramientas para poder integrar nuestras aplicaciones con servicios ofrecidos por Microsoft.

En cuanto a servicios ofrece ya unos cuantos, entre otros:

En cuanto a herramientas y evidentemente para Visual Studio ofrece unas Tools con controles para ASP.Net y Templates para hacer más sencillo el desarrollo.

Además:

A grosso esto es Windows Live Dev. Creo que suficiente para los (teóricamente) futuros post.

Saludos

Agrupando con ListView, JQuery y ASP.Net Ajax

Felipe Santana — Mon, 23 Mar 2009 12:16:59 +0000

Hace unas semanas vimos un post en el que se mostraba como agrupar el típico maestro-detalle utilizando GridView. Hoy veremos esto mismo pero utilizando JQuery, AJAX y el control ListView.
Este control, a mí personalmente, me parece un control espectacular, te permite hacer todo lo que no se puede hacer con un GridView y más.

En el ejemplo que veremos no me he complicado la vida dejándolo “bonito”, la idea es que vean que se puede hacer. ¿Qué conseguimos? Pues lo mismo que en el post comentado, mostrar las cabeceras en una tabla y que al pulsar sobre cada una de ellas nos muestre el detalle. Tal que así:

Y al pinchar en cualquier fila muestra su detalle correspondiente.

¿Cómo se logra? Como hemos dicho, las rows para las cabeceras están en un ListView, y en el detalle de este ListView incluiremos otro para mostrar las filas correspondientes. Como siempre, vamos por partes.

El HTML

”>

Ventas

Número Fecha Importe

PagedControlID=”ListView1″
PageSize=”8″>

ShowFirstPageButton=”false”
ShowNextPageButton=”false”
ShowPreviousPageButton=”false” />

ShowPreviousPageButton=”false” />

’>
’ src=”img/mas.gif” alt=”" title=”" />
’ />
’ />
’ />

’ class=”oculto”>

”>

Detalle

ProductID Cantidad PVP

’ />
’ />
’ />

A tener en cuenta:

Para cada row del ListView de cabecera, se le asigna como id el número de documento para conseguir ids únicos
También a cada row de cabecera se le asigna una clase css que se usará con JQuery
A la imagen que queremos que cambie cuando se expanda o contraiga cada cabecera también le asignamos como id un literal más el número de documento para conseguir también un id único.

De resto no tiene nada especial más que la inclusión del segundo ListView en el ItemTemplate del primero.

Para recuperar las filas de detalle se ha creado un SQLDataSource con un párametro, el cual es rellenado para cada row de la cabecera. Esto lo conseguimos controlando el evento ItemDataBound del ListView de la cabecera. Este evento se dispara para cada fila.

Protected Sub ListView1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ListViewItemEventArgs) Handles ListView1.ItemDataBound
‘ COMPONE SELECT DEL DETALLE PARA CADA ROW DE LA CABECERA
If e.Item.ItemType = ListViewItemType.DataItem Then
Dim _SqlDataSource As SqlDataSource
Dim _SalesOrderID As String = CType(e.Item.FindControl(”SalesOrderID”), Label).Text.ToString
_SqlDataSource = CType(e.Item.FindControl(”SqlDataSource2″), SqlDataSource)
_SqlDataSource.SelectParameters(”SalesOrderID”).DefaultValue = _SalesOrderID
_SqlDataSource.SelectCommand = “SELECT ProductID, OrderQty, UnitPrice FROM Sales.SalesOrderDetail where SalesOrderID=’” & _SalesOrderID & “‘ ORDER BY ProductID”

End If

End Sub

Bien, solo nos queda ver el código JQuery que permitirá expandir y contraer las rows de la cabecera para mostra su detalle correspondiente.

Este es el código JQuery.

jQuery(document).ready(function() {
// ASOCIA CLICK CABECERA DE ORDERS
jQuery(”.RowsHead”).live(”click”, function() {
// CONSTRUYE ID PARA CADA ROW
var currentId = jQuery(this).attr(’id’); // ID DE LA ROW
var currentCSS = jQuery(this).attr(’class’); // ID DE LA CLASE
currentId = “#Detail” + jQuery(this).attr(’id’); // ID DE LA IMAGEN
currentimgId = “#imgplus” + jQuery(this).attr(’id’);
if (jQuery(currentId).is(”:hidden”)) {
jQuery(currentId).show();
jQuery(currentimgId).attr(’src’, ‘img/subs.gif’);

}
else {
jQuery(currentId).hide();
jQuery(currentimgId).attr(’src’, ‘img/mas.gif’);
}

});
});

Este código lo único que hace es mostrar u ocultar el listview del detalle y cambiar la imagen. Noten que hemos utilizado la función live de JQuery que nos permite que no solo se asocia el evento cuando se carga el dom, sino para todo lo que se genere a posteriori, esta función está disponible desde la última versión de JQuery.

Les dejo el fuente.
GroupListView

Set de iconos gratuitos

Felipe Santana — Thu, 12 Mar 2009 21:45:40 +0000

Seguimos con recursos gratutitos que nos pueden ayudar en nuestro quehacer diario.

Free web development icons #4 SE

Milky Part 8

Simplicio

Free hand pointer icons

Free web development icons #2

MSDN Respuestas

Felipe Santana — Mon, 09 Mar 2009 21:11:08 +0000

Microsoft sigue mejorando en su afán de proporcionar fuentes de ayuda a los programadores que han elegido su tecnología para realizar sus desarrollos. En esta ocasión han creado una herramienta que han llamado MSDN Respuestas. Esta es la definición que le dan:

MSDN Respuestas es un complemento para Visual Studio que te permite encontrar la información que necesitas mientras estás desarrollando, desde el propio entorno e integrando múltiples fuentes de información como la referencia de MSDN, los principales buscadores, sitios web de desarrollo y las respuestas más populares a las consultas que realice.

La idea fundamental es no tener que salir de la herramienta para buscar información sobre cualquier respuesta que necesitemos.

Se integra perfectamente con el ide de Visual Studio y permite acceder a distintos sitios preconfigurados además de poder añadir los que queramos. Entre estos sitios se encuentran la referencia de MSDN, Google, Live, Yahoo, etc.

Bien por Microsoft. Pueden encontrar la herramienta aquí.

Agrupando con GridView y ASP.Net Ajax

Felipe Santana — Mon, 02 Mar 2009 18:15:39 +0000

Veremos hoy cómo agrupar datos dentro de un GridView utilizando ASP.Net Ajax. La idea es utilizar dos tablas maestro-detalle, utilizaremos la base de datos de ejemplo de SQL 2005 AdventureWorks. En esta base de datos tenemos entre otras dos tablas de facturas, la cabecera, SalesOrderHeader, y la de detalle, SalesOrderDetail. En la primera tenemos los datos de la cabecera de facturas, y en la segunda, los artículos que corresponden a cada una de las mismas.

Pues bien, el planteamiento es mostrar un grid con información de la cabecera y al pinchar en cada uno de sus registros, mostrar, dentro del mismo grid el detalle de la factura seleccionada.
Este sería el resultado:

Lo veremos por partes. Primero el Grid principal, es un gridview normal salvo que utilizaremos un ItemTemplate encerrado en un panel. Tal como:

Si se fijan, lo único especial es que en vez de utilizar el típico asp:BoundField para mostrar las columnas en el grid utilizamos un itemtemplate, lo importante es encerrarlo dentro de un panel porque, para el segundo gridview utilizaremos un CollapsiblePanelExtender de Ajax.
Insertaremos ahora el segundo GridView, para ello lo colocaremos también dentro de un panel y dentro del ItemTemplate del primer GridView, este es el código del segundo GridView.

Si se fijan es otro GridView normal y corriente, lo único especial es que el DataSource asociado está en blanco ya que lo construiremos en codebehind.
A continuación incrustramos el CollapsiblePanelExtender. Este apuntará al panel del GridView principal para que actúe como cabecera del segundo grid, utilizándolo para que al hacer click sobre él muestre los datos del segundo GridView.

A continuación muestro todo el código de los gridviews y el collapsiblepanelextender juntos:

Bien, lo único que nos queda es fabricar la select del segundo GridView.
Para ello utilizaremos el evento RowDataBound, este evento se dispara para cada row del gridview principal.
Tal que:

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim _SqlDataSource As SqlDataSource = e.Row.FindControl("SqlDataSource2")
            Dim _SalesOrderID As String = CType(e.Row.FindControl("SalesOrderID"), Label).Text.ToString
            Dim _OrderData As Label = CType(e.Row.FindControl("OrderData"), Label)
            Dim _OrderDate As String = CType(e.Row.FindControl("OrderDate"), Label).Text.ToString

            _OrderData.Text = "Orden: " & _SalesOrderID & " de fecha " & Format(CDate(_OrderDate), "dd/MM/yyyy")
            If Not _SalesOrderID Is Nothing Then
                _SqlDataSource.SelectCommand = "SELECT SalesOrderID, OrderQty, UnitPrice,  LineTotal FROM Sales.SalesOrderDetail WHERE (SalesOrderID = " & _SalesOrderID & ")"
            End If
        End If
    End Sub

Este código lo que hace es mostrar en el primer gridview los datos que queremos que se muestren y, a continuación, construye la select del segundo GridView para cada row del primero.

Esto es todo. Les dejo el fuente.
GroupGridViewAjax

Set de iconos gratutios

Felipe Santana — Thu, 19 Feb 2009 22:02:47 +0000

Continuando con la línea de publicar recursos gratuitos que te pueden ayudar en tu labor diaria, hoy le toca el turno a iconos. Les dejo con unos cuantos sets que por supuesto son gratuitos.

Jonas Rask Design icons for developers

Diagona Icons

FAMFAMFAM Silk

Coquette icons

Que los disfruten

Autenticar usuarios con Ajax y JQuery y BD

Felipe Santana — Sat, 14 Feb 2009 12:27:52 +0000

Veremos en este post cómo autenticar usuarios usando una base de datos, en este caso SQL Server (o Express), JQuery y Ajax.

En cuanto al Ajax comentar que como voy a usar JQuery usaré el Ajax que viene intengrado con este framework y así no cargar el ASP.Net Ajax con el fin de no recargar la página.

El ejemplo versará en cómo llamar a las funciones JQuery y desde estas invocar al WebMethod necesario desde código del lado del cliente. Esto es la más interesante en mi opinión, cómo hacer que desde el lado del cliente se pueda llamar a servicios webs. Microsoft tiene un artículo sobre este tema que pueden leer aquí. Empezamos.

Primero, creamos un fichero de configurarción global, el típico Global.asax. En el procedimiento Session_Start inicializaremos nuestras variables de sesión. En este ejemplo solo tenemo una. El nombre de usuario

    Sub Session_Start(ByVal sender As Object, ByVal e As EventArgs)
        HttpContext.Current.Session("NomUsu") = ""
    End Sub

Segundo, en nuestro web.config definiremos la conección con nuestra base de datos.

Esto es todo en cuanto a la configuración del sitio. Ahora veremos el html.
En el head, incluiremos las referencias al core de JQuery y a nuestro javascript que controlará el login, lo he llamado login.js en un subdirectorio llamado js. En cuanto al CSS, también sencillo, una clase para ocultar el típico “Cargando …” y otra para esto mismo con una imagen que muestre que estamos conectando con nuestra base de datos para el login.

El body, muy fácil, un formulario para solicitar usuario y contraseña y un botón para enviar los datos, además una label para mostrar el nombre del usuario que hace login y el div para mostrar el mensaje de conección mientras se hace la llamada.



        Inicio de sesión

        Nombre


        Contraseña


        

        

            Enviando solicitud ....

Si se fijan, en todo este código no hay ningún control de servidor, todos son puro tags html.

Bien ahora queda la parte de jquery. Lo explicaré por partes.

$(document).ready(function() {
    // ASOCIAMOS FUNCION DE LOGIN AL EVENTO CLICK DEL BOTON
    $("#EnviarBtn").bind("click", function(e) {
        e.preventDefault();
        if (jQuery.trim($("#codusu").val()) == '' || jQuery.trim($("#password").val()) == '')
        {
            alert("Debe rellenar usuario y contraseña");
        }
        else
        {
            ConfigFormLogin();
        }
    });

});

Cuando se carga todo el DOM de la página asociamos al botón de login el código mostrado. Primero desactivamos el comportamiento por defecto del botón, que es hacer submit, esto lo logramos con el método e.preventDefault. A continuación comprobamos si se ha tecleado código de usuario y contraseña, si no es así mostramos alerta y en caso contrario llamamos a la función que se va a encargar de comprobar los datos, ConfigFormLogin.

La función de llamada al WebMethod, como dije al principio del post, usaremos las funciones Ajax que incluye JQuery. Incluye una serie de eventos para controlar cómo se producen estas llamadas, una lista completa con todos los eventos que incluye podemos encontrarlos aquí. Estos eventos nos dan un control total para manipular el código.

Veamos primero, solo la llamada al WebMethod

function ConfigFormLogin() {
    // ENVIA SOLICITUD
    $.ajax({
        type: "POST",
        data: "{ _CodUsu: '" + $("#codusu").val() + "', _Passwd: '" + $("#password").val() + "'}",
        url: "Default.aspx/DoLogin",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false,
        beforeSend: function() { OnStart() },
        complete: function() { OnEnd() },
        success: function(msg) { OnOK(msg) },
        error: function(msg) { OnErr(); }
    });
}

type: El tipo de llamada lógicamente debe ser post.
data: aquí pasaremos los parámetros que necesita el servicio web para el login. La sintaxis es {nomvar:valor,nomvar:valor …)
url: aquí indicaremos la url del servicio web. En nuestro caso está en la misma página que hace el login. Default.aspx. En el codebehind de esta tenermos un webmethod llamado DoLogin
dataType: serializaremos los datos con json.
cache: lo pondremos a false porque no queremos usar cache
El resto son los eventos que queremos manipular con la llamada, creo que se explican por sí solos.

Estas son las funciones que disparan los eventos mencionados. En comentarios su explicación

// AL COMENZAR SOLICITUD
function OnStart(){
    // DESHABILITA BOTON
    $("#EnviarBtn").attr("disabled", "disabled");
    // MUESTRA IMAGEN DE CONECTANDO
    $("#Sending").removeClass("oculto");
// LIMPIA NOMBRE DE USUARIO
    $("#NomUsu").text("");

}

// AL FINALIZAR SOLICITUD
function OnEnd(){
    // OCULTA SENDING
    $("#Sending").addClass("oculto");
    $("#logindialog img").css("display", "inline");
    // HABILITA BOTON
    $("#EnviarBtn").removeAttr("disabled");
}

// ERROR EN EL METODO DE LOGIN
function OnErr() {
    // MUESTRA MENSAJE DE ERROR EN LA CONECCION CON EL SERVICIO WEB
    alert("No se ha podido contactar con Servidor de Autenticación");
}

// OK METODO DE LOGIN
function OnOK(msg) {
    if (msg == "false") {
        // SI EL SERVICIO WEB DEVUELVE false ES QUE LA AUTENTICACIÓN HA SIDO INVALIDA
        alert("Nombre de Usuario o contraseña invalido");
    }
    else {
        // EN CASO CONTRARIO EL SERVICIO WEB DEVUELVE EL NOMBRE DE USUARIO Y LO MUESTRA EN EL LABEL
        $("#NomUsu").text(msg);
    }
}

Por último nos queda solo ver el servicio web. Como ya dijimos está en el codebehind de la misma página aspx que realiza el login. Lo importante es que el servicio web hay que declararlo como una función estática y pública. El resto es una llamada normal a una base de datos.

Imports System.Web.Services
Imports System.Data.SqlClient

Partial Class _Default
    Inherits System.Web.UI.Page
     _
    Public Shared Function DoLogin(ByVal _CodUsu As String, ByVal _Passwd As String) As String
        ' REALIZA LOGIN

        ' INICIAMOS VARIABLES DE SESION
        HttpContext.Current.Session("NomUsu") = ""
        ' CONSTRUYE SELECT Y CONECCION
        Dim _SQLConnection As New SqlConnection(Web.Configuration.WebConfigurationManager.ConnectionStrings("LoginDBJQuery").ToString)
        Dim _SQLCommand As New SqlCommand("SELECT password, nombre FROM empleados WHERE dni = '" & _CodUsu & "'", _SQLConnection)

        Dim _SQLDataReader As SqlDataReader
        Try
            _SQLConnection.Open()
            _SQLDataReader = _SQLCommand.ExecuteReader
            If _SQLDataReader.HasRows = False Then
                ' LOGIN ERRONEO
                Return "false"
            End If
           ' COMPRUEBA PASSWORD
            _SQLDataReader.Read()
            If _SQLDataReader.GetString(0).Trim <> _Passwd Then
                ' LOGIN ERRONEO
                Return "false"
            End If
            ' GUARDA VARIABLE DE SESION
            HttpContext.Current.Session("NomUsu") = _SQLDataReader.GetString(1)
        Catch ex As Exception
            ' SI HA HABIDO ERROR DEVUELVE ERROR
            Throw New Exception(ex.ToString)
        Finally
            _SQLCommand.Dispose()
            _SQLConnection.Close()
        End Try

        ' SI LA AUTENTICACION HA SIDO CORRECTA DEVUELVE NOMBRE DE USUARIO
        Return HttpContext.Current.Session("NomUsu")

    End Function

End Class

Y esto es todo. Les dejo el fuente.
LoginDBJQuery

Libro gratis virtualización

Felipe Santana — Fri, 13 Feb 2009 17:20:42 +0000

Si estás interesado en virtualización, que sepas que Microsoft Press ha publicado un EBook gratuito titulado “Understanding Microsoft Virtualization Solutions”.

Cuenta con 452 páginas en formato pdf. Como su nombre indica versa sobre las distintas tecnologías de Microsoft para virtualizar los siguientes entornos:

Virtualización de servidores.
Virtualización de aplicaciones.
Virtualización del desktop.
Virtualización de presentación.
Virtualización de profiles de usuario.

Sin duda merece la pena su descarga.

Lo encontraréis aquí.

Generadores de datos para pruebas

Felipe Santana — Tue, 10 Feb 2009 23:38:57 +0000

¿Cuantas veces has tecleado datos en tablas para hacer pruebas?
Probablemente muchas. Además mal (sin ofender). Para hacer pruebas que realmente midan la capacidad de, por ejemplo, rendimiento, hace falta trabajar con miles o decenas de miles de registros. Y claro, esto no lo habrás tecleado nunca. Como máximo, te habrás creado el típico bucle para hacer inserciones masivas.

Pues resulta que me he encontrado en una situación en la que tenía que rellenar unos cuantos cientos de miles de registros en una base de datos y me negaba a realizarlo a pelo. Pues nada, como siempre san google y al rescate. Me he encontrado bastantes herramientas que liberan de tan ardua tarea. Les muestro unas cuantas.

Datagenerator. (ADOdb, Firebird/InterBase, Microsoft SQL Server, MySQL, Oracle, PostgreSQL (pgsql), SQLite) (open source)
DTM Data Generator. (ODBC, OLE DB, OCI, SQL Server, Oracle or PostgreSQL) (de pago)
EMS Data Generator for SQL Server (de pago)
generatedata. (MySql, Oracle, HTML, Excel, XML y CSV) (gratis)
CSV Data Generator. (CSV) (open source)
DBMonster. (SQL) (open source)

Estos son algunas de las que encontré y que creo cubren todas mis necesidades.