Subiendo archivos al servidor en aplicaciones Silverlight

Introducción

Es muy común que para nuestras aplicaciones Web necesitemos ofrecer a los usuarios la capacidad de subir archivos al servidor por diversas razones: para su posterior procesamiento, respaldo de información, etc.  En este artículo veremos cómo en Silverlight esta tarea es sencilla por medio de la clase WebClient.

WebClient.OpenWriteAsync()

La clase WebClient permite una comunicación asíncrona entre el aplicativo Silverlight y algún endpoint que deseemos leer o escribir.  Es precisamente por medio de su método OpenWriteAsync por el cual podemos establecer un Stream de escritura para poder grabar en el servidor algún archivo que el usuario seleccione en la aplicación por medio de la caja de diálogo OpenFileDialog.  Es de vital importancia el mencionar que Silverlight, al ejecutar bajo un esquema de confianza media (Medium Trust) debido a que corre en un SandBox, no es capaz de acceder el sistema de archivos de la máquina en donde está ejecutando la aplicación, sino solamente a través de la autorización del usuario por medio de la caja de diálogo mencionada.

Bajo estas premisas, desarrollaremos la siguiente solución que demuestra lo siguiente:

  1. El uso de la clase OpenFileDialog para permitir al usuario seleccionar algún archivo que quiera subir al servidor.
  2. El uso de la clase WebClient y su método OpenWriteAsync para poder escribir en un Stream la secuencia de bytes que representen dicho archivo.
  3. La creación de una página .aspx que obtenga el Stream y escriba el archivo en el servidor

La aplicación tendrá la siguiente interfaz de usuario:

El botón llamado btnUpload tendrá la responsabilidad de mostrar la caja de diálogo OpenFileDialog para que el usuario selecciones un archivo de su sistema de archivos local.  El archivo seleccionado está representado con la propiedad File del objeto OpenFileDialog, y utilizaremos el método OpenRead() para leerlo como un Stream.  Posteriormente guardaremos en una variable llamada bytes la secuencia de bytes del archivo.

El siguiente paso será crear el manejador del evento OpenWriteCompleted, evento que se dispara cuando se haya creado efectivamente el Stream de escritura en el servidor.  Es en este manejador de evento en donde escribiremos la secuencia de bytes del archivo (variable llamada bytes) en el Stream.

Posteriormente ejecutaremos el método OpenWriteAsync() de la clase WebClient, el cual nos permitirá crear un Stream de escritura en el endpoint especificado en el argumento.  En el caso de nuestra aplicación usaremos Upload.aspx, el cual es una página de ASP.NET que además le mandaremos como parámetro el nombre del archivo seleccionado para evitar tener un nombre de archivo ‘hard-coded’.

El siguiente fragmento de codigo muestra esta funcionalidad completa:

Upload.aspx

En este ejemplo estamos usando una página de ASP.NET llamada Upload.aspx, la cual obtiene el Stream que se escribió en el código anteriormente descrito, y que servirá para efectivamente guardar ese Stream como un archivo en el servidor.  El nombre para el archivo es determinado a partir del valor del parámetro n en el querystring.  En el caso de esta solución el archivo se escribirá en el fólder ClientBin en el servidor, aunque podría obviamente ser parametrizable la localización en el servidor (tal vez a través de otro parámetro en el querystring).

El siguiente bloque muestra el código completo de Upload.aspx:

Debemos mencionar que también sería posible reemplazar la página .aspx por una Handler .ashx e implementar en dicho archivo la funcionalidad descrita en el bloque de código anterior, también leyendo el Stream, obteniendo la secuencia de bytes y escribirla en el sistema de archivos.

Finalmente, la siguiente ilustración muestra la aplicación finalizada en donde podemos hacer lo siguiente:

  1. Hacer clic en el botón de Silverlight llamado ‘Subir archivo…’, esto invoca la caja de diálogo de Abrir archivo (Figura 1)
  2. Seleccionar el archivo y seleccionar OK (Figura 2)
  3. Se muestra el archivo seleccionado ya subido al servidor, en el fólder ClientBin el cual en este caso es el Sitio de Origen.

Resumen

Subir archivos al servidor es muy común en las aplicaciones Web y las aplicaciones de tipo RIA no están excluidas de ello.  En este artículo vimos cómo al utilizar las clases WebClient y OpenFileDialog podemos lograr esta funcionalidad en Silverlight y utilizar una página .aspx como puente para lograrlo.

Web Cast: Introducción al control de Bing Maps para Silverlight

bing

Ha sido reprogramado el Web Cast “Introducción al control de Bing Maps para Silverlight” para el próximo día martes 30 de Junio a las 7:00pm –06:00 GMT.  En este Web Cast veremos las características que nos ofrece este control para nuestras aplicaciones de Silverlight 2 y Silverlight 3.

Les recuerdo que Bing es el nuevo nombre que tiene la plataforma que conocíamos como Live, es por eso que ya no se llama Virtual Earth :)

Orador: Rodrigo Díaz Concha

Los invito a que se registren en esta liga

Los esperamos!

Web Slices de Internet Explorer 8 con Silverlight

En el marco del Festival de Instalación de Internet Explorer 8 que tuvimos el día de hoy en varias ciudades de todo México, quiero detallar la potencia que tienen los Web Slices sobre todo si los usamos con una plataforma RIA como Silverlight.

Pero ¿qué es un Web Slice?  Un Web Slice es un fragmento o vista previa de una página que puede mostrarse en una ventana dentro de Internet Explorer 8 sin necesidad de cambiarte de la página en donde estás actualmente.  La creación de los Web Slices es bastante sencilla ya que no son más que fragmentos de código HTML que deben implementar ciertas clases de Css específicas, para que el navegador trate ese fragmento como, precisamente, un Web Slice.  Estas clases están definidas en la Especificación del Formato de los Web Slices que podemos encontrar en el MSDN y que al tiempo de la publicación de este artículo se encuentra en la versión 0.9.

Las clases más básicas para la construcción de Web Slices son las siguientes:

  • hslice:  Indica el comienzo de la definición del Web Slice (requerido)
  • entry-title: Indica el título para el Web Slice (requerido)
  • entry-content: Indica el contenido para el Web Slice (opcional)
  • feedurl:  Se aplica al atributo rel de un elemento <a> e indica una fuente de dónde podemos tomar información para incluir en el Web Slice (opcional)
  • bookmark:  Se aplica al atributo rel de un elemento <a> e indica la ruta de navegación al abrir el Web Slice

El siguiente fragmento de código muestra la implementación de un Web Slice simple:

Cuando Internet Explorer 8 muestra una página en donde se encuentra un fragmento como el anterior, se mostrará la opción para agregar Web Slices al navegador como lo muestra la siguiente figura:

Menú de agregar Web Slice

Al agregar el Web Slice, este será colocado en el menú del navegador, listo para poderlo utilizar incluso sin cambiarnos de la página actual que estemos desplegando!

Web Slice básico

Web Slices + Silverlight = Pareja perfecta

Ahora bien, gracias a esta característica, incluso nos será posible a los desarrolladores de Silverlight el crear Web Slices que no solamente utilicen HTML como lo vimos en el ejemplo anterior, sino que también podremos utilizar Silverlight como parte del Web Slice, a través de la instanciación correspondiente del plugin dentro de él (usando el elemento <object> por ejemplo).

Por ejemplo, en mi blog tengo un widget hecho con Silverlight 2 que muestra la lista de próximos cursos del Silverlight Tour.  Este widget está incorporado a través de los propios widgets de WordPress: el motor de blogging que usa mi sitio.  La instanciación de la aplicación de Silverlight es hecha a través de un <object> el cual se le pasan los parámetros correspondientes, principalmente el parámetro source el cual indica de dónde tomará el empaquetado .xap para su instanciación:

Y es debido a esto precisamente que podemos realizar una segunda página HTML que implemente la aplicación de Silverlight, y sea esta página la que invoquemos desde el Web Slice!  Los siguientes fragmentos de código muestran la página que hospeda la aplicación Silverlight, como el Web Slice que es desplegado en el menú de Internet Explorer 8 respectivamente:

Aplicación Silverlight

Web Slice

El Web Slice, al ser agregado a través del menú correspondiente en Internet Explorer, permitirá que tengamos el siguiente Web Slice en el navegador:

Web Slice con Silverlight

Demostrando así que podemos incorporar Silverlight 2 o 3 dentro de los Web Slices y no estar limitados a las propias fronteras de HTML.  Cabe notar el uso del atributo rel=”bookmark”; esto indica el Url a donde irá el navegador cuando abramos el Web Slice con el botón dentro de su ventana.

Resumen

Los Web Slices nos permiten desplegar un fragmento de contenido en un menú dentro de Internet Explorer 8.  Esta característica brinda a los usuarios un mecanismo de actualización de información sin tener que estar consultando la o las páginas en cuestión cada vez.  Similar a lo que conseguimos hoy en día con RSS pero con mayor potencia ya que podemos complementar la experiencia para el usuario con el uso de Silverlight.

Silverlight Tour: Nuevas Ciudades y Fechas próximas

¿Estás listo para aprender Silverlight 3?

Todavía hay lugares para las próximas fechas que el Silverlight Tour tendrá dentro de México:  Veracruz, Ver., Mérida, Yuc., y Villahermosa, Tab.  Si desean aprender Silverlight 2 y 3 a profundidad bajo la enseñanza de los expertos, y están en alguna de esas ciudades (o ciudades cercanas) los invito a que se registren.

El Silverlight Tour Workshop es un curso de tres días de alta profundidad técnica acerca de Silverlight 2 y 3. El curso se imparte en varios idiomas en diferentes países en todo el Mundo.

Incluye:

  • 3 días de entrenamiento intensivo de Silverlight 2 y 3
  • Cobertura de Expression Blend y Visual Studio .NET 2008
  • Arquitectura de Soluciones con Silverlight
  • Comunicación con el Servidor
  • Creación dinámica de contenido XAML
  • Comunicación con el DOM
  • La experiencia fuera del Navegador
  • Mejoras a la Estilización, incluyendo Diccionarios Merge y Estilos Based-On
  • Validación de Datos utilizando el Modelo de Controles
  • Utilización de XML Binario
  • Utilización de la nueva API de Bitmaps
  • Cobertura de Expression Blend 3 Preview
  • Etc…
  • Material totalmente en Español

Los esperamos!

Código Fuente: Creando un Reproductor MP3 con Silverlight 3

Reproductor de mp3 con Silverlight 3

Hace algunos días tuvimos otra reunión virtual más de La Liga Silverlight.  En esa sesión vimos cómo con Silverlight 3 podemos construir fácilmente un reproductor mp3 que incluso corra fuera del navegador gracias a la característica de ejecución Out-Of Browser (OOB) implementada en Silverlight 3.

Para todos aquellos asistentes que nos acompañaron aquí les dejo el url para poder descargar el código fuente que hicimos durante la sesión.

Sentimos mucho por esta ocasión no tener la sesión grabada ya que tuvimos un percance técnico de último momento pero esperemos a que las siguientes sesiones tengan la posibilidad de descargarlas para que las puedan ver posteriormente.

Salu2!

Festival de Instalación de Internet Explorer 8 – Guadalajara

Los esperamos el día de hoy al Festival de Instalación de Internet Explorer 8: la última versión del navegador de Microsoft, el cual incluye nuevas y novedosas características de seguridad, Web Slices, Aceleradores, etc.

En el caso de Guadalajara, Jalisco, los esperamos el día de hoy 16 de Junio a las 17:30 hrs. en la Sala 1 del Centro del Software (Av. López Mateos y Cubilete).  En el evento estaremos representantes de las diversas comunidades MSDN presentes en el estado para poder compartir con todos ustedes las ventajas que obtenemos al usar esta nueva versión del navegador.

Poster del Festival de Instalación de IE8

Los esperamos a todos (as) !!!

Recordatorio: “Creando un reproductor de mp3 en Silverlight 3”

Este es un recordatorio para que nos acompañen el día de hoy 10 de Junio a las 7:00p.m. en otra reunión más de La Liga Silverlight con el tema: “Creando un reproductor de mp3 en Silverlight 3”.

En este Web Cast veremos cómo con Silverlight 3 es bastante sencillo crear aplicaciones que hagan uso de multimedios como archivos de audio mp3.  Asiste a este evento de La Liga Silverlight: la primer comunidad MSDN en Español acerca de Silverlight y tecnologías relacionadas.

Oradores:

  • José Luis Estrada “El Jocho”
  • Rodrigo Díaz Concha

Se pueden registrar al Web Cast en esta dirección

Los esperamos!  Nos dará mucho gusto tenerlos presentes

Salu2!

Silverlight 3 Beta 1: Diccionarios de Recursos de tipo Merged

Introducción

Otra característica nueva en Silverlight 3 Beta 1, tomada de su hermano mayor WPF son los Diccionarios de Recursos de tipo Merged (mezclados, unidos), o en inglés: Merged Resource Dictionaries; los cuales nos permiten tener de manera desacoplada recursos (por ejemplo estilos) en un archivo por separado.  Esto nos ofrece un mecanismo para compartir estilos entre diferentes proyectos de Silverlight, o incluso entre proyectos de Silverlight y proyectos de WPF.

El archivo deberá tener declarado todos y cada uno de los Recursos que deseamos incorporar a ese diccionario, y deberán estar contenidos en un elemento de tipo <ResourceDictionary>.  El siguiente fragmento de código Xaml muestra un archivo llamado Estilos.xaml que funge como Diccionario de Recursos:

Noten cómo el elemento <ResourceDictionary> incluye los espacios de nombre xml, esto para poder resolver de manera correcta los elementos que agreguemos como Recursos en el Diccionario.

Por otro lado, para invocar ese Diccionario desde algún Diccionario de Recursos (UserControl, Application o algún contenedor) tenemos que hacerlo a través del elemento <ResourceDictionary> lo cual veremos más adelante en este mismo artículo.

Ahora bien, el archivo que contenga el Diccionario de Recursos podrá tener cualquier nombre arbitrario, pero lo que es un hecho es que el XAP aún necesitará referenciarlo de alguna manera:

  • Agregándolo como archivo en el proyecto de Silverlight y marcarlo como Resource
  • Agregándolo como archivo en el proyecto de Silverlight y marcarlo como Content
  • Tenerlo en un Ensamblado externo

Cada opción afecta la sintaxis con la que invocaremos el Diccionario de Recursos.

Build Action = Resource

Cuando marcamos un archivo como Resource en un proyecto de Silverlight, dicho archivo se incluirá en el diccionario de Recursos del Ensamblado.  Este mecanismo es conveniente cuando queremos tener una experiencia WYSIWYG en el diseño de la aplicación, ya que Visual Studio resolverá de manera inmediata el archivo.

Si utilizamos esta opción para el archivo con el Diccionario de Recursos, entonces la sintaxis en Xaml para referenciar los recursos que contiene deberá de ser de la manera:

nombre del ensamblado;component/nombre del archivo.xaml

El siguiente ejemplo de código muestra esta sintaxis al invocar el Diccionario:

Build Action = Content

Si marcamos el archivo como Content, el archivo formará parte del empaquetado XAP como tal, y ya no del Diccionario de Recursos del Ensamblado como mencionamos con anterioridad.

Si utilizamos esta opción, la sintaxis para referenciar el archivo del Diccionario de Recursos será:

/Nombre del archivo.xaml

Por ejemplo:

Pero en este caso Visual Studio tendrá un comportamiento inesperado ya que no podremos ver el diseñador correctamente sino hasta ejecutar la aplicación como tal.

Diccionario de Recursos Merged en otro Ensamblado

Para usar un Diccionario de Recursos que está en otro Ensamblado, necesitamos primeramente referenciar el .dll en cuestión y posteriormente utilizar la misma sintaxis que vimos cuando el archivo está marcado como Resource en el mismo proyecto (sección “Build Action=Resource” en este mismo artículo).  Cabe mencionar que en este caso también el archivo deberá estar marcado como Resource en el Ensamblado externo.

Resumen

Los Merged Resource Dictionaries nos permiten crear una lista de recursos en un archivo para poderlos reutilizar entre diferentes proyectos de Silverlight o incluso entre un proyecto de Silverlight y uno de WPF ya que brindan un mecanismo de fácil implementación y desacoplamiento.

Búsquedas con el API de Bing y Silverlight

Introducción

Hace algún tiempo hice un artículo de cómo podemos utilizar el API de Live Search en nuestras aplicaciones de Silverlight.  Este es únicamente una actualización a ese artículo pero ahora utilizando el API de Bing.

bing

Ahora que Bing ha sido liberado al público en general uno de los puntos muy importantes a destacar es la actualización que Microsoft ha hecho del API de búsqueda que podemos incorporar en nuestras aplicaciones.  Aunque la experiencia en el desarrollo con esta nueva API es bastante similar a lo que teníamos con anterioridad en Live Search, es destacable el hecho de que ahora podemos hacer búsquedas en Encarta Instant Answers (Respuestas Instantáneas de Encarta), lo cual nos permite no solamente buscar una cadena en páginas Web, sino también en esta importante y enorme enciclopedia en línea.  Esto lo logramos usando InstantAnswers como parte de la propiedad SourceType[] cuando creamos un Request.

Otro punto novedoso del API es el SourceType de tipo RelatedSearch el cual nos permite hacer búsquedas relacionadas con la búsqueda actual.  Para ver todas las novedades del API de Bing lo puedes hacer en esta página.

InstantAnswers de Encarta con Silverlight

Paso 1

Lo primero que tenemos que hacer al igual que en la versión del API de Live Search es registrarnos en el portal de desarrolladores para obtener un AppID.  El AppID es la puerta que nos permite hacer búsquedas en el motor ya que está ligado a nuestra cuenta de MSN.  Para obtener tu AppID lo puedes hacer aquí.

Paso 2

Ahora que ya tienes tu AppID disponible el siguiente paso será decidir la manera de como nos vamos a comunicar al servicio de búsqueda: a través de JSON, XML o SOAP.  En el caso de este artículo haré la demostración con SOAP debido a que Visual Studio .NET nos ayuda a crear la clase proxy ya que el servicio es autodescriptible, es decir, expone un WSDL que podemos usar para identificar su funcionamiento.

Paso 3

El paso siguiente es crear una nueva aplicación de Silverlight por medio de la plantilla de Visual Studio .NET.  Posteriormente agregamos la referencia al servicio localizado en: http://api.search.live.net/search.wsdl?AppID=TUAPPID (es el mismo Url que el API de Live Search).

Para hacer una búsqueda en Encarta Instant Answers tenemos que especificar el tipo de SourceType en la propiedad Sources cuando creamos el Request.  El siguiente fragmento código muestra un ejemplo de la construcción del Request:

Noten cómo en este ejemplo estoy estableciendo la propiedad Market a “es-MX”.  Al especificar esto estoy indicando el idioma y país para la búsqueda.  Si no hacemos esto la búsqueda automáticamente tratará de detectar mi localización geográfica e idioma adecuado basándose en mi dirección de IP y otros parámetros.

Asimismo esto es importante mencionar ya que algunas preguntas abiertas no podrán ser contestadas en esta demostración ya que en su mayoría responde únicamente a preguntas en idioma Inglés.

Finalmente un punto muy importante al obtener las respuestas de Encarta Instant Answers es el hecho de que la propiedad InstantAnswerSpecificData es de tipo string pero está expresada como un documento XML, así que la interpretación de dicha cadena es necesaria.  A continuación se muestra un código de ejemplo de cómo podemos interpretar dicha propiedad para sacar la información necesaria:

Bing con Silverlight

Para ver la aplicación en acción lo puedes hacer en esta página (el plugin de Silverlight 3 es requerido):

http://silverlight.services.live.com/invoke/76819/Silverlight%20-%20Bing%20Instant%20Answers/iframe.html