El blog de Miguel Díaz
Siguiente
Screenshot mDrive

mDrive

Sincroniza tus documentos, fotografías y programas entre tus ordenadores, comparte tus ficheros con tus conocidos y accede documentos estés donde estés.Saber mas

RoboCAUpy

Copia eficiente de archivos, toda la potencia de robocopy con una interfaz sencilla y fácil de usar. Herramienta perfecta para migraciones de equipos y copia masiva de ficheros.Saber mas

Screenshot RoboCAUpy

Acortador de nombres

Detecta ficheros con nombres largos, acortalos de forma masiva y reduce el tamaño de la ruta a la cantidad de carácteres que quieras.
Saber mas

screenshot Acortador Nombres
screenshot mRemoto

DNSPropagationChecker

Controla la propagación DNS de cualquier dominio. Con un solo clic conocerás al instante si se ha propagado en los diferentes servidores DNS existentes.Saber mas

mRemoto

Administra remotamente equipos, controlalos gráficamente o través de la línea de comandos, envía y recibe archivos, habla con el usuario y mucho mas sin ningún tipo de configuración previa.Saber mas

Screenshot mRemoto
Anterior
Viernes 14 d junio dl 2013

windows_phone

Como vimos en la entrada anterior, generar una interfaz para Windows Phone es bastante sencillo gracias a Visual Studio, que nos crea la mayoría de código XAML y nos lo muestra de forma que podamos modificar aspectos como los margenes (atributo margin), el texto  (atributo text), etc.

En la entrada de hoy veremos cómo crear un formulario de usuario y contraseña, en el que al introducir bien los datos nos muestre un nuevo formulario o ventana y si se introducen mal dará un mensaje de error.

De esta forma aprenderemos a obtener datos de elementos del formulario (los campos de texto), a editar elementos (el mensaje de error que se muestra o no) y a lanzar nuevas ventanas (el formulario que se lanzará al introducir bien los datos).

Es importante tener en cuenta que hay que tener nociones básicas de programación para seguir este manual. Por otro lado, si no has leído aún la primera parte del curso, este es el mejor momento ya que damos una introducción al entorno de programación de Windows Phone.

Creando nuestro primer programa en Windows Phone

Lo primero que haremos para hacer nuestro formulario de inicio de sesión será añadir a nuestra interfaz los elementos necesarios, en nuestro caso un textbox dónde escribir el usuario, un passwordbox dónde se escribirá la contraseña, un botón y  un textblock que mostrará un mensaje que nosotros elijamos, podemos alinearlo a nuestro gusto de forma gráfica o mediante los atributos margin en el que se establecen los diferentes margenes establecidos por comas, HorizontalAligment donde daremos una orientación tipo left, center o right y el atributo VerticalAligement que admite “Top, Bottom o Center”.

interfaz

Además, en nuestro ejemplo usaremos el atributo “text” para que aparezca el texto por defecto “Usuario” en el textbox, de esta forma el usuario sabrá que debe introducir y de la misma forma vaciaremos el atributo Text del TextBlock, dejandolo en Text=”", de esta forma no se verá al arrancar el programa, por último debemos cambiar el texto del botón, esto se hace a través del atributo Content=”TEXTO” en lugar del atributo text, que usamos en los elementos anteriores.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <TextBlock HorizontalAlignment="Left" Margin="83,37,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" RenderTransformOrigin="0.643,-0.059"/>
   <TextBox HorizontalAlignment="Left" Height="72" Margin="68,151,0,0" TextWrapping="Wrap" Text="Usuario" VerticalAlignment="Top" Width="305"/>
   <PasswordBox HorizontalAlignment="Left" Margin="68,228,0,0" VerticalAlignment="Top" Width="305"/>
   <Button Content="Entrar" HorizontalAlignment="Left" Margin="165,326,0,0" VerticalAlignment="Top"/>
</Grid>

Por ultimo, si nos fijamos en la interfaz que nos crea por defecto, nos añade un texto de título, podemos pulsar sobre el para que nos resalte el código dónde está definido y así modificar el texto para que tenga algo mas de sentido, por ejemplo, nosotros pondremos “Nuestro primer programa” e “Inicio de sesión” en el subtitulo.

Una vez tengamos lista nuestra interfaz, es muy importante asignar un nombre a cada elemento que vayamos a llamar mediante funciones, esto se hace mediante el atributo name=”NOMBRE”, por ejemplo, al textbox le llamaremos “tbUsuario”, quedando así

<TextBox HorizontalAlignment="Left" Height="72" Margin="68,151,0,0" TextWrapping="Wrap" Text="Usuario" VerticalAlignment="Top" Width="305" Name="tbUsuario"/>

Lo mismo haremos para el TextBlock, llamandole tbMensaje, para el Passworbox llamandole pbPassword y para el botón llamándolo btEntrar.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <TextBlock HorizontalAlignment="Left" Margin="83,37,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" RenderTransformOrigin="0.643,-0.059" Name="tbMensaje"/>
   <TextBox HorizontalAlignment="Left" Height="72" Margin="68,151,0,0" TextWrapping="Wrap" Text="Usuario" VerticalAlignment="Top" Width="305" Name="tbUsuario"/>
   <PasswordBox HorizontalAlignment="Left" Margin="68,228,0,0" VerticalAlignment="Top" Width="305" Name="pbPassword"/>
   <Button Content="Entrar" HorizontalAlignment="Left" Margin="165,326,0,0" VerticalAlignment="Top" Name="btEntrar"/>
</Grid>

Muy bien, ya tenemos toda nuestra interfaz preparada para empezar a programar. Como lo que queremos es hacer que el botón verifique los campos usuario y contraseña al ser pulsado, hacemos doble clic sobre el. Esto nos llevará a la función que se ejecutará al haber pulsarlo

private void btEntrar_Click(object sender, RoutedEventArgs e)
{
}

Vale, ahora simplemente vamos a poner el código que queramos que se ejecute, en este caso comprobara si usuario es “miguel” y contraseña “12345″ y en tal caso pondrá en el TextBlock “Correcto”, si alguno de los datos falla pondrá “Incorrecto”

    private void btEntrar_Click(object sender, RoutedEventArgs e)
    {
        if (tbUsuario.Text.ToString() == "miguel" && pbPassword.Password.ToString() == "12345")
        {
            tbMensaje.Text = "Correcto";
        }
        else
        {
            tbMensaje.Text = "Incorrecto";
        }
    }

Como veis en la línea 3 nos referimos a los elementos mediante el nombre que le hemos dado, y en uno comparamos el parametro “Text” y en el otro el parámetro “password”, si estais acostumbrados a WindowsForms os habréis dado cuenta de que este es un elemento nuevo ya que antes se trataban por igual los campos de texto y los de contraseña, después y dependiendo de si se cumple la condición se establecerá un texto u otro para el elemento tbMensaje, cambiando su propiedad “text” (líneas 5 y 9).

Perfecto, pero vamos a hacerlo un poco mas bonito y vamos a llamar a una nueva ventana si el usuario es correcto, emulando a cualquier otro tipo de aplicación.

Es bastante sencillo llamar a una nueva ventana, lo primero es crearla, para ello nos vamos a la barra de Explorador de soluciones, pulsamos con el botón derecho sobre nuestro proyecto>Agregar>Nuevo elemento

En la nueva ventana podriamos seleccionar otra ventana vacía o una de las plantillas que hay, en nuestro caso y para poder reutilizar el proyecto en nuestra próxima entrega seleccionaremos “Página de Panorama de Windows Phone” si estáis acostumbrados a usar Windows Phone rápidamente veréis que tipo de ventanas son, si no, básicamente son ventanas con diferentes “pestañas” entre las que se puede cambiar deslizando el dedo a derecha o izquierda, seleccionamos el nombre que queramos (en nuestro caso Bienvenida.xaml) y pulsamos “Agregar”.

Ahora que ya tenemos una nueva página volvemos al código del botón y sustituimos la línea donde cambiaba el texto de “Correcto” por la función encargada de llamar a la nueva página (NavigationServices.Navigate)

private void btEntrar_Click(object sender, RoutedEventArgs e)
 {
    if (tbUsuario.Text.ToString() == "miguel" && pbPassword.Password.ToString() == "12345")
    {
       NavigationService.Navigate(new Uri("/Bienvenida.xaml", UriKind.Relative));
    }
    else
    {
       tbMensaje.Text = "Incorrecto";
    }
 }

Como veis la función tiene dos parámetros, el primero es un String con el archivo xaml a llamar y el segundo define si la ruta dada es una ruta relativa o absoluta. Normalmente para llamar a ventanas de nuestro propio proyecto usaremos rutas relativas.

¡Ahora solo toca ejecutar nuestro proyecto y ver que todo funciona correctamente!

Guardar cerca el proyecto por que en la próxima entrega el curso lo usaremos como base para continuar aprendiendo sobre la navegación de ventanas y los controles “panorama”.

  • Tweet

Acerca de Miguel Díaz

Informático, enamorado de la programación, diseño Web y el deporte.
Categorías: Programación. Etiquetas: , , , , .

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Blog de Miguel Díaz
Diseño Web por Miguel Díaz.