Programe do zero com Xojo: represente os dados no Canvas

Depois que aprendemos a ler e salvar arquivos no capítulo anterior, é hora de adicionar um novo recurso ao nosso aplicativo de exemplo: criar um gráfico que nos permita ver visualmente os gastos realizados em cada uma das categorias.

Para isso usaremos uma classe muito poderosa dentre as disponíveis na biblioteca Xojo: Canvas.

Como o nome indica, o Canvas é um tipo de controle muito especial, pois nos fornece uma "tela" na qual podemos desenhar livremente o que cada uma de nossas aplicações requer, não apenas através das propriedades disponíveis na própria classe, mas também usando todas as as funções fornecidas de outra das classes que está intimamente relacionada a isso: Graphics.

Especificamente, o desenho no Canvas é feito através do código escrito em seu manipulador de eventos Paint, que pode ser invocado automaticamente pelo sistema operacional toda vez que for necessário atualizar o conteúdo do canvas (lembre-se que o Xojo é multiplataforma nativo) , ou então forçamos o redesenho invocando os métodos Refresh (imediate) ou Invalidate (delegando a atualização do controle quando for mais apropriado para o sistema operacional).

Ao longo do tutorial também criaremos uma classe auxiliar que nos permitirá desenhar gráficos estatísticos (despesas acumuladas por categoria) com maior flexibilidade.

Além disso, criar essa classe auxiliar também nos permite abstrair o tipo de valores a representar. Ou seja, neste caso sabemos que se trata de representar valores correspondentes a despesas pessoais usando o gráfico de barras, mas fornecer esse nível de abstração significa que você pode continuar usando as novas classes discutidas neste capítulo também para representar qualquer outro tipo de valor numérico em outras aplicações que você pode criar.

Por outro lado, e para ver até certo ponto a flexibilidade proporcionada pela classe Graphics, vamos criar nosso objeto de gráfico estatístico para que seja realmente fácil controlar como queremos apresentar as barras: usando cores sólidas ou gradientes de cores, também decidir as cores que queremos atribuir a cada barra e também se queremos aplicar um efeito de sombra a cada uma delas ou não; bem como a largura com a qual queremos desenhar cada uma das barras.

O código de desenho terá também a função de calcular proporcionalmente a altura de desenho para cada uma das barras, não só sobre o valor apresentado pelas restantes, mas também sobre a altura máxima disponível na janela ou painel que incluirá o controlo gráfico.

Isso significa que, alterando o tamanho da janela, você verá como o controle gráfico recalcula e redesenha cada uma das barras em tempo real, mantendo sempre a proporção correspondente ao valor representado por cada uma delas.

E se neste exemplo estamos usando o controle Canvas para desenhar gráficos, é muito interessante que você saiba que este também é o controle que você precisa usar quando tiver que criar, do zero, um controle de UI totalmente personalizado.

De fato, os manipuladores de eventos disponíveis permitirão controlar todos os aspectos geralmente associados à interação do usuário: quando o cursor entra ou sai da superfície, quando é clicado, quando objetos são arrastados ou soltos em sua superfície, além de responder a eventos de teclado.

Resumindo, através do Canvas você pode criar qualquer widget de controle ou UI que você possa imaginar e queira adicionar ao seu aplicativo.

Convido você não apenas a reproduzir o tutorial no Xojo IDE (claro que você também pode baixar o projeto Xojo usado no exemplo, mas tentar seus primeiros passos com a classe Graphics em conjunto com o Canvas.

Se você tiver alguma dúvida ou problema, os comentários estão abertos,