August 2009 - Posts

Gracias a Fernando García Loera me entero de la disponibilidad de la documentación en español de Silverlight 3.

El contenido es el siguiente:

Recursos externos

Pueden encontrar la documentación aquí.

The Ultimate Fighting Championship fue transmitido en vivo utilizando Silverlight y IIS Smooth Streaming, demostrando nuevamente que estas tecnologías se están utilizando cada vez más para este tipo de transmisiones.

Sin título

Si quieren pueden ver los videos de las conferencias de prensa o comprar la repetición del evento aquí.

El equipo de Expression ha dejado disponible varios behaviors y triggers y lo han puesto en codeplex en el proyecto Expression Blend Samples.

Estos son los ejemplos disponibles

  • PlayMedia
  • PauseMedia
  • TogglePlayPauseMedia
  • RewindMedia
  • StopMedia
  • MouseGestureTrigger
  • MouseEventTrigger
  • StateChangedTrigger
  • CallDataMethod
  • InvokeDataCommand
  • DataEventTrigger
  • SetDataProperty
  • DataStateBehavior
  • DataStateSwitchBehavior
  • FluidBindProperty
  • PropertyChangedTrigger
  • CallMethod
  • ClippingBehavior
  • GoToNextState
  • GoToPreviousState
  • SetProperty
  • ShowMessageBox
  • ListBoxAddOne
  • ListBoxRemoveOne
  • ListBoxRemoveThisItem

Pueden descargarlos desde aquí.

Otro sitio más que suma funcionalidad de Silverlight, en este caso es el sitio oficial de la serie de televisión Stargate, que muestra una galería de imágenes utilizando Silverlight y Photosynth.

Para todos aquellos que no saben que es Photosynth, les recomiendo leer el siguiente post.

stargate

Ahora, lo interesante es que podemos ver un video de cómo se realizó esta funcionalidad.

s2

Para revisar el sitio pueden ir aquí.

Vamos a mostrar de que manera podemos crear un behavior en Silverlight 3. Para empezar vamos a hablar un poco de que son los behaviors.

El concepto de behavior, es el de encapsular lógica de interactividad y comportamiento y poder enlazarlo fácilmente a un elemento desde Expression Blend.

Una de las características más interesantes es la de permitir una mejor integración entre los equipos de diseño y desarrollo, ya que el programador crea la interacción independientemente de lo que se diseñando ya que sólo debe probar que el objeto logre el comportamiento deseado.

Obviamente, estos behaviors que nosotros vayamos creando podemos reutilizarlos a lo largo de nuestra aplicación o en otros proyectos que surgan en el futuro.

¿Cómo crearlo?

En este ejemplo vamos a crear un behavior que le va a dar a un objeto el comportamiento de seguir e cursor del mouse.

Para ello, desde nuestro aplicación vamos a agregar una clase la cual llamaremos FollowMouseBehavior.

Ahora necesitamos agregar la referencia a System.Windows.Interactivity.dll.

Cuando creamos nuestra clase, debemos hacer que herede de Behavior<T>, donde el tipo genérico T es el elemento donde queremos extender el comportamiento que estamos creando.

El tipo T debe ser un DependencyObjetc, en nuestro caso utilizaremos un FrameworkElement ya que necesitamos que nuestro comportamiento funcione para varios elementos, como ser un Rectangle, Image, Button, etc.

public class FollowMouseBehavior : Behavior<FrameworkElement>

¿Cómo interactuar con el elemento?

Hay dos eventos que podemos sobrescribir que nos permiten interactuar con el elemento que extendimos al momento que este se conecta con el behavior, estos son OnAttached y OnDetaching.

En nuestro ejemplo vamos a utilizar OnAttached ya que necesitamos generar un evento que se ejecute al mover el mouse sobre el contenedor del elemento.

protected override void OnAttached()
{
    base.OnAttached();
 
    this.AssociatedObject.Loaded += this.OnAssociatedObjectLoaded;
}

Lo que hicimos fue generar un evento que se va a ejecutar al cargarse el mismo. De esta manera vamos a poder averiguar cual es el contenedor que tiene para a ese mismo agregar el handler del mouse.

Para buscar elementos dentro de nuestra clase, vamos a utilizar VisualTreeHelper que nos permite buscar padres e hijos del elemento que extendemos.

private void OnAssociatedObjectLoaded(object sender, RoutedEventArgs e)
{
    UIElement parent = VisualTreeHelper.GetParent(this.AssociatedObject) as UIElement;
 
    parent.MouseMove += this.HandleMouseMove;
}

AssociatedObject nos permite saber en todo momento que elemento estamos extendiendo, por lo que solamente buscamos el contenedor para agregar el handler.

Lo único que nos queda es mover el elemento cuando el mouse se mueve dentro del contenedor.

private void HandleMouseMove(object sender, MouseEventArgs e)
{
    Point pointMouse = e.GetPosition((UIElement)sender);
 
    Canvas.SetLeft(this.AssociatedObject, pointMouse.X);
    Canvas.SetTop(this.AssociatedObject, pointMouse.Y);
}

Fácilmente logramos generar una clase que hace que un objeto siga el cursor del mouse, sin importar que elemento estamos extendiendo.

¿Cómo extender un elemento con un behavior?

Ya tenemos la clase, pero queremos probarla. Para ello vamos a agregar al XAML del proyecto un Canvas y un Rectangle dentro que es el que va a moverse.

<Canvas x:Name="canvasTest" Height="580" Width="810" Clip="M0,0L810,0 810,580 0,580z" HorizontalAlignment="Center" Margin="0,15,0,0" VerticalAlignment="Center" Background="Black">
    <Rectangle x:Name="recTest" Fill="#FFD61E1E" Stroke="Black" Height="31" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="85" Canvas.Left="266" Canvas.Top="254">            
    </Rectangle>
</Canvas>

B1

Luego abrimos Expression Blend y vamos a la pestaña Assets, donde vamos a ver que tenemos una opción Behaviors.

B2IMPORTANTE: Si no aparece el behavior, debemos compilar primero el proyecto.

Luego seleccionamos el behavior que acabamos de crear  y lo arrastramos hasta el Rectangle.

Tan simple como eso y el elemento ya tiene el comportamiento de seguir el cursor del mouse.

Pueden descargar el proyecto aquí.

¿Dónde hay ejemplos de Behaviors?

Si necesitan revisar algunos behaviors ya desarrollados para testear o para incluir en sus proyectos, pueden visitar la galería que se encuentra disponible en el sitio de Expression.

Pueden revisarla aquí.

Además, al instalar Expression Blend ya tienen algunos behaviors que vienen por defecto, los pueden encontrar en la pestaña Assets.

Vamos a mostrar de que manera podemos utilizar el nuevo control para abrir un cuadro de dialogo que nos permita selecciona donde guardar un archivo en la máquina del cliente.

La manera de utilizarlo es muy similar al control OpenFileDialog que ya estaba disponible en Silverlight 2.

Primero vamos a agregar en el XAML un control TextBox donde vamos a escribir algo que luego grabaremos en un archivo de texto.

<StackPanel>
 
    <TextBlock Text="Cargar un texto para grabar en un archivo TXT." />
    <TextBox x:Name="textSave" Height="250" 
             VerticalScrollBarVisibility="Visible"
             HorizontalScrollBarVisibility="Auto" 
             AcceptsReturn="True">
    </TextBox>
 
    <Button x:Name="botonSave" Width="100" Height="20"   
            Content="Grabar Archivo" 
            Click="botonSave_Click"   
            Canvas.Top="10" 
            Canvas.Left="10">            
    </Button>
    <TextBlock x:Name="errorSave" 
               Canvas.Top="40" 
               Canvas.Left="10">
    </TextBlock>
 
</StackPanel>

SFD0

Ahora vamos a codificar el evento del botón que grabará el archivo. Tenemos que crear un objeto SaveFileDialog que es el que nos permitirá abrir un cuadro de dialogo para grabar archivos.

private void botonSave_Click(object sender, RoutedEventArgs e)
{
    SaveFileDialog dialogSave = new SaveFileDialog();
 
    try
    {
        dialogSave.DefaultExt = ".txt";
        dialogSave.Filter = "Archivos de Texto|*.txt|All Files|*.*";
        dialogSave.FilterIndex = 2;
    }
    catch (Exception ex)
    {
        errorSave.Text = 
            "Error al configurar el control SaveFileDialog: " + 
            ex.Message;
    }
 
    if (dialogSave.ShowDialog() == true)
    {
        try
        {
            using (Stream stream = dialogSave.OpenFile())
            {
                byte[] fileByte = 
                    (new UTF8Encoding(true)).GetBytes(textSave.Text);
                stream.Write(fileByte, 0, fileByte.Length);
                stream.Close();
            }
        }
        catch (Exception ex)
        {
            errorSave.Text = "Error al grabar el archivo: " + ex.Message;
        }
    }
}

Vamos revisar un poco el código, para entender mejor de que manera lo utilizamos.

Para crear un objeto utilizamos el constructor, luego tenemos algunas propiedades que nos definen que tipo de archivo vamos a guardar.

  • DefaultExt. Es la extensión por defecto que agregará al nombre del archivo, si no se especifica alguna. 
  • Filter. Especifica los tipos de archivos que podrá elegir el usuario.
  • FilterIndex. El tipo de archivo que aparecerá por defecto al abrir el cuadro.

El método ShowDialog() es que abre el cuadro, vemos como queda al abrirlo.

SFD1

Este método devuelve true o false, según elegimos o no archivo para guardar.

El método OpenFile nos permite crear un Stream donde vamos a agregar los bytes que queremos guardar.

De esta manera, podemos guardar archivos en la máquina del cliente, permitiendo que este seleccione el nombre y ubicación del mismo.

Pueden descargar el proyecto aquí.

Algo nuevo que trae Silverlight 3 pero que muchos pasaron por alto, es la inclusión del control MediaPlayer, el cual fue desarrollado por la gente de Expression.

Este control es similar al que viene en Expression Encoder, incluyendo algunas de las funcionalidades de este, como ser, Playlist, Chapters, AutoLoad, AutoPlay, Progress Bar, Volume Bar, Full Screen y muchas más.

IMPORTANTE: Debemos tener instalado Expression Encoder 3 para poder utilizar este control.

Para agregarlo debemos ir desde Blend, a la sección Assets.

MP1

Al arrastrarlo vemos que nos genera un player, el cual podemos cambiar el tamaño o las propiedades que necesitemos.MP2

Ahora les muestro como desde XAML puedo definir el video que voy a querer visualizar. Como lo agrego al playlist, de manera sencilla puedo agregar varios videos y tenerlos a disposición en pocos minutos.

<ExpressionMediaPlayer:MediaPlayer>
    <ExpressionMediaPlayer:MediaPlayer.Playlist>
        <ExpressionMediaPlayer:Playlist>
            <ExpressionMediaPlayer:Playlist.Items>
                <ExpressionMediaPlayer:PlaylistItem 
                    MediaSource="test.wmv" 
                    Title="Test del Media Player Control" 
                    VideoHeight="480" 
                    VideoWidth="640"/>
            </ExpressionMediaPlayer:Playlist.Items>
        </ExpressionMediaPlayer:Playlist>
    </ExpressionMediaPlayer:MediaPlayer.Playlist>
</ExpressionMediaPlayer:MediaPlayer>

Y si corremos la aplicación, vemos una player de video sencillo que nos tomo pocos minutos implementar.MP3

Se anunció que la NBC va a transmitir en vivo los partidos del NFL Sunday Night Football vía Silverlight y IIS Smooth Streaming.

Esto sigue demostrando que esta tecnología se utiliza cada vez más a la hora de eventos on-line donde la calidad de imágen y performance son esenciales.

El player de Silverlight tendrá como particularidad de poder frenar la transmisión, ir hacia atrás y utilizar slow-motion para alguna jugada en particularidad, algo muy impresionante.

mainfeed-generic

Para más información pueden ir aquí.

Vikram Pendse ha creado un countdown para determinar cuando se lanzará Windows 7 al público en general.

Para incluirlo en el sitio que queramos, debemos integrar el siguiente código

<iframe src=”http://silverlight.services.live.com/invoke/75985/NewWin/iframe.html” scrolling=”no” frameborder=”0″ style=”width:158px; height:200px”></iframe>

Kris Meeusen nos muestra una aplicación que usa todo el potencial de la nueva API para crear y modificar bitmaps.

plasma

Lo interesante es que podemos descargar el código fuente para ver de que manera esta realizado este ejemplo.

Pueden visualizar y descargar la aplicación aquí.

More Posts Next page »