Artigos .NET Criando um Aplicativo Gráfico - C# para programadores Delphi
Até aqui utilizamos o Visual Studio 2010 e o Delphi 2010 somente para criar aplicações básicas de Console. Entretanto, essas duas ferramentas contém tudo que precisamos para desenvolver aplicativos gráficos baseados no Windows. Vamos, então, tratar nesse artigo sobre esse tipo de aplicação nas duas ferramentas.

Nas duas ferramentas encontramos dois tipos de visualização de um aplicativo gráfico:

·         > Código: Delphi (Code) e Visual Studio (Code View) – usado para manter ou modificar o código e a lógico para o aplicativo gráfico;
·         > Design: Delphi (Design) e Visual Studio (Design View) – usado para organizar a interface com o usuário;

Vamos, então, criar nosso primeiro aplicativo gráfico utilizando nossas ferramentas. Será uma aplicação simples onde o formulário terá uma caixa de texto em que você poderá inserir seu nome e um botão que, ao ser clicado exibirá uma saudação a você.

Nota: O Visual Studio apresenta dois (2) templates para compilar aplicativos gráficos: o Windows Form Application e o WPF Application. O primeiro apareceu com a tecnologia 1.0 do .Net Framework e o segundo com a versão 3.0. O WPF fornece muito mais recursos que o Windows Forms, e será muito mais interessante utilizá-lo por esse motivo. Fazendo somente uma analogia, a nova versão do Delphi, a XE2, também, apresenta dois templates para aplicativos gráficos: a famosa VCL e agora, o Firemonkey.

Visual Studio:

“File | New | Project |Visual C# | Windows | WPF Application”

Na janela que irá se abrir, dedique-se aos seguintes campos:

  • Name – Dê um nome à sua aplicação. Ex: WPFHello;
  • Location - identifique a pasta onde serão salvos os arquivos correspondentes ao aplicativo. Ex: c:\users\notebook\documents\visual studio 2010\Projects
  • Solution – Dê um nome à solução, ou deixe, o mesmo nome da aplicação.

Obs: Notifique se a opção “Create directory for solution” está habilitado. Essa opção permite a criação do diretório caso ele não exista.

img

Figura 1 – Nova Aplicação Gráfica Visual Studio
Delphi:

“File | New | VCL Forms Application – Delphi”

Para seguirmos o mesmo padrão adotado no Visual Studio, vamos salvar todo nosso conteúdo de uma vez: “File | Save All” (Shift + Ctrl + S). Vamos salvar cada campo:

  • Diretório – localize ou crie uma pasta para salvar os arquivos de sua aplicação;
  • Formulário principal (.pas)  - uFrmHello;·        
  • Projeto – ProjHello.
img
Figura 2 – Nova Aplicação Gráfica Delphi
 
       Vamos agora utilizar as telas de design para adicionar três controles:

1) Adicionando uma Label:

Visual Studio:
  1. Localize a ToolBox;
  2. Na seção Common, clique em Label e clique na parte visível do formulário;
  3. No Menu View, clique em Properties Window; Abrirá a tela de propriedades no canto inferior direito.
  4. Localize a propriedade “Text” e altere o tamanho da fonte para 20.·        
  5. Localize a propriedade “Content” e altere o texto para: “Digite seu Nome:”.

Delphi
  1.       Localize a ToolBar Pallete;
  2.       Na seção Standard, clique em Tlabel e arraste para o formulário;
  3. No seu canto esquerdo, você deve localizar o Object Inspector que apresenta as propriedades do componente;
  4. Localize a propriedade “Font | Size” e altere o tamanho da fonte para 20;
  5. Localize a propriedade “Caption” e altere o texto para: “Digite seu Nome:”;

2) Adicionando um componente de inserção de texto:

Visual Studio
  1. Na ToolBox clique em TextBox e depois clique no formulário;
  2. Posicione o controle de caixa de texto abaixo do label já criado;
  3. Altere a propriedade “Name” para UserName;
Delphi

  1. Na ToolBar View clique em TEdit e arraste para o formulário;
  2. Posicione o Edit abaixo do label já criado;
  3. Altera a propriedade “Name” para EdtUserName;
3) Adicionando um botão de ação:

Visual Studio

  1. Toolbox clique em Button e depois clique no formulário;
  2. Posicione o botão abaixo do Textbox e o centralize;
  3. Altere a propriedade “Name” para BtnOk;
  4. Altere a propriedade “Content” para Ok;
Delphi
  1.       Na ToolBar View clique em TButton e arraste para o formulário;
  2.       Posicione o botão abaixo do TEdit e o centralize;
  3.       Altere a propriedade “Name” para BtnOk;
  4.       Altere a propriedade “Caption” para Ok;

Vamos agora mudar o nome do formulário:

Visual Studio

Vá até “View | Designer” (Shift + F7). Logo abaixo do formulário aparecerá o seguinte código XAML:


< Title="MainWindow" Height="350" Width="525">


Substitua “MainWindow” por “Hello!”.

Delphi

Clique no Formulário, depois vá até as propriedades e altere Caption para Hello!.

Você terá então, a seguinte tela em:

Visual Studio

img
 
Figura 3 – Aplicação Gráfica Visual Studio
Delphi
 
img

Figura 4 – Aplicação Gráfica Delphi

Vamos agora para aplicação do código no evento do clique do botão:

Visual Studio

Dê um duplo clique no botão BtnOk do formulário e implemente o seguinte código:


private void BtnOk_Click(object sender, RoutedEventArgs e)
{
   MessageBox.Show("Olá " + UserName.Text);
}


Delphi

Dê um duplo clique no botão BtnOk do formulário e implemente o seguinte código:


procedure TForm1.BtnOkClick(Sender: TObject);
begin
  ShowMessage('Olá ' + EdtUserName.Text  );
end;


Vamos agora executar nossos aplicativos:

Visual Studio

“Debug | Start Without Debugging” (Ctrl + F5).

img
 
Figura 5 – Rodando Aplicação Gráfica em Visual Studio

Delphi

“Run | Run Without Debugging” (Ctrl + Shift + F9)

img
 
Figura 6 – Rodando Aplicação Gráfica em Delphi

Estude as telas e os códigos, faça as comparações entre os componentes, veja as semelhanças.

Nota: ao visualizar seu aplicativo em desenvolvimento, você pode encontrar no solution explorer do Visual Studio, arquivos com a  extensão XAML (App.xaml e MainWindow.xaml). XAML significa “Extensible Application Markup Language” e é uma linguagem do tipo XML utilizada por arquivos WPF para definir o layout de um formulário e seu conteúdo. Você pode definir completamente um formulário WPF escrevendo uma descrição XAML. Se não quiser utilizar a janela de visualização Design View do Visual Studio, a Microsoft fornece um editor de XAML chamado XAML Pad.

Um Grande Abraço e até o próximo artigo!

Rafael Marins Ribeiro
Engenheiro de Softwares
Msn: rafael.marins.ribeiro@hotmail.com