Construindo Interfaces gráficas com PySide - QWidget

Fala pessoal, estou de volta dessa vez para falar mais de PySide =). Se você ainda não leu os posts anteriores a esse aqui no blog, por favor leia acessando a tag (PySide).

Até agora rabiscamos algumas apps em cima de nosso toolkit gráfico, mas chegou a hora de começar a desvendar o nosso PySide. Vamos falar hoje da classe QWidget que é a base dos componentes: Buttons, Text Fields, Check Box .. etc.

 

QWidget

A classe QWidget é a classe base para todos os objetos de interface do usuário. Portanto uma tela é formada de vários QWidgets, claro que um QWidget é responsável por agrupar os demais. Dai aquela famosa nomenclatura childs and parents ;).

A única coisa que não pode ser agrupada em uma QWidget são as janelas, geralmente janelas tem um contorno e uma barra de título, digo geralmente pois podemos omitir essas características na construção de nossa janela. Em PySide podemos ter uma QWidget sem um pai, quando isso acontece dizemos que temos uma QWidget top-level, essas widgets tem barra de título e ícone. Apesar de poder ter uma widget independente (top-level) isso não é muito usado.

 

Widgets compostas

Widgets compostas são widgets que abrigam outras widgets (filhas). Não existe um número máximo de filhos que uma QWidget pode ter. Pense em um QFrame (ainda não aprendemos sobre ele, mas é uma área onde podemos adicionar objetos) e nele pode ser adicionado vários widgets (botões, campos de texto, campos de seleção, etc).

 

Minha primeira Widget

Vamos lá galera hora de entender o código. O que fazemos nesse código é codificar o evento de duplo clique, quando isso ocorre o titulo da janela altera ... faça o teste.

Como de praxe as primeiras linhas são os importes necessários das classes e módulos que vamos utilizar em nosso programa. Depois definimos nossa classe (Window) que herda de QWidget. Já no construtor alteramos o título de nossa janela para Aplicacao Bala.

Depois definimos um método que na verdade é um tratador de eventos (aprenderemos mais sobre isso nos próximos posts), esse método trata o duplo clique na área da minha QWidget, ou seja, se o usuário clicar duas vezes no interior de minha QWidget, então o método vai ser executado. Quando o método for executado ele vai imprimir no terminal o valor de event e alterar o título da QWidget para funciona!!!.

Agradecimentos

Esse post é só para introduzir a classe QWidget, no posso post vamos trabalhar mais os eventos que podemos ter em nossas widgets. Até a próxima pessoal =).

Construindo interfaces gráficas com PySide - QMenuBar / QMenu / QAction

Fala pessoal, tudo ...

Hoje vou continuar falando de PySide. Vou mostrar como inserir barra de menu, menus e ações.

Motivação

Na grande maioria das vezes quando escrevemos uma interface gráfica precisamos disponibilizar ao nosso usuário uma barra de menu com algumas operações. Fazer a divisão das operações em menus com nomes significativos, facilita o uso do seu software. Hoje em dia a maioria dos softwares fazem o uso de menus para dividir as ações que o programa oferece, um bom exemplo é o seu navegador ... imagine como seria complicado utilizá-lo se ele não tivesse um menu para dividir as operações.

 Mostre o código

Agora é a hora legal, onde o Guilherme para de falar e exibe o código, vamos lá? Veja como é o código e confira a explicação logo em seguida:

Nas linhas 4,5,6 importo os módulos que vou usar em meu programa. Nesse caso mostrei como importar todas as classes presentes no módulo QtGui e QtCore, fazendo dessa maneira você não precisa escrever por nome do módulo mais o nome da classe, por exemplo QtGui.MainWindow.

Da linha 8 à 36 tenho a definição de uma classe que herda de MainWindow (caso você não saiba o que é a MainWindow leia). As novidades começam a surir a partir da linha 14, onde uso o método setGeometry que pede 4 argumentos (posx, posy, largura, altura) para definir a janela.

Na linha 18 eu crio uma barra de menu utilizando o construtor  da classe QMenuBar. Toda MainWindow já possui uma barra de menu por definição, portanto também poderíamos apenas recuperar a QMenuBar sem precisar instanciar uma nova, veja:

Depois da barra de menu criada na linha 19 eu crio um menu utilizando o construtor QMenu. O construtor de QMenu pode ter dois ou um parâmetro, o primeiro parâmetro é o texto que será mostrado na barra de menus, o segundo é o elemento pai do menu. Esse parâmetro exerce o seguinte comportamento, quando a janela pai do menu é destruída o menu também é removido.

Por enquanto já temos o menu e temos a barra de menu, mas ainda falta criar ações para esse menu, ou seja, quais funções vão ser colocadas/agrupadas naquele menu, por exemplo: menu file tem as actions save, open, save as.

Para criar uma ação utilizamos o construtor QAction(), esse construtor pode ter vários parâmetros de configuração como: ícones, teclas de aderência (Ctrl + A), texto exibido na barra de status. Por isso cabe uma consulta um pouco mais detalhada a documentação para poder usar todos os recursos dele. Eu apenas defini o texto de apresentação e a ação (método) que ele executa, acredito que seja o as principais funções dele. O primeiro parâmetro é o texto que vai parecer quando o menu for aberto, o segundo parâmetro é o elemento pai da QAction e o terceiro e ultimo é o nome do método que a ação invoca quando é clicada.

Feito isso basta adicionar a action ao menu, e adicionar o menu na barra de status. Ufa está quase acabando, agora só falta definir o método que a QAction vai chamar, nesse código teremos que criar um método chamado hello().

Nas 34,35 e 36 está mostrando a definição do método hello. Esse método limpa a tela do terminal (Unix like) e escreve o texto Hello World.

No final você deve ter uma janela semelhante a essa em sua área de trabalho ao interpretar o código:

(menu do mac é na barra, em alguns linux isso também ocorre fique atento a esse detalhe).

Ao clicar no menu e na Action sobre o seu terminal deve ter o seguinte resultado:

Bom pessoal é isso ai, qualquer dúvida deixem comentários! Até a próxima e bons estudos.

Construindo interfaces gráficas com PySide - MainWindow

Fala pessoal, hoje vamos aprender como construir uma janela principal utilizando o toolkit gráfico PySide.

PySide é uma versão do PyQt com uma licença diferente, para mais informações vide a documentação oficial.

Motivação

Muitas vezes estamos programando alguns scripts Python, mas pela ausência de GUI nao conseguimos mostrar aos nossos pais os programas que fazemos (brincadeira pessoal).

A motivação aqui, é o fato que programas que possuem uma interface, tornam-se mais amigável  e conseguem alcansar um número  maior de usuários e também conseguem facilitar a execução de tarefas dentro do software.

Mostre o código

Agora é a hora legal, onde o Guilherme para de falar e exibe o código, vamos lá? Veja como é o código e confira a explicacao logo em seguida:

Na primeira linha fazemos a importação dos módulos QtGui e QtCore. Logo após criamos uma classe, que herda de QMainWindow.

Dentro da classe temos apenas 3 linhas, a primeira linha declara o construtor da classe ( __init__() ). Na segunda linha temos a chamada ao construtor da classe pai, nesse caso temos uma chamada ao construtor da classe QMainWindow. Na 3 e ultima linha da classe, chamamos o método serWindowTitle, ele tem um parâmetro do tipo str (string). Esse método altera o título da nossa janela.

Feito isso já temos uma janela escrita em PySide, porém, falta ainda um método para criar uma instância da janela, e iniciar a nossa app. Nas ultima linhas definimos o método main (um velho amigo). Na primeira linha do main temos a importação do módulo sys, logo após criamos uma aplicação. Depois criamos uma instância da classe janela, chamamos o método show() para exibi-la, e por fim mandamos a aplicação executar. 

Se você preferir, não precisamos criar o método main e nem importar o módulo sys ... Veja como ficaria:

O resultado final deve ser uma janela parecida com a que temos na imagem a seguir:

Bom é isso ai pessoal, até a próxima!! Bons estudos :)