Introducción
En este Artículo se muestra como personalizar la pantalla inicial de precarga proporcionada por Silverlight, mediante el acceso al API de la este.
El plug-in Silverlight requiere que todas las referencias a ensamblados/recursos se encuentren en el equipo local para que este pueda ejecutarse, por ello Silverlight nos provee de una pantalla inicial la cual es mostrada en el proceso de carga de dichos ensamblados. Dado que esta pantalla inicial es de carácter genérico en muchas ocasiones, queremos personalizar esta, con nuestra propia pantalla de inicio, con esta intención el API de Silverlight nos proporciona una forma sencilla de sustituir la misma.
Descarga y progreso
Como se ha comentado Silverlight requiere que todos los recursos y ensamblados a los cuales se hace referencia, se encuentren en el equipo local para poder inicializar nuestro plug-in (hay diversos casos en los que no todos los recursos/ensamblados se encontrarán en local ya que mediante diversas técnicas contamos con la posibilidad de realizar de forma dinámica la carga de estos, en este caso sólo tendremos en cuenta los elementos estáticos sin hacer uso de la carga dinámica – Dynamically Loading), por esto en este momento de la carga únicamente podremos hacer uso de JavaScript para controlar el proceso.
El propio plug-in de Silverlight nos proporciona las propiedades necesarias para realizar la personalización de la pantalla inicial:
- SplashScreenSource: Establece el la ruta de nuestra pagina XAML que se mostrara durante el trascurso del proceso de descarga en segundo plano.
- OnSourceDownloadProgressChanged: Establece el nombre de un evento JavaScript el cual es sucesivamente llamado durante el proceso de descarga.
- OnSourceDownloadComplete : Establece el nombre de un evento que se llama una vez a finalizado el procesote descarga.
Creando nuestra pantalla de inicio
Con el fin de ejemplificar lo expuesto anteriormente, realizaremos un sencillo ejemplo el cual contendrá una barra de progreso que mostrará el proceso de carga de nuestra aplicación.
Primeramente crearemos un proyecto estándar del tipo Aplicación de Silverlight con nombre «CustomSplashSL» (Menú – Archivo -> Nuevo -> Proyecto -> Plantilla -> Aplicación de Silverlight).
Una vez creados los dos proyectos que nos genera la plantilla nos dirigimos al proyecto Web nombrado como «CustomSplashSL.Web» en el creamos un nuevo elemento del tipo «Página JScript de Silverlight» (mediante botón derecho en el proyecto -> Agregar -> Nuevo elemento).
Este tipo de elemento nos creará dos ficheros «Scene1.xaml» y «Scene1.js»; el primero de estos lo renombraremos como «Splash.xaml» y el segundo como «Splash.js».
Una vez contamos con los ficheros que contendrán nuestra pantalla de inicio comenzaremos por diseñar nuestra barra de progreso, para esto iniciaremos nuestra aplicación en Expresión Blend.
Para nuestro ejemplo, nos bastaría con crear un rectángulo junto a una caja de texto que contendría el porcentaje de carga, pero esto nos mostraría una barra sin marcos como la mostrada en la Imagen 3, por lo tanto intentemos mejorar esto.
Gracias a Blend el proceso se nos simplifica en gran medida, para conseguir que nuestra barra de progreso se contenga dentro de unos marcos que delimiten la visualización de su contenido, para ello haremos uso de la propiedad “Clip” del objeto «Rectangle» dicha propiedad nos permite definir un área de recorte en la cual no será visualizado el objeto en cuestión en nuestro caso toda la zona que se salga de los limites de la barra de progreso.
Para realizar lo comentado basta con crearnos tres rectángulos; el marco en si, la barra de progreso o relleno (de color naranja) y un tercer rectángulo que será exactamente igual en dimensiones a nuestra barra de progreso, este rectángulo lo superpondremos a nuestra barra de progreso de color naranja y seleccionaremos ambos rectángulos, pulsaremos botón derecho sobre la selección y marcaremos la opción «Make Clipping Path» en el menú contextual (Path ->Make Clipping Path), como muestra la Imagen 4. Seguidamente superpondremos el rectángulo de marco sobre la combinación de rectángulos creada.
Con esto conseguiríamos el efecto deseado mostrado en la Imagen 5, permitiéndonos contener nuestra barra de progreso entre unos marcos dándonos una visión mas clara de cuando finalizará el proceso de descarga.
Animando nuestra barra de progreso
Contando ya con el diseño de nuestra barra de progreso pasaremos a darle movimiento. Para ello haremos uso de nuestro segundo fichero «Splash.js» en este definiremos la función «onProgressChanged» mostrada en el Fuente 1.
Una vez hecho esto lo único que nos restaría es establecer las propiedades de nuestro plug-in de silverlight para que sustituya su pantalla inicial por la nuestra personalizada, en el Fuente 2 podéis apreciar el establecimiento tanto de la propiedad «SplashScreenSource» en la cual indicamos la ruta de nuestro fichero XAML como la propiedad «OnSourceDownloadProgressChanged» en la que establecemos el nombre del evento JavaScript definido en nuestro fichero «Splash.js». También nos faltaría referenciar en nuestro fichero HTML el fichero «Splash.js» (mediante la siguiente línea de código ) para poder hacer uso de la función definida en el mismo.
NOTA:
En el caso en el que decidamos realizar la implementación en nuestra pagina ASP.NET en lugar de en la pagina HTML como se ha mostrado, deberíamos tener en cuenta el Fuentes 3 y 4 en los que se muestran las pequeñas diferencias a tener en cuenta para realizar dicha implementación.
En el Fuente 4 podemos ver las principales diferencias, con respecto a la versión de HTML, en definitiva se limitan a la forma de cómo recoger las instancias de los diferentes objetos representados en el fichero XAML.
También podemos ver en el Fuente 5 el establecimiento de las propiedades según su asignación estándar en ASP.NET.
Conclusiones
En este caso no hacemos uso de las animaciones proporcionadas por el API de Silverlight dado que con una simple variación de la propiedad «width» de nuestro rectángulo en cada iteración del evento «OnSourceDownloadProgressChanged» es suficiente para proporcionarnos la apariencia de movimiento de esta.
En este artículo nos damos cuenta de la flexibilidad que nos brinda silverlight en toda su API dándonos la libertad de personalizar en gran medida cada uno de los aspectos proporcionados por el API de este.
Fuente: http://www.elquintero.net/Articulos/Silverlight2Splash/SplashSilverlight2.aspx?jscript=true
Read Full Post »