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.

Qt Designer - Pannello Iniziale

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:

MainWindow 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:

Grid Layout con Label ed Line Edit

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

Finestra Finale

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

1 Stella2 Stelle3 Stelle4 Stelle5 Stelle (1 voti, media: 3,00 di 5)
Loading...
You can leave a response, or trackback from your own site.

2 Responses to “Disegnare una UI con Qt Designer”

  1. jj ha detto:

    Bell’articolo, però mi rimangono dei dubbi. Come si fanno ad implementare le funzioni di “utilizzo” dell’interfaccia? (si chiamano callback?) Ad esempio c’è un modo per automatizzare anche la creazione dello “scheletro” dei metodi che vengono chiamati alla pressione di un bottone, o all’inserimento di un testo un’area di testo, al passaggio del mouse sopra una determinata area?
    Grazie mille ! 🙂

  2. Berry ha detto:

    Great goods from you, man. I’ve be aware your stuff prior
    to and you’re simply too magnificent. I really like what
    you have obtained right here, certainly like what you are saying
    and the way through which you are saying it. You are making it entertaining and you
    still care for to keep it wise. I cant wait to learn far more from you.
    This is actually a great website.

Leave a Reply

*