Introduo

Graphic User Interface (GUI, Interface Grfica com o Usurio) uma expresso que designa artefatos de software criados para que os usurios tenham uma experincia de interao com o computador mais intuitiva e menos tediosa do que as interfaces de texto (tambm conhecidas como programas Console). As interfaces grficas com o usurio so baseadas no mapeamento da tela em uma matriz de pontos acessveis, imagens digitais ( widgets ou componentes) que possuem funes especficas e esto posies especficas da tela (cones, botes, barras, menus, links, janelas, etc) e um hardware que sirva de acesso de para os pontos da tela: mouse, teclado, tela touch-screen, caneta ptica, etc. Essa forma de interface conhecida como WIMP (Windows, cones, Menus e Ponteiros). Os primeiros estudos das interfaces grficas com o usurio comearam na dcada de 1960 no Instituto de Pesquisa de Stanford, onde Douglas Engelbart e seu grupo de pesquisa desenvolveram uma interface de texto com hiperlinks que podiam ser acessados por um objeto apontador precursor do mouse moderno. Em 1963, Ivan Sutherland desenvolveu um sistema chamado Sketchpad usando uma caneta emissora de luz para guiar a criao e manipulao de objetos de desenhos para criao na rea da engenharia. J na dcada de 1970, os pesquisadores da Xerox PARC, criaram uma interface grfica como principal interface do computador Xerox Alto. Na dcada de 1980 praticamente todos os grandes fabricantes de computadores comearam a migrar suas plataformas para interfaces grficas com usurio, como por exemplo, o Macintosh Apple Computadores, o Windows da Microsoft e o X Windows System do Unix e posteriormente do Linux. Em geral o sistema operacional dotado de um gerenciador da interface grfica com o usurio que cuida da apresentao e manipulao dos componentes grficas que aparecem na tela e que so a interface com os softwares que so utilizados pelo usurio.

Windows Forms
Windows Forms como se chamam as aplicaes criadas para desktop no Framework Dot Net. Utiliza-se a interface do Visual Studio para a criao e configurao da aplicao e ao paralelamente programa-se o comportamento de cada componente e da aplicao como um todo. As

figuras 1 e 2 mostram a criao de um novo projeto (conjunto de arquivos que definem uma aplicao) de aplicao Windows Form no Visual Studio. Um form a representao grfica de uma janela. Ele podem conter outros componentes como menus, botes, imagens, etc. Uma aplicao tem que ter um form principal que o ponto de partida, podendo tambm apresentar outros forms. Cada form adicionado a uma aplicao Windows Forms adiciona um novo arquivo de classe ao projeto. Linguagens Modelos de aplicao

Figura 1. Escolha da linguagem e do modelo de aplicao. O namespace responsvel pela criao de Windows Forms o namespace System.Windows.Forms. As aplicaes Windows Forms so programas que so executados no sistema operacional Windows, e utilizam os componentes de interface do usurio que so familiares aos usurios do Windows. Trs conceitos importantes nas aplicaes Windows Forms so: componente, container e controle. Um componente um objeto que permite compartilhamento de informaes entre aplicaes. Um container um objeto que pode conter zero ou mais componentes internamente. Ele um mecanismo de agrupamento e assegura que conjuntos de componentes sero

manipulados conjuntamente e de forma similar. Um controle um componente com aspecto visual. No namespace System.Windows.Forms, um controle um componente que apresenta uma interface grfica na rea de trabalho do Windows. Genericamente falando, qualquer interface visual que voc v na rea de trabalho do Windows um controle, e qualquer objeto nos bastidores um componente. Alguns controles tambm funcionam como containers. caso do form por exemplo que funciona como janela da aplicao. form Solution Explorer

Properties

Toolbox

Figura 2. A rea de trabalho do Visual Studio em uma aplicao Windows Forms. As reas do visual studio mostrada na Figura 2 so: Solution Explorer: controle dos arquivos que formam a soluo corrente Properties: controle de propriedades de objetos Toolbox: Kit de ferramentas de objetos de interface Form: Janela da aplicao

Namespaces e classes
Um namespace define o escopo para um conjunto de classes e outros tipos de dados. Uma classe define uma abstrao de dados, na qual definido o seu nome e uma coleo de membros para a representao e operao da classe. A classe Form importantssima para aplicaes baseadas em Windows no Dot Net. Ela representa qualquer tipo de janela na aplicao, desde caixas de dilogo at janelas clientes MDI (Multiple Document Interface). A classe Form permite mostrar, agrupar controles em seu interior, e interagir com uma aplicao. As classes do Dot Net contm um ou mais membros que definem o comportamento e as funcionalidades da classe. Os membros da classe podem ser constantes, campos, mtodos, propriedades, eventos, indexadores, operadores, construtores e declaraes de tipos aninhados.

Solues (solutions) e projects (projetos)

O Visual Studio, que a IDE (Interface Development Environment, Interface de Ambiente de Desenvolvimento) do Dot Net, usa projetos e solues para gerenciar o desenvolvimento das aplicaes. Conceitualmente, um projeto uma coleo de arquivos que formam uma aplicao Dot Net, como uma biblioteca (.dll) ou um executvel (.exe). Uma soluo uma coleo de projetos que so agrupados por questes de desenvolvimento ou distribuio. Quando uma soluo possui apenas um nico projeto, podemos considerar soluo e projeto como a mesma coisa. O arquivo principal de uma aplicao armazenado no disco como um arquivo do tipo .sln. Um projeto armazenado em um arquivo do tipo .csproj. A seo Solution Explorer de uma soluo contendo um projeto possui quatro itens (mostrados na figura 3): Properties (propriedades) contm arquivos de configurao da soluo e do projeto como o AssemblieInfo.cs, que define informaes de configurao do projeto. References (referncias) a lista de fragmentos de cdigos compliados (assemblies) referenciados pelo projeto.

Form1.cs um arquivo contendo a classe Form criada por padro para a aplicao. Project1.cs Um arquivo contendo a classe do programa criada por padro para a aplicao.

Figura 3. Os elementos de uma soluo Dot Net

Um exemplo de aplicao: Pedra, Papel e Tesoura

Para demonstrar aspectos mais prticos da criao de aplicaes, vamos criar uma aplicao que um jogo conhecido popularmente como Pedra, Papel e Tesoura. Abra o Visual Studio. Clique no menu File (arquivo), e escolha a opo New Project (novo projeto). Escolha a linguagem C# e em seguida escolha o tipo de aplicao como Windows Application (aplicao Windows). Agora na caixa de texto Name (nome) digite PedraPapelTesoura (sem as aspas). Faa o mesmo na caixa de texto Solution Name (nome da soluo). Clique no boto OK. Voc ver que o ambiente se reconfigura conforme mostra a figura 1. Observe que j h um form (uma janela) vazio cujo ttulo na barra de ttulo Form1. Estamos no design time, ou seja, momento de projeto da aplicao. Definiremos neste momento muitas caractersticas da nossa aplicao. Existem configuraes que somente podem ser feitas via programao que s tero efeito no momento que a aplicao estiver sendo utilizada por algum, o que chamamos de run time, ou seja, momento de programao.

Antes de comearmos, porm, o projeto e a programao da aplicao, devemos fazer uma anlise de nossas atividades. Para isso, faamos primeiramente um exerccio de anlise para construir o Diagrama de Casos de Uso e o Diagrama de tarefas (fluxograma) da aplicao (figuras 4 e 5):

Figura 4. Diagrama de Caso de Uso da aplicao

saudao

Configura varivel de sair para F

Deseja jogar sim Obtm valor do usurio Obtm valor do sistema Compara valores Emite resultado

no

Obtm resposta se deseja jogar novamente no Resposta no sim Muda varivel de sair para V

Apresenta Resultados Despedida

Figura 5. Fluxograma da aplicao

Como prximo passo podemos comear a construir a interface da aplicao. Vamos alterar o ttulo da aplicao de Form1 para Pedra, Papel e Tesoura. Para alterar as caractersticas de um controle utilizamos a seo Properties (propriedades), conforme pode ser visto na figura 6.

Figura 6. Propriedades de um controle Vamos alterar a propriedade Text (texto) do Form para Pedra, Papel e Tesoura. As propriedades costumam se dividir em: Acessibility (acessibilidade), Appearance (aparncia), Behavior (comportamento), Data (dados), Design (Forma), Focus (foco), Layout (apresentao), Misc (miscelneas) e Windows Style (estilo no ambiente Windows). Na seo toolbox (caixa de ferramentas) voc encontra vrios controles, containers e componentes que podem ser utilizados para criar a sua aplicao. A toolbox subdivida em subsees de componentes. Na subseo Common Controls (controles comuns) voc encontra o controle label (rtulo). O label um timo controle para apresentar texto para o usurio no form. D um duplo-clique no cone do label e um novo label aparecer dentro do form. Clique e arraste para posicionar o label onde voc deseja. Modifique a propriedade text para Escolha um elemento:. No toolbox, subseo Containers d duplo-clique no controle GroupBox. Esse controle serve para agrupar outros controles dando ao usurio a

impresso de que esses controles pertencem a uma mesma ao. Altere a propriedade text do groupbox para Elementos. Volte subseo common controls e d duplo clique no controle Radio Button (boto de rdio). Quando o controle aparecer no form, reposicione-o para ficar dentro do groupbox. Faa isso mais duas vezes a fim de obter trs radio buttons dentro do groupbox. Modifique as propriedades text dos radio buttons para Pedra, Papel e Tesoura. Escolha o primeiro boto de rdio e configure sua propriedade Checked para true, isso garantir que o usurio escolha ao menos uma alternativa. Agora d um duplo clique no controle Button (boto) e o posicione-o dentro do groupbox. Modifique a propriedade text do controle button para OK. A figura 7 mostra o layout da aplicao criado at agora.

Figura 7. Layout da aplicao Voc pode executar a aplicao no menu Debug (depurar), opo Start Debugging (iniciar depurao), pressionando a tecla F5 ou ainda clicando no boto start debugging na barra de tarefas do Visual Studio (uma setinha verde). Observe, contudo, que ao executarmos nossa aplicao ela ainda no realiza nada de til. Continuando o desenvolvimento do jogo pedra, papel e tesoura, aps a obteno da escolha do usurio precisamos obter a escolha do

computador e realizar uma comparao para saber quem foi o vencedor (ver figura 5). Repare que a nossa interface est orientada da seguinte forma: o usurio escolhe uma das trs opes atravs dos botes de rdio. Como eles so mutuamente exclusivos ento o usurio s pode escolher uma opo. Aps ter escolhido a opo, o usurio deve clicar no boto OK. nesse ponto em que devemos coletar a escolha do computador e realizar a comparao dos resultados. Somente ao clicar do boto OK que os procedimentos subseqentes devem ocorrer. Isso significa que esses procedimentos sero disparados pelo clique do boto OK pelo usurio. Chamamos a isso de programao orientada a eventos, j que o clicar do boto um evento que dispara procedimentos. Esses procedimentos que so a resposta ao clique do boto chamamos de event handler (manipuladores de eventos), ou seja, so procedimentos que do conta do tratamento do evento. Para criar um tratamento de evento, podemos clicar no controle, em seguida clicamos no boto events da seo propriedades (um boto cujo cone um relmpago amarelo, o qual pode ser observado na figura 6). Uma lista de possveis eventos para aquele controle ser mostrada. Esta lista conta com eventos dos seguintes tipos: action (ao), appearance (aparncia), behavior (comportamento), data (dados), drag drop (arrastar e soltar), focus (foco), key (tecla), layout (formato), mouse, property change (mudana de propriedade). Selecione o boto OK, clique no boto events e procure pelo evento click (clique) e d duplo-clique nele. Na rea de trabalho do Visual Studio haver uma mudana, ao invs de mostrar o form, ser mostrado o cdigo da classe do form. Em especial ser mostrada uma funo que atuar como tratadora do evento clique do controle citado. Voc pode voltar visualizao do form a qualquer momento clicando na aba form1.cs [design] ou clicando no boto view designer (visualizar projeto) que se encontra na seo solution explorer (ver figura 3, quinto boto da esquerda para a direita). A figura 8 mostra o cdigo da classe Form1, e tambm o tratador do evento clique do boto OK (button1).

using using using using using using using

System; System.Collections.Generic; System.ComponentModel; System.Data; System.Drawing; System.Text; System.Windows.Forms;

1 2

n a m3 e s 4 p a 5 c e private void button1_Click(object sender, EventArgs e) { P e } d } r } a P a p e Figura 8. Cdigo da classe l Form1 T e modific-lo: Vamos entender esse cdigo para que possamos s o 1. Essa a seo do cdigo onde referenciamos outros namespaces u dos quais poderemos utilizar algumasr classes. Repare que foi a feito referncia ao System.Windows.Forms, j que ele vital para

namespace PedraPapelTesoura { public partial class Form1 : Form { public Form1() { InitializeComponent(); }

a criao de forms na aplicao 2. Um novo namespace criado com o nome da aplicao. Esse namespace conter internamente todas as classes necessrias para que a aplicao funcione. 3. Essa a definio da classe Form1. A classe Form1 a classe que permite programar o controle form1. Repare que ela uma classe public o que significa que pode ser enxergada de fora do namespace que a contm. Isso porque no programa principal (veja o arquivo program.cs) um criado um objeto dessa classe que a prpria janela inicial da aplicao; uma classe partial o que significa que parte dela est nesse arquivo, parte est em outro arquivo (veja o Form1.Designer.cs); e finalmente repare que ela uma classe-filha da classe Form ( Form1: Form, o que significa que Form1 a classe-filha e Form a classe me).

4. Existe um mtodo dentro da classe Form1 que tem o mesmo nome da classe. Esse mtodo o chamado construtor da classe, porque chamado todas as vezes que a classe instanciada em objeto (veja o arquivo program.cs onde criada uma instncia da classe form1 com a palavra chave new). Esse mtodo faz as inicializaes necessrias para que o objeto possa comear a ser utilizado no programa. 5. Esse mtodo o tratador do evento clique do boto OK (button1). Veja o seu nome: button1_Click. Ele s est a porque ns pedimos atravs do procedimento de clicar no evento click do boto. dentro dele que colocaremos as aes que devem ser realizadas quando o boto clicado. Repare que ele private, porque s pode ser chamado de dentro da classe; retorna void, o que significa que no retornar nenhum valor para quem o chamou; e possui os parmetros sender do tipo object, que uma referncia ao objeto no qual foi disparado o evento, e e do tipo EventArgs, que uma referncia a um objeto de evento contendo informaes sobre o evento que foi gerado (clique do boto). Bom, agora precisamos preencher o mtodo button1_Click com as aes necessrias para dar prosseguimento ao pedra, papel e tesoura. Consultando a figura 5 vemos que o prximo passo obter o valor do sistema. Antes disso, pode ser interessante converter as escolhas do usurio para nmeros fazendo com que as comparaes fiquem mais simples. Por exemplo, podemos arbitrar que pedra = 0, papel = 1, tesoura = 2. Ento vamos definir a escolha do usurio como um desses valores (esse cdigo colocado dentro do mtodo button1_Click):
//variveis string strElementoComputador = ""; int intElementoUsuario=0, intElementoComputador=0; Random rndElementoComputador; if (radioButton1.Checked) { //escolheu pedra intElementoUsuario = 0; } if (radioButton2.Checked) { //escolheu papel

intElementoUsuario = 1; } if (radioButton3.Checked) { //escolheu tesoura intElementoUsuario = 2; }

O que fizemos? Simplesmente criamos variveis que julgamos necessrias e atribumos a cada escolha do usurio o nmero correspondente. Repare que para isso utilizamos uma propriedade do boto de rdio, Checked, que retorna true se o boto est marcado ou false se ele no est marcado. Agora podemos proceder a captura da escolha do elemento do computador. Para isso vamos utilizar um objeto que gera valores randmicos. Esse objeto pode ser criado a partir da classe Random que se encontra no namespace System (por isso importante ter uma diretiva using System no comeo da form1.cs (veja na figura 8). O cdigo abaixo mostra como faremos para definir randomicamente a escolha do computador.
//definindo a escolha do computador rndElementoComputador = new Random(); intElementoComputador = rndElementoComputador.Next(0, 3);

Em primeiro lugar criamos um objeto do tipo Random e o atribumos a varivel rndElementoComputador. Esse objeto nos possibilitar gerar o nmero da escolha do computador. Utilizamos para isso o mtodo Next que permite que seja escolhido um nmero inteiro compreendido entre o menor valor e o maior valor (esse no includo). Assim, da forma como foi utilizado, obteremos um valor que pode ser 0, 1 ou 2. Ou seja, pedra, papel ou tesoura. Agora para que o usurio saiba qual foi a escolha do computador, interessante mostrar essa escolha antes de a aplicao calcular quem venceu a partida. Antes de mais nada, acrescente um novo label abaixo do groupbox na rea de design do form. Nesse label mostraremos o valor da escolha do computador. Limpe o texto, (a propriedade text) do label. No cdigo (ainda dentro do mtodo button1_Click) continuaremos assim:

//mostrando ao usurio a escolha do computador label2.Text = "O computador escolheu " + strElementoComputador;

Perceba que fizemos o valor da propriedade text do label2 ser igual frase O computador escolheu concatenada com o elemento que ele escolheu (pedra, papel ou tesoura). Finalmente vamos definir quem venceu a rodada e contar os pontos do computador e do usurio. Para a definio dos pontos do usurio e do computador crie dois atributos na classe Form1, conforme abaixo:
public partial class Form1 : Form { private int intPontosUsuario, intPontosComputador; public Form1() { InitializeComponent(); intPontosUsuario = 0; intPontosComputador = 0; }

Observe que criaremos dois atributos intPontosUsuario e intPontosComputador e no mtodo construtor ns os inicializamos com os valores zero. Esses atributos sero atualizados conforme as rodadas do jogo forem acontecendo. Crie mais um label (label3) abaixo do label2 e limpe sua propriedade text. Crie o cdigo abaixo para a definio do ganhador da rodada (dentro do mtodo button1_Click):
//descobre quem venceu e conta pontos if (intElementoUsuario==0) //pedra { if (intElementoComputador == 0) //pedra { label3.Text = "Houve empate"; } if (intElementoComputador == 1) //papel { label3.Text = "Papel embrulha pedra. O computador ganhou."; } if (intElementoComputador == 2) //tesoura { label3.Text = "Pedra quebra tesoura. Voc ganhou."; intPontosUsuario++; } intPontosComputador++;

} if (intElementoUsuario==1) //papel { if (intElementoComputador == 0) //pedra { label3.Text = "Papel embrulha pedra. Voc ganhou."; intPontosUsuario++; } if (intElementoComputador == 1) //papel { label3.Text = "Houve empate."; } if (intElementoComputador == 2) //tesoura { label3.Text = "Tesoura corta papel. O computador } } if (intElementoUsuario==2) //tesoura { if (intElementoComputador == 0) //pedra { label3.Text = "Pedra quebra tesoura. O computador } intPontosComputador++; intPontosComputador++;

ganhou.";

ganhou.";

if (intElementoComputador == 1) //papel { label3.Text = "Tesoura corta papel. Voc ganhou."; intPontosUsuario++; } if (intElementoComputador == 2) //tesoura { label3.Text = "Houve empate."; }

Para finalizar o processo de construo do nosso programa deveramos mostrar o escore final. Para isso utilizaremos o evento de sada do programa. Clique no form e depois no boto events na seo propreties. D um duplo clique na opo FormClosing. Essa opo a tratadora do evento que ocorre quando usurio fecha a aplicao (por exemplo, pelo boto x). Faremos com que antes de fechar o form o usurio seja informado de quantos pontos ele fez e quantos pontos o computador fez. Repare que outro mtodo da classe Form1 apareceu:
private void Form1_FormClosing(object sender, FormClosingEventArgs e)

{ }

Este mtodo o tratador do evento FormClosing. Dentro deles faremos a finalizao do programa mostrando a pontuao do usurio e do computador e agradecendo a participao do usurio, conforme o cdigo abaixo (a ser inserido dentro do mtodo):
string strFechamento; strFechamento = "Voc fez " + intPontosUsuario + " pontos\n"; strFechamento += "O computador fez " + intPontosComputador + " pontos\n"; strFechamento += "Obrigado por jogar Pedra, Papel e Tesoura. :)"; MessageBox.Show(strFechamento);

O que fizemos foi criar uma varivel do tipo string e concatenar toda a mensagem final. Repare que utilizamos o caracter especial \n para que houvesse quebra de linha dentro da mensagem. Alm disso, para mostrar uma caixa de mensagem utilizamos a classe MessageBox que possui um mtodo de classe chamado Show que permite informarmos um texto e esse ser mostrado na caixa de mensagem. Segue abaixo o cdigo completo da classe Form1.
using using using using using using using System; System.Collections.Generic; System.ComponentModel; System.Data; System.Drawing; System.Text; System.Windows.Forms;

namespace PedraPapelTesoura { public partial class Form1 : Form { private int intPontosUsuario, intPontosComputador; public Form1() { InitializeComponent(); intPontosUsuario = 0; intPontosComputador = 0; } private void button1_Click(object sender, EventArgs e) { //variveis string strElementoComputador = ""; int intElementoUsuario=0, intElementoComputador=0; Random rndElementoComputador;

if (radioButton1.Checked) { //escolheu pedra intElementoUsuario = 0; } if (radioButton2.Checked) { //escolheu papel intElementoUsuario = 1; } if (radioButton3.Checked) { //escolheu tesoura intElementoUsuario = 2; } //definindo a escolha do computador rndElementoComputador = new Random(); intElementoComputador = rndElementoComputador.Next(0, 3); if (intElementoComputador == 0) { //escolheu pedra strElementoComputador = "pedra"; } if (intElementoComputador == 1) { //escolheu papel strElementoComputador = "papel"; } if (intElementoComputador == 2) { //escolheu tesoura strElementoComputador = "tesoura"; } //mostrando ao usurio a escolha do computador label2.Text = "O computador escolheu " + strElementoComputador; //descobre quem venceu e conta pontos if (intElementoUsuario==0) //pedra { if (intElementoComputador == 0) //pedra { label3.Text = "Houve empate"; } if (intElementoComputador == 1) //papel { label3.Text = "Papel embrulha pedra. O computador ganhou."; intPontosComputador++;

} if (intElementoComputador == 2) //tesoura { label3.Text = "Pedra quebra tesoura. Voc ganhou."; intPontosUsuario++; } } if (intElementoUsuario==1) //papel { if (intElementoComputador == 0) //pedra { label3.Text = "Papel embrulha pedra. Voc ganhou."; intPontosUsuario++; } if (intElementoComputador == 1) //papel { label3.Text = "Houve empate."; } if (intElementoComputador == 2) //tesoura { label3.Text = "Tesoura corta papel. O computador ganhou."; } } intPontosComputador++;

if (intElementoUsuario==2) //tesoura { if (intElementoComputador == 0) //pedra { label3.Text = "Pedra quebra tesoura. O computador ganhou."; } if (intElementoComputador == 1) //papel { label3.Text = "Tesoura corta papel. Voc ganhou."; intPontosUsuario++; } if (intElementoComputador == 2) //tesoura { label3.Text = "Houve empate."; } } } intPontosComputador++;

private void Form1_FormClosing(object sender, FormClosingEventArgs e) { string strFechamento; strFechamento = "Voc fez " + intPontosUsuario + " pontos\n";

strFechamento += "O computador fez " + intPontosComputador + " pontos\n"; strFechamento += "Obrigado por jogar Pedra, Papel e Tesoura. :)"; MessageBox.Show(strFechamento); } } }