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

Introdução:

 

Neste tutorial pretendo demonstrar de modo mais objetivo como fazer programas prisma com interface gráfica, isto é, programas visuais com janelas, botões, caixas de texto etc.

O módulo ig  é um conjunto básico de funções que permitem a criação de programas visuais. Feito a partir do Gtk+-2 convertido de C para funções prismas, está em constante desenvolvimento, o que significa que novas funcionalidades serão feitas futuramente. Este módulo é instalado por padrão junto com Prisma e necessita das dlls do gtk+-2 para funcionar, ambos disponíveis na página de downloads. Não é necessário caso use Ubuntu ou qualquer distro linux com gtk+-2 instalado.

---

 

igbr

 

O ig é totalmente em português, até nos fontes C.

Você pode incluir a biblioteca ig de duas formas:

1. inclua’igbr’
2. inclua’ig’

Na verdade o ig é um atalho que chama o igbr.

 

Janela (window)

É a região retangular ou quadrada onde colocaremos os componentes veja alguns exemplos:

         

 

 

   Primeiro programa

 

Chegou a hora de fazermos nosso primeiro programa em igbr, vamos lá:

Com o prismacod aberto, crie um arquivo fonte chamado janela.prisma, salve numa pasta separada especificamente para este tutorial.

Adicione o seguinte código:

 

Clique no botão executar do prismacod e veja o resultado:

Analisando os códigos:

A linha acima é um comentário, o interpretador não executará esta linha.

 

Nesta linha importamos o módulo igbr prisma para usar suas funções de interface gráfica.

 

Aqui criamos a janela com titulo e dimensões de 300 x 400. Mude os valores e veja o que acontece.

 

Observe que ao criarmos a janela dizemos que jan é igual a, isto faz com que a janela criada fique armazenada na variável jan para que possamos usar depois caso queiramos modificar algo da janela criada. Desta forma podemos criar muitas janelas e manuseá-las por suas variáveis.

 

Este comando faz com que a janela recém criada fique visível e ativa na tela do seu computador. Seu único parâmetro é o componente que queremos mostrar, no nosso caso a janela, basta passar a variável da janela criada.

 

Este é um comando que sempre deve estar lá na última linha de seu programa IG. Sem ele não funciona.

Seu propósito é inicializar o loop de eventos executando seu programa. (o laço gtk que aguarda por algum evento como o clique de um botão, por exemplo).

Algumas considerações:

Quando usamos strings em Prisma podemos colocá-las entre aspas simples, duplas ou até mesmo entre duplos colchetes:

Não deixe espaços entre o parâmetro e os delimitadores no comando inclua senão gerará erro.

 

Segundo programa – centralizando a janela na tela:

janela_centro.prisma

Veja o resultado (em Ubuntu 14.04)

Analisando os códigos:

Desta vez, ao criarmos a janela, passamos o parâmetro tipo de janela, e não o título ou dimensões.

os tipos são dois: ig.JANELA_COMBORDA e ig.JANELA_SEMBORDA  (não precisa nem explicar o nome do tipo já diz tudo);

Tente trocar o valor tipo de janela e veja os resultados.

Obs. Fica ao critério do programador que parâmetros passar ao criar a janela.

 

 

Esta função serve para criar ou modificar o título. Lembrando que o primeiro parâmetro é a própria janela criada o segundo é uma string do título.

 

 

A função acima define um tamanho padrão para a janela. Os parâmetros são:  ( janela ,  largura , altura )

 

Este comando serve para definir uma posição para a janela. Os parâmetros são: ( janela , posicao ) em que posição é uma variável predefinida. Exemplos de posições:

ig.JANELA_POS_CENTRO = centro da tela
ig.JANELA_POS_CENTRO_SEMPRE = centro da tela
ig.JANELA_POS_CENTRO_PAI = dentro da janela pai
ig.JANELA_POS_MOUSE =  na posição do mouse na tela
ig.JANELA_POS_NULO = nenhum (Aleatório);

 

Mostrando a janela.

 

Serve para fechar o programa ao fechar a janela principal. Você deve ter notado que no primeiro programa mesmo fechando no x da janela, a tela preta de comandos ficava aguardando. Isso acontece porque a aplicação não foi fechada definitivamente e ficou em background. Apenas nunca esqueça de colocar esse comando conectado na janela principal ou seu programa nunca terminará corretamente.

Leia da seguinte forma: conecte a função fimjanela ao evento fechar janela, para que o programa feche quando a janela for fechada.

 

E por fim a última função, sem ela não funcionaria o programa. Simplesmente inicia o laço de eventos do ig.

 

programa 3 – escrevendo na janela:

O componente que iremos utilizar é o rótulo. Veja:

janela3.prisma

Vejamos o que há de novidade aqui:

Define a largura da borda interna da janela, o padrão é zero, ou seja, o rótulo tocaria nos limites da janela. Definimos 12 para que o rótulo fique a uma distância de 12 pixels dos limites das bordas da janela.

Obs.: Mude os valores e veja o resultado, ajuda a entender para que serve esta função.

 

Aqui criamos o rótulo de texto, omitimos os parênteses, prisma aceita isso quando o único argumento for uma string ou tabela. Note que armazenamos o identificador do rotulo na variável ‘Texto’ para manipulação posteriormente.

 

É preciso usar esta função para desenhar visivelmente o componente após criá-lo;

Esta função serve para colocar um componente dentro da janela. Sim, em Ig prisma nós criamos componentes e colocamos uns dentro dos outros, isso é possível quando forem do tipo caixa, a janela, por exemplo, é do tipo caixa, mas que aceita apenas um componente por vez.

Essa característica torna a programação como a construção de algo por peças.

 

07/03/2017 Após um bom tempo parado, retomo o tutorial com prisma na versão 1.0.100, vão à página de download e baixe-a novamente, alguns comandos mudaram e vou tentar expô-los aqui de pouco a pouco.

 

4 – Definindo um ícone para janela

janela_icone.prisma

Detalhes:

Aqui temos a nova função que coloca o ícone na barra de título da janela. Ele também aparece na barra de ferramentas onde o programa é minimizado.

O primeiro parâmetro é a janela, o segundo é o caminho do arquivo, troque de acordo com o ícone que você escolher.

5 – Definindo dica para um componente

Dica.prisma

Aparece uma mensagem quando o mouse permanece sobre o componente.

Seque o código:

Detalhes:

Esta função acima define uma tooltip (dica) para o componente Texto que é um rótulo criado antes.

Primeiro parâmetro é o componente (botão, janela, entra texto, imagem, etc.)

O segundo parâmetro é uma string descrevendo a dica.

6 – Definindo uma cor de fundo para janela

corfundo.prisma

Criamos um objeto cor, note que o ‘*t’ serve para forçar o retorno como uma tabela que contém:

<<Azul.r , Azul.g, Azul.b, Azul.p>>

Sem o ‘*t’ são retornados 4 valores em formato:

R, G, B, P (red,green, blue, profundidade);

Após criar o objeto ‘cor’ basta usar a função acima. O primeiro parâmetro é o componente; o segundo parâmetro é o estado definido como ESTADO_NORMAL. Em botões e componentes parecidos temos ESTADO_NORMAL, quando o mouse não está em cima, e ESTADO_FOCO quando o mouse está em cima do componente.

Para janela somente o ESTADO_NORMAL mesmo.

O último parâmetro é o objeto cor criado anteriormente.

Obs. Nem todo componente pode ser ‘pintado’ como o rótulo, por exemplo. Mas existe uma maneira de se contornar isso usando a caixa de evento que vou explanar mais adiante.

Dica: para ver mais sobre cores em ig vá para cores em ig Prisma.

---

Algumas considerações:

 

Você já deve ter notado que as funções do ig seguem um certo padrão, uma lógica.

cria-se o componente usando a função com nome do componente, exemplo:

ig.janela();

Modifica-se o componente com uma função que começa pelo nome do componente, ex:

ig.janela_def_titulo();

Observe que temos ‘def’ que significa ‘defina’. Eu abreviei para economizar espaço e tempo no código. Temos também o oposto respectivo, ex:

titulo_atual = ig.janela_obt_titulo(jan);

obt significa obtenha. Com a função acima você pega o título da janela passada como parâmetro 1 em uma variável string.

 Veja que apesar de ser em português os comandos, não podemos colocar acento, pois gera erro de codificação.

Logo não devemos escrever janela_def_título com acento!

Muitas funções da interface gráfica seguirão esse modelo:

nome + obt ou def ou modifique + ação(titulo,corfundo etc);

Ao criar a biblioteca ig preferi usar underlines em nomes compostos do que usar inicial maiúscula, pois acredito que o código fica mais legível, seguindo assim, o estilo do gtk que é base desta lib.

---

7 – Imagem de fundo na janela

imagem_fundo.prisma

Detalhes:

Neste exemplo usei a função principal para melhor organizar o código, é como o Main de outras linguagens, inclusive com o Args.

Como você pôde ter percebido nos outros exemplos não é obrigatório o uso da função principal, mas eu aconselho pois o programa fica mais legível.

Lembre-se de retornar zero no fim da função.

Na função acima colocamos a imagem passaro.jpg no fundo da janela, eu poderia ter posto componentes por cima da imagem sem problemas. Troque por sua imagem.

Obs. se a imagem estiver na mesma pasta do programa não precisa do caminho completo caso contrário sim.

---

8 – Contêineres – Caixa fixa:

caixa_fixa.prisma

A janela é um contêiner, isto é, dentro dela podemos colocar componentes, mas somente um. Não tem como colocar dois botões, por exemplo, em uma janela. Para resolver isto, nós usamos os componentes ‘caixas’ nos quais podemos adicionar mais de um widget (componente).

Existem vários tipos de caixas: fixas, vertical, horizontal, tabela, abas, etc.

Veremos agora um exemplo de caixa fixa:

Detalhes:

Cria uma caixa do tipo fixa, ou seja, os componentes serão colados nesta caixa em pontos fixos, coordenadas x , y; em que x é a coluna e y é a linha.

Obs.: fixo() vem de Painel Fixo.

Adiciona a caixa fixa na janela.

Cria um botão com o texto ‘clique me’.

Coloca o botao bt dentro da caixa fixa na coluna 10 e na linha 80.

Note que desta vez usei um comando que mostra a janela e todos os seus componentes filhos. Assim não precisa mostrar cada componente individualmente.

O restante do código foi explicado anteriormente.

Obs.: criamos o botão bt mas não demos nenhuma função para ele, portanto, mesmo que você clique nele não acontece nada.

9 – Conectando uma função ao botão

 

Detalhes:

Para dar uma função ao botão basta criar uma função Prisma normalmente e conectá-la ao botão, mais especificamente ao evento clique no botão.

Esta função acima faz o conexão da função com o botão.

Parâmetro:

1 – componente a ser conectado, no caso o botão.

2 – Evento. Depende do componente, pode ser um clique, o movimento do mouse, o pressionar de uma tecla. Neste exemplo nó usamos o evento ig.clique que é uma variável reservada de evento. Veremos outras adiante.

3 – A função a ser conectada. Não tem segredo, é o nome da função Prisma que você quer que seja executada quando o evento ocorrer. Veja que é só o nome sem parênteses.

4 – o quarto parâmetro é o dado extra que é passado para a função a cada chamada. Neste caso passamos a janela.

Retorno:

1 – o retorno é o id da conexão, um número. No exemplo acima não o usamos pois não precisamos dele. O id da conexão é útil quando você quer desconectar a função para que ela não responda mais ao componente conectado.

---

Esta é a função que foi conectada, veja que os parâmetros são:

1 – Componente conectado.

2 – o dado extra, que no caso foi a janela.

Esses parâmetros são passados automaticamente a cada chamada da função.

Dentro da função, colocamos uma mensagem, usando o ig.msg()

Os parâmetros são:

1 – jan – a janela principal para que a mensagem apareça centralizada nela. Ou nulo se desejar.

2 – ‘Titulo’ – Texto que aparece na barra de título da mensagem.

3 – É o conteúdo da mensagem, uma string.

O que acontece ao clicar no botão é o aparecimento dessa mensagem:

---

10 – Criando um botão que fecha a janela

 

bt_fechar.prisma

Detalhes:

Criamos um botão com rótulo: fechar janela

Conectamos a função sair no clique do botão, passamos o argumento extra que é a janela a ser fechada.

A função Callback (como são chamadas as funções conectadas a algum evento) é praticamente igual ao exemplo anterior. Dentro dela usei as seguintes funções que fecham o programa:

Destrói um componente (Exclui), no caso a janela.

Essa função faz o laço de eventos do ig parar, e assim o programa continua após a função ig.fimprograma(); no exemplo acima retorna zero e não faz mais nada, finalizando.

 

Obs. as ilustrações aqui são em ambiente Linux Mate. Caso usem Windows o visual da janela será diferente, mas o efeito é o mesmo.

---

11 – Maximizando, Minimizando e (Des)maximizando uma janela

max.prisma

Código:

 

Este exemplo é um pouco maior que os anteriores, mas nada de complicado, veja os detalhes.

Definimos a decoração da janela como falso, ou seja, não irá aparecer borda nem botões de fechar, maximizar etc.

Caso queira redefinir no mesmo programa a decoração da janela chame novamente a função ig.janela_def_decoracao(), mas como verdadeiro.

Parâmetros:

1 – jan – janela que se quer modificar a decoração.

2 – verdadeiro ou falso – para mostrar decoração ou ocultar.

Não há retornos.

---

 

Criamos 4 botões: para fechar (‘X’), para maximizar (‘+’), des_maximizar (‘O’) e minimizar (‘-‘).

Agora devemos conectar cada função ao respectivo botão e adicionarmos todos os botões na caixa fixa, como no trecho acima.

Eu quis fazer um detalhe no botão fechar colocando-o na cor vermelha quando mouse estiver sobre ele. Crie a cor usando a função ig.cor_analise(ig.NOMECOR) ou usando o rgb: ig.cor( 0 à 65535 para Vermelho / verde / azul (R,G,B);

Depois de criar a cor usamos a função:

Parâmetros:

1- bt_sair : é o componente botão sair que será mudado a cor.

2 – ig.ESTADO_FOCO : variável de estado foco, só muda a cor quando o mouse estiver em cima do componente.

3 – O objeto cor criado anteriormente.

Para os demais botões o processo foi o mesmo exceto que não mudei a cor deles.

Como fazer as funções callbacks também já expliquei acima, vamos apenas pegar os comandos que interessam:

Maximiza a janela.

Minimiza a janela.

Caso necessite existe também  a função ig.desminimize(jan); para fazer a janela voltar do estado minimizado para o normal.

Desmaximiza a janela. (Volta ao tamanho normal);

Dicas:

Tente modificar o programa acima usando as funções que vou listar abaixo:

 

---

 

12 – Contêineres – Caixa vertical e Caixa horizontal:

caixav.prisma

Detalhes:

Caixa vertical é um tipo de contêiner que ajusta seus componente filhos automaticamente na vertical.

Aqui criamos uma caixa vertical.

Parâmetros:

1 – O primeiro parâmetro é verdadeiro ou falso:

A – Se verdadeiro, os componentes ficam distribuídos de forma igual por toda a caixa em sentido vertical.

Veja a imagem abaixo:

Ao aumentar a janela os componentes ficaram espalhados igualmente.

B – Se falso, os componentes ficam ancorados uns nos outros ao aumentar a janela, veja na imagem abaixo:

Observe que agora os componentes não se espalharam, ficaram juntos, sobrando uma parte da janela quando ela foi aumentada.

Como definimos falso então os componentes não ficarão espalhados.

2 – O segundo parâmetro é um número que define o espaçamento, a distância mínima que ao encolher a janela os componentes ficam uns em relação aos outros.

---

 

Adicionamos a caixa vertical na janela normalmente.

---

 

Criei 5 botões. Poderia ter criado automaticamente usando uma tabela e o laço ‘para’, mas preferi assim para ficar mais claro.

Conectamos todos os botões na mesma função, isso é possível e aqui no exemplo não preciso mais do que mostrar uma mensagem exibindo o rótulo do botão. O importante é você entender a caixa vertical.

Aqui é o método para se colocar os componentes dentro da caixa vertical.

1 e 2 – O primeiro parâmetro é a caixa vertical, o segundo é o componente a ser inserido na caixa.

3 – O terceiro parâmetro é falso ou verdadeiro.

Se falso, o componente não fica espalhado.

Se verdadeiro, o componente se espalha ao aumentar a janela, igual o primeiro parâmetro da função que cria a caixa.

4 – O quarto parâmetro pode ser verdadeiro ou falso, é o preenchimento, ou seja, quando a janela é aumentada o componente também aumenta acompanhando a janela. Se falso não aumenta na vertical, só na horizontal. Repare na imagem no início deste exemplo, o quinto botão está maior que os outros.

Obs. O preenchimento só terá efeito se o espalhamento também estiver definido como verdadeiro.

5 – O quinto parâmetro é o espaçamento, a distância entre o componentes.

Obs. Se você já definiu 5 de espaçamento ao criar a caixa vertical, se definir 5 também ao adicionar os componentes na caixa, o espaçamento será 10, ou seja, a soma.

---

E a caixa horizontal?

Este é o seu dever de casa, pegue o exemplo acima e troque de:

para:

E veja o resultado:

Considerações:

A vantagem de se usar caixas verticais ou horizontais em relação a caixa fixa é que o layout (o desenho) da interface gráfica fica mais flexível seja qual sistema operacional estiver. Pois os componentes se ajustam ao tamanho da janela.

Dica: é possível colocar até mais de uma caixa dentro de outra. Isso ajuda a desenhar melhor e distribuir os componentes de um programa com interface gráfica.

 

---

13 – Contêineres – caixa de alinhamento.

Essa caixa, assim como a janela só aceita um único componente.

Use-a quando quiser alinhar um componente.

Segue o código:

Detalhes:

Essa é um outra função para posicionar a janela, diferentemente da ig.janela_def_posicao(), esta acima usa coordenadas x – y para posicionar a janela.

Parâmetros:

1 – janela a ser posicionada

2 – Coordenada da coluna.

3 – Coordenada da linha.

---

Esta é a função que cria uma caixa de alinhamento.

Parâmetros:

1 – alinhamento horizontal. 0 = esquerda, 1 = direita.

2 – alinhamento vertical. 0 = em cima, 1 = embaixo;

3 – Expansão horizontal. 0 = não expande, 1 = expande.

4 – Expansão vertical. 0 = não expande, 1 = expande.

Obs. Expandir significa que ao aumentar a janela o componente aumenta junto com ela preenchendo o espaço vazio.

No caso acima, os parâmetros definem que o rótulo fique no lado esquerdo, na parte de baixo da janela, e não expande nem horizontal nem verticalmente.

---

 

Crio um rótulo.

Coloquei o rótulo dentro da caixa de alinhamento.

E a caixa de alinhamento dentro da janela.

O restante vocês já sabem, mostrar a janela com todos os componentes filhos e o laço de eventos.

 

Dicas: Você pode usar vários alinhamentos um para cada componente, e colocá-los em uma caixa vertical, por exemplo.

Veja um exemplo completo:

Observe que ao criar o botão ok passei os parâmetros do tamanho (largura, altura).

O restante do código é igual aos exemplos anteriores. Tente mudar os valores para entender o funcionamento.

Veja a imagem deste exemplo:

Lembrando que eu uso Linux, mas o resultado é o mesmo no Windows, só muda o estilo da janela.

---

 

14 – Contêiner – Caixa Tabela.

Esta caixa distribui os componentes em linhas e colunas.

igtabela.prisma

Detalhes:

Criamos uma caixa tabela com 3 linhas e 4 colunas.

Parâmetros:

1 – Número de linhas

2 – Número de colunas

3 – Expansão: se verdadeiro, os componentes aumentam ao aumentar a janela. Se falso, não.

Retorno = variável do tipo igtabela (GtkTable).

---

Aqui definimos o espaço entre linhas e entre colunas;

Criamos 4 botões.

Colocamos o botão bt_1 na primeira coluna indo até a quarta coluna, e na primeira linha, indo até a primeira mesmo.

Vamos entender melhor:

Parâmetros:

1 – Tabela

2 – componente a ser inserido na tabela.

3 – ponto inicial da coluna (0 = 1ª coluna)

4 – ponto final da coluna, até qual coluna o componente vai ocupar. 1 = 1ª coluna.

Então para o ponto inicial devemos começar do zero se quisermos pôr o componente na primeira coluna ou começar do 1 se quisermos colocar o componente a partir da segunda coluna.

Já para indicar até onde se estende o componente, começamos por 1 quando quisermos que o componente vá até a primeira coluna ou 2 ou 3 se quisermos que o componente ocupe o espaço que vai até a 2ª ou 3ª coluna.

O mesmo serve para linhas.

5 – ponto inicial da linha. 0 = 1ª linha.

6 – ponto final da linha, até que linha se estende o componente. 1 = 1ª linha.

Para a linha vale o mesmo que expliquei acima para a coluna.

Dica: para você entender melhor, modifique os números e veja o que acontece, só não coloque o número inicial igual ou maior que o final.

Se os valores forem maior que 4 colunas e 3 linhas, aumente também o número de colunas e linhas criadas ao criar a tabela.

---

O botão bt_2 foi colocado na primeira coluna (0), até a 3ª coluna, e na 2 linha (1) até a 2 linha.

Já o botão bt_3 na 4ª coluna (3) até a 4ª coluna, na 3ª linha(2) até a 3ª linha.

E, por fim, colocamos o botão bt_4 na 2ª coluna (1) até a 2ª coluna, na linha 3 (2) até a 3ª coluna.

Depois é só colocar a tabela na janela. Mostrar os componentes e iniciar o laço de eventos do ig.

 

Observe que no exemplo coloquei botões apenas, mas o mesmo poderia ser feito com entra texto, área de texto, rótulo etc.

Desafio, tente fazer um programa que fique igual a imagem abaixo:

 

 

Use os links abaixo para navegar pelas páginas:

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