Las herramientas de desarrollo de Dynamics Mobile nos ofrecen un buen conjunto de herramientas para poder realizar nuestros desarrollos móviles, entre de estas herramientas se nos ofrece la posibilidad de personalizar nuestra aplicación, en este capítulo veremos cómo personalizar el Splashscreen, como adaptar sus textos y como cambiar la imagen predefinida ya incluida.
Para aquellos que aún no hayáis creado una aplicación con Dynamics Mobile. Al iniciar cualquier aplicación desarrollada con Dynamics Mobile, lo primero en ejecutarse, la aplicación RolePad, muestra una pantalla de carga, el Splashsceen. Esta pantalla por defecto nos muestra el estado de carga de nuestra aplicación.
En el Splashscreen podemos personalizar los textos de carga e incluso la imagen mostrada durante la carga.
Personalizando el Splashscreen
Partimos de una aplicación Dynamics Mobile cualquiera, la abrimos en nuestro Visual Studio y abrimos el archivo app.config (todo lo haremos desde este archivo)
Tan solo hemos de agregar lo siguiente, en la sección de configuraciones, agregamos una nueva sección llamada splashScreen (ver Sección código xml 1 en negrita), esta parte se encuentra al principio del archivo.
[Sección código xml 1] Archivo app.config
<configSections>
<section name=«splashScreen»
type=«Microsoft.Dynamics.Mobile.Framework.RolePad.SplashScreen.SplashScreenSection,
RolePad» />
</configSections>
A continuación agregamos la definición de dicha sección. Esta parte la agregamos tras el elemento <application>, un nuevo nodo llamado Splashscreen como podéis ver en la Sección de código xml 2.
[Sección código xml 2] Archivo app.config
<splashScreen background=«MobileNugSplash.jpg«>
<labels>
<add key=«Label_ApplyingUpdate« text=«Instalando actualizaciones«/>
<add key=«Label_Initializing« text=«Cargando, epere por favor…«/>
<add key=«Label_Rollingbackupdates« text=«Desaciendo cambios«/>
<add key=«Label_Startingapplication« text=«Cargando…«/>
<add key=«Label_Startingservices« text=«Configurando servicios…«/>
<add key=«Label_Startingshell« text=«Cargando el shell…«/>
</labels>
</splashScreen>
Los parámetros a configurar son los siguientes background, en este atributo podemos especificar el nombre de un archive de imagen válido (jpg, png, bmp) que se encuentre en el directorio de nuestra aplicación.
Para agregarlo podemos incluirlo como contenido dentro del proyecto RolePad y asegurarnos de que lo incluimos en el cab de instalación para que se copie en la carpeta de nuestra aplicación.
En nuestro ejemplo hemos incluido un archivo MobileNugSplash.jpg (Figura1) personalizado con el logo de la comunidad de MobileNug
Figura 1
El tamaño de la imagen es importante ya que debemos tener en cuenta el factor de forma en que se mostrará nuestra aplicación de creando una imagen con el tamaño de 320×268 nos aseguramos de que nuestra imagen ocupará toda la pantalla ya mostremos la aplicación en horizontal o en vertical.
Como podéis ver en la Figura 2 hemos incluido la imagen como contenido y la hemos marcado para que se copie cuando hagamos el despliegue.
Figura 2
También podemos agregar los textos de información de carga de nuestra aplicación y personalizarlos para el idioma que corresponda. Esto se hace agregando un elemento contenedor de labels en el ejemplo de [Sección de código xml 1] podéis verlo los textos aparecen en la parte inferior de la pantalla y son los siguientes.
Label_ApplyingUpdate: Texto mostrado mientras se instalan actualizaciones
Label_Initializing: Texto mostrado al inicializar la aplicación
Label_Rollingbackupdates: Texto mostrado al deshcer cambios
Label_Startingapplication: Texto mostrado al cargar la aplicación
Label_Startingservices: Texto mostrado al configurar los servicios
Label_Startingshell: Texto mostrado mientras se carga el shell
Como habéis visto esta personalización es muy sencilla pero con un resultado vistoso, ya que es una buena forma de diferenciar nuestra aplicación.
En próximas entregas os ire iremos comentando nuevas pesonalizaciones, aunque aquí va otro pequeño apunte.
Si deseamos cambiar el nombre mostrado en la cabecera de nuestros formularios es tan sencillo como modificar la etiqueta <application> dentro del archivo app.config
<application text=»MobileNUG demo» validation=»false» />
Lo mostrado en el atributo text será el nombre mostrado en la cabecera de nuestros formularios.
Aquí os dejo el PDF con el tutorial y la solución (codigo fuente) con el ejemplo.
Saludos y nos leemos pronto
José Antonio Gallego
