Guillermo Morales [blog]

Silverlight Parte 2 - Eventos desde XAML y JavaScript

2008-03-11T19:12:00Z

Este artículo es parte de una serie, cuyo artículo anterior está localizado aquí

Silverlight y JavaScript

Tenemos al momento los siguientes archivos:

Y al ejecutar la página web, vemos lo siguiente:

Respondiendo al click del mouse

Vamos a crear un elemento que pueda responder a eventos del mouse, para comenzar a darle más interacción a nuestros sitios Silverlight

La forma y el concepto son muy sencillos. Desde el XAML, se declaran los eventos a disparar en JavaScript, esto es, por ejemplo, a una etiqueta de XAML, le podemos declarar un atributo como MouseLeave y asociar este atributo a una función de JavaScript en el HTML. De esta manera lo que tenemos es:

Primero, vamos a cambiar el XAML existente por el siguiente:

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Background>
  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
   <GradientStop Color="#FFDCEF1B" Offset="0"/>
   <GradientStop Color="#FF801A1A" Offset="1"/>
  </LinearGradientBrush>
</Canvas.Background>

<Rectangle
x:Name="r1"
MouseEnter="r1Entrar"
MouseLeave="r1Salir"
MouseLeftButtonDown="r1Abajo"
MouseLeftButtonUp="r1Arriba"
Height="100" Width="100"
Canvas.Left="100" Canvas.Top="50"
Stroke="Black" StrokeThickness="10" Fill="Blue"/>

<TextBlock
x:Name="miTexto"
Canvas.Left="70"
Canvas.Top="180"
Text="Dame Click"
FontSize="30"/>

</Canvas>

Para obtener lo siguiente:

Aquí lo imporante que mencionar es que tanto el TextBlock como el Rectangle, tienen una propiedad x:Name por medio de la cual podemos identificar a cada elemento dentro del XAML

Insertando Código JavaScript

El siguiente paso, como ya se imaginarán, es obvio, es momento de insertar el código que responda a los eventos que se disparan desde el XAML, para esto, insertaremos en nuestra página web, el siguiente bloque de código JavaScript

function r1Entrar(sender, args) {
    sender.stroke = "red";
    sender.findName("miTexto").Text = "Rojo";
}

function r1Salir(sender, args) {
    sender.stroke = "black";
    sender.findName("miTexto").Text = "Negro";
}

function r1Abajo(sender, args) {
    sender.stroke = "yellow";
    sender.findName("miTexto").Text = "Diste Click";
}

function r1Arriba(sender, args) {
    sender.stroke = "Green";
    sender.findName("miTexto").Text = "Verde";
}

En este código podemos observar dos cosas:

Los eventos disparados desde el XAML, siempre reciben dos parámetros:

sender: Corresponde al objeto que inicia la acción
args: Corresponde a información relacionada al evento disparado
Mediante el método findName localizamos a elementos de manera específica dentro del XAML, en este caso, “miTexto”

Este código lo pueden insertar dentro del mismo bloque de código <script> donde se encuentra la obtención de la referencia a plugin de Silverlight que ya se tiene. Obteniendo ya una página cuyos elementos XAML disparan eventos en JavaScript

Conclusión

Listo, ya tienen elementos XAML de Silverlight que responden al mouse disparando funciones JavaScript dentro de sus tradicionales páginas Web.

Seguiremos posteando más artículos relacionados a esta tecnología, en las próximas entregas, incluiré ya alguna animación, un video y más eventos para atraparlos con el mouse.

Suerte!

Silverlight Parte 1

2008-03-10T22:38:00Z

Larga ausencia

Después de una larga ausencia, estoy de vuelta para platicarles de tecnología. Disculpen de antemano este laaaaaaargo letargo, pero estuvimos enfrascados en otras cosas que no nos dejaban meternos de lleno en esto de la comunidad.

Para todos, estaremos nuevamente haciendo nuestras reuniones mensuales, así como participando en eventos de lanzamiento de nuevos productos de Microsoft, por supuesto ya escucharán de esto, en un rato más, así que bueno, pues a lo que te truje:

Silverlight

La verdad, no quiero marearlos con el rollo sobre lo que me imagino ya todos conocen, ¿Qué es Silverlight?, pueden encontrar mucha documentación en la red, y un excelente lugar para empezar es este (http://silverlight.net/). Así que vamos sólo a decir, que es la forma más reciente de hacer aplicaciones WEB de alto impacto visual de Microsoft. Obviamente hay muchas cosas más, pero vamos a dejarlo ahí.

A donde vamos con este demo

El objetivo de este demo es encaminarlos rápidamente a cómo crear su primera aplicación con Silverlight, no tanto el qué se puede hacer, si no, que comprendan qué se necesita para echar a volar su primer demo, y para eso explico lo siguiente:

Los archivos de una aplicación Silverlight

Para empezar, les comento que todos lo que podemos hacer hoy en día con Silverlight 1.0, se puede crear mediante cualquier editor de texto, en nuestro caso, usaremos al famoso Notepad. Pensemos que tenemos una página llamada Default.html en donde queremos crear nuestra primera aplicación de Silverlight.

Entonces, los archivos que necesitamos crear son:

Para comenzar nuestro ejemplo, estos archivos deberán de tener el siguiente contenido:

Default.html

<html>
<head>
    <title>Primer Ejemplo Silverlight</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="crearSilverlight.js"></script>
</head>
<body>
    
    <div id="miHostdelPlugin">
    </div>
    <script type="text/javascript">
        // Obtener el DIV host del plug in.
        var hostdelplugin = document.getElementById("miHostdelPlugin");
        // Creación del plugin
        crearPluginSilverlight(); //Llamada a la función del archivo de abajo
    </script>
</body>
</html>

Como se dan cuenta, esta página muy sencilla, hace llamadas a un par de archivos JavaScript, el primero de ellos, el Silverlight.js no lo muestro porque es un archivo que pueden obtener con el SDK de Silverlight, y no se modifica, solo tienen que estar seguros de copiar este archivo a la misma carpeta donde tienen su demo. El otro es el archivo:

crearSilverlight.js

function crearPluginSilverlight()
{
    Silverlight.createObject(
        "mixaml.xaml",                  // El XAML a pintar.
        hostdelplugin,                  // La variable que apunta al DIV host.
        "miHostdelPlugin",              // El ID de la etiqueta DIV host.
        {                               //
            width:'300',                // Ancho del plug in en pixeles
            height:'300',               // Alto del plug in en pixeles
            inplaceInstallPrompt:false, // Indica si pregunta si se
                                        // instala el plug in si no es la
                                        // versión correcta
            background:'#D6D6D6',       // Color Background del plug in
            isWindowless:'false',       // Determina si el plug in se muestra en
                                        // modo sin ventana
            framerate:'24',             // Número de cuadros por segundo
            version:'1.0'               // Versión Silverlight a usar.
        },
        {
            onError:null,               // Manejador de función cuando hay error
            onLoad:null                 // Manejador de función carga del plug in
        });
}

Este archivo en pocas palabras, lo que hace es indicarle al navegador, por medio de una función de JavaScript, que hay que invocar al método createObject del objeto Silverlight para poder crear con ciertos parámetros, un plug in. Los parámetros de la función vienen descritos en los comentarios del código
El siguiente archivo es el XAML que contiene la parte visual, este es el archivo para nuestro primer ejemplo:

mixaml.xaml

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</Canvas>

Como nos podemos dar cuenta, este archivo contiene un Canvas en donde pintaremos el contenido de nuestra aplicación Silverlight mediante XAML. Por el momento está vacío.
Una imagen de lso archivos de nuestro sitio web al momento sería esta:

Si se echa a andar la página web, obtenemos la siguiente pantalla por el momento:

PERFECTO, el color del fondo del plug in es el indicado según el indicado en el archivo crearSilverlight.js, solo nos queda, crear el contenido visual por medio del archivo XAML.

Modificando el archivo XAML

Windows Presentation Foundation es uno de los pilares de. Net Framework 3.0, el más importante beneficio es la creación de creación de aplicaciones de alto impacto visual, esto, trasladado a Web es lo que dio origen a Silverlight, originalmente llamado WPF/e.

XAML es un lenguaje de marcas para crear contenido visualmente hablando, muy rico y de manera muy sencilla. Para este caso, el archivo mixaml.xml contiene el XAML de este contenido visual.

Todo el Silverlight, se pinta dentro de una etiqueta CANVAS, que es algo así como un lienzo en blanco sobre el cual, por medio de alineaciones de los elementos, los puedo pintar y posicionar. De esta manera, si yo escribo el siguiente XAML dentro del archivo mixaml.xaml

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Rectangle
        Canvas.Top="30"
        Canvas.Left="30"
        Fill="Blue"
        Height="100"
        Width="100" />

    <Rectangle
        Canvas.Top="80"
        Canvas.Left="80"
        Fill="Red"
        Height="100"
        Width="100" />

    <Ellipse
        Canvas.Top="130"
        Canvas.Left="130"
        Fill="Green"
        Height="100"
        Width="100" />
</Canvas>

Lo que nos pinta una pantalla como la siguiente:

Perfecto! Has creado tu primera aplicación Silverlight. En la siguiente entrega, estaremos viendo ya como poder responder a eventos del mouse y lanzar alguna animación.

Conclusión

El desarrollo con Silverlight está basado en una serie de archivos que contienen indicaciones para:

Creación del Plugin de Silverlight (archivo crearSilverlight.js)
La declaración de los elementos visuales a crear (mixaml.xaml)
La página web que hostea al plug in (default.html)
El código de validación de la existencia del plug in, este archivo es parte del SDK de Silverlight y generalmente no deberíamos de modificarlo (Silverlight.js)

Creo que con este pequeño demo, ya tienes una mejor idea de cómo comenzar con una aplicación silverligt. Hacia adelante, bastará con modificar el archivo XAML para poder cambiar el contenido visual, y si se desea código para responder a eventos, modificar el archivo html. Esto lo veremos en la siguiente entrega.

Suerte!

WPF – ¿StackPanel, Canvas, DockPanel, Grid? ¡¡¡Auxilio…!!!

2007-05-09T18:53:00Z

Aventuras en WPF

Hola a todos, pues yo aquí entrándole a escribirles del mundo de WPF, del cual, mi amigo Mike ya es un experto y como verán en sus blogs, ya les platica de WPF, de WF y seguramente ya estará planeando la entrega de algo de WCF. Yo también les platicaré de WPF, pero desde otro punto de vista (el mío jajaja) y espero les agrade a todos ustedes. He decidido platicarles de WPF, ya que WPF y XAML en sí, son un nuevo y muy vasto universo de cosas de las que creo que hay mucha tela de donde cortar, así que, con la venia de ustedes y del gran Mike, empecemos.

Lo primero que me encontré desde hace algún tiempo al empezar a ver algunos demos en MSDN, fue que existe una nueva serie de etiquetas XAML por medio de las cuales podemos organizar y crear una aplicación Windows, sin embargo, como que la diferencia entre estas etiquetas no quedaba verdaderamente clara a medida que utilizaba y veía más demos, algunas de ellas, inclusive, daban el mismo efecto sin importar si las agrego o las cambio en una aplicación Windows de WPF. Entre estas nuevas etiquetas tenemos a las siguientes:

· Grid

· StackPanel

· DockPanel

· Canvas

En mucha de la documentación de WPF y demos, se utilizan estos controles, pero en realidad no encontré muchos lugares en donde se explique fácilmente ¿qué es cada uno de ellos? ¿Cuándo utilizarlos? Así que como ya se imaginarán, este artículo trata exactamente de eso, de explicar a estos nuevos amigos de XAML.

El Grid

El primer elemento del cual les platicaré es el GRID, este es un control que define su contenido mediante columnas y renglones, es como si estuviéramos “dibujando” una hoja de Excel y metiendo contenido por medio de coordenadas dentro de cada una de las “celdas” que se forman, los contenidos los puedo insertar en cada celda por medio de coordenadas, esto quiere decir, entre otras cosas, que si meto dos elementos en la misma coordenada, puedo hacer que esos elementos se “encimen” para alcanzar efectos de “layering”.

Cada una de las celdas por default, se ajustan al contenido, así también, cada columna y renglón tienen propiedades Width y Height por medio de las cuales puedo especificar un alto y ancho en específico, o puedo utilizar el valor “*” para determinar que una celda o columna ocupe el espacio “restante” dentro de su contenedor.

Como ya todos sabemos, ahora con XAML, puedo crear la parte visual de mis aplicaciones por medio de etiquetas, les quiero mostrar lo que tendría que hacer si quisieran crear un GRID con código (Cuidado, la idea es ya NO hacerlo de esta manera) y posteriormente les muestro la comparación de la creación de ese mismo GRID con XAML.

Grid con código:

Para crear un GRID, como lo hice en este ejemplo, basta con que copien este código al constructor de su ventana:

Dim myGrid As New Grid()

myGrid.Height = 80

myGrid.Width = 250

myGrid.ShowGridLines = True

myGrid.HorizontalAlignment = Windows.HorizontalAlignment.Left

myGrid.VerticalAlignment = Windows.VerticalAlignment.Top

Dim colDef1, colDef2 As New ColumnDefinition

myGrid.ColumnDefinitions.Add(colDef1)

myGrid.ColumnDefinitions.Add(colDef2)

Dim rowDef1, rowDef2, rowDef3 As New RowDefinition

myGrid.RowDefinitions.Add(rowDef1)

myGrid.RowDefinitions.Add(rowDef2)

myGrid.RowDefinitions.Add(rowDef3)

Dim txt1 As New TextBlock

txt1.Text = "Artículos en DevelopersDotNet"

txt1.FontSize = 14

txt1.FontWeight = FontWeights.Bold

Grid.SetColumnSpan(txt1, 3)

Grid.SetRow(txt1, 0)

myGrid.Children.Add(txt1)

Dim txt2 As New TextBlock

txt2.Text = "Enero 07"

txt2.FontSize = 12

txt2.FontWeight = FontWeights.Bold

Grid.SetRow(txt2, 1)

Grid.SetColumn(txt2, 0)

myGrid.Children.Add(txt2)

Dim txt3 As New TextBlock

txt3.Text = "Febrero 07"

txt3.FontSize = 12

txt3.FontWeight = FontWeights.Bold

Grid.SetRow(txt3, 1)

Grid.SetColumn(txt3, 1)

myGrid.Children.Add(txt3)

Dim txt4 As New TextBlock

txt4.Text = "7"

Grid.SetRow(txt4, 2)

Grid.SetColumn(txt4, 0)

myGrid.Children.Add(txt4)

Dim txt5 As New Controls.TextBlock

txt5.Text = "15"

Grid.SetRow(txt5, 2)

Grid.SetColumn(txt5, 1)

myGrid.Children.Add(txt5)

Me.Content = myGrid

Si ustedes copian y pegan este código en el constructor de su ventana, obtendrán el siguiente resultado:

¡Qué horror!, Como nos podemos dar cuenta, el código de creación del GRID no es complicado, pero si es talachudo.

Grid con XAML:

La noticia es que con XAML, podemos obtener el mismo resultado con muchas menos líneas de código. En vez de construir el GRID de manera dinámica con código VB .Net, lo haremos con XAML mediante este código:

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock FontSize="14" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0">Artículos en DevelopersDotNet</TextBlock>

<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0">Enero 07</TextBlock>

<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1">Febrero 07</TextBlock>

</Grid>

¿No les medio recuerda a algo llamado HTML?, jajaja. Como nos podemos dar cuenta, es mucho más sencillo utilizar WPF para crear la parte de presentación de nuestras aplicaciones. ¡Y ES EL MISMO RESULTADO!, Así también, podemos ver como el GRID, es un elemento que sirve para poder posicionar contenido mediante celdas y columnas escrito en XAML de una manera muy intuitiva.

El StackPanel

Otro de los elementos que nos permiten insertar contenido mediante XAML en nuestras aplicaciones WPF, es el StackPanel, en este caso, podemos pensar en el StackPanel como un control, por medio del cual, vamos a meter contenido pero que se va a “apilar” poco a poco dentro del mismo StackPanel, por eso el nombre de “stack” (pila o apilar). El StackPanel permite apilar el contenido de manera Vertical u Horizontal, y el contenido no hay mucho para donde hacerlo, o sea, que como vamos definiendo cada uno de los elementos del contenido, se van apilando dentro del StackPanel, a diferencia del Grid, no es necesario indicar posición por columna o renglón, ya que aquí, todo como se define, entra al StackPanel en órden.

El StackPanel define a una serie de elementos hijos en una SOLA línea que puede ser alineada vertical u horizontalmente.

Si copias el siguiente ejemplo de XAML dentro de tu ventana, verás la forma de funcionar del StackPanel:

</Border>

<TextBlock Foreground="Black" FontSize="12">Developers</TextBlock>

</Border>

<Button Click="CambiarOrientacion" Width="80" Name="B1">Dame Click</Button>

</StackPanel>

En este caso, la ventana producida con este XAML es:

Como nos podemos dar cuenta en el XAML, el StackPanel está formado, en este ejemplo, por una serie de elementos: 2 etiquetas Border que definen a los cuadros donde están contenidos los textos “Hola”, la etiqueta Image de DevelopersDotNet (cuya imagen la pueden sacar de este mismo sitio) y “Developers”, además de un inofensivo botón que dice “Dame Click” que por el momento no hace nada. J

Esta es la idea del StackPanel, es un elemento que a medida que se van definiendo elementos hijos, automáticamente los va apilando uno tras otro en una secuencia que puede ser vertical u horizontal.

Vamos a ver el efecto precisamente de la propiedad Orientation de nuestro StackPanel cambiándola, para eso nos sirve nuestro botón. Como nos podemos dar cuenta, en la definición del Botón, tenemos un atributo llamado Click, en el cual defino que llame a un método de nombre: “CambiarOrientacion”

Vámonos a la sección de código de nuestra ventana y agreguemos el siguiente código:

Private Sub CambiarOrientacion(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs)

If SP1.Orientation = Orientation.Horizontal Then

SP1.Orientation = Orientation.Vertical

Else

SP1.Orientation = Orientation.Horizontal

End If

End Sub

Como podemos observar en el código, lo que estamos haciendo es cambiar la propiedad orientación del SP1 (StackPanel) que estamos utilizando, al momento de echar a andar la aplicación y darle click al botón, veremos que la ventana cambia a esta forma:

Y viceversa…!!!! Si dan click al botón nuevamente, regresa a la forma anterior.

Maravilloso… Como se dan cuenta, automáticamente el StackPanel organiza ahora de izquierda a derecha cada uno de los elementos que están definidos como sus elementos hijos.

El DockPanel

El DockPanel, como los dos controles de los que les he platicado, sirve para organizar el contenido dentro de una ventana WPF, este control en particular, tiene la característica de que el contenido se organiza por medio de elementos hijos, los cuales se “pegan” (dock) a los bordes de la ventana. Basta con indicar el borde de la ventana al cual se “pegarán” cada uno de los contenidos y listo, tenemos la distribución de nuestra forma WPF lista. Es algo así como crear FRAMES de HTML.

Así como el GRID, les muestro el código necesario para crear un DockPanel y la diferencia de hacerlo con XAML que es mucho más sencillo:

DockPanel con Código (Otra vez ¡qué horror!):

Dim myDockPanel As New DockPanel()

myDockPanel.LastChildFill = True

Dim myBorder1 As New Border()

myBorder1.Background = Brushes.Silver

myBorder1.BorderBrush = Brushes.Black

myBorder1.BorderThickness = New Thickness(1)

DockPanel.SetDock(myBorder1, Dock.Top)

Dim myTextBlock1 As New TextBlock()

myTextBlock1.Foreground = Brushes.Black

myTextBlock1.Text = "Encabezado"

myBorder1.Child = myTextBlock1

Dim myBorder2 As New Border()

myBorder2.Background = Brushes.Black

myBorder2.BorderBrush = Brushes.Black

myBorder2.BorderThickness = New Thickness(1)

DockPanel.SetDock(myBorder2, Dock.Bottom)

Dim myTextBlock2 As New TextBlock()

myTextBlock2.Foreground = Brushes.White

myTextBlock2.Text = "Pié de Página"

myBorder2.Child = myTextBlock2

Dim myBorder3 As New Border()

myBorder3.Background = Brushes.Red

myBorder3.BorderBrush = Brushes.Black

myBorder3.BorderThickness = New Thickness(1)

DockPanel.SetDock(myBorder3, Dock.Left)

Dim myTextBlock3 As New TextBlock()

myTextBlock3.Foreground = Brushes.Black

myTextBlock3.Text = "Menú"

myBorder3.Child = myTextBlock3

Dim myBorder4 As New Border()

myBorder4.Background = Brushes.White

myBorder4.BorderBrush = Brushes.Black

myBorder4.BorderThickness = New Thickness(1)

DockPanel.SetDock(myBorder4, Dock.Left)

Dim mImagen As New Image

mImagen.Width = 75

mImagen.Height = 75

Dim bi As New BitmapImage

bi.BeginInit()

bi.UriSource = New Uri("C:\Users\guillermom\Pictures\GoW.bmp")

bi.EndInit()

mImagen.Source = bi

myBorder4.Child = mImagen

Dim myBorder5 As New Border()

myBorder5.Background = Brushes.LightBlue

myBorder5.BorderBrush = Brushes.Black

myBorder5.BorderThickness = New Thickness(1)

Dim myTextBlock5 As New TextBlock()

myTextBlock5.Foreground = Brushes.Black

myTextBlock5.Text = "Contenido que se ajusta al espacio sobrante"

myBorder5.Child = myTextBlock5

myDockPanel.Children.Add(myBorder1)

myDockPanel.Children.Add(myBorder2)

myDockPanel.Children.Add(myBorder3)

myDockPanel.Children.Add(myBorder4)

myDockPanel.Children.Add(myBorder5)

Me.Content = myDockPanel

TOODO esto para generar la siguiente ventana WPF:

No se asusten mis estimados, el logo es del juego Gears of War de XBOX 360, mi preferido al momento (mi gamertag es morgu ormex por si quieren entrarle a las guerras en línea algún día)

DockPanel con XAML (ahhh, mucho mejor J)

Mejor usemos XAML…!!!. Para producir exactamente la misma interfase gráfica de nuestra ventana WPF, necesitamos:

<TextBlock Foreground="Black">Encabezado</TextBlock>

</Border>

<TextBlock Foreground="White">Pié de Página</TextBlock>

</Border>

</Border>

</Border>

<TextBlock Foreground="Black">Contenido que se ajusta al espacio sobrante</TextBlock>

</Border>

</DockPanel>

Y YA..!!! (En serio, pruébenlo). Vean como aquí a diferencia del Grid que es por celdas y coordenadas, y del StackPanel, cuya distribución es automática y en una sola línea vertical y horizontal, el DockPanel nos deja acomodar varios elementos hijos de la manera en que nosotros vayamos necesitando, no es necesario ponerlos en orden como en el StackPanel, si no, sólo especificar la propiedad: DockPanel.Dock (cuyos valores son: LEFT, TOP, RIGHT y BOTTOM) de cada uno de dichos elementos, en este caso, agregamos varios elementos Border y un Image para conseguir el mismo resultado que con código, pero con menos líneas. También, cabe resaltar que la propiedad LastChildFill del DockPanel puesta en “true”, hace que automáticamente el último elemento agregado, en este caso, el último Border al cual no le puse el DockPanel.Dock se ajuste al tamaño que “sobra” llenando el espacio cobrante de la ventana.

El Canvas

El último de los controles de los que voy a platicar en este artículo es el Canvas, este amigo tiene la característica de que podemos posicionar cualquier elemento dentro de él por medio de las clásicas propiedades Top y Left de cada elemento y que en este caso, estas propiedades se denominan Canvas.Left y Canvas.Top. Así pues, un ejemplo sencillo del uso del Canvas es el siguiente:

<Canvas.Background>

</LinearGradientBrush>

</Canvas.Background>

<TextBlock FontSize="12" Canvas.Top="100" Canvas.Left="10">Posiciones Absolutas</TextBlock>

<TextBlock FontSize="16" Canvas.Top="180" Canvas.Left="100">Pintando en el Canvas</TextBlock>

</Canvas>

Con el cual, obtenemos la siguiente pantalla:

Condenado OSO, no está re-lindo?, es KNUT, el oso alemán, pero bueno, el chiste aquí es observar como cada elemento puesto dentro del Canvas, se posiciona dentro del mismo por medio de las propiedades Canvas.Left y Canvas.Top como habíamos mencionado. Así también, aproveché para mostrarles un poco de la forma en que se pueden crear fondos con degradados para sus ventanas y muchos elementos más, mediante la etiqueta Canvas.Background, puedo permitirme el modificar las propiedades de muchos elementos. Así como hay un Canvas.Background, hay también un Grid.Background, un DockPanel.Background y un StackPanel.Background que son etiquetas dentro de las cuales puedo definir muchas propiedades de estilo para cada control

Conclusiones

Windows Presentation Foundation, a través de XAML, ofrece muchísimas ventajas a los desarrolladores para mejorar la experiencia de usuario mediante interfases gráficas mucho más ricas, la noticia interesante es que desarrollar estar interfases gráficas es mucho más sencillo y con muchas menos líneas de código que si lo hiciéramos mediante VB.Net ó C#.

Como parte de WPF, existen muchos controles que nos dejan insertar y arreglar las posiciones de los elementos de la interfase gráfica, en este artículo platicamos de algunos de estos elementos, y de sus principales características. Ya será cosa de nosotros, definir, mediante nuestras necesidades, cuando utilizar cada uno de ellos.

Mucha Suerte…!!!!

MS AJAX 1.0 y el Accordion

2007-04-28T00:48:00Z

MS AJAX y el Accordion

Hola a todos, pues seguimos con la serie de controles del AJAX Control Toolkit de CodePlex, esta vez, platicaré del control Accordion del Toolkit, este es un control bien padre que nos deja crear una serie de paneles autocolapsables con el objetivo nuevamente de mejorar la apariencia de nuestras páginas web y en este caso, optimizar el espacio.

El control Accordion

El objetivo de este control, es el de, por medio de la definición de una serie de paneles, mostrar y ocultar la información de cada uno de estos paneles. El uso y definición del control es bastante sencilla, lo que hay que hacer, es definir cada uno de los paneles que estarán contenidos dentro del control Accordion y definir para cada panel, un encabezado (que tendrá la función de recibir el clic para mostrar/ocultar cada panel) y el contenido de cada panel. El ejemplo que estaremos construyendo quedará de la siguiente manera:

A continuación les platico de las propiedades más importantes del control Accordion:

El Ejemplo

Pasemos directamente al ejemplo, en este caso, tenemos una página ASP .Net sencilla con tres párrafos a los cuales vamos a transformar en paneles del control Accordion. Les muestro directamente la página y el HTML que la forma:

Como se podrán dar cuenta, la página esta formada únicamente por tres párrafos, los cuales, cada uno tiene un encabezado y la información de cada uno de los tres párrafos, en este ejemplo, los tengo organizados por medio de una serie de etiquetas <div>. Los pasos para trabajar con el Accordion son los siguientes:

1. Insertamos el control Accordion de manera que quede así:

2. Cada uno de los bloques que forman al Accordion se definen mediante otro control llamado el AccordionPane, cada AccordionPane tiene a su vez, dos etiquetas que definen su contenido, el “header” y el “content”, de tal manera que para este ejemplo, necesitaremos tres AccordionPane’s dentro del Accordion, de manera que quedará así:

3. El siguiente y último paso es acomodar cada uno de los párrafos que tenemos dentro de nuestra página web en las secciones que corresponde, en este caso, cada “Header” y cada “Content”, de manera que quede así:

4. Para terminar, si lo desean, pueden aplicar una hoja de estilo, entre las propiedades del Accordion, se encuentra la propiedad “HeaderCssClass” que define el estilo para cada encabezado de cada “AccordionPane” y la propiedad “ContentCssClass” que define el estilo para cada sección de contenido de los AccordionPane, en este caso, yo tengo una hoja de estilo de la siguiente forma:

Por lo que basta con utilizar las propiedades del Accordion:

Conclusión

Una vez más hemos visto como por medio del AJAX Control Toolkit de CodePlex, podemos implementar de manera muy sencilla una serie de efectos y animaciones para nuestros sitios web de manera que tengan mucho más impacto visual.

Como siempre, mucha suerte, nos vemos pronto…!!!

MS AJAX 1.0 y el AutoCompleteExtender

2007-04-03T06:47:00Z

Hola a todos, pues nuevamente escribo sobre AJAX, la maravilla para mejorar nuestras interfases gráficas en Web y ASP .Net 2.0, en este caso, les mostraré como utilizar al AutoCompleteExtender del AJAX Control Toolkit de CodePlex, lo primero por hacer, es comentarles cómo es que funciona el AutoCompleteExtender, sus principales características y luego, al ejemplo.

El AutoCompleteExtender

Este es un control del AJAX Control Toolkit de CodePlex. La forma de trabajar de este control es muy sencilla, realiza una llamada asíncrona al servidor para invocar al método de un WebService que regresa un arreglo de palabras que cumplan con lo escrito en el control de la página Web, típicamente una caja de Texto

De esta manera, lo que tenemos que crear simplemente se reduce a:

1. La página Web que invocará al servicio proveedor de palabras sugeridas

2. El servicio Web proveedor de esas palabras sugeridas

3. Incorporar al AutocompleteExtender en nuestra página Web para que se encargue de las llamadas asíncronas al servicio web y de pegar el contenido en el control deseado.

El Ejemplo

1. Creación de la página Web

Pues sin más, crearemos una página web en Visual Studio 2005. No olviden que para que MS AJAX funcione, tienen que elegir de entrada, como en este ejemplo, un proyecto de tipo “AJAX Enabled Web Site”. A esta página, para fines del ejemplo, lo único que pondremos por el momento es una caja de texto, de manera que su HTML quede de la siguiente manera:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<br />

</div>

</form>

Recuerden que el ScriptManager automáticamente lo tenemos en la página por ser un sitio MS AJAX Enabled, de lo contario, hay que agregarlo a su página web.

2. El servicio Web

Aquí hay varias cosas que tener en cuenta:

a. El servicio web para ser invocado por este control, tiene que ser parte de la misma solución

b. A la clase del servicio web, hay que agregarle un atributo que la habilita para poder ser invocada mediante AJAX, el atributo es: <ScriptService()>

c. El método que estemos utilizando como proveedor del arreglo de palabras sugeridas, tiene que tener la siguiente firma:

ByVal prefixText As String, ByVal count As Integer) As String()

En este ejemplo, estaremos llenando una caja de texto con los estados de nuestro país, por lo que, agregamos un Servicio Web a nuestro proyecto, le llamo, ListaDeEstados.asmx y el código de la clase queda de la siguiente manera:

Imports System.Web

Imports System.Web.Services

Imports System.Web.Services.Protocols

Imports System.Collections.Generic

Imports System.Web.Script.Services

<WebService(Namespace:="http://tempuri.org/")> _

<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _

<ScriptService()> _

<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _

Public Class ListaDeEstados

Inherits System.Web.Services.WebService

<WebMethod()> _

Public Function ObtenerEstados(ByVal prefixText As String, ByVal count As Integer) As String()

Dim colEstados As New List(Of String)

colEstados.Add("Aguascalientes")

colEstados.Add("Baja California")

colEstados.Add("Baja California Sur")

colEstados.Add("Campeche")

colEstados.Add("Chiapas")

colEstados.Add("Chihuahua")

colEstados.Add("Coahuila")

colEstados.Add("Colima")

colEstados.Add("Distrito Federal")

colEstados.Add("Durango")

colEstados.Add("Estado de México")

colEstados.Add("Guanajuato")

colEstados.Add("Guerrero")

colEstados.Add("Hidalgo")

colEstados.Add("Jalisco")

colEstados.Add("Michoacán")

colEstados.Add("Morelos")

colEstados.Add("Nayarit")

colEstados.Add("Nuevo León")

colEstados.Add("Oaxaca")

colEstados.Add("Puebla")

colEstados.Add("Querétaro")

colEstados.Add("Quintana Roo")

colEstados.Add("San Luis Potosí")

colEstados.Add("Sinaloa")

colEstados.Add("Sonora")

colEstados.Add("Tabasco")

colEstados.Add("Tamaulipas")

colEstados.Add("Tlaxcala")

colEstados.Add("Veracruz")

colEstados.Add("Yucatán")

colEstados.Add("Zacatecas")

Dim colResultado As New List(Of String)

For contador As Integer = 0 To colEstados.Count - 1

If UCase(colEstados(contador)).StartsWith(UCase(prefixText)) Then

colResultado.Add(colEstados(contador).ToString)

End If

Return colResultado.ToArray

End Function

End Class

En este ejemplo, podemos ver que la firma del método se cumple, el primer parámetro, es para obtener el prefijo que el usuario está tecleando y que con base en esta palabra, obtendremos la lista de sugerencias, el segundo parámetro, es para indicar la cantidad de palabras a regresar, en este ejemplo, no lo estamos utilizando, sin embargo, es un parámetro requerido por lo que tuvimos que agregarlo a la firma del método. Puse en negritas y en letra mucho más grande las líneas a las que les deben de poner atención al crear el Servicio Web, en este caso, el atributo de la clase y la firma del método.

3. Incorporando el AutoCompleteExtender

El último paso para que nuestro ejemplo funcione, es agregar a nuestra página web, el control AutoCompleteExtender, del cual, muestro en la siguiente tabla sus propiedades más importantes:

De tal manera que el HTML de nuestro control queda así:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<br />

<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"

TargetControlID="TextBox1" ServicePath="ListaDeEstados.asmx"

ServiceMethod="ObtenerEstados" MinimumPrefixLength="1" />

</div>

</form>

Al momento de echar a andar su ejemplo y escribir la primera de la letra de alguno de los estados de nuestro país, podremos ver como se despliega la lista de sugerencias, por ejemplo, con la letra "M"

Conclusiones

Una vez más, podemos ver como con el MS AJAX 1.0 creamos funcionalidad de manera muy sencilla para incorporar mejoras dramáticas a nuestros sitios web. Estaré escribiendo sobre más controles del AJAX Control Toolkit de CodePlex.

Suerte…!!!

BackgroundWorker - Llamadas asíncronas en Windows Forms

2007-04-02T18:44:00Z

Hola a todos, alguien por ahí me pidió el escribir sobre este nuevo amigo que tenemos en Visual Studio 2005, el BackgroundWorker, así que, aquí está:

Como todos sabemos, en VB .Net se introdujo el concepto de hilos de ejecución, con esto, podemos crear Threads sobre los cuales se ejecuten tareas en paralelo. Con Visual Studio .Net 2005 tenemos ahora un nuevo control, llamado el BackgroundWorker que tiene como objetivo el realizar llamadas asíncronas con un modelo mucho mejor diseñado para el fin que hemos mencionado, realizar llamadas asíncronas.

El objeto BackgroundWorker

Como ya se imaginan, este amigo es el que tiene las funcionalidad de hacer las llamadas asíncronas desde una aplicación WinForm. En la siguiente imagen, trato de describir las principales características de este objeto:

El Ejemplo

1. Creo una pantalla como la anterior, en donde, el DataGridView de la parte superior obtendrá datos de una base de datos y se simulará que el proceso tarda en regresar el resultado.

2. Como ya se imaginarán, el botón disparará el método de recuperación de datos hacia el Grid, de entrada la imagen y etiqueta que indican "Procesando Petición" se encuentran NO visibles y la barra de progreso en la parte inferior está vacía.

3. El código es como sigue:

a. El método que invoca la llamada asíncrona

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

Me.BackgroundWorker1.RunWorkerAsync()

Me.PictureBox1.Visible = True

Me.Label1.Visible = True

End Sub

En este caso, es el método RunWorkerAsync() del BackgroundWorker

b. El método asíncrono invocado

Private Sub BackgroundWorker1_DoWork(ByVal sender As Object, _

ByVal e As System.ComponentModel.DoWorkEventArgs) Handles BackgroundWorker1.DoWork

Dim strCn As String = "Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Instructores.mdf;Integrated Security=True;User Instance=True"

Dim cnSQL As New SqlClient.SqlConnection(strCn)

cnSQL.Open()

Me.BackgroundWorker1.ReportProgress(50)

System.Threading.Thread.Sleep(2000) ‘ Para simular tiempo de espera

Dim adp As New SqlClient.SqlDataAdapter("Select * From Instructores", cnSQL)

Dim dsTemp As New DataSet

adp.Fill(dsTemp, "Instructores")

Me.BackgroundWorker1.ReportProgress(100)

e.Result = dsTemp

End Sub

En este método, nos conectamos a una base de datos y obtengo un dataset. Es de suma importancia hacer la siguientes observaciones:

i. La invocación del método ReportProgress sirve para indicarle al BackGroundProgress que ha habido un avance en el progreso de la ejecución. En este caso, yo preferí mandarlo directamente (50 y 100). Ustedes pueden hacer un loop en donde este ReportProgress se vaya invocando varias veces y vayan mandando el valor de manera que se autoincremente en el ciclo de manera automática.

ii. La última línea de este método, e.Result = dsTemp sirve para indicar si este método tiene un resultado, TENGO que regresarlo por medio de e.Result, en este caso, es el DataSet que se pegará al DataView.

c. El evento ProgressChanged

Private Sub BackgroundWorker1_ProgressChanged(ByVal sender As Object, _

ByVal e As System.ComponentModel.ProgressChangedEventArgs) Handles BackgroundWorker1.ProgressChanged

Me.ProgressBar1.Value = e.ProgressPercentage

Que en este caso, sirve para indicarle a la barra de progreso el valor reportado por el método ReportProgress. Aquí se recibe el par de cambios al avance, el 50 y 100 que se los pego a la barra de progreso.

d. Para finalizar, el evento RunWorkerCompleted

Private Sub BackgroundWorker1_RunWorkerCompleted(ByVal sender As _

Object, ByVal e As System.ComponentModel.RunWorkerCompletedEventArgs) Handles BackgroundWorker1.RunWorkerCompleted

Me.DataGridView1.DataSource = CType(e.Result, DataSet)

Me.DataGridView1.DataMember = "Instructores"

MsgBox("Metodo Terminado")

Me.PictureBox1.Visible = False

Me.Label1.Visible = False

End Sub

El evento RunWorkerCompleted, se dispara automáticamente cuando el evento DoWork termina, este evento sirve para cachar el resultado enviado en el e.Result del evento DoWork, aquí es evidente que lo recibimos en e.Result y lo convertimos a un dataset que pueda ser leído por el DataViewGrid.

Si prueban el ejemplo, se darán cuenta que mientras el método de obtención de datos está en ejecución, ustedes pueden seguir utilizando la aplicación sin que esta se bloquee por la llamada a la recuperación de datos.

Conclusión

En Visual Studio 2005 cuento con un nuevo objeto, el BackgroundWorker que sirve para realizar llamadas asíncronas siguiendo un patrón de diseño fácil de entender y utilizar. Ahora es más fácil poder crear aplicaciones de escritorio con menos tiempo de bloqueo hacia mis usuarios.

AJAX 101

2007-02-13T16:56:00Z

Hola a todos, pues nuevamente comenzamos a escribir en este portal, después de haber tenido un problema técnico que nos obligó a salir del aire por un rato. Estaremos publicando más artículos, con mucha mayor energía y sobre todo, buscando contenidos novedosos tratando de acercar la tecnología a todos ustedes.

Como siempre, el espíritu de este sitio, es el de compartir con ustedes nuestras experiencias en el desarrollo de aplicaciones, así como nuevas tecnologías, tendencias, etc.

Sin más, les dejo esta nota dirigida a un WebCast sobre AJAX que hice la semana pasada para Microsoft. Espero les agrade. De ahí pueden descargar la presentación que utilicé

Web Cast

Los ejemplos y código de este WebCast, lo pongo a continuación como parte de este post

Recuerden, AJAX lo descargan de AJAX y el Toolkit de Toolkit