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 |
|
|
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 |
|
|
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 |
|
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 |
|
|
MouseLeftButtonUp |
Se dispara cuando se suelta el botón izquierdo del mouse |
|
MouseEnter |
Se dispara cuando el cursor se posiciona |
|
MouseLeave |
Se dispara cuando el cursor deja de estar posicionado |
|
MouseMove |
Se dispara cuando el cursor se mueve estando posicionado |
|
Otros Eventos |
|
|
Loaded |
|
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 |
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).
Dibujar y pintar
|
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 |
|
|
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 |
|
|
Stretch |
|
|
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:
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).
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.
Creando animaciones de Silverlight usando Expression Blend
October 2nd, 2007
Les quiero mostrar cómo lograr una animación que se repite indefinidamente en Silverlight, usando la herramienta de Expression Blend.
Como primer paso voy a crear un proyecto en la herramienta de tipo Silverlight Application (javascript). Para ello, dentro de Expression Blend tenemos que seleccionar File / New Proyect… (o el acceso directo Ctrl+Shift+N) y elegir la opción correspondiente. Hay que elegir un nombre para el proyecto, por ejemplo Prueba Animacion.
El Expression Blend se encarga de generar todos los archivos necesarios para una aplicación Silverlight. Ahora vamos a agregar un objeto Ellipse (que va a ser nuestro objeto a animar). Para eso vamos a la ToolBox y seleccionamos la opción de insertar un objeto. Con botón derecho se muestran los objetos disponibles, y elegimos la opción Ellipse.
Insertamos un Ellipse en el canvas. En el Property Inspector, primero seteamos el nombre de nuestro elemento (por ejemplo ObjetoAnimado). Este nombre se utiliza para referenciar el objeto en la aplicación. En la solapa Brush seteamos la propiedad Fill con un Solid Color Brush y elegimos un tono rojo. En la solapa Layout seteamos las propiedades Width = 20, Heigth = 19, Left = 0 y Heigth = 210. Para ver la pantalla completa, hay que setear el zoom al 50%.
Ahora añadimos la animación. Para ello vamos a la sección Objects and Timeline y creamos un nuevo timeline. También acá se ingresa un nombre al Timeline para que se pueda referenciar durante la aplicación (por ejemplo ObjetoTimeline). Antes de aceptar, verificar que está checkada la opción “Create as a Resource”. Una vez creado el Timeline, se muestran una pantalla a la derecha de los objetos que muestra una línea de tiempo de la animación y aparece el recuadro en rojo en la pantalla de diseño del canvas que indica que se está grabando la animación.
Vamos a hacer una animación en la que la pelotita rebota en 4 puntos y vuelve al sitio original. Para eso hacemos una marca en el Timeline en el tiempo 0 (verificar antes que esté seleccionado el objeto ObjetoAnimado en el Objects and Timeline). Luego movemos el objeto a la posición Top 0, Left 310 y volvemos a hacer una marca en el Timeline a los 3 segundos. Repetimos los movimientos y las marcas en las posiciones Top 210, Left 620, Top 460, Left 310 y nuevamente en Left 0, Top 210, siempre cada 3 segundos. Luego dejar de grabar la animación. Al final debería quedar la imagen que se muestra abajo. Verificar que el objeto Canvas que contiene a todos los elementos tenga seteados los valores de Width = 640 y Height = 480.
Para iniciar la animación, agregamos un texto Presione Aquí al que le seteamos las propiedades de Subrayado y el Foreground de color verde. Luego vamos a la solapa XAML y seteamos en el TextBlock que contienen el texto generado el manejador del Evento MouseLeftButtonDown = “manejarAnimacion”. Además seteamos en todos los tags de DoubleAnimation la propiedad RepeatBehavior="Forever".
Por último, abrimos el archivo Page.xaml.js y agregamos la función manejarAnimacion con el siguiente código:
var comenzo = false
function manejarAnimacion(sender, args)
{
if (comenzo == false)
{
sender.findName("ObjetoTimeline").begin();
comezo = true;
}
}
Presionar F5 para ver ejecutar la aplicación y luego presionar sobre el texto "Presione Aquí" para ver la animación.
Nota: Se puede luego modificar la velocidad de la animación haciendo drag&drop de los Record KeyFrames en el Timeline. Una buena velocidad resulta en un KeyFrame por segundo.