QYolk II - Containers

How to use a Tab Widget

In this tutorial we will use one of Containers widgets - Tab Widget. In the first part of the QYolk tutorial we ended up with a GUI like this:

No we will use a Tab Widget to show in 3 tabs all packages, active and not active packages. In QTDesigner drag and drop the Tab Widget on the window and then place the tree widget with package list on the first tab window. Not that when you want to place a widget in a container box/window that box/window will be highlighted. If you want to place a widget on the main window - the whole window will be highlighted:

By default we will get two tabs, and to add the third one right-click on the tab widget and select "Insert Page" option from the menu. By selecting each tab you will be able to change tab text in the "Property Editor" under "currentTabText". Copy and paste (CTRL+C i CTRL+V) the tree widget from the first tab to the second and third tab to get something like:

I named QTabWidget as "pkgTabs". QWidgetTree for all packages I changed from "treeList" to "allList", QWidgetTree for the list of active packages I named as "activeList", and for not active as "notActiveList". Visible on the screens label (QLabel) is named "infoLabel" (and it is unused at this time). As for start.py we have to rename "treeList" to "allList" and add to __init__ code which will insert data to the new tree widgets:

# -*- coding: utf-8 -*-
import sys
from PyQt4 import QtCore, QtGui
from qyolk import Ui_QYolk
from yolk import yolklib

class StartQT4(QtGui.QMainWindow):
	def __init__(self, parent=None):
		QtGui.QWidget.__init__(self, parent)
		self.ui = Ui_QYolk()
		self.ui.setupUi(self)
		# set the widths of the columns
		################
		# All packages
		################
		self.ui.allList.setColumnWidth(0,200)
		self.ui.allList.setColumnWidth(1,100)
		# generator which retuns list of installed packages
		packages = yolklib.Distributions()
		for pkg in packages.get_distributions('all'):
			a = QtGui.QTreeWidgetItem(self.ui.allList)
			pk = str(pkg[0]).split(' ')
			if pkg[1]:
				status = 'Active'
			else:
				status = 'Not Active'
				a.setTextColor(0, QtGui.QColor(128, 128, 128))
				a.setTextColor(1, QtGui.QColor(128, 128, 128))
				a.setTextColor(2, QtGui.QColor(128, 128, 128))
			a.setText(0, pk[0])
			a.setText(1, pk[1])
			a.setText(2, status)
		################
		# Active Packages
		################
		# set the widths of the columns
		self.ui.activeList.setColumnWidth(0,200)
		self.ui.activeList.setColumnWidth(1,100)
		# generator which retuns list of active packages
		for pkg in packages.get_distributions('active'):
			a = QtGui.QTreeWidgetItem(self.ui.activeList)
			pk = str(pkg[0]).split(' ')
			a.setText(0, pk[0])
			a.setText(1, pk[1])
			a.setText(2, 'Active')
		################
		# Not Active Packages
		################
		# set the widths of the columns
		self.ui.notActiveList.setColumnWidth(0,200)
		self.ui.notActiveList.setColumnWidth(1,100)
		# generator which retuns list of not active packages
		for pkg in packages.get_distributions('nonactive'):
			a = QtGui.QTreeWidgetItem(self.ui.notActiveList)
			pk = str(pkg[0]).split(' ')
			a.setText(0, pk[0])
			a.setText(1, pk[1])
			a.setText(2, 'Not Active')
	
if __name__ == "__main__":
	app = QtGui.QApplication(sys.argv)
	myapp = StartQT4()
	myapp.show()
	sys.exit(app.exec_())

And we are done:

Singals and Slots with parameters

QTabWidget has a signal currentChanged which will be send when you change a tab. Note the documentation:

void currentChanged (int)

This signal has a parameter (integer). Until now we used signals with no parameters. In this case the "int" will be ID of the selected tab counting from 0. We connect the signal with a slot the usual way, but we add the parameters in ():

QtCore.QObject.connect(self.ui.pkgTabs,QtCore.SIGNAL("currentChanged(int)"), self.tab_change)

def tab_change(self, tab_id):
	print tab_id

tab_id is a argument (our name), which will store the selected widget ID number. First signal parameter is mapped to the first argument of the slot and so on. We can use this signal to change the label text based on the tab which have been selected":

# -*- coding: utf-8 -*-
import sys
from PyQt4 import QtCore, QtGui
from qyolk import Ui_QYolk
from yolk import yolklib

class StartQT4(QtGui.QMainWindow):
	def __init__(self, parent=None):
		QtGui.QWidget.__init__(self, parent)
		self.ui = Ui_QYolk()
		self.ui.setupUi(self)
		# set the widths of the columns
		################
		# All packages
		################
		self.ui.allList.setColumnWidth(0,200)
		self.ui.allList.setColumnWidth(1,100)
		# generator which retuns list of installed packages
		packages = yolklib.Distributions()
		for pkg in packages.get_distributions('all'):
			a = QtGui.QTreeWidgetItem(self.ui.allList)
			pk = str(pkg[0]).split(' ')
			if pkg[1]:
				status = 'Active'
			else:
				status = 'Not Active'
				a.setTextColor(0, QtGui.QColor(128, 128, 128))
				a.setTextColor(1, QtGui.QColor(128, 128, 128))
				a.setTextColor(2, QtGui.QColor(128, 128, 128))
			a.setText(0, pk[0])
			a.setText(1, pk[1])
			a.setText(2, status)
		################
		# Active Packages
		################
		# set the widths of the columns
		self.ui.activeList.setColumnWidth(0,200)
		self.ui.activeList.setColumnWidth(1,100)
		# generator which retuns list of active packages
		for pkg in packages.get_distributions('active'):
			a = QtGui.QTreeWidgetItem(self.ui.activeList)
			pk = str(pkg[0]).split(' ')
			a.setText(0, pk[0])
			a.setText(1, pk[1])
			a.setText(2, 'Active')
		################
		# Not Active Packages
		################
		# set the widths of the columns
		self.ui.notActiveList.setColumnWidth(0,200)
		self.ui.notActiveList.setColumnWidth(1,100)
		# generator which retuns list of not-active packages
		for pkg in packages.get_distributions('nonactive'):
			a = QtGui.QTreeWidgetItem(self.ui.notActiveList)
			pk = str(pkg[0]).split(' ')
			a.setText(0, pk[0])
			a.setText(1, pk[1])
			a.setText(2, 'Not Active')
		
		# Signals
		QtCore.QObject.connect(self.ui.pkgTabs,QtCore.SIGNAL("currentChanged(int)"), self.tab_change)
	def tab_change(self, tab_id):
		if tab_id == 0:
			self.ui.infoLabel.setText('<b>QYolk</b>: Browsing all installed cheeseshop packages')
		elif tab_id == 1:
			self.ui.infoLabel.setText('<b>QYolk</b>: Browsing active packages')
		elif tab_id == 2:
			self.ui.infoLabel.setText('<b>QYolk</b>: Browsing not active packages (older versions)')
	
if __name__ == "__main__":
	app = QtGui.QApplication(sys.argv)
	myapp = StartQT4()
	myapp.show()
	sys.exit(app.exec_())

I used the self.ui.infoLabel.setText to change the label text. Our QYolk application has more features and in next tutorials we will add even more.

Download

Download Sources

RkBlog

PyQt and GUI, 14 July 2008, Piotr Maliński