Archive

Posts Tagged ‘XAML’

31 días de Windows 8 | Día 4: Controles Nuevos

January 7th, 2013 No comments

Este artículo es una traducción del Día #4 de la serie 31 días de Windows 8 de Jeff Blakenburg.

Hoy volveremos a lo básico, y vamos a ver algunos de los nuevos controles de layout que tenemos disponibles en aplicaciones XAML. Éste artículo cubrirá específicamente ésta lista de controles:

  • AppBar
  • FlipView
  • GridView
  • ProgressRing
  • ScrollViewer
  • SemanticZoom
  • WebView

Si quieres ver la lista completa de controles disponibles en XAML para Windows 8, puedes darle un vistazo a MSDN y leer más aquí.

AppBar

La primera vez que me senté a escribir ésta sección, me acorde de cuando estaba trabajando con la ApplicationBar en el desarrollo de Windows Phone. Era bastante claro y conciso, pero tenías que crear imágenes para cada icono, y luego el SO de Windows Phone agregaba el círculo por ti.

Cuando empecé a ver el AppBar para Windows 8, me encanto descubrir que no solo las imágenes eran innecesarias para la mayoría de los iconos que verás, pero también implementarlo es de lo más simple. Aquí tienes un vistazo a la AppBar que vamos a crear:

clip_image001

Como puedes ver en la imagen arriba (clic para agrandar), vamos a implementar ambos una AppBar superior e inferior. Aunque técnicamente puedes poner cualquier cosa en el AppBar, hay un par de “reglas” que se deben destacar:

  1. El AppBar inferior está generalmente dividido en dos mitades. La izquierda es para comandos específicos del contexto, basado en el contenido actual en pantalla. La derecha es usado más para comandos universales que pueden ser accedidos desde cualquier lugar en tu aplicación.
  2. El AppBar superior supuestamente se usa para navegación y otras opciones necesarias en tu app, similar al listón que puedes encontrar en alguna de las apps de Office.

Mencione antes que no necesitas ningún arte para los iconos con círculos alrededor de ellos, y es totalmente cierto. De hecho, no necesitas hacer casi nada más que crear un botón y aplicar alguno de los 202 estilos de botón de AppBar que Microsoft ha provisto por defecto. Cada uno de ellos usa la fuente “Segoe UI Icons” para su iconografía, y hay muchos de ellos incluidos en tu archivo StandardStyles.xaml:

clip_image002

Haz click en la imagen para verlo en su magnífico tamaño completo. Vas a querer conservarlo. (También, un GRAN agradecimiento a Mike Brown por crear la versión invertida de ésta imagen para impresión. Definitivamente te ahorrar algo de tinta.

clip_image004

OK, tiempo de pasar a la parte de implementación de ésta sección. Para que el AppBar responda a los gestos del usuario, simplemente necesitas crear una nueva Page.TopAppBar o Page.BottomAppBar, de esta forma:

Realmente puedes poner cualquier cosa en donde están los comentarios en el ejemplo anterior, pero si quieres seguir las reglas, preferirás dividir el AppBar en dos secciones. En ese caso, aquí hay un ejemplo que incorpora un Grid para dividir el AppBar a la mitad, y usa dos StackPanels para orientar los iconos apropiadamente. Ésta es la barra inferior del screenshot que use arriba con los bloques de colores del arcoíris arriba.

Puedes ver que cada icono en la barra consiste simplemente de un control de Button con un Style aplicado. Como recordatorio, todos estos 202 estilos pueden encontrarse y editarse en el archivo StandardStyles.xaml de tu proyecto. Por defecto, todos estos estilos están comentados, así puedes elegir descomentarlos todos, o solo descomentar lo que vas a usar.

De cualquier forma, para demostrar que podemos poner cualquier cosa en un AppBar, veamos como hice los botones arcoíris arriba de la página.

He agregado algunos controles Rectangle dentro de un StackPanel, y agregue el evento Tapped a cada uno de ellos. En mi archivo code-behind, determino el color de Fill del rectángulo seleccionado, y pongo el fondo de la página de ese color, usando este método:

Descarga el código de ejemplo al final de este artículo para obtener una versión funcional que te permitirá verlo en acción, así como otra página que contiene todos los estilos de iconos en código. Al correr el código, nota que los gestos por defecto de Windows 8 ya funcionan. Arrastrando desde la parte superior o inferior de la pantalla mostrara el AppBar, de igual forma cuando se hace click derecho en la aplicación misma. Dale un vistazo!

FlipView

El control FlipView es uno de los que construí varias veces desde cero para Windows Phone, porque no existía. El propósito básico de un control FlipView es permitir al usuario “hojear” un grupo específico de contenido. En este ejemplo, vamos a hacer que hojee un grupo de imágenes, y como el FlipView hereda de ItemsControl, podemos enlazarle cualquier tipo de datos, inclusive usando DataTemplates para diseños complejas. Aquí está una vista rápida a nuestro control FlipView en acción (click para agrandar):

clip_image005

Como puedes ver, se nos provee con flechas de atrás y adelante que son conscientes de tu posición en la lista de datos, y previene moverse más allá del inicio o final de la lista. Implementar este control no podría ser más simple:

Todo lo que necesitas es agregar imagines a un FlipView, y así obtendrás un navegador de imágenes simple listo para usarse! Para algo más complejo, podrías querer agregar leyendas a tu navegador de imágenes. Para hacer esto, podemos usar FlipViewItems, y cada Item conteniendo sus propios valores únicos, como sigue:

 

Esto resulta en que cada una de nuestras imágenes tiene una pequeña leyenda debajo de esta, como aquí (click en la imagen!):

clip_image006

Hay muchas formas de extender este control, así que recomiendo checar el ejemplo del control FlipView en MSDN también. Me salte databinding específicamente en este ejemplo porque lo cubriremos extensivamente en el siguiente control de nuestra lista: el GridView.

GridView

El GridView es uno de los controles distintivos que verás en varias aplicaciones Windows 8. Se muestra en casi cualquier demo/ejemplo que verás, y es también central en la plantilla de Grid Application en Visual Studio.

clip_image007

El GridView, como el FlipView y ListView, heredan de ItemsControl, lo que significa que toman casi cualquier tipo de contenido XAML. En este ejemplo, vamos a crear el GridView en XAML, y lo poblamos con una Lista personalizada de datos de ejemplo. Primero, vamos a definir la clase del ejemplo de datos, Player, que será una simple lista de jugadores:

Si no has creado una clase en Visual Studio antes, haz click en tu nombre del proyecto, y elije “Agregar > Clase…” o presiona Shift + Alt + C. Nombra el archivo de clase Player.cs, y usa el código arriba para definir nuestro objeto simple.

A continuación, necesitamos crear nuestro control GridView. Agregar uno a tu página es simple, primero:

Sin embargo, hacer que se vea y actúe de la forma que quieres toma un poco más de trabajo. Si has leído artículos previos que he escrito sobre databinding en XAML (checa este si no lo has hecho), sabes que cualquier control que hereda de ItemsControl puede definir un ItemTemplate el cual va a especificar como cada objeto será presentado en pantalla. En este ejemplo, vamos a tomar cada uno de nuestros objetos Player y dibujarlos como un rectángulo en el GridView, con cada uno de los valores mostrados. Cada caja se verá como así:

clip_image008

¿Entonces cómo hacemos esto? Al definir un diseño XAML que incluye controles por cada uno de los valores de datos que queremos mostrar. Aquí está el GridView completo otra vez, con un ItemTemplate definido esta vez.

 

Con esto casi terminamos. Puedes ver que tenemos sentencias {Binding} por cada propiedad de nuestro objeto, pero aún no hemos realmente creado ningún objeto enlazado a este control GridView. Vamos a hacer eso vía código, así que abre tu archivo Xaml.cs.

En este ejemplo, he creado un nuevo manejador del evento OnNavigatedTo, y usar este para poblar mis datos. Estoy creando una nueva colección List<Player>, y después estableciendo esa colección como ItemsSource de nuestro control “mainGridView”.

Si lo haces bien, debes terminar con una interfaz que se ve como esta:

clip_image009

Mientras esto es aceptable, cuando empecé a escribir este ejemplo, estaba esperando algo más parecido a la imagen inicial que mostré, que tenía 3 elementos en la primera fila, y 2 en la segunda, para definir este tipo de diseño, puedes escribir mucho más XAML, o puedes echar un vistazo al GridView.ItemsPanel.

Redefinir el WrapGrid que está ahí por defecto te permitirá definir el número de filas o columnas que se usaran. Dentro de tu control GridView, agrega estas líneas:

Una vez que has hecho esto, tu GridView se debe ver un poco más familiar:

clip_image010

ProcessRing

Mientras esto es probablemente uno de los controles más simples en este artículo, no es menos importante. El ProgressRing está diseñado para ser una herramienta fácil de usar para distraer a tu usuario por un momento mientras cargas o procesar algo en el fondo. Es una alerta visual de que estás haciendo algo, y que amablemente aprecias la paciencia del usuario por un momento. Puedes ver uno aquí en acción:

clip_image011

Para poner un ProgressRing en tu página, solo necesitas una línea de XAML:

 

En las aplicaciones más practicas, sin embargo, vas a necesitar controlarlo via codigo como sea necesario. Esto es tan simple como modificar su propiedad de Visibilidad de Collapsed a Visible y de regreso.

Algo interesante que descubrí, sin embargo, es que también puede ser escalado a diferentes tamaños. Por ejemplo, He hecho el ProgressRing en el siguiente screenshot 400×400. Ese es el tipo de mensaje que quiero dar a mis usuarios. “Espera y quédate quieto” J

ScrollViewer

El ScrollViewer es otro control increíblemente simple que es prácticamente invaluable. ¿Cuántas veces has tenido un conjunto grande de datos que no cabría en la pantalla, y tenías que crear un mecanismo de desplazamiento o paginación para hacer el resto de los datos visibles al usuario? El ScrollViewer lo hace simple. Mete tu contenido dentro de un ScrollViewer, define que barras de desplazamiento quieres ver, y estas listo. Aquí hay un ejemplo que tiene dos StackPanel lleno de imágenes, excepto que solo el segundo está dentro de un ScrollViewer.

SemanticZoom

La primera vez que vi el SemanticZoom en acción, fue en la pantalla de inicio de Windows 8. Pellizcar para alejar te permite ver una meta-versión de las apps y mosaicos. (Si no tienes una pantalla touch, también puedes usar Ctrl + Rueda de desplazamiento. Desde entonces, lo he visto en un gran número de apps, incluyendo la Windows Store, Noticias y Netflix. Aquí hay un vistazo de mi app Netflix. Sin juzgar el contenido, mi familia entera usa esta cuenta:

Acercado (vista por defecto):

clip_image012

Alejado (meta vista):

clip_image013

Lo que está bueno del control SemanticZoom es que se nos dan dos estados, el ZoomedOutView y ZoomedInView, y podemos generalmente poner cualquier cosa que queramos en cada vista. (De hecho hay una guía específica acerca de cómo y cuándo usar el SemanticZoom de Microsoft en MSDN) En este ejemplo, tendremos un grupo de elementos de la Tabla Periódica, y mostraremos ambos la lista de elementos así como una vista agrupada que la muestra agrupada en familias, como los Gases Nobles y los Metales Alcalinos, como la siguiente pantalla muestra:

clip_image014

clip_image015

Entonces, para hacer esto, necesitamos iniciar con el control SemanticZoom. Agrega uno a tu página, así:

Vas a notar que hay varias piezas que necesitan ser agregadas para empezar. Primero, hay un nodo para ZoomedInView y ZoomedOutView. Me gusta ponerlos en este orden, porque el ZoomedInView es la vista por defecto que vera el usuario, y el ZoomedOutView es la vista “acercada”. Lo hace más fácil mantenerlo en mi mente.

Dentro de esos contenedores, necesitas un control que implemente la interfaz ISemanticZoomInformation, que es actualmente solo los controles GridView y ListView. Dado que ya hemos usado el GridView en este artículo, continuaremos con ese.

Antes de que hagamos esto, sin embargo, hablemos de datos. Este ejemplo va a usar elementos de la tabla periódica, así que necesitaremos una clase Element para empezar.

Adicionalmente, necesitamos crear y cargar algunos datos en nuestra página. Abre tu archivo Xaml.cs y agrega un nuevo manejador de eventos OnNavigatedTo, como este:

Para este ejemplo, he incluido los primeros 36 elementos en la tabla periódica, pero puedes expandirlo a más si tienes el tiempo. Ahora mismo, probablemente te preguntaras sobre las ultimas dos líneas que se refieren a ElementData y CategoryData. Estos son elementos CollectionViewSource que he agregado a nuestra sección Resources de la página XAML. Aquí esta como luce nuestra sección Page.Resources:

Esta es una forma simple para definir algunas colecciones de datos en XAML, y poblarlas como necesitemos desde código. Vamos a revisar esto en un momento, pero por ahora, representan las dos versiones de nuestros datos, agrupados y desagrupados.

Vamos a enfocarnos en el ZoomedInView primero, pero dado que es mucho más similar a nuestro ejemplo anterior de un GridView. En el código de ejemplo siguiente, he incluido el nodo entero ZoomedInView, y nota que estamos declarando el ItemsSource en XAML en vez de código. Estamos tomando el CollectionViewSource para nuestros datos.

El resto de nuestro marcado es un diseño de la caja de la tabla periódica. Cuando se muestra, se ve como esto:

clip_image016

Eso es todo para el ZoomedInView. En una nota aparte, use Gallium para este screen shot porque es asombroso. Es un metal que se ve como aluminio en bruto u hojalata, con un peso similar. Lo que esta genial es que tiene un punto de fusión alrededor de los 85F o 30C grados. Esto significa que cuando tomas un pedazo de Gallium, se derrite en un charco en tu mano, y se parece mucho al Mercurio en ese punto. (Gracias a mi amigo Jim Tacco por presentarme al Gallium hace unos años.)

http://www.youtube.com/watch?v=QYioZFOhxow

Vamos a ver ahora el ZoomedOutView. Aquí es donde las cosas se ponen un poco más interesantes. El código siguiente debe verse idéntico al ZoomedInView excepto los tamaños son todos más pequeños para nuestras fuentes y Grid, y eso es porque realmente lo es.

Del modo que vamos a hacer nuestro ZoomedOutView único es agregando un GroupStyle a nuestro GridView, que agregara encabezados a cada una de nuestras secciones. El GroupStyle define un HeaderTemplate para nuestra sección, y se enlaza a nuestro nombre de categoría.

Aquí está como se ve mi marcado de GridView.GroupStyle. Puedes insertar esto inmediatamente después del nodo GridView.ItemTemplate de nuestro ejemplo anterior.

Este GroupStyle tiene s upropio HeaderTemplate, que define como se ve cada encabezado de sección.

En este punto, si corres tu proyecto (o descargas el ejemplo al final del artículo), vas a ver que puedes fácilmente intercalar entre las dos vistas SemanticView, con solo un poco de XAML para hacerlo.

Recomiendo mucho usar SemanticZoom en tus aplicaciones donde hace sentido. Los usuarios lo esperarán, así que no los decepciones. Dales la experiencia rica y absorbente que merecen.

WebView

El control WebView es similar al WebBrowser en el desarrollo Windows Phone. En otras palabras, está diseñado para permitirte mostrar contenido HTML in tu app desde el web or desde archivos locales en tu proyecto. Esto se vuelve increíblemente útil cuando varias de las páginas de tu app de otra forma se verían idéntica a tu sitio. Puedes meter un control WebView y mostrar contenido sin haber construido paginas adicionales!

Un WebView es también una gran forma de aplicar análisis y códigos de rastreo a tus apps también. Haz el WebView pequeño, ocúltalo en un rincón de tu aplicación, ¡Y listo! Obtendrás un rastreo fácil dentro de la app.

Usar el control WebView es simple. Define una propiedad source, y ya estás.

Es otro control realmente simple, pero uno del que debes tenerlo presente. Nunca sabes cuándo necesitaras incrustar contenido web dentro de tu aplicación, y no hay una forma más sencilla.

Resumen

Este largo y exhaustivo artículo cubrió siete de los nuevos controles que están disponibles para nosotros en el desarrollo XAML de aplicaciones Windows 8. Espero que hayas aprendido uno o dos trucos en el camino.

Si gustas descargar la solución entera y código de ejemplo para este artículo, haz click en el botón de abajo:

clip_image017

Mañana, empezaremos con una serie de artículos referentes a los contratos, y en Día #5 nos enfocaremos específicamente a los Settings en tu app. ¡Hasta entonces!

31 Días de Windows 8 | Día 3: La pantalla de inicio (splash screen)

January 2nd, 2013 No comments

Este artículo es una traducción de “Día 3: La pantalla de inicio” de Jeff Blakenburg. Puedes encontrar aquí la versión original en inglés.

Hoy vamos a hablar acerca de una pequeña pero muy importante parte del ciclo de vida de la aplicación. La pantalla de inicio. Algunos de ustedes lo verán como un tema simple al principio, pero de hecho es increíblemente importante desde el punto de vista de experiencia de usuario.

Digamos, como ejemplo, que tu aplicación se conecta a internet para obtener cierta información. Quizá es una aplicación del clima. Cada vez que el usuario inicia tu aplicación, ellos van necesitar cierta información secundaria. Sabes que tomará generalmente 2-3 segundos obtener la información, las imágenes adecuadas y colocarlas dentro de la página de tu aplicación.

Lo que vemos que pasa en muchas aplicaciones es que la aplicación se inicia vacía, casi tanto como una página sin interés que se llenará 2 ó 3 segundos después. Al utilizar la pantalla de inicio y sus eventos nosotros podemos “extender” la experiencia de la pantalla de inicio de modo que los usuarios no vean nuestra aplicación hasta que  estemos listos para que eso pase. Un par de segundos extra mirando a la pantalla de inicio es siempre preferible a abrir una aplicación vacía.

Así que lo que estaremos haciendo en este artículo es determinar cunado fue colocada la pantalla de inicio y reemplazarla con nuestra imagen de inicio que sirva como marcador de posición hasta que nuestra aplicación este correctamente lista.

Para comenzar

Si revisas el artículo del día 1, la pantalla de inicio es siempre de 620 x 300 píxeles. Para este ejemplo vamos a darte dos versiones de esta imagen. La primera es la roja original.

SplashScreen3

Adicionalmente, hemos creado una versión idéntica de la imagen en un color púrpura de modo que podamos ver la diferencia cuando estas imágenes se cambien mientras que aún seremos capaces de notar que la posición del texto no cambie para nada.

SplashScreenPlaceholder2

Agrega estas dos imágenes  en tu folder de Assets en un proyecto en blanco. Si ejecutas el proyecto después de reemplazar las imágenes, deberás ver la imagen roja por un segundo o dos antes de que tu aplicación cargue una pantalla negra.

Creando una página de pantalla de inicio

Nuestro siguiente paso es crear una página separada para continuar con la ilusión de una pantalla de inicio. Agrega una nueva página blanca a tu proyecto.

image

He nombrado a la página Splash.xaml, pero tu puedes llamarla de la manera que más sentido tenga para tu aplicación. Después de agregar la imagen púrpura a la página el código debe lucir de la siguiente manera.

<page x:Class="Pantalla_de_inicio.Splash"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Pantalla_de_inicio"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<image Source="Assets/SplashScreen2.png" Stretch="Fill" Width="620" Height="300" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</grid>
</page>

Como puedes ver es muy simple. Solo agrega una imagen a tu página. El siguiente paso es modificar nuestro archivo App.xaml.cs para dirigir al usuario a esta página primero.

Modificar nuestro App.xaml.cs

Los desarrolladores que crean aplicaciones simples quizá nunca hayan abierto este archivo, pero es aquí donde mucha de la magia ocurre. App.xaml.cs contiene nuestros métodos de inicio y otra funcionalidad a nivel de sistema como manejar el estado de la aplicación entre sesiones. En este caso, estamos buscando el método OnLaunched(). He retirado todos los comentarios que están aquí por defecto pero tu estás buscando específicamente por el lugar donde se está tratando de navegar Navigate(typeof(MainPage), args.Arguments).

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
Frame rootFrame = Window.Current.Content as Frame;

if (rootFrame == null)
{
rootFrame = new Frame();

if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
}

Window.Current.Content = rootFrame;
}

if (rootFrame.Content == null)
{
if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
{
throw new Exception("Failed to create initial page");
}
}
Window.Current.Activate();
}

Por defecto nuestra aplicación esta tratando de navegar a MainPage.xaml y queremos tratar de cambiar esto. Reemplaza la referencia a MainPage con una referencia a Splash, lo he hecho en el ejemplo de arriba. Esto llevará al usuario a nuestra página Splash primero donde podemos hacer la carga que necesitamos completar.

Anda, prueba tu aplicación. Cuando ponemos nuestra imagen púrpura en un contenedor la destinamos en una ubicación centrada. Deberás ver que la caja púrpura reemplaza a la caja roja perfectamente. Aquí hay un video para ilustrar, en el caso de que solo estés leyendo y no escribiendo código en estos momentos (¿Por qué no estás escribiendo código?).

¿Hemos terminado? Ni siquiera un poco. Lo que hemos hecho es lo barato, la forma sencilla de prolongar a la pantalla de inicio. Hay un modelo mucho más complicado para esto si estás interesado.

El más difícil, más involucrado camino

Vamos a decir que estás buscando por algo mas que solo extender la longitud de la vista de la pantalla de inicio. Quizá quieres saber cuando la pantalla de inicio desapareció o la ubicación específica en la que la pantalla de inicio fue desplegada en la pantalla. Puedes hacer esto gracias al objeto SplashScreen que el espacio de nombres Windows.ApplicationModel.Activation nos da.

Primero, vamos a mirar de nuevo nuestro archivo App.xaml.cs. Vamos a cambiar como hacemos la llamada inicial a la página Splash.xaml pasando el objeto SplashScreen al constructor de nuestra página. Para simplificar, hemos eliminado todo el código predeterminado en nuestro método OnLaunched y lo cambiamos por el siguiente. Agregamos comentarios para explicar cada línea de código del código.

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// Primero queremos verificar si la aplicación ya está corriendo
if (args.PreviousExecutionState != ApplicationExecutionState.Running)
{
//Si no lo estaba, entonces queremos checar si fue terminada la última vez que se ejecutó
//lo cual nos hará pasar por la página de inicio
bool estadoDeCarga = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);

//Crea un nuevo objeto de la página Splash pasando el objeto SplashScreen al constructor
Splash paginaInicio = new Splash(args.SplashScreen, estadoDeCarga);

//Ajusta el contenido actual de la aplicación igual a la página Splash
Window.Current.Content = paginaInicio;

}
Window.Current.Activate();
}

Ahora que hemos pasado esa información, necesitamos modificar como está escrito el constructor de nuestro Splash.xaml.cs para que pueda obtener esos valores cuando lleguen. Abre tu archivo Splash.xaml.cs y reescribe tu método Splash() de la siguiente manera.

public SplashScreen PantallaInicio;
public Rect imagenInicio;

public Splash(SplashScreen pantallaInicio, bool estadoCarga)
{
this.InitializeComponent();
PantallaInicio = pantallaInicio;
imagenInicio = PantallaInicio.ImageLocation;
}

Como puedes ver, dado que cambiamos como llamamos a nuestra página Splash en nuestro archivo App.xaml.cs también necesitamos que el método constructor coincida con la misma forma, recibiendo un objeto SplashScreen y un valor booleano. El valor estadoCarga es pasado a nuestra página para dejarnos saber si estamos cargando desde un estado previo o no. (Recuerda que ajustamos este valor en el archivo App.xaml.cs arriba).

Reconociendo cuando la pantalla de inicio este desaparecida

Nuestro siguiente paso es suscribir el manejador de eventos para cuando la página de inicio haya desaparecido. Hacemos esto como en casi cualquier manejador de eventos. Agrega esta línea de código al final del nuevo método constructor que creamos.

PantallaInicio.Dismissed += new TypedEventHandler<splashscreen ,object> (PantallaInicio_Dismissed);

Dado que ahora hemos definido un nuevo manejador de eventos, también necesitamos crear el método que atrape ese evento el cual es llamado PantallaInicio_Dismissed. En este ejemplo hemos dejado vacío el código pero este es el lugar en donde agregarías el código que debería ser ejecutado cuando la pantalla de inicio haya desaparecido.

void PantallaInicio_Dismissed(SplashScreen sender, object args)
{

}

Determinando la ubicación y tamaño de la imagen de la pantalla de inicio

Finalmente, necesitamos determinar donde fue colocada la pantalla de inicio en la pantalla. En esta parte del ejemplo vamos a usar la ubicación de la pantalla de inicio para determinar donde colocar una imagen publicitaria como la de abajo mientras la aplicación se carga.

Primero, aquí está la imagen que usaremos. (Siéntete libre de usarla en tus aplicaciones)

advertisementsample

Agrégala a tu proyecto  y después actualiza tu archivo Splash.xaml para que luzca así.

<grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<canvas Background="#464646">
<image x:Name="SplashScreenImage" Source="Assets/SplashScreen2.png" Width="620" Height="300" Visibility="Collapsed"/>
<image x:Name="AdvertisementImage" Source="Assets/advertisementsample.png" Width="620" Height="100" Visibility="Collapsed"/>
</canvas>
</grid>

Como puedes ver en el XAML de arriba he removido el interior del control Grid y lo reemplace con un Canvas. Esto es realmente solo para mostrar que no estoy usando ninguna propiedad de centrado del Grid y en su lugar voy a tener que ser completamente acertado en la ubicación de mi imagen.

Regresa un poco a tu archivo Splash.xaml.cs y agrega una línea adicional a tu método constructor (la llamada a un método llamado PosicionPublicidad) de modo que al final luzca de la siguiente manera.

public SplashScreen PantallaInicio;
public Rect imagenInicio;

public Splash(SplashScreen pantallaInicio, bool estadoCarga)
{
this.InitializeComponent();
PantallaInicio = pantallaInicio;
imagenInicio = PantallaInicio.ImageLocation;

PantallaInicio.Dismissed += new TypedEventHandler</splashscreen><splashscreen ,object> (PantallaInicio_Dismissed);
PosicionPublicidad();
}

void PantallaInicio_Dismissed(SplashScreen sender, object args)
{

}

Finalmente, necesitamos crear un método con el mismo nombre y mover nuestras imágenes a sus posiciones apropiadas antes de cambiar sus propiedades de Visibility a Visible. Para acceder a las propiedades X, Y, Height y Width del objeto SplashScreen.ImageLocation.

private void PosicionPublicidad()
{
imagenPantallaInicio.SetValue(Canvas.TopProperty, imagenInicio.Y);
imagenPantallaInicio.SetValue(Canvas.LeftProperty, imagenInicio.X);
imagenPantallaInicio.Height = imagenInicio.Height;
imagenPantallaInicio.Width = imagenInicio.Width;
imagenPantallaInicio.Visibility = Windows.UI.Xaml.Visibility.Visible;

imagenPublicidad.SetValue(Canvas.TopProperty, (imagenInicio.Y + imagenInicio.Height + 100));
imagenPublicidad.SetValue(Canvas.LeftProperty, imagenInicio.X);
imagenPublicidad.Visibility = Windows.UI.Xaml.Visibility.Visible;
}

Como puedes ver, estamos posicionando la imagenPantallaInicio a la misma posición que la imagen preestablecida de la página de inicio de la aplicación. Después ajustamos la publicidad para que se muestre 100 píxeles por debajo de la pantalla de inicio. Así que al final, el archivo Splash.xaml deberá lucir de la siguiente manera.

image_thumb

¡Y eso es todo!

Conclusión

En corto, la página de inicio puede ser tu amiga. Se convierte en un velo temporal para esconder tu aplicación mientras esté lista así como un lugar para colocar algo de publicidad en aplicaciones gratuitas. Es una pieza altamente valiosa del estado de tu aplicación y definitivamente pienso que es algo que deberías considerar para aprovechar en cada aplicación.

Para descargar la solución entera de ejemplo de este artículo, puedes descargarla aquí.

Mañana, vamos a enfocarnos en algunos de los nuevos controles comunes que están disponibles para nosotros en el desarrollo de aplicaciones XAML para Windows 8. Miraremos cosas como el GridView, FlipView y más. Pero eso es mañana ¡Nos vemos!

31 Días de Windows 8 | Día 2: Orientación y snapping

November 16th, 2012 3 comments

Este artículo es una traducción de “Día 2: Orientación y snapping” de Jeff Blakenburg. Puedes encontrar aquí la versión original en inglés.

Hoy vamos a hablar acerca de tamaños de pantalla y porqué ellos son importantes para el desarrollo en Windows 8. En la primera parte de este artículo discutiremos la orientación y algunas maneras simples en las que podemos hacer nuestra aplicación mas útil basados en la forma en que nuestro usuario sostiene su dispositivo.  En la segunda parte, vamos a mirar a nuestra aplicación en un estado “snapped” y como podríamos cambiar nuestra interfaz para acomodarla en un tamaño de pantalla mucho menor.

La orientación y el snap son importantes porque si tu no los consideras en t aplicación, tu aplicación no será aprobada en la Tienda de Windows.

Si miras en los requerimientos de la certificación de aplicaciones de Windows 8, en la sección 3.6 podrás leer.

Tu aplicación debe soportar un diseño acortado. En una orientación horizontal, las funciones de tu aplicación deben ser completamente accesibles cuando el tamaño de la pantalla es de 1024 x 768. Tu aplicación debe permanecer funcional cuando el cliente acorte o agrande la aplicación.

Lo que esto dice es que nuestra aplicación necesita soportar tres estados visuales por lo menos.

  • 1024 x 768 (la resolución mínima y el estado completo)
  • 320 x 768 (snapped)
  • La resolución por defecto para la que estés planeando será generalmente 1366 x 768.

Aquí hay un ejemplo de una aplicación en pantalla completa moviéndose a un tamaño reducido.

A multi-column layout in the unsnapped and snapped states

Puedes ver en este caso, hemos re acomodado nuestro contenido para que pueda caber en un tamaño mas reducido. También hay una oportunidad para mover tu aplicación a un estado “completo” el cual es representado por el bloque gris claro a la derecha de nuestra vista acortada.

Afortunadamente, hay algunas maneras simples de reconocer en que estado se encuentra nuestra aplicación y el resto de este artículo será dedicado a mostrar exactamente como poder hacerlo.

Soportar rotación

Para comenzar vamos a crear nuestra casi famosa aplicación desde la plantilla en blanco de Visual Studio 2012. Una vez que la has creado, corre tu aplicación en el simulador o en una máquina remota ( más de esto adelante). Verás tu asombrosa aplicación blanca y si la rotas, la aplicación estará de hecho rotando también. ¿Por qué? ¿Cómo?

Por defecto, todas las plantillas en Visual Studio están configuradas para soportar todas las rotaciones. Recuerdas el archivo package.appmanifest? En la tabla de la UI de la aplicación encontrarás una sección llamada Orientaciones soportadas (Suported orientations). Al checar una o más de las preferencias estás seleccionando que orientaciones podrá soportar tu aplicación. De nuevo, por defecto las soportará todas.

image_thumb4

Dependiendo de tu situación, este podría ser un valor agregado para la experiencia general de tu aplicación. Por ejemplo, si estás creando un juego quizá solo quieras un modo horizontal.

Reconocer el cambio de orientación

El primer paso al trabajar con orientaciones es asegurarnos que podemos reconocer cuando un cambio de orientación ha sucedido. Afortunadamente, el SDK de Windows 8 nos ha proveído con el sensor SimpleOrientationSensor que tiene eventos para este propósito exacto. Para este ejemplo, hemos comenzado de nuevo con solo una plantilla en blanco en Visual Studio 2012.

Primero, hemos agregado un control simple de TextBox a nuestro archivo MainPage.xaml. Aquí está el conjunto entero de código para este archivo.

<page x:Class="Dia_2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Dia_2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<textblock Text="No orientation reading." x:Name="AlertBox" FontSize="50" TextAlignment="Center" Margin="0,100,0,0" />
</grid>
</page>

Ahora, abre el archivo MainPage.xaml.cs. Necesitamos agregar algo de código para usar este sensor.

Lo primero que agregaremos es una nueva sentencia using: using Windows.Devices.Sensors;. Lo siguiente que agregaremos es una nueva instancia de la clase SimpleOrientationSensor y agregar algunos manejadores de eventos para ser capaces de reconocer el cambio de orientación. Aquí está el código entero de mi archivo MainPage.xaml.cs. Explicaremos el código después. Hay algunas piezas del código C# que debería explicar.

using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
using Windows.Devices.Sensors;

namespace Dia_2
{
public sealed partial class MainPage : Page
{
private SimpleOrientationSensor sensorOrientacion;

public MainPage()
{
this.InitializeComponent();
sensorOrientacion = SimpleOrientationSensor.GetDefault();
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
if(sensorOrientacion != null)
sensorOrientacion.OrientationChanged += sensorOrientacion_OrientationChanged;
}

protected override void OnNavigatedFrom(NavigationEventArgs e)
{
if(sensorOrientacion != null)
sensorOrientacion.OrientationChanged -= sensorOrientacion_OrientationChanged;
}

async private void sensorOrientacion_OrientationChanged(SimpleOrientationSensor sender, SimpleOrientationSensorOrientationChangedEventArgs args)
{
await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
{
MostrarTextoOrientacion(args.Orientation);
});
}

private void MostrarTextoOrientacion(SimpleOrientation orientacionSimple)
{
switch (orientacionSimple)
{
case SimpleOrientation.Facedown:
txtAlerta.Text = "Hacia abajo";
break;
case SimpleOrientation.Faceup:
txtAlerta.Text = "Hacia arriba";
break;
case SimpleOrientation.NotRotated:
txtAlerta.Text = "Sin rotación";
break;
case SimpleOrientation.Rotated180DegreesCounterclockwise:
txtAlerta.Text = "Rotado 180 grados";
break;
case SimpleOrientation.Rotated270DegreesCounterclockwise:
txtAlerta.Text = "270 grados a la izquierda";
break;
case SimpleOrientation.Rotated90DegreesCounterclockwise:
txtAlerta.Text = "90 grados a la izquierda";
break;
default:
txtAlerta.Text = "Desconocido";
break;
}
}
}
}

Primero, creamos un nuevo objeto SimpleOrientationSensor llamado orientationSensor. En el método constructor, MainPage(), instanciamos el objeto con la orientación preestablecida del sensor del dispositivo.

En el manejador de eventos OnNavigatedTo() y OnNavigatedFrom(), agregamos y retiramos un evento sensorOrientacion_OrientationChanged a nuestro nuevo objeto. Es importante asegurarnos que el objeto no sea nulo porque hay dispositivos que no tienen este sensor obtendrás un error.

Después, tenemos un nuevo manejador de eventos llamado sensorOrientacion_OrientationChanged(). Deberías notar que esta decorado con un descriptor async y utiliza la palabra reservada await cuando ejecuta su acción. Esto es hecho para evitar cuellos de botella en nuestro código que podría de otra manera podría colapsar la aplicación. (Puedes leer un poco más acerca de async/await en MSDN).

Una vez que la información haya sido obtenida, llamamos a un nuevo método, MostrarTextoOrientacion() pasando los datos de la orientación.

Finalmente, MostrarTextoOrientacion() ejecuta un simple ciclo switch con todas las posibiles orientaciones que puedan existir: NotRotated, Rotated90DegreesCounterclockwise, Rotated180DegreesCounterclockwise, Rotated270DegreesCounterclockwise, Facedown, Faceup, ó Unknown. Yo creo que es chistoso que uno haya sido nombrado Rotated180DegreesCounterclockwise dado que a los 180° no importaría desde que dirección haya llegado.

Aquí hay un vistazo rápido de la aplicación en su estado actual.

Depuración remota

Ahora, si no eres como Clark y yo, te gusta entonces escribir tu código en una máquina de escritorio con un procesador de cuatro núcleos, quizá 8-12 GB de RAM, monitor dual de 27’’, mouse y teclado, seleccionar tu monitos para cambiar la orientación simplemente no funcionará. Además del SimpleOrientationSensor, lo que nosotros estamos usando no es una aplicación emulada sino que necesitaremos un dispositivo real para hacerlo.

Otra lección importante que aprendimos: Es un simulador, no un emulador como en Windows Phone. Esto es porque solo simulará la máquina en donde estará corriendo, no como un dispositivo completamente diferente y capaz.

Afortunadamente, Microsoft a dado una forma para que nosotros la podamos utilizar y ver nuestra aplicación en un dispositivo secundario, tal y como lo hacemos al crear aplicaciones Windows Phone. Aquí hay una pequeña historia de como funciona (MSDN tiene la mas larga y completa historia):

Instala las herramientas de depuración remota en el dispositivo secundario. Yo estoy usando una Samsung Series 7 Slate, pero cualquier dispositivo Windows 8 colocado de fábrica en una tableta podría funcionar. Puedes descargar las herramientas de depuración remota desde aquí. Asegúrate de escoger el sabor adecuado entre, x86, x64 o ARM dependiendo de tu dispositivo.

Corre las herramientas remotas en el dispositivo secundario. Verás un ícono se se asemeja a esto:

RemoteDebuggerIcon

Una vez que el depurador remoto esta corriendo en tu dispositivo secundario, regresa a tu máquina primaria y selecciona “Remote Machine” como el objeto para desplegar tu aplicación.

RemoteMachineDebuggingOption

Cuando eligas “Remote Machine” por primera vez, te aparecerá un diálogo que se parece al de la imagen de abajo. Recuerda, los dispositivos en una subred solo aparecerán si las herramientas de depuración remota han sido instaladas y estén ejecutándose.

RemoteDebuggerConnections

 

Después, cuando quieras cambiar dispositivos, vas a molestarte cuando quieras saber donde esta esta opción guardada. Estoy aquí mis queridos lectores para evitarles esa molestia. Abre las propiedades de tu proyecto ( Alt + Enter ) y escoge la tabla de Depuración. Desde aquí, podrás cambiar o remover tu selección previa. Si tu retiras la elección, la próxima vez que escojas la depuración remota, obtendrás el cuadro de diálogo anterior.

ProjectPropertiesDebug

De vuelta al código…

Ok, hasta este punto, tenemos una aplicación que reconoce que la orientación del dispositivo ha cambiado. Todo esto esta bien cuando queremos hacer algo específico “en código” con orientación, pero ¿Qué pasa si nosotros queremos que nuestra aplicación se re oriente a si misma para ser utilizable para nuestro usuario? Hay una manera mucho mas sencilla gracias al VisualStateManager.

Ve de vuelta a tu proyecto y da un clic derecho para abrir el cuadro de diálogo de un nuevo elemento.

AddNewBasicPageDialog

Agrega una nueva página básica, nosotros la nombramos PaginaOrientacion. Si le das un vistazo al XAML para esta página, descubrirás que estamos trabajando con una objeto de página justo afuera de la caja. Esta es una LayoutAwarePage y por defecto ya tiene la suficiente estructura para orientarse a si misma apropiadamente e incluso te da un VisualState para la vista acortada también.

Además, al usar este tipo de página el simulador también respeta los cambios de orientación.

Esto quiere decir que solo por utilizar este tipo de página, automáticamente obtenemos una página lista para la orientación y vista acordada que tiene un conjunto estático de estados visuales que podemos manipular para hacer que nuestra página haga lo que nos gustaría. Para hacer esto mas obvio, voy a modificar mis estados visuales para que cada una tenga un fondo diferente de color.

LandscapeOrientation

PortraitOrientation

SnappedState

Aquí hay un vistazo de los valores modificadoes de nuestra PaginaOrientacion.xaml:

<visualstatemanager .VisualStateGroups>
<visualstategroup x:Name="ApplicationViewStates">
<visualstate x:Name="FullScreenLandscape">
<storyboard>
<objectanimationusingkeyframes Storyboard.TargetName="layoutRoot" Storyboard.TargetProperty="Background">
<discreteobjectkeyframe KeyTime="0" Value="Purple"/>
</objectanimationusingkeyframes>
</storyboard>
</visualstate>
<visualstate x:Name="Filled">
<storyboard>
<objectanimationusingkeyframes Storyboard.TargetName="layoutRoot" Storyboard.TargetProperty="Background">
<discreteobjectkeyframe KeyTime="0" Value="Orange"/>
</objectanimationusingkeyframes>
</storyboard>
</visualstate>
<visualstate x:Name="FullScreenPortrait">
<storyboard>
<objectanimationusingkeyframes Storyboard.TargetName="layoutRoot" Storyboard.TargetProperty="Background">
<discreteobjectkeyframe KeyTime="0" Value="DarkGreen"/>
</objectanimationusingkeyframes>
<objectanimationusingkeyframes Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<discreteobjectkeyframe KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
</objectanimationusingkeyframes>
</storyboard>
</visualstate>
<visualstate x:Name="Snapped">
<storyboard>
<objectanimationusingkeyframes Storyboard.TargetName="layoutRoot" Storyboard.TargetProperty="Background">
<discreteobjectkeyframe KeyTime="0" Value="Blue"/>
</objectanimationusingkeyframes>
<objectanimationusingkeyframes Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<discreteobjectkeyframe KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</objectanimationusingkeyframes>
<objectanimationusingkeyframes Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<discreteobjectkeyframe KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</objectanimationusingkeyframes>
</storyboard>
</visualstate>
</visualstategroup>
</visualstatemanager>

Como puedes ver, simplemente hemos agregado un nuevo nodo para cada sección que modifique la propiedad Background de mi Grid LayoutRoot. Lo que esta nueva LayoutAwarePage nos permite hacer, en lugar de escribir toneladas de código para administrar nuestra orientación, nos  preocupamos por lo que realmente interesa: Nuestra personalización. Al escribir estilos separados para los elementos de nuestra página basados en estados visuales de nuestra página, simplificamos nuestro proceso entero.

En conclusión

Hoy, dimos una vista a como podemos determinar la orientación del dispositivo de un usuario asó como poder utilizar el item LayoutAwarePage para manejar los diferentes estados visuales que nuestra aplicación puede encontrar. Hay toneladas de grandes ejemplos en la web relacionados a orientación y snap, pero hay UNA lección que puedes tomar de este artículo, es:

Tu aplicación DEBE cubrir el estado snapped. Asegúrate de acomodarla.

Para descargar la solución de ejemplo completa de este artículo, puedes descargarla aquí.

downloadXAML

Mañana, vamos a ver el uso de las pantallas de inicio. Es una herramienta valiosa para cargar tu aplicación así como monetizarla. Veremos a fondo esto mañana. ¡Nos vemos!

Categories: Windows 8 Tags: ,

31 Días de Windows 8 | Día 1: La aplicación en blanco

November 15th, 2012 No comments

Este artículo es una traducción de “Día 1: La aplicación en blanco” de Jeff Blankenburg. Puedes encontrar aquí la versión original en inglés.

En el primer artículo de esta serie, pensamos que era importante cubrir las bases de una plantilla de tipo Windows Store Blank App para Visual Studio 2012. Cubriremos cada uno de los archivos y la razón por la que es importante así como muchas de las configuraciones que podrían estar ocultas en cada una. Esto debería darte una base sólida para el resto de la serie donde estaremos utilizando cada uno de estos archivos bastante.

Hay muchas otras plantillas de proyectos en Visual Studio 2012 pero somos de la opinión de que esas son excelentes plantillas de referencia en lugar de puntos de inicio para una aplicación real. Estas plantillas fueron hechas con un tipo específico de aplicación en mente y es complicado que tu idea encaje en esta arquitectura perfectamente. Casi siempre recomendamos iniciar con una plantilla en blanco cuando estás comenzando una aplicación real.

Aquí esta una vista del Explorador de Soluciones para una aplicación en blanco en una solución XAML.

image

Las imágenes

Comencemos con las sencillas, las imágenes en el folder “Assets”. Hay cuatro imágenes dentro de cada nuevo proyecto y cada una de ellas sirve a un propósito específico. Hemos creado cuatro versiones de esas imágenes (así como una adicional) de modo que es muy obvio de saber que imagen es cual cuando corras tu aplicación. Nosotros recomendamos ampliamente descargar estas imágenes y reemplazar las que se encuentran por defecto. Puedes descargar las 5 desde aquí. Una vez que hayas reemplazado las imágenes pre establecidas, corre tu proyecto para ver estas nuevas imágenes en sus ubicaciones como se describe abajo.

Logo.png

Logo

Esta es quizá la imagen más común que tu aplicación utilizará. Es una imagen pre establecida para el mosaico de tu aplicación en la pantalla de inicio del usuario. Es de 150 x 150 píxeles en tamaño.

SmallLogo.png

SmallLogo

Esta imagen es usada cuando una lista de aplicaciones se muestra. Por ejemplo, cuando buscas por una aplicación en Windows 8 o en tu menú de Compartir. La imagen pequeña es de 30 x 30 píxeles. Con ese tamaño de imagen querrás asegurarte de que ti ícono realmente representa algo familiar para tu usuario. Yo recomiendo altamente solo un logo o cualquier imagen obvia.

SplashScreen.png

splashscreen

Esta es la imagen principal que carga cuando tu aplicación es iniciada. Hay algunos buenos trucos que puedes hacer con esto y los cubriremos más adelante en la serie. Por ahora, recuerda que esta imagen será siempre de 620 x 300 píxeles y estará vertical y horizontalmente centrada en la pantalla de tu usuario, sin importar el tamaño.

StoreLogo.png

StoreLogo

Para ahorrar espacio en la tienda, tenemos un ícono mas pequeño a mostrar. Esta imagen es de 50 x 50 píxeles pero podrían ser los 2500 píxeles mas importantes en tu aplicación entera. Este es el ícono que los usuarios verán cuando se estén decidiendo acerca de que nuevas aplicaciones agregar a su dispositivo. Un ícono pobre indica una aplicación pobre para la mayoría de los usuario. Invierte un poco de tiempo en esta imagen.

WideLogo.png

WideLogo

Este es un ícono adicional que yo incluí en mi proyecto inicial. Necesitarás agregarlo en tu proyecto al dar un clic derecho en el folder Assets y escoger Agregar elemento existente. Esta imagen es de 310 x 150 píxeles y es usada para permitir que tu aplicación tenga un mosaico más amplio que únicamente un mosaico mas grande que el del tamaño predefinido de Logo.png

AssemblyInfo.cs

Este archivo contiene toda la, espera un poco, información de ensamblados para tu aplicación. Cosas como el número de las versiones, títulos, descripciones, etc. Pero recuerda… estos son los valores para tu ensamblado. Todos los nombres oficiales que son usados públicamente para tu aplicación en la tienda se encuentran en el App Manifest, nuestro siguiente archivo.

Package.appmanifest

Este archivo contiene toda la configuración, ajustes y declaraciones para tu aplicación. Es donde irás para casi cada cosa que esté relacionada a tu aplicación corriendo en una máquina con Windows 8. Por ejemplo, es aquí donde tu defines que el contrato de búsqueda sea habilitado o que ícono usar en cada situación. También define los colores por defecto del fondo, orientaciones y capacidades específicas que tu aplicación requerirá como el acceso a ubicación.

StandardStyles.xaml

Esas 1830 líneas amontonadas no son nada mas que una pila gigante de estilos predefinidos en XAML para que puedas utilizar. Estilos para cajas de texto, botones de radio, íconos de la barra de aplicación y mas. Realmente te recomiendo familiarizarte con estos estilos pero también es importante que recuerdes que cualquiera de estos estilos puede ser cambiado para encajar en tus necesidades. ¿No quieres un borde en todos tus botones? ¡Retíralo!

Quizá también consideres tus propios estilos para este archivo, solo recuerda que estos estilos estarán disponibles para cada página de tu aplicación gracias a nuestro siguiente archivo: App.xaml.

App.xaml

Este archivo es donde todo comienza. Es el primer archivo en ser cargado cuando tu aplicación inicia y contiene todos los recursos y ajustes de tu aplicación. Por defecto, este archivo solo contiene una línea valiosa de marcado.

 
<resourcedictionary Source="Common/StandardStyles.xaml"/>

Esto carga nuestro archivo de StandarStyles.xaml como un diccionario de recursos, marcando aquellos estilos disponibles en cada página de nuestra aplicación. La magia real de App.xaml se encuentra en su archivo de código C#: App.xaml.cs. Démosle un vistazo al que sigue.

App.xaml.cs

Este archivo, tal como lo hizo en Windows Phone, es donde la acción comienza. Es aquí donde se encuentran todos los métodos de inicio de tu aplicación como OnLaunched(), OnSuspending() y más. También es quí el lugar donde la página de inicio de tu aplicación será referenciada. Verás unas cuantas líneas en el método OnLaunched() que se verán como lo siguiente.

if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
{
throw new Exception("Failed to create initial page");
}

El parámetro MainPage se refiere a nuestro siguiente archivo, MainPage.xaml.

MainPage.xaml

Este archivo es la “página de inicio” por defecto de tu aplicación. Es la primera que el usuario verá después de que la pantalla de carga se haya retirado. En tu proyecto básicamente se encontrará vacía salvo por un control de tipo Grid con un estilo aplicado. Vas a querer agregar mas a esta página casi inmediatamente y hay muchos controles geniales para utilizar. Te recomiendo ver los controles de GridView o FlipView para principiantes, pero utiliza lo que tenga más sentido para tu aplicación.

MainPage.xaml.cs

De neuvo, así como MainPage.xaml, este archivo estará prácticamente vacío. Tenemos un método constructor para la página así como un manejador de eventos para el método OnNavigatedTo(). En Windows Phone, este estaba siempre disponible para su uso (y era altamente recomendado), pero ahora esta ahí por defecto significando que muchos desarrolladores comenzarán a utilizarlo en lugar del método constructor de la página.

Dia1_TemporaryKey.pfx

Cada aplicación para la tienda de Windows esta firmada por un certificado. Cuando tu creas un proyecto por primera vez en Visual Studio este creará un nuevo certificado de prueba automáticamente. En nuestro cado este certificado de prueba es llamado Dia1_TemporaryKey.pfx donde Dia_1 es nuestro proyecto. De nuevo puedes encontrar este conjunto en el archivo package.appxmanifest debajo de la tabla Packaging. Puedes incluso crear nuevos certificados de ser necesario.

Una vez que estés listo para ingresar a la tienda, necesitarás asociar tu aplicación con la cuenta de desarrollador de la tienda Microsoft. Puedes hacer esto yendo a Proyectos, Tienda, Asociar App con la tienda.

image_thumb1

Puedes encontrar mas información acerca de firmar el paquete de una aplicación aquí.

Conclusión

Así que ¡Eso es todo! Estamos solo empezando en esta serie, pero ahora ya tienes un entendimiento más sólido de cada uno de los archivos de una plantilla en blanco para XAML. En el caso de que no hayas instalado aún Visual Studio 2012, pero aún quieras dar una revisada a los archivos de código para este tipo de proyecto puedes descargarlo aquí.

downloadXAML

Mañana, vamos a enfocarnos en la orientación y snapping, dos aspectos importantes de tu aplicación que comúnmente son omitidos. Si aún no descargas las herramientas gratuitas para construir aplicaciones para WIndows 8, puedes hacerlo desde el enlace de abajo. ¡Nos vemos mañana!

downloadTheTools

Categories: Windows 8 Tags: ,

Mapa de la República Mexicana en XAML (nuevamente)

November 30th, 2010 No comments

Hace más de 2 años publiqué un Mapa de México en XAML, para que lo pudieran utilizar en sus aplicaciones de Silverlight (versión 2 beta en aquel entonces si no mal recuerdo…).  No obstante el hospedaje en donde estaba el archivo sufrió diversas modificaciones y ajustes a lo largo de todo este tiempo y el vínculo quedó roto.

image

Aquí se los vuelvo a poner para que lo utilicen en sus aplicativos, espero que les sirva!  Por favor comenten aquí si les sirve y para qué lo están utilizando!

El vínculo de descarga es:

http://ligasilverlight.com/codigo/Mexico.rar

Salu2!

Categories: General Tags: , , ,

Enlace a datos, almacenaje local, MVVM y MEF

April 4th, 2010 2 comments

En las últimas semanas he agregado algunos artículos nuevos.

La serie de Tim Heuer introduce el desarrollo de aplicaciones en Silverlight y parece ser muy popular. Ahora está disponible la cuarta parte que cubre uno de los aspectos más poderosos de Silverlight: enlace a datos (o databinding en inglés). Si bien el mecanismo en sí ha existido por largo tiempo en .NET, tanto en WPF como en Silverlight toma un papel mucho más prominente en el diseño de la aplicación. Se puede decir que entender bien el modelo de enlace a datos es fundamental en Silverlight. Luego, hacia el final del artículo, Tim cubre un poco sobre el uso de almacenaje de datos en el cliente. El almacenaje local permite guardar preferencias y otra información relevante de manera fácil y segura.

Un tema más avanzado es el diseño de aplicaciones usando el patrón MVVM. Aunque todavía genera gran controversia en la comunidad, especialmente con respecto a qué exactamente es la parte VM (ViewModel o modelo de vista), no hay duda de que es digno de ponerle atención. Al cabo es un patrón y no una receta, por lo que se presta a que cada desarrollador lo interprete a su manera. Con todo y todo, comienzan ya a surgir programas que han aplicado MVVM exitosamente en su diseño. En la segunda parte de su serie, Shawn Wildermuth sugiere cómo usar MEF como herramienta de implementación del patrón MVVM. Shawn tiende a ser muy práctico, dando cuenta no sólo del concepto en general, sino que también narrando las dificultades que ha encontrado y sus posibles soluciones.

Es todo por ahora. Sigo mientras tanto, trabajando en otros artículos. Sus sugerencias y preguntas son siempre bienvenidas.

David

Tip: Arreglando tu XAML

September 4th, 2009 1 comment

Una de las cosas que más me frustraba de programar en Silverlight era lidiar con el XAML. Y no me refiero a escribirlo, sino ordenarlo. Un tag con muchas propiedades puede convertirse en algo muy feo y difícil de analizar cuando estas buscando errores o una propiedad en particular.

Leyendo o viendo un video de Jesse Liberty (lo siento, no recuerdo donde fué) descubrí una opción fantástica dentro de Visual Studio. Para activarla pueden entrar a Tools –> Options (Lo siento, solo tengo el VS en inglés).

Una vez dentro bajan por las siguientes categorías: Text Editor –> XAML –> Formatting –> Spacing y seleccionan la opción Position each attribute on a separate line:

image

Además, pueden eligir cuando quieren que el auto-formato se active:

image

Para XAML existente pueden usar la opción de copiar y pegar todo el código y el IDE se encargará de darle el formato deseado, o pueden usar la herramienta de formato incluída en la barra HTML Source Editing:

image

De esta forma podemos cambiar algo como esto:

image

A algo como esto:

image

¿Más leible no creen?

Espero que les sea de utilidad.

Categories: General Tags: , ,

Creando contenido dinámico en PHP para Silverlight

August 12th, 2009 1 comment

Introducción

Como mencionábamos en el artículo anterior, Silverlight puede ser hospedado en prácticamente cualquier tecnología Web del lado del Servidor.  Asimismo podemos utilizar las características de la tecnología que estemos utilizando para poder crear Xaml de manera dinámica y enviar dicho contenido a la aplicación Silverlight ya sea a través de parámetros de inicialización (parámetro InitParams en <object>) o a través de un endpoint que podamos descargar por medio de un objeto de tipo WebClient.  Es este último caso el que usaremos en este artículo para crear contenido dinámico con PHP.

Creación del proyecto

Siguiendo los mismos pasos que usamos en el artículo anterior para la creación de un Sitio Web en IIS y una aplicación Silverlight, crearemos un nuevo proyecto de tipo Silverlight Application en Visual Studio .NET con el nombre PHPDynamicXaml.  Inmediatamente después de haber creado el proyecto borraremos los archivos Default.aspx y PHPDynamixXamlTestPage.aspx y sus archivos relacionados, dejando únicamente el archivo .html.

Agreguemos ahora un archivo llamado Content.php usando la plantilla de Archivo de Texto disponible al seleccionar la opción “Agregar nuevo elemento” en el menú contextual del proyecto.  La siguiente figura muestra la ventana de Solution Explorer y la Solución actual:

Será en el archivo Content.php en donde escribiremos el código necesario para la creación dinámica de contenido Xaml.  En nuestro ejemplo el contenido será una serie de rectángulos, el cual su número será definido por medio de un parámetro en el Querystring llamado r.  El siguiente fragmento ejemplifica el código de PHP necesario para la construcción dinámica de contenido en Xaml:


Es importante resaltar en especial la siguiente línea:

header(‘Content-Type: text/xaml’);

la cual establece que el tipo de contenido que regresará la página .php será de tipo Xaml (también funciona con el content type text/xml ya que Xaml no es más que Xml).  Lo anterior es de suma de importancia ya que estamos redefiniendo el comportamiento predeterminado que tiene PHP de regresar HTML.

Ahora bien, como podrán darse cuenta el código obtiene el número de rectángulos a crear por medio del parámetro r del Querystring.  Lo que hacemos es simplemente hacer un bucle for para la creación dinámica del Xaml que represente el número buscado de rectángulos.  Recuerden que cuando generamos Xaml dinámico es necesario incluir el xmlns por default en el contenedor raíz, si es que interpretaremos este código Xaml utilizando XamlReader.Load().

Lo que resta será escribir el código necesario en nuestra aplicación Silverlight para ejecutar la página php y obtener el resultado de su ejecución (lo cual será efectivamente contenido Xaml).  El siguiente código muestra el manejador del evento Loaded del UserControl MainPage:


La propiedad HtmlPage.Document.QueryString (parte del Puente HTML) permite leer el parámetro r que puede establecer el usuario en la página .html y que a su vez será utilizado para la invocación de la página Content.php.  El resto del código se encarga de obtener el resultado de la descarga del endpoint (Content.php) e interpretar el resultado por medio del método XamlReader.Load().

La siguiente figura muestra el resultado de ejecutar la siguiente página:

http://localhost:9050/PHPDynamicXamlTestPage.html?r=12

Lo anterior demuestra que PHP, además de permitirnos hospedar las aplicaciones Silverlight, lo podemos usar para la creación dinámica de contenido Xaml.

Categories: General Tags: , ,