Berkenalan dengan PyQt4: Widget dan Signal-Slot

Widget

Nah, sekarang kita belajar untuk menambahkan komponen tambahan ke dalam jendela utama aplikasi kita. Komponen ini dalam Qt dikenal sebagai widgets. Sebagai contoh saya akan menambahkan satu buah widget ke dalam jendela utama.

Oh ya, sebelumnya saya belum bilang ya, aplikasi apa yang mau dibuat? Saya ingin membuat aplikasi sederhana untuk menampilkan halaman twitter saya. Alasannya sih: untuk belajar PyQt, juga karena saya malas install twitter client yang umumnya berbasis Adebe AIR. Canggih sih Adobe AIR cuma instalasinya gede. Selain itu karena di komputer saya memang sudah ada python dan PyQt4.

Saya akan menambahkan satu buah widget: QWebView yaitu widget untuk menampilkan halaman web, sebuah widget dasar untuk membuat browser web.

Kodenya:

import sys

from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
from PyQt4.QtNetwork import *

class JendelaUtama(QMainWindow):
    def __init__(self, parent=None):
        super(JendelaUtama, self).__init__(parent)
        self.createMenu() # bikin menu
        self.websettings = QWebSettings #setting untuk browser web
        self.websettings = {
                            'JavascriptEnabled': True, 
                            'AutoLoadImages': True}
        #widget untuk menampilkan halaman web: QWebView
        self.twitterView = QWebView(self)
        self.twitterView.load(QUrl('http://twitter.com/login'))
        self.setCentralWidget(self.twitterView)
        self.setWindowTitle("TwitBrow")
        
        self.connect (self.twitterView.page().networkAccessManager(), 
                      SIGNAL("sslErrors (QNetworkReply *, const QList<QSslError> &)"), 
                      self.sslErrorHandler) 
    
    def createMenu(self):
        self.programMenu = self.menuBar().addMenu("&Program")
        self.bantuanMenu = self.menuBar().addMenu("&Bantuan")
        # bikin action (aksi yang akan dilakukan lewat menu)
        tentangAction = self.createAction("&Tentang Program", self.bantuanTentang)
        keluarAction = self.createAction("&Keluar",  self.close)
        # tambahkan aksi ke menu
        self.bantuanMenu.addAction(tentangAction)
        self.programMenu.addAction(keluarAction)
        
    def createAction(self,  text,  slot=None,  shortcut=None,  icon=None, 
                     tip=None,  checkable=False,  signal="triggered()"):
        action = QAction(text,  self)
        if icon is not None:
            action.setIcon(QIcon(":/%s.png" % icon))
        if shortcut is not None:
            action.setShortcut(shortcut)
        if tip is not None:
            action.setToolTip(tip)
            action.setStatusTip(tip)
        if slot is not None:
            self.connect(action,  SIGNAL(signal),  slot)
        if checkable:
            action.setCheckable(True)
        return action
    
    def sslErrorHandler(self, reply, errorList): 
        reply.ignoreSslErrors()
        print 'SSL errors ignored'
        
    def bantuanTentang(self):
        QMessageBox.about(self, "Tentang Program", 
        '''<b>TwitBrow</b>, Twitter Browser, 
        Hak Cipta, 2010, @bangmico''')


if __name__=='__main__':
    twitbrow = QApplication(sys.argv)
    jendelaUtama = JendelaUtama()
    jendelaUtama.show()
    sys.exit(twitbrow.exec_())

view rawtwitbrow.pyThis Gist brought to you by GitHub.

Catatan: saya membuat fungsi tersediri untuk membuat menu, sehingga kode intinya nggak terlalu 'ramai'. Kode untuk menambahkan widgetnya sih sebetulnya cuma:

        self.websettings = QWebSettings #setting untuk browser web
        self.websettings = {
                            'JavascriptEnabled': True, 
                            'AutoLoadImages': True}
        #widget untuk menampilkan halaman web: QWebView
        self.twitterView = QWebView(self)
        self.twitterView.load(QUrl('http://twitter.com/login'))
        self.setCentralWidget(self.twitterView)

view rawgistfile1.pyThis Gist brought to you by GitHub.

Nah, hasilnya seperti ini:

Hehehe, lumayan.... punya Twitter Browser sendiri...

Catatan:
Agar aplikasi di atas dapat berjalan baik, maka di komputer kita perlu terinstall pula OpenSSL

Signal - Slot

Nah, sekarang mau bicara sedikit mengenai signal-slot. Kalau diperhatikan dalam kode yang saya tulis ada:

self.connect(...)

Bagian kode itu itu fungsinya menghubungkan antara signal dengan slot.

Signal dan slot. Apa itu? Intinya, setiap widget/komponen memancarkan semacam sinyal apalagi pengguna melakukan tindakan atas komponen itu. Misalnya widget button/tombol tindakan yang pengguna lakukan adalah meng-klik tombol tersebut. Saat pengguna meng-klik tombol, maka widget button akan memancarkan sinyal "clicked()" ke sistem. Sinyal tersebut lalu akan 'ditangkap' oleh sistem dan dimasukkan ke dalam sebuah slot. Slot secara sederhana adalah tindakan sesuai sinyal yang bersangkutan. Analoginya seperti sistem anak kunci dan kunci deh, gan. Sinyal sebagai anak kuncinya, sedangkan slot sebagai kuncinya.

Contoh, misalnya kita membuat sebuah tombol 'Keluar' dalam jendela dialog dan kemudian menghubungkan tombol itu dengan fungsi keluar():

tombolKeluar = QtGui.QPushButton("Keluar", self)
self.connect(tombolKeluar, QtCore.SIGNAL("clicked()"), self.keluar())

view rawgistfile1.pyThis Gist brought to you by GitHub.

Sedangkan fungsi keluar() nya:

def keluar(self):
    print "Ok, deh saya tutup jendelanya"
    self.close()

view rawgistfile1.pyThis Gist brought to you by GitHub.

Posted in: python