Creación de UI con Silverlight para nuestro TweetRobot (ListBox – ItemTemplate).

Ahora bien,con silverlight podemos orientar a la Web una aplicación como estas, debido a que goza de mucha fácilidad para la intercomunicación con servicios WCF por ejemplo. Sin decir  que con un simple WebForm de ASP.NET o una aplicación de escritorio  de WinForms no lo hubiésemos podido haber echo, pero pues Silverlight ofrecerá más ventajas al hacer este tipo de desarrollo, dentro de ellas el IsolatedStorage y manejo de Xml y todo en el browser o en su defecto corriendo fuera de el.

Veamos cómo podríamos crear la UI de nuestra aplicación.

De forma sencilla así podríamos Manejar el Layout de nuestro Robot.


    <UserControl x:Class="ReadDotNet.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" HorizontalAlignment="Left" 
        d:DesignHeight="400" d:DesignWidth="400" VerticalAlignment="Top"
        xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

        <Grid x:Name="LayoutRoot" Background="White" Width="400" Height="400">
            <Grid.ColumnDefinitions>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="46" />
                <RowDefinition Height="40" />
                <RowDefinition Height="233*" />
                <RowDefinition Height="27*" />
                <RowDefinition Height="54*" />
            </Grid.RowDefinitions>
            <TextBlock Text="TweetSilverlightRobot" FontSize="25" FontFamily="Comic Sans MS" Foreground="DarkBlue" 
                       HorizontalAlignment="Center" Margin="0,0,12,0" Width="269"></TextBlock>
            <StackPanel Orientation="Horizontal" Background="#EBEBEB" Grid.Row="1">
                <TextBlock Height="23" Text="Load Url" FontSize="15" FontFamily="Comic Sans MS"  HorizontalAlignment="Left" Margin="4,8,0,0" Name="label1" VerticalAlignment="Top" Width="63" TextWrapping="Wrap" />
                <TextBox  Height="30" Name="TxtRssUrl" Width="273" Margin="5,0,5,0" Text="" />
                <Button Content="Add" Height="21" Name="AddBtnRssUrl" Width="47" Click="button1_Click_1" />
            </StackPanel>
            <ListBox Grid.Row="2" Name="ListUrls" SelectionMode="Multiple">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding UrlText}"
                                      FontFamily="Comic Sans MS" FontSize="15" Margin="5" 
                                      Foreground="Red" />
                        </StackPanel>
                    </DataTemplate>

                </ListBox.ItemTemplate>
            </ListBox>
            <Button Content="Tweet" Grid.Row="4" Height="23" HorizontalAlignment="Left" Margin="250,7,0,0" Name="BtTweet" VerticalAlignment="Top" Width="75" Click="button2_Click" />
            <TextBox Grid.Row="4" Height="23" HorizontalAlignment="Left" Margin="526,1,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" />
            <TextBox Grid.Row="3" Height="23" MaxLength="50" HorizontalAlignment="Left" Margin="121,3,0,0" Name="TxtHashTags" VerticalAlignment="Top" Width="204" />
            <StackPanel Name="StpHashTags" Margin="0,-4,0,4">
            
            </StackPanel>
            <TextBox Height="23" HorizontalAlignment="Right" Margin="0,3,235,0"  Name="TxtMinutes" VerticalAlignment="Top" Width="44" Grid.Row="4" TextAlignment="Right" MaxLength="4" />
            <TextBlock Grid.Row="4" Height="23" HorizontalAlignment="Left" Margin="4,7,0,0" Name="textBlock1" Text="Minutes Tweet Loop" VerticalAlignment="Top" />
            <TextBlock Height="23" HorizontalAlignment="Left" Margin="4,4,0,0" Name="textBlock2" Text="HashTags" VerticalAlignment="Top" Grid.Row="3" />
        </Grid>
    </UserControl>

Ahora así va a lucir la interfaz de usuario.

Es importante notar que se trazó un comportamiento a travéz de la definición de nuestra interfaz de usuario, la cual vamos a desarrollar a continuación.

IsolatedStorage en Silverlight (Manejo de archivos XML)

El isolated storage consiste en la capacidad que tiene una aplicación Silverlight para almacenar localmente datos y así evitar comunicación tipo HTTP en la Web, en tanto como sea posible.
En este caso deseamos almacenar Url’s  en un archivo XML, con la ventaja que cada vez que carguemos la aplicación no vamos a perder las Url´s que podríamos haber creado.
Para leer, crear y actualizar un archivo existente en este ambito de almacenamiento, veamos cómo podríamos implementar dicha funcionalidad?.
         ///
<summary> /// Leemos el archivo desde el Almacenamiento aislado del cual podemos
 /// hacer uso con silverlight
 /// </summary>
        private void ReadFileFromIsolatedStorage()
        {
            using (var fileStorage = IsolatedStorageFile.GetUserStoreForApplication())
            {
                //Verificamos si existe el directorio en el cual vamos a guardar el archivo XML.
                if (!fileStorage.DirectoryExists(XMLRSS))
                    fileStorage.CreateDirectory(XMLRSS);

                //Abrimos o creamos el archivo.
                using (var fileStream = fileStorage.OpenFile(PATH_XMLRSS, System.IO.FileMode.OpenOrCreate))
                {
                    XDocument doc = null;

                    //Si el archivo no contine datos, precargamos un demo y lo guardamos
                    if (fileStream.Length == 0)
                    {
                        doc = new XDocument(
                           new XElement("Root",
                               new XElement("URL", "http://localhost/rss")
                           )
                       );
                        doc.Save(fileStream);
                    }
                    else
                    {
                        //Si ya el archivo contiene datos, Cargamos el archivo XML.
                        doc = XDocument.Load(fileStream);
                    }
                    //Enlazamos el ListBox a los Datos.
                    BindListBoxItems(doc);
                }
            }
        }

Para poder mantener actualizado el archivo de url´s podríamos implementar la siguiente funcionalidad.

        ///
<summary> /// Método para mantener actualizada la fuente de datos, almacenados en
 /// el IsolatedStorage dedicado en este caso a la aplicación Silverlight.
 /// </summary>
        private void UpdateRssXmlDataSource()
        {
            //Obtenemos el ámbito de almacenamiento local
            using (var fileStorage = IsolatedStorageFile.GetUserStoreForApplication())
            {
                //Verificamos la existencia del directorio que fue creado en dado momento
                //para el almacenamiento.
                if (!fileStorage.DirectoryExists(XMLRSS))
                    fileStorage.CreateDirectory(XMLRSS);

                XDocument xDoc = new XDocument();
                //Cargamos el archivo en memoria
                using (var fileStream = fileStorage.OpenFile(PATH_XMLRSS, System.IO.FileMode.OpenOrCreate))
                {
                    xDoc = XDocument.Load(fileStream);
                }
                //Elimino el archivo, evitando complicaciones al momento de hacer el override del archivo.
                fileStorage.DeleteFile(PATH_XMLRSS);

                //Creamos la copia actualizada del XML en el almacenamiento aislado.
                using (var fileStream = fileStorage.OpenFile(PATH_XMLRSS, System.IO.FileMode.OpenOrCreate))
                {
                    xDoc.Element("Root").Add(new XElement("URL", TxtRssUrl.Text));
                    xDoc.Save(fileStream);
                }
                //Enlazamos a datos el ListBox
                BindListBoxItems(xDoc);
            }

            //Limpiamos el campo para agregar más URL's
            TxtRssUrl.Text = string.Empty;
        }

Anuncios

Páginas: 1 2 3 4 5

6 comentarios en “Creando una aplicación para Twitter con Silverlight y WCF – (TweetRobot) @DotNeteros

Agrega el tuyo

  1. No veo la ventaja de usar WCF en la aplicacion, todo esta preconfigurado para trabajar con tu cuenta asi que tener un servicio WCF solo para tu propia aplicacion da lo mismo que haber configurado la app de silverlight para que ella misma enviara los tweets sin necesidad de un servicio, solo agregar una dll que haga la logica sin meter codigo en la GUI. #EpicFail

    • Hola, cómo estás, bueno, primero está muy Tweet! tu comentario, gracias, segundo me parece bien que no te signifique ventajas usar WCF, Para mi si, debido a que simplemente estoy haciendo una DEMO de integración, sería muy bueno poder discutir estos temas con alguien diferente a un ser anónimo, sería #COOL reveles tu identidad 😀 y hagas un contra post, lo cual si construye conocimiento, sólo decir, no, es otro #EPICFAIL. A ver, sostengo que puede significar una ventaja tener el servicio debido a que tienes esto centralizado, digamos tu aplicación toma un espectro más grande, por consiguiente requieres acceso a datos y el proceso de tweet requiera algún nivel de validación contra datos o incluso almacenamiento de tweets, retweets etc etc, por tanto andar comunicándote con el servicio significaría otro #EPICFAL :D, pues como está planteado enviamos las fuentes y el servicio se encarga de lo demás, entonces dame una razón válida que realmente me lleve a retractarme, que lo creo difícil, más cuando se habla de algo puramente académico como un DEMO.

      Un Saludo y un consejo no te ocultes….eso no es de un Leader, que muy seguro se lo eres.

  2. A mi me parece muy cool lo del servicio, porque si yo quisiera hacer un cliente simplemente consumo tu servicio y asunto arreglado, ademas el servicio puedes usarlo en muchas otras aplicaciones que hagas, integrarlo con tu blog o con cualquier otro servicio.

    Es mas… si quisieras hacer una UI montada en Windows 8… pues el servicio ya esta hehco es solo hacerle otra UI.

    saludos.

  3. Dude! está cool que compartas esto, llevo meses buscando pero… deberías de verificar que se vean las imagenes, o tal vez es algún proxy por lo que no veo las imagenes pero bueno… ¿sabes que estaría cool que subieras el código de tu proyecto?, al menos yo programo en C#, creo que hasta podrías hacer una “comunidad” y de ahí trabajar en conjunto para un buen proyecto.

    Es mi punto de vista te dejo mi Twitter por cualquier cosa.
    @Alan_van_Buuren

    Saludos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s