sábado, 17 de octubre de 2009

Google Maps para ASP.NET

GoogleMaps

Google Map (GMaps) es un control de usuario ASP.NET para con escasas líneas poder agregar mapas de Google o Google Map a nuestras aplicaciones WEB.

Con este control podremos desarrollar aplicaciones WEB en ASP.NET con toda la potencia de la API oficial de GoogleMaps.

Ver demo.

Pero veamos un ejemplo paso a paso. Lo primero será descargarnos el fichero GMaps.dll desde el siguiente enlace.

Una vez descargado y copiado en la carpeta bin de nuestro proyecto, pasaremos a crear nuestra página web a la que le adicionaremos el mapa o Google Map. El código ASPX sería el siguiente:

Google Maps, ASP.NET ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleMaps.aspx.cs" Inherits="GoogleMaps" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register Assembly="GMaps" Namespace="Subgurim.Controles" TagPrefix="cc" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div style="width:660px; height:560px;">

      <cc:GMap ID="GMap1" runat="server" />

    </div>

    </form>

</body>

</html>

Lo próximo que debemos hacer es conseguir una Key, pues lo exige Google para poder utilizar su API. La podemos conseguir desde aquí. Debemos tener en cuenta que esta clave depende del dominio donde vayamos a utilizarla, por lo que por cada Web donde utilicemos GoogleMaps.Subgurim.NET debemos obtener la Key apropiada.

Google Maps, ASP.NET web.config

El modo más sencillo donde ubicar la clave es en vuestro web.config:
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
    ...
    <appSettings>
        <add key="googlemaps.subgurim.net" value="tuClave_yourKey" />
    </appSettings>
     ...
</configuration>

De este modo, el control ya se encargará de hacer el resto.

Llegados a este punto ya tenemos un Mapa de Google en nuestra WEB ASP.NET, de echo, si ejecutamos el proyecto, veremos que ya contamos con un mapa en nuestras pagina ASP.NET. Pero para sacarle el verdadero partido a este mapa debemos configurar algunas cosillas mas, por ejemplo hagamos que se muestre una dirección especifica, por ejemplo la ubicación de nuestra empresa o vivienda y mostremos además un globo con información relacionada a ese punto. En la siguiente imagen se ve el resultado del Google Map que deseamos crear:

GoogleMaps esASP.NETEste control nos proporciona todo el poder de la API oficial de GoogleMaps sin necesidad de una sola línea de código javascript. Así que veamos como dotar a nuestro mapa de alguna de las características de la API desde codebihind, para ello usaremos C#.

Google Maps, ASP.NET C#

using System;
using System.Web.UI;
using Subgurim.Controles;
 
public partial class GoogleMaps : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            GLatLng ubicacion = new GLatLng(40.381090863719436, -3.6222052574157715);
         GMap1.setCenter(ubicacion, 15);
 
            //Establecemos alto y ancho en px
            GMap1.Height = 560;
            GMap1.Width = 660;
 
            //Adiciona el control de la parte izq superior (moverse, ampliar y reducir)
            GMap1.addControl(new GControl(GControl.preBuilt.LargeMapControl));
 
            //GControl.preBuilt.MapTypeControl: permite elegir un tipo de mapa y otro.
            GMap1.addControl(new GControl(GControl.preBuilt.MapTypeControl));
           
            //Con esto podemos definir el icono que se mostrara en la ubicacion
            //#region Crear Icono
            //GIcon iconPropio = new GIcon();
            //iconPropio.image = "../images/iconBuilding.png";
            //iconPropio.shadow = "../images/iconBuildingS.png";
            //iconPropio.iconSize = new GSize(32, 32);
            //iconPropio.shadowSize = new GSize(29, 16);
            //iconPropio.iconAnchor = new GPoint(10, 18);
            //iconPropio.infoWindowAnchor = new GPoint(10, 9);
            //#endregion
 
            //Pone la marca de gota de agua con el nombre de la ubicacion
            GMarker marker = new GMarker(ubicacion);
            string strMarker = "<div style='width: 250px; height: 185px'><b>" +
                "<span style='color:#ff7e00'>es</span>ASP.NET</b><br>" +
                " C/ Jesus del Pino, 10 <br /> 28031 Madrid, España <br />" +
                "Tel: +34 902 00 00 00 <br />Fax: +34 91 000 00 00<br />" +
                "Web: <a href='http://www.esASP.net/' class='txtBKM' >www.esASP.net</a>" +
                "<br />Email: <a href='mailto:derbis.corrales@gmail.com' class='txtBKM'>" +
                "derbis.corrales@gmail.com</a><br><br></div>";
            GInfoWindow window = new GInfoWindow(marker, strMarker, true);
            GMap1.addInfoWindow(window);
 
            GMap1.enableHookMouseWheelToZoom = true;
 
            //Tipo de mapa a mostrar
            GMap1.mapType = GMapType.GTypes.Normal;
 
            //Moverse con el cursor del teclado
            GMap1.enableGKeyboardHandler = true;
        }
    }
}

En el código C# hemos comentado alguna de las características que podemos implementar con este interesantísimo control, y esos comentarios hablan por si solos, por lo que no veo la necesidad de explicarlos mas, pero este control tiene muchas mas funcionalidades que podrás aprenderlas en la web oficial.

El único pero de este control es que la variante gratuita es totalmente funcional, pero no debemos usarla en proyectos comerciales, pues la licencia comercial tiene un coste de 10 €, pero a mi juicio no es nada en comparación con la productividad que logramos al usarlo.

Espero les sea útil este control…

Publicado por Unknown 16 comentarios
Etiquetas: , ,

miércoles, 7 de octubre de 2009

C# 4 Parámetros Opcionales

Visual Studio 2010 En este espacio estaremos incluyendo algunas de las nuevas características incluidas en C# 4. Hoy en particular veremos una que especialmente me gusta mucho, me refiero a parámetros opcionales.

Parámetros Opcionales

Es un hecho irrefutable que los parámetros opcionales nos garantizan una comodidad y economía de código significativa, pero veamos un ejemplo para entenderlo.

Hasta la versión de C# 3, cuando queríamos definir un método con varios parámetros opcionales, implementábamos varias sobrecargas del mismo. Por ejemplo, imaginemos que necesitamos definir un método Sumar con hasta 4 parámetros, veamos como hacerlo:

C# 3 y versiones anteriores

int Sumar() { return Sumar(0, 0, 0, 0); }

int Sumar(int a) { return Sumar(a, 0, 0, 0); }

int Sumar(int a, int b) { return Sumar(a, b, 0, 0); }

int Sumar(int a, int b, int c) { return Sumar(a, b, c, 0); }

int Sumar(int a, int b, int c, int d) { return a + b + c + d; }

C# 4

int Sumar(int a = 0, int b = 0, int c = 0, int d = 0) { return a + b + c + d; }

Como hemos visto, resolver la misma situación en C# 4 es mucho mas cómodo y práctico. Pero la cosa no se queda aquí, contamos con otras facilidades, por ejemplo:

int x = Util.Sumar();

int y = Util.Sumar(4, 3);

int z = Util.Sumar(b: 5, c: 7);

Según vemos en las líneas anteriores, las 2 primeras ya eran obvias, pero con la tercera, vemos un caso nuevo, algo que anteriormente era imposible resolver; resulta que podemos pasar parámetros que no sean ni consecutivos, ni que sean los primeros del método.

Como vemos esta es una interesante nueva característica incluida en C# 4, pero no es la única, seguiremos otras inclusiones en artículos posteriores.

Publicado por Unknown 0 comentarios
Etiquetas: ,

jueves, 1 de octubre de 2009

jqDock Menú con jQuery

jqDock-jQuery He estado escribiendo algunos post sobre el Framework jQuery y algunos plugin que a mi entender aportan diseños interesantes a nuestros proyectos web. Hoy escribiré sobre uno de ellos que sin dudas es bien vistoso y agrega un plus a nuestros diseños, me refiero al plugin jqDock.

Si estas pensando en dotar a tu sitio de un menú que le de vistosidad a tu portal, debes valorar incluir jqDock. Con este plugin diseñado para jQuery podemos transformar un conjunto de imágenes, en un menú al estilo Dock de Mac, además podríamos orientarlo horizontal o verticalmente. Pero bien, sin mas preámbulo pasemos a la practica.

jqDock, Menú Dock con jQuery

Lo primero como de costumbre será descargarnos los js de jQuery y el de jqDock y ponerlos en uso:

jqDock-jQuery Code1

Veremos en la imagen que hay 2 cosas a destacar:

Hacemos referencia a los js jQuery y jqDock:

<script type='text/javascript' src='../Scripts/jquery-1.3.2.min.js'></script>

<script type='text/javascript' src='../Scripts/jquery.jqDock.js'></script>

Efectuamos la llamada a la función jqDock() o jqDock(option), que se encarga de tratar y dar la vistosidad a nuestro menú:

<script type="text/javascript">

  jQuery(document).ready(function() {

    jQuery('#menú').jqDock();

  });

</script> 

Llegados a este punto ya hemos echo toda la referencias que necesitamos y la llamada a la función jqDock,  solo nos basta crear nuestro menú:

<body>
  <form id="form1" runat="server">
      <div id='menu' style="padding: 100px;">   
        <a href='jqDockMenu.aspx' title='Clock'>
            <img src='Images/2/Clock.png' alt='' />
        </a> 
        <a href='jqDockMenu.aspx' title='iMac'>
            <img src='images/2/iMac.png' alt='' />
        </a>
        <a href='jqDockMenu.aspx' title='Notebook'>
            <img src='images/2/Notebook.png' alt='' />
        </a>
        <a href='jqDockMenu.aspx' title='Camera'>
            <img src='images/2/Camera.png' alt='' />
        </a>
        <a href='jqDockMenu.aspx' title='iPod'>
            <img src='images/2/iPod.png' alt='' />
        </a>
        <a href='jqDockMenu.aspx' title='Trash'>
            <img src='images/2/Trash.png' alt='' />
        </a>
      </div>  
  </form>
</body>

Con esto ya hemos implementado un jqDock menú basado en jQuery.

Como vemos en el código, en cada uno de los enlaces o entradas del menú, he hecho una llamada a la propia página (jqDockMenu.aspx), esto es para simplificar el ejemplo, en un caso real debemos hacer el enlace a las páginas que deseemos.

Este ejemplo práctico de jqDock es muy básico, y aunque aún así es bien vistoso, podemos configurar algunas opciones adicionales que nos ayuden a exprimir aún más este interesante menú. Te invito a que continúes profundizando sobre este menú en la página oficial de jqDock ; y que comentes en este mismo artículo sobre las distintas opciones.

Publicado por Unknown 0 comentarios
Etiquetas:
Suscribirse a: Entradas (Atom)