Layout management in PyGTK

عندما نصمم واجهة لتطبيق نقرر ماالويدجات اللتى سنستخدمها وكيفية تنظيمهم، وللتنظيم يوجد ويدجات خفية "حاويات" مسئولة عن ادارة المخططات. فى هذا الفصل سنذكر Alignment و Fixed و Vbox و table

Fixed

الحاوية fixed نقوم فيها بوضع الأبناء فى امكان محدد وبمساحة محددة، لايقوم بأى ادارة تلقائية على الإطلاق لذا لانستخدمه فى الغالب الا فى بعض الأحيان مثل الألعاب او التطبيقات الخاصة بالdiagrams، المكونات القابلة للتحجيم والتحريك ك chart فى تطبيق سبريدشيت، امثلة تعليمية

fixed.py

#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example demonstrates a Fixed
# container widget
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk
import sys


class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()

        self.set_title("Fixed")
        self.set_size_request(300, 280)
        self.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(6400, 6400, 6440))
        self.set_position(gtk.WIN_POS_CENTER)

        try:
            self.bardejov = gtk.gdk.pixbuf_new_from_file("bardejov.jpg")
            self.rotunda = gtk.gdk.pixbuf_new_from_file("rotunda.jpg")
            self.mincol = gtk.gdk.pixbuf_new_from_file("mincol.jpg")
        except Exception, e:
            print e.message
            sys.exit(1)
        
        
        image1 = gtk.Image()
        image2 = gtk.Image()
        image3 = gtk.Image()
        
        image1.set_from_pixbuf(self.bardejov)
        image2.set_from_pixbuf(self.rotunda)
        image3.set_from_pixbuf(self.mincol)
               
        fix = gtk.Fixed()
           
        fix.put(image1, 20, 20)
        fix.put(image2, 40, 160)
        fix.put(image3, 170, 50)

        self.add(fix)

        self.connect("destroy", gtk.main_quit)
        self.show_all()
        

PyApp()
gtk.main()

فى المثال نعرض 3 صور ونحدد يدويا قيم احداثيات س و ص ومكان عرض تلك الصور

 self.modify_bg(gtk.STATE_NORMAL, gtk.gdk.Color(6400, 6400, 6440))

لرؤية افضل نقوم بتعديل الخلفية لرمادى غامق

 self.bardejov = gtk.gdk.pixbuf_new_from_file("bardejov.jpg")

نحصل على الصورة من القرص بإستخدام كائن Gdk.Pixbuf

 image1 = gtk.Image()
 image2 = gtk.Image()
 image3 = gtk.Image()
        
 image1.set_from_pixbuf(self.bardejov)
 image2.set_from_pixbuf(self.rotunda)
 image3.set_from_pixbuf(self.mincol)

الصف Image يستخدم فى عرض الصور ويتم تحديدها عن طريق الطريقة set_from_pixbuf التى تأخذ كائن Gdk.Pixbuf

 fix = gtk.Fixed()

ننشئ الحاوية

 fix.put(image1, 20, 20)

نضع الصورة الأولى عند 20و 20

 self.add(fix)

نجعل الحاوية fix هى الحاوية الأساسية للنافذة

Fixed

Figure: Fixed

Alignment

يستخدم الحاوية Alignment فى التحكم فى المحاذاة والمساحة للأبن

alignment.py

#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows how to use
# the Alignment widget
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk


class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()

        self.set_title("Alignment")
        self.set_size_request(260, 150)
        self.set_position(gtk.WIN_POS_CENTER)

        vbox = gtk.VBox(False, 5)
        hbox = gtk.HBox(True, 3)
        
        valign = gtk.Alignment(0, 1, 0, 0)
        vbox.pack_start(valign)
        
        ok = gtk.Button("OK")
        ok.set_size_request(70, 30)
        close = gtk.Button("Close")
        
        hbox.add(ok)
        hbox.add(close)
        
        halign = gtk.Alignment(1, 0, 0, 0)
        halign.add(hbox)
        
        vbox.pack_start(halign, False, False, 3)

        self.add(vbox)

        self.connect("destroy", gtk.main_quit)
        self.show_all()
        

PyApp()
gtk.main()

فى هذا الكود، نضع زرين فى اسفل يمين الشاشة. ولعمل هذا ننشئ صندوقين 1 افقى واخر رأسى وا2 حاويات محاذاة

 valign = gtk.Alignment(0, 1, 0, 0)

لنضع الإبن فى الأسفل

 vbox.pack_start(valign)

نضع المحاذاة فى الصندوق االرأسى

 hbox = gtk.HBox(True, 3)
 ...
 ok = gtk.Button("OK")
 ok.set_size_request(70, 30)
 close = gtk.Button("Close")

 hbox.add(ok)
 hbox.add(close)

ننشئ صندوق افقى بزرين داخله

 halign = gtk.Alignment(1, 0, 0, 0)
 halign.add(hbox)
        
 vbox.pack_start(halign, False, False, 3)

ننشئ حاوية محاذاة فنضع الإبن فى اليمين ، نضيف صندوق افقى لحاوية المحاذاة ونقوم بضمها للصندوق الرأسى- تذكر دائما ان حاوية المحاذاة لاتأخذ الا ابن واحد لذا دائما نستخدم الصناديق

Alignment

Figure: Alignment

Table

الجدول يستخدم فى وضع الويدجات فى صورة صفوف واعمدة

calculator.py

#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows how to use
# the Table container widget
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk


class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()

        self.set_title("Calculator")
        self.set_size_request(250, 230)
        self.set_position(gtk.WIN_POS_CENTER)

        vbox = gtk.VBox(False, 2)
        
        mb = gtk.MenuBar()
        filemenu = gtk.Menu()
        filem = gtk.MenuItem("File")
        filem.set_submenu(filemenu)
        mb.append(filem)

        vbox.pack_start(mb, False, False, 0)

        table = gtk.Table(5, 4, True)

        table.attach(gtk.Button("Cls"), 0, 1, 0, 1)
        table.attach(gtk.Button("Bck"), 1, 2, 0, 1)
        table.attach(gtk.Label(), 2, 3, 0, 1)
        table.attach(gtk.Button("Close"), 3, 4, 0, 1)

        table.attach(gtk.Button("7"), 0, 1, 1, 2)
        table.attach(gtk.Button("8"), 1, 2, 1, 2)
        table.attach(gtk.Button("9"), 2, 3, 1, 2)
        table.attach(gtk.Button("/"), 3, 4, 1, 2)

        table.attach(gtk.Button("4"), 0, 1, 2, 3)
        table.attach(gtk.Button("5"), 1, 2, 2, 3)
        table.attach(gtk.Button("6"), 2, 3, 2, 3)
        table.attach(gtk.Button("*"), 3, 4, 2, 3)

        table.attach(gtk.Button("3"), 0, 1, 3, 4)
        table.attach(gtk.Button("2"), 1, 2, 3, 4)
        table.attach(gtk.Button("1"), 2, 3, 3, 4)
        table.attach(gtk.Button("-"), 3, 4, 3, 4)

        table.attach(gtk.Button("4"), 0, 1, 4, 5)
        table.attach(gtk.Button("5"), 1, 2, 4, 5)
        table.attach(gtk.Button("6"), 2, 3, 4, 5)
        table.attach(gtk.Button("*"), 3, 4, 4, 5)

        vbox.pack_start(gtk.Entry(), False, False, 0)
        vbox.pack_end(table, True, True, 0)

        self.add(vbox)

        self.connect("destroy", gtk.main_quit)
        self.show_all()
        

PyApp()
gtk.main()

نستخدم الجدول لإنشاء هيكل الة حاسبة

 table = gtk.Table(5, 4, True)

ننشئ جدول ب5 صفوف و 4 اعمدة والمعامل الثالث يعنى التجانس (اذا كان true فتكون كل الأبناء بنفس المساحة لأكبرهم)

 table.attach(gtk.Button("Cls"), 0, 1, 0, 1)

نضيف زر للجدول فى اعلى اليسار.. اول معاملين هى اليسار واليمين للخلية واخر اثنين هما اعلى واسفل الخلية

 vbox.pack_end(table, True, True, 0)

نضيف الجدول للصندوق الرأسى

Calculator skeleton

Figure: Calculator skeleton

Windows

سننشئ الآن نافذة متقدمة.. سنعرض نافذة ممكن ان تجدها فى JDeveloper IDE

windows.py

#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This is a more complicated layout
# example
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk
import sys


class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()

        self.set_title("Windows")
        self.set_size_request(300, 250)
        self.set_border_width(8)
        self.set_position(gtk.WIN_POS_CENTER)

        table = gtk.Table(8, 4, False)
        table.set_col_spacings(3)

        title = gtk.Label("Windows")

        halign = gtk.Alignment(0, 0, 0, 0)
        halign.add(title)
        
        table.attach(halign, 0, 1, 0, 1, gtk.FILL, 
            gtk.FILL, 0, 0);

        wins = gtk.TextView()
        wins.modify_fg(gtk.STATE_NORMAL, gtk.gdk.Color(5140, 5140, 5140))
        wins.set_cursor_visible(False)
        table.attach(wins, 0, 2, 1, 3, gtk.FILL | gtk.EXPAND,
            gtk.FILL | gtk.EXPAND, 1, 1)

        activate = gtk.Button("Activate")
        activate.set_size_request(50, 30)
        table.attach(activate, 3, 4, 1, 2, gtk.FILL, 
            gtk.SHRINK, 1, 1)
        
        valign = gtk.Alignment(0, 0, 0, 0)
        close = gtk.Button("Close")
        close.set_size_request(70, 30)
        valign.add(close)
        table.set_row_spacing(1, 3)
        table.attach(valign, 3, 4, 2, 3, gtk.FILL,
            gtk.FILL | gtk.EXPAND, 1, 1)
            
        halign2 = gtk.Alignment(0, 1, 0, 0)
        help = gtk.Button("Help")
        help.set_size_request(70, 30)
        halign2.add(help)
        table.set_row_spacing(3, 6)
        table.attach(halign2, 0, 1, 4, 5, gtk.FILL, 
            gtk.FILL, 0, 0)
        
        ok = gtk.Button("OK")
        ok.set_size_request(70, 30)
        table.attach(ok, 3, 4, 4, 5, gtk.FILL, 
            gtk.FILL, 0, 0);
                          
        self.add(table)

        self.connect("destroy", gtk.main_quit)
        self.show_all()
        

PyApp()
gtk.main()

هذا الكود يشرح كيفية عمل تلك النافذة

 table = gtk.Table(8, 4, False)
 table.set_col_spacings(3)

هذا المثال مبنى الجدول، سيكون هناك 3 بكسل فواصل بين الأعمدة

 title = gtk.Label("Windows")

 halign = gtk.Alignment(0, 0, 0, 0)
 halign.add(title)
        
 table.attach(halign, 0, 1, 0, 1, gtk.FILL, 
     gtk.FILL, 0, 0);

هذا الكود ينشئ نص ساكن محاذى لليسار وموضوع فى اول صف للجدول

 wins = gtk.TextView()
 wins.modify_fg(gtk.STATE_NORMAL, gtk.gdk.Color(5140, 5140, 5140))
 wins.set_cursor_visible(False)
 table.attach(wins, 0, 2, 1, 3, gtk.FILL | gtk.EXPAND,
     gtk.FILL | gtk.EXPAND, 1, 1)

ويدجت ال text view يتمدد على صفين وعمودين، ونجعله غير قابل للتحرير ونخفى السهم

 valign = gtk.Alignment(0, 0, 0, 0)
 close = gtk.Button("Close")
 close.set_size_request(70, 30)
 valign.add(close)
 table.set_row_spacing(1, 3)
 table.attach(valign, 3, 4, 2, 3, gtk.FILL,
     gtk.FILL | gtk.EXPAND, 1, 1)

نضع الزر close بجانب ال text view فى العمود الرابع "نبدأ العد من 0” ونضيف الزر الى المحاذاة حتى نستطيع ان نحاذى الى الأعلى

Windows

Figure: Windows

Home ‡ Contents ‡ Top of Page