Rubysistsforjapan-badge

O Shoes é um toolkit multi-plataforma para criação de aplicativos gráficos utilizando Ruby. Criada pelo “legendário” _why, Shoes foi projetada para ser fácil e simples, mantendo o poder da linguagem Ruby. Lançada em 2008, recentemente foi disponibilizada a versão 3.0 do toolkit – quem acompanha nosso twitter já sabe disso.

Apesar de já estar ha algum tempo disponível, existem pouquissimos materiais em português sobre Shoes. Por isso, vamos publicar um pequeno tutorial sobre a linguagem em três partes. Na primeira parte, umas dicas básicas; na segunda, uma pequena tela de login, e na terceira, uma aplicação que grava e lê dados num arquivo texto. Prepare-se, pois vamos caminhar com Shoes…

Ingredientes
Para acompanhar este tutorial, você vai precisar ter o Shoes instalado em seu computador. Baixe no site oficial do toolkit, o http://shoes.heroku.com/ e instale o programa. Dica: Deixe um atalho do Shoes com fácil acesso, pois você vai usar bastante. Esse tutorial foi desenvolvido supondo que você usa Windows, mas quem utiliza outras plataformas não vai notar a diferença.

O que vamos fazer?
Nosso objetivo será montar uma telinha simples com alguma formatação, como mostra a figura abaixo.

Conhecendo os… temperos
Vamos começar a por a mão na massa, ou melhor, no código. Abra um editor de textos ou seu editor Ruby preferido e digite o primeiro comando da nossa janela em
Shoes:

1
2
Shoes.app do
end

Essa é a estrutura do nosso programa; dentro dele vão ficar os elementos que compõem a janela.

1
2
3
Shoes.app do
    para "Oi Mundo!"
end

Isso já mostra um pouco mais. O “para” ali na segunda linha é uma abreviação de “PARAgrafo” (funciona mais ou menos como um print) e mostra na janela o texto que foi definido entre aspas.

Vamos rodar esse teste? Então salve esse pequeno código num arquivo, com o nome de “tutorial.rb“. Clique no icone do Shoes, e na janelinha que abre, escolha a opção “Open an app“. Na caixa que se abre, navegue até localizar seu arquivo, selecione-o e clique em abrir. Sua aplicação deverá aparecer.

Gostou? Legal, então vamos brincar mais com essa tela. Primeiro, vamos definir mais algumas opções para a aplicação: o título, a altura e a largura da janela. Esses dois itens são configurados na primeira linha da nossa aplicação.

1
2
3
Shoes.app :title => "Tutorial Shoes", :width => 300, :height => 350 do
   para "Oi Mundo!"
end

Outras características podem ser marcadas, como permitir se a janela será redimensionável (:resizable => true/false), mas isso fica para outra hora.

Também podemos alterar o plano de fundo da janela, através do atributo background, que recebe uma cor no formato hexadecimal. Além da cor de fundo, vamos adicionar uma borda a janela, com o atributo border. Parece CSS, não é mesmo?

1
2
3
4
5
Shoes.app :title => "Tutorial Shoes", :width => 300, :height => 350 do
   background "#999"
   border "#BE8", :strokewidth => 6
   para "Oi Mundo!"
end

O strokewidth é a largura da borda. Existe também a possibilidade de usar cores RGB, mas a sintaxe muda um pouco. Além do plano de fundo, o texto também pode ser formatado. Várias caracteristicas da fonte (ou do parágrafo) podem ser alterados, como podemos ver abaixo. Aspectos como margens do texto, negrito, espaço entre as letras e outros também podem ser definidos facilmente.

1
2
3
4
5
Shoes.app :title => "Tutorial Shoes", :width => 300, :height => 350 do
   background "#999"
   border "#BE8", :strokewidth => 6
   para "Oi Mundo!", :stroke => red, :underline => "single", :font => "Tahoma", :size => "60"
end

Um texto pode facilmente tornar-se um link no Shoes. Aliás, os links são bem dinâmicos, podendo ser usado para abrir uma caixa de mensagens, abrir uma página web, navegar entre telas, ou executar funções definidas em métodos. Curioso? Então vamos testar um link que acessa um excelente site na web.

1
2
3
4
5
6
Shoes.app :title => "Tutorial Shoes", :width => 300, :height => 350 do
   background "#999"
   border "#BE8", :strokewidth => 6
   para "Oi Mundo!", :stroke => red, :underline => "single", :font => "Tahoma", :size => "60"
   para link ("Clique Aqui!", :click => "http://www.ruby-br.org/")
end

Simples, não? O detalhe é que um link sempre deve estar num parágrafo. Agora, um exemplo de um link que mostra uma caixa de mensagem, além de receber alguma formatação.

1
2
3
4
5
6
Shoes.app :title => "Tutorial Shoes", :width => 300, :height => 350 do
   background "#999"
   border "#BE8", :strokewidth => 6
   para "Oi Mundo!", :stroke => red, :underline => "single", :font => "Tahoma", :size => "60"
   para link("Clique Aqui!", :size => 20, :font => "Arial") { alert ("Muito bom!")}
end

Bem, acho que por hoje já deu para perceber que o Shoes facilita muito o desenvolvimento de aplicações com interface gráfica. Treine esses exemplos, e brinque com eles. Na próxima parte do tutorial vamos aprender a fazer uma janela igual a da imagem abaixo.

Até lá!

Artigos relacionados

Tags:
 

3 Responses to Tutorial: Desenvolvendo aplicações gráficas com Shoes 3.0

  1. [...] continuar de onde paramos no artigo anterior; se você é iniciante ou nunca programou com Shoes, leia o primeiro texto que tudo fica mais [...]

  2. [...] continuar de onde paramos no artigo anterior; se você é iniciante ou nunca programou com Shoes, leia o primeiro e o segundo texto que tudo fica mais [...]

  3. [...] gráficas utilizando Ruby existem várias opções, como Shoes, FxRuby e WxRuby. Inclusive, já falamos sobre Shoes antes aqui no site. Dessa vez, vamos experimentar um pouco da wxRuby, uma biblioteca muito interessante para [...]

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>