{"id":2963,"date":"2017-04-28T14:59:16","date_gmt":"2017-04-28T18:59:16","guid":{"rendered":"http:\/\/linguagemprisma.br4.biz\/blog\/?page_id=2963"},"modified":"2018-03-17T20:20:09","modified_gmt":"2018-03-18T00:20:09","slug":"componentes-graficos","status":"publish","type":"page","link":"https:\/\/linguagemprisma.br4.biz\/blog\/componentes-graficos\/","title":{"rendered":"Tutorial interface gr\u00e1fica IGprisma \u2014 parte III"},"content":{"rendered":"<h2 style=\"text-align: left;\">p\u00e1ginas: <a href=\"https:\/\/linguagemprisma.br4.biz\/blog\/tutorial-interface-grafica-igprisma\/\">1<\/a> &#8211; <a href=\"https:\/\/linguagemprisma.br4.biz\/blog\/tutorial-interface-grafica-igprisma-ii-parte\/\">2<\/a> &#8211; <strong>&lt;<a href=\"https:\/\/linguagemprisma.br4.biz\/blog\/componentes-graficos\/\">3<\/a>&gt;<\/strong>\u00a0&#8211; <a href=\"https:\/\/linguagemprisma.br4.biz\/blog\/tutorial-interface-grafica-ig-prisma-parte-iv\/\">4<\/a><\/h2>\n<h2 style=\"text-align: center;\"><\/h2>\n<p>&nbsp;<\/p>\n<h1>Bot\u00f5es simples<\/h1>\n<p>&nbsp;<\/p>\n<h1>1 &#8211; Criando um bot\u00e3o<\/h1>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-2968\" src=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_ex1-300x240.png\" alt=\"ig_bt_ex1\" width=\"300\" height=\"240\" srcset=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_ex1-300x240.png 300w, https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_ex1.png 497w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Em interface gr\u00e1fica, bot\u00f5es s\u00e3o \u00e1reas retangulares da janela que podem ser clicados com o cursor em cima. Ao ser clicados executam fun\u00e7\u00f5es callbacks previamente conectadas ao bot\u00e3o.<\/p>\n<p>Tudo depende do prop\u00f3sito do programa e criatividade do programador.<\/p>\n<p>Vejamos um simples exemplo:<\/p>\n<p>Salve como botao.prisma<\/p>\n<pre class=\"lang:prisma decode:true\" title=\"Exemplo de bot\u00e3o em ig\">\/\/exemplo simples de botao\r\n\r\nlocal ig = inclua'igbr'\r\n\r\nfuncao principal()\r\n  local jan = ig.janela('Bot\u00e3o', 300,200);\r\n  ig.conecte_funcao(jan,ig.destruido,ig.fimjanela);\r\n  local fix = ig.fixo();\r\n  ig.ad(jan,fix);\r\n  \r\n  local bt = ig.botao(' Clique-me ');\r\n  ig.conecte_funcao(bt, ig.clique, ao_clicar_bt, jan);\/\/passamos a janela como dado extra.\r\n  ig.fixo_ad(fix, bt, 100, 50);\/\/coluna:100, linha: 50\r\n  \r\n  ig.componente_mostre_todos(jan);\r\n  ig.fimprograma(); \/\/loop de eventos\r\n  retorne 0;\/\/finaliza com c\u00f3digo 0 de sucesso.\r\nfim\r\n\r\nfuncao ao_clicar_bt(bt,dado)\r\n  local bt_txt = ig.botao_obt_rotulo(bt);\/\/obt\u00e9m o texto do bot\u00e3o.\r\n  imprima('Botao', bt_txt, 'foi clicado');\r\n  ig.janela_def_titulo(dado,'botao foi clicado');\/\/muda o titulo da janela\r\nfim\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Detalhes:<\/p>\n<pre class=\"lang:prisma decode:true\" title=\"Exemplo de bot\u00e3o em ig\">  local jan = ig.janela('Bot\u00e3o', 300,200);\r\n  ig.conecte_funcao(jan,ig.destruido,ig.fimjanela);\r\n  local fix = ig.fixo();\r\n  ig.ad(jan,fix);<\/pre>\n<ol>\n<li>Criamos a janela<\/li>\n<li>Conectamos a fun\u00e7\u00e3o ig.fimjanela ao evento destruido (fechar janela).<\/li>\n<li>Criamos o painel fixo<\/li>\n<li>Adicionamos o painel fixo na janela<\/li>\n<\/ol>\n<p>Obs.: Lembre-se que a fun\u00e7\u00e3o principal \u00e9 o mesmo que o main do C, ela \u00e9 executada automaticamente pelo interpretador prisma.<\/p>\n<pre class=\"lang:prisma decode:true\" title=\"Exemplo de bot\u00e3o em ig\">local bt = ig.botao(' Clique-me ');<\/pre>\n<p>Criamos um bot\u00e3o e armazenamos na vari\u00e1vel local bt.<\/p>\n<p>Par\u00e2metros:<\/p>\n<p>1 &#8211; Texto do bot\u00e3o. (string)<\/p>\n<p>2 &#8211; (opcional) tamanho do bot\u00e3o &#8211; largura. (n\u00famero)<\/p>\n<p>3 &#8211; (opcional) tamanho do bot\u00e3o &#8211; altura. (n\u00famero);<\/p>\n<p>Obs. Caso use o segundo par\u00e2metro \u00e9 necess\u00e1rio usar tamb\u00e9m o terceiro, caso contr\u00e1rio n\u00e3o ter\u00e1 efeito.<\/p>\n<p>Note que no exemplo usamos apenas o primeiro par\u00e2metro, sendo assim o tamanho do bot\u00e3o \u00e9 vari\u00e1vel de acordo com o tamanho to texto do bot\u00e3o. \u00c9 mais vantajoso n\u00e3o determinar um tamanho caso n\u00e3o saiba o tamanho do texto do bot\u00e3o, pois se o texto for maior que o tamanho determinado do bot\u00e3o uma parte n\u00e3o ficar\u00e1 vis\u00edvel.<\/p>\n<p>Podemos mudar o tamanho do bot\u00e3o posteriormente com a fun\u00e7\u00e3o ig.componente_def_tamanho(comp, larg, alt);<\/p>\n<p>Ex.:<\/p>\n<pre class=\"lang:prisma decode:true \">ig.componente_def_tamanho(bt,100,49);<\/pre>\n<hr \/>\n<p>&nbsp;<\/p>\n<pre class=\"lang:prisma decode:true\" title=\"Exemplo de bot\u00e3o em ig\">ig.conecte_funcao(bt, ig.clique, ao_clicar_bt, jan);\/\/passamos a janela como dado extra.<\/pre>\n<p>Aqui conectamos uma fun\u00e7\u00e3o ao clique do bot\u00e3o, assim toda vez que o bot\u00e3o for clicado a fun\u00e7\u00e3o conectada \u00e9 executada.<\/p>\n<p><strong>Par\u00e2metros:<\/strong><\/p>\n<p>1 &#8211; Componente a ser conectado. No caso o bot\u00e3o bt.<\/p>\n<p>2 &#8211; Nome do evento. (vari\u00e1vel reservada, aprenderemos outras al\u00e9m do ig.clique mais tarde)<\/p>\n<p>3 &#8211; nome da fun\u00e7\u00e3o conectada. (Nome correto da fun\u00e7\u00e3o sem os par\u00eanteses)<\/p>\n<p>4 &#8211; Dado extra que \u00e9 passado para a fun\u00e7\u00e3o conectada quando ela \u00e9 executada. (pode ser uma vari\u00e1vel, tabela, componente, ou at\u00e9 mesmo outra fun\u00e7\u00e3o.)<\/p>\n<hr \/>\n<pre class=\"lang:prisma decode:true\" title=\"Exemplo de bot\u00e3o em ig\">ig.fixo_ad(fix, bt, 100, 50);\/\/coluna:100, linha: 50<\/pre>\n<p>Aqui n\u00f3s adicionamos o componente bot\u00e3o na caixa fixa, nas coordenadas 100 por 50. ( coluna x linha );<\/p>\n<hr \/>\n<pre class=\"lang:prisma decode:true \" title=\"Exemplo de bot\u00e3o em ig\">  ig.componente_mostre_todos(jan);\r\n  ig.fimprograma(); \/\/loop de eventos\r\n  retorne 0; \/\/finaliza com c\u00f3digo 0 de sucesso.\r\nfim<\/pre>\n<p>Aqui mostramos a janela com todos os seus componentes filhos, incluindo o painel fixo com o bot\u00e3o.<\/p>\n<p>E iniciamos o loop de eventos do IG. (loop = repeti\u00e7\u00e3o, la\u00e7o, ciclo);<\/p>\n<p>Obs. fechamos a fun\u00e7\u00e3o principal com seu respectivo &#8216;fim&#8217;.<\/p>\n<hr \/>\n<pre class=\"lang:prisma decode:true\" title=\"Exemplo de bot\u00e3o em ig\">funcao ao_clicar_bt(bt,dado)\r\n  local bt_txt = ig.botao_obt_rotulo(bt);\/\/obt\u00e9m o texto do bot\u00e3o.\r\n  imprima('Botao', bt_txt, 'foi clicado');\r\n  ig.janela_def_titulo(dado,'botao foi clicado');\/\/muda o titulo da janela\r\nfim<\/pre>\n<p>Esta \u00e9 a implementa\u00e7\u00e3o da fun\u00e7\u00e3o que foi conectada ao bot\u00e3o acima.<\/p>\n<p>Dentro dela podemos usar a criatividade, dependendo do prop\u00f3sito do programa e do bot\u00e3o criado, e assim colocamos aquilo que ser\u00e1 executado ao clicar no bot\u00e3o.<\/p>\n<p>Podemos, at\u00e9 mesmo, colocar outras fun\u00e7\u00f5es dentro da callback (fun\u00e7\u00e3o conectada);<\/p>\n<p>Neste caso, como \u00e9 apenas um exemplo, coloquei o comando imprima, e inclusive uma fun\u00e7\u00e3o \u00fatil se vc quiser pegar o texto (r\u00f3tulo) do bot\u00e3o clicado.<\/p>\n<p><strong>Quando o bot\u00e3o \u00e9 clicado, uma mensagem \u00e9 mostrada no terminal.<\/strong><\/p>\n<p>Passamos como dado extra a janela para alterarmos o t\u00edtulo da mesma quando o bot\u00e3o for clicado.<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<p>Algumas pondera\u00e7\u00f5es:<\/p>\n<p>Podemos criar quantos bot\u00f5es quisermos, e conectarmos at\u00e9 mais de uma fun\u00e7\u00e3o em cada bot\u00e3o. Podemos, tamb\u00e9m, conectar uma mesma fun\u00e7\u00e3o em v\u00e1rios bot\u00f5es.<\/p>\n<h1>2 &#8211; Bot\u00e3o com imagem<\/h1>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-2973\" src=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_ex2-300x201.png\" alt=\"ig_bt_ex2\" width=\"300\" height=\"201\" srcset=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_ex2-300x201.png 300w, https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_ex2.png 499w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Baixe as imagens gratuitamente aqui:\u00a0<a href=\"http:\/\/www.iconesgratis.net\/icones_de\/botoes\" target=\"_blank\">http:\/\/www.iconesgratis.net\/icones_de\/botoes<\/a><\/p>\n<p>Se preferir, pode inserir uma imagem facilmente no bot\u00e3o. Isso com certeza deixa o programa mais atrativo visualmente.<\/p>\n<p>Salve como botao_imagem.prisma<\/p>\n<pre class=\"lang:prisma decode:true\" title=\"Inserindo imagem no bot\u00e3o\">\/\/exemplo inserindo imagem no bot\u00e3o.\r\n\r\n\r\nlocal ig = inclua'igbr'\r\n\r\nfuncao principal()\r\n  local jan = ig.janela('Bot\u00e3o', 300,200);\r\n  ig.conecte_funcao(jan,ig.destruido,ig.fimjanela);\r\n  local fix = ig.fixo();\r\n  ig.ad(jan,fix);\r\n  \r\n  local bt = ig.botao(' Clique-me ');\r\n  local img = ig.imagem_arquivo('img_ok.png');\r\n  ig.botao_def_imagem(bt, img);\r\n  ig.conecte_funcao(bt, ig.clique, ao_clicar_bt, jan);\/\/passamos a janela como dado extra.\r\n  ig.fixo_ad(fix, bt, 100, 50);\/\/coluna:100, linha: 50\r\n  \r\n  ig.componente_mostre_todos(jan);\r\n  ig.fimprograma(); \/\/loop de eventos\r\n  retorne 0;\/\/finaliza com c\u00f3digo 0 de sucesso.\r\nfim\r\n\r\nfuncao ao_clicar_bt(bt,dado)\r\n  local bt_txt = ig.botao_obt_rotulo(bt);\/\/obt\u00e9m o texto do bot\u00e3o.\r\n  imprima('Botao', bt_txt, 'foi clicado');\r\n  ig.janela_def_titulo(dado,'botao foi clicado');\/\/muda o titulo da janela\r\nfim\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Detalhes:<\/p>\n<p>O exemplo \u00e9 semelhante ao anterior, s\u00f3 modificado, por isso vamos \u00e0 parte que importa:<\/p>\n<pre class=\"lang:prisma decode:true\" title=\"Inserindo imagem no bot\u00e3o\">  local img = ig.imagem_arquivo('img_ok.png');<\/pre>\n<p>Criamos um componente imagem a partir de um arquivo png.<\/p>\n<p>Par\u00e2metro: string descrevendo o caminho do arquivo png, jpg, ico, gif, svg etc.<\/p>\n<pre class=\"lang:prisma decode:true\" title=\"Inserindo imagem no bot\u00e3o\"> ig.botao_def_imagem(bt, img);<\/pre>\n<p>Definimos a imagem para o bot\u00e3o.<\/p>\n<p><strong>Par\u00e2metros:<\/strong><\/p>\n<ol>\n<li>bot\u00e3o onde ser\u00e1 inserida a imagem.<\/li>\n<li>componente imagem criada previamente.<\/li>\n<\/ol>\n<p><em>O restante \u00e9 igual ao exemplo anterior.<\/em><\/p>\n<p><strong>Obs.: Caso deseje mudar a posi\u00e7\u00e3o da imagem use a fun\u00e7\u00e3o:<\/strong><\/p>\n<pre class=\"lang:prisma decode:true \">ig.botao_def_posicao_imagem(bt, ig.POS_ESQUERDA);<\/pre>\n<p><strong>Par\u00e2metros:<\/strong><\/p>\n<p>1 &#8211; bot\u00e3o onde est\u00e1 a imagem a ser modificada.<\/p>\n<p>2 &#8211; posi\u00e7\u00e3o da imagem que \u00e9 uma vari\u00e1vel reservada ig, veja:<\/p>\n<p>ig.POS_ESQUERDA,\u00a0ig.POS_DIREITA, ig.POS_SUPERIOR (em cima), ig.POS_INFERIOR (embaixo).<\/p>\n<hr \/>\n<h1>3 &#8211; Mudando a imagem do bot\u00e3o<\/h1>\n<p>&nbsp;<\/p>\n<p>Muito \u00fatil quando queremos chamar a aten\u00e7\u00e3o ao passar o mouse por cima do bot\u00e3o, alterando a cor.<\/p>\n<p>Neste caso usaremos os eventos ig.dentro (quando o mouse entrar dentro da \u00e1rea do bot\u00e3o) e ig.fora (quando o mouse sair da \u00e1rea do bot\u00e3o);<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-2976 alignleft\" src=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_ex3_mouse_fora-300x227.png\" alt=\"ig_bt_ex3_mouse_fora\" width=\"254\" height=\"192\" srcset=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_ex3_mouse_fora-300x227.png 300w, https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_ex3_mouse_fora.png 302w\" sizes=\"auto, (max-width: 254px) 100vw, 254px\" \/> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2977\" src=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_mouse_dentro_img-300x227.png\" alt=\"ig_bt_mouse_dentro_img\" width=\"252\" height=\"191\" srcset=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_mouse_dentro_img-300x227.png 300w, https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_mouse_dentro_img.png 302w\" sizes=\"auto, (max-width: 252px) 100vw, 252px\" \/><\/p>\n<p>Veja o exemplo:<\/p>\n<p>Salve como bt_troca_imagem.prisma<\/p>\n<pre class=\"lang:prisma decode:true\">\/\/exemplo inserindo imagem no bot\u00e3o.\r\n\r\n\r\nlocal ig = inclua'igbr'\r\n\r\nfuncao principal()\r\n  local jan = ig.janela('Bot\u00e3o', 300,200);\r\n  ig.conecte_funcao(jan,ig.destruido,ig.fimjanela);\r\n  local fix = ig.fixo();\r\n  ig.ad(jan,fix);  \r\n  \r\n  local bt = ig.botao();\r\n  ig.botao_def_relevo(bt,ig.RELEVO_NULO);\/\/nao aparece borda do botao\r\n  local img = ig.imagem_arquivo('img_vermelho.png');\r\n  ig.botao_def_imagem(bt, img);\r\n  ig.conecte_funcao(bt, ig.clique, ao_clicar_bt, jan);\/\/passamos a janela como dado extra.\r\n  \/\/evento mouse dentro do botao.\r\n  ig.conecte_funcao(bt, ig.dentro, dentro_bt);\r\n  \/\/evento mouse saindo do botao\r\n  ig.conecte_funcao(bt, ig.fora, fora_bt);\r\n  ig.fixo_ad(fix, bt, 100, 50);\/\/coluna:100, linha: 50\r\n  \r\n  local bt_sair = ig.botao(' Sair ');\r\n  local img = ig.imagem_estoque(ig.ESTOQUE_SAIR, 5);\r\n  ig.botao_def_imagem(bt_sair, img);\r\n  ig.fixo_ad(fix, bt_sair, 200, 50);\r\n  ig.conecte_funcao(bt_sair, ig.clique, ig.fimjanela);\/\/encerra o loop de eventos e assim o programa.\r\n  \r\n  ig.componente_mostre_todos(jan);\r\n  ig.fimprograma(); \/\/loop de eventos\r\n  retorne 0;\/\/finaliza com c\u00f3digo 0 de sucesso.\r\nfim\r\n\r\nfuncao ao_clicar_bt(bt,dado)\r\n  imprima('Botao com imagem foi clicado');\r\n  ig.janela_def_titulo(dado,'botao foi clicado');\/\/muda o titulo da janela\r\nfim\r\n\r\nfuncao dentro_bt(bt,dado)\r\n   local img = ig.imagem_arquivo('img_azul.png');\r\n  ig.botao_def_imagem(bt,img);\r\nfim\r\n\r\nfuncao fora_bt(bt,dado)\r\n   local img = ig.imagem_arquivo('img_vermelho.png');\r\n  ig.botao_def_imagem(bt,img);\r\nfim\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Vamos ignorar aquilo que j\u00e1 foi explicado nos exemplos anteriores, vamos para o que \u00e9 novidade:<\/p>\n<pre class=\"lang:prisma decode:true\">local bt = ig.botao();<\/pre>\n<p>Criamos um bot\u00e3o vazio, sem par\u00e2metro algum.<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<pre class=\"lang:prisma decode:true\">ig.botao_def_relevo(bt,ig.RELEVO_NULO);\/\/nao aparece borda do botao<\/pre>\n<p>Modificamos o relevo do bot\u00e3o para NULO, ou seja a borda n\u00e3o aparecer\u00e1.<\/p>\n<p>Par\u00e2metros:<\/p>\n<p>1 &#8211; bot\u00e3o<\/p>\n<p>2 &#8211; tipo de relevo, pode ser: ig.RELEVO_NORMAL, ig.RELEVO_MEDIO, ig.RELEVO_NULO.<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<pre class=\"lang:prisma decode:true\">  local img = ig.imagem_arquivo('img_vermelho.png');\r\n  ig.botao_def_imagem(bt, img);<\/pre>\n<p>Criamos uma imagem a partir de um arquivo e inserimos no bot\u00e3o.<\/p>\n<pre class=\"lang:prisma decode:true\">\/\/evento mouse dentro do botao.\r\n  ig.conecte_funcao(bt, ig.dentro, dentro_bt);\r\n  \/\/evento mouse saindo do botao\r\n  ig.conecte_funcao(bt, ig.fora, fora_bt);<\/pre>\n<p>Conectamos uma fun\u00e7\u00e3o ao evento ig.dentro do bot\u00e3o (quando o mouse entra na \u00e1rea do bot\u00e3o).<\/p>\n<p>E conectamos a outra fun\u00e7\u00e3o ao evento ig.fora do bot\u00e3o (quando o mouse sai do bot\u00e3o).<\/p>\n<hr \/>\n<pre class=\"lang:prisma decode:true\">local bt_sair = ig.botao(' Sair ');<\/pre>\n<p>Criamos outro bot\u00e3o com o Texto &#8216; Sair &#8216;.<\/p>\n<hr \/>\n<pre class=\"lang:prisma decode:true\">  local img = ig.imagem_estoque(ig.ESTOQUE_SAIR, 5);\r\n  ig.botao_def_imagem(bt_sair, img);<\/pre>\n<p>Criamos uma imagem a partir do estoque (SAIR) com tamanho 5 (do 1 ao 6, em que 6 \u00e9 o tamanho m\u00e1ximo); e inserimos no bot\u00e3o sair.<\/p>\n<pre class=\"lang:prisma decode:true\">ig.conecte_funcao(bt_sair, ig.clique, ig.fimjanela);\/\/encerra o loop de eventos e assim o programa.<\/pre>\n<p>conectamos a fun\u00e7\u00e3o ig.fimjanela ao evento clique do bot\u00e3o sair (lembrando que a fun\u00e7\u00e3o ig.fimjanela \u00e9 definida na biblioteca igbr, ela encerra o loop de eventos do ig).<\/p>\n<hr \/>\n<pre class=\"lang:prisma decode:true\">funcao dentro_bt(bt,dado)\r\n   local img = ig.imagem_arquivo('img_azul.png');\r\n  ig.botao_def_imagem(bt,img);\r\nfim<\/pre>\n<p>Esta \u00e9 a fun\u00e7\u00e3o conectada ao evento ig.dentro, quando o mouse entra no bot\u00e3o ela \u00e9 executada.<\/p>\n<p>Dentro desta fun\u00e7\u00e3o, criamos a imagem de cor azul e definimos no bot\u00e3o.<\/p>\n<hr \/>\n<pre class=\"lang:prisma decode:true\">funcao fora_bt(bt,dado)\r\n   local img = ig.imagem_arquivo('img_vermelho.png');\r\n  ig.botao_def_imagem(bt,img);\r\nfim<\/pre>\n<p>Aqui, temos a fun\u00e7\u00e3o conectada ao evento ig.fora, quando o mouse j\u00e1 est\u00e1 dentro do bot\u00e3o e ao sair dele essa fun\u00e7\u00e3o \u00e9 executada.<\/p>\n<p>Dentro desta fun\u00e7\u00e3o criamos novamente a imagem de cor vermelha e definimos no bot\u00e3o.<\/p>\n<p>O restante do c\u00f3digo \u00e9 igual aos exemplos anteriores.<\/p>\n<p>&nbsp;<\/p>\n<h1>4 &#8211; Bot\u00e3o criado a partir do estoque<\/h1>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-2982\" src=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_estoque-300x227.png\" alt=\"ig_bt_estoque\" width=\"300\" height=\"227\" srcset=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_estoque-300x227.png 300w, https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_estoque.png 302w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Salve como bt_estoque.prisma.<\/p>\n<pre class=\"lang:prisma decode:true\">\/\/exemplo botao estoque\r\n\r\nlocal ig = inclua'igbr'\r\n\r\nfuncao principal()\r\n  local jan = ig.janela('Bot\u00e3o', 300,200);\r\n  ig.componente_def_dica_markup(jan, '&lt;span foreground=\"blue\" background=\"red\" size=\"x-large\"&gt;Dica da &lt;i&gt;janela&lt;\/i&gt;!&lt;\/span&gt;');\r\n\r\n  ig.conecte_funcao(jan,ig.destruido,ig.fimjanela);\r\n  local fix = ig.fixo();\r\n  ig.ad(jan,fix);  \r\n \r\n  local bt_fechar = ig.botao_estoque(ig.ESTOQUE_SAIR);\r\n  \r\n  ig.componente_def_dica_markup(bt_fechar,'&lt;b&gt;Aten\u00e7\u00e3o&lt;\/b&gt;\\n\\n&lt;i&gt;&lt;u&gt;Fechar o programa?&lt;\/u&gt;&lt;\/i&gt;');\r\n  ig.fixo_ad(fix, bt_fechar, 20, 50);\r\n  ig.conecte_funcao(bt_fechar, ig.clique, ig.fimjanela);\/\/encerra o loop de eventos e assim o programa.\r\n  \r\n  ig.componente_mostre_todos(jan);\r\n  ig.fimprograma(); \/\/loop de eventos\r\n  retorne 0;\/\/finaliza com c\u00f3digo 0 de sucesso.\r\nfim\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Detalhes:<\/p>\n<p>Vamos para o que \u00e9 novidade:<\/p>\n<pre class=\"lang:prisma decode:true\">ig.componente_def_dica_markup(jan, '&lt;span foreground=\"blue\" background=\"red\" size=\"x-large\"&gt;Dica da &lt;i&gt;janela&lt;\/i&gt;!&lt;\/span&gt;');\r\n<\/pre>\n<p>Esta fun\u00e7\u00e3o define uma dica para componentes (janelas, bot\u00f5es, 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)<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<pre class=\"lang:prisma decode:true\">  local bt_fechar = ig.botao_estoque(ig.ESTOQUE_SAIR);<\/pre>\n<p>Aqui criamos um bot\u00e3o a partir do estoque, com imagem e texto. (O interessante \u00e9 que o texto \u00e9 traduzido automaticamente para o idioma padr\u00e3o do pc)<\/p>\n<p>Para uma lista do estoque veja o link abaixo:<\/p>\n<p><a href=\"https:\/\/linguagemprisma.br4.biz\/blog\/estoque-de-imagens\/\" target=\"_blank\">https:\/\/linguagemprisma.br4.biz\/blog\/estoque-de-imagens\/<\/a><\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<pre class=\"lang:prisma decode:true\">ig.componente_def_dica_markup(bt_fechar,'&lt;b&gt;Aten\u00e7\u00e3o&lt;\/b&gt;\\n\\n&lt;i&gt;&lt;u&gt;Fechar o programa?&lt;\/u&gt;&lt;\/i&gt;');<\/pre>\n<p>Na fun\u00e7\u00e3o acima, definimos uma dica markup para o bot\u00e3o sair.<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h1>5 &#8211; Bot\u00f5es com setas<\/h1>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2983\" src=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/04\/ig_bt_setas.png\" alt=\"ig_bt_setas\" width=\"142\" height=\"56\" \/><\/p>\n<pre class=\"lang:prisma decode:true \">\/\/ exemplo setas em botoes\r\n\r\ninclua 'igbr' \/\/inclui a biblioteca de funcoes graficas\r\n\r\nfuncao principal()\r\n  \r\n  local janela = ig.janela('EXEMPLO SETA');\r\n  ig.conecte_funcao( janela , ig.destruido , ig.fimjanela ); \/\/se preferir usar o eventos em ingles\r\n\r\n  \/\/criando uma caixa para colocar os botoes\r\n \r\n  local caixah = ig.caixahorizontal(falso,0);\r\n  ig.ad(janela, caixah);\r\n\r\n  local botao = ig.botao(); \/\/cria um botao vazio, sem rotulo nem imagem\r\n  local seta = ig.seta (ig.SETA_CIMA , ig.SOMBRA_DENTRO); \/\/cria uma seta com dire\u00e7ao e estilo sombra\r\n  ig.ad (botao, seta);  \r\n  ig.caixa_ad(caixah, botao, falso,falso,3);\r\n  \r\n  \/\/usamos as mesmas vari\u00e1veis.\r\n  botao = ig.botao(); \/\/cria um botao vazio, sem rotulo nem imagem\r\n  seta = ig.seta (ig.SETA_BAIXO , ig.SOMBRA_FORA); \/\/cria uma seta com dire\u00e7ao e estilo sombra\r\n  ig.ad (botao, seta);  \r\n  ig.caixa_ad(caixah, botao, falso,falso,3);\r\n  \r\n  \/\/usamos as mesmas vari\u00e1veis.\r\n  botao = ig.botao(); \/\/cria um botao vazio, sem rotulo nem imagem\r\n  seta = ig.seta (ig.SETA_ESQUERDA , ig.SOMBRA_RISCADO_DENTRO); \/\/cria uma seta com dire\u00e7ao e estilo sombra\r\n  ig.ad (botao, seta);  \r\n  ig.caixa_ad(caixah, botao, falso,falso,3);\r\n  \r\n  \/\/usamos as mesmas vari\u00e1veis.\r\n  botao = ig.botao(); \/\/cria um botao vazio, sem rotulo nem imagem\r\n  seta = ig.seta (ig.SETA_DIREITA , ig.SOMBRA_RISCADO_FORA); \/\/cria uma seta com dire\u00e7ao e estilo sombra\r\n  ig.ad (botao, seta);  \r\n  ig.caixa_ad(caixah, botao, falso,falso,3);\r\n  \r\n  ig.componente_mostre_todos ( janela );\r\n  ig.fimprograma ();\r\n  retorne 0;\r\nfim\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Detalhes:<\/p>\n<pre class=\"lang:prisma decode:true\">  local botao = ig.botao(); \/\/cria um botao vazio, sem rotulo nem imagem\r\n  local seta = ig.seta (ig.SETA_CIMA , ig.SOMBRA_DENTRO); \/\/cria uma seta com dire\u00e7ao e estilo sombra\r\n  ig.ad (botao, seta);<\/pre>\n<p>Criamos um bot\u00e3o vazio.<\/p>\n<p>Criamos a seta:<\/p>\n<p>Par\u00e2metros:<\/p>\n<p>1 &#8211; tipos de seta: ig.SETA_CIMA, ig.SETA_BAIXO, ig.SETA_DIREITA, ig.SETA_ESQUERDA;<\/p>\n<p>2 &#8211; tipo do efeito: ig.SOMBRA_DENTRO; ig.SOMBRA_FORA, ig.SOMBRA_RISCADO_DENTRO, ig.SOMBRA_RISCADO_FORA;<\/p>\n<p>Tente alterar os valores e veja os resultados, geralmente as sombras s\u00e3o praticamente impercept\u00edveis dependendo do sistema e do tema.<\/p>\n<p>Os outros comandos j\u00e1 foram detalhados!<\/p>\n<hr \/>\n<h1>6 &#8211; Fun\u00e7\u00f5es \u00fateis para bot\u00f5es:<\/h1>\n<p>&nbsp;<\/p>\n<p><strong>* ig.botao_mostre_imagem(valor);<\/strong><\/p>\n<p>Define todas as imagens dos bot\u00f5es como vis\u00edveis ou n\u00e3o.<\/p>\n<p>Par\u00e2metro: valor = verdadeiro ou falso.<\/p>\n<p><strong><strong>* <\/strong>img = ig.botao_obt_imagem(botao);<\/strong><\/p>\n<p>Obt\u00e9m a imagem do bot\u00e3o. Note que em ig imagem n\u00e3o \u00e9 a foto ou ilustra\u00e7\u00e3o, mas sim o cont\u00eainer onde aparece a imagem.<\/p>\n<ol>\n<li>par\u00e2metros: bot\u00e3o com imagem.<\/li>\n<li>retorno: vari\u00e1vel ig imagem.<\/li>\n<\/ol>\n<p><strong><strong>* <\/strong>pos = botao_obt_posicao_imagem(botao);<\/strong><\/p>\n<p>Retorna um n\u00famero que indica a posi\u00e7\u00e3o da imagem.<\/p>\n<ol>\n<li>par\u00e2metro: bot\u00e3o com a imagem.<\/li>\n<li>retorno = posi\u00e7\u00e3o da imagem, que pode ser igual a\u00a0ig.POS_ESQUERDA,\u00a0ig.POS_DIREITA, ig.POS_SUPERIOR (em cima), ig.POS_INFERIOR (embaixo).<\/li>\n<\/ol>\n<p><strong><strong>* <\/strong>ig.botao_def_rotulo(botao, &#8220;texto&#8221;);<\/strong><\/p>\n<p>Define um novo texto (r\u00f3tulo) para o bot\u00e3o.<\/p>\n<p><strong>Par\u00e2metros:\u00a0<\/strong><\/p>\n<ol>\n<li>botao<\/li>\n<li>string (texto) para ser inserida no bot\u00e3o.<\/li>\n<\/ol>\n<p><strong><strong>* <\/strong>ig.botao_def_alinhamento(botao, x,y);<\/strong><\/p>\n<p><strong>Par\u00e2metros:<\/strong><\/p>\n<ol>\n<li>botao &#8211; \u00e9 o bot\u00e3o criado previamente.<\/li>\n<li>x &#8211; \u00e9 o alinhamento horizontal &#8211; 0.0 at\u00e9 1.0 (0.0 = esquerda, 0.5 = 50%(meio), 1.0 = direita);<\/li>\n<li>y &#8211; alinhamento vertical &#8211; 0.0 at\u00e9 1.0 (0.0 = cima, 0.5 = 50%(meio), 1.0 = embaixo);<\/li>\n<\/ol>\n<p><em><strong>obs. poss\u00edvel usar em x e y valores como 0.09 (9%) ou 0.8 (80%), 0.3 etc.;<\/strong><\/em><\/p>\n<p><strong>* x, y =\u00a0ig.botao_obt_alinhamento(botao);<\/strong><\/p>\n<p>Obt\u00e9m os valores atuais de alinhamento. (dois valores: x e y);<\/p>\n<p><strong>Par\u00e2metro: <\/strong><\/p>\n<ol>\n<li>botao &#8211; bot\u00e3o criado previamente.<\/li>\n<\/ol>\n<p><strong>retornos:<\/strong><\/p>\n<ol>\n<li>x &#8211; n\u00famero de 0.0 a 1.0 para alinhamento horizontal.<\/li>\n<li>y &#8211;\u00a0n\u00famero de 0.0 a 1.0 para alinhamento vertical.<\/li>\n<\/ol>\n<p><em><strong>Obs.: o retorno \u00e9 m\u00faltiplo, dever seguir exatamente a ordem x, y separados por v\u00edrgula.<\/strong><\/em><\/p>\n<p>&nbsp;<\/p>\n<p><strong><strong>* <\/strong>bt\u00a0= ig.botao_com_mnemonico(&#8216;_Texto&#8217;);<\/strong><\/p>\n<p>Cria um novo bot\u00e3o com tecla de atalho mnem\u00f4nico, no exemplo acima se pressionarmos as teclas ALT + T o bot\u00e3o \u00e9 clicado.<\/p>\n<p><strong>Par\u00e2metro:<\/strong><\/p>\n<ol>\n<li>Texto a ser exibido no bot\u00e3o, coloque um underscore antes da letra que ser\u00e1 o atalho. (ex.: &#8216;E_xecutar&#8217; = ALT+X);<\/li>\n<\/ol>\n<p><strong>Retorno:<\/strong><\/p>\n<ol>\n<li>\u00a0bt &#8211; vari\u00e1vel ig bot\u00e3o (userdata que representa o ponteiro para o bot\u00e3o criado);<\/li>\n<\/ol>\n<p>TIPO_RELEVO = ig.botao_obt_relevo(bt);<\/p>\n<p>Obt\u00e9m o n\u00famero que descreve o tipo de relevo definido pela fun\u00e7\u00e3o<\/p>\n<p><strong>Par\u00e2metro:<\/strong><\/p>\n<ol>\n<li>bt &#8211; bot\u00e3o criado previamente.<\/li>\n<\/ol>\n<p><strong>retorno:<\/strong><\/p>\n<ol>\n<li>TIPO_RELEVO = tipo de relevo que pode ser: \u00a0 \u00a0 \u00a0 \u00a0 ig.RELEVO_NULO (nenhum), ig.RELEVO_MEDIO, ig.RELEVO_NORMAL.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><strong>* ig.botao_def_relevo(bt, ig.RELEVO_*);<\/strong><\/p>\n<p>Define o tipo de relevo para o bot\u00e3o.<\/p>\n<p><strong>Par\u00e2metros:<\/strong><\/p>\n<ol>\n<li>\u00a0Bot\u00e3o criado previamente.<\/li>\n<li>Tipo de relevo. (S\u00e3o os mesmos tipos da fun\u00e7\u00e3o anterior)<\/li>\n<\/ol>\n<p><strong>Retornos: n\u00e3o possui.\u00a0<\/strong><\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>* \u00a0<strong>valor = ig.botao_obt_usa_estoque(bt);<\/strong><\/p>\n<p>Diz se o bot\u00e3o \u00e9 de estoque ou n\u00e3o.<\/p>\n<p><strong>Par\u00e2metro:<\/strong><\/p>\n<ol>\n<li>bt &#8211; \u00a0bot\u00e3o criado previamente.<\/li>\n<\/ol>\n<p><strong>Retorno:<\/strong><\/p>\n<ol>\n<li>valor &#8211; pode ser: verdadeiro (bot\u00e3o \u00e9 do estoque) ou falso (n\u00e3o \u00e9 do estoque);<\/li>\n<\/ol>\n<hr \/>\n<p><strong><strong>* <\/strong>ig.botao_def_usa_estoque(bt, valor);<\/strong><\/p>\n<p>Define se o bot\u00e3o deve ser interpretado como id do estoque.<\/p>\n<p><strong>Par\u00e2metros:\u00a0<\/strong><\/p>\n<ol>\n<li>bt &#8211; bot\u00e3o previamente criado.<\/li>\n<li>valor &#8211; verdadeiro ou falso. (se verdadeiro, o r\u00f3tulo do bot\u00e3o \u00e9 usado como id para selecionar um item do estoque para o bot\u00e3o).<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><strong><strong>* <\/strong>valor = ig.botao_obt_usa_sublinhado(bt);<\/strong><\/p>\n<p>Diz se o bot\u00e3o pode ser usado como mnem\u00f4nico ou n\u00e3o.<\/p>\n<p><strong>Par\u00e2metro:\u00a0<\/strong><\/p>\n<ol>\n<li>bt &#8211; bot\u00e3o previamente criado.<\/li>\n<\/ol>\n<p><strong>Retorno:<\/strong><\/p>\n<ol>\n<li>valor &#8211; se falso, n\u00e3o \u00e9 mnem\u00f4nico. Se verdadeiro, ent\u00e3o \u00e9 mnem\u00f4nico.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><strong><strong>* <\/strong>ig.botao_def_usa_sublinhado(bt, valor);<\/strong><\/p>\n<p>Define um bot\u00e3o como mnem\u00f4nico, mesmo que ele n\u00e3o tenha sido criado com a fun\u00e7\u00e3o ig.botao_com_mnem\u00f4nico();<\/p>\n<p><strong>Par\u00e2metros:\u00a0<\/strong><\/p>\n<ol>\n<li>bt &#8211; bot\u00e3o criado previamente.<\/li>\n<li>valor &#8211; verdadeiro ou falso; (se falso, n\u00e3o \u00e9 mnem\u00f4nico. Se verdadeiro, ent\u00e3o \u00e9 mnem\u00f4nico.)<\/li>\n<\/ol>\n<p>Obs.: coloque um sublinhado _ antes da letra que deseja ser o atalho (ALT+letra);<\/p>\n<p>&nbsp;<\/p>\n<p><strong><strong>* <\/strong>ig.botao_def_foco_ao_clicar(bt, valor);<\/strong><\/p>\n<p>Define se o bot\u00e3o ter\u00e1 foco ou n\u00e3o ao ser clicado.<\/p>\n<p><strong>Par\u00e2metro:<\/strong><\/p>\n<ol>\n<li>bt &#8211; bot\u00e3o.<\/li>\n<li>valor &#8211; verdadeiro (sim), falso (n\u00e3o);<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><strong><strong>* <\/strong>valor = ig.botao_obt_foco_ao_clicar(bt);<\/strong><\/p>\n<p>Diz se um bot\u00e3o est\u00e1 definido ou n\u00e3o para receber foco ao clique.<\/p>\n<p><strong>Par\u00e2metro:<\/strong><\/p>\n<ol>\n<li>bt &#8211; bot\u00e3o;<\/li>\n<\/ol>\n<p><strong>Retorno:<\/strong><\/p>\n<ol>\n<li>valor &#8211; verdadeiro (sim), falso (n\u00e3o).<\/li>\n<\/ol>\n<hr \/>\n<p>&nbsp;<\/p>\n<p><strong><strong>* <\/strong>comp = ig.botao_obt_janela_evento(bt);<\/strong><\/p>\n<p>Obt\u00e9m a janela de eventos (GdkWindow) do botao.<\/p>\n<p><strong>Par\u00e2metro:<\/strong><\/p>\n<ol>\n<li>bt &#8211; bot\u00e3o;<\/li>\n<\/ol>\n<p><strong>Retorno:<\/strong><\/p>\n<ol>\n<li>comp &#8211; componente janela de evento (userdata representando o ponteiro para GdkWindow do C);<\/li>\n<\/ol>\n<p><em>Obs.: Poucos ser\u00e3o os momentos em que voc\u00ea usar\u00e1 essa fun\u00e7\u00e3o.<\/em><\/p>\n<p><strong>Obs.: n\u00e3o listei aqui as fun\u00e7\u00f5es usadas nos exemplos acima pois foram bem explicadas anteriormente.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2 style=\"text-align: left;\">p\u00e1ginas: <a href=\"https:\/\/linguagemprisma.br4.biz\/blog\/tutorial-interface-grafica-igprisma\/\">1<\/a> &#8211; <a href=\"https:\/\/linguagemprisma.br4.biz\/blog\/tutorial-interface-grafica-igprisma-ii-parte\/\">2<\/a> &#8211; <strong>&lt;<a href=\"https:\/\/linguagemprisma.br4.biz\/blog\/componentes-graficos\/\">3<\/a>&gt;<\/strong>\u00a0&#8211; <a href=\"https:\/\/linguagemprisma.br4.biz\/blog\/tutorial-interface-grafica-ig-prisma-parte-iv\/\">4<\/a><\/h2>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>p\u00e1ginas: 1 &#8211; 2 &#8211; &lt;3&gt;\u00a0&#8211; 4 &nbsp; Bot\u00f5es simples &nbsp; 1 &#8211; Criando um bot\u00e3o &nbsp; Em interface gr\u00e1fica, bot\u00f5es s\u00e3o \u00e1reas retangulares da janela que podem ser clicados com o cursor em cima. Ao ser clicados executam fun\u00e7\u00f5es callbacks previamente conectadas ao bot\u00e3o. Tudo depende do prop\u00f3sito do programa e criatividade do programador&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"tpl-full-width.php","meta":{"footnotes":""},"class_list":["post-2963","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/pages\/2963","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=2963"}],"version-history":[{"count":22,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/pages\/2963\/revisions"}],"predecessor-version":[{"id":3206,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/pages\/2963\/revisions\/3206"}],"wp:attachment":[{"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/media?parent=2963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}