402px-gnomelogo-svg

Novidades do GNOME 3.18

O novo GNOME 3.18 foi lançado hoje, com muitas novidades e melhorias. Segue abaixo algumas delas:

  • O suporte a HiDPI (famosa tela Retina dos Macs) ainda tem alguns problemas, mas a versão 3.18 finalmente resolveu o problema de redimensionamento de cursor
  • Um bug de longa data da NVIDIA foi corrigido
  • Integração com o Google Drive
  • Browser Epiphany bloqueia propaganda por padrão e habilita o DNT (Do not Track)
  • Melhorias no File Chooser (seletor de arquivos)
  • Trabalhado o suporte a atualização de firmware UEFI através do GNOME Software
  • Melhorias no Calendar e Nautilus
  • Removido o suporte ao Window XP no GTK+
  • Muitas outras melhorias e correções de bugs

Como de praxe, a GNOME foundation também libera um vídeo mostrando as melhorias desta nova versão:

(mais…)

402px-gnomelogo-svg

GNOME 3.16.1 já está disponível

O GNOME 3.16.1 foi disponibilizado hoje para download. Esta versão contempla atualizações sobre 3.16, liberada mês passado, e traz correções de BUGs, melhorias no próprio GNOME, atualização da documentação e traduções.

Os desenvolvedores do projeto agora estão focados no desenvolvimento da versão 3.18, que será lançada em Setembro. E nos próximos dias será disponibilizado o calendário de liberação das novas releases.

Se você tiver interesse em compilar e instalar manualmente o GNOME confira a nota oficial disponibilizada por Frederic Peters.

Via Phoronix

Construindo a interface de login do spotify com PyGTK e CSS

Atenção, construiremos uma interface muito semelhante a do spotify. Há alguns elementos que não foram possíveis a representação igual ao da interface original.

Aqui vai uma screen da interface original(à direita) e a interface criada(à esquerda).

spotify
Construindo
Primeiro iremos importar três bibliotecas Gtk, Gdk e GdkPixbuf. A primeira creio que todos já conheçam, a segundo é a Gnome Drawing Kit a último é a Pixbuf, que será utilizado pra adicionar imagens na interface.

Precisaremos também de um modelo de interface, a não ser que se queira construir todos os objetos a mão, utilizaremos o glade. Veja o arquivo xml aqui gerado pelo Glade.

Como vocês já viram no post do glade (se não viram vale a pena conferir aqui), não se deve carregar todos os objetos da interface, somente aqueles que precisarão de manipulação via código. Note que é importante também dar nomes aos objetos, assim fica mais fácil de aplicar as propriedades com base nesses nomes. veja no exemplo abaixo.


Criaremos um novo tipo de objeto, o Pixbuf que como dito anteriormente adicionará imagens a interface.

Como pode ser visto, o método Pixbuf.new_from_file_at_size recebe três parâmetros, o arquivo de imagem e a largura e altura em pixels. Em seguida o image1.set_from_pixbuf() liga o objeto imagem ao pixbuf adicionando o elemento criado anteriormente. Essa não é a única forma de se adicionar imagem na aplicação, porém é a que eu acho mais simples de se fazer. Caso queira ver as outras formas clique aqui .

Algumas outras configurações são necessárias pra ajustar a tela.

Adiciono um outro pixbuf que será necessário para o botão de login do facebook. O markup dos links no caso de perca de usuários sem cadastro e perca de senha.

E por fim algumas conexões dos botões.

CSSProvider

Toda a mágica da interface só é possível devido a um elemento especial, o CssProvider. CSSProvider é um tipo de objeto do Gtk capaz de carregar código css para a aplicação seja no mesmo arquivo da aplicação ou um arquivo externo exemplo “style.css”.

Precisamos armazenar todo o conteúdo css dentro de uma variável, ela será lida pelo Gtk posteriormente.

Se você está usando python 3.x deverá informar o prefixo b antes da string para ela ser lida em bytes.

Ficará algo do tipo:

css = b"""
@import url("style.css");

GtkWindow {
    background-color:#111111;
}
"""

É nessa parte que você diz de onde vai carregar o css, sendo da própria variável ou de um arquivo externo. Criaremos um objeto do tipo Gtk.CssProvider ele será a responsável por carregar o css e em seguida ele carrega o código CSS da variável chamada também de css.

O Gtk.StyleContext adiciona um provedor de estilo global para a tela, que será usado na construção de estilo para todos os GtkStyleContexts sob tela. Esse objeto recebe a Screen padrão, o objeto que absorveu o css stylecssprovider e o style provider priority.

A notação css segue da mesma forma que é utilizada para construção de websites. Seguem exemplos de seletores.

Seletor universal:

*{

}

Selecionar todos os objetos do tipo Gtk button:

GtkButton {

}

Para conferir todos os seletores confira esse post.
Veja abaixo o arquivo de css da aplicação que é importado pelo @import da variável css.

Atenção

Alguns elementos não puderam ser 100% representados como na interface original, exemplos deles é a fonte utilizada na aplicação, o botão toggle e os links. Fora esses contratempos, acho que a aplicação é válida principalmente por passar algo novo que é a integração do gtk com o css.

A aplicação completa está no github e pode ser acessada aqui. A quem quiser contribuir pode ficar à vontade.

Se quiser entrar em contato pode comentar esse post, me enviar um Email ou me chamar no Twitter.

402px-gnomelogo-svg

GNOME 3.16 foi lançado

A versão 3.16 do GNOME foi lançada com novas features e melhorias no ambiente.

Algumas melhorias:

  • Notificações foram redesenhadas
  • Novas scrollbars
  • Melhorias no visualizar de imagens e aplicativos de música, fotos e vídeos
  • Novos aplicativos: Calendário, Livros e caractéres
  • Tela de login está utilizando o Wayland como padrão
  • Novo tema do GNOME Shell
  • Inclusão de uma build Beta do Builder IDE
  • e outros

Melhorias do GTK+ que estão presentes com o GNOME 3.16:

  • Suporte a OpenGL
  • Suporte ao Mir
  • Melhorado o  suporte ao Wayland
  • e vários outros

Seguem algumas imagens do novo ambiente:

Eventos e alarmes

calendar-notifications

Gerenciador de arquivos

files

Notificações agora são mostradas no topo

notification-bubble

Novas aplicações: Calendário, Caracteres e Livros

preview-apps

Segue o vídeo de apresentação desta nova versão:

Via Phoronix

Acelerando o desenvolvimento com glade

gnome-logosz

Há um tempo postei aqui no blog um artigo de como criar um formulário com PyGtk, Gdk e Sqlite3. O tutorial é altamente explicativo e pode ser visto aqui.

O único problema e digo que foi proposital, é que toda a interface da aplicação foi construída via código, isso é bom e ruim ao mesmo tempo, depende de como você vê.

No desenvolvimento temos que lidar com diversos objetos que não necessariamente estão ligados ao funcionamento do programa e sim com detalhes de design e aparência. Na maioria dos projetos a designação de quem cuida da interface e quem cuida do funcionamento do programa, comportamento, entre outros, vão para pessoas diferentes, ou até mesmo equipes diferentes.

Glade vem suprir as necessidades de ambos os lados.

Glade é uma ferramenta Opensource para desenvolvimento de aplicações Gtk+ altamente intuitiva e fácil de manusear. Ele gera um xml que pode ser manipulado dinamicamente pelo código. O que te deixa livre para utilizar a mesma interface com diversas linguagens de programação.

glade

Bom pro desenvolvedor

  • Não é mais preciso utilizar funções como set_valign ou set_halign e tendo que lembrar todos os tipos de objetos Gtk.Align para aplicar o alinhamento para cada widget na sua interface.
  • Funções tipo attach e pack_start são desnecessárias. Glade abstrai a forma de se inserir objetos em contêineres, é um simples “clica e arrasta” que já poupa bastante tempo.
  • É possível também ter uma visão de objetos obsoletos para a versão do projeto que está usando. Isso evita que sua aplicação tenha alguma incompatibilidade.

Bom pro designer

  • Você não tem que entender especificações de linguagens ou funções se quiser fazer redimensionamento de um objeto entry por exemplo. Se você é programador, não é tão difícil de usar entry.set_width_chars(30), mas é completamente desnecessário colocar isso nas costas do designer, não é o foco dele.
  • A interface é construída como se fosse um mockup, simples, fácil e rápido.
  • Caso você tenha que criar uma outra aplicação com outra linguagem o processo não muda, você pode inclusive utilizar o mesmo xml para diversas aplicações.

Atenção

Abstrações a parte, as vezes é bom construir com cliques. É prático e qualquer um pode fazer. Porém é muito importante também que se conheça o mínimo do que se está fazendo ou as coisas podem dar errado, pode não ser hoje ou amanhã mas num futuro próximo. Sempre terá aquele cliente pedindo por uma alteração no funcionamento, mudança de regra, customizações e etc. E provavelmente você terá que resolver isso com código.

Por isso mantenha o costume de ler a documentação e principalmente saiba algo sobre esse objeto que você está arrastando com o mouse. “Problemas não avisam quando vão chegar”

Instalando

Windows
Em ambiente windows você pode fazer o download clicando aqui.

RedHat
sudo yum install glade

Ubuntu
sudo apt-get install glade

Construindo

Como citado anteriormente o glade gera um arquivo xml com nomenclatura ‘.glad’ ou ‘.ui’, a segunda é a mais nova e mais utilizada forma. Você pode manipular esse xml com diversas linguagens um breve exemplo é (C, C++, C#, Vala, Java, Perl e Python).

building

O arquivo tem uma apresentação hierárquica de objetos e suas propriedades. É relativamente fácil identificar um objetos e seus filhos.
Inclusive alguns sinais podem ser manipulados pelo xml.

Veja um exemplo do arquivo.

Todo carregamento de biblioteca e declaração de objetos se mantêm o mesmo, a diferença está nos atributos.

Você precisa iniciar um objeto do tipo Builder e então carregar o arquivo xml.

E então a partir daí é possível manipular seus widgets ou containers utilizando o builder e a função get_object.

Note que, qualquer tipo de objeto pode ser carregado utilizando o get_object inclusive janelas, botões, contêineres e etc.. Eles se comportarão da mesma forma como se fossem criados da maneira convencional.
O código da aplicação pode ser visto aqui.

O glade conta também com um manual de referência para desenvolvedores, para encontrá-lo basta apertar F1 ou ir na aba de ajuda. Lá você encontra vários manuais de tudo que é preciso saber para desenvolver com Gtk.

devhelp

Nesse link você encontrará tudo sobre o glade, desde as versões lançadas, tutoriais, contato com developers, wiki e etc.

Veja uma breve demonstração do glade.

Espero que esse artigo ajude a aumentar a sua produtividade e valorizar o seu tempo.
Dúvidas? Comente, me envie um Email ou entre em contato pelo twitter.

Obrigado, e até mais!