Tutorial interface gráfica IGprisma — parte III

páginas: 1 – 2 – <3> – 4

 

Botões simples

 

1 – Criando um botão

 

ig_bt_ex1

Em interface gráfica, botões são áreas retangulares da janela que podem ser clicados com o cursor em cima. Ao ser clicados executam funções callbacks previamente conectadas ao botão.

Tudo depende do propósito do programa e criatividade do programador.

Vejamos um simples exemplo:

Salve como botao.prisma

 

Detalhes:

  1. Criamos a janela
  2. Conectamos a função ig.fimjanela ao evento destruido (fechar janela).
  3. Criamos o painel fixo
  4. Adicionamos o painel fixo na janela

Obs.: Lembre-se que a função principal é o mesmo que o main do C, ela é executada automaticamente pelo interpretador prisma.

Criamos um botão e armazenamos na variável local bt.

Parâmetros:

1 – Texto do botão. (string)

2 – (opcional) tamanho do botão – largura. (número)

3 – (opcional) tamanho do botão – altura. (número);

Obs. Caso use o segundo parâmetro é necessário usar também o terceiro, caso contrário não terá efeito.

Note que no exemplo usamos apenas o primeiro parâmetro, sendo assim o tamanho do botão é variável de acordo com o tamanho to texto do botão. É mais vantajoso não determinar um tamanho caso não saiba o tamanho do texto do botão, pois se o texto for maior que o tamanho determinado do botão uma parte não ficará visível.

Podemos mudar o tamanho do botão posteriormente com a função ig.componente_def_tamanho(comp, larg, alt);

Ex.:

 

Aqui conectamos uma função ao clique do botão, assim toda vez que o botão for clicado a função conectada é executada.

Parâmetros:

1 – Componente a ser conectado. No caso o botão bt.

2 – Nome do evento. (variável reservada, aprenderemos outras além do ig.clique mais tarde)

3 – nome da função conectada. (Nome correto da função sem os parênteses)

4 – Dado extra que é passado para a função conectada quando ela é executada. (pode ser uma variável, tabela, componente, ou até mesmo outra função.)

Aqui nós adicionamos o componente botão na caixa fixa, nas coordenadas 100 por 50. ( coluna x linha );

Aqui mostramos a janela com todos os seus componentes filhos, incluindo o painel fixo com o botão.

E iniciamos o loop de eventos do IG. (loop = repetição, laço, ciclo);

Obs. fechamos a função principal com seu respectivo ‘fim’.

Esta é a implementação da função que foi conectada ao botão acima.

Dentro dela podemos usar a criatividade, dependendo do propósito do programa e do botão criado, e assim colocamos aquilo que será executado ao clicar no botão.

Podemos, até mesmo, colocar outras funções dentro da callback (função conectada);

Neste caso, como é apenas um exemplo, coloquei o comando imprima, e inclusive uma função útil se vc quiser pegar o texto (rótulo) do botão clicado.

Quando o botão é clicado, uma mensagem é mostrada no terminal.

Passamos como dado extra a janela para alterarmos o título da mesma quando o botão for clicado.

 

Algumas ponderações:

Podemos criar quantos botões quisermos, e conectarmos até mais de uma função em cada botão. Podemos, também, conectar uma mesma função em vários botões.

2 – Botão com imagem

ig_bt_ex2

Baixe as imagens gratuitamente aqui: http://www.iconesgratis.net/icones_de/botoes

Se preferir, pode inserir uma imagem facilmente no botão. Isso com certeza deixa o programa mais atrativo visualmente.

Salve como botao_imagem.prisma

 

Detalhes:

O exemplo é semelhante ao anterior, só modificado, por isso vamos à parte que importa:

Criamos um componente imagem a partir de um arquivo png.

Parâmetro: string descrevendo o caminho do arquivo png, jpg, ico, gif, svg etc.

Definimos a imagem para o botão.

Parâmetros:

  1. botão onde será inserida a imagem.
  2. componente imagem criada previamente.

O restante é igual ao exemplo anterior.

Obs.: Caso deseje mudar a posição da imagem use a função:

Parâmetros:

1 – botão onde está a imagem a ser modificada.

2 – posição da imagem que é uma variável reservada ig, veja:

ig.POS_ESQUERDA, ig.POS_DIREITA, ig.POS_SUPERIOR (em cima), ig.POS_INFERIOR (embaixo).

3 – Mudando a imagem do botão

 

Muito útil quando queremos chamar a atenção ao passar o mouse por cima do botão, alterando a cor.

Neste caso usaremos os eventos ig.dentro (quando o mouse entrar dentro da área do botão) e ig.fora (quando o mouse sair da área do botão);

ig_bt_ex3_mouse_fora ig_bt_mouse_dentro_img

Veja o exemplo:

Salve como bt_troca_imagem.prisma

 

Vamos ignorar aquilo que já foi explicado nos exemplos anteriores, vamos para o que é novidade:

Criamos um botão vazio, sem parâmetro algum.

 

Modificamos o relevo do botão para NULO, ou seja a borda não aparecerá.

Parâmetros:

1 – botão

2 – tipo de relevo, pode ser: ig.RELEVO_NORMAL, ig.RELEVO_MEDIO, ig.RELEVO_NULO.

 

Criamos uma imagem a partir de um arquivo e inserimos no botão.

Conectamos uma função ao evento ig.dentro do botão (quando o mouse entra na área do botão).

E conectamos a outra função ao evento ig.fora do botão (quando o mouse sai do botão).

Criamos outro botão com o Texto ‘ Sair ‘.

Criamos uma imagem a partir do estoque (SAIR) com tamanho 5 (do 1 ao 6, em que 6 é o tamanho máximo); e inserimos no botão sair.

conectamos a função ig.fimjanela ao evento clique do botão sair (lembrando que a função ig.fimjanela é definida na biblioteca igbr, ela encerra o loop de eventos do ig).

Esta é a função conectada ao evento ig.dentro, quando o mouse entra no botão ela é executada.

Dentro desta função, criamos a imagem de cor azul e definimos no botão.

Aqui, temos a função conectada ao evento ig.fora, quando o mouse já está dentro do botão e ao sair dele essa função é executada.

Dentro desta função criamos novamente a imagem de cor vermelha e definimos no botão.

O restante do código é igual aos exemplos anteriores.

 

4 – Botão criado a partir do estoque

ig_bt_estoque

Salve como bt_estoque.prisma.

 

Detalhes:

Vamos para o que é novidade:

Esta função define uma dica para componentes (janelas, botões, textos, etc.) e em modo markup, ou seja, podemos usar algumas tags especiais para configurar o texto exibido na dica. (Veja o resultado deste exemplo colocando o mouse sobre a janela)

 

Aqui criamos um botão a partir do estoque, com imagem e texto. (O interessante é que o texto é traduzido automaticamente para o idioma padrão do pc)

Para uma lista do estoque veja o link abaixo:

https://linguagemprisma.br4.biz/blog/estoque-de-imagens/

 

Na função acima, definimos uma dica markup para o botão sair.

 

 

5 – Botões com setas

 

ig_bt_setas

 

Detalhes:

Criamos um botão vazio.

Criamos a seta:

Parâmetros:

1 – tipos de seta: ig.SETA_CIMA, ig.SETA_BAIXO, ig.SETA_DIREITA, ig.SETA_ESQUERDA;

2 – tipo do efeito: ig.SOMBRA_DENTRO; ig.SOMBRA_FORA, ig.SOMBRA_RISCADO_DENTRO, ig.SOMBRA_RISCADO_FORA;

Tente alterar os valores e veja os resultados, geralmente as sombras são praticamente imperceptíveis dependendo do sistema e do tema.

Os outros comandos já foram detalhados!

6 – Funções úteis para botões:

 

* ig.botao_mostre_imagem(valor);

Define todas as imagens dos botões como visíveis ou não.

Parâmetro: valor = verdadeiro ou falso.

* img = ig.botao_obt_imagem(botao);

Obtém a imagem do botão. Note que em ig imagem não é a foto ou ilustração, mas sim o contêiner onde aparece a imagem.

  1. parâmetros: botão com imagem.
  2. retorno: variável ig imagem.

* pos = botao_obt_posicao_imagem(botao);

Retorna um número que indica a posição da imagem.

  1. parâmetro: botão com a imagem.
  2. retorno = posição da imagem, que pode ser igual a ig.POS_ESQUERDA, ig.POS_DIREITA, ig.POS_SUPERIOR (em cima), ig.POS_INFERIOR (embaixo).

* ig.botao_def_rotulo(botao, “texto”);

Define um novo texto (rótulo) para o botão.

Parâmetros: 

  1. botao
  2. string (texto) para ser inserida no botão.

* ig.botao_def_alinhamento(botao, x,y);

Parâmetros:

  1. botao – é o botão criado previamente.
  2. x – é o alinhamento horizontal – 0.0 até 1.0 (0.0 = esquerda, 0.5 = 50%(meio), 1.0 = direita);
  3. y – alinhamento vertical – 0.0 até 1.0 (0.0 = cima, 0.5 = 50%(meio), 1.0 = embaixo);

obs. possível usar em x e y valores como 0.09 (9%) ou 0.8 (80%), 0.3 etc.;

* x, y = ig.botao_obt_alinhamento(botao);

Obtém os valores atuais de alinhamento. (dois valores: x e y);

Parâmetro:

  1. botao – botão criado previamente.

retornos:

  1. x – número de 0.0 a 1.0 para alinhamento horizontal.
  2. y – número de 0.0 a 1.0 para alinhamento vertical.

Obs.: o retorno é múltiplo, dever seguir exatamente a ordem x, y separados por vírgula.

 

* bt = ig.botao_com_mnemonico(‘_Texto’);

Cria um novo botão com tecla de atalho mnemônico, no exemplo acima se pressionarmos as teclas ALT + T o botão é clicado.

Parâmetro:

  1. Texto a ser exibido no botão, coloque um underscore antes da letra que será o atalho. (ex.: ‘E_xecutar’ = ALT+X);

Retorno:

  1.  bt – variável ig botão (userdata que representa o ponteiro para o botão criado);

TIPO_RELEVO = ig.botao_obt_relevo(bt);

Obtém o número que descreve o tipo de relevo definido pela função

Parâmetro:

  1. bt – botão criado previamente.

retorno:

  1. TIPO_RELEVO = tipo de relevo que pode ser:         ig.RELEVO_NULO (nenhum), ig.RELEVO_MEDIO, ig.RELEVO_NORMAL.

 

* ig.botao_def_relevo(bt, ig.RELEVO_*);

Define o tipo de relevo para o botão.

Parâmetros:

  1.  Botão criado previamente.
  2. Tipo de relevo. (São os mesmos tipos da função anterior)

Retornos: não possui. 

 

 

*  valor = ig.botao_obt_usa_estoque(bt);

Diz se o botão é de estoque ou não.

Parâmetro:

  1. bt –  botão criado previamente.

Retorno:

  1. valor – pode ser: verdadeiro (botão é do estoque) ou falso (não é do estoque);

* ig.botao_def_usa_estoque(bt, valor);

Define se o botão deve ser interpretado como id do estoque.

Parâmetros: 

  1. bt – botão previamente criado.
  2. valor – verdadeiro ou falso. (se verdadeiro, o rótulo do botão é usado como id para selecionar um item do estoque para o botão).

 

* valor = ig.botao_obt_usa_sublinhado(bt);

Diz se o botão pode ser usado como mnemônico ou não.

Parâmetro: 

  1. bt – botão previamente criado.

Retorno:

  1. valor – se falso, não é mnemônico. Se verdadeiro, então é mnemônico.

 

* ig.botao_def_usa_sublinhado(bt, valor);

Define um botão como mnemônico, mesmo que ele não tenha sido criado com a função ig.botao_com_mnemônico();

Parâmetros: 

  1. bt – botão criado previamente.
  2. valor – verdadeiro ou falso; (se falso, não é mnemônico. Se verdadeiro, então é mnemônico.)

Obs.: coloque um sublinhado _ antes da letra que deseja ser o atalho (ALT+letra);

 

* ig.botao_def_foco_ao_clicar(bt, valor);

Define se o botão terá foco ou não ao ser clicado.

Parâmetro:

  1. bt – botão.
  2. valor – verdadeiro (sim), falso (não);

 

* valor = ig.botao_obt_foco_ao_clicar(bt);

Diz se um botão está definido ou não para receber foco ao clique.

Parâmetro:

  1. bt – botão;

Retorno:

  1. valor – verdadeiro (sim), falso (não).

 

* comp = ig.botao_obt_janela_evento(bt);

Obtém a janela de eventos (GdkWindow) do botao.

Parâmetro:

  1. bt – botão;

Retorno:

  1. comp – componente janela de evento (userdata representando o ponteiro para GdkWindow do C);

Obs.: Poucos serão os momentos em que você usará essa função.

Obs.: não listei aqui as funções usadas nos exemplos acima pois foram bem explicadas anteriormente.

 

páginas: 1 – 2 – <3> – 4