Olá a todos, neste novo exemplo vamos usar uma função que alinha (ajeita) a posição do texto ou imagem dentro do botão. Vamos também ver como conectar uma função ao evento de pressionar e soltar o botão do mouse, de entrar com o cursor dentro de um botão e sair. Veja a imagem: …
Continue readinginterface_grafica
Abas
Abas fazem parte de muitos programas como navegadores, editores. São muito importantes quando se quer mudar a interface sem precisar criar novas janelas, veja: Em igbr não há muito segredo, segue código comentado, simples:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
//abas , chamado de notebooks em gtk, e suas pages //by Adalberto inclua'igbr' janela = ig.janela 'Exemplo de Abas em ig'; ig.conecte( janela , ig [ 'destruido' ] , 'ig.fimjanela ( )' ); //nunca se esqueça desse comando ig.janela_def_tamanho_padrao ( janela , 400 , 200 ); //definindo um tamanho padrao para a janela ig.janela_posicione( janela , 0 , 100 ); //coordenada da janela no monitor //não confunda com a função ig.janela_def_posicao //criando as abas: abas = ig.abas ( ); //definindo a posicao das abas (orelhas) /** os seguintes argumentos são aceitos: ig.pos_superior ; ig.pos_inferior ; ig.pos_esquerda ; ig.pos_direita . // ** ig.abas_def_aba_posicao ( abas , ig.pos_superior ); //colocando as abas na janela ig.ad ( janela , abas ); //criando uma moldura moldura = ig.moldura 'minha moldura na primeira pagina' ; ig.componente_def_tamanho ( moldura , 100 , 75 ); //definindo o tamanho da moldura moldura2 = ig.moldura'segunda moldura na segunda pagina das abas'; ig.componente_def_tamanho( moldura2 , 100 , 75 ); ig.abas_anexe ( abas , moldura , ig.rotulo('Minha primeira Aba') ); //anexando abas rot = ig.rotulo'Minha segunda Aba'; ig.abas_anexe ( abas , moldura2 , rot ); botao = ig.botao'ok' ; ig.componente_def_dica_markup ( botao , '<b>this button</b><i> shows one msg</i>'); ig.conecte ( botao , ig [ 'clique' ] , 'ig.msg(janela , "titulo" , "Esta é uma mensagem" )' ); txt = ig.texto_area ( ); ig.componente_def_dica_texto ( txt , 'Ola, esta é uma área de texto, digite algo nela'); caixav = ig.caixavertical ( falso , 2 ) ; //criando uma caixa vertical; ig.ad ( moldura , caixav ) ; //colocando a caixa vertical na moldura, lembre-se já colocamos a moldura na aba acima ig.caixa_ad ( caixav , botao , falso , falso , 2 ); //colocando o botao na caixa vertical //os parâmetros da função acima já foi explicado anteriormente ig.caixa_ad ( caixav , txt , verdadeiro , verdadeiro , 2 ) ; //colocamos verdadeiro pois queremos que a area de texto ocupe o restante da caixa bt_oculte_aba = ig.botao( 'esconder abas'); ig.componente_def_dica_texto ( bt_oculte_aba , 'este botao oculta ou mostra as abas' ); ig.ad ( moldura2 , bt_oculte_aba ) ; //colocando o botao na moldura 2 que está na segunda pagina das abas funcao mostre_abas ( botao , abas ) aval =falso; bval = falso; se ig.abas_obt_aba_visivel ( abas ) == falso entao aval = verdadeiro fim se ig.abas_obt_borda_visivel ( abas ) == falso entao bval = verdadeiro; fim ig.abas_def_aba_visivel ( abas , aval ); ig.abas_def_borda_visivel ( abas , bval ); fim //fim funcao ig.conecte( bt_oculte_aba , ig ['clique'] , 'mostre_abas ( %s , abas ) ' ); //conectando a funcao ao botao // o %s é o proprio botao conectado sendo passado como argumento. ig.componente_mostre_todos( janela ); ig.fimprograma(); |
veja outras funções úteis para manipular as abas: (Obs. notebook = aba , page = página )…
Continue readingAspecto Moldura
O aspecto moldura é um enfeite para caixas, sendo possível colocar um rótulo na sua borda superior. Lembre-se de ir na página de downloads e verificar pela versão mais recente. veja: segue o código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
//exemplo de aspecto moldura, funciona como um painel para se colocar componentes: inclua'igbr' //incluindo a biblioteca gráfica jan = ig.janela(); //criando uma janela ig.conecte( jan , ig [ 'destruido' ] , 'ig.fimjanela()' ); ig.caixa_def_borda_largura ( jan , 10 ); //definindo a largura da borda da janela em 10 pixels; //criando o aspecto moldura aspecto = ig.aspecto_moldura ( '2x1' , //titulo 0.5 , //centro x 0.5, //centro y 2, //tamanho x e y = 2 falso //será falso, por enquanto não há componentes filhos ); //colocando o aspecto na janela ig.ad ( jan , aspecto ); //criando um componente para por no aspecto desenho = ig.desenho_area ( ); ig.componente_def_tamanho ( desenho , 200 , 200 ); ig.ad ( aspecto , desenho ) ; //colocando o desenho na moldura //só é possível colocar um componente dentro do aspecto //mas basta colocar uma caixa e adicionar outros componentes dentro da caixa... ig.componente_mostre_todos( jan ); //mostrando os componentes e a janela ig.fimprograma(); //inicia o laço de eventos, deve sempre estar no final |
pertinente falar dos parâmetros do aspecto_moldura: o primeiro é o rótulo, o texto que aparece no canto superior do…
Continue readingBox de listagem
Olá a todos, antes de seguir o tutorial deste post, vá até downloads e baixe a versão mais atual de Prisma, foram feitas algumas correções. Enfim, para que serve uma caixa de listagem? Simples, muitas vezes você quer mostrar dados organizados em linhas e colunas, como por exemplo uma agenda em que aparece os…
Continue readingBotões e setas
Aqui vamos ver como usar desenhos de setas do próprio gtk para colocar em botões, o resultado é: Simples, não é? Mas muito útil as vezes, veja o código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
// exemplo setas em botoes inclua 'igbr' //inclui a biblioteca de funcoes graficas //uma funcao para criar os botoes com setas automaticamente funcao criar_botao_seta ( tipo_seta , sombra_tipo ) local botao = ig.botao ( ); //cria um botao vazio, sem rotulo nem imagem local seta = ig.seta ( tipo_seta , sombra_tipo ); //cria uma seta com direçao e estilo sombra //adiciona normalmente a set dentro do bot ig.ad ( botao , seta ); ig.componente_mostre ( botao ); //mostrando o botao ig.componente_mostre ( seta ); //mostrando a seta retorne botao; //retornando o id de cada botao criado nesta funcao fim //fim funcao criar_botao_seta janela = ig.janela( ); ig.conecte( janela , "destroy" , "ig.fimjanela( )" ); //se preferir usar o eventos em ingles //senão, basta usar ig.destruido sem aspas no lugar de "destroy" ig.janela_def_titulo (janela, "Exemplos botoes com setas"); ig.janela_def_posicao ( janela , ig.jan_pos_centro ); ig.caixa_def_borda_largura ( janela , 10 ); //definindo a largura da borda da janela //criando uma caixa para colocar os botoes caixa = ig.caixahorizontal ( falso , 0 ); ig.ad ( janela , caixa ); ig.componente_mostre( caixa ); //desta vez estamos mostrando um componente por vez //ao inves de mostra tudo com a janela ///usando a função acima para criar o botoes e as setas // na verdade nem se nota a diferença do tipo de sombra so a direcao da seta. botao = criar_botao_seta ( ig.seta_cima , ig.sombra_dentro ); ig.caixa_ad ( caixa , botao , falso , falso , 3); botao = criar_botao_seta ( ig.seta_baixo , ig.sombra_fora ); ig.caixa_ad ( caixa , botao , falso , falso , 3); botao = criar_botao_seta ( ig.seta_esquerda , ig.sombra_riscado_dentro ); ig.caixa_ad ( caixa , botao , falso , falso , 3); botao = criar_botao_seta ( ig.seta_direita , ig.sombra_riscado_fora ); ig.caixa_ad ( caixa , botao , falso , falso , 3); ig.componente_mostre ( janela ); ig.fimprograma ( ); |
A novidade aqui é criar a seta: o primeiro parâmetro é o tipo de seta que pode ser: ig.seta_cima, ig.seta_baixo, ig.seta_esquerda e ig.seta_direita;…
Continue readingCalendário e suas funções
Lembre-se sempre verifique e baixe a versão da data mais atual possível, blz. Temos então um conjunto de funções que cria e manipula um calendário, temos os sinais em que podemos conectar nossos métodos e fazer o calendário responder por exemplo ao clicar em uma data ou passar para o próximo mês e ano. Enfim,…
Continue readingGerador Script do Lemos!
Lemos, está aí o seu gerador em Prisma utilizando o módulo gráfico igbr, Não digo que é mais simples ou melhor, mas só para ilustrar, é bom que dá para fazer um teste de performance, coloquei aqui no meu Xp rodando em uma virtual Box 300000 (trezentas mil imagens ) e ele gerou o arquivo…
Continue readingBotão customizado (imagem, cor fonte)
Olá, este exemplo demonstra como definir a fonte e a cor do rotulo de botões: (Antes de executar algum exemplo sempre dê uma olhada na página de downloads Baixa a versão mais atual de Prisma, ok!) segue o código para estudo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
//exemplo de botao com caixa // a biblioteca ig é incrivel porque te dá várias opções para fazer algo, entao voce escolhe qual //é melhor para cada situação: inclua 'igbr'; janela = ig.janela( "Exemplo de botões customizados" , 300 , 200 ); ig.janela_def_posicao( janela , ig.jan_pos_centro ); ig.conecte( janela , ig.destruido , "ig.fimjanela( )" ); //conecta o evento destruir da janela a funcao fechar programa. ig.caixa_def_borda_largura ( janela , 20 ); //definindo a largura da borda da janela imagem = ig.imagem_estoque ( ig.estoque'save' , 3 ); //imagem save (salvar) do estoque tamanho 3 rotulo = ig.rotulo "botao legal" ; //cria um rotulo para o botão. ig.componente_modifique_fonte ( rotulo , "Arial bold italic 22 " ); //definindo a fonte do rotulo do botao ig.componente_modifique_fg ( rotulo , ig.estado_normal , 0 , 999999 , 99999 ); //a cor do rotulo estado normal ig.componente_modifique_fg ( rotulo , ig.estado_foco , 0 , 99999999 , 99999999 ); //a cor quando o mouse passar em cima. caixah = ig.caixa ("horizontal" , falso , 0 ); //outro modo de criar caixa, neste caso define-se horizontal ou vertical no primeiro parâmetro. os outros dois é igual ao já aprendido ig.caixa_ad ( caixah , imagem , falso , falso , 3 ); //colocando a imagem na caixa horizontal ig.caixa_ad ( caixah , rotulo , falso , falso , 3 ) ; //colocando o rotulo na caixa horizontal botao = ig.botao( ); //cria um botao sem parametro algum ig.componente_def_nome ( botao , '<<botao legal>>' ); //define um apelido (nome) para o botao ig.ad ( botao , caixah ); //Por fim coloca a caixa horizontal(que ja contem a imagem e o rotulo) dentro do botao, pois botao é um tipo de caixa muito específico; //vamos criar agora um botao no estilo vertical, imagem em cima e texto embaixo. usaremos a caixa vertical: caixav = ig.caixa( "vertical" , falso , 0 ); //criando uma caixa vertical; //o comando acima é o mesmo que ig.caixavertical ( falso , 0 ); imagem2 = ig.imagem_estoque ( ig.estoque'open' , 3 ); //imagem do estoque tamanho 3 rotulo2 = ig.rotulo 'botao abrir' ; ig.componente_modifique_fonte ( rotulo2 , "Arial bold 35 "); ig.componente_modifique_fg ( rotulo2 , ig.estado_normal , 2222222 , 0 , 0 ); //muda cor da fonte botao em estado normal ig.componente_modifique_fg ( rotulo2 , ig.estado_foco , 0 , 0 , 2222222 );//muda cor da fonte do botao quando o mouse estiver em cima //Lembre-se as cores são trabalhadas em R G B (vermelho, verde e azul ) sao os tres ultimos numeros //tente modificar os numeros para ver o que acontece ig.caixa_ad( caixav , imagem2 , falso , falso , 2 ); //colocando a imagem dentro da caixa vertical ig.caixa_ad( caixav , rotulo2 , falso , falso , 2 ) ; //adicionando o rotulo na caixa vertical botao2 = ig.botao( ); ig.ad ( botao2 , caixav ); //funcao para ser conectada ao botao: funcao botao_responda ( bt , jan ) local rotulo = ig.componente_obt_nome ( bt ); //obtendo a string do nome criado acima //lembre-se que os .. é um operador de unir strings, ok: ig.msg( jan , "Titulo da mensagem" , "O botao " .. rotulo .. " foi clicadon" ); fim //fim da funcao botao_responda //agora vamos conectar a função acima no botao legal, para que ao clicar nele esta funçao seja executada: ig.conecte ( botao , ig.clique , "botao_responda ( %s , janela )" ); //observe que na funcao conecte, o terceiro parametro é a funcao callback, e nela consta dois parametros //o primeiro é o %s que será substituido pelo id do proprio componente conectado, no caso o botao legal //o segundo é a janela, que será usada na mensagem como 'jan' funcao abrir ( bt , janela ) arq = ig.dialogo_abrir ( janela , "Abrir arquivo" ); //observe que ao abrir o dialogo, aparecera uma //mensagem na tela do cmd, é normal, apenas diz que não foi encontrado o tema de icones se arq == ig.ret_cancelar entao arq = "Foi cancelado pelo usuário" senaose arq == ig.ret_fechar entao arq = "Foi fechado pelo usuário" fim //o retorno ok nao tem para ig.dialogo_abrir ja que é o proprio arquivo quando for apertado ok //os retornos sao numeros, ig.ret_cancelar = -6 e ig.ret_fechar = -4, porém a variavel é mais //facil de lembrar do que o proprio numero ig.msg( janela , "Arquivo aberto" , arq ); imprima ( arq ); fim //fim funcao abrir ig.conecte( botao2 , ig.clique , "abrir ( %s , janela )" ); fixo = ig.fixo( ); //criamos uma caixa fixa para receber componentes, lembre-se caixas conseguem conter //mais de um componente ig.ad ( janela , fixo ); //adicionando o fixo na janela, obs. janelas são caixas que so podem conter um componente. ig.fixo_ad ( fixo , botao , 1 , 0 ); //adicionando o botao no fixo, na col 100 e linha 50. ig.fixo_ad ( fixo , botao2, 1 , 50 );//adicionando o botao abrir no fixo; ig.componente_mostre_todos ( janela ); //torna a janela visivel com todos seus componentes adicionados ig.fimprograma ( ) ; //inicia o loop de eventos do gtk |
São poucas novidades aqui, antes de tudo criamos uma imagem e um…
Continue readingTemporizador – botão checagem
Para que serve um temporizador? Bem, imagine que você precise fazer uma função e que ela tenha de ser executada repetidas vezes a cada intervalo de tempo determinado por você, e que o programa principal siga em frente executando as outras funções. O temporizador faz isso por você, executa repetidamente a função desejada. É muito…
Continue readingBarra de Ferramentas em IG (tool bar )
Se não funcionar o exemplo tente baixar a versão mais atual na página de downloads. segue o código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
//exemplo de barra de ferramentas: inclua 'igbr' ; //primeiro coisa é incluir as funções gráficas janela = ig.janela ( ); //criando a janela principal ig.conecte( janela , ig.destruido , 'ig.fimjanela( )' ); ig.janela_def_tamanho_padrao ( janela , 250 , 200 ); //definindo tamanho padrão para a janela ig.janela_def_titulo ( janela , "Barra de Ferramentas"); //definindo o titulo da janela ig.janela_def_posicao ( janela , ig.jan_pos_centro ); //colocando a janela no centro da tela caixav = ig.caixavertical ( falso , 0 ); //criando uma caixa vertical ig.ad ( janela , caixav ); //colocando a caixa na janela, lembre-se que fazemos isso porque // a janela é um componente caixa que aceita apenas um componente, logo colocamos //nela justamente um componente que aceita outros componentes, este é o conceito de //containers: componentes que podem conter outros componentes inclusive outros containers. barra_f = ig.barraferramenta ( ); //criando a barra de ferramentas //definindo o estilo ig.barraferramenta_def_estilo ( barra_f , ig.bf_icones ); //este é o único estilo por enquanto mas deve ser usado para aparecer os icones ig.caixa_def_borda_largura ( barra_f , 2 ); //definimos 2 pixels como borda da caixa, //o mesmo comando serve para janela, visto que também é uma caixa. novo = ig.ferramenta_botao_estoque ( ig.estoque'new' ); //cria um botao de barra de ferramenta //a partir do estoque ig.barraferramenta_ad ( barra_f , novo , -1); //adiciona o novo botao na barra de ferramenta, o -1 significa que é na próxima sequência. abrir = ig.ferramenta_botao_estoque ( ig.estoque'open'); //criando o botão abrir ig.barraferramenta_ad ( barra_f , abrir , -1 ); //adicionando o botao na barra salvar = ig.ferramenta_botao_estoque ( ig.estoque'save'); //criando o botao salvar ig.barraferramenta_ad ( barra_f , salvar , -1 ); //adicionando o botao na barra sep = ig.separador_ferramenta_item(); //criando um separador de item de barra de ferramentas ig.barraferramenta_ad ( barra_f , sep , -1 ); // adicionando o botao na barra sair = ig.ferramenta_botao_estoque ( ig.estoque'quit' ); //criando o botao sair ig.componente_def_dica_texto ( sair , "Fechar o programa"); //definindo o texto dica //que aparece quando o mouse está em cima do componente ig.barraferramenta_ad ( barra_f , sair , -1 ); //adicionando o botao na barra cortar = ig.ferramenta_botao_estoque ( ig.estoque'cut' ); //criando o botao cortar ig.barraferramenta_ad ( barra_f , cortar , -1 ); //adicionando-o na barra colar = ig.ferramenta_botao_estoque ( ig.estoque'paste' ); //criando o botao colar ig.barraferramenta_ad ( barra_f , colar , -1 ); //adicionando o botao na barra ig.caixa_ad ( caixav , barra_f , falso , falso , 5 ); //por fim adicionando a barra na caixa vertical funcao mostre_msg( titulo , texto ) //funcao call back que será conectada no clique dos botoes ig.msg( janela , titulo , texto ); // exibindo uma mensagem fim //fim funcao //o evento a ser conectado é o clique, pois são botões em barra de ferramentas ig.conecte ( novo , ig.clique , [[ mostre_msg ( 'novo' , 'nao implementado ainda' ) ]] ); ig.conecte ( sair , ig.clique , [[ ig.fimjanela( ) ]] ); ig.conecte ( abrir , ig.clique , [[ mostre_msg ( 'abrir' , 'nao implementado ainda' ) ]] ); ig.conecte ( salvar , ig.clique , [[ mostre_msg ( 'salvar' , 'nao implementado ainda' ) ]] ); ig.conecte ( cortar , ig.clique , [[ mostre_msg ( 'cortar' , 'nao implementado ainda' ) ]] ); ig.conecte ( colar , ig.clique , [[ mostre_msg ( 'colar' , 'nao implementado ainda' ) ]] ); ig.componente_mostre_todos ( janela ); //mostrando a janela e todos os componentes ig.fimprograma( ); //inicia o loop de eventos |
Primeiro nós criamos uma barra de ferramentas:
|
1 |
barra_f = ig.barraferramenta ( ); |
Depois definimos o estilo como icone: o primeiro parâmetro é a barra, o segundo é o estilo “ig.bf_icones”
|
1 |
ig.barraferramenta_def_estilo ( barra_f , ig.bf_icones ); |
Temos outra novidade aqui, definir a largura da…
Continue reading