HPC WebCasts

December 2nd, 2008

Diciembre 2: HPC 2008: Introducción

(10:00 HS Colombia – 13:00 HS BUENOS AIRES)

Oradores:

 

·        Angel “HPC” Lopez

·        Sebastian Renzi

 

Abstract:

El termino HPC (High Performance Computing) se refiere a la necesidad de contar con gran potencia de computo para la resolución de problemas. Con el avance de la tecnología y el abaratamiento de los costos en hardware, hoy en día no es necesario contar con una supercomputadora e invertir grandes cantidades de dinero para obtener gran poder de computo. A partir de la aparición de “clusters”, conformados por máquinas convencionales, podemos explotar al máximo la capacidad de cálculo de cada una de ellas mediante la utilización de Windows HPC Server 2008. En esta oportunidad veremos una introducción al tema de HPC, conjuntamente con las principales características de Windows HPC Server 2008.

 

http://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032390223&EventCategory=4&culture=es-AR&CountryCode=AR


Diciembre 3: HPC 2008: Instalación y Despliegue

(10:00 HS Colombia – 13:00 HS BUENOS AIRES)

Oradores:

 

·        Ezequiel Bella

·        Maximiliano Déboli

 

Abstract:

Con Windows HPC Server 2008, tenemos a nuestra disposición el poder de una supercomputadora: podemos armar un “cluster” de máquinas para ejecutar trabajos en paralelo, de forma de poder aumentar el poder de cálculo con solo agregar más máquinas en el sistema.

En esta oportunidad mostraremos como construir un clúster utilizando Windows HPC Server 2008. A lo largo de la sesión, analizaremos las diferentes topologías que se pueden conformar; las nuevas herramientas disponibles para la instalación y puesta en marcha de nuevas máquinas en un clúster basada en plantillas; y por ultimo ejecutaremos una tarea sencilla sobre el clúster.

 

http://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032390230&EventCategory=4&culture=es-AR&CountryCode=AR


Diciembre 4: HPC 2008: Ejecución y Administración

 

(15:30 HS Colombia – 18:30 HS BUENOS AIRES)

Oradores:

 

·        Maximiliano Déboli

·        Jorge Andrés Garcia

 

Abstract:

Con Windows HPC Server 2008, tenemos a nuestra disposición el poder de una supercomputadora: podemos armar un “cluster” de máquinas para ejecutar trabajos en paralelo, de forma de poder aumentar el poder de cálculo con solo agregar más máquinas en el sistema.

En esta sesión veremos distintas formas de enviar trabajo a un “cluster” de HPC y obtener sus resultados. Al tener varias máquinas bajo control, estudiaremos las facilidades de administración, monitoreo y diagnóstico que ofrece esta plataforma. Podremos ver gráficamente el estado de los nodos, su carga de trabajo, así como verificar la salud de su funcionamiento.

 

http://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032390234&EventCategory=4&culture=es-AR&CountryCode=AR

Cambios generales

(fuente: MVC preview 2 Readme)

Cambios en la estructura del proyecto

Agregado de las librerías de MVC v2 y remoción de MVC Toolkit y Web.Extensions 3.6.0.0

  • Hay que remover las librerías MVCToolkit y Web.Extensions 3.6.0.0 y agregar las librerías System.Web.Abstractions, System.Web.Mvc y System.Web.Routing

Agregado de nuevo archivo de Web.Config en el directorio Views

  • Hay que agregar un Web.config en la carpeta views con el siguiente código:

<?xml version="1.0"?>
<
configuration
>
  <
system.web
>
    <
httpHandlers
>
      <
remove verb="*" path
="*.aspx"/>
      <
add path="*.aspx" verb
="*"
         
type
="System.Web.HttpNotFoundHandler"/>
    </
httpHandlers
>
  </
system.web
>
 
  <
system.webServer
>
    <
validation validateIntegratedModeConfiguration
="false"/>
    <
handlers
>
      <
remove name
="PageHandlerFactory-ISAPI-2.0"/>
      <
remove name
="PageHandlerFactory-ISAPI-1.1"/>
      <
remove name
="PageHandlerFactory-Integrated"/>
      <
add name="BlockViewHandler" path="*.aspx" verb
="*"
         
preCondition
="integratedMode"
         
type
="System.Web.HttpNotFoundHandler"/>
    </
handlers
>
  </
system.webServer
>
</
configuration>

Cambios en el archivo Web.config

Cambio de versión de Web.Extensions v3.6.0.0 a v3.5.0.0

  • Cambiar en el web.config todas las versiones de la librería web.extensions (donde dice 3.6.0.0 hay que poner 3.5.0.0

Remover Bindings y Dynamic Data and Routing Modules and Handlers

  • Remover las dependetAssembly que mapeaba las versiones anteriores de Web.Extensions a la versión 3.6.0.0 (esto está dentro del tag
  • Remover de  los tags con namespace System.Web.DynamicData y tagName ~/App_Shared/DynamicDataFields/FilterUserControl.ascx
  • Remover de el tag de System.Web.DynamicData.DynamicDataControlSessions
  • Remover la sección bajo
  • Remover de la sección los modulos de DynamicDataModule y UrlRoutingModule
  • Remover de el módulo UrlRoutingModule.

Nuevo ruteo usando System.Web.Routing

  • En  agregar el siguiente código en la sección : <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web.Routing, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

  • En  agregar el siguiente código en la sección : <add name="MvcScriptMap" preCondition="classicMode,bitness32" verb="*" path="*.mvc"modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi.dll" />

    <add name="MvcScriptMap64" preCondition="classicMode,bitness64" verb="*" path="*.mvc" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v2.0.50727\aspnet_isapi.dll" />

    <add name="UrlRoutingHandler" preCondition="integratedMode" verb="*" path="UrlRouting.axd" type="System.Web.Routing.UrlRoutingHandler, System.Web.Routing,Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

  • En agregar el siguiente código:<add namespace="System.Web.Routing"/>

  • En httpModules agregar el siguiente código: <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web.Routing, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

Nuevos modulos de MVC

  • Agregar el siguiente código en : <add assembly="System.Web.Abstractions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    <
    add assembly
    ="System.Web.Routing, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    <
    add assembly
    ="System.Web.Mvc, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

Cambios en Global.asax

Nueva alta de rutas

  • Se genera un nuevo método que es llamado por Application_Start: protected void Application_Start(object sender, EventArgs e)
    {
        RegisterRoutes(
    RouteTable
    .Routes);
    }

  • El método agrega rutas en una collection: private static void RegisterRoutes(RouteCollection routes)
    {
       
    // Note: Change the URL to "{controller}.mvc/{action}/{id}" to enable
        //       automatic support on IIS6 and IIS7 classic mode
     
        routes.Add(new Route("{controller}/{action}/{id}", new MvcRouteHandler
    ())
        {
            Defaults =
    new RouteValueDictionary(new { action = "Index"
    ,
                id =
    ""
    }),
        });

    Cambio de identificación de los parámetros (cambio de [] a {})

Cambio de identificación de los parámetros (cambio de [] a {})

  • Verificar que los parámetros en las rutas estén declarados entre llaves {} y no entre corchetes []: "{controller}/{action}/{id}"

Cambios en Controllers

Remover los tags ControllerAction de los métodos y agregar los tags NonAction

  • Todos los métodos públicos de un controller (a excepción de los constructores) son considerados actions. Hay que remover los tags [ControllerAction] porque no sirven más

  • Todos los métodos públicos de un controller (a excepción de los constructores) que no quieran ser considerados actions deben etiquetarse con el tag [NonAction]


Cambios en Views

Cambios en HtmlHelper y UrlHelper

  • El método ActionLink de HtmlHelper no conserva la firma (string linkText, object values). Estos métodos deben reemplazarse por la firma (string linkText, string actionName, object values) quitando la property Action del objecto values.

  • El método Action de UrlHelper no conserva la firma (object values). Estos métodos deben reemplazarse por la firma (string actionName, object values) quitando la property Action del objecto values.

Creación de un nuevo ContextUserControl para que lo hereden los controles MVC

Base Controller y Base View

Escribir un controller base desde el cual heredan los controllers y una view base desde la cual heredan todas las views tiene muchos beneficios. Aquí presentamos algunos que se vuelven particularmente interesantes al momento de migrar de MVC v1 a v2.

Reescritura de HtmlHelper.ActionLink y UrlHelper.Action

Como vimos en el post anterior, el HtmlHelper.ActionLink y el UrlHelper.Action perdieron 2 firmas, lo que implicaría cambiar TODAS las llamadas a los métodos ActionLink y Action que usen esa firma en TODAS las views. Si existiera una view base de la cual hereden todas las views, una solución a este problema es sobreescribir las property Html y Url de la view Base con clases que hereden de HtmlHelper y UrlHelper y que implementen los métodos ActionLink y Action con los parámetros anteriores. No es una solución prolija, pero en caso de tener muchas views es mucho más rápida que cambiar todas las vistas. El código sería el siguiente:

Reemplazo de OnError por HandleUnknowAction

Antes

Después

Cambio de OnPreAction por OnActionExecuting

Antes

Después

Sobreescribir InvokeActionMethod

Miyagi: Día 1

December 11th, 2007

Application Demo Miyagi – Creating the basic architecture

 

Este es el primero de una serie de post en el cual mostraremos paso a paso la implementación de la aplicación del proyecto Miyagi.  Esta serie tiene como objeto mostrar a través de un ejemplo práctico el proceso de desarrollo de aplicaciones en Southworks mostrando el avance que día a día fue ocurriendo en la aplicación.

Cabe destacar que esta serie de posts comienza una vez que ya se definió el alcance del proyecto (Capacity, Project Charter, business stories, etc). Las etapas previas del proyecto estarán publicadas en otra serie de post (que se publicará en breve).

Brevemente, Miyagi es un proyecto  de administración de recursos y proyectos. La aplicación provee funcionalidad para asignar tiempos de dedicación de recursos a proyectos, proveer una serie de alertas en casos especiales (sobre-asignación de horas, sub-asignación, etc) y varias funcionalidades para consultar esta información. 

Partimos entonces desde el punto en el que se consensuó que el alcance de la aplicación se reduce al desarrollo de 3 vistas principales que son las mínimas que se necesitan para satisfacer las necesidades del cliente. Las vistas se muestran en la figura 1.

Figura 1: Vistas de Capacidad, Alocación y Proyecto

La idea es crear rápidamente un prototipo de la aplicación que se va a desarrollar con varios objetivos en mente:

Ø  Darle rápidamente algo tangible al cliente

Ø  Mostrarle que entendimos lo que necesita

Ø  Mostrarle cómo la aplicación que desarrollemos va a agregarle valor

Ø  Que sirva para validar o refutar lo que tenemos relevado hasta el momento.

Ø  Bajar a tierra las ideas que estaban en papel para que el mismo equipo de desarrollo empiece a pensar en algo más tangible

La filosofía es simple: Hacer sólo lo necesario, de la forma más sencilla y rápida posible para conseguir lo que queremos. La idea es no perder el foco de lo que queremos conseguir (un prototipo en este caso) y tratar de no buscar la mejor solución sino una que funcione. Cualquier semejanza con TDD no es casualidad.

Para generar el prototipo, el primer paso es crear un primer diseño de la BD. En la figura 2 se muestra el diseño resultante que permite almacenar la información necesaria. La tabla Resource almacena los recursos de la empresa, la tabla Project almacena los proyectos y las tablas HotAllocation y ColdAllocation almacenan las asignaciones a un recurso en un proyecto en un día determinado (la asignación por día es la menor granularidad posible). La división entre hot y cold allocation está pensada a efectos de mejorar la performance de la aplicación (ya se verá más adelante el funcionamiento de estas tablas).

Figura 2: Primer diseño de la BD.

El segundo paso es crear la arquitectura básica de la aplicación que vamos a desarrollar.  En nuestro caso, para este primer prototipo se estipulo crear una aplicación web desarrollada en ASP 2.0. Por lo tanto creamos una solución .Net que más simple que permite cumplir con este requisito:

Ø  Un web site (WebUX)

Ø  Un web service (Host.Asmx)

Ø  Una capa de negocio (Services)

Ø  Una aplicación de test de la capa de negocios (Services.Test)

La figura 3 muestra esta arquitectura.

Figura 3: Arquitecura de la aplicación

Aquí empieza el concepto de desarrollo en TDD.  Tenemos que tener una aplicación que compile siempre y que tenga un código correcto, pero que sea lo más fácil y rápido para implementar. Lo primero que hacemos entonces es compilar la solución que creamos y corregir los bugs que surjan. Luego tenemos que correr el analizador de código estático (FxCop) y corregir los warnings que este nos tira. Una vez que corregimos todo esto, tenemos nuestra primera versión correcta.

Luego tenemos que volver a pensar, cuál es el foco? Qué es lo primero, lo más importante que quiero hacer? Ante esta pregunta, la respuesta que surgió es “quiero mostrarle al cliente, el diseño de las pantallas que me pidió en papel en una aplicación”. Según TDD esta pregunta tiene que trasladarse a un test. El test, en este caso es manual, es un test de diseño: Necesitamos 3 páginas web que cumplan con el diseño gráfico previamente consensuado.

Ahora hay que pensar, “Para lograr esto, cual es la forma más rápida y fácil?”. La respuesta que se presentó es sorprendente y obvia: Exportar las vistas de Excel a HTML y pegarlas en 3 páginas Aspx cumple con este objetivo!!!

Por lo tanto, creamos 3 páginas aspx (ver Figura 4) y exportamos las vistas a html y pegamos el código en estos archivos. Rápidamente concluímos una implementación que cumple con el primer test: Comparando las vistas eran idénticas a las que estaban en Excel. Nuevamente compilamos la aplicación y corrimos el FxCop para asegurarnos que no tenemos problemas. Esto se convirtió en nuestra segunda versión de la aplicación. Fijense que aunque mínimo, esta versión muestra un incremento y que se acerca un poco más al objetivo que buscamos (no perdimos el foco).

Figura 4: Las 3 vistas de la aplicación.

Luego, con un poco de ayuda de expertos, mejoramos el html, en lo que sería un primer refactor de la aplicación (la idea es que en el refactor se elimina código redundante y se mejorar atributos de calidad de la aplicación). En este caso, se limpió el código html generado y se creó un css style que evita repetir código y permite reducir los errores de escritura del html. La figura 5 muestra el diseño final.

Figura 5: Diseño de la vista de capacity luego del refactor.

Introducción

Hoy les quiero mostrar una forma sencilla de hacer controles utilizando la tecnología Silverlight 1.0 (con  una ayudita de JavaScript). Debido a la extensión del documento voy a dividir la creación del control en 2 partes, una que muestre la creación del XAML de presentación y otra que muestre la lógica Javascript del control.

Seguramente se preguntarán porque hacer controles en Silverlight 1.0 si en la versión 1.1 es sencillo hacer controles utilizando C#. Estas son, en mi opinión, las ventajas:

Ø  Primero, Silverlight 1.1  requiere el Framework .Net versión 3.0 instalado en la máquina servidor además de un Servidor que soporte ASP.Net. Silverlight 1.0 en cambio requiere solamente el plug-in de Silverlight instalado en la/s máquina/s cliente para funcionar. Esto permite que las aplicaciones en Silverlight 1.0 puedan ejecutarse en muchas máquinas sin la necesidad de instalar componentes adicionales (salvo el plug-in, que es necesario también para la versión 1.1) ni de modificar toda la aplicación para cambiar el look&feel.

Ø  Segundo, Silverlight 1.0 se corre enteramente del lado cliente. Esto trae una enorme mejora en la performance de la aplicación. Y si bien con Ajax se logra lo mismo, Silverlight permite realizar con mucho menos esfuerzo componentes gráficos muy interesantes.

Ø  Tercero, si planean hacer desarrollos basados en la plataforma .Net en el futuro (y especialmente en la rama de Foundation),  migrar el look&feel de su aplicación a Silverlight 1.0 es un excelente primer paso. Estos controles y los XAML pueden utilizarse sobre la aplicación actual y van a seguir siendo utilizables cuando se quiera migrar esa aplicación a nuevas tecnologías.

Ø  Cuarto,  es bueno hacer controles. Los controles son porciones de código reutilizables, encapsulan funcionalidades coherentes, tienen un comportamiento previsible y una larga lista de etcéteras.

Ø  Quinto y no menos importante, provee todas las ventajas del entorno Silverlight-WPF (es multi-browser, se ejecuta puramente del lado del cliente, es multiplataforma ya que para funcionar interpreta el XAML mediante DLR y otra larga lista de etcéteras).

En suma, Silverlight 1.0 puede ser implementado en su actual aplicación, con un mínimo esfuerzo y sin necesidad de cambiar nada más que cambiar el look&feel de las páginas de su aplicación. Lo único que requiere es un plug-in ActiveX para funcionar instalado del lado cliente y el esfuerzo requerido para estos cambios va a ser una inversión para el crecimiento de su aplicación en un futuro no muy lejano.

Desarrollo del XAML

Elegí hacer un control que simule el efecto de una gota de agua. No encontré ejemplos de esta animación en Silverlight y por eso me pareció interesante. Voy a utilizar el Microsoft Expression Blend para hacer el xaml.  Lo primero es generar un objeto elipse sin relleno de 12 pixels de width y 10 de heigth (aproximadamente, en el código de ejemplo está hecho a ojo),  el borde se configura con un gradiente radial con 3 tonalidades, que empiece y termine con color blanco y en el medio con color negro.  También configuramos el ancho de la línea con valor 0 y la opacidad en un 30%. Copiamos 2 veces el objeto elipse y llamamos a las copias ElipseAgua, ElipseAgua1 y ElipseAgua2. Asegurarse que los 3 objetos estén centrados en un mismo punto de inicio (setear las propiedades Canvas.Left y Canvas.Top con los mismos valores).

Vista Elipses

Figura 1: Vista del Expression Blend con los elipses generados.

Ahora hacemos una animación que modifique los Elipses para simular el movimiento que se produce cuando cae una gota de agua. Para eso generamos una nueva animación a la que llamamos TimelineAgua y elegimos en orden el ElipseAgua, ElipseAgua1 y ElipseAgua2. Grabamos en el ElipseAgua la posición actual al comienzo de la animación y luego grabamos a los 2 segundos un movimiento estirando el objeto hasta cubrir todo el ancho del Canvas (teniendo en cuenta que tenga una forma de elipse y siempre manteniéndose centrado con respecto al centro original). También configuramos en ese momento la propiedad ancho de línea a 0.5. Luego, 1 cuarto de segundo después, volvemos a grabar el ElipseAgua pero el único cambio que hacemos es volver el ancho de línea al valor 0. Repetimos la animación para el ElipseAgua1, pero comenzando la animación 1 segundo después que el caso anterior y terminando 1 segundo más tarde y teniendo en cuenta estirar el objeto en una proporción menor que el caso anterior. El cambio de la propiedad ancho de línea a 0 debe durar un poco menos que 1 cuarto de segundo. Repetimos la animación para el caso ElipseAgua2 cambiando nuevamente el momento del inicio de la animación y el momento de finalización. Debería verse una animación similar a la que se muestra en la figura 2.

VistaTimeline

Figura 2: Vista del Expression Blend mostrando el Timeline de Animación.

Nota: Para hacer las animaciones recordar tener presionada la opción de recording del timeline

Nota  II: Recordar siempre mantener el mismo punto de centro para las 3 elipses

Nota III: Una vez finalizado el proceso de la animación hay que modificar el XAML agregando el parámetro x:Name a cada uno de los Storyboard de la misma. Silverlight requiere que cada elemento Storyboard tenga un nombre propio que lo identifique. En este caso llamamos a los otros 2 storyboard con los nombres TimelineAgua1 y TimelineAgua2.

Nota IV: Para hacer luego el control con el mismo XAML, vamos a achicar el tamaño del canvas a las medidas Width="174" y Height="68".

Para probar la animación cree una función start que vinculé con el evento MouseLeftButtonDown del Canvas. El código es muy sencillo:

function start(sender, args)

{

      var elipse  = sender.findName("ElipseAgua");

      var elipse1 = sender.findName("ElipseAgua1");

      var elipse2 = sender.findName("ElipseAgua2");

      elipse["Canvas.Left"]  = args.getPosition(null).x;

      elipse["Canvas.Top"]   = args.getPosition(null).y;

      elipse1["Canvas.Left"] = args.getPosition(null).x;

      elipse1["Canvas.Top"]  = args.getPosition(null).y;

      elipse2["Canvas.Left"] = args.getPosition(null).x;

      elipse2["Canvas.Top"]  = args.getPosition(null).y;

      sender.findName("TimelineAgua").begin();

      sender.findName("TimelineAgua1").begin();

      sender.findName("TimelineAgua2").begin();

}

Silverlight 1.0 Parte III

October 26th, 2007

Animaciones

En Silverlight 1.0 se pueden generar animaciones a partir de UI Elements.  

Para darle animación a un elemento tiene que setearse la propiedad Name del elemento. Esto sirve para identificar al elemento que se quiere animar.

Se puede utilizar un Trigger para capturar un evento (en Silverlight 1.0 el único disponible es el load de un Canvas). Se establece en el tag BeginStoryboard los pasos que va a realizar la animación.

<Canvas

    xmlns=”http://schemas.microsoft.com/client/2007″

    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”>

  <Canvas.Triggers>

    <EventTrigger RoutedEvent=”Canvas.Loaded”>

      <EventTrigger.Actions>

        <BeginStoryboard>

         

          <!– Insert Storyboard here. –>

        </BeginStoryboard>

      </EventTrigger.Actions>

    </EventTrigger>

  </Canvas.Triggers>

 

  <Ellipse x:Name=”ellipse”

      Height=”20″ Width=”20″ Canvas.Left=”30″ Canvas.Top=”30″

      Fill=”black”/>

</Canvas>

Figura: Esqueleto de un archivo XAML que ejecuta una animación (fuente QuickStar Silverlight 1.0)

Tipos de Animaciones

DoubleAnimation

Indica que se quiere animar una propiedad del objeto que es de tipo double.

ColorAnimation

Indica que se quiere animar una de las propiedades del objeto que es de tipo color.

PointAnimation

Indica que se quiere animar una de las propiedades del objeto que es un punto.

Propiedades

TargetName

Indica el nombre del objeto a animar

TargetProperty

Indica la propiedad que se quiere animar

From

Indica el origen de la propiedad del objeto a animar. Por defecto es el valor actual de la propiedad

To

Indica el destino de la propiedad del objeto a animar.

By

Especifica un offset para la propiedad del objeto a animar (por ejemplo en posiciones, puede indicar avanzar de a 2 posiciones).

Duration

Indica la duración de la animación (en formato hora:min:seg). OJO: poner un número indica días!!. Este atributo también puede setearse con 2 valores especiales "Forever" y "Automatic". Forever indica que la animación no termina nunca. Automatic indica que la animación es instantánea (este es el valor por defecto)

BeginTime

Indica el comienzo de la animación (a partir del momento que ocurre el evento, indica cuanto tiempo hay que esperar). El formato es el mismo que el atributo Duration

FillBehavior

Indica si la propiedad del objeto animada vuelve a su valor anterior a la animación o si permanece en el valor final de la animación.  Los valores son Stop y HoldEnd (respectivamente). Por defecto el valor es HoldEnd.

RepeatBehavior

Indica cuantas veces se repite la animación. Puede tener 3 tipos de valores:

-          Forever (que indica que la animación se repite indefinidamente)

-          Un tiempo finito (formato como el campo Duration). Lo que indica que la animación se repite cada cierto intervalo finito de tiempo

-          Un número de iteraciones (formato numberx) que indica que la animación se repite una cantidad finita de veces.

Por defecto el valor es 1x.

Scripting y eventos de mouse

Se pueden capturar eventos del mouse y manejarlos mediante scripting.  Para esto se tiene que acceder a los objetos (el plug-in, el canvas y los objetos contenidos en el canvas) en las funciones javascript y cambiar el valor de sus propiedades. También se pueden crear en forma dinámica objetos manipulando el XAML y controlar animaciones también mediante scripting.

Todos los objetos pueden capturar eventos del mouse.

Para acceder a un objeto en javascript existen 3 posibilidades:

-          Que sea pasado como parámetro: Cuando se indican parámetros en las funciones que se utilizan para manejar el evento, el primer parámetro siempre es el objeto que capturó el evento (sender).

-          Qué esté contenido dentro del objeto pasado como parámetro: En ese caso se utiliza sender.findName(“nombreObjeto”). El objeto a buscar debe tener seteada la propiedad Name.

-          Que se esté buscando el objeto plug-in: En este caso puede obtenerse mediante el método getHost() del objeto sender (siempre que exista un objeto sender) o invocando al método getElementById.

Dos métodos interesantes son:

-          sender[“attachedPropertyName”]:  Permite manipular las propiedades adjuntas del objeto sender . Por ejemplo:

-     function changelocation(sender, args) {
-         
-         sender["Canvas.Top"] = 70;
-     }

-          createFromXAML: Permite modificar el archivo XAML dinámicamente. Se invoca llamando al objeto plug-in.content.createFromXaml. A continuación se ve el código de una función que agrega un elipse en la pantalla:

-     function createEllipse(sender, args) {
-         
-         var slControl = sender.getHost();
-         var e = 
-             slControl.content.createFromXaml(
-                 '');
-         var canvas = sender;
-         canvas.children.Add(e);
-     }

Eventos de mouse

MouseLeftButtonDown

Se dispara cuando se presiona el botón izquierdo del mouse sobre el elemento que contiene el handler del evento

MouseLeftButtonUp

Se dispara cuando se suelta el botón izquierdo del mouse sobre el elemento que contiene el handler del evento

MouseEnter

Se dispara cuando el cursor se posiciona sobre el elemento que contiene el handler del evento

MouseLeave

Se dispara cuando el cursor deja de estar posicionado sobre el elemento que contiene el handler del evento

MouseMove

Se dispara cuando el cursor se mueve estando posicionado sobre el elemento que contiene el handler del evento

Otros Eventos

Loaded

Se dispara cuando se carga un elemento.

Silverlight 1.0 Parte II

October 19th, 2007

El objeto Canvas

El objeto “Canvas” puede contener muchos objetos que representan UIElements (son objetos que se muestran en pantalla). Se pueden construir figuras geométricas y ubicarlas con referencia al objeto Canvas que las contiene. Además un objeto Canvas puede contener otros objetos Canvas.

Elementos geométricos

Ellipse

Representa un círculo en pantalla

Rectangle

Representa un rectángulo

Line

Representa una línea

Polyline

Representa un conjunto de líneas unidas entre si

Polygon

Representa un polígono

Path

Representa figuras no geométricas (Ver en el SDK Path Markup Syntax)

Propiedades

Aplica a

Canvas.Left

La posición de un objeto con respecto al margen izquierdo del Canvas

Todos

Canvas.ZOrder

La posición de un objeto en cuanto al eje de referencia Z con respecto a otros objetos que se encuentran contenidos en el Canvas.

Todos

With

Ancho de los objetos

Rectangle

Ellipse

Canvas

Heigth

Alto de los objetos

Rectangle

Ellipse

Canvas

Background

Color de Fondo del objeto

Todos

Storke

Representa el color del borde de un elemento

Rectangle

Ellipse

Line

StrokeTickness

Representa el ancho del borde de un elemento

Rectangle

Ellipse

RadiusX – RadiusY

Sirve para ajustar el redondeo de los bordes.

Rectangle

X1, Y1, X2, Y2

Los puntos iniciales y finales del en coordenadas cartesianas

Line

Points

Puntos de referencia de una figura

Polygon

Polyline

Data

Atributo para enviar información de formas

Path

Fill

Color de relleno de un objeto

Rectangle

Ellipse

Polygon

Polyline


Dibujar y pintar

Se utilizan las propiedades de brush para pintar los objetos geométricos. Se pueden colorear utilizando gradientes (permite colorear un mismo objeto con distintos colores).


Propiedades para relleno de objetos

SolidColorBrush

Rellena un objeto con una color sólido

LinearGradientBrush

Rellena con una transición de colores gradual que se separan mediante líneas. Para detener el avance de un color se pueden indicar GradientStop.

RadialGradientBrush

Rellena con una transición de colores gradual que se separa formando círculos. Para detener el avance de un color se pueden indicar GradientStop. Además se puede setear el centro de la figura circular con las propiedades GradientOrigin, Center, RadiusX, and RadiusY

ImageBrush

Rellena un objeto con una imagen

VideoBrush

Rellena un objeto con un video

Propiedades Gráficas comunes

Se puede manejar la opacidad de las figuras (tanto de toda la figura como utilizando gradientes).  También se puede usar la propiedad Clip (que permite mostrar una parte de una figura).  Y utilizar Render Transform que es básicamente redibujar las imágenes (por ejemplo, un rectángulo se convierte en un rombo, etc).

Propiedades

Opacity

Maneja la opacidad de un objeto

Opacity Mask

Permite setear la opacidad de ciertas partes de un objeto. Para ello utiliza un objeto al que le setea la propiedad Brush logrando que el mismo se superponga sobre el objeto al que se le quiere cambiar la opacidad.

Clip

Permite solapar un objeto para que sólo se vea una porción del mismo. Hay que usar un objeto Geométrico para definir que parte del objeto se quiere mostrar

RenderTransform

Propiedad para renderizar imágenes. Utiliza las propiedades RotateTransform, SkewTransform, ScaleTransform, TranslateTransform.

Rotate Transform

Rota una imagen sobre su eje.

Skew Transform

Estira la imagen sobre el eje X o el Y

ScaleTransform

Cambia la escala de la imagen tanto en el eje X como en el Y

TransalteTransform

Traslada un objeto en forma horizontal o vertical

Imagenes

La imagen se carga mediante el tag Image.

Propiedades

Source

Indica la fuente donde se encuentra la imagen.

Stretch

Acomoda una imagen dentro de la porción del Canvas que lo contiene. Puede setearse con los valores Fill, None o Uniform.

Texto

Se puede darle formato a un texto (tamaño de letra, color, screcht, etc). Pueden aplicarse las propiedades generales de UI Elements (Opacidad, Clip, etc). Se utiliza un tag TextBlock para indicar un bloque de texto.

Propiedades

FontSize

Tamaño de letra

FontStyle

Estilo (Normal o Italic)

FontStretch

Como se acomoda el texto dentro de la porción del Canvas que lo contiene. Las opciones son UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, Normal, Medium, SemiExpanded, Expanded, ExtraExpanded, or UltraExpanded

FontWeigth

FontFamily

La familia de la letra

Foreground

Brush del texto (cómo se rellena). Puede utilizarse todas las opciones de Brush.

Media (audio y video)

Se puede agregar video en formato WMV. Como es la versión 1.0, se tienen que generar los scripts necesarios para manipular el video (stop, pause, play). Se puede ver el video en pantalla completa. Se utiliza un tag MediaElement para indicar el objeto multimedia.

Propiedades

Source

Indica la fuente donde se encuentra el video. Solo se reproduce formato WMV.

Stretch

Como se acomoda el video dentro de la porción del Canvas que lo contiene. Las opciones son None, Uniform, UniformToFill y Fill. Por defecto se setea en Fill.

IsMuted

Setea si el video es o no mudo. Valores posibles true o false. Por defecto está en false.

Volume

Setea el volumen del video. Los valores van del 0 al 1 siendo el 1 el valor más alto. Por defecto el volumen es 0.5.

Silverlight 1.0 Parte I

October 17th, 2007

Crear un proyecto Silverlight

Todo proyecto Silverlight en la versión 1.0 tiene 4 elementos:

-          Una o más páginas HTML

-          Uno o más archivos de scripting

-          Uno o más archivos de XAML

-          Un Plug-in que se ejecuta sobre la aplicación cliente y el archivo Silverlight.js

La aplicación puede instanciar muchos objetos “plug-in” que representan objetos que pueden procesarse mediante la capa Core de la arquitectura. Para lograr eso debe generar divisiones en el html y asignarle un objeto plug-in a cada división.

El archivo Silverlight.js es un archivo de ayuda que permite que el proyecto Silverlight sea visto en múltiples plataformas.

Para ejecutar el plug-in de Silverlight es necesario llamar al método Silverlight.createObject. A continuación

vemos los parámetros que este método toma: 

Silverlight.createObject(

        "myxaml.xaml",                  // Archivo xaml que se asocia al plug-in.

        parentElement,                  // referencia a la División que contiene este plug-in.

        "mySilverlightPlugin",         // ID del plug-in. Debe ser único.

        {                               // Propiedades por instancia.

            width:’300′,                // Ancho de la región del plug-in en pixels

            height:’300′,               // Alto de la región del plug-in en pixels

            inplaceInstallPrompt:false, // Determina si se muestra el prompt de

                                          // instalación si se identifica que

                                          // la versión es inválida

            background:’#D6D6D6′,       // Color de fondo en el área del objeto

                                          // plug-in.

            isWindowless:’false’,       // Determina si se muestra el plug-in

                                        // en modo Windowless.

            framerate:’24’,             // Propiedad MaxFrameRate.

            version:’1.0′               // Versión de Silverlight a usar.

        },

        {

            onError:null,               // valor de la propiedad OnError —

                                        // se debe indicar el nombre de la función

                                          //que manejará el evento

            onLoad:null                 // valor de la propiedad OnLoad —

                                        // se debe indicar el nombre de la función

                                          //que manejará el evento

        },

        null);                          // Valor de la propiedad de Contexto –

                                        // se debe indicar el nombre de la función

                                          //que manejará el evento

 A continuación se muestra con un gráfico la vista de módulos  (que identifica la relación “Contiene A”) que genera esta estructura:ModuleSilverlight

Figura: Elementos de una aplicación Silverlight

Crear un archivo XAML

El XAML representa un objeto a procesar mediante un objeto plug-in.  En esencia es un archivo XML con un formato especial extendido. En Silverlight sólo puede tener como raíz un objeto “Canvas” (es el único objeto contenedor que existe). Un XAML puede procesarse en más de un objeto plug-in.

Introducción a Silverlight

October 9th, 2007

Resumen 

Silverlight es un nuevo avance para desarrollos de aplicaciones web. Las principales ventajas que se observan son:

- Provee un framework de diseño independiente del control de la página, lo que le da herramientas reales a los diseñadores que no necesitan la intervención de un programador.

- Permite que la misma aplicación se ejecute en diferentes web browsers.

- Utiliza Windows Presentation Fundation (WPF) como herramienta  para el desarrollo.

- Incluye Language Integrated Query (LINQ) lo que permite acceso a datos.

- Posee soporte para ejecutar scripting bajo JavaScript

- Se integra con las tecnologías ya existentes (.Net AJAX, Phyton, Ruby, JavaScript, WebServices, etc).

- Permite un manejo fácil de elementos multimedia (video, sonido).

Arquitectura

La arquitectura de Silverlight se divide en 2 partes:

-          El Core Presentation Fundation que es básicamente un Software Development Kit (SDK) que permite la renderización de elementos de interfase, control de eventos de usuario (clicks, teclado, etc), un conjunto de elementos de interfase (UIElements) con valor agregado respecto de los UIElements  que se encuentran en .Net 2.0 (en la versión 1.1)  y permite la ejecución de elementos multimedia (en la versión 1.1) todo del lado del cliente!!!. Para utilizarlo hay que instalar un plugin (que permite ejecutar los componentes en un área restringida de la máquina cliente) y es multi-browser (o sea, se puede implementar un plug-in para distintos web browsers). Toda la programación de esta capa puede hacerse mediante scripting.

-          El Framework .Net de Silverlight  que es básicamente un subconjunto del Framework .Net que implementa herramientas para el manejo de datos (LINQ),  Controles extendidos (WPF),  DLR para interpretar scripting y herramientas para la conexión a accesos remotos. La versión 1.0 de Silverlight no tiene una implementación muy interesante de esta capa de la arquitectura, la versión 1.1 (todavía en desarrollo) incluye todas estas herramientas y agrega un CLR que implementa el manejo de los objetos de esta capa (se encarga del garbage collection, chequeo de tipos y manejo de excepciones).

-          Para comunicarse entre las capas se utiliza un XAML Object (un Extensible Application Markup Language) que es básicamente un XML con un formato especializado (ver WPF).

SilverlightArq

Figura: Componentes de la arquitectura Silverlight (fuente MSDN Silverlight)


Conclusión

En suma, Silverlight corre un poco más la barrera entre el diseño de la interfaz web y la programación en ASP.Net necesaria para lograr interactividad lo que facilita el diseño de la interfaz de la aplicación web. Además mejora la performance sobre todo en aplicaciones multimedia pues ejecuta muchas más cosas del lado cliente de la aplicación. Y permite hacer el desarrollo con la certeza de que la interfaz se ejecuta en los browser más populares sin necesidad de cambios.