In this post we will talk about how to use Qt Creator to add widgets to MainForm.ui

Go to ‘/player/ui/MainForm.ui’ and open it with Qt Creator. Drag and drop 3 QHBoxLayouts onto the form, and then left click the form and select Lay out> Lay out vertically

Drag a QWebView and a QListView in the first QHBoxLayout. On the second Layout drag 7 QPushButton and on the third drag a QLabel, QLineEdit and a QPushButton.

The QWebBrowser will show the video, the QListView will be the playlist, the 7 QPushButton will be buttons for play, stop, save, open, shuffle, delete and clear. The other button will add to then playlist video from the link in then QLineEdit.

In the bottom-right corner of the screen you have the properties toolbox. There you should change the names of the widgets to something more expressive, like, for the button that adds the video in the playlist, we’ll set the objectName property from “pushButton” to: “addButton”, and it’s text to “Add”. Set the text of the QLabel to “URL:”, and set names and text for all the other buttons(playButton, stopButton, openButton, saveButton, shuffleButton, deleteButton, clearButton). Also from properties you can add icons to the other buttons and play around with the minimumSize and maximumSize of your widgets. It’s all about how much you want to customize your GUI.

When you are done, save and open a terminal, browse to the folder which contains the project (‘/player’) and run the scrips I mentioned in the previous post

pyside-uic ui/MainForm.ui > src/
pyside-rcc res/res.qrc > src/

or run my Bash script if you are using Linux, or any other script you made yourself. As a result, in the ‘/src’ folder you’ll see 2 new files: ‘’ and ‘’.

You can download the files we have until now from here:

I’ve also made a video for this part of the tutorial:

In the next post we’re going to finally write some code 🙂

Next post: The Code

This entry was posted in PySide, Python, TubePlayer and tagged , , , , , , , . Bookmark the permalink.

2 Responses to GUI

  1. Pingback: Getting Started | CodeForce

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s