Qt for Python Tutorial SimpleDialog: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
(10 intermediate revisions by 6 users not shown)
Line 1: Line 1:
[[Category:LanguageBindings::PySide]]
== Creating a simple PySide2 dialog application ==


'''English''' [[PySideTutorials_Simple_Dialog_Japanese|日本語]]
In this tutorial we will show how to build a simple dialog with some basic widgets.
The idea is that the user inserts his name in a QLineEdit, clicks a QPushButton and sees greetings.


= Creating a simple PySide dialog application =
Let us just start with a simple stub which creates and shows a dialog.
This stub will be updated in the course of this tutorial but you can use this stub to your own PySide2 projects if you need to.


In this tutorial we will show how to build a simple dialog with some basic widgets. The idea is that the user inserts his name in a QLineEdit, clicks a QPushButton and sees greetings.
<syntaxhighlight lang="python" line='line'>
import sys
from PySide2.QtWidgets import QApplication, QDialog, QLineEdit, QPushButton


Let us just start with a simple stub which creates and shows a dialog. This stub will be updated in the course of this tutorial but you can use this stub to your own PySide projects if you need to.
class Form(QDialog):
 
    def __init__(self, parent=None):
        super(Form, self).__init__(parent)
        self.setWindowTitle("My Form")
 
 
if __name__ == '__main__':
    # Create the Qt Application
    app = QApplication(sys.argv)
    # Create and show the form
    form = Form()
    form.show()
    # Run the main Qt loop
    sys.exit(app.exec_())
</syntaxhighlight>


<code><br />#!/usr/bin/python<br /># <s>'''- coding: utf-8 <s>'''-
The imports aren't new to you, the same for the creation of the QApplication and the execution of the Qt main loop.
<br />import sys<br />from PySide.QtCore import'''<br />from PySide.QtGui import *
The only novelty here is the class definition.
<br />class Form(QDialog):
<br /> def ''init''(self, parent=None):<br /> super(Form, self).''init''(parent)<br /> self.setWindowTitle(&quot;My Form&amp;quot;)


<br />if ''name'' == '''main''':<br /> # Create the Qt Application<br /> app = QApplication(sys.argv)<br /> # Create and show the form<br /> form = Form()<br /> form.show()<br /> # Run the main Qt loop<br /> sys.exit(app.exec_())<br /></code>
You can create any class which subclasses PySide2 widgets.
<br />If you have followed the previous tutorials, you are already familiar with a lot of the code here. The imports aren't new to you, the same for the creation of the QApplication and the execution of the Qt main loop. The only novelty here is the class definition.
In this case, we are just subclassing the QDialog to do our custom dialog which we've called "Form".
<br />You can create any class which subclasses PySide widgets. In this case, we are just subclassing the QDialog to do our custom dialog which we've called &quot;Form&amp;quot;. We have also implemented the ''init''() method which calls the QDialog init method with the parent widget, if any. Also new, is the '''setWindowTitle()''' which just sets the title of the dialog window. Also, in ''main''(), you can see that we are creating a Form object, and showing it to the world.
We have also implemented the '''init'''() method which calls the QDialog init method with the parent widget, if any.
<br />h2. Create the widgets
Also new, is the '''setWindowTitle()''' which just sets the title of the dialog window.
<br />We are going to create two widgets</s> a QLineEdit where the user can insert his name, and a QPushButton which we will use to print the contents of the QLineEdit. So, we are going to add the following code to the'''''init''()* method of our Form:
Also, in '''main'''(), you can see that we are creating a Form object, and showing it to the world.
<br /><code><br /># Create widgets<br />self.edit = QLineEdit(&quot;Write my name here..&quot;)<br />self.button = QPushButton(&quot;Show Greetings&amp;quot;)<br /></code>
<br />As should be intuitive by now, both widgets will show the corresponding texts.
<br />h2. Create a layout to organize the widgets
<br />Qt comes with some layouts which helps the user on the organization of his widgets on an application. In this case, we will make it simple and create a QVBoxLayout which will distribute the widgets vertically. The following code will be added also to the '''''init''()''' method, after the creation of the widgets:
<br /><code><br /># Create layout and add widgets<br />layout = QVBoxLayout()<br />layout.addWidget(self.edit)<br />layout.addWidget(self.button)<br /># Set dialog layout<br />self.setLayout(layout)<br /></code>
<br />So, we create the layout, add the widgets with '''addWidget()''', and finally we say that our Form will have our QVBoxLayout as its layout.
<br />h2. Create the function to greet and connect the button
<br />Finally, we just have to add a function to our custom Form</s> the one which will greet the user - and connect our button to it. Our function will be a part of the Form, so you have to add it after the '''''init''()''' function:


<code><br /># Greets the user<br />def greetings(self):<br /> print (&quot;Hello s&amp;quot; self.edit.text())<br /></code>
== Create the widgets ==
We are going to create two widgets a QLineEdit where the user can insert his name, and a QPushButton which we will use to print the contents of the QLineEdit.
So, we are going to add the following code to the '''init'''() method of our Form:


Our function just writes the contents of the QLineEdit to the python console. We have access to the text by means of the '''QLineEdit.text()''' method.
<syntaxhighlight lang="python" line='line'>
# Create widgets
self.edit = QLineEdit("Write my name here..")
self.button = QPushButton("Show Greetings")
</syntaxhighlight>


Now that we have everything, we just need to connect the QPushButton to the '''Form.greetings()''' method. In the '''''init''()''' method we just need to add:
As should be intuitive by now, both widgets will show the corresponding texts.


<code><br /># Add button signal to greetings slot<br />self.button.clicked.connect(self.greetings)<br /></code>
== Create a layout to organize the widgets ==
Qt comes with some layouts which helps the user on the organization of his widgets on an application.
In this case, we will make it simple and create a QVBoxLayout which will distribute the widgets vertically.
The following code will be added also to the '''init'''() method, after the creation of the widgets:


Once executed, you can insert your name in the QLineEdit and watch the console for greetings.
<syntaxhighlight lang="python" line='line'>
# Create layout and add widgets
layout = QVBoxLayout()
layout.addWidget(self.edit)
layout.addWidget(self.button)
# Set dialog layout
self.setLayout(layout)
</syntaxhighlight>
 
So, we create the layout, add the widgets with '''addWidget()''', and finally we say that our Form will have our QVBoxLayout as its layout.
 
== Create the function to greet and connect the button ==
Finally, we just have to add a function to our custom Form- the one which will greet the user - and connect our button to it.
Our function will be a part of the Form, so you have to add it after the '''init'''() function:
 
<syntaxhighlight lang="python" line='line'>
# Greets the user
def greetings(self):
    print ("Hello {}".format(self.edit.text()))
</syntaxhighlight>
 
Our function just writes the contents of the QLineEdit to the python console.
We have access to the text by means of the '''QLineEdit.text()''' method.
 
Now that we have everything, we just need to connect the QPushButton to the '''Form.greetings()''' method.
In the '''init'''() method we just need to add:


=== Things you can do: ===
<syntaxhighlight lang="python" line='line'>
# Add button signal to greetings slot
self.button.clicked.connect(self.greetings)
</syntaxhighlight>


* Instead of showing your name in the python console, can you show your name in a popup message box? Check the detailed description of QMessageBox in the &quot;PySide online reference&amp;quot;:http://www.pyside.org/docs/pyside/PySide/QtGui/QMessageBox.html
Once executed, you can insert your name in the QLineEdit and watch the console for greetings.
* Can you add a Icon to the window? Check the description of QWidget in the &quot;PySide online reference&amp;quot;:http://www.pyside.org/docs/pyside/PySide/QtGui/QWidget.html
* What about adding a button to close? Just create a new button, add it to the layout and connect it to the '''exit''' slot.
* You can also change the layout to horizontal! You do it with QHBoxLayout. Check other layouts in the &quot;PySide online reference&amp;quot;:http://www.pyside.org/docs/pyside/PySide/QtGui/index.html such as '''QHBoxLayout''', '''QGridLayout''' among others.


== Full Code ==
== Full Code ==
Line 49: Line 92:
Here is the full code for this tutorial:
Here is the full code for this tutorial:


<code><br />#!/usr/bin/python<br /># <s>'''- coding: utf-8 -'''</s>
<syntaxhighlight lang="python" line='line'>
#!/usr/bin/python
# -'''- coding: utf-8 -'''-


import sys<br />from PySide.QtCore import *<br />from PySide.QtGui import *
import sys
from PySide2.QtWidgets import (QLineEdit, QPushButton, QApplication,
    QVBoxLayout, QDialog)


class Form(QDialog):
class Form(QDialog):


def ''init''(self, parent=None):<br /> super(Form, self).''init''(parent)<br /> # Create widgets<br /> self.edit = QLineEdit(&quot;Write my name here&amp;quot;)<br /> self.button = QPushButton(&quot;Show Greetings&amp;quot;)<br /> # Create layout and add widgets<br /> layout = QVBoxLayout()<br /> layout.addWidget(self.edit)<br /> layout.addWidget(self.button)<br /> # Set dialog layout<br /> self.setLayout(layout)<br /> # Add button signal to greetings slot<br /> self.button.clicked.connect(self.greetings)
    def __init__(self, parent=None):
        super(Form, self).__init__(parent)
        # Create widgets
        self.edit = QLineEdit("Write my name here")
        self.button = QPushButton("Show Greetings")
        # Create layout and add widgets
        layout = QVBoxLayout()
        layout.addWidget(self.edit)
        layout.addWidget(self.button)
        # Set dialog layout
        self.setLayout(layout)
        # Add button signal to greetings slot
        self.button.clicked.connect(self.greetings)


# Greets the user<br /> def greetings(self):<br /> print (&quot;Hello s&amp;quot; self.edit.text())
    # Greets the user
    def greetings(self):
        print ("Hello %s" % self.edit.text())


if ''name'' == '''main''':<br /> # Create the Qt Application<br /> app = QApplication(sys.argv)<br /> # Create and show the form<br /> form = Form()<br /> form.show()<br /> # Run the main Qt loop<br /> sys.exit(app.exec_())
if __name__ == '__main__':
    # Create the Qt Application
    app = QApplication(sys.argv)
    # Create and show the form
    form = Form()
    form.show()
    # Run the main Qt loop
    sys.exit(app.exec_())
</syntaxhighlight>

Latest revision as of 08:56, 18 April 2018

Creating a simple PySide2 dialog application

In this tutorial we will show how to build a simple dialog with some basic widgets. The idea is that the user inserts his name in a QLineEdit, clicks a QPushButton and sees greetings.

Let us just start with a simple stub which creates and shows a dialog. This stub will be updated in the course of this tutorial but you can use this stub to your own PySide2 projects if you need to.

import sys
from PySide2.QtWidgets import QApplication, QDialog, QLineEdit, QPushButton

class Form(QDialog):

    def __init__(self, parent=None):
        super(Form, self).__init__(parent)
        self.setWindowTitle("My Form")


if __name__ == '__main__':
    # Create the Qt Application
    app = QApplication(sys.argv)
    # Create and show the form
    form = Form()
    form.show()
    # Run the main Qt loop
    sys.exit(app.exec_())

The imports aren't new to you, the same for the creation of the QApplication and the execution of the Qt main loop. The only novelty here is the class definition.

You can create any class which subclasses PySide2 widgets. In this case, we are just subclassing the QDialog to do our custom dialog which we've called "Form". We have also implemented the init() method which calls the QDialog init method with the parent widget, if any. Also new, is the setWindowTitle() which just sets the title of the dialog window. Also, in main(), you can see that we are creating a Form object, and showing it to the world.

Create the widgets

We are going to create two widgets a QLineEdit where the user can insert his name, and a QPushButton which we will use to print the contents of the QLineEdit. So, we are going to add the following code to the init() method of our Form:

# Create widgets
self.edit = QLineEdit("Write my name here..")
self.button = QPushButton("Show Greetings")

As should be intuitive by now, both widgets will show the corresponding texts.

Create a layout to organize the widgets

Qt comes with some layouts which helps the user on the organization of his widgets on an application. In this case, we will make it simple and create a QVBoxLayout which will distribute the widgets vertically. The following code will be added also to the init() method, after the creation of the widgets:

# Create layout and add widgets
layout = QVBoxLayout()
layout.addWidget(self.edit)
layout.addWidget(self.button)
# Set dialog layout
self.setLayout(layout)

So, we create the layout, add the widgets with addWidget(), and finally we say that our Form will have our QVBoxLayout as its layout.

Create the function to greet and connect the button

Finally, we just have to add a function to our custom Form- the one which will greet the user - and connect our button to it. Our function will be a part of the Form, so you have to add it after the init() function:

# Greets the user
def greetings(self):
    print ("Hello {}".format(self.edit.text()))

Our function just writes the contents of the QLineEdit to the python console. We have access to the text by means of the QLineEdit.text() method.

Now that we have everything, we just need to connect the QPushButton to the Form.greetings() method. In the init() method we just need to add:

# Add button signal to greetings slot
self.button.clicked.connect(self.greetings)

Once executed, you can insert your name in the QLineEdit and watch the console for greetings.

Full Code

Here is the full code for this tutorial:

#!/usr/bin/python
# -'''- coding: utf-8 -'''-

import sys
from PySide2.QtWidgets import (QLineEdit, QPushButton, QApplication,
    QVBoxLayout, QDialog)

class Form(QDialog):

    def __init__(self, parent=None):
        super(Form, self).__init__(parent)
        # Create widgets
        self.edit = QLineEdit("Write my name here")
        self.button = QPushButton("Show Greetings")
        # Create layout and add widgets
        layout = QVBoxLayout()
        layout.addWidget(self.edit)
        layout.addWidget(self.button)
        # Set dialog layout
        self.setLayout(layout)
        # Add button signal to greetings slot
        self.button.clicked.connect(self.greetings)

    # Greets the user
    def greetings(self):
        print ("Hello %s" % self.edit.text())

if __name__ == '__main__':
    # Create the Qt Application
    app = QApplication(sys.argv)
    # Create and show the form
    form = Form()
    form.show()
    # Run the main Qt loop
    sys.exit(app.exec_())