Elementos Básicos de Windows Presentation Foundation (WPF)

El presente artículo tiene como objetivo dotar al lector de elementos básicos de la tecnología WPF, como uno de los saltos positivos presentados por Microsoft como parte del malogrado Sistema Operativo Windows Vista.

En general

WPF permite el desarrollo de interfaces de interacción tomando características de aplicaciones Windows y de aplicaciones web. Se incluye con Windows Vista, Windows 7 y Windows Server 2008, también está disponible para Windows XP Service Pack 2 o posterior y Windows Server 2003.

Arquitectura básica

Desde el punto de vista arquitectónico los componentes más importantes son los siguientes:

Entre ellos:

·         PresentationFramework
Contiene todos los controles WPF más otras funcionalidades usables.

·         PresentationCore
API de bajo nivel que  trata directamente  con el  sistema  visual base (2D,  3D, etc)  es una  combinación de wrappers  con  la  capa MilCore  y un  conjunto de características escritas en código manejado. Además se incluye en esta capa la implementación base de los elementos raíz UIElement y ContentElement. 

·         MilCore
Esta  parte  ha  sido  escrita  en  código  no  manejado  para  poder  soportarla integración  con  DirectX.  Es  decir,  todo  lo mostrado  por WPF  es  realizado através del motor de DirectX, por lo que se consigue una gran eficiencia en el renderizado por Software y Hardware.

 Primeros Pasos con WPF

Una de las características más potentes dentro de WPF  es el tema de gráficos. Debido a que internamente utiliza la API Direct3D, podemos crear aplicaciones muy atractivas y con movimientos dinámicos, algo impensables con Windows Form. Nos permite interaccionar con animaciones, vídeo, audio, documentos, aplicar efectos, etc… en las propias aplicaciones.

XAML  es  el  acrónimo de  eXtensible Application Markup Language. Xaml  es un  lenguaje  declarativo  basado  en  XML  y  que  esta  optimizado  para representar  interfaces  de  usuario  visualmente  ricas  desde  el  punto  de  vista
gráfico. 
XAML  nace  para  ser  el  nexo  de  unión  entre  desarrolladores  y  diseñadores, facilitando  la  colaboración  entre  ambos  en  aplicaciones  WPF.  Aunque aparezcan  dudas  sobre  por  qué  usar  un  lenguaje  markup,  es  importante entender las posibilidades inherentes en la plataforma WPF.
Cuando  se  decidió  crear  XAML  como  un  lenguaje  markup  para  expresar interfaces,  se  comprobó  la  evolución  de  otros  lenguajes  como HTML,  XUL, SVG,  WordML,  etc  y  como  por  ejemplo  HTML  ha  sido  un  éxito  para representar interfaces de usuario. En definitiva, XAML es un lenguaje al igual que HTML, entendible por un humano y para una máquina.

Sintaxis

Es importante recalcar y tener en cuenta con respecto a la diferencia entre por ejemplo HTML y XAML que en  la especificación de XAML se especifican una serie de reglas que mapean espacios de nombres, tipos, propiedades y eventos de  .NET  con  sus  correspondencias  en  XML.  Es  decir,  podemos  crear  un
elemento con XAML y realizar un elemento equivalente directamente con C#.

Elementos=Objetos

Declarando  un  elemento  XML  mediante  la  sintanxis  XAML  podemos instanciar una clase o estructura Common Language Runtime (CLR). Ha esto se  le  conoce  como  Object  Element  Syntax.  Esta  sintaxis  comienza  con  un menor  que  (<)  y  seguido  del  nombre  de  la  clase  o  estructura  a  inicializar.
Seguidamente  se puden  añadir  sin que  sean obligatorios atributos  separados por  un  espacio  y  en  el  formato:  nombre=”Valor”.  Finalmente  el  elemento  se
puede cerrar con un (/>).

Ejemplo:

Es importante destacar la utilización del Data Binding para la comunicación asíncrona entre la vista y el controlador. Esto se hace a través de un elemento que se llama Binder que abre un canal de comunicación permanente entre las dos capas, que permite actualizar la vista desde el controlador e incluso desde la capa del modelo. Todo esto dota a las aplicaciones de una gran usabilidad que en muchos casos no permite distinguir si es una aplicación nativa o aplicación web. En WPF se utiliza una variante del Modelo-Vista-Controlador (MVC) que se llama MVVM (Model View View-Model).

En el trabajo con WPF se destaca la utilización de los siguientes frameworks:

• Diseño
• Mahapps Metro
• Modern UI
• Modern UI (Metro)  Charts
• MVVM
• MVVM Light Toolkit
• Prism

{ Leer Más }

Google Map en nuestras aplicaciones webs

Este artículo es la continuación del trabajo con el componente google map en nuestras aplicaciones webs. Ya en el primer material se explicó la importancia de incorporar mapas, por razones de usabilidad, en interfaces que brinden, recojan o se editen datos de geo-ubicación para generalizar, en una palabra, todo lo que tiene que ver con ubicación geográfica, direcciones, etc. Esta vez avanzaremos en el tema sobre la base del primer artículo, que ya el mapa está visible en nuestras aplicaciones, y el objetivo es el de ubicar en el mapa un par de coordenada (latitud, longitud). Si se tiene esta información, lo primero que hay que hacer es especificar en la configuración del mapa esas coordenadas en el parámetro “center” figura 1, para que nuestro marcador quede ubicado en el centro del mapa.

Fig.1.

Ya con esto el mapa queda centrado en las coordenadas especificadas al objeto google.maps.LatLng(), sigue la configuración del marcador que señalizará la ubicación y se realiza como se muestra en la figura 2.

Fig. 2.

Ahora como se dice el título del artículo, los marcadores van a ser personalizados para la aplicación, o simplemente para no dejarlos con su aspecto estándar, si en la especificación de muestro marcador hubiéramos obviado el parámetro “icon”, por defecto google utiliza la imagen de la figura 3 para mostrar los marcadores. Como se muestra en la última imagen del primer artículo cuando terminamos de configurar el API y visualizamos finalmente el mapa en la aplicación.

Fig. 3.

Aunque con esta imagen resolvemos el problema de señalizar nuestra ubicación, por lo general en nuestras aplicaciones queremos identificar varios tipos de ubicaciones, inmuebles, accidentes geográficos, señalizaciones de una ciudad, etc. y queremos mostrarlos en el mapa de forma diferenciada, tal vez utilizando un sistema de códigos de colores y ubicar una leyenda bajo el mapa, o tal vez tomando la idea de las señalizaciones de tránsito en una ciudad, utilizar las imágenes reales de las señalizaciones (figura 4) que existe en esa ubicación.

Fig. 4.

Para lograr esto, antes de especificar nuestro marcador, hay que definir el objeto que se le va a asignar al parámetro “icon” como se muestra en la figura 5. Esta definición debe hacerse antes de la del marcador, y en el mapa aparecerá la ubicación definida para el marcador, señalizada con un ícono que no es más que la imagen que se ha configurado en el objeto google.maps.MarkerImage(). Las aplicaciones de este mecanismo de señalización de puntos en un mapa son infinitas y solo limitadas por la imaginación y creatividad del desarrollador.

Fig. 5.

Ahora pasaremos a la otra parte que es la señalización de áreas en el mapa, hay ocasiones que es relevante proporcionar información visual de que tan grande es un área, hasta donde está delimitada una zona, fenómeno o estructura en un mapa. Para lograr esto básicamente lo que hay es que dibujar sobre el mapa y el API de google, cuenta con algunas herramientas para esto, acá se muestran dos variantes de figuras, el circulo para representación de zonas de alcance a la redonda, la segunda variante permite además de dibujar un triángulo, todas las posibles variantes de polígonos que el desarrollador necesite, desde las más básicas hasta lograr representaciones de polígonos realmente complejas:

1-    Dibujar un círculo:

Esta definición muestra un círculo con centro en la ubicación especificada como se muestra en la siguiente imagen:

Fig. 6.

2-    Dibujar un polígono:

Esta definición muestra un polígono y su ubicación y magnitud estará definida por las coordenadas que lo componen como se muestra en la siguiente imagen:

Fig. 7.

{ Leer Más }

Configurar Base Datos a reportes de Pentaho 6.1 sin herramienta visual

Hoy les voy a enseñar como configurarle los parámetros que debe tener un fichero .prpt o reporte de pentaho sin la necesidad de usar la herramienta para reportes del pentaho(PDR).

Este artículo le ayudará mucho cuando alguien crea un reporte con pentaho y desea probarlo en su servidor, decirle que ese fichero cuando se crea cuenta con parámetros específicos de base datos, como driver, dirección o url del servidor, puerto, usuario, contraseña, nombre de la base datos y nombre del servidor, esta información es necesaria configurarla.

Existen otras variantes, como abrir el reporte con algún compresor y cambiar estas variables visualmente, es verdad que es más fácil pero tiene sus desventajas, imagine que no tiene el reportador de pentaho, o no sabe usarlo, o son varios ficheros a configurar y se hace tedioso ir uno a uno.

Antes de comenzar, debe tener instalado un servidor de pentaho en Linux, y tomaremos este mismo servidor para aplicar lo que aquí le enseño.

Lo primero que haremos es copiar el reporte para una carpeta cualquiera, destacar que dicho reporte en un compactado zip y dentro aparecen los archivos .prpt que son los reportes que se crean usando el PRD(Reportador de pentaho), puede estar ubicada en el home del usuario, luego crear un fichero y dentro teclear lo siguiente:

#!/bin/bash

BASEDIR= "`pwd`"

FILENAME=”Reportes”

FILEZIP="${FILENAME}.zip"

Ahora pensemos que tiene más de un reporte, habría que recorrerlos uno por uno e ir realizando los pasos necesarios para configurarle los parámetros. Para recorrer los ficheros vamos a teclear lo siguiente:

for i in *.prpt; do

Necesitaremos  una variable para guardar solo el nombre del fichero:

NAME="`ls ${i} | cut -d. -f1`"

Descomprimimos el fichero del reporte, con el comando unzip:

            unzip -qo -d "${NAME}" "$i"

En el siguiente paso es el más importante, porque aquí es donde cambiamos los parámetros del servidor:

driver= com.mysql.jdbc.Driver

ip=192.168.0.1

puerto=3306

bd=dwh

usuario=root

clave=toor

find "${NAME}" -type f -name *sql-ds*.xml \

  -exec sed -i "s/\(<data:driver>\)\(.*\)/\1${driver} <\/data:driver>/" "{}" \; \

  -exec sed -i "s/\(<data:url>\)\(.*\)/\1jdbc:mysql:\/\/${ip}:{puerto}\/{db}<\/data:url>/" "{}" \; \

  -exec sed -i "s/\(<data:property name=\"user\">\)\(.*\)/\1${usuario}<\/data:property>/" "{}" \; \

  -exec sed -i "s/\(<data:property name=\"password\">\)\(.*\)/\1${clave}<\/data:property>/" "{}" \; \

  -exec sed -i "s/\(<data:property name=\"::pentaho-reporting::port\">\)\(.*\)/\1${puerto}<\/data:property>/" "{}" \; \

  -exec sed -i "s/\(<data:property name=\"::pentaho-reporting::name\">\)\(.*\)/\1${db}<\/data:property>/" "{}" \; \

  -exec sed -i "s/\(<data:property name=\"::pentaho-reporting::database-name\">\)\(.*\)/\1${db}<\/data:property>/" "{}" \; \

  -exec sed -i "s/\(<data:property name=\"::pentaho-reporting::hostname\">\)\(.*\)/\1${ip}<\/data:property>/" "{}" \;

En la porción de código anterior, si se dio cuenta que todos parámetros se encuentran en un fichero xml con nombre sql-ds.xml, ahí dentro está no solamente la configuración de la base dato, sino también el código mysql que fue usado para conformar el reporte.

Ahora solo nos queda actualizar nuestro reporte original, para ello primero borramos el fichero:

rm -f "${i}"

Luego entramos a la carpeta donde están los cambios y comprimimos el contenido:

cd "${NAME}"

zip -rqo "../${i}" *

Para acabar esta parte, debemos borrar el directorio porque ya no nos hace falta, porque en el paso anterior, comprimimos los cambios en un fichero nuevo.

cd ..

rm -rf "${NAME}"

Y para terminar debemos actualizar el fichero principal y borrar las huellas.

cd "${BASEDIR}/${FILENAME}"

zip -rq "${BASEDIR}/${FILEZIP}" *

rm -rf "${BASEDIR}/${FILENAME}"

Hasta aquí este pequeño artículo, espero que este artículo le pueda servir de ayuda.

{ Leer Más }

Mover un fichero de un directorio a otro con php

En este artículo veremos dos formas de mover un fichero de un directorio a otro usando php.

PHP lo que no dispone es de una función "move_to()"  o algo así para mover un archivo; entiendase al hecho de "mover" como: copiar en destino y borrar en origen el archivo  Pero si te fijas en esa "definición"  lo que sí que tienes en PHP son las funciones: copy() (para copiar) y unlink() para borrar archivos  así que se trata de que hagas por ejemplo tu función:

Código PHP:

function move_to($origen,$destino){

  copy($origen,$destino);

  unlink($origen);

}

y  ya tendrías tu función  (a todo esto haría falta algunas otras funciones auxiliares para mejorarla como: validación de existencia del archivo origen  no borrar el archivo hasta que quede en destino (verificando si no dá error copy() ) asignar o establecer permisos de escritura automáticamente (chmod() , etc ) De todas formas al parecer rename() hace eso ya. Ahora que el nombre de la función para lo que hace no sea el más acertado estoy deacuerdo pero si se indican rutas diferentes para origen y destino En realidad parece que -mueve- el archivo. Sobre la solución vía comando del S.O. del servidor esa solución como veras te "amarra" mucho con el S.O. que use el servidor (no será el mismo comando para PHP bajo windows que para Linux por ejemplo)  también dependes mucho de los permisos que tenga PHP  por ejemplo PHP en modo "safe" (modo seguro: "safe mode") no permite ejecutar comandos en el S.O.  así que no funcionaría el método. Por supuesto está que usar funciones "nativas" del S.O. facilitan y aceleran tareas de ese estilo (por ejemplo .. mover un directorio entero .. con archivos y estructura (sub-directorios)  será mucho más simple lanzando el comando correspondiente (xcopy()  etc según S.O.) que no ir leyendo la estructura deun lado para replicarla en otro.

Bueno, esto es una breve experiencia de mi experiencia usando la clase copy(), unlink() y rename()  para mover ficheros en php, espero haya podido ser de ayuda.

{ Leer Más }