{"id":2778,"date":"2017-02-24T15:22:36","date_gmt":"2017-02-24T19:22:36","guid":{"rendered":"http:\/\/linguagemprisma.br4.biz\/blog\/?p=2778"},"modified":"2017-02-24T15:30:11","modified_gmt":"2017-02-24T19:30:11","slug":"painel-duplo","status":"publish","type":"post","link":"https:\/\/linguagemprisma.br4.biz\/blog\/igprisma\/painel-duplo\/","title":{"rendered":"Painel Duplo"},"content":{"rendered":"<p>Esse cont\u00eainer \u00e9 muito \u00fatil quando voc\u00ea quer dividir uma janela em duas partes separadas por uma barra m\u00f3vel. Ent\u00e3o \u00e9 poss\u00edvel colocar componentes na parte 1 e na parte 2.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-2779\" src=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/02\/painel-duplo-300x244.png\" alt=\"painel-duplo\" width=\"300\" height=\"244\" srcset=\"https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/02\/painel-duplo-300x244.png 300w, https:\/\/linguagemprisma.br4.biz\/blog\/wp-content\/uploads\/2017\/02\/painel-duplo.png 323w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Como pode-se perceber na imagem, podemos criar pain\u00e9is na horizontal e na vertical, inclusive colocar um painel dentro do outro.<\/p>\n<p>Salve como painel_duplo.prisma<\/p>\n<pre class=\"lang:prisma decode:true\">local ig = inclua'igbr'\r\n\r\nfuncao principal()\r\n local jan = ig.janela();\r\n ig.conecte_permutado( jan, ig.destruido, sis.saia , 0 );\r\n local painelv = ig.painelv();\r\n local entra_texto=ig.texto('isto \u00e9 um entra texto');\r\n ig.texto_selecione(entra_texto,3,8);\r\n ig.painel_ad1( painelv,entra_texto);\r\n local txt = ig.texto_area()\r\n ig.painel_ad2( painelv, txt );\r\n ig.texto_area_def_texto( txt , [[Este \u00e9 um \r\ncomponente \u00e1rea de texto multilinha\r\ncom ele podemos criar editores igual ao \r\nbloco de notas\r\n]]\r\n ) \r\n local painelh = ig.painelh();\r\n ig.painel_ad2(painelh, painelv);\r\n local bt = ig.botao('Bot\u00e3o no painel h1');\r\n ig.painel_ad1(painelh, bt);\r\n ig.ad(jan,painelh);\r\n ig.componente_mostre_todos(jan)\r\n ig.loop();\/\/ou ig.fimprograma(); \/\/use qual preferir.\r\nfim \/\/fim principal();\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Detalhes:<\/p>\n<pre class=\"lang:prisma decode:true\">local jan = ig.janela();\r\nig.conecte_permutado( jan, ig.destruido, sis.saia , 0 );<\/pre>\n<p>J\u00e1 dentro da fun\u00e7\u00e3o principal() criamos a janela e conectamos a fun\u00e7\u00e3o sis.saia()\u00a0 ao evento destru\u00eddo da janela. (Nunca se esque\u00e7a desse comando, ou seu programa ficar\u00e1 rodando em background ap\u00f3s fechar a janela)<\/p>\n<pre class=\"lang:prisma decode:true\">local painelv = ig.painelv();<\/pre>\n<p>Criamos o painel vertical<\/p>\n<pre class=\"lang:prisma decode:true\"> local entra_texto=ig.texto('isto \u00e9 um entra texto');\r\n ig.texto_selecione(entra_texto,3,8);\r\n ig.painel_ad1( painelv,entra_texto);<\/pre>\n<p>Criamos um entra texto com texto padr\u00e3o, definimos a sele\u00e7\u00e3o do 3\u00ba ao 8\u00ba caractere. E colocamos na parte 1 do painel usando a fun\u00e7\u00e3o painel_ad1(painel, componente);<\/p>\n<p>Obs. ad1 significa <strong>ad<\/strong>icione na parte<strong> 1<\/strong><\/p>\n<pre class=\"lang:prisma decode:true\"> local txt = ig.texto_area()\r\n ig.painel_ad2( painelv, txt );\r\n ig.texto_area_def_texto( txt , [[Este \u00e9 um \r\ncomponente \u00e1rea de texto multilinha\r\ncom ele podemos criar editores igual ao \r\nbloco de notas\r\n]]\r\n )<\/pre>\n<p>No trecho acima, criamos uma \u00e1rea de texto, colocamos na parte 2 do painel usando a fun\u00e7\u00e3o ig.painel_ad2(painel,componente). E definimos o texto padr\u00e3o que aparece na \u00e1rea de texto.<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<pre class=\"lang:prisma decode:true\">local painelh = ig.painelh();\r\nig.painel_ad2(painelh, painelv);<\/pre>\n<p>Aqui, criamos um segundo painel duplo, mas desta vez horizontal, e colocamos na sua parte 2 o painel duplo vertical criado anteriormente.<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<pre class=\"lang:prisma decode:true\"> local bt = ig.botao('Bot\u00e3o no painel h1');\r\n ig.painel_ad1(painelh, bt);<\/pre>\n<p>Criamos um bot\u00e3o e colocamos na parte 1 do painel horizontal.<\/p>\n<hr \/>\n<pre class=\"lang:prisma decode:true\">ig.ad(jan,painelh);\r\nig.componente_mostre_todos(jan)\r\nig.loop();\/\/ou ig.fimprograma();<\/pre>\n<p>Enfim, colocamos o painel horizontal dentro da janela e mostramos a janela com todos os seus componentes filhos. Ap\u00f3s isso iniciamos o la\u00e7o de eventos do igbr.<\/p>\n<p>Note que desta vez usei ig.loop() para o la\u00e7o ao inv\u00e9s de ig.fimprograma(); tanto faz use o que preferir.<\/p>\n<p>N\u00e3o esque\u00e7a de fechar a fun\u00e7\u00e3o principal com o seu respectivo &#8216;fim&#8217;.<\/p>\n<p><strong>Dicas:<\/strong><\/p>\n<p>1 &#8211; Note que s\u00f3 colocamos um componente por vez dentro de cada parte dos pain\u00e9is duplos. N\u00e3o \u00e9 poss\u00edvel colocar mais de um. Da\u00ed voc\u00ea pode dizer: ent\u00e3o \u00e9 in\u00fatil, pois como vou colocar bot\u00f5es, textos e imagens no mesmo lado do painel?<\/p>\n<p>Calma a\u00ed que explico:<\/p>\n<p>N\u00e3o \u00e9 poss\u00edvel colocar mais de um componente diretamente, mas lembre-se existem as caixas (caixavertical(), caxahorizontal(), fixo(), tabela() ). Basta voc\u00ea colocar um outro cont\u00eainer caixa e por os componentes dentro dele.<\/p>\n<p>Ent\u00e3o fica assim:<\/p>\n<ol>\n<li>Crie componentes,<\/li>\n<li>Coloque-os dentro de caixas que aceitam mais de um.<\/li>\n<li>Crie painel duplo.<\/li>\n<li>Coloque a caixa com seus v\u00e1rios componentes dentro do painel.<\/li>\n<li>Coloque o painel dentro da janela e pronto!<\/li>\n<\/ol>\n<p>2 -Para controlar o tamanho das partes do painel duplo basta voc\u00ea definir o tamanho do componente que est\u00e1 dentro dele.<\/p>\n<p>Bem, por hoje \u00e9 isso, at\u00e9 mais.<\/p>\n<p>Att. Adalberto<\/p>\n<p><a href=\"http:\/\/linguagemprisma.br4.biz\/prisma_forum\/\" target=\"_blank\">F\u00f3rum<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Esse cont\u00eainer \u00e9 muito \u00fatil quando voc\u00ea quer dividir uma janela em duas partes separadas por uma barra m\u00f3vel. Ent\u00e3o \u00e9 poss\u00edvel colocar componentes na parte 1 e na parte 2. Como pode-se perceber na imagem, podemos criar pain\u00e9is na horizontal e na vertical, inclusive colocar um painel dentro do outro. Salve como painel_duplo.prisma local&#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-2778","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\/2778","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=2778"}],"version-history":[{"count":5,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/posts\/2778\/revisions"}],"predecessor-version":[{"id":2784,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/posts\/2778\/revisions\/2784"}],"wp:attachment":[{"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/media?parent=2778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/categories?post=2778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linguagemprisma.br4.biz\/blog\/wp-json\/wp\/v2\/tags?post=2778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}