{"id":461,"date":"2015-01-09T18:08:00","date_gmt":"2015-01-09T18:08:00","guid":{"rendered":"http:\/\/linguagemprisma.net\/?p=461"},"modified":"2017-03-02T03:25:36","modified_gmt":"2017-03-02T07:25:36","slug":"botao-customizado-imagem-cor-fonte","status":"publish","type":"post","link":"https:\/\/linguagemprisma.br4.biz\/blog\/igprisma\/botao-customizado-imagem-cor-fonte\/","title":{"rendered":"Bot\u00e3o customizado (imagem, cor fonte)"},"content":{"rendered":"<p>Ol\u00e1, este exemplo demonstra como definir a fonte e a cor do rotulo de bot\u00f5es:<\/p>\n<p><em>(Antes de executar algum exemplo sempre d\u00ea uma olhada na p\u00e1gina de downloads <\/em><\/p>\n<p><em>Baixa a vers\u00e3o mais atual de Prisma, ok!)<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1339\" src=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2015\/09\/botoes_customizados-300x226.png\" alt=\"botoes_customizados\" width=\"300\" height=\"226\" srcset=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2015\/09\/botoes_customizados-300x226.png 300w, https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2015\/09\/botoes_customizados.png 307w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>segue o c\u00f3digo para estudo:<\/p>\n<pre class=\"height-set:true lang:prisma decode:true\">\/\/exemplo de botao com caixa\r\n\/\/ a biblioteca ig \u00e9 incrivel porque te d\u00e1 v\u00e1rias op\u00e7\u00f5es para fazer algo, entao voce escolhe qual\r\n\/\/\u00e9 melhor para cada situa\u00e7\u00e3o:\r\n\r\ninclua 'igbr';\r\n\r\njanela = ig.janela( \"Exemplo de bot\u00f5es customizados\" , 300 , 200 );\r\nig.janela_def_posicao( janela , ig.jan_pos_centro );\r\n\r\nig.conecte( janela , ig.destruido , \"ig.fimjanela( )\" ); \/\/conecta o evento destruir da janela a funcao fechar programa.\r\nig.caixa_def_borda_largura ( janela , 20 ); \/\/definindo a largura da borda da janela\r\n\r\nimagem = ig.imagem_estoque ( ig.estoque'save' , 3 ); \/\/imagem save (salvar) do estoque tamanho 3\r\n\r\nrotulo = ig.rotulo \"botao legal\" ; \/\/cria um rotulo para o bot\u00e3o.\r\nig.componente_modifique_fonte ( rotulo , \"Arial  bold italic 22 \" ); \/\/definindo a fonte do rotulo do botao\r\nig.componente_modifique_fg ( rotulo , ig.estado_normal , 0 , 999999  , 99999 ); \/\/a cor do rotulo estado normal\r\nig.componente_modifique_fg ( rotulo , ig.estado_foco , 0 , 99999999 , 99999999 ); \/\/a cor quando o mouse passar em cima.\r\n\r\ncaixah = ig.caixa (\"horizontal\" , falso , 0 ); \/\/outro modo de criar caixa, neste caso define-se horizontal ou vertical no primeiro par\u00e2metro. os outros dois \u00e9 igual ao j\u00e1 aprendido\r\n\r\n\r\nig.caixa_ad ( caixah , imagem , falso , falso , 3 ); \/\/colocando a imagem na caixa horizontal\r\n\r\nig.caixa_ad ( caixah , rotulo , falso , falso , 3 ) ; \/\/colocando o rotulo na caixa horizontal\r\n\r\nbotao = ig.botao( ); \/\/cria um botao sem parametro algum\r\n\r\n\r\nig.componente_def_nome ( botao , '&lt;&lt;botao legal&gt;&gt;' ); \/\/define um apelido (nome) para o botao\r\nig.ad ( botao , caixah ); \/\/Por fim coloca a caixa horizontal(que ja contem a imagem e o rotulo) dentro do botao, pois botao \u00e9 um tipo de caixa muito espec\u00edfico;\r\n\r\n\/\/vamos criar agora um botao no estilo vertical, imagem em cima e texto embaixo. usaremos a caixa vertical:\r\n\r\ncaixav = ig.caixa( \"vertical\" , falso , 0 ); \/\/criando uma caixa vertical;\r\n\/\/o comando acima \u00e9 o mesmo que ig.caixavertical ( falso , 0 );\r\n\r\nimagem2 = ig.imagem_estoque ( ig.estoque'open' , 3 ); \/\/imagem do estoque tamanho 3\r\nrotulo2 = ig.rotulo 'botao abrir' ;\r\nig.componente_modifique_fonte ( rotulo2 , \"Arial bold 35 \");\r\nig.componente_modifique_fg ( rotulo2 , ig.estado_normal ,   2222222 , 0 , 0 ); \/\/muda cor da fonte botao em estado normal\r\nig.componente_modifique_fg ( rotulo2 , ig.estado_foco , 0 , 0 , 2222222  );\/\/muda cor da fonte do botao quando o mouse estiver em cima\r\n\/\/Lembre-se as cores s\u00e3o trabalhadas em R G B (vermelho, verde e azul ) sao os tres ultimos numeros\r\n\/\/tente modificar os numeros para ver o que acontece\r\nig.caixa_ad( caixav , imagem2 , falso , falso , 2 ); \/\/colocando a imagem dentro da caixa vertical\r\nig.caixa_ad( caixav , rotulo2 , falso , falso , 2 ) ; \/\/adicionando o rotulo na caixa vertical\r\n\r\nbotao2 = ig.botao( );\r\nig.ad ( botao2 , caixav );\r\n\r\n\r\n\/\/funcao para ser conectada ao botao:\r\nfuncao botao_responda ( bt , jan )\r\n     local rotulo = ig.componente_obt_nome ( bt ); \/\/obtendo a string do nome criado acima\r\n     \/\/lembre-se que os .. \u00e9 um operador de unir strings, ok:\r\n\r\n     ig.msg( jan , \"Titulo da mensagem\" , \"O botao \" .. rotulo .. \" foi clicadon\" );\r\nfim \/\/fim da funcao botao_responda\r\n\r\n\/\/agora vamos conectar a fun\u00e7\u00e3o acima no botao legal, para que ao clicar nele esta fun\u00e7ao seja executada:\r\nig.conecte ( botao , ig.clique , \"botao_responda ( %s , janela )\" );\r\n\/\/observe que na funcao conecte, o terceiro parametro \u00e9 a funcao callback, e nela consta dois parametros\r\n\/\/o primeiro \u00e9 o %s que ser\u00e1 substituido pelo id do proprio componente conectado, no caso o botao legal\r\n\/\/o segundo \u00e9 a janela, que ser\u00e1 usada na mensagem como 'jan'\r\n\r\nfuncao abrir ( bt , janela )\r\n\r\n      arq = ig.dialogo_abrir ( janela , \"Abrir arquivo\"  ); \/\/observe que ao abrir o dialogo, aparecera uma\r\n      \/\/mensagem na tela do cmd, \u00e9 normal, apenas diz que n\u00e3o foi encontrado o tema de icones\r\n\r\n      se arq == ig.ret_cancelar  entao arq = \"Foi cancelado pelo usu\u00e1rio\"\r\n      senaose arq == ig.ret_fechar entao arq = \"Foi fechado pelo usu\u00e1rio\"\r\n      fim\r\n      \/\/o retorno ok nao tem para ig.dialogo_abrir ja que \u00e9 o proprio arquivo quando for apertado ok\r\n      \/\/os retornos sao numeros, ig.ret_cancelar = -6 e ig.ret_fechar = -4, por\u00e9m a variavel \u00e9 mais\r\n      \/\/facil de lembrar do que o proprio numero\r\n      \r\n      ig.msg( janela , \"Arquivo aberto\" , arq );\r\n      imprima ( arq );\r\n\r\nfim \/\/fim funcao abrir\r\nig.conecte( botao2 , ig.clique , \"abrir ( %s , janela )\" );\r\n\r\nfixo = ig.fixo( ); \/\/criamos uma caixa fixa para receber componentes, lembre-se caixas conseguem conter\r\n\/\/mais de um componente\r\nig.ad ( janela , fixo ); \/\/adicionando o fixo na janela, obs. janelas s\u00e3o caixas que so podem conter um componente.\r\n\r\nig.fixo_ad ( fixo , botao , 1 , 0 ); \/\/adicionando o botao no fixo, na col 100 e linha 50.\r\nig.fixo_ad ( fixo , botao2, 1 ,  50 );\/\/adicionando o botao abrir no fixo;\r\n\r\nig.componente_mostre_todos ( janela ); \/\/torna a janela visivel com todos seus componentes adicionados\r\n\r\nig.fimprograma ( ) ; \/\/inicia o loop de eventos do gtk<\/pre>\n<p>&nbsp;<\/p>\n<h3>S\u00e3o poucas novidades aqui, antes de tudo criamos uma imagem e um r\u00f3tulo para o bot\u00e3o:<\/h3>\n<pre class=\"height-set:true lang:prisma decode:true\">imagem = ig.imagem_estoque ( ig.estoque'save' , 3 ); \/\/imagem save (salvar) do estoque tamanho 3\r\n\r\nrotulo = ig.rotulo \"botao legal\" ; \/\/cria um rotulo para o bot\u00e3o.<\/pre>\n<p>&nbsp;<\/p>\n<h3>Definimos a fonte e a cor do texto do r\u00f3tulo:<\/h3>\n<p>Na fonte temos o primeiro par\u00e2metro o r\u00f3tulo, e segundo uma string descrevendo a fonte. Na string<\/p>\n<p>sempre o nome da fonte primeiro, e no final o n\u00famero, no meio devem ficar os estilos da fonte,<\/p>\n<p>se \u00e9 italico = italic, se \u00e9 negrito = bold.<\/p>\n<p>Quanto a cor do fg (foreground = letra (relevo) ), temos o r\u00f3tulo como primeiro par\u00e2metro,<\/p>\n<p>o estado que pode ser ig.estado_normal (o modo como aparece ao abrir o programa),<\/p>\n<p>e o ig.estado_foco que \u00e9 quando o mouse fica em cima do bot\u00e3o.<\/p>\n<p>As cores s\u00e3o em formado RGB (red, green, blue), isto \u00e9, um n\u00famero de 0 &#8211; 99999999<\/p>\n<p>para o vermelho, outro para o verde e outro para o azul, \u00e9 a combina\u00e7\u00e3o desses tr\u00eas n\u00fameros<\/p>\n<p>que gera a cor. Veja:<\/p>\n<pre class=\"height-set:true lang:prisma decode:true\">ig.componente_modifique_fonte ( rotulo , \"Arial  bold italic 22 \" ); \/\/definindo a fonte do rotulo do botao\r\nig.componente_modifique_fg ( rotulo , ig.estado_normal , 0 , 999999  , 99999 ); \/\/a cor do rotulo estado normal\r\nig.componente_modifique_fg ( rotulo , ig.estado_foco , 0 , 99999999 , 99999999 ); \/\/a cor quando o mouse passar em cima.\r\n<\/pre>\n<h3><\/h3>\n<h3>Criamos uma caixa para p\u00f4r dentro a imagem e o r\u00f3tulo:<\/h3>\n<p>Um detalhe aqui \u00e9 que aprendemos a fazer caixas assim: ig.caixavertical(falso,0), ou ig.caixahorizontal( falso, 0 ),<\/p>\n<p>mas como voc\u00ea pode observar tem uma segunda maneira de fazer, ig.caixa( &#8220;vertical&#8221;\/&#8221;horizontal&#8221; , falso\/verdadeiro, numero );<\/p>\n<pre class=\"height-set:true lang:prisma decode:true\">caixah = ig.caixa (\"horizontal\" , falso , 0 ); \/\/outro modo de criar caixa, neste caso define-se horizontal ou vertical no primeiro par\u00e2metro. os outros dois \u00e9 igual ao j\u00e1 aprendido\r\n\r\n\r\nig.caixa_ad ( caixah , imagem , falso , falso , 3 ); \/\/colocando a imagem na caixa horizontal\r\n\r\nig.caixa_ad ( caixah , rotulo , falso , falso , 3 ) ; \/\/colocando o rotulo na caixa horizontal\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h3>Depois criamos o bot\u00e3o vazio, sem par\u00e2metro algum, pois a l\u00f3gica \u00e9 preench\u00ea-lo<\/h3>\n<h3>com a caixa que j\u00e1 cont\u00e9m a imagem e o r\u00f3tulo, para isso usamos a fun\u00e7\u00e3o ig.ad<\/h3>\n<h3>para adicionar a caixa no bot\u00e3o:<\/h3>\n<pre class=\"height-set:true lang:prisma decode:true\">botao2 = ig.botao( );\r\nig.ad ( botao2 , caixav );<\/pre>\n<p><strong>Fazemos o mesmo com o segundo bot\u00e3o, mas ao inv\u00e9s de criar uma caixa horizontal, utilizamos <\/strong><\/p>\n<p><strong>uma vertical;<\/strong><\/p>\n<h3>Uma novidade aqui \u00e9 a fun\u00e7\u00e3o dialogo_abrir para obter o caminho de um arquivo:<\/h3>\n<p>o primeiro par\u00e2metro \u00e9 o componente pai, neste caso a janela principal, e o segundo \u00e9 o T\u00edtulo<\/p>\n<pre class=\"height-set:true lang:prisma decode:true\">arq = ig.dialogo_abrir ( janela , \"Abrir arquivo\"  );<\/pre>\n<p>O retorno pode ser:\u00a0\u00a0\u00a0<strong> ig.ret_fechar<\/strong> (= <strong>-4<\/strong>)\u00a0 se o usu\u00e1rio fechar o dialogo abrir no x da janelinha<\/p>\n<p><strong>ig.ret_cancelar<\/strong> (= <strong>-6<\/strong>) se o usu\u00e1rio clicar o bot\u00e3o cancelar<\/p>\n<p>ou a string do caminho selecionado caso o usu\u00e1rio d\u00ea duplo clique no arquivo ou o selecione e clique no<\/p>\n<p>bot\u00e3o Abrir.<\/p>\n<p>&nbsp;<\/p>\n<p>Bom, \u00e9 isso a\u00ed pessoal, qualquer d\u00favida postem a pergunta no f\u00f3rum ou aqui mesmo no post, ok.<\/p>\n<p>Lembrando que algumas fun\u00e7\u00f5es n\u00e3o estou explicando mais porque j\u00e1 falei sobre elas anteriormente em<\/p>\n<p>outros exemplos, certo!<\/p>\n<p>Att. Adalberto<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ol\u00e1, este exemplo demonstra como definir a fonte e a cor do rotulo de bot\u00f5es: (Antes de executar algum exemplo sempre d\u00ea uma olhada na p\u00e1gina de downloads Baixa a vers\u00e3o mais atual de Prisma, ok!) segue o c\u00f3digo para estudo: \/\/exemplo de botao com caixa \/\/ a biblioteca ig \u00e9 incrivel porque te d\u00e1&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,5],"tags":[],"class_list":["post-461","post","type-post","status-publish","format-standard","hentry","category-igprisma","category-interface_grafica"],"_links":{"self":[{"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/posts\/461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/types\/post"}],"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=461"}],"version-history":[{"count":2,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/posts\/461\/revisions"}],"predecessor-version":[{"id":2840,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/posts\/461\/revisions\/2840"}],"wp:attachment":[{"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/media?parent=461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/categories?post=461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/tags?post=461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}