O Bloggueiro

Criar uma Barras de Ferramentas [Vala]

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="tr_bq" style="text-align: justify;">
-A barra de ferramentas fornece um conjunto bem organizado de ícones/botões para a execução de vários comandos ou ações. Ao contrário de um menu que também é utilizado para a execução de ações, as barras de ferramentas estão sempre visíveis para o usuário e de fácil acesso.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
As barras de ferramentas podem ser utilizadas quando há várias ações que precisam ser apresentados para o usuário. Em vez de fornecer um botão para cada ação, uma barra de ferramentas pode ser usado em seu lugar.</div>
<div style="text-align: justify;">
<br /></div>
<h4 style="text-align: justify;">
Criar uma barra de ferramentas;</h4>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Salve o seguinte código como <b>app2.vala</b></div>
<blockquote style="text-align: justify;">
using Gtk;<br />
class MainWindow : Window  {<br />
  public static int main (string[] args)<br />
  {<br />
    Gtk.init(ref args);  //Gtk intialization<br />
    var window = new MainWindow (); //Create a window<br />
    window.destroy.connect (Gtk.main_quit); //Quit app after window is closed<br />
    window.show_all (); //Makes all widgets visible<br />
    Gtk.main(); //Start the main loop<br />
    return 0;<br />
  }<br />
  public MainWindow()<br />
  {<br />
    this.title = "Toolbars";<br />
    this.set_default_size (250, 60);<br />
    this.window_position = WindowPosition.CENTER;<br />
    this.destroy.connect(Gtk.main_quit); //Quit app when window is closed<br />
    // vboxMain<br />
    var vboxMain = new Box (Orientation.VERTICAL, 0);<br />
    add (vboxMain);<br />
    // Create Toolbar<br />
    var toolbar = new Gtk.Toolbar ();<br />
    toolbar.toolbar_style = ToolbarStyle.BOTH_HORIZ;<br />
    toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);<br />
    vboxMain.pack_start (toolbar, false, false, 0);<br />
    // Create Toolbar buttons<br />
    var btnAdd = new Gtk.ToolButton.from_stock (Gtk.Stock.ADD);<br />
    btnAdd.is_important = true;<br />
    toolbar.add (btnAdd);<br />
    var btnRemove = new Gtk.ToolButton.from_stock (Gtk.Stock.REMOVE);<br />
    toolbar.add (btnRemove);<br />
    var btnClear = new Gtk.ToolButton.from_stock (Gtk.Stock.CLEAR);<br />
    toolbar.add (btnClear);<br />
    // Create a treeview showing a list of Items<br />
    var treeview = new TreeView();<br />
    treeview.insert_column_with_attributes (-1, "Item", new CellRendererText(), "text", 0);<br />
    // Add the treeview to a scrollable window<br />
    var scrolledwin = new ScrolledWindow(treeview.get_hadjustment (), treeview.get_vadjustment ());<br />
    scrolledwin.set_shadow_type (ShadowType.ETCHED_IN);<br />
    scrolledwin.add (treeview);<br />
    scrolledwin.set_size_request (-1, 150);<br />
    vboxMain.pack_start (scrolledwin, true, true, 0);<br />
  }<br />
}</blockquote>
<div style="text-align: justify;">
 Vamos <b>compilá-lo</b> com o seguinte comando:</div>
<blockquote class="tr_bq" style="text-align: justify;">
valac --pkg gtk+-3.0 app2.vala -o app2</blockquote>
<div style="text-align: justify;">
 Agora para o executar vamos abrir um Terminal no lucal onde temos o Ficheiro <b>app2.vala</b> e executa-lo com o seguinte comando;</div>
<blockquote class="tr_bq" style="text-align: justify;">
./app2</blockquote>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdI-b9A9jwTZCAzBNrAR6jU5mvCDwp59XaiYqZ-NrPRe_qKUUFUKbaQ-6zO2bbteG_nH854sqbMzCPXeFcb9Vo0Q1wYptIakhhRakMHZ0IG9FOAGKxIASTJ4oYWX_QVltxAyqpgTDmy3E_/s1600/Captura+de+ecr%C3%A3+-+07-06-2014+-+01:31:19.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdI-b9A9jwTZCAzBNrAR6jU5mvCDwp59XaiYqZ-NrPRe_qKUUFUKbaQ-6zO2bbteG_nH854sqbMzCPXeFcb9Vo0Q1wYptIakhhRakMHZ0IG9FOAGKxIASTJ4oYWX_QVltxAyqpgTDmy3E_/s1600/Captura+de+ecr%C3%A3+-+07-06-2014+-+01:31:19.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Vamos agora adicionar um botão acrescentando o seguinte código;</div>
<blockquote class="tr_bq" style="clear: both; text-align: justify;">
var btnAdd = new Gtk.ToolButton.from_stock (Gtk.Stock.ADD);<br />
btnAdd.is_important = true;<br />
toolbar.add (btnAdd);</blockquote>
<div style="text-align: justify;">
Criamos o botão da barra de ferramentas usando o construtor <b>ToolButton.from_stock ()</b>. Esse construtor cria um botão com um <b>ícone padrão</b> e <b>texto padrão</b>. O ícone é definido a partir do tema de ícones do sistema e que o texto é definido com base no idioma do sistema. O ícone e o texto também podem ser configurados manualmente. </div>
<div style="text-align: justify;">
<br /></div>
<h4 style="text-align: justify;">
Vamos definir o estilo;</h4>
<blockquote class="tr_bq" style="text-align: justify;">
toolbar.toolbar_style = ToolbarStyle.BOTH_HORIZ;</blockquote>
<div style="text-align: justify;">
</div>
<ul>
<li><b>ToolbarStyle.ICONS</b> - Somente os ícones são exibidos.</li>
<li><b>ToolbarStyle.TEXT</b> - Somente os rótulos são exibidos.</li>
<li><b>ToolbarStyle.BOTH</b> - Rótulo será exibido verticalmente abaixo do ícone para todos os botões da barra de ferramentas.</li>
<li><b>ToolbarStyle.BOTH_HORIZ</b> (<i>Recomendado</i>) - Rótulo será exibido horizontalmente para a direita do ícone. Etiqueta é exibida somente se a propriedade "<b>is_important</b>" é verdadeiro para o <b>ToolButton</b>. Esta propriedade tem de ser ajustada manualmente para os botões que devem mostrar o rótulo.</li>
</ul>
<br />
<h4 style="text-align: justify;">
Vamos agora especificar os botões importantes;</h4>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Defina o <b>is_important</b> propriedade para <b>TRUE</b> para todos os botões da barra de ferramentas que são importantes. <b>Labels</b> será exibido para esses itens quando o estilo da barra de ferramentas é <b>BOTH_HORIZ</b>.</div>
<div style="text-align: justify;">
<br /></div>
<h4 style="text-align: justify;">
Agora definimos o fundo;</h4>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>GTK3</b> tem uma opção para especificar se uma barra de ferramentas em particular é a barra de ferramentas principal numa janela. A barra de ferramentas principal será <b>highlighed</b> com um agradável efeito de fundo, se o tema <b>GTK</b> suportar o estilo.</div>
<blockquote class="tr_bq" style="text-align: justify;">
toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);</blockquote>
<div style="text-align: justify;">
Por favor, note que todos os temas <b>GTK3</b> não suportam esta propriedade.</div>
<div style="text-align: justify;">
<br /></div>
<h4 style="text-align: justify;">
Colocar botões à direita;</h4>
<div style="text-align: justify;">
Adicionar um separador e definir o empate e expandir as propriedades como mostrado abaixo. Todos os itens adicionados após o separador serão colocados no lado direito da barra de ferramentas.<br />
<blockquote class="tr_bq" style="text-align: left;">
var separator = new Gtk.SeparatorToolItem();<br />separator.set_draw (false);<br />separator.set_expand (true);<br />toolbar.add (separator);</blockquote>
<br />
<blockquote class="tr_bq" style="text-align: left;">
var btnSettings = new Gtk.ToolButton.from_stock<br />(Gtk.Stock.PREFERENCES);<br />toolbar.add (btnSettings);</blockquote>
 A imagem que se segue, mostra este ultimo <b>botão</b> adicionado a <b>Barra de Ferramentas</b>;<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirxSGqhjaeDjJ4_2U94l_YoLTxd-Vonf2OE5fQy9rQuSbEPBmC1T9vt9A0WSdoDkBxzWw7ZBA75PNMr1z4OyYLHMgNYX4y3Q0jRPaIrkC0xJ-aVXRd08pSE6p8hb6Yytf2BUh5Hnp1oX_E/s1600/Captura+de+ecr%C3%A3+-+07-06-2014+-+02:32:14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirxSGqhjaeDjJ4_2U94l_YoLTxd-Vonf2OE5fQy9rQuSbEPBmC1T9vt9A0WSdoDkBxzWw7ZBA75PNMr1z4OyYLHMgNYX4y3Q0jRPaIrkC0xJ-aVXRd08pSE6p8hb6Yytf2BUh5Hnp1oX_E/s1600/Captura+de+ecr%C3%A3+-+07-06-2014+-+02:32:14.png" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: right;">
<span style="font-size: x-small;">Fonte; <b><a href="http://www.teejeetech.in/" target="_blank"><span style="color: red;">TeeJee Tech</span></a></b></span></div>
<div style="text-align: right;">
<span style="font-size: x-small;"><b><br /></b></span></div>
<div style="text-align: justify;">
Deixem os vossos comentários a respeito deste artigo.</div>
</div>
<div style="text-align: justify;">
</div>
</div>

Criar uma Barras de Ferramentas [Vala]

-A barra de ferramentas fornece um conjunto bem organizado de ícones/botões para a execução de vários comandos ou ações. Ao contrário de u...

Ler mais »

10:00:00 a.m.

O preço da Arrogância!!!

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Um usuário do Facebook partilhou no seu mural um video onde podemos ouvir uma transmissão de rádio entre um <b>Navio da Marinha Americana</b> e o <b>Noroeste de Espanha</b>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
Por esta eles não esperavam!!!</div>
<div style="text-align: center;">
E depois só dizem "<b>OK, recebido. Desligo.</b>"</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<div id="fb-root">
</div>
<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

<br />
<div class="fb-post" data-href="https://www.facebook.com/photo.php?v=10152863201664838" data-width="466">
<div class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/photo.php?v=10152863201664838">Publicação</a> de <a href="https://www.facebook.com/celsoamaral">Celso Carvalho Do Amaral</a>.</div>
</div>
</div>
<br />
<br />
<div style="text-align: center;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU6tX9eZvktIzoN6x861VUu3FU2irMre83A7lwvSKqC7rEjDi4m1NVLV_vrfJOvuxR0T5PIH8HPjii4n-nwcCTWE5792CbAck8Oj3KRAu-ZtxKjvYqo6Z0JSdtAahyEavyDJmzyFjqcnBs/s1600/Captura+de+ecr%C3%A3+-+03-06-2014+-+21:53:48.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU6tX9eZvktIzoN6x861VUu3FU2irMre83A7lwvSKqC7rEjDi4m1NVLV_vrfJOvuxR0T5PIH8HPjii4n-nwcCTWE5792CbAck8Oj3KRAu-ZtxKjvYqo6Z0JSdtAahyEavyDJmzyFjqcnBs/s1600/Captura+de+ecr%C3%A3+-+03-06-2014+-+21:53:48.png" width="320" /></a></div>
<br />
<br />
Deixem os vossos comentários coma vossa opinião.
</div>
</div>

O preço da Arrogância!!!

Um usuário do Facebook partilhou no seu mural um video onde podemos ouvir uma transmissão de rádio entre um Navio da Marinha Americana e ...

Ler mais »

9:49:00 p.m.

[Vala] Usando makefiles com Geany

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator tr_bq" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbV7tck91N0w43EVtW9GwaG2J-RVQUO9D3ERpEri-0oqzWNgD4OK3M434H9qOECMfy6zZAexpZ7vg_BTXbweSZkEqEX0q4RFeYPG6RklOBUQXMg6VqcD035wyoQ3DGEtPDjdFC6I6Fr6vD/s1600/Imagem+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="253" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbV7tck91N0w43EVtW9GwaG2J-RVQUO9D3ERpEri-0oqzWNgD4OK3M434H9qOECMfy6zZAexpZ7vg_BTXbweSZkEqEX0q4RFeYPG6RklOBUQXMg6VqcD035wyoQ3DGEtPDjdFC6I6Fr6vD/s1600/Imagem+1.png" width="320" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
No último artigo aprendemos como <b>configurar Geany para compilar as nossas aplicações Vala</b>. Agora vamos ver como podemos <b>criar um makefile para a construção de todo o projeto</b>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O comando [<b>Valac "% f"</b>] que nós atribuímos ao botão "<b>Gerar</b>" no artigo anterior só funciona no arquivo atual que está aberto no editor. Isso é suficiente se o projeto tiver um único arquivo fonte "<b>.vala</b>". No entanto, a maioria dos projetos geralmente consistem de vários arquivos de origem e precisamos de uma forma de compilar e vincular todos os arquivos para gerar o executável final.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Este é o lugar onde o "<b>makefiles</b>" entra em cena. "<b>Make</b>" é um utilitário Unix clássico que é usado para a construção de arquivos executáveis a partir do código fonte. Ele lê instruções de um makefile que contém comandos para a construção e instalação do projeto.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
A execução do comando "<b>make</b>" do diretório do projeto irá construir o projeto usando os comandos no "<b>makefile</b>". Ele também pode ser usado para instalar e desinstalar o arquivo executável (<i>e arquivos relacionados</i>).</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<b>Criando um makefile;</b></h3>
<div style="text-align: justify;">
Vamos criar um makefile para o nosso projeto. Vamos usar o mesmo exemplo que usamos no artigo anterior.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Adicione um novo arquivo de texto para o projeto e cole o seguinte texto:</div>
<blockquote style="text-align: justify;">
all:<br />    valac --pkg gtk+-3.0 *.vala -o app1<br />clean:<br />    rm -rf *.o app1<br />install:<br />    cp -f app1 /usr/bin<br />uninstall:<br />    rm -f /usr/bin/app1</blockquote>
<div style="text-align: justify;">
Guarde-o com o nome do arquivo "<b>makefile</b>" na pasta do projeto.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
A seção "<b>all</b>" contém os comandos para a construção do projeto. Nós simplesmente vamos executar o compilador <b>Valac</b> para elaboração do arquivo <b>.vala</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
A seção "<b>install</b>" contém comandos para instalar o aplicativo. Vamos usar o comando "<b>cp</b>" para instalar o arquivo executável para o sistema pasta "<b>/usr/bin</b>". Arquivos colocados nessa pasta estão disponíveis para todos os usuários e podem ser executados a partir de qualquer diretório, digitando o nome do executável em uma janela de terminal.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
A seção "<b>uninstall</b>" contém comandos para desinstalar o aplicativo. Vamos usar o comando "<b>rm</b>" para remover o arquivo executável no diretório "<b>/usr/bin</b>".</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
<b>Teste o makefile no Terminal;</b></h3>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Abra uma janela de terminal (<b>CTRL + ALT + T</b>) e "<b>cd</b>" para a pasta do projeto.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Execute "<b>makefile</b>" do diretório do projeto para a construção do projeto.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Isto irá compilar os arquivos de "<b>.Vala</b>" Para criar o arquivo executável "<b>app1</b>" no diretório do projeto.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Execute o comando "<b>sudo make install</b>" para instalar o aplicativo</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Isto irá instalar o "<b>app1</b>" executável em seu sistema. Qualquer usuário em seu sistema pode agora executar o "<b>app1</b>" aplicativo digitando "<b>app1</b>" em uma janela de terminal.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Execute o comando "<b>sudo make uninstall</b>" para desinstalar o aplicativo</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Isto irá remover o "<b>app1</b>" executável do seu sistema.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Nota:</b> Para a instalação e desinstalação, copiar ou remover arquivos do sistema de diretório "<b>/usr/bin</b>", precisamos executar "<b>make install</b>" e "<b>make uninstall</b>" usando "<b>sudo</b>"</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Usando makefile com Geany;</h3>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Altere o comando de compilação:</div>
<blockquote class="tr_bq" style="text-align: justify;">
valac --pkg gtk+-3.0 "%f"</blockquote>
Para;<br />
<blockquote class="tr_bq">
 make all</blockquote>
<div style="text-align: justify;">
Clique no botão "<b>Gerar</b>" na barra de ferramentas do "<b>IDE</b>" agora vai construir todo o seu projeto.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: right;">
<span style="font-size: x-small;">Fonte; <a href="http://www.teejeetech.in/" target="_blank"><b><span style="color: red;">TeeJee Tech</span></b></a></span></div>
</div>