Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/vhosts/cadetill.com/domains/cadetill.com/public_html/wp-content/plugins/qtranslate-x/qtranslate_frontend.php on line 497

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/vhosts/cadetill.com/domains/cadetill.com/public_html/wp-content/themes/suffusion/functions/media.php on line 666

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/vhosts/cadetill.com/domains/cadetill.com/public_html/wp-content/themes/suffusion/functions/media.php on line 671

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/vhosts/cadetill.com/domains/cadetill.com/public_html/wp-content/themes/suffusion/functions/media.php on line 684

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/vhosts/cadetill.com/domains/cadetill.com/public_html/wp-content/themes/suffusion/functions/media.php on line 689

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/vhosts/cadetill.com/domains/cadetill.com/public_html/wp-content/themes/suffusion/functions/media.php on line 694
Programación – Página 7 – El blog de cadetill
nov 022011
 

Buenas,

Haciendo unas aplicaciones que usan el componente TWebBrowser, me surgió la necesidad de interactuar con las páginas cargadas en él, en concreto el manejo de los formularios. Consultando a Google llegué a delphi.about.com donde encontré una serie de artículos que me ayudaron a solucionar mis necesidades.

Gracias a estos artículos he creado una clase (TWebControl) que engloba buena parte de lo expuesto en esos artículos.

Entre las funciones interesantes que tiene esta clase tenemos:

  • procedure WebLinks: se encarga de carturar todas las etiquetas «a href» que contenga la página y las pone en la propiedad Links.
  • procedure WebFormNames: se encarga de capturar todos los formularios que contenga la página y los almacena en la propiedad Forms.
  • procedure WebFormFields: dado el nombre de un formulario, se encarga de rellenar la propiedad Fields con los campos del mismo.
  • procedure WebFormSetFieldValue: dado un formulario y un campo del mismo, establece un valor a dicho campo.
  • procedure WebFormSubmit: dado un formulario, lo acepta.
  • function WebFormFieldValue: dado un formulario y un campo del mismo, devuelve el valor que contiene.
  • function WebHTMLCode: devuelve el código HTML de la página web.
  • function WebContent: devuelve el contenido de la página web.
  • procedure WebSaveAsHTML: dado un nombre de archivo, guarda la página web.
  • procedure WebLoadHTML: dado un código HTML, lo carga directamente en el TWebBrowser.
  • procedure WebAddHTML: dado un código HTML, lo añade a la página existente.
  • procedure WebPrintWithoutDialog: imprime la página web sin mostrar ningún dialogo.
  • procedure WebPrintWithDialog: lanza el diálogo de impresión.
  • procedure WebPrintPreview: realiza una previsualización de la impresión de la página web.
  • procedure WebPrintPageSetup: realiza una llamada al diálogo del setup.

La forma de funcionar de la clase es sencilla. Basta con crear un objeto de la misma pasándole en el constructor el objeto TWebBrowser que contenga la página a controlar.

Como siempre, podéis descargaros el programa demo y la unit con la clase desde aquí.

Nos leemos

oct 192010
 

Buenas,

Vimos en un mensaje anterior cómo configurar visualmente nuestro mapa de Google Maps. Antes de ver el StreetView quería comentar una cosa al respecto. En la documentación del API podemos observar la existencia de un método llamado setOptions que, como parámetro, recibe un objeto de tipo MapOptions. Por el nombre del método y el parámetro recibido podríamos pensar que no sería necesaria la creación de todo el mapa si queremos cambiar el comportamiento inicial del mapa. Pues bien, he realizado la prueba y no termina de funcionar como debe, así que daremos por válido lo que decía antes de que se debe de establecer todo en la creación.

Y ahora, el StreetView

Bien, dicho ésto, vamos a ver el StreetView.

Cualquier mapa de Google Maps contiene la imagen de un hombrecito en la zona del zoom (ver imagen 1 al pie del mensaje) que arrastrándolo y soltándolo donde queramos, nos abre el StreetView. Fijaros que, en el momento de arrastrarlo, donde existe StreetView se colorea en azul (ver imagen 2 al pie del mensaje).

Este hombrecito es, como todo aspecto visual de un mapa de Google Maps, configurable en la creación del mapa. Estas propiedades las obvié en el mensaje anterior expresamente para poderlas explicar ahora. Por supuesto, pertenecen al objeto MapOptions.

  • streetViewControl: booleano para mostrar o no el hombrecito.
  • streetView: propiedad de tipo StreetViewPanorama que representa la panorámica StreetView que se mostrará al soltar el hombrecillo. Si no se define ninguna, se generará una predeterminada y se mostrará en el div del mapa. Os recomiendo una lectura de esta clase dado que aquí sólo veremos el constructor de la misma, el cual recibe dos parámetros, container que es dónde se mostrará (un div) y opts de tipo StreetViewPanoramaOptionsdel que veremos ahora sus propiedades:
    • addressControl: booleano para mostrar o ocultar el cartel con la dirección.
    • addressControlOptions: propiedad de tipo StreetViewAddressControlOptionscon las opciones de visualización del control de dirección.
      • position: propiedad de tipo ControlPosition para especificar dónde aparecerá el control. Por defecto TOP_LEFT.
      • style: string con la especificación CSS a aplicar al control de posición. Por ejemplo, {backgroundColor: ‘red’}.
    • enableCloseButton: booleano para mostrar o ocultar el botón de cierre de la ventana StreetView.
    • linksControl: booleano para mostrar o ocultar el control de desplazamiento por las calles.
    • navigationControl: booleano para mostrar o ocultar el control de navegación.
    • navigationControlOptions: propiedad de tipo NavigationControlOptionscon las opciones de visualización del control de navegación.
      • position: propiedad de tipo ControlPosition para especificar dónde aparecerá el control. Por defecto TOP_LEFT.
      • style: propiedad de tipo NavigationControlStyle para especificar el tipo de navegador.
    • position: propiedad de tipo LatLng donde se centrará el mapa.
    • pov: propiedad de tipo StreetViewPovpara especificar la orientación de la cámara (según ángulo, inclinación y zoom).
      • heading: numérico que expresa el ángulo en grados respecto al norte absoluto siendo el norte 0º, el este 90º, el sur 180º y el oeste 270.
      • pitch: numérico que expresa la inclinación de la cámara en grados respecto al vehículo de Street View y oscila entre 90º (arriba) y -90º (abajo).
      • zoom: numérico para indicar el nivel del zoom siendo el más lejano el 0.

En la imagen 3 podéis ver a qué se refiere cada una de las propiedades.

Desde Delphi

Vista la teoría, llega el momento de ponerlo en práctica.

Cuando creamos un mapa, tenemos dos opciones, especificar una panorámica o dejar que el objeto mapa cree una predeterminada. Con la primera opción, podremos controlar todo el aspecto visual del StreeView. En cambio, si dejamos que se cree la predeterminada, mediante los métodos del StreetViewPanorama sólo podremos controlar la longitud/latitud (método setPosition) y la orientación de la cámara (método setPov).

Una vez creado el mapa, sea de la forma que sea, podemos acceder a la panorámica del mismo gracias al método getStreetView de la clase Map. Así mismo, podríamos establecer una panorámica nueva mediante setStreetView.

En nuestro ejemplo, escogeremos la opción de personalizar el StreetView en la creación del mapa y mostrarlo en un div diferente al mapa, así podremos ver las diferentes alternativas que tenemos. Para ello, lo primero es modificar la pantalla para poder acceder a las opciones del StreetView (ver imagen 4 al pie del mensaje). Hay que tener presente que, si las coordenadas pasadas no tienen una referencia válida para StreetView, éste no aparecerá.

Lo primero que hay que hacer es adaptar nuestra función JavaScript para poder recibir la configuración del StreetView. Para ello añadiremos 8 nuevos parámetros. También se tiene que crear el objeto StreetViewPanorama con sus opciones. Y puestos a modificar, para no repetir código, crearemos funciones para la obtención de las diferentes constantes.

  function GetPosition(aPos) {
    switch (aPos) {
      case "BOTTOM": return google.maps.ControlPosition.BOTTOM; break;
      case "BOTTOM_LEFT": return google.maps.ControlPosition.BOTTOM_LEFT; break;
      case "BOTTOM_RIGHT": return google.maps.ControlPosition.BOTTOM_RIGHT; break;
      case "LEFT": return google.maps.ControlPosition.LEFT; break;
      case "RIGHT": return google.maps.ControlPosition.RIGHT; break;
      case "TOP": return google.maps.ControlPosition.TOP; break;
      case "TOP_LEFT": return google.maps.ControlPosition.TOP_LEFT; break;
      default: return google.maps.ControlPosition.TOP_RIGHT;
    }
  }

  function GetNavigationControl(aNav) {
    switch (aNav) {
      case "ANDROID": return google.maps.NavigationControlStyle.ANDROID; break;
      case "SMALL": return google.maps.NavigationControlStyle.SMALL; break;
      case "ZOOM_PAN": return google.maps.NavigationControlStyle.ZOOM_PAN; break;
      default: return google.maps.NavigationControlStyle.DEFAULT;
    }
  }

  function MenuStyle(aStyleMenu) {
    switch (aStyleMenu) {
      case "DROPDOWN_MENU": return google.maps.MapTypeControlStyle.DROPDOWN_MENU; break;
      case "HORIZONTAL_BAR": return google.maps.MapTypeControlStyle.HORIZONTAL_BAR; break;
      default: return google.maps.MapTypeControlStyle.DEFAULT;
    }
  }

  function MapType(aTMap) {
    switch (aTMap) {
      case "HYBRID": return google.maps.MapTypeId.HYBRID; break;
      case "ROADMAP": return google.maps.MapTypeId.ROADMAP; break;
      case "SATELLITE": return google.maps.MapTypeId.SATELLITE; break;
      default: return google.maps.MapTypeId.TERRAIN;
    }
  }

  function DoWeb(Lat,Lon,TMap,aZoom,ZClick,MoveMap,Keyb,Wheel,HideAll,ShowTM,
                 PosTM,StyleTM,ShowNav,PosNav,StyleNav,ShowScale,PosScale,
                 SV,DirecSV,PosDirecSV,CloseSV,LinksSV,NavSV,PosNavSV,StyleNavSV) {
    if (map != null) map.setStreetView(null);
    panorama = null;
    map = null;

    aTMap = MapType(TMap);
    aPosTM = GetPosition(PosTM);
    aStyleTM = MenuStyle(StyleTM);
    aPosNav = GetPosition(PosNav);
    aStyleNav = GetNavigationControl(StyleNav);
    aPosScale = GetPosition(PosScale);
    aPosDirecSV = GetPosition(PosDirecSV);
    aPosNavSV = GetPosition(PosNavSV);
    aStyleNavSV = GetNavigationControl(StyleNavSV);

    var latlng = new google.maps.LatLng(Lat,Lon); 

    var panoOpts = {
      addressControl: DirecSV,
      addressControlOptions: {position: aPosDirecSV},
      enableCloseButton: CloseSV,
      linksControl: LinksSV,
      navigationControl: NavSV,
      navigationControlOptions: {position: aPosNavSV, style:aStyleNavSV},
      position: latlng
    }

    panorama =
        new google.maps.StreetViewPanorama(document.getElementById("streetview"),
        panoOpts);

    var myOptions = {
      center: latlng,
      mapTypeId: aTMap,
      zoom: aZoom, 

      disableDoubleClickZoom: ZClick,
      draggable: MoveMap,
      keyboardShortcuts: Keyb,
      scrollwheel: Wheel, 

      mapTypeControl: ShowTM,
      mapTypeControlOptions: {position: aPosTM, style: aStyleTM},
      navigationControl: ShowNav,
      navigationControlOptions: {position: aPosNav, style: aStyleNav},
      scaleControl: ShowScale,
      scaleControlOptions: {position: aPosScale},

      streetViewControl: true,
      streetView: panorama
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

A nivel de código Delphi, lo único que tendremos que hacer es modificar la llamada a la función JavaScript pasándole los nuevos parámetros.

Si quisiéramos que la panorámica de StreetView se viera en el mismo div que el mapa, bastará con que cambiemos la línea de creación del panorama y pasarle de parámetro el div del mapa

panorama =
    new google.maps.StreetViewPanorama(document.getElementById("map_canvas"),
    panoOpts);

No obstante, con las pruebas que he realizado, sólo funciona correctamente la primera vez que se crea el mapa con la panorámica de StreetView personalizada. Si alguien hace pruebas y ve cómo arreglarlo, estaría agradecido que me lo comentara.

Más en próximos artículos.

 

Como siempre, podéis descargaros el programa demo desde aquí.

Nos leemos

oct 092010
 

Buenas,

Una vez visto cómo mostrar un mapa de Google Maps, cómo centrarlo y cómo poner marcas, ahora toca el momento de personalizarlo.

En la versión 3 del API de Google Maps, hay que tener en cuenta que no se permite añadir o eliminar controles de forma dinámica, éstos deben de establecerse en la creación del mapa.

El objeto MapOptions

Este objeto será el encargado de dar la forma inicial a nuestro mapa. Para ver todas sus propiedades, te aconsejo una visita a la API de Google Maps ya que aquí sólo veremos los más interesantes (o al menos desde mi punto de vista).

Obligatorias
  • center: propiedad que determina dónde se centrará el mapa al mostrarlo. Es obligatoria y es de tipo LatLng.
  • mapTypeId: propiedad de tipo MapTypeId obligatoria y que es cómo se mostrará inicialmente el mapa.
  • zoom: entero obligatorio con el zoom aplicado al mapa.
Visuales
  • disableDefaultUI: booleano para mostrar o no todos los controles del mapa. Por defecto están habilitados.
  • mapTypeControl: booleano para mostrar o no el tipo de mapa. Por defecto habilitado.
  • mapTypeControlOptions: propiedad del tipo MapTypeControlOptions para configuración del control del tipo de mapa cuando éste se muestra.
    • mapTypeIds: array con los tipos de mapa a mostrar. Ver MapTypeId.
    • position: propiedad de tipo ControlPosition para especificar dónde se mostrará el control. Por defecto TOP_RIGHT. Las constantes posibles son:
      • BOTTOM
      • BOTTOM_LEFT
      • BOTTOM_RIGHT
      • LEFT
      • RIGHT
      • TOP
      • TOP_LEFT
      • TOP_RIGHT
    • style: propiedad de tipo MapTypeControlStyle para determinar el estilo del control. Los posibles valores son:
      • DEFAULT
      • DROPDOWN_MENU
      • HORIZONTAL_BAR
  • navigationControl: booleano para mostrar o no el control de navegación.
  • navigationControlOptions: propiedad de tipo NavigationControlOptions con las propiedades del control de navegación.
    • position: propiedad de tipo ControlPosition.
    • style: propiedad de tipo NavigationControlStyle para especificar el tipo de navegador. Las constantes posibles son:
      • ANDROID
      • DEFAULT
      • SMALL
      • ZOOM_PAN
  • scaleControl: booleano para mostrar o no el control de escala.
  • scaleControlOptions: propiedad de tipo ScaleControlOptions con las opciones del control de escala.
No visuales
  • disableDoubleClickZoom: booleano para des/habilitar el zoom con el clic de ratón.
  • draggable: booleano para des/habilitar el poder mover el mapa. Por defecto se puede.
  • keyboardShortcuts: booleano para des/habilitar el control del mapa con el teclado. Por defecto habilitado.
  • scrollwheel: booleano para des/habilitar el control de la rueda del ratón. Habilitado por defecto.

Aplicando lo visto a Delphi

Una vez vistas las configuraciones posibles del mapa, nos queda ver cómo hacerlo desde Delphi.

Basándonos en los ejemplos anteriores, crearemos una constante (MAPA_CODE) que contendrá el código html y JavaScript necesario. En éste, destacar la creación de una nueva función JavaScript que será llamada desde Delphi y será la encargada de generar el mapa con la configuración que hayamos especificado en el programa. La función es esta:

  function DoWeb(Lat,Lon,TMap,aZoom,ZClick,MoveMap,Keyb,Wheel,ShowTM,
                 PosTM,StyleTM,ShowNav,PosNav,StyleNav,ShowScale,PosScale) {
    switch (TMap) {
      case "HYBRID": aTMap = google.maps.MapTypeId.HYBRID; break;
      case "ROADMAP": aTMap = google.maps.MapTypeId.ROADMAP; break;
      case "SATELLITE": aTMap = google.maps.MapTypeId.SATELLITE; break;
      default: aTMap = google.maps.MapTypeId.TERRAIN;
    } 

    switch (PosTM) {
      case "BOTTOM": aPosTM = google.maps.ControlPosition.BOTTOM; break;
      case "BOTTOM_LEFT": aPosTM = google.maps.ControlPosition.BOTTOM_LEFT; break;
      case "BOTTOM_RIGHT": aPosTM = google.maps.ControlPosition.BOTTOM_RIGHT; break;
      case "LEFT": aPosTM = google.maps.ControlPosition.LEFT; break;
      case "RIGHT": aPosTM = google.maps.ControlPosition.RIGHT; break;
      case "TOP": aPosTM = google.maps.ControlPosition.TOP; break;
      case "TOP_LEFT": aPosTM = google.maps.ControlPosition.TOP_LEFT; break;
      default: aPosTM = google.maps.ControlPosition.TOP_RIGHT;
    } 

    switch (StyleTM) {
      case "DROPDOWN_MENU": aStyleTM = google.maps.MapTypeControlStyle.DROPDOWN_MENU; break;
      case "HORIZONTAL_BAR": aStyleTM = google.maps.MapTypeControlStyle.HORIZONTAL_BAR; break;
      default: aStyleTM = google.maps.MapTypeControlStyle.DEFAULT;
    } 

    switch (PosNav) {
      case "BOTTOM": aPosNav = google.maps.ControlPosition.BOTTOM; break;
      case "BOTTOM_LEFT": aPosNav = google.maps.ControlPosition.BOTTOM_LEFT; break;
      case "BOTTOM_RIGHT": aPosNav = google.maps.ControlPosition.BOTTOM_RIGHT; break;
      case "LEFT": aPosNav = google.maps.ControlPosition.LEFT; break;
      case "RIGHT": aPosNav = google.maps.ControlPosition.RIGHT; break;
      case "TOP": aPosNav = google.maps.ControlPosition.TOP; break;
      case "TOP_LEFT": aPosNav = google.maps.ControlPosition.TOP_LEFT; break;
      default: aPosNav = google.maps.ControlPosition.TOP_RIGHT;
    } 

    switch (StyleNav) {
      case "ANDROID": aStyleNav = google.maps.NavigationControlStyle.ANDROID; break;
      case "SMALL": aStyleNav = google.maps.NavigationControlStyle.SMALL; break;
      case "ZOOM_PAN": aStyleNav = google.maps.NavigationControlStyle.ZOOM_PAN; break;
      default: aStyleNav = google.maps.NavigationControlStyle.DEFAULT;
    } 

    switch (PosScale) {
      case "BOTTOM": aPosScale = google.maps.ControlPosition.BOTTOM; break;
      case "BOTTOM_LEFT": aPosScale = google.maps.ControlPosition.BOTTOM_LEFT; break;
      case "BOTTOM_RIGHT": aPosScale = google.maps.ControlPosition.BOTTOM_RIGHT; break;
      case "LEFT": aPosScale = google.maps.ControlPosition.LEFT; break;
      case "RIGHT": aPosScale = google.maps.ControlPosition.RIGHT; break;
      case "TOP": aPosScale = google.maps.ControlPosition.TOP; break;
      case "TOP_LEFT": aPosScale = google.maps.ControlPosition.TOP_LEFT; break;
      default: aPosScale = google.maps.ControlPosition.TOP_RIGHT;
    } 

    var latlng = new google.maps.LatLng(Lat,Lon);
    var myOptions = {
      center: latlng,
      mapTypeId: aTMap,
      zoom: aZoom, 

      disableDoubleClickZoom: ZClick,
      draggable: MoveMap,
      keyboardShortcuts: Keyb,
      scrollwheel: Wheel, 

      mapTypeControl: ShowTM,
      mapTypeControlOptions: {position: aPosTM, style: aStyleTM},
      navigationControl: ShowNav,
      navigationControlOptions: {position: aPosNav, style: aStyleNav},
      scaleControl: ShowScale,
      scaleControlOptions: {position: aPosScale} 

    };
    map = null;
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
Las constantes posibles son:

Como podemos ver, la función recibe tantos parámetros como posibles configuraciones tengamos. Lo primero que hace es coger el valor de las constantes necesarias según los parámetros recibidos (los 6 switch). Luego creamos el objeto que contendrá la longitud y latitud y el que contendrá todas las opciones del mapa. Para terminar, liberamos el objeto map por si existía y lo volvemos a crear con las características nuevas.

A nivel de código Delphi, pues queda hacer la llamada cómo ya hemos visto en anterioridad:

const
  StrParams = '%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s';
var
  Doc2: IHTMLDocument2;
  Win2: IHTMLWindow2;
  Params: String;
begin
  Doc2 := wbWeb.Document as IHTMLDocument2;
  Win2 := Doc2.parentWindow;

  Params := Format(StrParams, [eLong.Text,
                               eLat.Text,
                               QuotedStr(cbTypMap.Text),
                               IntToStr(tbZoom.Position),
                               LowerCase(BoolToStr(not chZoomClick.Checked, True)),
                               LowerCase(BoolToStr(chDrag.Checked, True)),
                               LowerCase(BoolToStr(chTeclado.Checked, True)),
                               LowerCase(BoolToStr(chWheel.Checked, True)),
                               LowerCase(BoolToStr(chShowTypeMap.Checked, True)),
                               QuotedStr(cbTMPosition.Text),
                               QuotedStr(cbTMStyle.Text),
                               LowerCase(BoolToStr(chNavigation.Checked, True)),
                               QuotedStr(cbNPosition.Text),
                               QuotedStr(cbNStyle.Text),
                               LowerCase(BoolToStr(chScale.Checked, True)),
                               QuotedStr(cbSPosition.Text)
                               ]);

  Win2.execScript('DoWeb(' + Params + ')', 'JavaScript');
end;

Aquí os dejo un ejemplo de la pantalla.

También podéis descargaros los fuentes y el binario del programa desde aquí.

Otro día más.

Nos leemos

oct 052010
 

Buenas,

Vimos en un mensaje anterior cómo conseguir posicionar el mapa en una determinada longitud y latitud. Ahora vamos a ver cómo poner marcas en estas longitudes y latitudes.

Para poner una marca en el mapa no es necesario tenerlo centrado dado que ésta es relativa al mapa, no al hecho del centrado. Así pues, siguiendo el ejemplo anterior, haremos que cuando se carguen las diferentes pestañas .

La clase Marker

Para crear una marca, lo que tendremos que hacer es crear un objeto de la clase Marker, así que os recomiendo que le deis un vistazo a sus métodos y eventos. Para nuestro propósito, lo que realmente nos interesa es el constructor, el cual recibe un objeto de tipo MarkerOptions con el que podremos configurar el aspecto de nuestra marca.

Este objeto tiene las siguientes propiedades:

  • clickable: booleano que nos indicará si podemos o no hacer clic en la marca.
  • cursor: string que contiene el cursor de ratón a mostrar.
  • draggable: booleano que permitirá que la marca pueda desplazarse.
  • flat: booleano que mostrará o no la sombra de la marca.
  • icon: string o MarkerImage con el icono a mostrar para la marca.
  • map: mapa asociado donde se mostrará la marca.
  • position:LatLng donde se mostrará la marca.
  • shadow: string o MarkerImage con la imagen de sombra.
  • shape: MarkerShape que indica la región dónde se podrá hacer clic o desplazar.
  • title: string con el título (hint para que nos entendamos los Delphinianos).
  • visible: booleano para hacer o no visible la marca.
  • zIndex: numérico que indicará el orden (superposición si se diera el caso) en que se mostrarán las marcas.

Cambios en el JavaScript

A nivel de JavaScript tendremos que realizar algunos cambios. Primero crearemos una función que nos genere la marca.

  function MakeMarker(Lat, Lng, titulo) {
    var latlng = new google.maps.LatLng(Lat,Lng);
    var aMarker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: titulo
        });
    markerArray[markerArray.length] = aMarker;
  }

De esta función destacar el array markerArray que contendrá todas las marcas puestas en el mapa. Este array nos servirá para, en búsquedas posteriores, poder borrar las marcas antes de mostrar las nuevas. Esta variable se ha definido global como la variabla map.

Otra función que añadiremos es la de borrar las marcas

  function DeleteMarkers() {
    for (i = 0; i < markerArray.length; i++) {
      markerArray[i].setMap(null);
    }
    markerArray = [];
  }

Ahora sólo queda controlar esto desde Delphi.

Cambios en Delphi

Por lo que respecta a Delphi, crearemos un par de funciones

    procedure PonerMarca(const Long, Lat, Titulo: string);
    procedure BorrarMarcas;

Estas dos funciones se llamarán desde el evento AfterGetValues de la clase TGeoCode.

Puedes descargarte un ejemplo aquí (incluye ejecutable).

Nos leemos

sep 302010
 

Buenas,

En los eventos de ratón de un TStatusBar solemos encontrar las coordenadas X, Y en la que se produce la acción, pero no así el panel, el cual puede ser interesante saber si queremos realizar una acción determinada según el panel (mostrar un hint dependiendo del panel, un menú contextual,…). La siguiente función nos devolverá dicho panel del TStatusBar.

function GetStatusBarPanelXY(StatusBar: TStatusBar; X, Y: Integer) : Integer;
var
  i: Integer;
  R: TRect;
begin
  Result := -1;

  // Buscamos panel a panel hasta encontrar en cual está XY
  with StatusBar do
    for i := 0 to Panels.Count - 1 do
    begin
      // Obtenemos las dimensiones del panel
      SendMessage(Handle, WM_USER + 10, i, Integer(@R));
      if PtInRect(R, Point(x,y)) then
      begin
        Result := i;
        Break;
      end;
    end;
end;

Los eventos del ratón que tienen coordenadas y con los que nos servirá la función son los siguientes:

  • OnMouseActivate
  • OnMouseDown
  • OnMouseMove
  • OnMouseUp
  • OnEndDrag
  • OnEndDock
  • OnDragOver
  • OnDragDrop
  • OnContextPopup (no tiene X e Y, pero tiene un TPoint que para el caso es lo mismo)

Espero que os sirva.

Nos leemos

sep 302010
 

Buenas,

Vimos en un mensaje anterior la clase TIniFiles, la cual nos permite el acceso fácil a los ficheros de configuración. Cuando en una aplicación se hace mucho uso de este tipo de ficheros, en hecho de tener que estar todo el rato escribiendo las mismas líneas de código para crear y destruir un objeto de la clase TIniFile puede llegar a ser cansino. Lo que haremos ahora es crearnos nuestra propia clase que manipule un objeto de tipo TIniFile.

Los métodos de la nueva clase pueden llegar a ser los mismos que los que tiene TIniFile, no obstante podemos poner los que queramos o necesitemos.

Vamos a llamar a esta nueva clase TFicherosIni y la idea es crear una variable global de la unit de este tipo y controlar su creación y destrucción en la inicialización (initialization) y finalización (finalization) de la misma respectivamente.

unit FicherosIni;

interface

type
  TFicherosIni = class
  ....
  end;

var
  Ini: TFicherosIni;

implementation
.....

initialization
  Ini := TFicherosIni.Create;

finalization
  FreeAndNil(Ini);

end.

Con esto, sólo necesitaremos poner en la cláusula uses del formulario que queramos usarlo la llamada a esta unit y usar directamente el objeto Ini.

Tengo la costumbre de que los archivos ini se llamen igual que la aplicación que los usa, así pues, la clase TFicherosIni tiene una propiedad llamada NameExe la cual, al asignarse, automáticamente se asocia el fichero ini. No obstante, dado que no siempre es así, también dispone del método SetFileIni para especificar uno en concreto.

Aquí podéis descargaros la unit así como una demo de su uso.

Espero que os sea de utilidad.

Nos leemos

sep 292010
 

Buenas,

En muchas aplicaciones es habitual tener algún tipo de parámetro configurable que no puede estar almacenado en una base de datos o que simplemente el aplicativo no dispone de base de datos. Además, si no disponemos de un instalador que nos permita añadir información al registro de Windows, tenemos la opción de usar archivos de configuración o archivos ini.

Un archivo de configuración se divide en secciones, y estas secciones pueden tener una o más claves con sus respectivos valores. La estructura sería esta:

[sección 1]
clave11=valor11
clave12=valor12

[sección 2]
clave21=valor21

....

Como podemos ver, el nombre de las secciones va entre corchetes ([]) y los pares clave/valor van con un igual (=) y sin espacios de por medio.

Se pueden tener tantas secciones como se quiera/necesite, así como tantos pares de claves/valor por sección.

La gracia de este tipo archivos es que se puede acceder a una determinada clave de una sección cualquiera de forma muy sencilla y, Delphi nos proporciona una unidad (IniFiles) para la gestión de los mismos.

Veamos un ejemplo de cómo acceder:

var
  Ini: TIniFile;
begin
  Ini := TIniFile.Create('c:\MiFicheroIni.ini');
  try
    Edit1.Text := Ini.ReadString('Seccion 1', 'clave1', '');
  finally
    FreeAndNil(Ini);
  end;

El código es simple, declaramos y creamos un objeto de tipo TIniFile. Al constructor de la clase se le pasa como parámetro el fichero de configuración al que queremos acceder. Luego, para leer, usamos el método ReadString al que se le pasa cómo parámetro la sección, la clave y un valor por defecto por si no existe dicha sección/clave.

En el ejemplo hemos visto cómo leer un string, pero se puede leer o escribir diferentes tipos de datos.

Métodos de lectura

A nivel de lectura tenemos los siguientes métodos:

    function ReadString(const Section, Ident, Default: string): string;
    function ReadInteger(const Section, Ident: string; Default: Longint): Longint;
    function ReadBool(const Section, Ident: string; Default: Boolean): Boolean;
    function ReadBinaryStream(const Section, Name: string; Value: TStream): Integer;
    function ReadDate(const Section, Name: string; Default: TDateTime): TDateTime;
    function ReadDateTime(const Section, Name: string; Default: TDateTime): TDateTime;
    function ReadFloat(const Section, Name: string; Default: Double): Double;
    function ReadTime(const Section, Name: string; Default: TDateTime): TDateTime;
    procedure ReadSection(const Section: string; Strings: TStrings);
    procedure ReadSections(Strings: TStrings);
    procedure ReadSections(const Section: string; Strings: TStrings);
    procedure ReadSubSections(const Section: string; Strings: TStrings; Recurse: Boolean = False);
    procedure ReadSectionValues(const Section: string; Strings: TStrings);

Las funciones está claro lo que hacen, así que no las comentaré. Por lo que respecta a los procedimientos…

  • ReadSection: devuelve en el TStrings las claves de la sección pasada por parámetro.
  • ReadSections: devuelve en el TStrings las secciones que contiene el fichero de configuración.
  • ReadSectionValues: devuelve en el TStrings la combinación de todas las clave/valor de la sección especificada.

Métodos de escritura

A nivel de escritura de ficheros de configuración tenemos los siguientes métodos:

    procedure WriteString(const Section, Ident, Value: String);
    procedure WriteInteger(const Section, Ident: string; Value: Longint);
    procedure WriteBool(const Section, Ident: string; Value: Boolean);
    procedure WriteBinaryStream(const Section, Name: string; Value: TStream);
    procedure WriteDate(const Section, Name: string; Value: TDateTime);
    procedure WriteDateTime(const Section, Name: string; Value: TDateTime);
    procedure WriteFloat(const Section, Name: string; Value: Double);
    procedure WriteTime(const Section, Name: string; Value: TDateTime);

Como está bastante claro lo que hacen, no hace falta comentar nada.

Otros métodos de la clase

Además de los de lectura y escritura, tenemos otros métodos para interactuar con los ficheros de configuración y son:

    function SectionExists(const Section: string): Boolean;
    procedure EraseSection(const Section: string);
    procedure DeleteKey(const Section, Ident: String);
    procedure UpdateFile;
    function ValueExists(const Section, Ident: string): Boolean;

Veamos qué hacen:

  • EraseSection: borra la sección pasada por parámetro.
  • DeleteKey: borra la clave (Ident) de la sección especificada (Section).
  • UpdateFile: fuerza la escritura a disco del fichero de configuración.
  • ValueExists: indica si una determinada clave (Ident) existe en una determinada sección (Section).

Para terminar, recomendaros la lectura de esta entrada del blog.

Nos leemos

sep 102010
 

Buenas,

Para los que nos gusta más el formato de imagen PNG, con Delphi 2010 estamos de suerte dado que trae «de serie» una unit para manipular este tipo de imágenes, la pngimage (no se si también está en Delphi 2009, si alguien puede confirmármelo, le estaría agradecido). No pretendo explicar dicha unit, pero sí os recomiendo que le deis un vistazo para saber qué podemos hacer con una imagen en este formato.

Lo común en grandes aplicaciones (y no tan grandes) es que haya mucha imagen que se repita. Imaginemos una imagen para un botón de aceptar, ¿en cuantas pantallas tenemos ese botón? En muchas. ¿Y que pasa si en cada una de esas pantallas tenemos que poner la imagen? Por pasar no pasa nada, sencillamente que el exe va aumentando de tamaño «tontamente».

La solución está clara, usar un fichero de recursos que almacene, al menos, las imágenes repetitivas. Crear un fichero de recursos es sencillo, sólo tenemos que crear un archivo de texto con extensión rc y poner tabulado nombre de recursos, tipo de recursos y nombre de la imagen. Dado que no hay un tipo de recurso específico para las imágenes PNG, usaremos el RCDATA.

Un ejemplo de fichero podría ser esto:

RES_IMG_OK_16X     			RCDATA  "btn_16_ok.png"
RES_IMG_CANCEL_16X			RCDATA	"btn_16_cancel.png"
RES_IMG_MAIL_16X			RCDATA	"btn_16_email.png"
RES_IMG_SEARCH_16X			RCDATA	"btn_16_search.png"

Ahora sólo queda compilarlo para crear un archivo de recurso (.res) con el compilador de recursos brcc32.exe (suele estar en el path).

Para usar el nuevo fichero, en la unit que deseemos tenemos que añadir

{$R MisRecursos.res}

Donde MisRecursos.res es el nombre del fichero de recursos.

Ahora que ya tenemos el fichero de recursos creado, tan solo nos quedará añadir las imágenes a nuestros botones o TImages. Con el siguiente par de funciones cargaremos en la propiedad del componente que toque la imagen del fichero de recursos que deseemos

procedure LoadPNGFromResource(Picture: TPicture; const ResName: string); overload;
var
  Png: TPngImage;
begin
  Png := TPngImage.Create;
  try
    Png.LoadFromResourceName(HInstance, ResName);
    Picture.Assign(Png);
  finally
    if Assigned(Png) then  FreeAndNil(Png);
  end;
end;

procedure LoadPNGFromResource(Bitmap: TBitmap; const ResName: string); overload;
var
  Png: TPngImage;
begin
  Png := TPngImage.Create;
  try
    Png.LoadFromResourceName(HInstance, ResName);
    Bitmap.Assign(Png);
  finally
    if Assigned(Png) then  FreeAndNil(Png);
  end;
end;

Y un pequeño ejemplo de llamada

  LoadPNGFromResource(imgImage.Picture, 'RES_IMG_MAIL_16X');
  LoadPNGFromResource(bAccept.Glyph, 'RES_IMG_OK_16X');
  LoadPNGFromResource(bCancel.Glyph, 'RES_IMG_CANCEL_16X');

Para terminar, podemos poner esas dos funciones en una unit a parte y así, donde queramos cargar un PNG del fichero de recursos, sólo tendremos que usar dicha unidad.

Nos leemos

sep 022010
 

Buenas,

Vimos en un mensaje anterior cómo conseguir mostrar en una aplicación Delphi un mapa de Google Maps. Ahora toca «jugar» con este mapa y, lo primero que tenemos que saber hacer es cómo centrarlo en una posición determinada (la latitud y longitud que nosotros queramos).

Para ello tendremos que realizar algún cambio en el código base de la página web. Lo primero es hacer global la variable que controla el mapa «map«. Para ello bastará con declararla fuera de la función y, por supuesto, quitar el «var» de la línea de creación del objeto google.maps.Map. Así pues, nuestro JavaScript quedará de la siguiente manera:

  var map = null;

  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

Si nos damos una vuelta por la clase Map, veremos que tiene un método panTo definido de la siguiente forma

panTo(latLng:LatLng)

Este método recibe como parámetro un objeto de tipo LatLng que contendrá la longitud y latitud donde se centrará el mapa. Así pues, bastará con crear un objeto de éste tipo y hacer una llamada a este método para conseguir lo que buscamos.

Para construir el objeto de tipo LatLng y hacer la llamada al método Map.panTo, crearemos la siguiente función JavaScript en el código de la página:

  function CenterMap(Lat, Lng) {
   	map.panTo(new google.maps.LatLng(Lat, Lng));
  }

Ahora sólo quedará desde código Delphi hacer una llamada a esta función con los parámetros deseados. Para ello usaremos la interfaz IHTMLDocument2 la cual encapsula la información de la página web mostrada y la interfaz IHTMLWindow2 que contiene información sobre el objeto Windows (para más información consultar la ayuda de Delphi). La función de centrado del mapa podría ser algo así:

procedure TForm1.CentraMapa(const Long, Lat: string);
var
  Doc2: IHTMLDocument2;
  Win2: IHTMLWindow2;
  LatLng: String;
begin
  Doc2 := wbWeb.Document as IHTMLDocument2;
  Win2 := Doc2.parentWindow;

  LatLng := '"' + Lat + '", "' + Long + '"';

  Win2.execScript('CenterMap(' + LatLng + ')', 'JavaScript');
end;

Con ésto, sólo tenemos que ir llamando a nuestra función para ir moviéndonos por le mapa de Google a las coordenadas geográficas que queramos.

Puedes descargarte un ejemplo aquí (incluye ejecutable).

Continuará….

Nos leemos

sep 022010
 

Buenas,

Una vez visto cómo funcionan nuestras clases, ha llegado el momento de mostrar la información en un mapa.

Si le damos un vistazo al tutorial del API de JavaScript de Google Maps nos podemos dar cuenta que es muy sencillo el mostrar un mapa con los datos que queramos mostrar. Vasta con montar una pequeña página web, que ésta ejecute un script y mostrarla en un TWebBrowser.

La página web

Lo primero es ver y comprender qué hace esta sencilla página web que, incluso para gente que no está familiarizada con la programación web, llega a entenderlo fácilmente. Para todo el que quiera verla, les remito a dicho tutorial.

La parte qué realmente nos interesa es el JavaScript que hay. Lo primero es  incluir el API de Google mediante la línea

<script type="text/javascript"
   src="http://maps.google.com/maps/api/js?sensor=false"></script>

Recordad lo que explicamos en un artículo anterior sobre el parámetro sensor.

Y ahora se crea una función que será llamada en el evento OnLoad del tag body la cual realizará los siguientes pasos.

  • Crear un objeto para almacenar las coodenadas (latlng).
  • Crear un objeto de tipo map options que contenga todas las características del mapa
  • Crear un objeto «mapa» con los parámetros de dónde se mostrará y qué características tendrá

El resultado, éste:

<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

</script>

A nivel de características del mapa, decir que puede especificarse el zoom (zoom), la longitud y latitud en la que debe centrarse (center) y el tipo de mapa que se quiere visualizar (mapTypeId) que puede ser:

  • ROADMAP: mapa normal 2D
  • SATELLITE: muestra las fotografías de satélite
  • HYBRID: mixto entre ROADMAP y SATELLITE
  • TERRAIN: relieve físico del terreno

Esta es otra deferencia con la versión 2 del API. En la v2 existe una visión del mapa por defecto. En esta versión hay que especificarla. Si quieres saber más acerca de los tipos de mapa, te recomiendo una visita a Google Map Javascript API V3 – Map Types.

Ahora que se ha entendido lo que hace el código de la página, llega el momento de mostrarlo en nuestra aplicación Delphi. Lo primero que tendremos que decidir es dónde almacenaremos esta web, si en un archivo en disco y cargarlo en ejecución, si en un archivo de recursos o bien en una constante en el mismo código (o alguna otra manera que no se me ocurre ahora, jejeje). La del archivo físico en disco yo la descartaría de entrada por el simple motivo de que puede ser borrada por error, no copiada si se cambia de carpeta el contenido,….. Vamos, que es más fácil perder el archivo que otra cosa.

Y entre archivo de recursos o constante, pues ya depende de la manera en que nos guste programar. Si nos gusta un código más limpio, sin duda en un archivo de recursos. Pero si queremos poder ver en todo momento todo lo que afecta al programa y queremos tener un código algo más sencillo (no es que sea complicado usar un fichero de recursos), sin duda en una constante dentro del código. En este ejemplo, lo haremos mediante una constante (a la que llamaremos MAPA_CODE) en el código Delphi.

El objeto TWebBrowser

Para cargar nuestro mapa en el objeto TWebBroser dependerá de cómo lo hayamos guardado. Si lo hemos guardado como un archivo en disco, bastará con hacer una llamada al método Navigate pasándole como parámetro la ruta exacta de dónde se encuentra dicho fichero.

Y si lo que hemos hecho es almacenarlo en un fichero de recursos o en una constante, el proceder será algo diferente. La idea es conseguir tener un TStringStream que contenga el código fuente de la página web. Dado que nosotros almacenamos la página en una constante, bastará con crear una variable de éste tipo pasándole como parámetro la constante.

var
  StringStream: TStringStream;
begin
  StringStream := TStringStream.Create(MAPA_CODE);

Luego tenemos que asegurarnos que el objeto Document del TWebBrowser tiene «algo». Para ello basta con hacer una llamada a Navigate con la típica página de inicio.

    if not Assigned(wbWeb.Document) then wbWeb.Navigate('about:blank');

Ahora ya nos encontramos en la disposición de poder cargar nuestra página almacenada en el TStringStream. Para ello tenemos que coger la interfaz IPersistStreamInit del objeto Document, borrar el documento actual mediante una llamada al método InitNew del IPersistStreamInit, crear un objeto IStream con los datos del TStringStream y cargar este objeto IStream en el documento mediante el método Load del objeto IPersistStreamInit. Todo esto que parece una comida de olla, se resume en esta función:

procedure CargaWeb;
var
  StringStream: TStringStream;
  PersistStreamInit: IPersistStreamInit;
  StreamAdapter: IStream;
begin
  // creación del TStringStream con el string que contiene la página web
  StringStream := TStringStream.Create(MAPA_CODE);
  try
    // nos aseguramos de tener algún contenido en Document
    if not Assigned(wbWeb.Document) then wbWeb.Navigate('about:blank');

    // acceder a la interfaz IPersistStreamInit de Document
    if wbWeb.Document.QueryInterface(IPersistStreamInit, PersistStreamInit) = S_OK then
    begin
      // borrar datos actuales
      if PersistStreamInit.InitNew = S_OK then
      begin
        // creación y inicialización del IStream
        StreamAdapter:= TStreamAdapter.Create(StringStream);
        try
          Screen.Cursor := crHourGlass;
          // carga de la página web mediante IPersistStreamInit
          PersistStreamInit.Load(StreamAdapter);
        finally
          Screen.Cursor := crDefault;
        end;
      end;
    end;
  finally
    StringStream.Free;
  end;
end;

Si en el OnShow de un formulario hiciéramos una llamada a esta función, veríamos que en nuestro TWebBrowser se visualiza el mapa de Google en las coordenadas que trae por defecto (las que contiene nuestra constante).

Pero ésto no es lo que nosotros queremos. Lo que queremos es poder posicionar el mapa en un punto determinado y, ésto ya será parte del siguiente artículo.

Continuará….

Nos leemos