Disegnare una UI con Qt Designer

Come riportato nell’articolo seguente il framework Qt è composto da due componenti principali:

• Qt Creator: un IDE cross-platform che permette la realizzazione di interfacce grafiche in C++;
• Qt Designer: permette di ottenere delle interfacce grafiche in modalità totalmente grafica e di produrre un file XML che può essere utilizzato all’interno di vari linguaggi di programmazione.

Quello che utilizzeremo in questo articolo è il Qt Designer mentre come linguaggio utilizziamo Ruby.

Per installare l’ambiente Qt in Ubuntu abbiamo bisogno oltre che del framework anche dei binding nel linguaggio Ruby:

% sudo apt-get install qtcreator

% sudo apt-get install libqt4-ruby

se tutto è installatato correttamente basta dare il comando

% designer-qt4

per lanciare il tool.

Dal pannello principale abbiamo essenzialmente due scelte: creare una MainWindow ( che conterrà una barra dei menù superiore, un widget centrale ed una barra di stato inferiore) o un widget ( che contiene solo un elemento centrale senza barre)

Nel nostro esempio scegliamo una MainWindow

Otterremo una Window vuota:

la prima cosa che faremo è impostarne le dimensioni tramite il pannello Property Editor cliccando sulla voce ‘Geometry’ e settando le proprietà ‘Width’  e ‘Height’ ad esempio a 350 x 250. Impostiamo inoltre il nome nella proprietà ‘windowTitle’ .

Inseriamo un Grid Layout prendendolo dal Widget Box -> Layouts ed inseriamo due Label e due Line Edit disponendoli come in figura:

Aggiungiamo un Pulsante ‘PushButton’ e restringiamo la Grid per ottenere la seguente Window:

Salviamo e otteniamo un file con estensione .ui in formato XML, che contiene la descrizione dell’interfaccia. Tale file dovrà essere processato con il tool rbuic per generare automaticamente il codice ruby necessario alla creazione dell’interfaccia descritta.

% rbuic4 window.ui -o window-ui.rb

con il comando otterremo la ‘traduzione’ in Ruby dell’interfaccia XML.

Creiamo un file Ruby che utilizzi questa interfaccia (window.rb):

require 'Qt4'
require 'window-ui.rb' 

class Window < Qt::MainWindow
  def initialize
    super
    puts "init"
    @ui=Ui_MainWindow.new
    @ui.setupUi(self)
  end
end
if __FILE__ == $0
 app = Qt::Application.new(ARGV)
 w=Window.new
 w.show
 app.exec()
end

Da consolle lanciamo il programma con il comando:

% ruby window.rb