Home
Este projeto tem por objetivo criar uma calculadora utilizando somente os métodos e propriedades do VBA(Visual Basic for Applications), tornando-o como uma aplicação e descaracterizando o visual tradicional de Excel. Abaixo as fases que compõem o desenvolvimento da Calculadora.
- Fase 1: Definição de Layout e funcionalidades;
- Fase 2: Desenvolvimento do front-end da aplicação;
- Fase 3: Desenvolvimento do back-end da aplicação;
- Fase 4: Testes e tratamento de erros.
O prazo estipulado para o desenvolvimento é de 1 dia e utilizaremos os seguintes conceitos no desenvolvimento da aplicação:
- UserForms VBA(Formulários) - TextBox e Label;
- Módulo de Classe - POO(Programa Orientado à Objetos);
- Eventos internos - Initialize, Click, MouseDown, MouseMove e MouseUp;
- Loopings e lógica de Programação - For each, Select Case, If Else;
Baixar planilha completa (Calculadora)
Passo 01: Acessar a guia de Desenvolvedor do Excel (atalho: alt + f11);
Figura 01 - Guia desenvolvedor
Passo 02: Criar um novo Userform e renomeá-lo para "Calculadora";
Figura 02 - Acesso ao userfom
Passo 03: Chamada a Fase 01 - Definição do Layout e funcionalidades;
Layout: O layout da calculadora foi definido em seu formato mais básico, ou seja, contendo os botões de números [0-9] e operações matemáticas básicas [+-*/=], além do recurso essencial de apagar completamente todos os campos [c] da tela ou o último caracter [del] em caso de clicar em um valor inesperadamente.
Por questões estéticas, todos os botões da aplicação serão compostos por "Labels", visto que, possuem todos os métodos e propriedades necessárias para realizarem o efeito de botão.
A tela de visualização dos dados será composta por um "TextBox".
Funcionalidades: A relação de funcionalidades de cada um dos botões é essencial para o mapeamento da lógica que será atribuída ao back-end da aplicação, tais quais:
Botões 0-9: Valores correspondente à sua seleção; Botão "c": Limpar qualquer informação contida no TextBox; Botão "del": Excluir o último caractere do valor do TextBox; Botão "=": Verificar inconsistências na expressão informada, consolidar a expressão gerada no valor do TextBox e realizar os cálculos matemáticos. Passo 04: Chamada a Fase 02 - Desenvolvimento do front-end da aplicação;
Iniciaremos dimensionamento o Userform principal da aplicação.
Figura 03 - Dimensionamento userform
-
BackColor: Cor do fundo do Userform [&H00000000& ou rgb(0, 0, 0)];
-
Height: Altura do Userform [304];
-
Width: Largura do Userform [225]
Em sequência, posicionaremos as labels que serão os nossos botões e o TextBox que representará a tela da calculadora
Figura 04 - Definição de layout
A seguir a formatação do TextBox:
Figura 05 - Formatação do textbox
1.Name: Nome do objeto;
2.BackColor: Cor de fundo [&H00000000& ou rgb(0, 0, 0)];
3.Font: Fonte de exibição na tela (Noto Sans, 36) e [&H00FFFFFF& ou rgb(255, 255, 255)];
4.SpecialEffect: Aplicar efeito plano e evitar sombras ou 3D[fmSpecialEffectFlat];
5.TextAlign: Alinhar o texto à esquerda da tela[fmTextAlignRight].
Outras propriedades são importantes, porém dependem da disposição dos objetos no seu projeto, neste caso, por exemplo utilizamos as propriedades de posição:
Height: Altura do objeto; Width: Largura do objeto; Left: Posição à esquerda; Top: Posição a partir do top do Userform (Ou Iframe, caso esteja utilizando). A seguir a formatação das Labels:
Figura 06 - Formatação das labels
1.Name: Nome do objeto, seguiremos utilizando como padrão "btnNum1";
É importante sempre definir um padrão de nomenclatura para um objeto que se repete no formulário, pois na fase de desenvolvimento do back-end pode-se aplicar Métodos de Classes, simplificando e deixando o código limpo.
Por exemplo, caso o desenvolvedor não optasse por utilizar as Classes, o código ficaria extenso e poluído, além de se repetir N vezes o número de botões contido no formulário. No entanto, este é um assunto que abordaremos na Fase 03.
Ao renomear todos os botões, teremos a relação abaixo:
Botões "0-9": "btnNum[número do botão]"; Botão "c": "btnLimpar"; Botão "del": "btnDel"; Botão de operadores "+-/*.": "btnOpSom", "btnOpSub", "btnOpDiv", "btnOpMul", "btnOpPon". 2.BackColor: Apenas os botões "c" e "=" terão cores em destaque [&H00000080& ou rgb(128, 0, 0)] os demais em cor padrão [&H00404040& ou rgb(64, 64, 64)]
Podemos aproveitar a distribuição de cores para criarmos a animação ao clicarmos no botão. Manteremos a cor, porém reduziremos a um tom escuro.
Botões "c" e "=": rgb(128, 0, 0)-> Pressionado: rgb(77, 0, 0)
Demais: rgb(64, 64, 64)-> Pressionado: rgb(50, 50, 50)
O código necessário será desenvolvido na próxima fase, pois envolve as classes e eventos do userform.
3.Font: Fonte de exibição na tela (Noto Sans, 36) e [&H00FFFFFF& ou rgb(255, 255, 255)];
Podemos definir o tamanho do texto ao clicarmos em cada um dos botões, para gerar animação, será reduzido para 34.
4.SpecialEffect: Aplicar efeito plano e evitar sombras ou 3D[fmSpecialEffectFlat];
5.TextAlign: Alinhar o texto à esquerda da tela[fmTextAlignRight].
Outras propriedades são importantes, porém dependem da disposição dos objetos no seu projeto, neste caso, por exemplo utilizamos as propriedades de posição:
Ao aplicar as configurações informada, teremos o seguinte resultado:
Figura 07 - Prévia front-end Passo 04: Chamada a Fase 03 - Desenvolvimento do back-end da aplicação;
Iniciaremos pela criação das classes para os botões. O objetivo é atribuir valor ao clicar no botão e direcionar ao textbox.
Figura 08 - Acesso ao módulo de classe
Inicialmente, iremos criar a classe para apenas exibir os botões no visor da calculadora, mais a frente ajustamos o código para outras acessibilidades.
Figura 09 - Criação da classe
Inicialmente declaramos as variáveis como sendo objetos de Userform, para que possamos ter acesso às propriedades e métodos das labels e textbox.
Public WithEvents label As MSForms.label
Public txtbox As MSForms.TextBox
A primeira linha atribui a variável "label" e permite acesso aos eventos do objeto "Label", necessário para atribuírmos o código em eventos como Click(), mouseMove()....; A segunda linha atribui a variável "txtbox" as propriedades e métodos de um TextBox do userform. Após a declaração das variável, clicaremos no item 1 da figura e selecionamos a opção de "label" e na caixa de seleção ao lado, utilizaremos o evento "click".
Declaramos a variável "valor" para receber os valores de "Caption" obtidos de cada um dos botões; Por fim, informamos que o "txtbox.value" (O valor do textbox que é exibido) será equivalente à ele concatenando(juntando) ao botão que usuário pressionou. Por exemplo, inicialmente o textbox não terá nenhum valor na propriedade "txtbox.value", mas se pressionarmos o botão 1 e em sequência o botão 2, receberá: txtbox.value = " " & "1"
txtbox.value = "1" & "2"...
O próximo passo é retornar ao userform e clicar duas vez para acessar os eventos.
Figura 10 - Criação do evento initialize do userform
Selecionar o userform e seu evento "Initialize" para aplicarmos as propriedades criadas na classe ao iniciar a aplicação; Criamos inicialmente um objeto do tipo "Collection" (um Collection é um objeto que pode ser usado para armazenar uma coleção de itens em um único objeto. Ele pode ser usado para armazenar uma variedade de tipos de dados, como números, strings, objetos e outras coleções), por ser um objeto dinâmico, é ideal a medida que o projeto avance e seja necessário adicionar mais botões; O código basicamente percorre todos os objetos contido no userform, realiza a verificação a partir da propriedade "TypeName" e se estiver de acordo com a lógica mencionada (objeto do tipo "Label") atribui ao objeto a instância da classe "clInteracao", logo, o objeto receberá as propriedades e métodos que criamos na classe (envia ao textbox como valor a sua propriedade "Caption" e concatena ao valor já existente no textbox). Em tempo, para que o visor da calculadora receba de fato os valores da "Caption" de cada um dos botões, atribuímos ao objeto "Me.visorCalc" a instância da classe "clInteracao" vinculada ao objeto "txtbox". A ideia principal foi desenvolvida, porém deveremos adaptar o código da classe para os demais cenários, são eles:
Ao clicar no botão "c": Limpar as informações do textbox; Ao clicar no botão "del": Apagar somente o último caractere da textbox, em tese, a última string da propriedade textbox.value; Ao clicar no botão "=": Realizar todas as verificações matemáticas (se o último caractere pressionado é um número, se não consta dois operadores matemáticos em sequência) e aplicar o método "Application.Evaluate()" para converter a string armazenada no textbox.value em operação matemática.
Figura 11 - Adaptação da classe
Em resumo, adaptamos o código anterior para que reconhecesse os outros botões com funcionalidades específicas, como no caso do botão "c", "del" e "=". A estrutura de repetição "Select Case" analisa e aplica o código interno de acordo com cenário.
Note que no cenário Case "btnIgual" foi necessário atribuir um tratamento diferente do valor da textbox, isso acontece porque ao gerar o resultado matemático de uma expressão qualquer, automaticamente o formato é apresenta (","), na qual não é reconhecida como caractere decimal pela função "Application.Evaluate()". Portanto, trataremos antes de exibir qualquer resultado, a verificação de que há ou não vírgula no value da textbox, em caso positivo, realizamos a substituição(replace) pelo ponto("."), em caso negativo, apenas exibimos o resultado matemático da expressão, arredondando em duas casas decimais (round( ,2)).
Por fim, aplicaremos o efeito definido na etapa de front-end, mas que envolve o desenvolvimento do módulo de classe. Para isso, utilizaremos os eventos MouseUp e MouseDown da label.
Figura 12 - Criação dos eventos MouseDown e Up
O evento MouseDown aplica a cor ao pressionar o botão e o MouseUp retorna a cor default do botão. A ideia de utilizar a propriedade TAG é apresentar outra possibilidade de manipulação através dela, os botões "c" e "=" que possuem backcolor vermelho, foram renomeados para "red" no campo da tag.
No entanto, como os demais possuem a mesma coloração, não é necessário aplicar a mesma técnica, apenas para haver diferenciação nos critérios ao utilizar o IF ELSE.
Obs: A mesma lógica poderia ser aplicada no Select Case, utilizando as tags.
Passo 05: Chamada a Fase 04 - Testes e tratamento de erros; A aplicação já está completa e funcional, no entanto, é necessário realizar os devidos testes em busca de erros e tratá-los, para que não haja interrupção da aplicação em nenhum cenário.
Acrescentamos no início do código: On error goto tratarErro
Ou seja, ao identificar algum tipo de erro, o código é direcionado à seção "tratarErro:"
Figura 13 - Tratamento de erros
Note que inserimos ao final do código, logo após o "End Select". Basicamente ele verifica se o código é diferente de 0 (É valor de retorno que indica sucesso ou nenhuma informação adicional a ser apresentada), caso contrário é exibida a mensagem de erro e apagará o valor contido no txtbox.value.
Poderíamos criar um menu interativo, tela de login superadm, entre outros, porém como trata-se de um projeto de nível iniciante, focaremos apenas em ocultar o fundo do excel e um botão oculto para reativá-lo.
Figura 14 - Evento Open do workbook
Clicaremos no "EstaPastaDeTrabalho", selecionamos o objeto "Workbook" e o evento "Open". O código basicamente será executado ao abrirmos a planilha, assim será exibido o userform(Calculadora) e após o excel será oculto. Para reativar o excel, criaremos um botão oculto(mesma cor do fundo da aplicação) e aplicaremos o código a seguir no evento Click ().
Aproveitaremos para atribuir um evento ao clicarmos em "sair" da aplicação, pois ao clicarmos no "x" a aplicação do excel permanecerá ativa e oculta, impossibilitando seu fechamento da forma correta.
Figura 15 - Botão oculto
Note que o botão reativarTela estará da mesma cor que o fundo, portanto, estará oculto.