October 2008 - Posts

Silverlight Toolkit es una colección de controles, componentes y utilidades Silverlight al margen del release oficial de Silverlight. Estos controles nos dan tanto a los diseñadores como a los programdores una cantidad interesante de recursos para aprovechar y mejorar nuestras aplicaciones. En total son 12 controles que incluyen el código fuente, documentación, ejemplos y los test.

Pueden bajarse los controles del siguiente link.

Más adelante estaré posteando como utilizar estos controles y poder darle una funcionalidad más interesante a las aplicaciones que estamos creando.

Ha sido lanzada finalmente ha salido a la luz Silverlight Tools RTW (Released To Web), por si no se habian dado cuenta al salir la versión final de Silverlight 2, había sido lanzado el RC1 lo que habia generado algo de confusión ya que mucha gente no sabía si instalarlo o no ya que veían RC1 al instalarlo.

Para que puedan descargar el RTW e instalarlo pueden ir al siguiente Silverlight Tools RTW.

A disfrutarlo!!!!

Dentro de los cambios que se han hecho en la versión final de Silverlight, se encuentra uno muy importante para aquellos que permitimos que nuestras aplicaciones sean embedidas dentro de cualquier web.

Dentro de los "Breakin Changes" se explica lo siguiente:

Cross domain hosts of Silverlight must set the right MIME type for XAP (application/x-silverlight-app)
Who Is Affected: Anyone serving Silverlight 2 apps from cross domain:
•    Via a web server that is not IIS7
•    Via a web server where the MIME type for .XAP files is incorrectly configured
Summary/Fix Required
When the XAP is served from a different domain than the host HTML page, Silverlight will validate that the MIME type (Content-Type response header) returned on the HTTP response is application/x-silverlight-app.
Apache (and perhaps other servers) tend to serve unrecognized content as text/plain, and therefore will be affected by this change. You are required to add an entry for the Silverlight XAP MIME type to your .htaccess file -- e.g. AddType application/x-silverlight-app xap.

De esta manera, puede ser que algunos de ustedes no puedan acceder a su objeto silverlight, y que solamente vean un cuadro blanco en lugar de la aplicación. Al estar utilizando un .xap que se encuentra en un dominio distinto donde se aloja la página que tiene el <object>, están realizando cross-domain, por lo que deben configurar correctamente el MIME type.

Como configurar el MIME- IIS

  • Para IIS debemos ir a las propiedades de nuestro sitio Web, dentro de estas hay una solapa que es HTTP-Header que es donde se configuran los MIME.
  • Dentro de la solapa, en la parte inferior se encuentra el apartado para los MIME-Types, ahi hacemos click para agregar uno nuevo o modificar si ya lo teniamos configurado.
  • La extensión es ".xap" y el valor del MIME-Type es "application/x-silverlight-app".
Propiedades MIMEValores MIME

Al empezar a migrar las aplicaciones de la Beta 2 a la versión final, me encontré algo realmente curioso. Al hacer click en un HyperlinkButton, aparecía el link bordeado. Al investigar un poco, me doy cuenta de que la nueva versión agrega a los controles un borde al hacer foco en el mismo, lo que para algunos controles, como los Textbox es bastante útil para saber donde esta parado el cursor,pero para los links no es algo que me parezca muy útil.

Ahora, al momento de intentar sacarlo, me doy cuenta que no hay una propiedad que me permita sacarlo, ya sea desde el Blend o desde el code-behind. La pregunta es como hacemos para sacarle el borde. La respuesta es utilizando un template para el control.

Entonces lo primero que vamos a hacer es crear un template en el App.xaml

<Application.Resources> 
    <Style TargetType="HyperlinkButton" 
           x:Key="HyperlinkButtonNoBorder"> 
        <Setter Property="Template"> 
        <Setter.Value> 
            <ControlTemplate TargetType="HyperlinkButton"> 
                <Grid x:Name="RootElement" 
                      Cursor="{TemplateBinding Cursor}"> 
                    <Rectangle x:Name="FocusVisualElement" 
                        StrokeDashCap="Round" 
                        StrokeDashArray=".2 5" 
                        Visibility="Collapsed" 
                        IsHitTestVisible="false"> 
                    </Rectangle> 
                    <ContentPresenter x:Name="Normal" 
                        Content="{TemplateBinding Content}"> 
                    </ContentPresenter> 
                </Grid> 
            </ControlTemplate> 
        </Setter.Value> 
        </Setter> 
    </Style> 
</Application.Resources>

De esta manera vemos como definimos para un HyperlinkButton (target) un estilo llamado HyperlinkButtonNoBorder (key), donde definimos que el Rectangle que se genera al hacer foco, no este visible. De tal manera el control que utilice este estilo va a funcionar como en la versión anterior.

El siguiente paso, es asignarle a el HyperlinkButton el estilo que acabamos de crear.

<HyperlinkButton x:Name="linkButton" 
                 FontFamily="Arial" 
                 FontSize="12" 
                 Foreground="#FFFFFFFF" 
                 Content="Prueba de Link" 
                 Click="linkButton_Click" 
                 Cursor="Hand" 
                 Style='{StaticResource HyperlinkButtonNoBorder}' 
                 />


Como vemos, le asignamos en Style, el template que creamos en el paso anterior.

De esta manera podemos generar otros templates para los controles en los que no necesitamos que aparezcan bordeados al hacerse foco en el mismo.

Cuando ejecutamos una aplicación Silverlight en Visual Studio, se ejecuta en el protocolo "file:", es decir se nos ejecuta una página html pero como un archivo y no como web. Esto nos genera que no sea el ambiente requerido para la prueba, además de no permitir cross-domain para acceder a un webservice a pesar de tener todos los permisos necesarios.

Como resolverlo (la solución fue tomada de http://silverlight.net/forums/t/4185.aspx)

  1. Abrir la solución que contiene la aplicación Silverlight.
  2. Agregar un nuevo sitio Web.
  3. Elegir un sitio ASP.NET, darle nombre y ubicación y presionar OK.
  4. Botón derecho del mouse sobre el sitio web y elegir Propiedades. Ahí veremos que tenemos para elegir "Aplicaciones Silverlight", donde agregaremos nuestra aplicación. Poner que queremos que genere un archivo de prueba para la aplicación, esto generaba una página aspx y otra html para testearla.
  5. Seleccionar "Si" cuando nos pregunte si queremos habilitar el debug para Silverlight.
  6. Definir el sitio web como inicial de la solución.
  7. Seleccionar el html o aspx que testea la aplicación Silverlight y darle F5 en Visual Studio
  8. Si nos pregunta, darle OK a la opción de "Modificar el Web.config para habilitar el debug"


De esta manera podemos debuggear, esperemos que sea más fácil y que directamente la aplicación Silverlight nos permita utilizar un html como web y no como file.

Si queremos que el fondo de nuestro objeto Silverlight sea transparente, debemos setear la propiedad background del objeto Silverlight, esta propiedad es mucho más potente que la del HTML ya que no sólo acepta valores RGB, sino también valores alpha para crear transparencias. La propiedad acepta el valor Transparent, si no se especifica ninguno por defecto el fondo es blanco.

Ahora, para que este fondo sea transparente, debemos definir además, la propiedad isWindowless. Tenemos que tener en cuenta que un objeto windowless respeta el z-index de HTML y permite transparencias, mientras que uno windowed siempre se pone por encima de todo y no acepta transparencias. Por defecto esta propiedad esta en false, por lo que tenemos que definirla en el momento de crear el objeto. Hay que tener en cuenta que solamente debe ponerse esta propiedad si se necesita ya que al ponerla en true, se pierde algo de performance.

Si no definimos la propiedad isWindowless en true entonces el fondo va a ser blanco.

Utilizando Silverlight.js

Silverlight.createObject 
  { 
    ... 
    properties: 
      { ... , 
        background: transparent, 
        isWindowLess: true 
      }, 
    ... 
  ); 


Utilizando <object>

<object data="data:application/x-silverlight," 
        type="application/x-silverlight"> 
    <param name="source" value="algo.xap"/> 
    <param name="background" value="transparent" /> 
    <param name="windowless" value="true" /> 
    <a href="http://go.microsoft.com/fwlink/?LinkID=115261" 
       style='text-decoration: none;'> 
       <img src="http://go.microsoft.com/fwlink/?LinkId=108181" 
            alt="Get Microsoft Silverlight" 
            style='border-style: none'/> 
    </a> 
</object>

Para que una aplicación Silverlight pueda acceder a elementos del DOM se pueden utilizar dos clases

  • HtmlPage
  • HtmlDocument

De esta manera podemos acceder a los distintos objetos que ofrece el DOM, a continuación muestro algunos ejemplos prácticos y sencillos.

HtmlElement es la clase que define los elementos del DOM a los cuales podemos acceder.

Obtener información del QueryString

Podemos acceder a los distinto parámetros que recibe la página que contiene nuestro objeto Silverlight utilizando la propiedad QueryString de la clase HtmlDocument.

string parametro = HtmlPage.Document.QueryString["parametro"].ToString();

Cambiar el Título de una página

HtmlDocument documentPage = HtmlPage.Document; 
documentPage.SetProperty("title", "Título de la página");

Acceder a elementos del DOM

HtmlDocument documentPage = HtmlPage.Document; 
foreach (HtmlElement he in documentPage.GetElementsByTagName("div")) 
{ 
     he.SetStyleAttribute("height", "500px"); 
}

Crear un elemento

HtmlElement myDiv = HtmlPage.Document.CreateElement("div"); 
 
myDiv.SetProperty("innerHTML", "<strong>Some HTML Content</strong>"); 
 
myDiv.SetStyleAttribute("border", "solid 1px black"); 
myDiv.SetStyleAttribute("position", "absolute"); 
myDiv.SetStyleAttribute("top", "10px"); 
myDiv.SetStyleAttribute("left", "10px"); 
 
HtmlPage.Document.Body.AppendChild(myDiv); 

Pueden acceder a más información via MSDN.

De esta manera podemos acceder a una cantidad enorme de posibilidades, pero hay que tener en cuenta algo muy importante, y es que hay que permitirle al objeto Silverlight acceder al DOM. Este permiso no puede darselo via XAML, sino que hay que definirlo al momento de crear el objeto Silverlight.

Recordemos que hay 3 maneras de crear un objeto Silverlight :

  1. <object> tag
  2. Silverlight.js
  3. <asp:Silverlight /> control para páginas ASP.NET 3.5
La propiedad para definir el permiso es enableHtmlAccess. Por defecto esta propiedad en Silverlight.js y <asp:Silverlight /> es true, pero utilizando el <object> es false. Por lo que hay que tener cuidado de definir esta propiedad sino nos va a tirar un error al intentar acceder al DOM. Para evitar este error podemos preguntar por HtmlPage.IsEnabled para saber si podemos acceder o no al DOM.

Hoy Martes 14 de Octubre ha sido lanzada finalmente la versión de Silverlight 2. Aquí pueden acceder al post oficial de Microsoft.

Esto es lo que necesitan para empezar a utilizarlo:

    Importante!!! Para empezar a desarrollar con Silverlight y Visual Studio deben tener instalado el SP1 de Visual Studio

     

    Migrar proyecto desde Beta 2:

    1. Primero deben bajar la nueva versión de Silverlight Tools, debiendo desinstalar todas las herramientas viejas antes de inicial la instalación.
    2. Abrir el proyecto, donde aparecerá una ventana diciéndonos que debemos actualizar el proyecto. Haremos click en "Yes".
    3. Cambiar en todos los HTML donde se hace referencia al objeto silverlight, application/x-silverlight-2-b1 o application/x-silverlight-2-b2 a application/x-silverlight-2.
    4. Cambiar la dirección de instalación del plug-in de Silverlight de http://go.microsoft.com/fwlink/?LinkID=108182 o http://go.microsoft.com/fwlink/?LinkID=115261 a http://go.microsoft.com/fwlink/?LinkID=124807.
    5. Ejecutar el proyecto y empezar a revisar todos los warning y errors que nos tire.

    Cambios en Silverlight 2:

    Para poder revisar en detalle los cambios es importante leer el documento oficial de Microsoft donde se explican todos los cambios que hay en la versión y como solucionar la incompatibilidad del la Beta 2. El documento lo pueden bajar aquí.  


    A programar con la versión final tan esperada!!!!!
    More Posts