Rumo ao Desenvolvimento Mobile – Trabalhando com páginas

Desta vez vamos criar uma aplicação que trabalha com páginas, passagem e recebimento de parâmetros, que são valores passados de uma página a outra ou de uma função para outra e serve como forma de validação, apresentação de mensagens dentre outros. Então vamos criar uma tela com usuário e senha, onde usaremos usuário e senha pré-definido, pois ainda não vimos sobre o armazenamento de dados. Muitos vão se perguntar, qual a utilidade de se ter usar usuário e senha numa aplicação para dispositivos móveis? Pois bem, creio que muitos já emprestaram o celular para amigos, sobrinhos, irmãos que vão tentar descobrir o que faz cada aplicação e você tem uma aplicação de controle financeiro, então essa pessoa não vai conseguir acessar as suas contas pessoais.

Vamos criar um novo projeto, usaremos o mesmo template usado anteriormente, Visual C#, opção Silverlight for Windows Phone, Windows Phone Aplication. Podemos nomear o projeto de “paginacao”, depois escolheremos a opção Windows Phone OS 7.1, OK e pronto está criado o projeto.

Daremos o mesmo nome do projeto ao título da aplicação, alterando o texto “MY APPLICATION” para “PAGINAÇÃO”, vamos alterar também o tamanho da fonte para “30” (FontSize=”30”). Vamos alterar a descrição “page name” para “Página de acesso:” e o tamanho da fonte para “50” (FontSize=”50”). Caso tenham alguma dúvida em como fazer esta alteração ou as próximas veja o artigo anterior: http://www.devmedia.com.br/desenvolvimento-mobile-iniciando-uma-pequena-aplicacao/24439

Agora vamos inserir cinco objetos, dois TextBlock para as etiquetas de usuário e senha, um TextBox para usuário, um PasswordBox para entrada da senha e um botão para acessar a página de boas vindas. Alteraremos o tamanho da fonte dos TextBlock para “30” (FontSize="30"), mudaremos o atributo da propriedade Text do primeiro TextBlock para “Usuário:” (Text="Usuário:") , definiremos a margem para “10,30,0,0” (Margin="10,30,0,0"); vamos alterar o atributo da propriedade Text do segundo TextBlock para “Senha:” (Text="Senha:") e definiremos a margem para “10,172,0,0” (Margin="10,172,0,0"), na sequência vamos alterar o TextBox, mudaremos o atributo da propriedade Height para “72” (Height="72"), o tamanho da fonte será “25” (FontSize="25"), a margem será “10,72,0,0”, a propriedade Text será ficará vazia “” (Text=""); vamos então alterar as propriedades do botão, começando pela propriedade Content, que será alterada para “Acessar” (Content="Acessar"), o tamanho será “72” (Height="72"), a margem será “110,288,0,0” (Margin="110,288,0,0") e o nome do botão mudaremos para “Acesso” (Name="Acesso"). Vejam o código abaixo.

Listagem 1: Código da estrutura da página

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="PAGINAÇÃO" FontSize="30"  Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Center" />
<TextBlock x:Name="PageTitle" Text="Página de acesso:" FontSize="50" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Margin="12,0" Grid.Row="1">
<TextBlock HorizontalAlignment="Left" FontSize="30" Margin="10,30,0,0" Name="tblUsuario" Text="Usuário:" VerticalAlignment="Top" />
<TextBlock HorizontalAlignment="Left" FontSize="30" Margin="10,172,0,0" Name="tblSenha" Text="Senha:" VerticalAlignment="Top" />
<TextBox Height="72" HorizontalAlignment="Left" FontSize="25" Margin="10,72,0,0" Name="tbxUsuario" Text="" VerticalAlignment="Top" Width="374" />
<PasswordBox Height="72" HorizontalAlignment="Left" Margin="10,210,0,0" Name="psbSenha" VerticalAlignment="Top" Width="374" />
<Button Content="Acessar" Height="72" HorizontalAlignment="Left" Margin="110,288,0,0" Name="Acesso" VerticalAlignment="Top" Width="160" />
</Grid>

Criaremos uma página que servirá para exibir mensagens quando o usuário e a senha estiverem incorretos ou vazios. Para cria uma nova página acessar o Solution Explorer do lado direito do template, clicar com o botão direito do mouse em paginacao, selecionar a opção ADD, selecionar a opção New Item ou pressionar simultaneamente “Ctrl+Shift+A”, aparecerá uma tela onde dever ser selecionada a opção “Windows Phone Portrait Page”; no rodapé da página, mudar o nome da página para “PagMenssagem” e clicar em “Add” (Figura 1). A página de mensagem já está criada, como podem observar no Solution Explorer. Vamos criar outra página de boas vindas, para quando o usuário digitar os dados corretamente. Seguindo os passos de criação de página visto anteriormente, criar uma página com o nome “BoasVindas”.

Figura 1: Tela de criação de páginas.

As páginas são criadas, neste caso, com o mesmo padrão da tela inicial, com o título “MY APPLICATION” e nome da página “page name”, no entanto não vamos alterar suas descrições, pois, estas serão alteradas via programação. Vamos criar o código que vai chamar uma das páginas conforme for digitado o usuário e senha, para isso dê um duplo clique no botão acessar, vai aparecer o código do botão e será criado automaticamente um método click do botão acessar, com o nome Acesso_Click, vamos colocar algumas validações, para não deixar que o usuário acesse a página de boas vindas com os campos vazios ou incorretos e para isso chamaremos a página de mensagem, passando as mensagens por parâmetro, utilizando a classe NavigationService do Visual Studio; caso os dados estejam corretos vamos chamar a página de boas vindas, passando também uma mensagem por parâmetro. Então na classe NavigationService vou passar a Uri da página, a sintaxe é “nome da página”, entre aspas mesmo e se houver parâmetros, estes vêm após um sinal de interrogação “?”que deverá ser colocado após o nome da página com o nome do parâmetro a ser passado, mais sinal de igual “=” e o parâmetro propriamente dito que no nosso caso é uma mensagem, veja o código abaixo desta implementação.

Listagem 2: Evento onClick do botão “Acessar”

private void Acesso_Click(object sender, RoutedEventArgs e)
{
if (this.tbxUsuario.Text == "" || this.psbSenha.Password == "")
{
NavigationService.Navigate(new Uri("/PagMensagem.xaml?msg=Erro: Usuário e senha&msg2=devem ser preenchidos", UriKind.RelativeOrAbsolute));

}

if (this.tbxUsuario.Text == "joao" && this.psbSenha.Password == "xyz43")
{
NavigationService.Navigate(new Uri("/BoasVindas.xaml?msg=Olá João&msg2=Seja Bem Vindo", UriKind.RelativeOrAbsolute));
}
else
{
NavigationService.Navigate(new Uri("/PagMensagem.xaml?msg=Erro: Usuário e senha&msg2=incorretos", UriKind.RelativeOrAbsolute));
}
           
}

O nosso botão de acesso está codificado, agora vamos codificar as páginas PagMensagem e BoasVindas para receberem os parâmetros e apresentarem as devidas mensagens ao usuário. Acesse o Solution Explorer, encontre página BoasVindas.xaml, clique com o botão direito do mouse e no menu selecionem a opção “View Code”, vai aparecer a tela com o código da página, que, vem com o método de inicialização explícito por padrão. Para fazer com que a página receba os parâmetros que serão passados, devemos sobrescrever o método OnNavigatedTo, criar duas variáveis que receberão os parâmetros, através da classe NavigationContext.QueryString.TryGetValue, que tem como entrada o nome do parâmetro recebido e como saída (out), a variável que receberá o conteúdo do parâmetro, esta classe retonar falso caso o parâmetro não seja passado, por isso foi colocado uma condição de apresentação da mensagem; satisfeita a condição vamos atribuir o valor das variáveis aos respectivos textblock´s e alteraremos também o tamanho da fonte do textblock “PageTitle”. Então vejam o código abaixo, que será colocado abaixo do método public BoasVindas().

Listagem 3: Evento onNavigatedTo da página

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
string mensagem1, mensagem2;
if (NavigationContext.QueryString.TryGetValue("msg", out mensagem1) && NavigationContext.QueryString.TryGetValue("msg2", out mensagem2))
{
ApplicationTitle.Text = mensagem1;
PageTitle.FontSize = 30;
PageTitle.Text = mensagem2;
}
}

A nossa aplicação está praticamente terminada, para alterar o código da página de mensagens (PagMensagem), façam o mesmo procedimento feito para a página de boas vindas e podem copiar o código acima e depois é só executar e testar a aplicação.

É isso aí, agora usem a imaginação e façam alterações e melhorias nesta aplicação para que tenham um melhor aprendizado e até o próximo artigo.