Hlavní navigace

Formuláře, popisky a obrázky v PyQt4

Jan Kaluža 22. 1. 2007

V dnešním článku o PyQt knihovně si představíme další užitečné prvky. Povíme si především o formulářových polích QLineEdit, textových popiscích QLabel a naučíme se načítat a zobrazovat obrázky pomocí QPixmap. V praktických částech si vytvoříme jednoduchý formulář a malý prohlížeč obrázků.

QLineEdit – Teorie

QLineEdit je „editor textu“ skládající se pouze z jedné řádky. Používá se nejčastěji v různých formulářích ve spojení s widgetem QLabel, o kterém si povíme ve druhé části článku.

QLineEdit ( contents, parent )
QLineEdit ( parent )

Funkce vytvoří nový QLineEdit. Parametr parent je rodičem QLineEditu a parametr contents je jeho obsahem. Ve druhé možné syntaxi je vytvořen prázdný QLineEdit.

QLineEdit.setEcho­Mode ( echoMode )

QLineEdit umožňuje nastavit jednu ze tří možností zobrazení zadaného textu.

Hodnota echoMode Význam
QtGui.QLineEdit­.Normal Zobrazí celý napsaný text.
QtGui.QLineEdit­.Password Zobrazí každý znak textu jako hvězdičku (*).
QtGui.QLineEdit­.NoEcho Nezobrazuje žádné ze zadaných znaků.

QLineEdit.clear () – slot

Funkce clear smaže obsah QLineEditu.

QLineEdit.setText ( text ) – slot

Funkce setText uloží text obsažený v proměnné text do QLineEditu.

QLineEdit.text ()

Funkce vrací text uložený v QLineEditu ve formátu QString. Pro převod na typ „str“, který se používá v Pythonu, můžeme použít známou funkci str(). Pro převod na unicode použijeme unicode(). Ziskání textu z QLineEditu pak může vypadat například takto:

text=unicode(lineEdit.text())

QLineEdit.edi­tingFinished () – signál

Signál editingFinished () je generován v případě, kdy je stisknuta klávesa enter, nebo když přestane být QLineEdit aktivním objektem (widgetem).

QLineEdit.retur­nPressed () – signál

Signál returnPressed () je generován pouze v případě, kdy je stisknuta klávesa enter.

QLineEdit.tex­tEdited ( const QString & ) – signál

Signál textEdited ( const QString & ) je generován, pokud je změněn text QLineEditu uživatelem. Parametr signálu je text, který signál při svém napojení na slot předá funkci, na kterou je napojen. Pro úplné pochopení významu těchto parametrů v signálech si ukážeme příklad napojení tohoto signálu na námi definovanou funkci.

# Teto funkci je signalem predan i text, ktery je v QLineEditu
def mojeFunkce(text):
    print "Text v QLineEditu:",text
# Napojime signal textEdited(const QString &) QLineEditu lineEdit
# na funkci mojeFunkce. Funkci je pak automaticky predan text, ktery
# se v lineEditu nachazi.
app.connect(lineEdit,QtCore.SIGNAL("textEdited ( const QString & )"),mojeFunkce)

QLineEdit.tex­tChanged ( const QString & ) – signál

Signál textChanged ( const QString & ) je generován, pokud je změněn text QLineEditu. Na rozdíl od signálu textEdited ( const QString & ) je volán i v případě změny textu funkcí QLineEdit.set­Text(). Tento signál předává funkci, na kterou je napojen, aktuální text v QLineEditu.

QLineEdit.set­ReadOnly ( bool )

Funkcí setReadOnly můžeme nastavit QLineEdit tak, aby byl jen pro čtení. Pokud je parametr bool True, QLineEdit bude jen pro čtení. Pokud je False, bude se do něj dát zapisovat. Aktuální stav můžeme zjistit funkcí QLineEdit.isRe­adOnly().

QLineEdit.setA­lignment ( alignment )

Touto funkcí nastavíme zarovnání textu v QLineEditu. Parametr alignment jsme si popisovali v minulém díle v souvislosti s layouty. Pro QLineEdit mají význam jen takové hodnoty parametru alignment, které zarovnávají text horizontálně. Aktuální hodnotu parametru alignment vrací funkce QLineEdit.alig­nment().

QLineEdit – Praxe

PyQt3 1

V praxi si zkusíme napsat skript, jehož hlavní částí budou dva QLineEdity. Cokoliv zadáme do prvního QLineEditu, napíše se i do druhého. Pokud zadáme slovo „quit“ a potvrdíme enterem, program se ukončí. Aby program vypadal zajímavěji, budeme obsah textu prvního QLineEditu zarovnávat doprava.

#!/usr/bin/env python
from PyQt4 import QtCore, QtGui
import sys

def returnPressed():
   """ Funkce kontrolujici, zda je zadano 'quit' """
   if str(firstLineEdit.text())=="quit":
      mainWindow.close()

app = QtGui.QApplication(sys.argv)
mainWindow = QtGui.QMainWindow()
mainWindow.setWindowTitle("QLineEdit")
mainWidget=QtGui.QWidget(mainWindow)
mainWindow.setCentralWidget(mainWidget)
layout=QtGui.QVBoxLayout(mainWidget)

# Vytvorime 2x QLineEdit s rodicem mainWidget
firstLineEdit=QtGui.QLineEdit(mainWidget)
secondLineEdit=QtGui.QLineEdit(mainWidget)

# Zarovnani doprava
firstLineEdit.setAlignment(QtCore.Qt.AlignRight)

# Druhy QLineEdit nastavime jen pro cteni
secondLineEdit.setReadOnly(True)

# Pridame objekty do layoutu
layout.addWidget (firstLineEdit)
layout.addWidget (secondLineEdit)

# Napojime signal textChanged prvniho QLineditu na slot setText druheho QLineEditu
app.connect(firstLineEdit,QtCore.SIGNAL("textChanged ( const QString & )"),secondLineEdit.setText)
# Napojime signal returnPressed() QLineEditu na predem definovanou funkci returnPressed()
app.connect(firstLineEdit,QtCore.SIGNAL("returnPressed ()"),returnPressed)
mainWindow.show()
sys.exit(app.exec_())

QLabel – Teorie

QLabel je v podstatě textový popisek. Používá se všude tam, kde se má zobrazit krátký text (například nadpis nebo popisek QLineEditu). QLabel umožňuje zobrazovat i obrázky, takže jej lze používat pro zobrazení nadpisů v podobě obrázků nebo log aplikací. Text, který do QLabelu vkládáme, může mít HTML syntaxi. Můžeme tedy měnit například barvu či velikost písma užitím html tagu <font> nebo například používat nadpisy <h1>.

QLabel ( parent ) – modul QtGui
QLabel ( text, parent ) – modul QtGui

Jednou z těchto funkcí můžeme QLabel vytvořit. Parametr parent je rodičem QLabelu a parametr text je text, který QLabel zobrazí.

QLabel.setText ( text ) – slot

Funkce nastavuje text, který QLabel zobrazí.

QLabel.setPixmap ( pixmap ) – slot

Nastavuje obrázek, který QLabel zobrazí. Hodnotu parametru pixmap si popíšeme níže.

QLabel.clear ( ) – slot

Funkce clear() smaže obsah QLabelu.

QLabel.setAlignment ( alignment )

Funkce nastavuje zarovnání textu v QLabelu. Parametr alignment má opět stejné hodnoty jako u layoutů, o kterých jsme mluvili v předchozím díle.

QLabel – Praxe

PyQt3 2

V praktické části vytvoříme jednoduchý formulář, který bude po uživateli vyžadovat jeho jméno a příjmení. Skládá se ze tří QLabelů (nameLabel, surnameLabel a headerLabel, který slouží jako nadpis), dvou QLineEditů (nameLineEdit a surnameLineEdit) a dvou tlačítek (sendPushButton a closePushButton). Po kliknutí na tlačítko closePushButton je zavřeno hlavní okno, čímž se program ukončí. Pokud uživatel klikne na tlačítko sendPushButton, spustí se funkce send() a ta zobrazí hodnoty obou QLineEditů.

#!/usr/bin/env python
# -*- coding: utf-8 -*-
from PyQt4 import QtCore, QtGui
import sys

def send():
   """ Funkce vypisujici name a surname """
   name=unicode(nameLineEdit.text())
   surname=unicode(surnameLineEdit.text())
   print "Name: %s, Surname: %s" % (name,surname)

app = QtGui.QApplication(sys.argv)
mainWindow = QtGui.QMainWindow()
mainWindow.setWindowTitle("QLabel")
mainWidget=QtGui.QWidget(mainWindow)
mainWindow.setCentralWidget(mainWidget)
layout=QtGui.QGridLayout(mainWidget)

# vytvorime headerLabel a vlozime do nej nadpis
headerLabel=QtGui.QLabel(u"<h1>Formulář</h1>",mainWidget)
# zarovname nadpis na stred
headerLabel.setAlignment(QtCore.Qt.AlignHCenter)
# vytvorime dalsi QLabely jako popisky ke tlacitkum
nameLabel=QtGui.QLabel(u"Jméno:",mainWidget)
surnameLabel=QtGui.QLabel(u"Příjmení:",mainWidget)

nameLineEdit=QtGui.QLineEdit(mainWidget)
surnameLineEdit=QtGui.QLineEdit(mainWidget)

sendPushButton=QtGui.QPushButton("Odeslat",mainWidget)
closePushButton=QtGui.QPushButton(u"Zavřít",mainWidget)

# Pridame objekty do layoutu
layout.addWidget(headerLabel,0,0,1,2)
layout.addWidget(nameLabel,1,0)
layout.addWidget(nameLineEdit,1,1)
layout.addWidget(surnameLabel,2,0)
layout.addWidget(surnameLineEdit,2,1)
layout.addWidget(closePushButton,3,0)
layout.addWidget(sendPushButton,3,1)

# napojime signaly tlacitek
app.connect(closePushButton,QtCore.SIGNAL("clicked ()"),mainWindow.close)
app.connect(sendPushButton,QtCore.SIGNAL("clicked ()"),send)

mainWindow.show()
sys.exit(app.exec_())

QPixmap – Teorie

Řekli jsme si o tom, že QLabel může zobrazovat obrázky. Jednou ze tříd, která se v PyQt4 obrázky zabývá, je QPixmap. Pomocí třídy QPixmap můžeme načíst libovolný obrázek ze souboru nebo ze samotného zdrojového kódu a zobrazit jej například pomocí QLabelu. Nyní si povíme o funkcích, pomocí nichž je možné QPixmap vytvořit a pracovat s ním.

QPixmap ()

Touto funkcí vytvoříme QPixmap s nulovou velikostí a s žádným obsahem.

QPixmap ( width, height )

Funkce vytvoří QPixmap s šířkou width a výškou height.

QPixmap ( filename )

QPixmap(filename) je asi nejpoužívanější funkce vytvářející QPixmap. Parametr filename je cesta k souboru, který chceme načíst. QPixmap(filename) nekontroluje existenci souboru a pokud neexistuje, vytváří se prázdný QPixmap. Je tedy na programátorech, aby se přesvědčili, že soubor s obrázkem opravdu existuje.

QPixmap ( xpm )

Další hojně používaná funkce pro vytvoření QPixmap je QPixmap(xpm). Parametr xpm je typu seznam (list) a obsahuje obrázek ve formátu xpm. Více o tomto formátu si můžete přečíst na wikipedii (anglicky) XPM obrázek může vypadat například takto:

xpm = [
"16 16 3 1",
"       c None",
".      c #000000000000",
"X      c #FFFFFFFF0000",
"                ",
"                ",
"         ....   ",
"        .XXXX.  ",
" .............. ",
" .XXXXXXXXXXXX. ",
" .XXXXXXXXXXXX. ",
" .XXXXXXXXXXXX. ",
" .XXXXXXXXXXXX. ",
" .XXXXXXXXXXXX. ",
" .XXXXXXXXXXXX. ",
" .XXXXXXXXXXXX. ",
" .XXXXXXXXXXXX. ",
" .XXXXXXXXXXXX. ",
" .............. ",
"                "
]

QPixmap ( pixmap )

Tato funkce vytvoří QPixmap prostým zkopírováním jiného QPixmapu.

QPixmap.height ()

Funkce QPixmap.height() vrací výšku obrázku v QPixmapu.

QPixmap.width ()

Funkce QPixmap.width() vrací šířku obrázku v QPixmapu.

QPixmap.load ( fileName )

Touto funkcí načteme obrázek ze souboru fileName. Jestli je obrázek úspěšně nahrán, vrátí funkce True, pokud ne, vrátí False.

QPixmap – Praxe

PyQt3 3

Vytvoříme jednoduchý prohlížeč obrázků. Bude se skládat z tří QLabelů, jednoho QLineEditu a dvou tlačítek. QLabel headerLabel bude zobrazovat logo programu, které načte z obrázku logo.png. QLabel showLabel slouží k zobrazování obrázků, jejichž název uživatel zadá do QLineEditu nazvaného fileLineEdit. Funkce showFile() je volána po kliknutí na tlačítko showPushButton a slouží k zobrazení požadovaného obrázku.

#!/usr/bin/env python
# -*- coding: utf-8 -*-
from PyQt4 import QtCore, QtGui
import sys

def showFile():
    """ Zobrazeni obrazku v showLabel """
    # Vytvorime QPixmap, ktery zobrazi obrazek, jehoz jmeno zadal
    # uzivatel v fileLineEdit. Vysledek pak zobrazime v showLabel
    # pomoci setPixmap().
    showLabel.setPixmap(QtGui.QPixmap(unicode(fileLineEdit.text())))

app = QtGui.QApplication(sys.argv)
mainWindow = QtGui.QMainWindow()
mainWindow.setWindowTitle("QPixmap")
mainWidget=QtGui.QWidget(mainWindow)
mainWindow.setCentralWidget(mainWidget)
layout=QtGui.QGridLayout(mainWidget)

headerLabel=QtGui.QLabel(mainWidget)

# Vytvorime QPixmap a zobrazime ho v headerLabel
headerLabel.setPixmap(QtGui.QPixmap("logo.png"))

fileLabel=QtGui.QLabel(u"Soubor:",mainWidget)
showLabel=QtGui.QLabel(mainWidget)
headerLabel.setAlignment(QtCore.Qt.AlignHCenter)
showLabel.setAlignment(QtCore.Qt.AlignHCenter)
fileLineEdit=QtGui.QLineEdit(mainWidget)

showPushButton=QtGui.QPushButton("Zobrazit",mainWidget)
closePushButton=QtGui.QPushButton(u"Zavřít",mainWidget)

# Pridame objekty do layoutu
layout.addWidget(headerLabel,0,0,1,2)
layout.addWidget(fileLabel,1,0)
layout.addWidget(fileLineEdit,1,1)
layout.addWidget(showLabel,2,0,1,2)
layout.addWidget(closePushButton,3,0)
layout.addWidget(showPushButton,3,1)

# napojime signaly tlacitek
app.connect(closePushButton,QtCore.SIGNAL("clicked ()"),mainWindow.close)
app.connect(showPushButton,QtCore.SIGNAL("clicked ()"),showFile)

mainWindow.show()
sys.exit(app.exec_())

Závěr

Hlavním tématem dalšího dílu bude widget QTextEdit, který umožňuje editovat víceřádkový text. Také se podíváme na QComboBox (widget pro výběr jedné položky ze seznamu) a QIcon.

Našli jste v článku chybu?

25. 1. 2007 20:37

Xerces (neregistrovaný)
Díky za náměty, ten odkaz nějak nefunguje. Příklad v C++ je dobrý, ale šlo mi spíš o to zda toho lze nějak dosáhnout přímo v prosředí Qtdesigneru bez nutnosti psát kód. Jak říkáme mi Wokení skoro programátoři - naklikat. :-)
Lupa.cz: Google měl výpadek, nejel Gmail ani YouTube

Google měl výpadek, nejel Gmail ani YouTube

120na80.cz: Bojíte se encefalitidy?

Bojíte se encefalitidy?

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

DigiZone.cz: Česká televize mění schéma ČT :D

Česká televize mění schéma ČT :D

Vitalia.cz: „Připluly“ z Německa a možná obsahují jed

„Připluly“ z Německa a možná obsahují jed

Podnikatel.cz: EET zvládneme, budou horší zákony

EET zvládneme, budou horší zákony

Lupa.cz: Avast po spojení s AVG propustí 700 lidí

Avast po spojení s AVG propustí 700 lidí

Vitalia.cz: Paštiky plné masa ho zatím neuživí

Paštiky plné masa ho zatím neuživí

Vitalia.cz: Jsou čajové sáčky toxické?

Jsou čajové sáčky toxické?

Vitalia.cz: Baletky propagují zdravotní superpostel

Baletky propagují zdravotní superpostel

Lupa.cz: Co se dá měřit přes Internet věcí

Co se dá měřit přes Internet věcí

Podnikatel.cz: Na poslední chvíli šokuje vyjímkami v EET

Na poslední chvíli šokuje vyjímkami v EET

Podnikatel.cz: Víme první výsledky doby odezvy #EET

Víme první výsledky doby odezvy #EET

Vitalia.cz: Láska na vozíku: Přitažliví jsme pro tzv. pečovatelky

Láska na vozíku: Přitažliví jsme pro tzv. pečovatelky

Vitalia.cz: To není kašel! Správná diagnóza zachrání život

To není kašel! Správná diagnóza zachrání život

Vitalia.cz: Chtějí si léčit kvasinky. Lék je jen v Německu

Chtějí si léčit kvasinky. Lék je jen v Německu

Lupa.cz: Propustili je z Avastu, už po nich sahá ESET

Propustili je z Avastu, už po nich sahá ESET

Lupa.cz: UX přestává pro firmy být magie

UX přestává pro firmy být magie

DigiZone.cz: Recenze Westworld: zavraždit a...

Recenze Westworld: zavraždit a...

Měšec.cz: Zdravotní a sociální pojištění 2017: Připlatíte

Zdravotní a sociální pojištění 2017: Připlatíte