{"id":2751,"date":"2017-02-24T13:36:29","date_gmt":"2017-02-24T17:36:29","guid":{"rendered":"http:\/\/linguagemprisma.br4.biz\/blog\/?p=2751"},"modified":"2017-02-24T14:38:25","modified_gmt":"2017-02-24T18:38:25","slug":"construtor-de-interface-grafica","status":"publish","type":"post","link":"https:\/\/linguagemprisma.br4.biz\/blog\/igprisma\/construtor-de-interface-grafica\/","title":{"rendered":"Construtor de interface gr\u00e1fica"},"content":{"rendered":"

Voc\u00ea j\u00e1 viu ou ouviu falar sobre programas que desenham a interface gr\u00e1fica? S\u00e3o programas que tem a mesma caracter\u00edstica do clique e solte do Basic.<\/p>\n

(Antes de continuar baixe a vers\u00e3o mais atual Prisma – 1.0.99 ou superior – testado em Windows7, Mint17 e Mint18)<\/p>\n

Para o Gtk+ temos o Glade:<\/strong><\/h1>\n

https:\/\/glade.gnome.org\/<\/a><\/p>\n

http:\/\/ftp.gnome.org\/pub\/GNOME\/binaries\/win32\/glade\/3.8\/glade-3-8-5-installer.exe<\/a><\/p>\n

No link acima voc\u00ea pode fazer o download para Windows (vers\u00e3o 3.8.5 para gtk2). J\u00e1 no Linux, use a central de programas de sua distro para instalar.<\/p>\n

Obs. Mesmo que haja ferramentas como essa, \u00e9 sempre bom voc\u00ea aprender a fazer a interface gr\u00e1fica em puro c\u00f3digo para entender o funcionamento da mesma e ser um programador<\/em> melhor<\/em>.<\/em><\/p>\n

Obs. Usando a interface gr\u00e1fica igbr em Prisma voc\u00ea ficar\u00e1 familiarizado com o mecanismo do Gtk (mesmo que ele seja em ingl\u00eas) e com o modo de funcionamento de tantos outros toolkits gr\u00e1ficos.<\/em><\/p>\n

\"glade_ex\"<\/p>\n

Com esse programa, Glade, voc\u00ea cria a interface gr\u00e1fica rapidamente, salva em um arquivo do tipo xml que pode ser lido posteriormente por um programa que usa o Gtk.<\/p>\n

Para nossa sorte, o igbr que \u00e9 a biblioteca padr\u00e3o de interface gr\u00e1fica em Prisma \u00e9 feito em Gtk, logo voc\u00ea pode usar esse recurso em Prisma: o gtk_builder() traduzido como ig.construtor() em igbr.<\/p>\n

Obs. Infelizmente tenho que dizer que nem todos os componentes dispon\u00edveis no Glade est\u00e3o implementados em Igbr. Podem at\u00e9 aparecer na janela certos componentes mas voc\u00ea n\u00e3o conseguir\u00e1 modific\u00e1-los via Prisma. Isso por enquanto, pois minha inten\u00e7\u00e3o \u00e9 de, ainda esse m\u00eas, colocar o maior n\u00famero de componentes e fun\u00e7\u00f5es no igbr, tais como: \u00e1rea de \u00edcones, seletores de arquivo, pasta, cor, etc. Dialogo de impress\u00e3o e outros!<\/em><\/p>\n

Por enquanto eu quis mostrar esse recurso para voc\u00ea, que j\u00e1 \u00e9 ou quer ser um user Prisma, ir se habituando enquanto n\u00e3o desenvolvo um construtor pr\u00f3prio na pr\u00f3pria linguagem como o Gambas.<\/a><\/p>\n

Veja o resultado da imagem acima em xml, salve como teste.glade<\/strong><\/p>\n

<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<interface>\r\n  <requires lib=\"gtk+\" version=\"2.24\"\/>\r\n  <!-- interface-naming-policy project-wide -->\r\n  <object class=\"GtkWindow\" id=\"janela\">\r\n    <property name=\"can_focus\">False<\/property>\r\n    <child>\r\n      <object class=\"GtkFixed\" id=\"caixafixa1\">\r\n        <property name=\"visible\">True<\/property>\r\n        <property name=\"can_focus\">False<\/property>\r\n        <child>\r\n          <object class=\"GtkEntry\" id=\"texto1\">\r\n            <property name=\"width_request\">378<\/property>\r\n            <property name=\"height_request\">41<\/property>\r\n            <property name=\"visible\">True<\/property>\r\n            <property name=\"can_focus\">True<\/property>\r\n            <property name=\"invisible_char\">\u25cf<\/property>\r\n            <property name=\"primary_icon_activatable\">False<\/property>\r\n            <property name=\"secondary_icon_activatable\">False<\/property>\r\n            <property name=\"primary_icon_sensitive\">True<\/property>\r\n            <property name=\"secondary_icon_sensitive\">True<\/property>\r\n          <\/object>\r\n          <packing>\r\n            <property name=\"x\">23<\/property>\r\n            <property name=\"y\">82<\/property>\r\n          <\/packing>\r\n        <\/child>\r\n        <child>\r\n          <object class=\"GtkButton\" id=\"botao1\">\r\n            <property name=\"label\" translatable=\"yes\">Clique-me<\/property>\r\n            <property name=\"width_request\">100<\/property>\r\n            <property name=\"height_request\">80<\/property>\r\n            <property name=\"visible\">True<\/property>\r\n            <property name=\"can_focus\">True<\/property>\r\n            <property name=\"receives_default\">True<\/property>\r\n            <property name=\"use_action_appearance\">False<\/property>\r\n          <\/object>\r\n          <packing>\r\n            <property name=\"x\">177<\/property>\r\n            <property name=\"y\">172<\/property>\r\n          <\/packing>\r\n        <\/child>\r\n        <child>\r\n          <object class=\"GtkLabel\" id=\"rotulo1\">\r\n            <property name=\"width_request\">362<\/property>\r\n            <property name=\"height_request\">34<\/property>\r\n            <property name=\"visible\">True<\/property>\r\n            <property name=\"can_focus\">False<\/property>\r\n            <property name=\"label\" translatable=\"yes\">Digite algo na caixa de texto abaixo e pressione o bot\u00e3o!<\/property>\r\n          <\/object>\r\n          <packing>\r\n            <property name=\"x\">26<\/property>\r\n            <property name=\"y\">9<\/property>\r\n          <\/packing>\r\n        <\/child>\r\n      <\/object>\r\n    <\/child>\r\n  <\/object>\r\n<\/interface><\/pre>\n
Precisaremos de basicamente tr\u00eas fun\u00e7\u00f5es:<\/p>\n
1 – Para criar o objeto construtor:<\/p>\n
local const =ig.construtor();<\/pre>\n
2 – Para carregar o arquivo do glade:<\/p>\n
ret = ig.construtor_leia_arquivo(const,\"teste.glade\");<\/pre>\n
O retorno \u00e9 verdadeiro em caso de sucesso ou falso em erro.<\/p>\n
3 – E, por fim, uma fun\u00e7\u00e3o que obt\u00e9m o componente do arquivo glade:<\/p>\n
 local jan=ig.construtor_obt_objeto(const,'janela');<\/pre>\n
Depois que voc\u00ea ‘pegou’ o componente em uma vari\u00e1vel como na fun\u00e7\u00e3o acima, basta us\u00e1-lo normalmente com as fun\u00e7\u00f5es igbr.<\/p>\n
Obs.: a fun\u00e7\u00e3o para obter o componente serve para qualquer componente: bot\u00f5es, janelas, caixa, mensagem, menu, combos etc.<\/p>\n
Veja o exemplo completo abaixo:<\/p>\n
Salve como contrutor.prisma na mesma pasta do teste.glade<\/p>\n
local ig=inclua'igbr'\r\nfuncao principal()\r\n local const =ig.construtor(); \r\n local ret = ig.construtor_leia_arquivo(const,'teste.glade');\r\n se nao ret entao erro'Erro ao ler arquivo teste.glade' fim;\r\n local jan=ig.construtor_obt_objeto(const,'janela');\r\n ig.conecte_funcao(jan,ig.destruido,ig.fimjanela);\r\n local texto1 = ig.construtor_obt_objeto(const,'texto1');\r\n local botao1 = ig.construtor_obt_objeto(const, 'botao1');\r\n ig.conecte_funcao(botao1,ig.clique, bt_func, texto1);\r\n \r\n ig.componente_mostre_todos(jan);\r\n ig.fimprograma();\r\n retorne 0;\r\nfim \/\/fim principal();\r\n\r\n\r\nfuncao bt_func(comp,dado)\r\n  local txt = ig.texto_obt_texto(dado);\r\n  ig.msg(nulo,'',txt);\r\nfim\r\n\r\n<\/pre>\n
Detalhes:<\/p>\n
local ig=inclua'igbr'<\/pre>\n
Essa fun\u00e7\u00e3o acima inclui a biblioteca gr\u00e1fica Igbr em Prisma.<\/p>\n
local const =ig.construtor(); \r\n local ret = ig.construtor_leia_arquivo(const,'teste.glade');\r\n se nao ret entao erro'Erro ao ler arquivo teste.ui' fim;<\/pre>\n
Logo acima, criamos um construtor ‘const’, lemos o arquivo ‘teste.glade’; e fazemos o tratamento de erro com o retorno ret.<\/p>\n
fun\u00e7\u00e3o: ret = ig.construtor_leia_arquivo(const, arq);<\/strong><\/p>\n
Par\u00e2metros:<\/strong><\/p>\n
1 – const : construtor criado com a fun\u00e7\u00e3o ig.contrutor();<\/p>\n
2 – arq : arquivo que cont\u00e9m o formato xm .glade. Obs. n\u00e3o precisa do caminho completo se o arquivo estiver na mesma pasta.<\/strong><\/p>\n
Retorno:<\/strong><\/p>\n
1 – ret : verdadeiro em caso de sucesso, ou falso em erro.<\/p>\n
\n
 <\/p>\n
local jan=ig.construtor_obt_objeto(const,'janela');\r\n ig.conecte_funcao(jan,ig.destruido,ig.fimjanela);<\/pre>\n
Neste trecho obtemos o componente ‘janela’ do arquivo glade e gravamos na vari\u00e1vel local ‘jan’. Logo depois, conectamos o evento destruido da janela \u00e0 fun\u00e7\u00e3o ig.fimjanela para que o programa feche corretamente ao clicar no x da janela.<\/p>\n
\n
local texto1 = ig.construtor_obt_objeto(const,'texto1');\r\nlocal botao1 = ig.construtor_obt_objeto(const, 'botao1');\r\n<\/pre>\n
Aqui em cima continuamos a obter os outros componentes: texto1 e botao1.<\/p>\n
 ig.conecte_funcao(botao1,ig.clique, bt_func, texto1);<\/pre>\n
Acima, conectamos uma fun\u00e7\u00e3o bt_func no evento clique do bot\u00e3o e passamos texto1 como dado extra para a callback.<\/p>\n
ig.componente_mostre_todos(jan);\r\nig.fimprograma();<\/pre>\n
Mostramos a janela juntamente com todos componentes filhos e iniciamos o la\u00e7o de eventos do Igbr.<\/p>\n
Veja abaixo a fun\u00e7\u00e3o callback que foi conectada ao bot\u00e3o:<\/p>\n
funcao bt_func(comp,dado)\r\n  local txt = ig.texto_obt_texto(dado);\r\n  ig.msg(nulo,'',txt);\r\nfim<\/pre>\n
Como par\u00e2metros temos:<\/p>\n
1 – comp : o pr\u00f3prio componente conectado (botao) passado automaticamente a cada execu\u00e7\u00e3o da callback.<\/p>\n
2 – dado : \u00e9 o dado extra passado na fun\u00e7\u00e3o conecte_funcao();<\/p>\n
Obs. Uma fun\u00e7\u00e3o callback \u00e9 uma fun\u00e7\u00e3o que \u00e9 executada em resposta a algum evento. Ela \u00e9, automaticamente, chamada a cada ocorr\u00eancia do evento. No caso acima, \u00e9 o clique do bot\u00e3o botao1, isso significa que cada vez que o bot\u00e3o for clicado a fun\u00e7\u00e3o ser\u00e1 executada.<\/p>\n
\n
 <\/p>\n
\u00c9 poss\u00edvel obter a interface diretamente de uma string tamb\u00e9m!<\/h1>\n
Basta criar uma vari\u00e1vel com todo o conte\u00fado do arquivo teste.glade e us\u00e1-la no programa Prisma com a fun\u00e7\u00e3o:<\/p>\n
ig.construtor_leia_string(cont, str_ui); <\/strong><\/p>\n
Veja o exemplo completo abaixo:<\/p>\n
Salve como str_glade.prisma<\/p>\n
local ig=inclua'igbr'\r\n\r\nfuncao principal()\r\n local const =ig.construtor();\r\n \r\n local ret = ig.construtor_leia_string(const,str_ui);\r\n se nao ret entao erro'Erro ao carregar string glade'; fim\r\n local jan=ig.construtor_obt_objeto(const,'janela');\r\n ig.conecte_funcao(jan,ig.destruido,ig.fimjanela);\r\n local texto1 = ig.construtor_obt_objeto(const,'texto1');\r\n local botao1 = ig.construtor_obt_objeto(const, 'botao1');\r\n ig.conecte_funcao(botao1,ig.clique, bt_func, texto1);\r\n \r\n ig.componente_mostre_todos(jan);\r\n ig.fimprograma();\r\n retorne 0;\r\nfim \/\/fim principal();\r\n\r\n\r\nfuncao bt_func(comp,dado)\r\n  local txt = ig.texto_obt_texto(dado);\r\n  ig.msg(nulo,'',txt);\r\nfim\r\n\r\nstr_ui = [[\r\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<interface>\r\n  <requires lib=\"gtk+\" version=\"2.24\"\/>\r\n  <!-- interface-naming-policy project-wide -->\r\n  <object class=\"GtkWindow\" id=\"janela\">\r\n    <property name=\"can_focus\">False<\/property>\r\n    <child>\r\n      <object class=\"GtkFixed\" id=\"caixafixa1\">\r\n        <property name=\"visible\">True<\/property>\r\n        <property name=\"can_focus\">False<\/property>\r\n        <child>\r\n          <object class=\"GtkEntry\" id=\"texto1\">\r\n            <property name=\"width_request\">378<\/property>\r\n            <property name=\"height_request\">41<\/property>\r\n            <property name=\"visible\">True<\/property>\r\n            <property name=\"can_focus\">True<\/property>\r\n            <property name=\"invisible_char\">\u25cf<\/property>\r\n            <property name=\"primary_icon_activatable\">False<\/property>\r\n            <property name=\"secondary_icon_activatable\">False<\/property>\r\n            <property name=\"primary_icon_sensitive\">True<\/property>\r\n            <property name=\"secondary_icon_sensitive\">True<\/property>\r\n          <\/object>\r\n          <packing>\r\n            <property name=\"x\">23<\/property>\r\n            <property name=\"y\">82<\/property>\r\n          <\/packing>\r\n        <\/child>\r\n        <child>\r\n          <object class=\"GtkButton\" id=\"botao1\">\r\n            <property name=\"label\" translatable=\"yes\">Clique-me<\/property>\r\n            <property name=\"width_request\">100<\/property>\r\n            <property name=\"height_request\">80<\/property>\r\n            <property name=\"visible\">True<\/property>\r\n            <property name=\"can_focus\">True<\/property>\r\n            <property name=\"receives_default\">True<\/property>\r\n            <property name=\"use_action_appearance\">False<\/property>\r\n          <\/object>\r\n          <packing>\r\n            <property name=\"x\">177<\/property>\r\n            <property name=\"y\">172<\/property>\r\n          <\/packing>\r\n        <\/child>\r\n        <child>\r\n          <object class=\"GtkLabel\" id=\"rotulo1\">\r\n            <property name=\"width_request\">362<\/property>\r\n            <property name=\"height_request\">34<\/property>\r\n            <property name=\"visible\">True<\/property>\r\n            <property name=\"can_focus\">False<\/property>\r\n            <property name=\"label\" translatable=\"yes\">Digite algo na caixa de texto abaixo e pressione o bot\u00e3o!<\/property>\r\n          <\/object>\r\n          <packing>\r\n            <property name=\"x\">26<\/property>\r\n            <property name=\"y\">9<\/property>\r\n          <\/packing>\r\n        <\/child>\r\n      <\/object>\r\n    <\/child>\r\n  <\/object>\r\n<\/interface>\r\n]]\r\n\r\n<\/pre>\n
Note que usei duplos colchetes para string multilinha:<\/p>\n
str_ui = [[ … ]]<\/strong><\/p>\n
Dicas:<\/strong><\/p>\n
1 – Se voc\u00ea tem um programa que utiliza muitos di\u00e1logos, janelas, etc. crie no Glade e salve em arquivos separados. Ou em um s\u00f3 arquivo do tipo prisma, com vari\u00e1veis contendo as strings do arquivo glade. Logo, basta usar o comando inclua” ou\u00a0 executearquivo(”) para ler os dados e usar no programa principal.<\/p>\n
2 – Comece a ‘fu\u00e7ar’ no Glade para aprender ou procure tutoriais na rede, mesmo sendo para outra linguagem, o que importa \u00e9 a parte da explica\u00e7\u00e3o do Glade.<\/p>\n
3 – Sugest\u00e3o: http:\/\/www.sourcecode.net.br\/2011\/11\/criando-interfaces-graficas-com-glade-e.html<\/a> \u00e9 para python mas tente assimilar a parte que explica o Glade.<\/p>\n
Qualquer d\u00favida use o coment\u00e1rio ou o F\u00f3rum<\/a><\/p>\n
At\u00e9 mais, att. Adalberto.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Voc\u00ea j\u00e1 viu ou ouviu falar sobre programas que desenham a interface gr\u00e1fica? S\u00e3o programas que tem a mesma caracter\u00edstica do clique e solte do Basic. (Antes de continuar baixe a vers\u00e3o mais atual Prisma – 1.0.99 ou superior – testado em Windows7, Mint17 e Mint18) Para o Gtk+ temos o Glade: https:\/\/glade.gnome.org\/ http:\/\/ftp.gnome.org\/pub\/GNOME\/binaries\/win32\/glade\/3.8\/glade-3-8-5-installer.exe No…<\/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,7],"tags":[],"class_list":["post-2751","post","type-post","status-publish","format-standard","hentry","category-igprisma","category-interface_grafica","category-prisma"],"_links":{"self":[{"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/posts\/2751","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=2751"}],"version-history":[{"count":25,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/posts\/2751\/revisions"}],"predecessor-version":[{"id":2754,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/posts\/2751\/revisions\/2754"}],"wp:attachment":[{"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/media?parent=2751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/categories?post=2751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/tags?post=2751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}