Christian Amado

Christian Amado

Ingeniero de software, desarrollador
Diseñado adaptado de Todd Motto

UWP: Crear formularios de Login y Registro
Feb 28, 2017
lectura de 1 minutos
Editar entrada

Con UWP estamos hablando de un proyecto que puede ejecutarse en múltiples plataformas, por lo tanto, siempre es conveniente tener preparados estos formularios.

En este ejemplo, me baso en lo referente a los formularios y la navegación entre ellos. En este caso no se va a conectar a ninguna base de datos. Haremos hard coding de los accesos a modo de captar la idea.

Registro

Creamos la página de registro a la aplicación (normalmente esto llama a un servicio como Windows Live, Gmail u otro para las autenticaciones).

La página Registro.xaml quedaría de la siguiente manera:

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock Grid.Column="0" Grid.Row="0" Margin="5" Text="Usuario: " />
        <TextBlock Grid.Column="0" Grid.Row="1" Margin="5" Text="Email: " />
        <TextBlock Grid.Column="0" Grid.Row="2" Margin="5" Text="Contraseña: " />
        <TextBlock Grid.Column="0" Grid.Row="3" Margin="5" Text="Confirmación: " />

        <TextBox Grid.Column="1" Grid.Row="0" Margin="5" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="5" />
        <TextBox Grid.Column="1" Grid.Row="2" Margin="5" />
        <TextBox Grid.Column="1" Grid.Row="3" Margin="5" />

        <StackPanel Grid.Column="1" Grid.Row="4" HorizontalAlignment="Stretch" Orientation="Horizontal">
            <Button Margin="5" Content="Registrar" Click="Registrar_Click" />
            <Button Margin="5" Content="Cancelar" Click="Cancelar_Click" />
        </StackPanel>
    </Grid>
</Page>

Inicio de sesión

Creamos la página de Inicio de Sesión de la aplicación (normalmente esto también llama a un servicio como Windows Live, Gmail u otro para las autenticaciones).

La página Login.xaml quedaría de la siguiente manera:

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock Grid.Column="0" Grid.Row="0" Margin="5" Text="Usuario: " />
        <TextBlock Grid.Column="0" Grid.Row="1" Margin="5" Text="Contraseña: " />

        <TextBox Name="txtUsuario" Grid.Column="1" Grid.Row="0" Margin="5" />
        <TextBox Name="txtContrasena" Grid.Column="1" Grid.Row="1" Margin="5" />

        <StackPanel Grid.Column="1" Grid.Row="2" HorizontalAlignment="Stretch" Orientation="Horizontal">
            <Button Margin="5" Content="Iniciar" Click="Login_Click" />
        </StackPanel>
    </Grid>
</Page>

Página inicial

Esta página se puede visualizar una vez que el usuario ha iniciado sesión exitosamente.

La página MainPage.xaml quedaría de la siguiente manera:

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Name="txtIngreso" Margin="10" FontSize="20" />
    </Grid>
</Page>

Para que la navegación entre páginas funcione debemos incluir esta pequeña línea de código en nuestras páginas creadas:

this.Frame.Navigate(typeof(MainPage));

De esta manera he mostrado una forma de navegar entre páginas en un proyecto UWP, faltaría enlazarlo a un servicio de autenticación para que nuestros formularios se hagan efectivos.

Feb 23, 2017

AX 2012: Administrar excepciones desde X++

En AX, las excepciones funcionan de igual manera que en cualquier lenguaje de programación. Lo...

Mar 2, 2017

AX 2012: Ciclo de Vida de productos

Uno de los principales problemas que escucho por aquí a la hora de realizar una...