Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

July 2009 - Artículos

ASP.NET 4.0 Client Templates + ADO.NET Data Services, ejemplo básico.

Hace un par de días estaba traduciendo el whitepaper de ASP.NET 4.0 y sin duda postear un ejemplo, va a dejar las cosas mas claras , este va a ser un ejemplo sencillo (creo que lo más sencillo) para que vayamos estudiando esta funcionalidad que me tiene entusiasmado. Para estar a la moda, lo vamos a hacer con VS2010

Vamos a tener un sitio web con la siguiente estructura, en donde tenemos  una base de datos con dos tablas (para este ejemplo ocuparemos solo una). Vamos a utilizar Entity Framework, mapeando las tablas desde la base. Y para exponer como servicios Rest estas tablas, vamos a utilizar ADO.NET Data Service.

Estructura del Sitio Web

image image

Voy a resumir los pasos a seguir, pero si quieres ver en detalle como se genera un ADO.NET Entity Data Model y un ADO.NET Data Service, te recomiendo ver el siguiente articulo de Ibon Landa:
http://geeks.ms/blogs/ilanda/archive/2008/05/19/ado-net-data-services-paso-a-paso-i.aspx

Paso 1

Luego agregamos un ADO.NET Entity Data Model

image

Una vez que lo agregamos, se nos presenta un asistente, en donde vamos a poder seleccionar las tablas que vamos a mapear. Es resultado para este ejemplo, es el siguiente:

image

Una vez mapeadas las tablas vamos a agregar en el proyecto un ADO.NET Data Service, con la finalidad de poder acceder a el contenido de estas tablas mediante un servicio Rest. Para eso agregamos un nuevo ítem

image

 Código Generado por ADO.NET DataService y modificando lo necesario

Este es el código que genera el template de ADO.NET Dataservice, vamos a modificar lo justo para que nuestro ejemplo funciona, acá es muy importante que veas que modifiques el atributo de la interface DataService a tu clase de modelo en entidades, en mi caso es MibaseModel.MibaseEntities1. Tambien puedes configurar reglas de acceso para las distintas entidades mapeadas.

using System;
using System.Data.Services;
using System.Collections.Generic;
using System.Linq;
using System.ServiceModel.Web;  

public class WebDataService : DataService<MibaseModel.MibaseEntities1>
{
    // This method is called only once to initialize service-wide policies.
    public static void InitializeService(IDataServiceConfiguration config)
    {
             config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);
      }
}

Probando el Servicio

Para probarlo, primero podemos escribir en la URL del Browser:

http://localhost:8367/mdd/WebDataService.svc/

image

O También
http://localhost:8367/mdd/WebDataService.svc/Personas(1) y el servicio nos devolverá todos los campos del registro Personas cuyo ID sea 1.

image

Client Templates

Una de las ideas principales que tiene Client Templates, como su nombre lo indica es la posibilidad de bindear los datos desde el servidor, pero mediante programación del lado del cliente, de forma de proveer una manera liviana, rápida y eficaz de construir nuestros sitios web, y no solo eso, la integración con jquery es genial, además se utiliza el patrón de diseño observador para proveer la funcionalidad de que cambios en los datos obtenidos desde el origen de datos, sean informados para proveer el binding bidireccional, es decir, registrar en la fuente de datos, que el registro se modificó.

Lo primero es importar los script, luego es definir el dataview a utilizar (puedes ver una explicación en http://geeks.ms/blogs/gperez/archive/2009/07/20/ajax-functionality-en-asp-net-4-0-parte-1-5.aspx), luego vamos a definir el proveedor de datos para el dataview, el cual es una clase AdoNetServiceProxy y en su constructor le pasamos como argumento el servicio creado, también especificamos de que objeto vamos traerlos datos,en este caso, Personas,  esto asociado al tag html padre (ul) al cual vamos a ligar los datos que vamos a obtener, en este caso, el Id y Nombre, los cuales son “bindeados” e impresos en la lista mediante el tag {{ campo }}

<script type="text/javascript"
src="MicrosoftAjax/MicrosoftAjax.debug.js"></script> 
<script type="text/javascript" src="MicrosoftAjax/MicrosoftAjaxTemplates.debug.js"></script> 

<script type="text/javascript" src="MicrosoftAjax/MicrosoftAjaxAdoNet.debug.js"> </script>

<body xmlns:sys="BLOCKED SCRIPTSys" xmlns:dataview="BLOCKED SCRIPTSys.UI.DataView"
      sys:activate="*">

<ul class="list sys-template"
   sys:attach="dataview"
   dataview:autofetch="true"
   dataview:dataprovider="{{ new Sys.Data.AdoNetServiceProxy
    ('WebDataService.svc') }}"
   dataview:fetchoperation="Personas"  >
    <li>
            <span class="name">{{ Id }}</span>
            <span class="value">{{ Nombre }}</span>
    </li>
</ul>

 </body>

aAl Probar nuestra pequeña aplicación, vemos que tenemos nuestra pantalla con los datos impresos, pero sin ocupar algún runat=”server” y sin tener ViewState en la página (yeah!)

image

 Vista de código fuente y repito, sin Viewstate :)

image

 Para descarga este ejemplo acá, es posible que tengas que recompilarlo

Espero que te haya servido, voy a tratar de escribir más ejemplos, pero haciendo un CRUD completo.

Saludos,

Gonzalo

Posted: 31/7/2009 5:20 por Gonzalo Perez | con 5 comment(s) |
Archivado en: ,,
[ChalaGauge] Nuevo Skin para Gauge SemiCircular

image

Para probarlo, cópialo en la carpeta raíz y luego en el archivo Gauge.js cambia la propiedad:

var MODELOXAML = "GaugeCristalLineal.xaml";

DESCARGA EL SKIN PARA GAUGET SEMICIRCULAR

Espero que les sirva!
Gonzalo

[ChalaGauget] Dos Skin de Héctor Pérez, Cool! Bájalos ya!

Otros Skin de la mano de  Héctor Pérez que están muy buenso, llegar y probar en el control(lineal y circular), visita el blog de Héctor para aprender de WPF,  XAML entre otras cosas.

Skin Nitro para Gauget Lineal

image

Para probarlo, cópialo en la carpeta raíz y luego en el archivo GaugeLineal.js cambia la propiedad:

var MODELOXAML = "GaugeNitroLineal.xaml";

DESCARGA EL SKIN NITRO LINEAL

 

Skin Blueking para Gauget Circular

image

Para probarlo, cópialo en la carpeta raíz y luego en el archivo Gauge.js cambia la propiedad:

var MODELOXAML = "GaugeBlueKing.xaml";

DESCARGA EL SKIN BLUE KING

Espero que les sirva!

Saludos,
Gonzalo

[ChalaGauge] Disponible Gauge Semi-Circular

image

 

Hola que tal, seguimos en la línea  de los gauges, esta vez con Gauges semi-circulares, espero poder hacer en el corto plazo más skin para este tipo de control.

Si es el primer post que lees de esto, puedes ver los artículos anteriores , que explican en funcionamiento del control.

http://geeks.ms/blogs/gperez/archive/2009/07/20/chalagauget-skin-nitro-de-h-233-ctor-p-233-rez-cool-b-225-jalo-ya.aspx

http://geeks.ms/blogs/gperez/archive/2009/07/13/gauge-mi-control-gauge-silverlight-versi-243-n-beta1-liberada-para-siempre-gratis.aspx

http://geeks.ms/blogs/gperez/archive/2009/07/15/chalagauget-nuevo-skin-para-control-circular.aspx

La Estructura de Carpetas sigue siendo la misma:

image

Descarga

Puedes descargarlo gratis  desde acá.

Espero que te sirva!
Gonzalo

[Off-Topic] Diferencias entre un docente de informática que solo ha hecho clases y uno que también trabaja.

Diferencias entre un docente de informática que solo ha hecho clases:

Muchachos, programemos :
System.out.println("Hola Mundo");
System.out.println("Odien a Microsoft");

Un profe part-time, que trabaja en el área y hace clases:
System.Console.WriteLine("Pongámonos serios, hagamos software");
System.Console.WriteLine("Odien la ignorancia, de preferencia, la propia");

Para terminar la idea, pero “Más docentes que transmitan experiencia del medio empresarial a los alumnos, alumnos mejor preparados, más docentes fundamentalistas que nunca han trabajado en empresas haciendo un software y que enseñan ingeniería de software y proyectos, se traduce en alumnos con conocimientos potencialmente inútiles!”.

Es mi humilde opinión!

PD1: Algunos colegas me deben estar odiando, pero bueno, siempre me odiaron.

PD2: Algo más desalentador para un alumno, en términos de credibilidad hacia los conocimientos  el docente, que dicho docente, venga con un libro “JAVA for Dummies” bajo el brazo?

 

Saludos,
Gonzalo

Posted: 25/7/2009 7:04 por Gonzalo Perez | con 19 comment(s) |
Archivado en:
[ChalaGauge] Nuevo Skin para Gauge Lineal

Aporte de Héctor Pérez, ahora para los gauges lineales.

image

Para probarlo, cópialo en la carpeta raíz y luego en el archivo GaugeLineal.js cambia la propiedad:

var MODELOXAML = "GaugeCristalLineal.xaml";

DESCARGA EL SKIN

Espero que les sirva!
Gonzalo

[ChalaGauge] Bug #1 Compatibilidad con IE7

Hola, se detectó un error en los archivos

  • GaugeLineal.xaml.js – Para Gauget Lineal
  • Gauge.xaml.js – Para Gauget Circular

El Bug trae problemas de compatibilidad solo con IE7, y es imperceptible con los demás navegadores (IE8, FireFox, Opera, Chrome y Safari).

Puedes descargar los archivos acá:

Descargar

Nota: La versión para descargar del control que puedes encontrar en los siguientes links, ya contiene la solución.

Ir a Página de  Gauget Lineal

Ir a Página de Gauget Circular

Saludos,
Gonzalo

[ChalaGauge] Nuevo Control Gauge Lineal Beta

Hola, quiero compartir con ustedes otra versión del Gauge, si este es el primer post que vez sobre estos controles, te invito a revisar los siguientes links:

http://geeks.ms/blogs/gperez/archive/2009/07/20/chalagauget-skin-nitro-de-h-233-ctor-p-233-rez-cool-b-225-jalo-ya.aspx

http://geeks.ms/blogs/gperez/archive/2009/07/13/gauge-mi-control-gauge-silverlight-versi-243-n-beta1-liberada-para-siempre-gratis.aspx

http://geeks.ms/blogs/gperez/archive/2009/07/15/chalagauget-nuevo-skin-para-control-circular.aspx

Si ya sabes de que hablo, bueno , sigamos revisando el nuevo control, básicamente consiste en un Gauge lineal, es decir, que su indicador se mueve horizontalmente.

Esta vez, no implementé archivos de Skin para cada una de las versiones, ya que creo que se ven bien sin modificaciones (o al menos eso creo). A diferencia de los Gauge circulares, se ha incluido funcionalidades adicionales, como ir mostrando el valor máximo alcanzado y el valor mínimo, además de poder resetear estos valores.

En la siguiente imagen podemos ver las características del Gauge

image

Los dos diseños que se incluyen hasta el momento son:

1) GaugeLineal1.xaml:

image

2) GaugeLineal2.xaml:

image

Configuración Básica

En el archivo que está dentro de la carpeta Scripts, GaugeLineal.js podrás editar los principales parámetros de configuración.

//Seleccion del SKIN
var MODELOXAML = "GagueLineal1.xaml";
var MOSTRAR_INDICADORES = "SI";   //SI – NO
var MOSTRAR_RESET_INDICADORES = "SI"; //SI – NO
var FUNCION = "generaAnimacion(aleatorio())";
var INTERVALO = 2000;
//Dimensiones
var ALTO = 105;
var ANCHO = 459;

Como se ve, se puede setear si es que queremos ver los indicadores (máximo y mínimo) y si es que queremos ver el botón reset. Además se pueden cambiar las dimensiones (en el gadget anterior solo teníamos la variable dimensión ya que era un cuadrado), lo demás funciona de manera similar al control gauge circular.

Estructura de Carpetas

Como se ve en la siguiente figura, ya no existen los skins, lo que hace que resulte en un control bastante sencillo de implementar.

image

Probando el Control

Video:

Descarga:

Baja el control ChalaGauge Lineal  ( y cuéntame como te fue, soy un fanático del feedback!)

Espero que te sirva!
Gonzalo

AJAX Functionality en ASP.NET 4.0 – Parte 1/5

Hola que tal? en esta serie de artículos voy a estar “traduciendo” de documento “ASP.NET 4.0 and Visual Studio 2010 Web Development Overview”. Muchos cambios cool vienen para ASP.NET 4.0, voy a partir por algunos que me son más emocionantes (aunque todos lo son!)

ahí vamos…

La funcionalidad de AJAX dentro de ASP.NET 4.0 permite nuevos escenarios de programación del lado del cliente para las páginas y componentes desarrollados que permiten interactuar con datos desde el servidor con notación JSON  para ser renderizados como HTML de una manera altamente eficiente. Para habilitar estos escenarios, ASP.NET 4.0 incluye las siguientes características:

  • Plantillas renderizables del lado del cliente
  • Instanciación declarativa de los controles  y comportamientos del lado del cliente
  • Live Data Binding
  • Uso del patrón observador con tipos Javascript
  • Una clase AdoNetServiceProxy para el la interacción con ADO.NET Data Services del lado del Cliente.
  • Un control del lado del cliente llamado DataView para la unión de los datos con los componentes UI
  • Clases DataContext y AdoNetDataContentext para la interacción con Servicios Web.
  • Librerías de ASP.NET AJAX refactorizadas.

Client Templates Rendering.

En un desarrollo basado en el lado del cliente, las plantillas son la forma más manejable para crear la UI. ASP.NET 4.0 incluye un nuevo motor de plantillas para el desarrollo centrado en el cliente que cumple con los siguientes requerimientos:

  • Rendimiento -  El motor debe ser capaz de renderizar un número de ítems típico usando una plantilla razonablemente compleja antes que los usuarios perciban alguna interrupción en su interacción con la aplicación.
  • Simplicidad – La sintaxis a utilizar con las plantillas debe ser legible y debe estar optimizado para la mayoría de los escenarios comunes, llamados one-way/one-time binding.
  • Lenguaje – Las plantillas deben soportar expresiones del lenguaje para ir más allá de los casos mas sencillos. Las expresiones del lenguaje deben ser con sintaxis familiares , idealmente sintaxis Javascript.
  • Código y Marcas  Interceptadas – Debe ser posible realizar renderizado condicional o bucle sobre marcas utilizando el código HTML que lo rodea.
  • Compatible XHTML  - Las plantillas deben ser compatibles con XHTML.
  • Componentes – Cuando se usa la sintaxis de las plantillas, el desarrollador debe poder instanciar los controles del lado del cliente así también como  los comportamientos que se atacharan a los controles HTML en la página o con las plantillas.

Ejemplo de Plantilla

El siguiente ejemplo muestra una plantilla del lado del cliente típica que se puede crear usando ASP.NET 4.0

<ul id="myTemplate" class="sys-template"
    sys:attach="dataview" >
     <li>
        <h3>{{ Name }}</h3>
        <div>{{ Description }}</div>
    </li>
</ul>

El atributo class del atributo ul esta marcado como “sys-template”, el cual es una convención que se utiliza para ocultar la plantilla inicial del usuario. Se debe definir esta clase en el CSS como {display:none;}.

Cuando la plantilla se muestra, tiene un elemento de datos como contexto. Campos o Propiedades pueden ser incluidos en la plantilla de marcas mediante el uso de las marcas {{}}} - por ejemplo, {{Name}}, si es que el elemento de datos tiene un campo Nombre. Estas expresiones pueden estar situadas en cualquier lado en un contexto de texto, o se puede usar como el valor de un atributo. Además de los campos y propiedades, la expresión también puede contener bloques de JavaScript cualquier expresión la cual que puede ser evaluada como una cadena.

Se puede configurar eventos DOM utilizando el método $AddHandler. En el DOM, los atributos de los elementos (como por ejemplo, onclik=method) funcionan con las plantillas.

Instanciar una plantilla mediante el control DataView

La forma más conveniente de usar plantillas de cliente en ASP.NET 4.0 es a través del control DataView. El contenido del control DataView es usado  como una plantilla para renderizar los items de datos (registros) que provee el control. Si se establece la propiedad del  control de datos del DataView como  un array, la plantilla es redenrizada una vez por cada ítem en el arreglo. El control DataView se une a datos en vivo (live Binding), lo que significa que el control se actualiza automáticamente cuando se modifica la información en el origen, sin la necesidad de hacer rebind. Esto proporciona una dinámica impulsada por datos de la interfaz de usuario en el navegador. El siguiente ejemplo muestra el de manera declarativa de un control DataView que se une a un conjunto llamado imagesArray.

<body xmlns:sys="BLOCKED SCRIPTSys"
  xmlns:dataview="BLOCKED SCRIPTSys.UI.DataView"
    sys:activate="*">

    <ul sys:attach="dataview" class="sys-template"
        dataview:data="{{ imagesArray }}"    >
        <li>
            <h3>{{ Name }}</h3>
            <div>{{ Description }}</div>
        </li>
    </ul>
</body>

Instanciar Plantillas mediante código

Además, se puede crear plantillas compiladas desde código usando la clase Sys.UI.Template, como se muestra en el siguiente ejemplo:

var t = new Sys.UI.Template($get("myTemplate"));

El constructor toma el elemento de la plantilla como argumento. A continuación, se puede hacer una plantilla compilada en el DOM, llamando su método instantiateIn HTML y especificando un contenedor y un ítem de datos (data ítem)  como contexto. El siguiente ejemplo muestra cómo hacer esto.

t.instantiateIn(
    $get("targetContainer"), 
    {
        Name: "Name",
        Description: "Description"
    }
);

Usando las Pseudo-columnas en las Plantillas

Además de proporcionar acceso a los campos y las propiedades de los ítems de datos, el motor de renderizado de la plantilla también proporciona acceso a los  pre-definidos "pseudo-columnas", como el $index y $dataItem. Estas pseudo-columnas le dan acceso a los valores desde motor de renderizado en tiempo real. Puede utilizar las pseudo-columnas  de la forma que se  utiliza cualquier variable de JavaScript en la plantilla instanciada. El primer ejemplo aplica un css diferente al elemento div para marcar los elementos alternativos que son dibujados por el control Dataview. El segundo ejemplo pasa la pseudo-columna $dataItem, el cual representa los datos del registro actual, a una función llamada nameConvert para ser procesada.

<div class:alternateitem=”{{$index%2 == 1}}”>

<span>{{nameConvert($dataItem)}}</span>

Incorporando Código dentro de las Plantillas para usar los atributos code:if, code:before, y code:after

Se puede agregar los nuevos atributos declarativos code:if, code:before, y code:after para cualquier elemento DOM dentro de una plantilla con el fin de que el elemento condicional (code:if) o para renderizar según el código antes (code:before) o después (code:after) el elemento. El siguiente ejemplo muestra como usar el atributo  code:if para renderizar un elemento hr como un separador entre ítems. El atributo code:if usa el valor de la pseudo-columna para asegurarse que el elemento hr es renderizado solo entre ítems, y no antes  del primero o después del último elemento.

<ul id="myTemplate" class="sys-template">
     <li>
        <hr code:if="$index!==0" />
        <h3>{{ Name }}</h3>
        <div>{{ Description }}</div>
    </li>
</ul>

Instanciando Comportamientos y controles declarativamente

ASP.NET 4.0 introduce una forma declarativa para crear una instancia del control y comportamientos del lado del cliente  y adjuntarlos a los elementos HTML. Las marcas declarativas se logra sin añadir nuevos elementos HTML, simplemente por la inclusión de nuevos atributos namespaced los cuales son compatibles con XHTML.

Continua con la siguiente entrega… (mañana)

Saludos,
Gonzalo

[ChalaGauget] Skin Nitro de Héctor Pérez, Cool! Bájalo ya!

Otro Skin de la mano de  Héctor Pérez que está muy bueno, llegar y probar en el control, visita el blog de Héctor para aprender de WPF,  XAML entre otras cosas.

image

Para probarlo, cópialo en la carpeta raíz y luego en el archivo Gauge.js cambia la propiedad:

var MODELOXAML = "GaugeNitro.xaml";

DESCARGA EL SKIN

Espero que les sirva!

[ChalaGauget] Nuevo Skin para Control Circular!

Mi buen amigo, máster en XAML Héctor Pérez, hizo su cooperación con un excelente skin, que lo puedes descargar acá. Este skin tiene efector de reflejo muy cool y la barra de colores (la cual no tengo idea de como se hace, ya le pedí que me enseñara)


image

Para probarlo, cópialo en la carpeta raíz y luego en el archivo Gauge.js cambia la propiedad:

var MODELOXAML = "GaugeHector.xaml";

 image

DESCARGA EL SKIN

Espero que les sirva y muchas gracias Héctor!

[Gauge] Mi Control Gauge Silverlight, versión beta1 Liberada, para siempre gratis!

No se que nombre ponerle a este artículo, quizás en un poco ambicioso, pero quería compartir versión beta 1 de mi control customizable ChalaGauget (b1) :P. La idea partió de la necesidad de  contar con un control gauge gratis, que se pudiera utilizar desde cualquier lenguaje del lado del servidor, php, asp.net, etc. Para lo que recurrí a Silverlight 1.0 (si, si, sé que la moda es SL3, pero necesitaba solo javascript)  para crearlo, ahora pongo las especificaciones técnicas.

Introducción ChalaGauge beta 1 

ChalaGauge es un control de tipo “tacómetro” pobre pero honrado, construido con Silverlight y javascript , dentro de sus características principales están:

  1. Liviano, desarrollado con Silverlight 1.0 y javascript
  2. Compatible con IE7, IE8, Firefox, Chrome, Safari y Opera.
  3. Incluye distintos diseños de gauges y posibilidad de crear y aplicar Skins de manera sencilla a cada uno de ellos.
  4. Configurable al 100%(casi en la versión beta1), posibilidad de configurar color y visibilidad de todos los componentes del gauget:
    1. Tamaño
    2. Números
    3. Color
    4. Cuadro indicador de Porcentaje
    5. Texto indicador de porcentaje
    6. Fondo del control
    7. Ancho de Líneas,
    8. Soporte del indicador
    9. Función que entregará el valor (en porcentaje) que le indicará al gauge el valor a mostrar
    10. Periodicidad en que se llamará a esa función.

Estructura de Carpetas de  ChalaGauge Beta 1

Para entender como funciona el control, veamos como está construido el control revisando la estructura de carpetas:

image

En donde la Carpeta scripts contiene los archivos Gauge.js, Gauge.xaml.js y Silverlight.js, los dos primeros contienen los script para la configuración y el funcionamiento del control.

La carpeta temas contiene los archivos JS que setearan las propiedades del XAML generando temas para las distintas versiones da Gauges. (Próximamente estaré haciendo un pequeño tutorial de como hacer un tema para ChalaGauge b1)

En la carpeta raíz nos encontramos con las distintas versiones de ChalaGauges, desde la versión 1,  que es básica hasta las versiones más avanzadas del beta 1.

Veamos ahora, antes de entrar en detalles de código, las distintas versiones y skins disponibles, obviamente puedes hacer más tu mismo, y es lo que te quería pedir, necesito apoyo en XAML!, soy mal diseñador.

UI de ChalaGauge

Ha tenido una evolución desde las primeras versiones (intentos) de mi parte para hacer algo más “profesional”. Los temas están diseñados para funcionar con cualquier versión del Gauge

Versión GaugeV1 (Archivo GaugeV1.xaml)

Sin Skin ( Marcado la Opción “NO” en la sección SKIN ,en el archivo de configuración.)

image

image

image

Sin Skin

Skin “Militar”

Skin “Wolverine” :P

Versión GaugeV2 (Archivo GaugeV2.xaml)

Sin Skin ( Marcado la Opción “NO” en la sección SKIN ,en el archivo de configuración.)

image image image

Sin Skin

Skin “Militar”

Skin “Wolverine” (tengo que arreglar el tema de los números)

Versión GaugeV3 (cool!)

Nota: La versión 3 del Chalagauge no tiene implementado totalmente el tema de los skins, aun así igual funcionan, pero están diseñados para no utilizar skins (Estos me quedaron más lindos no?)

image image image

GaugeV3a.xaml

GaugeV3b.xaml

GaugeV3c.xaml

Nota: Prontamente estaré liberando más skins, pero si quieres cooperar, bienvenido seas, al final voy a escribir sobre la forma de cooperar :),desde ya, gracias!.

Archivos de Configuración Gauge.js

El archivo Gauge.js contiene los parámetros de configuración de ChalaGauge, revisemos esta sección:

/*****No cambies estos valores! ******************/
var C_POSICION_CERO = 146.081;
var C_INCREMENTO_DIFERENCIA = 24.4503;
var POSICIONANTERIOR = 0;
var DIMENSIONORIGINAL = 218;
var C_PORCENTAJE_INICIAL = 0;
//Seleccion del SKIN
var MODELOXAML = "GaugeV3c.xaml";
var SKIN = "NO"; //"NO" para no seleccionar Skin - NOTA: LA Versiones GaugetV2x no necesitan Skins, es decir, se ven más cool sin Skin (por ahora)
var FUNCION = "generaAnimacion(aleatorio())";
var INTERVALO = 2000;
//Es cuadrado (en pixeles), tomando en cuenta que el valor original es 218(en el XAML) , jugamos con las transformaciones
var DIMENSION = 200;
var DIVGAUGE = "DivGauge";
//Corresponde al ID del Gauget
var IDGAUGE = "MiGauge";

Podemos ver que se puede setear de manera muy fácil el modelo XAML y su SKin, ademas es importante indicar que  FUNCION e INTERVALO indican a que funciona vamos a llamar y cada cuanto tiempo (en milisegundos) se va a llamar a esa función. En un próximo articulo voy a escribir sobre como conectar el control con un webservice. (revisa este articulo, te va a dar las pautas para poder hacerlo). La dimensión del gadget se puede establecer en pixeles, la función redimencionaGauge se encarga de hacer la transformación de escala a pixeles.

El ejemplo que puedes descargar tiene una función que se llama aleatorio que genera los porcentajes , la cual se pasa como argumento de la función generaAnimación, que es la responsable de realizar el movimiento del puntero.

Archivos de Temas

ChalaGauget tiene la característica (la que no esta al 100% en el beta1) de poder establecer los skins del control en el lado del cliente, estos skins son en general bastante livianos, (aproximadamente 5kb), y son bastante fáciles  de construir. En el próximo artículo veremos con construir uno,si no es que ya lo viste y te diste cuenta :).

Implementando en un Sitio Web ChalaGauge

Los pasos a seguir para implementar el control en su sitio web son:

1) Descarga ChalaGauge beta1
2) Hacer referencia a los archivos JS
  <script src="scripts/Silverlight.js" type="text/javascript">  </script>

    <script src="scripts/Gauge.xaml.js" type="text/javascript"> </script>

    <script src="scripts/Gauge.js" type="text/javascript"> </script>

3) En donde quieres que se posicione el control escribir:

<div id="DivGauge">
        <script type="text/javascript">
                 dibujarGauge();
        </script>
</div>

4)  Y  Listo!
   

Video de ChalaGauge en Acción

Un video vale 25 imágenes por segundo y una imagen vale más que 1000 palabras, por que lo se hace conveniente mostrar un videíto de como funciona el control.

Imagen de ChalaGauge corriendo en distintos Browser, y en todos anda bien! (Opera, IE, Safari,Chrome,) en Firefox también funciona :)

image

Ahora bien la parte importante, como ayudar :)

Este control es sin fines de lucro, ni si quiera el clásico “coopérame  con paypal”, hay varias cosas en las que me puedes ayudar:

Skins y versiones.

Si te animas, puedes crear skins y me los envías, obviamente yo lo publico con tu nombre, él crédito es totalmente del autor.

Sugerencias , correcciones
Si encuentras que hay algo que mejorar (es decir todo), me puedes enviar los comentarios posteándolos acá, voy a tratar de dar soporte a la mayor parte de las peticiones, pero si te animas, tu mismo haces la mejora y me la envías explicando como fue (ojala explicado por que soy bastante bruto :P ).

Promocionando y usándolo!
La idea que tengo para este control es que sea “comunitario” que crezca con aportes de la comunidad, algo bien parecido a lo de OS. Para eso, si puedes difundir que existe este control, a más personas le va a llegar la noticia y algunas se pueden animar a cooperar, también si lo usas y te da buen resultado, postea en el blog en donde esta siendo utilizado :), eso será mi verdadero pago, saber que lo que hice es de utilidad.

Eligiendo un nombre….

Esta bastante feo el nombre de mi control verdad? bueno, estoy pensando en alguno, pero si me ayudas, mucho mejor.

Descarga el Control
Ahora que leíste todo , descarga acá la versión beta 1 de ChalaGauge, la que incluye Skin, versiones del control y la función de ejemplo. 

Espero que te sirva, estoy entusiasmado por que creo que se puede lograr algo bastante bueno, y recuerda postear si lo bajaste, así más o menos tengo una idea de cuanta gente ha descargado el control (quizás lo descarguen a la papelera reciclaje, pero algo es algo!)

Saludos!!!!!!

Gonzalo

[Tips] Reports.NET: Insertar imágenes.

Una de las cosas interesantes de Report.NET es que es muy fácil de utilizar, obviamente tiene todos los ingredientes que uno necesita para generar un reporte. Entre una de ellas, el insertar imágenes.  (Si no sabes que es Report.NET, te invito a leer mi artículo de Introducción)

Ahora bien, veamos los pasos para insertar una imagen. La imagen a insertar va a ser del gran Marcus Fenix, del Gear of War , dicho sea de paso, el sábado pasado termine el gow2, juegaso!,esperamos el 3.

Paso Cero:File->New Proyect –>Web->ASP.NET Web Application

Primer Paso: Agregar Referencia a Reports.dll (ve mi post anterior para más detalle)

Segundo Paso: Agregar la imagen(Add Existing File…)

image



 

Tercer Paso: (Y no te olvides de esto) Configurar la imagen como recurso embebido.

image

 

 

 

 

Cuarto Paso: El código…

Dim report As New Report(New PdfFormatter())
Dim fd As New FontDef(report, "Helvetica")
Dim fp As FontProp = New FontPropMM(fd, 15, Drawing.Color.Red)
Dim page As New Page(report)
page.AddCB_MM(80, New RepString(fp, "Marcus Fenix"))
Dim TheAssemblyrec1 As System.Reflection.Assembly = _
System.Reflection.Assembly.GetExecutingAssembly()
Dim TheStreamrec1 As System.IO.Stream
Dim imageNamerec1 As String = "marcus_fenix.jpg"        TheStreamrec1 = TheAssemblyrec1.GetManifestResourceStream _("pdfimg." & imageNamerec1)
page.AddMM(10, 50, New RepImageMM(TheStreamrec1, 30, 30))        RT.ViewPDF(report, "MiInforme.pdf")

Con esto lo que hacemos es obtener la imagen que esta embebida. Luego con AddMM y RepImageMM podemos ver la posición y el tamaño de la imagen respectivamente.

Quinto Paso:F5 (Eso es todo amigos!)

image

Espero que te sirva!

Gonzalo

Temario Curso POO y Patrones de Diseño
UNIDADES CONTENIDO Unidad 0:Repaso de POO 0.1 O rientación a objetos una técnica para mejorar la calidad del software 0.2 Clases, Interfaces y objetos -Herencia ,herencia multiple -Abstracción -Encapsulación -Sobrecarga - Sobreescritura - Polimorfismo -Tipos de clases 0.3 Corrección y robustez Assertions Exceptions Pruebas unitarias. Unidad 1 : Introducción a los Patrones de Diseño 1.1 Concepto de patrón. 1.2 Definiciones de patrón. 1...