Son varias las publicaciones realizadas sobre desarrollo de aplicaciones con MS Windows 7 Multitouch, y para no perder las buenas costumbres en esta ocasión se va a descifrar el código que describe las funcionalidades del proyecto “SonidosAnimales” disponible en el canal Codeplex y cuya referencia ya se hizo en la entrada denominada “Aplicaciones ejemplo para Windows 7 Multitouch: SonidosAnimales”
Esta aplicación ha sido desarrollada esencialmente para ser ejecutada en dispositivos móviles con sistema operativo Windows Phone 7, sin embargo es soportada perfectamente por un Tablet MS Windows 7 Multitouch.
El público hacia el cual fue orientado esta aplicación, fue principalmente a niños que estuvieran familiarizándose con las figuras los animales, sus nombres y enlazándolos con los sonidos que emiten cada uno de ellos, de forma que se les facilitara a los padres la tarea didáctica bajo un concepto de interacción con las figuras a través del lienzo de juego.
Para seguir en la línea de explicación de código, se procederá a explicar en tres entradas el funcionamiento en general de dicha aplicación, de forma que os hagáis con conceptos claros por si os encamináis en la vía del desarrollo para este tipo de dispositivos.
Lo primero que se va a ver es el árbol del proyecto en general:
figura1
Carpetas de la aplicación:
· Config: Aquí se guarda el fichero XML llamado “configuración.xml” que es donde se guarda las rutas a las demás imágenes y sonidos.
· Images: Aquí se guardan físicamente las imágenes que se mostraran en la aplicación.
· Sonido: De igual forma aquí se guardan físicamente los archivos de audio en .mp3 que son relacionados con los animales con los que se está interactuando.
Como ya se ha explicado con anterioridad “App.xaml” es la clase de WPF (Windows Presentation Fundation) con la que se inicia la ejecución de la aplicación, como lo haría la clase “Program.cs” en una aplicación de escritorio en “C#.Net”.
Después de la clase “App.xaml”, la clase principal de la aplicación es “MainWindow.xaml” donde se hará llamado a las demás clases para realizar las acciones que se consideren oportunas.
El código XAML, que es similar al código HTML de un proyecto “Asp.Net”, de la clase “MainWindow” es el siguiente y se intentará describir con detalle para que conozcáis de que estructuras y objetos está compuesto.
A diferencia de la serie anterior, “Análisis de código de aplicaciones ejemplo MS Windows 7 Multitouch: Puzzle Animales”, en este proyecto se introduce un concepto nuevo que es el “DockPanel”.Este control define un área en la que se pueden organizar horizontalmente o verticalmente los elementos secundarios, uno respecto al otro.
Después de dicho esto, se procederá a visualizar el código XAML, y se harán comentarios en dicho código para describirlo mejor.
<DockPanel>
<!—En DockPanel.Resources se establece el diccionario de recursos definido localmente-->
<DockPanel.Resources>
<my:HalfValueConverter x:Key="HalfValue" />
<my:HalfValueConverterMasAlto x:Key="HalfValueConverterMasAlto"/>
</DockPanel.Resources>
<!--Lienzo denominado padre, que es el lienzo principal donde van a ir situados los demás lienzos-->
<Canvas Name="Padre">
<!--El botón denominado image1 es el botón de jugar, con el cual se mostrara
el lienzo de juego y se hará invisible los botones “botonSalir” y
“BotonRepetir” -->
<Image MouseLeftButtonDown="button1_Click" Name="image1" Stretch= "Fill"
Source="/JuegoSonidosAnimales;component/Images/BotonJugar2.png"
ForceCursor="True" VerticalAlignment="Center"
HorizontalAlignment="Center"/>
<!—el siguiente botón sirve para salir definitivamente de la aplicación-->
<Image Name="botonSalir"
Source="/JuegoSonidosAnimales;component/Images/botonSalirNormal.png"
MouseLeftButtonDown="botonSalir_MouseLeftButtonDown"/>
<!—A continuación el próximo botón, que es genérico para toda el lienzo padre,
a pesar de que se coloquen lienzos encima, sirve para repetir el juego, y
que cada vez aparezcan nuevos animales en la interfaz-->
<Image Name="BotonRepetir" MouseLeftButtonDown="BotonRepetir_MouseLeftButtonDown"
Source="/JuegoSonidosAnimales;component/Images/botonrepetirencendido.png"
VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,12,0,0">
<Canvas.Left>
<!— MultiBinding describe una colección de orígenes de datos asociados
a una sola propiedad de destino de enlace. -->
<MultiBinding Converter="{StaticResource HalfValueConverterMasAlto}">
<Binding ElementName="Padre" Path="ActualWidth" />
<Binding ElementName="BotonRepetir" Path="ActualWidth" />
</MultiBinding>
</Canvas.Left>
</Image>
<!--Primer lienzo que puede ser visible o no. De imagen fondo de modo
ilustrativo tiene puesto la foto “vectoranimalssimpaticos.png -->
<Canvas Name="Inicio" >
<Canvas.Background>
<ImageBrush
ImageSource="/JuegoSonidosAnimales;component/Images/vectoranimal
ssimpaticos.png" />
</Canvas.Background>
</Canvas>
<!-- Segundo lienzo que al igual que el otro puede estar oculto-->
<Canvas Name="juego">
<Canvas.Left>
<MultiBinding Converter="{StaticResource HalfValue}">
<Binding ElementName="Padre" Path="ActualWidth" />
<Binding ElementName="juego" Path="ActualWidth" />
</MultiBinding>
</Canvas.Left>
<Canvas.Top>
<MultiBinding Converter="{StaticResource HalfValue}">
<Binding ElementName="Padre" Path="ActualHeight" />
<Binding ElementName="juego" Path="ActualHeight" />
</MultiBinding>
</Canvas.Top>
<Canvas.Background>
<ImageBrush ImageSource="/JuegoSonidosAnimales;component/Images/vectoranimalssimpaticos.png" />
</Canvas.Background>
</Canvas>
<!—Botón que tiene la función similar a la anterior de nombre parecido pero la
gran diferencia es que este botón cierra la ejecución de la aplicación-->
<Image Name="botonSalirjuego" Visibility="Hidden"
Source="/JuegoSonidosAnimales;component/Images/botonSalirNormal.png"
MouseLeftButtonDown="botonSalirjuego_MouseLeftButtonDown"
VerticalAlignment="Top" HorizontalAlignment="Right" />
</Canvas>
</DockPanel>
Como se puede ver, se está haciendo uso del recurso “HalfValueConverter” y “HalfValueConverterMasAlto”, por lo cual dichas clases deberían ser definidas en algún lugar de la aplicación.La localización actual, de estas dos clases, es dentro del fichero “MainWindow.xaml.cs” compartiendo el espacio de nombres con la clase “MainWindow”.
La clase “HalfValueConverter” y “HalfValueConverterMasAlto” devolverá el convertidor que se va a utilizar para convertir los valores de origen en el valor de destino o viceversa, pero en esta ocasión se va a dejar sin implementar el método “ConvertBack”, ya que no se hará uso de él.
Véase el código de ambas clases para ver lo que hace internamente estas clases.
public class HalfValueConverter : IMultiValueConverter
{
// El método “Convert”, como se podría imaginar, convierte los valores de origen en
// un valor del destino de enlace. El motor del enlace de datos llama a este método
// cuando se propagan los valores de los enlaces de origen al destino de enlace.
public object Convert(object[] values,Type targetType,
object parameter,CultureInfo culture){
// Si el array “values” es nulo o solo tiene un elemento. Se lanzará una
// excepción.
if (values == null || values.Length < 2)
{
throw new ArgumentException(
"HalfValueConverter expects 2 double values to be passed" +
" in this order -> totalWidth, width",
"values");
}
double totalWidth = (double)values[0];
double width = (double)values[1] + totalWidth / 3;
// Si el array “values” contiene 3 elementos en la colección se entra a la
// sentencia de control if, y se ejecuta el return, haciendo el resto de
// código inalcanzable.
if (values.Length == 3)
return (object)((totalWidth / 6) * System.Convert.ToDouble(values[2]));
// De similar forma, si el ancho total no es suficiente, se retornara un cero.
if ((totalWidth - (width + 250)) < 0)
return (object)0;
// En caso que ninguna de las condiciones anteriores se cumpla, el método
// “Convert” devolverá el resultado de la siguiente operación matemática para
// determinar un ancho.
return (object)(((totalWidth - (width + 250)) / 2));
}
// Esta función no ha sido implementada porque no será usada en el proyecto,
// pero su funcionalidad es similar a la anterior, ya que convierte los
// valores de destino en un valor del origen de enlace.
public object[] ConvertBack(object value,Type[] targetTypes,
object parameter,CultureInfo culture){
throw new NotImplementedException();
}
}
La clase “HalfValueConverterMasAlto” es prácticamente igual a la clase “HalfValueConvert”, con la diferencia que el valor devuelto es siempre más alto que la función anterior .Dicha diferencia radica en el siguiente trozo de código:
double totalWidth = (double)values[0];
double width = (double)values[1];
if (values.Length == 3)
return (object)((totalWidth / 6) * System.Convert.ToDouble(values[2]));
return (object)(((totalWidth - (width + 40)) / 2));
En la presente entrada se ha dado una visión general del proyecto “SonidosAnimales” como vía introductoria a todo lo que lleva consigo la aplicación. En el siguiente post de la serie se detallarán las funciones y variables que se encuentran dentro de la clase “MainWindow”, destacándose la forma de agregar y eliminar los controles de usuario en tiempo de ejecución.
Para acabar, recuerda que si quieres aprender mucho más sobre los secretos de los sistemas Microsoft Windows, te recomendamos leer el libro de Sergio de los Santos "Máxima Seguridad en Windows: Secretos Técnicos" , o siempre puedes suscribirte al Canal RSS de Windows Técnico para estar al día de las novedades e información técnica de interés.
------------------------------------------------------------------------------------------------------------------------
Desarrollo de aplicaciones MS Windows 7 Multitouch: SonidosAnimales I
Desarrollo de aplicaciones MS Windows 7 Multitouch: SonidosAnimales II
Desarrollo de aplicaciones MS Windows 7 Multitouch: SonidosAnimales III
------------------------------------------------------------------------------------------------------------------------
Enviado
ago 14 2011, 02:06
por
Jhonattan Fiestas