Implementando um teclado virtual personalizando usando C#
Jefferson Luis Junglaus
Jefferson Luis Junglaus (jeffersonjunglaus@gmail.com) é desenvolvedor C# e Delphi em aplicações WinForms, Mobile(Pocket Pc e SmartPhones), ASP.NET e Win32, acadêmico em Sistema de Informação e desenvolvedor na Infomidi@ Sistemas e Informática.
O mercado de desenvolvimento de softwares está cada dia tornando-se mais competitivo e exigente, não só com o bom funcionamento do software, mas também com o visual e praticidade do mesmo. Sendo assim, neste artigo será mostrado como criar um teclado virtual personalizado com design mais moderno, não só melhorando o visual do aplicativo móvel, mas tornando-se uma alternativa para o teclado virtual padrão do Pocket PC.
Esse teclado virtual será baseado em botões, ou seja, para formar o teclado numérico será criado um agrupamento de botões, cada botão possui duas imagens de fundo, uma que será exibida quando o botão estiver em estado normal e outra quando o botão for pressionado, todos os botões devem ser criados dentro do SIPControl.
Para a criação do teclado virtual personalizado será usado o controle SIPControl do framework OpenNETCF, um framework grátis e de código aberto. Para baixar o SIPControl.cs acesse www.infomidi.com.br/SIPControl.zip. Além do código-fonte do SIPControl, no arquivo zipado, você encontrará as imagens para os botões do teclado virtual.
Criando o projeto
Abra o Visual Studio 2005 (você pode usar o VS 2003), clique em File>New>Project e crie um projeto Device Application chamado “WMTecladoVirtual”. Escolha a linguagem Visual C# e clique em OK (Figura 1).
Figura 1. Criando um novo projeto Device Application
Descompacte o arquivo e copie SIPControl.cs e as imagens key.bmp e key_dn.bmp para a pasta do projeto. Com o código fonte do SIPControl dentro da pasta do projeto e as imagens, é necessário adicioná-las ao projeto para serem utilizadas.
Para adicionar, no Solution Explorer clique com o botão direito do mouse e escolha Add>Add Existing Item. Localize o SIPControl.cs e clique em OK. Repita o mesmo processo para as duas imagens: key.bmp e key_dn.bmp. O Solution Explorer deve estar semelhante ao da Figura 2.
Figura 2. Solution Explorer com os arquivos adicionados.
Coloque um TextBox, para que possamos exibir no controle os botões pressionados do teclado virtual. Para usar o SIPControl no Form1.cs é necessário importar o namespace OpenNETCF.Windows.Forms, que contém a classe SIPControl. Para importar o namespace, digite no Form1.cs o seguinte código:
using OpenNETCF.Windows.Forms;
O próximo passo é declarar uma instância da classe SIPControl que é o controle responsável pelo teclado virtual chamado sipImage. A instância deve ser declarada como privada e dentro da classe Form. Abra o arquivo Form1.Designer.cs e adicione o seguinte código (também declare o namespace anterior nesse arquivo), abaixa da declaração do formulário:
private SIPControl sipImage;
O teclado virtual será criado por um método chamado CreateSIP dentro do Form1.cs, veja o código do método na Listagem 1.
Listagem 1. Método para criação do Teclado virtual numérico personalizado
private void CreateSIP()
{
//Cria o controle Teclado Virtual
sipImage = new SIPControl();
// Localização e tamanho do teclado virtual
sipImage.Location = new Point(65, 160);
sipImage.Size = new Size(64, 106);
//Imagem exibida botão em estado normal
Bitmap bitmap = new Bitmap(
@"\Program Files\WMTecladoVirtual\key.bmp");
//Imagem exibida botão em pressionado
Bitmap bitmapDown = new Bitmap(
@"\Program Files\WMTecladoVirtual\key_dn.bmp");
//Vetores de botões
ButtonRow row1 = new ButtonRow(new string[] {
"7", "8", "9" }, 1, 0);
row1.Space = 1;
sipImage.Rows.Add(row1);
ButtonRow row2 = new ButtonRow(new string[] {
"4", "5", "6" }, 1, 20);
row2.Space = 1;
sipImage.Rows.Add(row2);
ButtonRow row3 = new ButtonRow(new string[] {
"1", "2", "3" }, 1, 40);
row3.Space = 1;
sipImage.Rows.Add(row3);
ButtonRow row4 = new ButtonRow(new string[] {
"0", "00" }, 1, 60);
//Aumenta o tamanho do botão
((KeyButton)row4.Buttons[1]).Width = 41;
row4.Space = 1;
sipImage.Rows.Add(row4);
ButtonRow row5 = new ButtonRow(new string[] {
"C" }, 1, 80);
((KeyButton)row5.Buttons[0]).Width = 62;
((KeyButton)row5.Buttons[0]).Height =
((KeyButton)row5.Buttons[0]).Height + 3;
row5.Space = 1;
sipImage.Rows.Add(row5);
//Passa todos os botões dos vetor
//Rows atribuindo as imagens
foreach (ButtonRow row in sipImage.Rows)
{
foreach (KeyButton button in row.Buttons)
{
button.Image = bitmap;
button.ImageDown = bitmapDown;
}
}
//Adiciona a coleção de controles o sipImage
this.Controls.Add(sipImage);
}
O método CreateSIP será chamado dentro do construtor da classe Form1, após o InitializeComponent. Compile e execute o projeto no emulador: Pocket PC 2003 SE Emulator. Aperte alguns botões do teclado virtual note que não acontece nada com o texto do TextBox (Figura 3). Isso acontece porque não foi implementado o evento ButtonClick do sipImage.
Figura 3. Projeto em execução com o teclado virtual personalizado, sem o evento ButtonClick
A implementação do ButtonClick é bem simples, pois contém um parâmetro Sender do tipo Object e outro parâmetro chamado e do tipo ButtonClickEventArgs. Com parâmetro e é possível saber qual botão foi pressionado, através de um if . No código, vamos verificar se o texto do botão for “C” (botão limpar), limpamos o texto do TextBox, caso contrário, é atribuído ao TextBox o texto do botão pressionado. Veja a implementação do método na Listagem 2.
Listagem 2. Implementação do método sipImage_ButtonClick
private void sipImage_ButtonClick(object sender,
ButtonClickEventArgs e)
{
if (e.Button.Text == "C") //Botão limpar
{
textBox1.Text = "";
}
else
{
textBox1.Text += e.Button.Text;
}
}
Para atribuir o método ao evento dentro do CreateSIP adicione o seguinte código (após criar a instância de sipImage):
//Atribuindo procedimento ao evento
sipImage.ButtonClick += new ButtonClickEventHandler(
sipImage_ButtonClick);
Compile e execute o projeto. Clique no teclado virtual e veja que será modificado o texto do TextBox (Figura 4).
Figura 4. Projeto em execução com o teclado virtual personalizado, com o evento ButtonClick
Conclusão
O visual do teclado virtual pode ser modificado com facilidade mudando as duas bitmaps. Neste artigo foi visto como manipular um único TextBox, caso exista mais que um controle que será dada entrada com o teclado virtual personalizado é necessário criar um método para retornar o controle que está focado.
www.opennetcf.org
Site oficial do Framework OpenNETCF
