Cara membuat splitter pada window GUI python menggunakan PySide

Belajarpython - assalamualaikume wr. wb.

Jumpa lagi nih temen - temen... Pada postingan kali ini saya akanmembahasa masalah GUI python lagi nih.. GUI python yang akan saya bangun kali ini adalah GUI yang menggunakan library tambahan. Yaitu library yang bernama PySide. Karena library ini merupakan sebuah library tambahan, maka tentu saja kalian harus menginstall nya secara terpisah dengan python nya sendiri. Nah bagi kalian yang belum menginstall Library PySide ini, tenang saja.. Saya sudah membuat postingan yang membahas tutorial penginstalan pyside ini.. Dan tentu saja caranya cukup mudah ya.. Nah jika kalian ingin membaca postingan tersebut kalian BISA KLIK DISINI.

Nah setelah menginstall library PySide nya, maka sekarang saya akan melnjutkan postingan saya kali ini... Jadi, pada postingan kali ini saya akan membahas mengenai cara untuk membuat sebuah frame yang akan saya tambahkan dengan sebuah pembatas diantara 2 buah spliter atau pemisah.. Nah tanpa lama - lama lagi, yuk langsung saja kita simak sama - sama postingan saya yang satu ini...

Apa itu pemisah atau splitter ?

Nah sebelum melanjutkan postingan ini ke tahap proses pembuatannya, saya akan mencoba menjelaskan terlebih dahulu mengenai apa yang saya maksud dengan splitter ini. Sehingga kalian tidak akan kebingungan mengartikan kata splitter jika saya menyebutnya dalam postingan saya kali ini. Sehingga akan membuat kalian lebih paham tentunya..

Jadi splitter ini bisa kita katakan sebagai sebuah pemisah. Dimana setiap pemisah tentu saja fungsinya untuk memisahkan. Dan pada postingan saya kali ini, saya akan memanfaatkan splitter ini sebagai pemisah frame yang akan saya tampilkan pada window kita nantinya. Oya untuk lebih memahami mengenai apa yang di maksud dengan splitter ini, berikut saya sertakan contoh screenshoot mengenai splitter ini... Yuk silahkan lihat screenshoot nya di bawah ini...


Nah itu dia temen - temen contoh dari splitter ini.. Sudah taukan yang mana ? Hehe.. Bisa kita lihat pada screenshoot diatas... Di tengah - tengah 2 buah toolbar tersebut terdapat 1 buah garis yang memisahkan keduanya... Nah itulah yang saya sebut sebagai sebuah splitter atau pemisah.... Nah sudah jelaskan temen - temen ? Ya saya rasa sudah cukup jelas ya...

Cara membuat splitter pada GUI window Python menggunakan library PySide.

Nah setelah kita mengetahui apa yang di maksud dengan splitter ini, yuk sekarang lanjutkan ke proses pembuatannya... Nah seperti apa ya kira - kira cara membuatnya ? Apakah kalian sudah memiliki gambaran ? Tak perlu menjawab dua pertanyaan tadi... Hehe.. Yuk langsung saja kita simak sama - sama code programnya di bawah ini...

from PySide import QtGui, QtCore

class splitterPadaFrame(QtGui.QWidget):
    
    def __init__(self):
        super(splitterPadaFrame, self).__init__()
        
        self.initUI()
        
    def initUI(self):
        self.horizontalLayout = QtGui.QHBoxLayout(self)

        self.pembuatanFrame()
        self.pembuatanSplitter()

        self.setLayout(self.horizontalLayout)

        QtGui.QApplication.setStyle(QtGui.QStyleFactory.create('Cleanlooks'))
        
        self.setGeometry(300, 300, 300, 200)
        self.setWindowTitle('Splitter pada sebuah Frame')

    def pembuatanFrame(self):
        self.atasKiri = QtGui.QFrame(self)
        self.atasKiri.setFrameShape(QtGui.QFrame.StyledPanel)

        self.atasKanan = QtGui.QFrame(self)
        self.atasKanan.setFrameShape(QtGui.QFrame.StyledPanel)

        self.bawah = QtGui.QFrame(self)
        self.bawah.setFrameShape(QtGui.QFrame.StyledPanel)

    def pembuatanSplitter(self):
        self.splitter1 = QtGui.QSplitter(QtCore.Qt.Horizontal)
        self.splitter1.addWidget(self.atasKiri)
        self.splitter1.addWidget(self.atasKanan)

        self.splitter2 = QtGui.QSplitter(QtCore.Qt.Vertical)
        self.splitter2.addWidget(self.splitter1)
        self.splitter2.addWidget(self.bawah)

        self.horizontalLayout.addWidget(self.splitter2)

if __name__ == '__main__':
    import sys
    app = QtGui.QApplication(sys.argv)
    splitter = splitterPadaFrame()
    splitter.show()
    sys.exit(app.exec_())



Nah itu dia temen - temen contoh program dari pembuatan splitter ini... Cukup panjang ya temen - temen.. Hehe..  Tapi walaupun cukup panjang, semoga program diatas dapat membuat kalian mudah untuk memahaminya ya... Oya.. Lalu seperti apakah jika program diatas saya jalankan ? Dan gimana GUI window yang di hasilkan dari program diatas ? Nah gak perlu saya jawab pertanyaan diatas.. Karena saya sudah menyiapkan contoh screenshoot nya di bawah ini temen - temen... Yuk langsung saja kita simak sama - sama contoh screenshoot nya di bawah ini...


nah itu dia temen - temen contoh screenshootnya.. Bisa kita lihat disana ada 3 buah frame yang dipisahkan oleh 2 slider sekaligus... Yaitu horizontal dan vertikal... Gimana ? Sudah jelas kan ya ? Ya saya rasa sudah cukup jelas ya temen - temen..

Penjelasan program untuk membuat splitter pada GUI window Python menggunakan library PySide.

Nah setelah saya membagikan code programnya, selanjutnya saya akan mencoba untuk menjelaskan program yang sudah saya bagikan tersebut.. Hal ini bertujuan agar dapat mempermudah proses pemahaman kalian terhadap program yang saya bagikan pada postingan kali ini.. Sehingga untuk selanjutnya kalian dapat mengimplementasikan pembuatan splitter ini pada program - program yang lainnya... Yuk tanpa lama - lama lagi langsung saja kita simak penjelasan saya di bawah ini....



from PySide import QtGui, QtCore  //code ini digunakan untuk mengimpor QtGui dan QtCore dari library PySide.

class splitterPadaFrame(QtGui.QWidget):  //code ini berfungsi untuk membuat sebuah class dengan nama “splitterPadaFrame” yang akan saya gunakan untuk menampung semua code program untuk membuat semua elemen pada window yang akan kita tampilkan nantinya.

    def __init__(self):  //ini merupakan sebuah konstruktor yang akan di jalankan secara otomatis dan yang akan dijalankan pertama kali ketika class “splitterPadaFrame” ini kita panggil nantinya.
        super(splitterPadaFrame, self).__init__()  //code ini digunakan untuk membuat Class “splitterPadaFrame” ini menjadi sebuah GUI.

        self.initUI()  //code ini digunakan untuk memanggil sebuah metode yang bernama “initUI”.

    def initUI(self):  //code ini merupakan sebuah metode yang akan saya gunakan untuk menampung code program yang akan mengatur window yang akan kita tampilkan nantinya.
        self.horizontalLayout = QtGui.QHBoxLayout(self)  //code ini digunakan untuk memanggil memanggil sebuah layout horizontal dari library PySide lalu menampungnya di dalam variabel yang bernama “horizontal layout”

        self.pembuatanFrame()  //code ini digunakan untuk memanggil sebuah metode yang bernama “pembuatanFrame”.
        self.pembuatanSplitter()  //code ini digunakan untuk memanggil sebuah metode yang bernama “pembuatanSplitter”.


        self.setLayout(self.horizontalLayout)  //code ini digunakan untuk mengatur atau menyetel layout window kita menjadi “horizontal”.

        QtGui.QApplication.setStyle(QtGui.QStyleFactory.create('Cleanlooks'))  //code ii digunakan untk mengubah gaya atau style dari frame kita nantinya. Untuk lebih memahami efek dari code program yang satu ini, silahkan hapus code ini lalu jalankan dan bandingkan.
       
        self.setGeometry(300, 300, 300, 200)  // code ini digunakan untuk mengatur lebar window kita nantinya. Dengan ukuran “200x300” dan akan di tampilkan pada layer kita dengan posisi “300x300” dan tentu saja kalian bisa mengubahnya sesuka hati kalian.
        self.setWindowTitle('Splitter pada sebuah Frame')  //code ini digunakan untuk mengatur judul dari window kita. Menjadi “splitter pada sebuah frame” yang tentu saja bisa kalian rubah sesuka hati kalian.

    def pembuatanFrame(self):  //ini merupakan sebuah metode yang saya buat untuk
        self.atasKiri = QtGui.QFrame(self)  //code ini digunakan untuk memanggil sebuah “frame” dari library pyside. Dan saya tampung dalam variabel yang bernama “atasKiri”.
        self.atasKiri.setFrameShape(QtGui.QFrame.StyledPanel)  //code ini digunakan untuk mengatur gaya atau style dari frame “atasKiri” yang akan kita tampilkan nantinya.

        self.atasKanan = QtGui.QFrame(self)  //code ini digunakan untuk memanggil sebuah “frame” dari library pyside. Dan saya tampung dalam variabel yang bernama “atasKanan”.
        self.atasKanan.setFrameShape(QtGui.QFrame.StyledPanel)  //code ini digunakan untuk mengatur gaya atau style dari frame “atasKanan” yang akan kita tampilkan nantinya.

        self.bawah = QtGui.QFrame(self)  //code ini digunakan untuk memanggil sebuah “frame” dari library pyside. Dan saya tampung dalam variabel yang bernama “bawah”.
        self.bawah.setFrameShape(QtGui.QFrame.StyledPanel)  //code ini digunakan untuk mengatur gaya atau style dari frame “bawah” yang akan kita tampilkan nantinya.

    def pembuatanSplitter(self):  //code ini digunakan untuk membuat sebuah metode yang bernama “pembuatanSplitter” yang akan saya gunakan untuk menampung code - code program untuk pembuatan splitter nantinya.
        self.splitter1 = QtGui.QSplitter(QtCore.Qt.Horizontal)  //code ini digunakan untuk memanggil sebuah splitter horizontal dari library pyside. Dan saya menampungnya ke dalam sebuah variabel bernama “splitter1”
        self.splitter1.addWidget(self.atasKiri)  //code ini saya gunakan untuk menambahkan frame “atasKiri” di samping splitter.
        self.splitter1.addWidget(self.atasKanan)  //code ini saya gunakan untuk menambahkan frame “atasKanan” di samping splitter.

        self.splitter2 = QtGui.QSplitter(QtCore.Qt.Vertical)   //code ini digunakan untuk memanggil sebuah splitter vertical dari library pyside. Dan saya menampungnya ke dalam sebuah variabel bernama “splitter2”
        self.splitter2.addWidget(self.splitter1)  //code ini saya gunakan untuk menambahkan “splitter1” di diatas splitter.
        self.splitter2.addWidget(self.bawah)  //code ini saya gunakan untuk menambahkan frame “bawah” di samping splitter.

        self.horizontalLayout.addWidget(self.splitter2)  //code ini saya gunakan untuk menambahkan “splitter2” di diatas splitter.

if __name__ == '__main__':  //ini merupakan penyeleksian yang akan menanyakan apakah program ini dipanggil atau tidak.
    import sys  //code ini digunakann untuk mengimpor sys
    app = QApplication(sys.argv) //code ini merupakan code wajib yang harus ada.

    splitter = splitterPadaFrame()  //code ini digunakan untuk memanggil class mywidget yang sudah kita buat tadi.
    myWidget.show() //code ini digunakan untuk menampilkan GUI Window yang sudah kita buat tadi.

    sys.exit(app.exec_()) //code ini digunakan agar window kita tidak langsung close saat kita panggil.



Nah itu dia temen - temen penjelasan saya mengenai program yang sudah saya bagikan sebelumnya.. Semoga penjelasannya dapat membuat kalian lebih memahami dari program yang sudah saya bagikan tadi ya... Seperti harapan saya yang sudah saya sebutkan tadi...
Oya jika ada yang ingin kalian tanyakan mengenai program atau postingan yang saya bagikan pada postingan kali ini, kalian bisa menanyakannya langsung pada kolom komentar yang ada di bawah postingan ini.. Jika saya online, insyaallah saya akan menjawabnya secepat mungkin dan sebisa saya... Dan bagi kalian yang memiliki kritik dan saran mengenai postingan ini maupun blog ini, kalian bisa sampaikan pada kolom komentar, atau laman hubungi kami yang ada pada blog ini...


Oke, sekian dulu ya temen - temen pembahasan mengenai cara menambahkan splitter ini.. Semoga postingan kali ini bisa bermanfaat bagi kalian. Terutama bagi kalian yang membutuhkan referensi belajar.. Oya jangan lupa di share ya temen - temen.. Biar penyebaran postingan ini lebih luas.. Oke, terimakasih ya sudah membaca dan mengunjungi blog saya... Dan terimakasih banyak bagi kalian yang sudah share... Mohon maaf bila ada kesalahan maupun ketidak jelasan dalam postingan ini... Karena saya masih belajar.. Jadi harap maklum ya.. Sekian dan terimakasih.

Wassalamuaalaikum wr. wb.
Previous
Next Post »
Thanks for your comment