Tutorial Windows Phone #2 – Hello World

Padrão

Olá pessoal!

No último tutorial, montamos o nosso ambiente de desenvolvimento para Windows Phone, instalando o Visual Studio for Windows Phone juntamente com seus SDKs e demais ferramentas. Hoje vamos começar a conhecer essa plataforma móvel, criando um pequeno aplicativo.

Antes de começar, vamos falar um pouco sobre as duas formas de se desenvolver um aplicativo para Windows Phone. A primeira delas, é utilizando Silverlight. Pra quem nunca ouviu falar, o Silverlight é um conjunto de bibliotecas que permite a criação de aplicativos ricos em funcionalidade, de forma semelhante ao Flash. Seu uso dentro do Windows Phone é recomendado para aplicativos em geral, já que ele fornece um conjunto de componentes que agilizam a construção de interfaces. A segunda forma é utilizando XNA. O XNA é um conjuntos de bibliotecas criado pela Microsoft visando o desenvolvimento de jogos. Através do XNA, é possível criar jogos baseados em DirectX para executar não só no Windows Phone, mas também em Windows e XBox.

Neste primeiro tutorial, vamos utilizar Silverlight. Se você acompanhou a série sobre Android, vai perceber algumas semelhanças na forma como são desenvolvidas as aplicações utilizando esta ferramenta. Assim como no Android, temos uma mescla de XML + linguagem de programação imperativa. Porém, em vez de utilizar Java, aqui utilizamos C# (que por sinal tem várias semelhanças com o Java!). Recentemente foi adicionada a possibilidade de utilizar Visual Basic na programação, porém, ao meu ver, entre começar a aprender VB e C#, prefiro C# pela possibilidade de utilizar em outros projetos não relacionados ao Windows Phone. 😉

Vamos simplesmente montar um formulário com um campo e um botão. Ao tocar no botão, ele escreve alguma coisa no formulário. Simples assim.

Então, pra começar, abra o Visual Studio for Windows Phone lá no seu menu iniciar do Windows. Vá até o menu File -> New Project… e na seção Visual C# selecione Windows Phone Application. Dê o nome para o projeto de HelloWorld. Caso seja indagado pela versão do Windows Phone, selecione 7.1.

Pronto… o nosso projeto está criado. Caso alguns de vocês já tenham alguma experiência com o Visual Studio, perceberão que não mudou muita coisa por aqui.

Temos a visualização da árvore de projeto à direita da tela, juntamente com a visualização das propriedades dos objetos logo abaixo, seguido pelo editor (bastante poderoso, por sinal) e a visualização do layout da aplicação. Ali no canto esquerdo, temos também algumas paletas recolhidas (Document Outline, Data Source e Toolbox). Apesar de estar organizado assim inicialmente, é possível personalizar a seu gosto a disposição dos objetos.

Bom, primeiramente vamos abrir a paleta Toolbox e arrastar para o formulário um elemento do tipo TextBox.

O Visual Studio facilita o posicionamento do elemento através de marcas-guias e ajustes automáticos.

Agora, com o TextBox selecionado, vá até a seção de Propriedades e coloque o nome do elemento como tbHelloWorld.

Certo. Agora, vamos adicionar um elemento do tipo Button. Redimensione um pouco o TextBox para acomodar o botão e ele na mesma linha.

Edite o nome do botão para btnOk e a propriedade Content para OK.

Aproveite e modifique a propriedade Text do TextBox, retirando o seu conteúdo. Dessa forma, o formulário ficará assim:

Agora, selecione os TextBlocks “My Application” e “Page Name” e edite a propriedade Text deles a seu gosto para modificar o cabeçalho do aplicativo.

Percebam que todas essas mudanças que realizamos de forma “visual”, refletiram no arquivo XML do editor. Por exemplo, o nosso TextBox e Button…

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox Height="72" HorizontalAlignment="Left" Margin="12,6,0,0" Name="tbHelloWorld" Text="" VerticalAlignment="Top" Width="315" />
    <Button Content="OK" Height="72" HorizontalAlignment="Left" Margin="333,6,0,0" Name="btnOk" VerticalAlignment="Top" Width="117" />
</Grid>

… foram automaticamente inseridos no código. Bacana, não?

Agora, então, vamos criar alguma lógica nesse aplicativo. Dê um duplo clique sobre o btnOk e será aberto o editor de código. No momento, ele exibe o seguinte:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace HelloWorld
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void btnOk_Click(object sender, RoutedEventArgs e)
        {

        }
    }
}

Pra quem já tem alguma familiaridade com Java, temos os using que são equivalentes ao comando import que tínhamos lá. Serve pra definir as classes que utilizamos neste arquivo. Os namespaces funcionam como os pacotes. Servem para organizar códigos… isso é diretamente herdado do C++. Por fim, temos a declaração de uma classe partial, ou seja, sua implementação está dividida em vários arquivos. Isso porque o Visual Studio nos esconde o código que ele gerou, para evitar maiores problemas. Enfim, temos os métodos MainPage() – construtor – e o método btnOk_Click(). Primeiramente, vamos adicionar uma linha ao construtor para que nosso aplicativo suporte tanto a orientação paisagem quanto retrato.

// Constructor
public MainPage()
{
    InitializeComponent();
    SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;
}

Bastante explicativo o comando, não? 😀

Agora vamos fazer com que o nosso TextBox receba um texto quando o botão for tocado. Adicione a implementação do método btnOk_Click().

private void btnOk_Click(object sender, RoutedEventArgs e)
{
    tbHelloWorld.Text = "Opa, tudo bom?";
}

Nada muito complexo… aqui no C# eles fazem uso (ou pelo menos eu acho que fazem – dá licença… estou aprendendo também XD) de properties. Eles facilitam o processo de atribuição e obtenção de valores de uma classe, sem ter que utilizar os setters e getters.

Agora, é só executar o emulador, clicando no “play” lá em cima da janela ou pressionando F5.

Pra girar a visualização, é só clicar nos ícones de controle do emulador, na barra de ferramentas que aparece no canto superior direito.

Em qualquer uma das duas orientações, pressione o botão OK para exibir o texto!

Bom pessoal… ufa! Bastante coisa nesse primeiro tutorial “prático”. Aguardem os próximos posts, pois vem muita coisa bacana por aí!

Valeu!

Um comentário sobre “Tutorial Windows Phone #2 – Hello World

  1. Jackson

    Sabe me dizer porque que quando vou chamar o edit no botão ele nao vai? quando digito o nome do textbox o visual studio nao encontra… Obrigado.

Deixe uma resposta