{"id":774,"date":"2015-05-03T03:20:37","date_gmt":"2015-05-03T03:20:37","guid":{"rendered":"http:\/\/linguagemprisma.net\/blog\/?page_id=774"},"modified":"2018-03-17T20:14:17","modified_gmt":"2018-03-18T00:14:17","slug":"tutorial-interface-grafica-igprisma","status":"publish","type":"page","link":"https:\/\/linguagemprisma.br4.biz\/blog\/tutorial-interface-grafica-igprisma\/","title":{"rendered":"Tutorial interface gr\u00e1fica IGprisma"},"content":{"rendered":"

p\u00e1ginas: <1<\/a>><\/strong> – 2<\/a> – 3<\/a>\u00a0– 4<\/a><\/h2>\n

<\/h2>\n

<\/h2>\n

<\/h2>\n

Introdu\u00e7\u00e3o:<\/h2>\n

 <\/p>\n

Neste tutorial pretendo demonstrar de modo mais objetivo como fazer programas prisma com interface gr\u00e1fica, isto \u00e9, programas visuais com janelas, bot\u00f5es, caixas de texto etc.<\/p>\n

O m\u00f3dulo\u00a0ig\u00a0<\/strong>\u00a0\u00e9 um conjunto b\u00e1sico de fun\u00e7\u00f5es que permitem a cria\u00e7\u00e3o de programas visuais. Feito a partir do Gtk+-2 convertido de\u00a0C para fun\u00e7\u00f5es prismas, est\u00e1 em constante desenvolvimento, o que significa que novas funcionalidades ser\u00e3o feitas futuramente. Este m\u00f3dulo \u00e9 instalado por padr\u00e3o junto com Prisma e necessita das dlls do gtk+-2 para funcionar, ambos dispon\u00edveis na p\u00e1gina de downloads. N\u00e3o \u00e9 necess\u00e1rio caso use Ubuntu ou qualquer distro linux com gtk+-2 instalado.<\/p>\n

\n

 <\/p>\n

igbr<\/strong><\/span><\/h2>\n

 <\/p>\n

O ig \u00e9 totalmente em portugu\u00eas, at\u00e9 nos fontes C.<\/p>\n

Voc\u00ea pode incluir a biblioteca ig de duas formas:<\/p>\n

    \n
  1. inclua’igbr’<\/li>\n
  2. inclua’ig’<\/li>\n<\/ol>\n

    Na verdade o ig \u00e9 um atalho que chama o igbr.<\/p>\n

     <\/p>\n

    Janela (window)<\/h3>\n

    \u00c9 a regi\u00e3o retangular ou quadrada onde colocaremos os componentes veja alguns exemplos:<\/p>\n

    \"Simple\"\u00a0 \u00a0\u00a0\"\"\u00a0 \u00a0 \u00a0\"\"<\/p>\n

     <\/p>\n

     <\/p>\n

    \u00a0 \u00a0Primeiro programa<\/h1>\n

     <\/p>\n

    Chegou a hora de fazermos nosso primeiro programa em igbr, vamos l\u00e1:<\/p>\n

    Com o prismacod aberto, crie um arquivo fonte chamado janela.prisma, salve numa pasta separada especificamente para este tutorial.<\/p>\n

    Adicione o seguinte c\u00f3digo:<\/p>\n

    \/\/primeiro programa grafico em ig prisma\r\n\r\ninclua 'igbr';\r\n\r\njan = ig.janela( 'titulo da minha janela' , 300 , 400 \u00a0);\r\nig.componente_mostre(jan);\r\nig.fimprograma();\r\n\r\n<\/pre>\n
     <\/p>\n
    Clique no bot\u00e3o executar do prismacod e veja o resultado:<\/p>\n
    \"ig_janela_simples\"<\/p>\n
    Analisando os c\u00f3digos:<\/p>\n
    \/\/primeiro programa grafico em ig prisma\r\n<\/pre>\n
    A linha acima \u00e9 um coment\u00e1rio, o interpretador n\u00e3o executar\u00e1 esta linha.<\/p>\n
     <\/p>\n
    inclua 'igbr';<\/pre>\n
    Nesta linha importamos o m\u00f3dulo igbr prisma para usar suas fun\u00e7\u00f5es de interface gr\u00e1fica.<\/p>\n
     <\/p>\n
    jan = ig.janela( 'titulo da minha janela' , 300 , 400 \u00a0);<\/pre>\n
    Aqui criamos a janela com titulo e dimens\u00f5es de 300 x 400. Mude os valores e veja o que acontece.<\/p>\n
     <\/p>\n
    Observe que ao criarmos a janela dizemos que jan \u00e9 igual a,\u00a0<\/strong>isto faz com que a janela criada fique armazenada na vari\u00e1vel\u00a0jan\u00a0<\/strong>para que possamos usar depois caso queiramos modificar algo da janela criada. Desta forma podemos criar muitas janelas e manuse\u00e1-las por suas vari\u00e1veis.<\/p>\n
     <\/p>\n
    ig.componente_mostre(jan);<\/pre>\n
    Este comando faz com que a janela rec\u00e9m criada fique vis\u00edvel e ativa na tela do seu computador. Seu \u00fanico par\u00e2metro \u00e9 o componente que queremos mostrar, no nosso caso a janela, basta passar a vari\u00e1vel da janela criada.<\/p>\n
     <\/p>\n
    ig.fimprograma();<\/pre>\n
    Este \u00e9 um comando que sempre deve estar l\u00e1 na \u00faltima linha de seu programa IG. Sem ele n\u00e3o funciona.<\/p>\n
    Seu prop\u00f3sito \u00e9 inicializar o loop de eventos executando seu programa. (o la\u00e7o gtk que aguarda por algum evento como o clique de um bot\u00e3o, por exemplo).<\/p>\n
    Algumas considera\u00e7\u00f5es:<\/strong><\/p>\n
    Quando usamos strings em Prisma podemos coloc\u00e1-las entre aspas simples, duplas ou at\u00e9 mesmo entre duplos colchetes:<\/p>\n
    inclua 'igbr'; \u00a0 \u00a0ou \u00a0 \u00a0inclua \"igbr\" \u00a0 \u00a0 \u00a0 \u00a0ou \u00a0 \u00a0 \u00a0inclua [[igbr]];<\/pre>\n
    N\u00e3o deixe espa\u00e7os entre o par\u00e2metro e os delimitadores no comando inclua sen\u00e3o gerar\u00e1 erro.<\/p>\n
     <\/p>\n
    Segundo programa – centralizando a janela na tela:<\/h1>\n
    janela_centro.prisma<\/em><\/p>\n
    inclua 'igbr';\r\n\r\njan = ig.janela( ig.JANELA_COMBORDA );\r\n\r\nig.janela_def_titulo (jan , \"Minha segunda janela\" );\r\n\r\nig.janela_def_tamanho_padrao (jan , 230 , 150 );\r\n\r\nig.janela_def_posicao (jan , ig.JANELA_POS_CENTRO);\r\n\r\nig.componente_mostre (jan);\r\n\r\nig.conecte_funcao (jan , ig.destruido, ig.fimjanela);\r\n\r\nig.fimprograma();\r\n\r\n<\/pre>\n
    Veja o resultado (em Ubuntu 14.04)<\/p>\n
    \"janelinha_2\"<\/p>\n
    Analisando os c\u00f3digos:<\/p>\n
    jan = ig.janela( ig.JANELA_COMBORDA );<\/pre>\n
    Desta vez, ao criarmos a janela, passamos o par\u00e2metro tipo de janela, e n\u00e3o o t\u00edtulo ou dimens\u00f5es.<\/p>\n
    os tipos s\u00e3o dois: ig.JANELA_COMBORDA e ig.JANELA_SEMBORDA\u00a0 (n\u00e3o precisa nem explicar o nome do tipo j\u00e1 diz tudo);<\/p>\n
    Tente trocar o valor tipo de janela e veja os resultados.<\/p>\n
    Obs. Fica ao crit\u00e9rio do programador que par\u00e2metros passar ao criar a janela.<\/p>\n
     <\/p>\n
    ig.janela_def_titulo (jan , \"Minha segunda janelinha\" );\r\n<\/pre>\n
     <\/p>\n
    Esta fun\u00e7\u00e3o serve para criar ou modificar o t\u00edtulo. Lembrando que o primeiro par\u00e2metro \u00e9 a pr\u00f3pria janela criada o segundo \u00e9 uma string do t\u00edtulo.<\/p>\n
     <\/p>\n
     <\/p>\n
    ig.janela_def_tamanho_padrao (jan , 230 , 150 );<\/pre>\n
    A fun\u00e7\u00e3o acima define um tamanho padr\u00e3o para a janela. Os par\u00e2metros s\u00e3o: \u00a0( janela , \u00a0largura , altura )<\/p>\n
     <\/p>\n
    ig.janela_def_posicao ( jan , ig.JANELA_POS_CENTRO );<\/pre>\n
    Este comando serve para definir uma posi\u00e7\u00e3o para a janela. Os par\u00e2metros s\u00e3o: ( janela , posicao ) em que posi\u00e7\u00e3o \u00e9 uma vari\u00e1vel predefinida. Exemplos de posi\u00e7\u00f5es:<\/p>\n
    ig.JANELA_POS_CENTRO = centro da tela
    \nig.JANELA_POS_CENTRO_SEMPRE = centro da tela
    \nig.JANELA_POS_CENTRO_PAI = dentro da janela pai
    \nig.JANELA_POS_MOUSE = \u00a0na posi\u00e7\u00e3o do mouse na tela
    \nig.JANELA_POS_NULO =\u00a0nenhum (Aleat\u00f3rio);<\/p>\n
     <\/p>\n
    ig.componente_mostre ( jan );<\/pre>\n
    Mostrando a janela.<\/p>\n
     <\/p>\n
    ig.conecte_funcao ( jan , ig.destruido , ig.fimjanela );<\/pre>\n
    Serve para fechar o programa ao fechar a janela principal. Voc\u00ea 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\u00e7\u00e3o n\u00e3o foi fechada definitivamente e ficou em background. Apenas nunca esque\u00e7a de colocar esse comando conectado na janela principal ou seu programa nunca terminar\u00e1 corretamente.<\/p>\n
    Leia da seguinte forma: conecte a fun\u00e7\u00e3o fimjanela ao evento fechar janela, para que o programa feche quando a janela for fechada.<\/p>\n
     <\/p>\n
    ig.fimprograma();<\/pre>\n
    E por fim a \u00faltima fun\u00e7\u00e3o, sem ela n\u00e3o funcionaria o programa. Simplesmente inicia o la\u00e7o de eventos do ig.<\/p>\n
     <\/p>\n
    programa 3 – escrevendo na janela:<\/h1>\n
    \"minha_janelinha\"<\/p>\n
    O componente que iremos utilizar \u00e9 o r\u00f3tulo. Veja:<\/p>\n
    janela3.prisma<\/p>\n
    \/\/exemplo escrevendo na janela.\r\n\r\ninclua 'igbr'\r\n\r\njan = ig.janela'Minha Janela'; \/\/quando \u00e9 s\u00f3 um par\u00e2metro e string ou tabela, pode-se omitir os par\u00eanteses.\r\nig.janela_def_tamanho_padrao ( jan , 200 , 200 );\r\n\r\nig.janela_def_posicao ( jan , ig.janela_pos_centro );\r\n\r\nig.caixa_def_borda_largura ( jan , 12 );\r\n\r\nTexto = ig.rotulo\"Ol\u00e1 mundo em Prisma\"; \/\/criando o r\u00f3tulo\r\n\r\nig.componente_mostre ( Texto ); \/\/torna o rotulo vis\u00edvel na janela.\r\n\r\nig.ad ( jan , Texto );\r\n\r\nig.janela_destrua( jan ); \/\/outra forma para fechar adequadamente o programa ao clicar no X da janela.\r\n\r\nig.componente_mostre ( jan ); \/\/tornando a janela vis\u00edvel\r\n\r\nig.fimprograma(); \/\/inicia o la\u00e7o de eventos.<\/pre>\n
    Vejamos o que h\u00e1 de novidade aqui:<\/p>\n
    ig.caixa_def_borda_largura ( jan , 12 );<\/pre>\n
    Define a largura da borda interna da janela, o padr\u00e3o \u00e9 zero, ou seja, o r\u00f3tulo tocaria nos limites da janela. Definimos 12 para que o r\u00f3tulo fique a uma dist\u00e2ncia de 12 pixels dos limites das bordas da janela.<\/p>\n
    Obs.: Mude os valores e veja o resultado, ajuda a entender para que serve esta fun\u00e7\u00e3o.<\/p>\n
     <\/p>\n
    Texto = ig.rotulo\"Ol\u00e1 mundo em Prisma\"; \/\/criando o r\u00f3tulo<\/pre>\n
    Aqui criamos o r\u00f3tulo de texto, omitimos os par\u00eanteses, prisma aceita isso quando o \u00fanico argumento for uma string ou tabela. Note que armazenamos o identificador do rotulo na vari\u00e1vel ‘Texto’ para manipula\u00e7\u00e3o posteriormente.<\/p>\n
     <\/p>\n
    ig.componente_mostre ( Texto ); \/\/torna o r\u00f3tulo vis\u00edvel na janela.<\/pre>\n
    \u00c9 preciso usar esta fun\u00e7\u00e3o para desenhar visivelmente o componente ap\u00f3s cri\u00e1-lo;<\/p>\n
    ig.ad ( jan , Texto );<\/pre>\n
    Esta fun\u00e7\u00e3o serve para colocar um componente dentro da janela. Sim, em Ig prisma n\u00f3s criamos componentes e colocamos uns dentro dos outros, isso \u00e9 poss\u00edvel quando forem do tipo caixa, a janela, por exemplo, \u00e9 do tipo caixa, mas que aceita apenas um componente por vez.<\/p>\n
    Essa caracter\u00edstica torna a programa\u00e7\u00e3o como a constru\u00e7\u00e3o de algo por pe\u00e7as.<\/p>\n
     <\/p>\n
    07\/03\/2017 Ap\u00f3s um bom tempo parado, retomo o tutorial com prisma na vers\u00e3o 1.0.100, v\u00e3o \u00e0 p\u00e1gina de download e baixe-a novamente, alguns comandos mudaram e vou tentar exp\u00f4-los aqui de pouco a pouco.<\/p>\n
     <\/p>\n
    4 – Definindo um \u00edcone para janela<\/h1>\n
    janela_icone.prisma<\/p>\n
    \"igjanelaicone\"<\/p>\n
    \/\/exemplo escrevendo na janela.\r\n\r\ninclua 'igbr'\r\n\r\njan = ig.janela'Janela com r\u00f3tulo'; \/\/quando \u00e9 s\u00f3 um par\u00e2metro e string ou tabela, pode-se omitir os par\u00eanteses.\r\nig.conecte_funcao(jan,ig.destruido,ig.fimjanela);\r\nig.janela_def_tamanho_padrao ( jan , 250 , 150 );\r\nig.janela_def_icone_arquivo(jan,'prisma.png');\r\n\r\nig.janela_def_posicao ( jan , ig.janela_pos_centro );\r\n\r\nig.caixa_def_borda_largura ( jan , 12 );\r\n\r\nTexto = ig.rotulo\"Ol\u00e1 mundo em Prisma!\"; \/\/criando o r\u00f3tulo\r\n\r\nig.componente_mostre ( Texto ); \/\/torna o rotulo visivel na janela.\r\n\r\nig.ad ( jan , Texto );\r\n\r\nig.componente_mostre ( jan ); \/\/tornando a janela vis\u00edvel\r\n\r\nig.fimprograma(); \/\/inicia o la\u00e7o de eventos.\r\n<\/pre>\n
    Detalhes:<\/p>\n
    ig.janela_def_icone_arquivo(jan,'prisma.png');<\/pre>\n
    Aqui temos a nova fun\u00e7\u00e3o que coloca o \u00edcone na barra de t\u00edtulo da janela. Ele tamb\u00e9m aparece na barra de ferramentas onde o programa \u00e9 minimizado.<\/p>\n
    O primeiro par\u00e2metro \u00e9 a janela, o segundo \u00e9 o caminho do arquivo, troque de acordo com o \u00edcone que voc\u00ea escolher.<\/p>\n
    5 – Definindo dica para um componente<\/h1>\n
    Dica.prisma<\/p>\n
    Aparece uma mensagem quando o mouse permanece sobre o componente.<\/p>\n
    \"ig_dica_rotulo\"<\/p>\n
    Seque o c\u00f3digo:<\/p>\n
    \/\/exemplo escrevendo na janela.\r\n\r\ninclua 'igbr'\r\n\r\njan = ig.janela'Janela com r\u00f3tulo'; \/\/quando \u00e9 s\u00f3 um par\u00e2metro e string ou tabela, pode-se omitir os par\u00eanteses.\r\nig.janela_def_tamanho_padrao ( jan , 250 , 150 );\r\nig.janela_def_icone_arquivo(jan,'prisma.png');\r\nig.conecte_funcao(jan,ig.destruido,ig.fimjanela);\r\nig.janela_def_posicao ( jan , ig.janela_pos_centro );\r\n\r\nig.caixa_def_borda_largura ( jan , 12 );\r\n\r\nTexto = ig.rotulo\"Ol\u00e1 mundo em Prisma!\"; \/\/criando o r\u00f3tulo\r\nig.componente_mostre ( Texto ); \/\/torna o rotulo visivel na janela.\r\nig.componente_def_dica_texto(Texto,'Este \u00e9 um componente do tipo r\u00f3tulo');\r\n\r\nig.ad ( jan , Texto );\r\nig.componente_mostre ( jan ); \/\/tornando a janela vis\u00edvel\r\n\r\nig.fimprograma(); \/\/inicia o la\u00e7o de eventos.\r\n\r\n<\/pre>\n
    Detalhes:<\/p>\n
    ig.componente_def_dica_texto(Texto,'Este \u00e9 um componente do tipo r\u00f3tulo');\r\n<\/pre>\n
    Esta fun\u00e7\u00e3o acima define uma tooltip (dica) para o componente Texto que \u00e9 um r\u00f3tulo criado antes.<\/p>\n
    Primeiro par\u00e2metro \u00e9 o componente (bot\u00e3o, janela, entra texto, imagem, etc.)<\/p>\n
    O segundo par\u00e2metro \u00e9 uma string descrevendo a dica.<\/p>\n
    6 – Definindo uma cor de fundo para janela<\/h1>\n
    corfundo.prisma<\/p>\n
    \"ig_corfundo\"<\/p>\n
    inclua 'igbr'\r\n\r\njan = ig.janela('Cor fundo',200,200);; \/\/quando \u00e9 s\u00f3 um par\u00e2metro e string ou tabela, pode-se omitir os par\u00eanteses.\r\nig.conecte_funcao(jan,ig.destruido,ig.fimjanela);\r\nig.janela_def_icone_arquivo(jan,'prisma.png');\r\nlocal Azul =  ig.cor_analise(ig.AZUL,'*t') ;\r\nig.componente_def_corfundo(jan, ig.ESTADO_NORMAL,Azul);\r\nig.janela_def_posicao ( jan , ig.janela_pos_centro );\r\nig.componente_mostre( jan ); \/\/tornando a janela vis\u00edvel\r\nig.fimprograma(); \/\/inicia o la\u00e7o de eventos.\r\n<\/pre>\n
    local Azul =  ig.cor_analise(ig.AZUL,'*t') ;<\/pre>\n
    Criamos um objeto cor, note que o ‘*t’ serve para for\u00e7ar o retorno como uma tabela que cont\u00e9m:<\/p>\n
    <<Azul.r , Azul.g, Azul.b, Azul.p>><\/p>\n
    Sem o ‘*t’ s\u00e3o retornados 4 valores em formato:<\/p>\n
    R, G, B, P (red,green, blue, profundidade);<\/p>\n
    ig.componente_def_corfundo(jan, ig.ESTADO_NORMAL,Azul);<\/pre>\n
    Ap\u00f3s criar o objeto ‘cor’ basta usar a fun\u00e7\u00e3o acima. O primeiro par\u00e2metro \u00e9 o componente; o segundo par\u00e2metro \u00e9 o estado definido como ESTADO_NORMAL. Em bot\u00f5es e componentes parecidos temos ESTADO_NORMAL, quando o mouse n\u00e3o est\u00e1 em cima, e ESTADO_FOCO quando o mouse est\u00e1 em cima do componente.<\/p>\n
    Para janela somente o ESTADO_NORMAL mesmo.<\/p>\n
    O \u00faltimo par\u00e2metro \u00e9 o objeto cor criado anteriormente.<\/p>\n
    Obs. Nem todo componente pode ser ‘pintado’ <\/em>como o r\u00f3tulo, por exemplo. Mas existe uma maneira de se contornar isso usando a caixa de evento que vou explanar mais adiante.<\/p>\n
    Dica: para ver mais sobre cores em ig v\u00e1 para cores em ig Prisma<\/a>.<\/p>\n
    \n
    Algumas considera\u00e7\u00f5es:<\/h1>\n
     <\/p>\n
    Voc\u00ea j\u00e1 deve ter notado que as fun\u00e7\u00f5es do ig seguem um certo padr\u00e3o, uma l\u00f3gica.<\/p>\n
    cria-se o componente usando a fun\u00e7\u00e3o com nome do componente, exemplo:<\/p>\n
    ig.janela();<\/p>\n
    Modifica-se o componente com uma fun\u00e7\u00e3o que come\u00e7a pelo nome do componente, ex:<\/p>\n
    ig.janela_def_titulo();<\/p>\n
    Observe que temos ‘def’<\/strong> que significa ‘defina’. <\/strong>Eu abreviei para economizar espa\u00e7o e tempo no c\u00f3digo. Temos tamb\u00e9m o oposto respectivo, ex:<\/p>\n
    titulo_atual = ig.janela_obt_titulo(jan);<\/p>\n
    obt<\/strong> significa obtenha<\/strong>. Com a fun\u00e7\u00e3o acima voc\u00ea pega o t\u00edtulo da janela passada como par\u00e2metro 1 em uma vari\u00e1vel string.<\/p>\n
    \u00a0Veja que apesar de ser em portugu\u00eas os comandos, n\u00e3o podemos colocar acento, pois gera erro de codifica\u00e7\u00e3o.<\/strong><\/p>\n
    Logo n\u00e3o devemos<\/strong> escrever janela_def_t\u00edtulo com acento!<\/p>\n
    Muitas fun\u00e7\u00f5es da interface gr\u00e1fica seguir\u00e3o esse modelo:<\/p>\n
    nome<\/strong> + obt<\/strong> ou def<\/strong> ou modifique<\/strong> + a\u00e7\u00e3o<\/strong>(titulo,corfundo etc);<\/p>\n
    Ao criar a biblioteca ig preferi usar underlines em nomes compostos do que usar inicial mai\u00fascula, pois acredito que o c\u00f3digo fica mais leg\u00edvel, seguindo assim, o estilo do gtk que \u00e9 base desta lib.<\/p>\n
    \n
    7 – Imagem de fundo na janela<\/h1>\n
    imagem_fundo.prisma<\/p>\n
    \"ig_imagemfundo\"<\/p>\n
    local ig = inclua'ig'\r\n\r\nfuncao principal(Args)\r\n\r\n  jan = ig.janela();\r\n  ig.janela_def_icone_arquivo(jan,'prisma.png');\r\n  ig.janela_def_imagemfundo(jan,'passaro.jpg');\r\n  ig.janela_def_titulo(jan,'Imagem fundo');\r\n  ig.janela_def_tamanho(jan,800,600);\r\n  ig.conecte_funcao(jan,ig.destruido,ig.fimjanela);\r\n  ig.componente_mostre(jan);\r\n  ig.fimprograma();\r\n  retorne 0;\r\nfim \r\n<\/pre>\n
    Detalhes:<\/p>\n
    funcao principal(Args)<\/pre>\n
    Neste exemplo usei a fun\u00e7\u00e3o principal para melhor organizar o c\u00f3digo, \u00e9 como o Main de outras linguagens, inclusive com o Args.<\/p>\n
    Como voc\u00ea p\u00f4de ter percebido nos outros exemplos n\u00e3o \u00e9 obrigat\u00f3rio o uso da fun\u00e7\u00e3o principal, mas eu aconselho pois o programa fica mais leg\u00edvel.<\/p>\n
    Lembre-se de retornar zero no fim da fun\u00e7\u00e3o.<\/p>\n
    ig.janela_def_imagemfundo(jan,'passaro.jpg');<\/pre>\n
    Na fun\u00e7\u00e3o 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.<\/p>\n
    Obs. se a imagem estiver na mesma pasta do programa n\u00e3o precisa do caminho completo caso contr\u00e1rio sim.<\/p>\n
    \n
    8 – Cont\u00eaineres – Caixa fixa:<\/h1>\n
    caixa_fixa.prisma<\/p>\n
    \"ig_cxfixa\"<\/p>\n
    A janela \u00e9 um cont\u00eainer, isto \u00e9, dentro dela podemos colocar componentes, mas somente um. N\u00e3o tem como colocar dois bot\u00f5es, por exemplo, em uma janela. Para resolver isto, n\u00f3s usamos os componentes ‘caixas’ <\/em>nos quais podemos adicionar mais de um widget (componente).<\/p>\n
    Existem v\u00e1rios tipos de caixas: fixas, vertical, horizontal, tabela, abas, etc.<\/p>\n
    Veremos agora um exemplo de caixa fixa:<\/h4>\n
    \/\/caixa fixa\r\nlocal ig = inclua'ig'\r\nfuncao principal()\r\n  local jan = ig.janela(\"Fixo\", 400,300);\r\n  ig.conecte_funcao(jan, ig.destruido, ig.fimjanela);\r\n  local cx_fixa = ig.fixo();\r\n  ig.ad(jan,cx_fixa);\r\n  \r\n  local bt = ig.botao(\" Clique me \");\r\n  ig.fixo_ad(cx_fixa, bt, 10, 80);\/\/col: 100, lin: 80\r\n  \r\n  ig.componente_mostre_todos(jan);\r\n  ig.fimprograma();\r\n  retorne 0;\r\nfim\r\n<\/pre>\n
    Detalhes:<\/p>\n
     local cx_fixa = ig.fixo();<\/pre>\n
    Cria uma caixa do tipo fixa, ou seja, os componentes ser\u00e3o colados nesta caixa em pontos fixos, coordenadas x , y; em que x \u00e9 a coluna e y \u00e9 a linha.<\/p>\n
    Obs.: fixo() vem de Painel Fixo.<\/p>\n
     ig.ad(jan,cx_fixa);<\/pre>\n
    Adiciona a caixa fixa na janela.<\/p>\n
    local bt = ig.botao(\" Clique me \");<\/pre>\n
    Cria um bot\u00e3o com o texto ‘clique me’.<\/p>\n
      ig.fixo_ad(cx_fixa, bt, 10, 80);\/\/col: 100, lin: 80<\/pre>\n
    Coloca o botao bt dentro da caixa fixa na coluna 10 e na linha 80.<\/p>\n
     ig.componente_mostre_todos(jan);<\/pre>\n
    Note que desta vez usei um comando que mostra a janela e todos os seus componentes filhos. Assim n\u00e3o precisa mostrar cada componente individualmente.<\/p>\n
    O restante do c\u00f3digo foi explicado anteriormente.<\/p>\n
    Obs.<\/strong>: criamos o bot\u00e3o bt mas n\u00e3o demos nenhuma fun\u00e7\u00e3o para ele, portanto, mesmo que voc\u00ea clique nele n\u00e3o acontece nada.<\/p>\n
    9 – Conectando uma fun\u00e7\u00e3o ao bot\u00e3o<\/h1>\n
     <\/p>\n
    \/\/caixa fixa\r\nlocal ig = inclua'ig'\r\n\r\nfuncao principal()\r\n  local jan = ig.janela(\"Fixo\", 400,300);\r\n  ig.conecte_funcao(jan, ig.destruido, ig.fimjanela);\r\n  local cx_fixa = ig.fixo();\r\n  ig.ad(jan,cx_fixa);\r\n  \r\n  local bt = ig.botao(\" Clique me \");\r\n\r\n  ig.conecte_funcao( bt, ig.clique, ao_clicar_bt, jan);\r\n\r\n  ig.fixo_ad(cx_fixa, bt, 10, 80);\/\/col: 100, lin: 80\r\n  \r\n  ig.componente_mostre_todos(jan);\r\n  ig.fimprograma();\r\n  retorne 0;\r\nfim\r\n\r\nfuncao ao_clicar_bt(bt, jan)\r\n  ig.msg(jan, 'Titulo','Voc\u00ea clicou no bot\u00e3o');\r\nfim\r\n<\/pre>\n
    Detalhes:<\/p>\n
    Para dar uma fun\u00e7\u00e3o ao bot\u00e3o basta criar uma fun\u00e7\u00e3o Prisma normalmente e conect\u00e1-la ao bot\u00e3o, mais especificamente ao evento clique no bot\u00e3o.<\/p>\n
    ig.conecte_funcao( bt, ig.clique,ao_clicar_bt, jan);\r\n<\/pre>\n
    Esta fun\u00e7\u00e3o acima faz o conex\u00e3o da fun\u00e7\u00e3o com o bot\u00e3o.<\/p>\n
    Par\u00e2metro:<\/p>\n
    1 – componente a ser conectado, no caso o bot\u00e3o.<\/p>\n
    2 – Evento. Depende do componente, pode ser um clique, o movimento do mouse, o pressionar de uma tecla. Neste exemplo n\u00f3 usamos o evento ig.clique que \u00e9 uma vari\u00e1vel reservada de evento. Veremos outras adiante.<\/p>\n
    3 – A fun\u00e7\u00e3o a ser conectada. N\u00e3o tem segredo, \u00e9 o nome da fun\u00e7\u00e3o Prisma que voc\u00ea quer que seja executada quando o evento ocorrer. Veja que \u00e9 s\u00f3 o nome sem par\u00eanteses.<\/p>\n
    4 – o quarto par\u00e2metro \u00e9 o dado extra que \u00e9 passado para a fun\u00e7\u00e3o a cada chamada. Neste caso passamos a janela.<\/p>\n
    Retorno:<\/p>\n
    1 – o retorno \u00e9 o id da conex\u00e3o, um n\u00famero. No exemplo acima n\u00e3o o usamos pois n\u00e3o precisamos dele. O id da conex\u00e3o \u00e9 \u00fatil quando voc\u00ea quer desconectar a fun\u00e7\u00e3o para que ela n\u00e3o responda mais ao componente conectado.<\/p>\n
    \n
    funcao ao_clicar_bt(bt, jan)\r\n  ig.msg(jan, 'Titulo','Voc\u00ea clicou no bot\u00e3o');\r\nfim<\/pre>\n
    Esta \u00e9 a fun\u00e7\u00e3o que foi conectada, veja que os par\u00e2metros s\u00e3o:<\/p>\n
    1 – Componente conectado.<\/p>\n
    2 – o dado extra, que no caso foi a janela.<\/p>\n
    Esses par\u00e2metros s\u00e3o passados automaticamente a cada chamada da fun\u00e7\u00e3o.<\/p>\n
    ig.msg(jan, 'Titulo','Voc\u00ea clicou no bot\u00e3o');<\/pre>\n
    Dentro da fun\u00e7\u00e3o, colocamos uma mensagem, usando o ig.msg()<\/p>\n
    Os par\u00e2metros s\u00e3o:<\/p>\n
    1 – jan – a janela principal para que a mensagem apare\u00e7a centralizada nela. Ou nulo se desejar.<\/p>\n
    2 – ‘Titulo’ – Texto que aparece na barra de t\u00edtulo da mensagem.<\/p>\n
    3 – \u00c9 o conte\u00fado da mensagem, uma string.<\/p>\n
    O que acontece ao clicar no bot\u00e3o \u00e9 o aparecimento dessa mensagem:<\/p>\n
    \"ig_fixo_call\"<\/p>\n
    \n
    10 – Criando um bot\u00e3o que fecha a janela<\/h1>\n
     <\/p>\n
    bt_fechar.prisma<\/p>\n
    \"igfechar\"<\/p>\n
    local ig = inclua'ig'\r\n\r\nfuncao principal()\r\n  local jan = ig.janela(\"Fixo\", 400,300);\r\n  ig.conecte_funcao(jan, ig.destruido, ig.fimjanela);\r\n  local cx_fixa = ig.fixo();\r\n  ig.ad(jan,cx_fixa);\r\n  \r\n  local bt_sair = ig.botao(\" fechar janela \");\r\n\r\n  ig.conecte_funcao( bt_sair, ig.clique, func_sair, jan);\r\n\r\n  ig.fixo_ad(cx_fixa, bt, 10, 80);\/\/col: 100, lin: 80\r\n  \r\n  ig.componente_mostre_todos(jan);\r\n  ig.fimprograma();\r\n  retorne 0;\r\nfim\r\n\r\nfuncao func_sair(bt, jan)\r\n  ig.componente_destrua(jan);\r\n  ig.fimjanela();\r\nfim\r\n<\/pre>\n
    Detalhes:<\/p>\n
    local bt_sair = ig.botao(\" fechar janela \");<\/pre>\n
    Criamos um bot\u00e3o com r\u00f3tulo: fechar janela<\/p>\n
     ig.conecte_funcao( bt_sair, ig.clique, func_sair, jan);<\/pre>\n
    Conectamos a fun\u00e7\u00e3o sair no clique do bot\u00e3o, passamos o argumento extra que \u00e9 a janela a ser fechada.<\/p>\n
    funcao func_sair(bt, jan)\r\n  ig.componente_destrua(jan);\r\n  ig.fimjanela();\r\nfim<\/pre>\n
    A fun\u00e7\u00e3o Callback (como s\u00e3o chamadas as fun\u00e7\u00f5es conectadas a algum evento) \u00e9 praticamente igual ao exemplo anterior. Dentro dela usei as seguintes fun\u00e7\u00f5es que fecham o programa:<\/p>\n
    ig.componente_destrua(jan);<\/pre>\n
    Destr\u00f3i um componente (Exclui), no caso a janela.<\/p>\n
     ig.fimjanela();<\/pre>\n
    Essa fun\u00e7\u00e3o faz o la\u00e7o de eventos do ig parar, e assim o programa continua ap\u00f3s a fun\u00e7\u00e3o ig.fimprograma(); no exemplo acima retorna zero e n\u00e3o faz mais nada, finalizando.<\/p>\n
     <\/p>\n
    Obs. as ilustra\u00e7\u00f5es aqui s\u00e3o em ambiente Linux Mate. Caso usem Windows o visual da janela ser\u00e1 diferente, mas o efeito \u00e9 o mesmo.<\/em><\/p>\n
    \n
    11 – Maximizando, Minimizando e (Des)maximizando uma janela<\/h1>\n
    max.prisma<\/p>\n
    \"ig_max\"<\/p>\n
    C\u00f3digo:<\/p>\n
    local ig = inclua'ig'\r\n\r\nfuncao principal()\r\n  local jan = ig.janela(\"Fixo\", 400,300);\r\n  ig.janela_def_decoracao(jan, falso);\r\n  ig.conecte_funcao(jan, ig.destruido, ig.fimjanela);\r\n  local cx_fixa = ig.fixo();\r\n  ig.ad(jan,cx_fixa);\r\n  \r\n  local bt_sair = ig.botao('X');\r\n  local bt_max = ig.botao(\"+\");\r\n  local bt_normal = ig.botao('O');\r\n  local bt_min = ig.botao('-');\r\n  \r\n  ig.conecte_funcao(bt_sair, ig.clique, func_sair, jan);\r\n  ig.fixo_ad(cx_fixa, bt_sair, 0,10);\r\n  local Vermelho = ig.cor_analise(ig.VERMELHO, '*t');\r\n  ig.componente_modifique_corfundo(bt_sair, ig.ESTADO_FOCO, Vermelho );\r\n\r\n  ig.conecte_funcao( bt_max, ig.clique, func_bt_max, jan);\r\n  ig.fixo_ad(cx_fixa, bt_max, 24, 10);\/\/col: 10, lin: 10\r\n  \r\n  ig.conecte_funcao( bt_normal, ig.clique, func_bt_normal, jan);\r\n  ig.fixo_ad(cx_fixa, bt_normal, 50, 10 );\r\n  \r\n  ig.conecte_funcao( bt_min, ig.clique, func_bt_min, jan);\r\n  ig.fixo_ad(cx_fixa, bt_min, 76, 10);\/\/col: 40, lin: 10\r\n  \r\n  \r\n  ig.componente_mostre_todos(jan);\r\n  ig.fimprograma();\r\n  retorne 0;\r\nfim\r\n\r\nfuncao func_sair(bt,jan)\r\n  ig.componente_destrua(jan);\r\n  ig.fimjanela();\r\nfim\r\n\r\nfuncao func_bt_max(bt, jan)\r\n ig.janela_maximize(jan);\r\nfim\r\n\r\nfuncao func_bt_min(bt, jan)\r\n ig.janela_minimize(jan);\r\nfim\r\n\r\nfuncao func_bt_normal(bt,jan)\r\n  ig.janela_desmaximize(jan);\r\nfim\r\n\r\n\r\n<\/pre>\n
     <\/p>\n
    Este exemplo \u00e9 um pouco maior que os anteriores, mas nada de complicado, veja os detalhes.<\/p>\n
     ig.janela_def_decoracao(jan, falso);<\/pre>\n
    Definimos a decora\u00e7\u00e3o da janela como falso, ou seja, n\u00e3o ir\u00e1 aparecer borda nem bot\u00f5es de fechar, maximizar etc.<\/p>\n
    Caso queira redefinir no mesmo programa a decora\u00e7\u00e3o da janela chame novamente a fun\u00e7\u00e3o ig.janela_def_decoracao(), mas como verdadeiro.<\/p>\n
    Par\u00e2metros:<\/p>\n
    1 – jan – janela que se quer modificar a decora\u00e7\u00e3o.<\/p>\n
    2 – verdadeiro ou falso – para mostrar decora\u00e7\u00e3o ou ocultar.<\/p>\n
    N\u00e3o h\u00e1 retornos.<\/p>\n
    \n
     <\/p>\n
      local bt_sair = ig.botao('X');\r\n  local bt_max = ig.botao(\"+\");\r\n  local bt_normal = ig.botao('O');\r\n  local bt_min = ig.botao('-');<\/pre>\n
    Criamos 4 bot\u00f5es: para fechar (‘X’), para maximizar (‘+’), des_maximizar (‘O’) e minimizar (‘-‘).<\/p>\n
     ig.conecte_funcao(bt_sair, ig.clique, func_sair, jan);\r\n ig.fixo_ad(cx_fixa, bt_sair, 0,10);<\/pre>\n
    Agora devemos conectar cada fun\u00e7\u00e3o ao respectivo bot\u00e3o e adicionarmos todos os bot\u00f5es na caixa fixa, como no trecho acima.<\/p>\n
    local Vermelho = ig.cor_analise(ig.VERMELHO, '*t');\r\nig.componente_modifique_corfundo(bt_sair, ig.ESTADO_FOCO, Vermelho );\r\n<\/pre>\n
    Eu quis fazer um detalhe no bot\u00e3o fechar colocando-o na cor vermelha quando mouse estiver sobre ele. Crie a cor usando a fun\u00e7\u00e3o ig.cor_analise(ig.NOMECOR) ou usando o rgb: ig.cor( 0 \u00e0 65535 para Vermelho \/ verde \/ azul (R,G,B);<\/span><\/p>\n
    Depois de criar a cor usamos a fun\u00e7\u00e3o:<\/p>\n
    ig.componente_modifique_corfundo(bt_sair, ig.ESTADO_FOCO, Vermelho );<\/pre>\n
    Par\u00e2metros:<\/p>\n
    1- bt_sair : \u00e9 o componente bot\u00e3o sair que ser\u00e1 mudado a cor.<\/p>\n
    2 – ig.ESTADO_FOCO : vari\u00e1vel de estado foco, s\u00f3 muda a cor quando o mouse estiver em cima do componente.<\/p>\n
    3 – O objeto cor criado anteriormente.<\/p>\n
    Para os demais bot\u00f5es o processo foi o mesmo exceto que n\u00e3o mudei a cor deles.<\/strong><\/p>\n
    Como fazer as fun\u00e7\u00f5es callbacks tamb\u00e9m j\u00e1 expliquei acima, vamos apenas pegar os comandos que interessam:<\/p>\n
     ig.janela_maximize(jan);<\/pre>\n
    Maximiza a janela.<\/p>\n
    ig.janela_minimize(jan);<\/pre>\n
    Minimiza a janela.<\/p>\n
    Caso necessite existe tamb\u00e9m\u00a0 a fun\u00e7\u00e3o ig.desminimize(jan); para fazer a janela voltar do estado minimizado para o normal.<\/em><\/p>\n
    ig.janela_desmaximize(jan);<\/pre>\n
    Desmaximiza a janela. (Volta ao tamanho normal);<\/p>\n
    Dicas:<\/p>\n
    Tente modificar o programa acima usando as fun\u00e7\u00f5es que vou listar abaixo:<\/p>\n
    ig.janela_telacheia(jan);\r\nig.janela_telanormal(jan);<\/pre>\n
     <\/p>\n
    \n
     <\/p>\n
    12 – Cont\u00eaineres – Caixa vertical e Caixa horizontal:<\/h1>\n
    caixav.prisma<\/p>\n
    \"ig_caixavertical\"<\/p>\n
    \/\/exemplo de caixa vertical\r\ninclua'igbr'  \/\/incluindo a biblioteca gr\u00e1fica.\r\n\r\nfuncao principal()\r\n  local jan = ig.janela(\"Caixa Vertical\", 130,200);\r\n  ig.conecte_funcao(jan, ig.destruido, ig.fimjanela);\r\n  local caixav = ig.caixavertical(falso,1);\/\/(homogenio, espacamento);\r\n  ig.ad( jan, caixav);\r\n  \r\n  local bt1 = ig.botao'botao1';\r\n  local bt2 = ig.botao'botao2';\r\n  local bt3 = ig.botao'botao3';\r\n  local bt4 = ig.botao'botao4';\r\n  local bt5 = ig.botao'botao5';\r\n  \r\n  \/\/conectamos a fun\u00e7\u00e3o clique_bt aos botoes; \r\n  ig.conecte_funcao(bt1,ig.clique,clique_bt, jan); \r\n  ig.conecte_funcao(bt2,ig.clique,clique_bt, jan);\r\n  ig.conecte_funcao(bt3,ig.clique,clique_bt, jan);\r\n  ig.conecte_funcao(bt4,ig.clique,clique_bt, jan);\r\n  ig.conecte_funcao(bt5,ig.clique,clique_bt, jan);\r\n  \r\n  \r\n  ig.caixa_ad(caixav, bt1, falso,falso, 2);\r\n  ig.caixa_ad(caixav, bt2, falso, falso, 2);\r\n  ig.caixa_ad(caixav, bt3, falso, falso, 2);\r\n  ig.caixa_ad(caixav, bt4, falso, falso, 2);\r\n  ig.caixa_ad(caixav, bt5, verdadeiro, verdadeiro, 2);\r\n  \r\n  ig.componente_mostre_todos(jan);\r\n  ig.fimprograma(); \/\/laco de eventos.\r\n  retorne 0;\r\nfim \r\n\r\nfuncao clique_bt(comp,dado)\r\n  ig.msg(dado, \"Clique\", \"voc\u00ea clicou em \" .. ig.botao_obt_rotulo(comp) );\r\nfim\r\n\r\n<\/pre>\n
    Detalhes:<\/p>\n
    Caixa vertical \u00e9 um tipo de cont\u00eainer que ajusta seus componente filhos automaticamente na vertical.<\/p>\n
     local caixav = ig.caixavertical(falso,1);<\/pre>\n
    Aqui criamos uma caixa vertical.<\/p>\n
    Par\u00e2metros:<\/p>\n
    1 – O primeiro par\u00e2metro \u00e9 verdadeiro ou falso:<\/strong><\/p>\n
    A – Se verdadeiro, <\/strong>os componentes ficam distribu\u00eddos de forma igual por toda a caixa em sentido vertical.<\/p>\n
    Veja a imagem abaixo:<\/p>\n
    \"ig_caixaverticahomogenico\"<\/p>\n
    Ao aumentar a janela os componentes ficaram espalhados igualmente.<\/p>\n
    B – Se falso,<\/strong> os componentes ficam ancorados uns nos outros ao aumentar a janela, veja na imagem abaixo:<\/p>\n
    \"ig_caixaverticalnaohomog\"<\/p>\n
    Observe que agora os componentes n\u00e3o se espalharam, ficaram juntos, sobrando uma parte da janela quando ela foi aumentada.<\/p>\n
    Como definimos falso ent\u00e3o os componentes n\u00e3o ficar\u00e3o espalhados.<\/p>\n
    2 – O segundo par\u00e2metro<\/strong> \u00e9 um n\u00famero que define o espa\u00e7amento, a dist\u00e2ncia m\u00ednima que ao encolher a janela os componentes ficam uns em rela\u00e7\u00e3o aos outros.<\/p>\n
    \n
     <\/p>\n
     ig.ad( jan, caixav);<\/pre>\n
    Adicionamos a caixa vertical na janela normalmente.<\/p>\n
    \n
     <\/p>\n
      local bt1 = ig.botao'botao1';\r\n  local bt2 = ig.botao'botao2';\r\n  local bt3 = ig.botao'botao3';\r\n  local bt4 = ig.botao'botao4';\r\n  local bt5 = ig.botao'botao5';<\/pre>\n
    Criei 5 bot\u00f5es. Poderia ter criado automaticamente usando uma tabela e o la\u00e7o ‘para’, mas preferi assim para ficar mais claro.<\/p>\n
      ig.conecte_funcao(bt1,ig.clique,clique_bt, jan); \r\n  ig.conecte_funcao(bt2,ig.clique,clique_bt, jan);\r\n  ig.conecte_funcao(bt3,ig.clique,clique_bt, jan);\r\n  ig.conecte_funcao(bt4,ig.clique,clique_bt, jan);\r\n  ig.conecte_funcao(bt5,ig.clique,clique_bt, jan);<\/pre>\n
    Conectamos todos os bot\u00f5es na mesma fun\u00e7\u00e3o, isso \u00e9 poss\u00edvel e aqui no exemplo n\u00e3o preciso mais do que mostrar uma mensagem exibindo o r\u00f3tulo do bot\u00e3o. O importante \u00e9 voc\u00ea entender a caixa vertical.<\/p>\n
      ig.caixa_ad(caixav, bt1, falso,falso, 2);\r\n  ig.caixa_ad(caixav, bt2, falso, falso, 2);\r\n  ig.caixa_ad(caixav, bt3, falso, falso, 2);\r\n  ig.caixa_ad(caixav, bt4, falso, falso, 2);<\/pre>\n
    Aqui \u00e9 o m\u00e9todo para se colocar os componentes dentro da caixa vertical.<\/p>\n
    1 e 2 – O primeiro par\u00e2metro<\/strong> \u00e9 a caixa vertical, o segundo<\/strong> \u00e9 o componente a ser inserido na caixa.<\/p>\n
    3 – O terceiro par\u00e2metro<\/strong> \u00e9 falso ou verdadeiro.<\/p>\n
    Se falso<\/strong>, o componente n\u00e3o fica espalhado.<\/p>\n
    Se verdadeiro<\/strong>, o componente se espalha ao aumentar a janela, igual o primeiro par\u00e2metro da fun\u00e7\u00e3o que cria a caixa.<\/p>\n
    4 – O quarto par\u00e2metro pode ser verdadeiro ou falso<\/strong>, \u00e9 o preenchimento, ou seja, quando a janela \u00e9 aumentada o componente tamb\u00e9m aumenta acompanhando a janela. Se falso n\u00e3o aumenta na vertical, s\u00f3 na horizontal. Repare na imagem no in\u00edcio deste exemplo, o quinto bot\u00e3o est\u00e1 maior que os outros.<\/p>\n
    Obs. O preenchimento s\u00f3 ter\u00e1 efeito se o espalhamento tamb\u00e9m estiver definido como verdadeiro.<\/strong><\/em><\/p>\n
    5 – O quinto par\u00e2metro<\/strong> \u00e9 o espa\u00e7amento, a dist\u00e2ncia entre o componentes.<\/p>\n
    Obs. Se voc\u00ea j\u00e1 definiu 5 de espa\u00e7amento ao criar a caixa vertical, se definir 5 tamb\u00e9m ao adicionar os componentes na caixa, o espa\u00e7amento ser\u00e1 10, ou seja, a soma.<\/p>\n
    \n
    E a caixa horizontal?<\/h1>\n
    Este \u00e9 o seu dever de casa, pegue o exemplo acima e troque de:<\/p>\n
     local caixav = ig.caixavertical(falso,1);<\/pre>\n
    para:<\/p>\n
     local caixav = ig.caixahorizontal(falso,1);<\/pre>\n
    E veja o resultado:<\/p>\n
    \"ig_caixahorizontal\"<\/p>\n
    Considera\u00e7\u00f5es:<\/h1>\n
    A vantagem de se usar caixas verticais ou horizontais em rela\u00e7\u00e3o a caixa fixa \u00e9 que o layout (o desenho) da interface gr\u00e1fica fica mais flex\u00edvel seja qual sistema operacional estiver. Pois os componentes se ajustam ao tamanho da janela.<\/p>\n
    Dica: \u00e9 poss\u00edvel colocar at\u00e9 mais de uma caixa dentro de outra. Isso ajuda a desenhar melhor e distribuir os componentes de um programa com interface gr\u00e1fica.<\/em><\/p>\n
     <\/p>\n
    \n
    13 – Cont\u00eaineres – caixa de alinhamento.<\/h1>\n
    Essa caixa, assim como a janela s\u00f3 aceita um \u00fanico componente.<\/p>\n
    Use-a quando quiser alinhar um componente.<\/p>\n
    \"ig_alin\"<\/p>\n
    Segue o c\u00f3digo:<\/p>\n
    \/\/alinhamento\r\n\r\ninclua'ig'\r\n\r\nfuncao principal()\r\n\r\n  local jan = ig.janela('Alin', 300,200);\r\n  ig.conecte_funcao(jan, ig.destruido, ig.fimjanela);\r\n  ig.janela_posicione( jan, 100,120); \/\/posiciona a janela na col: 100 e lin: 120\r\n  \r\n  local alin = ig.alinhamento(0,1,0,0); \/\/0 horiz. esq, 1 vert baixo, 0 nao expande horiz, 0 nao expande vertical\r\n  local rot = ig.rotulo'Embaixo esquerda.';\r\n  ig.ad( alin, rot); \/\/coloca o rotulo no alinhamento  \r\n  ig.ad(jan, alin); \/\/coloca o alinhamento na janela.\r\n  \r\n  ig.componente_mostre_todos(jan);\r\n  ig.fimprograma();\r\n  retorne 0;\r\nfim<\/pre>\n
    Detalhes:<\/p>\n
     ig.janela_posicione( jan, 100,120);<\/pre>\n
    Essa \u00e9 um outra fun\u00e7\u00e3o para posicionar a janela, diferentemente da ig.janela_def_posicao(), esta acima usa coordenadas x – y para posicionar a janela.<\/p>\n
    Par\u00e2metros:<\/p>\n
    1 – janela a ser posicionada<\/p>\n
    2 – Coordenada da coluna.<\/p>\n
    3 – Coordenada da linha.<\/p>\n
    \n
     local alin = ig.alinhamento(0,1,0,0);<\/pre>\n
    Esta \u00e9 a fun\u00e7\u00e3o que cria uma caixa de alinhamento.<\/p>\n
    Par\u00e2metros:<\/strong><\/p>\n
    1 – alinhamento horizontal. 0 = esquerda, 1 = direita.<\/p>\n
    2 – alinhamento vertical. 0 = em cima, 1 = embaixo;<\/p>\n
    3 – Expans\u00e3o horizontal. 0 = n\u00e3o expande, 1 = expande.<\/p>\n
    4 – Expans\u00e3o vertical. 0 = n\u00e3o expande, 1 = expande.<\/p>\n
    Obs. Expandir significa que ao aumentar a janela o componente aumenta junto com ela preenchendo o espa\u00e7o vazio.<\/em><\/p>\n
    No caso acima, os par\u00e2metros definem que o r\u00f3tulo fique no lado esquerdo, na parte de baixo da janela, e n\u00e3o expande nem horizontal nem verticalmente.<\/p>\n
    \n
     <\/p>\n
    local rot = ig.rotulo'Embaixo esquerda.';<\/pre>\n
    Crio um r\u00f3tulo.<\/p>\n
    ig.ad( alin, rot);<\/pre>\n
    Coloquei o r\u00f3tulo dentro da caixa de alinhamento.<\/p>\n
    ig.ad(jan, alin);<\/pre>\n
    E a caixa de alinhamento dentro da janela.<\/p>\n
    O restante voc\u00eas j\u00e1 sabem, mostrar a janela com todos os componentes filhos e o la\u00e7o de eventos.<\/p>\n
     <\/p>\n
    Dicas: Voc\u00ea pode usar v\u00e1rios alinhamentos um para cada componente, e coloc\u00e1-los em uma caixa vertical, por exemplo.<\/p>\n
    Veja um exemplo completo:<\/p>\n
    \/\/alinhamento\r\n\r\ninclua'ig'\r\n\r\nfuncao principal()\r\n\r\n  local jan = ig.janela('Alin', 300,200);\r\n  ig.conecte_funcao(jan, ig.destruido, ig.fimjanela);\r\n  ig.janela_posicione( jan, 100,120); \/\/posiciona a janela na col: 100 e lin: 120\r\n  \r\n  local cv = ig.caixavertical(falso,5);\r\n  local valin = ig.alinhamento(0,1,0,0);\r\n  ig.ad(cv, valin);\r\n  ig.ad(jan, cv);\r\n  \r\n  local vh = ig.caixahorizontal(verdadeiro, 2);\r\n  \r\n  local bt_ok = ig.botao(\"OK\", 70, 30);\r\n  ig.ad( vh, bt_ok);\r\n  \r\n  local bt_fechar = ig.botao'Fechar';\r\n  ig.ad(vh, bt_fechar);\r\n  \r\n  local halin = ig.alinhamento(1,0,0,0);\r\n  ig.ad( halin, vh); \/\/coloca a caixa horizontal dentro do alinhamento.\r\n  \r\n  ig.caixa_ad( cv, halin, falso, falso, 0);  \r\n  \r\n  ig.componente_mostre_todos(jan);\r\n  ig.fimprograma();\r\n  retorne 0;\r\nfim \r\n<\/pre>\n
    local bt_ok = ig.botao(\"OK\", 70, 30);<\/pre>\n
    Observe que ao criar o bot\u00e3o ok passei os par\u00e2metros do tamanho (largura, altura).
    \n<\/em><\/p>\n
    O restante do c\u00f3digo \u00e9 igual aos exemplos anteriores. Tente mudar os valores para entender o funcionamento.<\/p>\n
    Veja a imagem deste exemplo:<\/p>\n
    \"ig_alin_bt\"<\/p>\n
    Lembrando que eu uso Linux, mas o resultado \u00e9 o mesmo no Windows, s\u00f3 muda o estilo da janela.<\/em><\/p>\n
    \n
     <\/p>\n
    14 – Cont\u00eainer – Caixa Tabela.<\/h2>\n
    Esta caixa distribui os componentes em linhas e colunas.<\/p>\n
    igtabela.prisma<\/p>\n
    \"ig_tabela\"<\/p>\n
    \/\/cont\u00eainer tabela:\r\ninclua'ig'\r\n\r\nfuncao principal()\r\n  jan = ig.janela(\"Ig tabela\", 300,200);\r\n  ig.conecte_funcao(jan, ig.destruido, ig.fimjanela);\r\n  tab = ig.tabela( 3, 4, verdadeiro); \/\/criando a tabela, 3 linhas, 4 Colunas. Preenchimento = verdadeiro.\r\n  ig.tabela_def_lin_espacos(tab, 2);\r\n  ig.tabela_def_col_espacos(tab, 2);\r\n  \r\n  bt_1 = ig.botao'botao1';\r\n  bt_2 = ig.botao'botao2';\r\n  bt_3 = ig.botao'botao3';\r\n  bt_4 = ig.botao'botao4';  \r\n  \r\n  ig.tabela_ad(tab, bt_1, 0,4,0,1);\/\/ col, ate col, lin, ate lin\r\n  ig.tabela_ad(tab, bt_2, 0,3,1,2);\r\n  ig.tabela_ad(tab, bt_3,3,4,2,3);\r\n  ig.tabela_ad(tab, bt_4,1,2,2,3);  \r\n  \r\n  ig.ad(jan, tab);\r\n  ig.componente_mostre_todos(jan);\r\n  ig.fimprograma();\r\n  retorne 0;\r\nfim \r\n\r\n<\/pre>\n
    Detalhes:<\/p>\n
    tab = ig.tabela( 3, 4, verdadeiro);<\/pre>\n
    Criamos uma caixa tabela com 3 linhas e 4 colunas.<\/p>\n
    Par\u00e2metros:<\/p>\n
    1 – N\u00famero de linhas<\/p>\n
    2 – N\u00famero de colunas<\/p>\n
    3 – Expans\u00e3o: se verdadeiro,<\/strong> os componentes aumentam ao aumentar a janela. Se falso, n\u00e3o.<\/p>\n
    Retorno = vari\u00e1vel do tipo igtabela (GtkTable).<\/p>\n
    \n
     ig.tabela_def_lin_espacos(tab, 2);\r\n ig.tabela_def_col_espacos(tab, 2);<\/pre>\n
    Aqui definimos o espa\u00e7o entre linhas e entre colunas;<\/p>\n
      bt_1 = ig.botao'botao1';\r\n  bt_2 = ig.botao'botao2';\r\n  bt_3 = ig.botao'botao3';\r\n  bt_4 = ig.botao'botao4';<\/pre>\n
    Criamos 4 bot\u00f5es.<\/p>\n
     ig.tabela_ad(tab, bt_1, 0,4,0,1);<\/pre>\n
    Colocamos o bot\u00e3o bt_1 na primeira coluna indo at\u00e9 a quarta coluna, e na primeira linha, indo at\u00e9 a primeira mesmo.<\/p>\n
    Vamos entender melhor:<\/p>\n
    Par\u00e2metros:<\/p>\n
    1 – Tabela<\/p>\n
    2 – componente a ser inserido na tabela.<\/p>\n
    3 – ponto inicial da coluna (0 = 1\u00aa coluna)<\/p>\n
    4 – ponto final da coluna, at\u00e9 qual coluna o componente vai ocupar. 1 = 1\u00aa coluna.<\/p>\n
    Ent\u00e3o para o ponto inicial devemos come\u00e7ar do zero se quisermos p\u00f4r o componente na primeira coluna ou come\u00e7ar do 1 se quisermos colocar o componente a partir da segunda coluna.<\/em><\/p>\n
    J\u00e1 para indicar at\u00e9 onde se estende o componente, come\u00e7amos por 1 quando quisermos que o componente v\u00e1 at\u00e9 a primeira coluna ou 2 ou 3 se quisermos que o componente ocupe o espa\u00e7o que vai at\u00e9 a 2\u00aa ou 3\u00aa coluna.<\/em><\/p>\n
    O mesmo serve para linhas.<\/p>\n
    5 – ponto inicial da linha. 0 = 1\u00aa linha.<\/p>\n
    6 – ponto final da linha, at\u00e9 que linha se estende o componente. 1 = 1\u00aa linha.<\/p>\n
    Para a linha vale o mesmo que expliquei acima para a coluna.<\/p>\n
    Dica: para voc\u00ea entender melhor, modifique os n\u00fameros e veja o que acontece, s\u00f3 n\u00e3o coloque o n\u00famero inicial igual ou maior que o final.<\/p>\n
    Se os valores forem maior que 4 colunas e 3 linhas, aumente tamb\u00e9m o n\u00famero de colunas e linhas criadas ao criar a tabela.<\/p>\n
    \n
     ig.tabela_ad(tab, bt_2, 0,3,1,2);\r\n  ig.tabela_ad(tab, bt_3,3,4,2,3);\r\n  ig.tabela_ad(tab, bt_4,1,2,2,3);<\/pre>\n
    O bot\u00e3o bt_2 foi colocado na primeira coluna (0), at\u00e9 a 3\u00aa coluna, e na 2 linha (1) at\u00e9 a 2 linha.<\/p>\n
    J\u00e1 o bot\u00e3o bt_3 na 4\u00aa coluna (3) at\u00e9 a 4\u00aa coluna, na 3\u00aa linha(2) at\u00e9 a 3\u00aa linha.<\/p>\n
    E, por fim, colocamos o bot\u00e3o bt_4 na 2\u00aa coluna (1) at\u00e9 a 2\u00aa coluna, na linha 3 (2) at\u00e9 a 3\u00aa coluna.<\/p>\n
     ig.ad(jan, tab);<\/pre>\n
    Depois \u00e9 s\u00f3 colocar a tabela na janela. Mostrar os componentes e iniciar o la\u00e7o de eventos do ig.<\/p>\n
     <\/p>\n
    Observe que no exemplo coloquei bot\u00f5es apenas, mas o mesmo poderia ser feito com entra texto, \u00e1rea de texto, r\u00f3tulo etc.<\/em><\/p>\n
    Desafio, tente fazer um programa que fique igual a imagem abaixo:<\/strong><\/p>\n
    \"ig_tabela-desafio\"<\/p>\n
     <\/p>\n
     <\/p>\n
    Use os links abaixo para navegar pelas p\u00e1ginas:<\/em><\/p>\n
    p\u00e1ginas: <1<\/a>><\/strong> – 2<\/a> – 3<\/a>\u00a0– 4<\/a><\/h2>\n
     <\/p>\n
     <\/p>\n
     <\/p>\n","protected":false},"excerpt":{"rendered":"
    p\u00e1ginas: <1> – 2 – 3\u00a0– 4 Introdu\u00e7\u00e3o:   Neste tutorial pretendo demonstrar de modo mais objetivo como fazer programas prisma com interface gr\u00e1fica, isto \u00e9, programas visuais com janelas, bot\u00f5es, caixas de texto etc. O m\u00f3dulo\u00a0ig\u00a0\u00a0\u00e9 um conjunto b\u00e1sico de fun\u00e7\u00f5es que permitem a cria\u00e7\u00e3o de programas visuais. Feito a partir do Gtk+-2 convertido…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"tpl-full-width.php","meta":{"footnotes":""},"class_list":["post-774","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/pages\/774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/comments?post=774"}],"version-history":[{"count":60,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/pages\/774\/revisions"}],"predecessor-version":[{"id":3204,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/pages\/774\/revisions\/3204"}],"wp:attachment":[{"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/media?parent=774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}