بسیاری از کاربران معمول کامپیوتر، به ویژه تازه واردان دنیای لینوکس، به خط فرمان به دیده امری عجیب و ترسناک مینگرند که به کارگیری آن و تسلط بر آن تنها از عهده خبرگان و کهنه کاران دنیای کامپیوتر برمی آید. این کاربران و حتی بسیاری از استفاده کنندگان حرفه ای کامپیوتر ترجیح میدهند به جای تایپ دستورات و تعامل از طریق «متن»، دکمه ای را کلیک كرده، اسلایدری را جابه جا كرده یا پنجره ای را باز و بسته کنند. به عبارت ساده تر آنها ترجیح میدهند که با یک رابط بصری سروکار داشته باشند تا یک رابط متنی. آنها GUI (سرنام Graphical User Interface) را بیشتر میپسندند.


 

کدام جعبه ابزار؟



برای ایجاد رابطهای گرافیکی در پایتون، گزینه های متعددی وجود دارد که با توجه به سکوی مورد استفاده، محیط گرافیکی موردنظر و حتی کاربرد مورد نیاز میتوانید از بین آنها گزینه مناسب را انتخاب کنید. در ادامه چند نمونه از Toolkit یا جعبه ابزارهای مشهور ساخت رابط بصری بر مبنای پایتون را معرفی میکنیم.

  • TK Inter: ساده ترین و در عین حال در دسترس ترین جعبه ابزار ساخت رابطهای بصری است که به طورمعمول به همراه غالب بسته های پایتون و به صورت پیش فرض نصب میشود. ویرایشگر IDLE به وسیله همین ابزار ساخته شده، اما سادگی و ظاهر نه چندان زیبای آن، به کاهش علاقه به استفاده از این جعبه ابزار منجر شده است.
  • PyGTK: این جعبه ابزار در واقع wrapper یا پوسته ای است که به دور ابزار گرافیکی GTK+ پیچیده میشود تا آن را برای پایتون قابل استفاده سازد. ابزار GTK+ خود مادر تمام برنامه ها و پنجره های میزکار Gnome است و برنامه های ساخته شده با PyGTK هم دقیقاً ظاهری همانند برنامه های میزکار Gnome خواهد داشت. برای این جعبه ابزار IDE خاصی وجود ندارد، اما طراحی ظاهر برنامه و فرمهای آن برمبنای این جعبه ابزار (بدون امکان ویرایش یا ایجاد کد) توسط برنامه هایی نظیر Glade و Gazpacho در میزکار Gnome امکانپذیر است.
  • PyQt: این جعبه ابزار نیز wrapper یا پوسته ای است که به دور ابزار گرافیکی Qt پیچیده میشود تا آن را برای پایتون قابل استفاده سازد. ابزار Qt ابزاری است که کل میزکار KDE بر مبنای آن بنا شده است و برنامه های تولید شده با PyQT نیز دقیقاً ظاهری همانند برنامه های میزکار KDE خواهد داشت. برای کار با این جعبه ابزار میتوانید از IDE قدرتمند eric در میزکار KDE استفاده کنید.
  • wxPython: این جعبه ابزار براساس wxWidget (یا wxWindows) ساخته شده است و یکی از قدرتمندترين جعبه ابزارهای طراحی رابط بصری است. مهمترین مزیت آن مستقل بودن از پلتفرم و ظاهر بومی برنامه های تولید شده با آن است. IDE قدرتمند Boa Constructor یکی از بهترین گزینه ها برای توسعه رابط بصری کاربر با زبان پایتون است .

نصب ابزارها
همانطور که گفته شد، برای ادامه این مبحث به Boa Constructor و WxPython نياز خواهیم داشت. برای نصب آنها به Software Center اوبونتو رفته و از طریق بخشهای Developer Tools و پس از آن Graphic Interface Design نرمافزار Boa Constructor را نصب کنید. معمولاً انتخاب این بسته برای نصب، به نصب خود به خود WxPython نیز منجر خواهد شد. همچنین میتوانید در خط فرمان دستورات زیر را تایپ کنید:


 

sudo apt-get install wxpython
sudo apt-get install boa-constructor


 

در هر دو حالت پس از وارد کردن گذرواژه سیستم، دانلود و نصب نرمافزارها آغاز خواهد شد. پس از اتمام کار نصب از طریق منوی Application، سپس گزینه Programming برنامه Boa Constructor را اجرا کنید. ظاهر برنامه پس از اجرا همانند شکل 1 خواهد بود.


 

همانگونه که مشاهده میکنید این برنامه از سه پنجره یا به اصطلاح فریم تشکیل شده است. قاب یا فریم بالایی قاب ابزار یا Tool Frame نامیده میشود. قاب سمت چپ پایینی، قاب بازرسی یا Inspector Frame و قاب سمت راست پایین، قاب ویرایشگر یا Editor Frame است. قاب ابزار زبانه های متعددی نظیر مانند New، Container/Layout و... دارد. از این قاب میتوانید برای ایجاد پروژه های جدید، افزودن قاب یا پنجره به پروژه های موجود یا افزودن کنترلهای مختلف به قابها استفاده کنید. قاب بازرسی پس از افزودن قابها و کنترلهای مختلف به پروژه بسیار مورد استفاده قرار خواهد گرفت. به صورت معمول این قاب ساختار درختی و روابط بین کنترلهای مختلف را به ما نشان خواهد داد و در نهایت قاب ویرایشگر، امکان ویرایش کد، ذخیره پروژه و کارهایی از این قبیل را فراهم خواهد کرد. برای شروع کار ما ابتدا به سراغ قاب ابزارها خواهیم رفت. در زبانه New گزینه های مختلفی برای شروع کار وجود دارد اما در این بخش ما تنها از دکمه های پنجم و ششم، یعنی wx.App و wx.Frame استفاده خواهیم کرد. آیتم نخست، یعنی wx.App امکان ساخت یک پروژه کامل را فراهم میکند که از دو فایل Frame و Application تشکیل شده است و خود این دو فایل را نیز به صورت خودكار تولید میکند. دکمه دوم یا wx.Frame امکان افزودن یک فرم به پروژه موجود را فراهم میکند. پر كاربردترين ابزارها در زبانه دوم یا Container/Layout ابزار wx.Panel (اولین آیتم از سمت چپ) و انواع مختلف کنترل کننده اندازه یا Sizer (دکمه های دوم تا ششم از سمت راست) هستند. در زبانه Basic Controls شما کنترلهای متداول نظیر جعبه متن، جعبه چک، کنترلهای لیست و... را مشاهده خواهید کرد و زبانه Utilities نیز برای دسترسی به ابزارهای منو و تایمر مورد استفاده قرار خواهد گرفت.
قبل از شروع کار با Boa لازم است به دو نکته کوچک، اما مهم توجه کنید. نخست اینکه برخی کنترلها در پنجره طراحی یا Designer قابل جابه جایی نیستند. در صورت روبه رو شدن با چنین مشکلی، پس از انتخاب آنها از ترکیب کلیدهای Ctrl و جهت نما برای حرکت دادن آنها استفاده کنید. نکته دیگر اینکه هنگام قرار دادن یک کنترل از جنس panel روی یک فریم، پنل به سادگی دیده نخواهد شد. در اینصورت به دنبال مربعهای کوچک سیاه رنگی روی فریم بگردید یا از طریق قاب بازرسی و زبانه اشیا یا Objs این کنترل را انتخاب کنید.
شروع کار
برای مرحله اول، در قاب ابزار و در زبانه New دکمه wx.App را کلیک کنید تا یک پروژه جدید ایجاد شود. در این حالت دو برگه جدید یکی با نام *(App1)* دیگری با نام *(Frame1)* به قاب ویرایشگر شما اضافه خواهد شد. مناسبترین اقدام در این زمان ذخیره کردن پروژه ایجاد شده است. این کار را از برگه *(Frame1)* آغاز میکنیم. در قاب ویرایشگر، دکمه Save را بزنید و این فایل را در یک پوشه دلخواه با نام Frame1.py ذخیره کنید. همانطور که مشاهده میکنید نام برگه به Frame1 تغییر خواهد کرد. علامتهای *()* به معنای ذخیره نشدن تغییرات برگه جاری است. همین کار را برای برگه *(App1)* نیز انجام دهید. در قاب ویرایشگر به غیر از دکمه Save چندین دکمه مهم دیگر نیز وجود دارد که یکی از آنها دکمه Run Application (به شکل یک مثلث زرد رنگ) برای اجرای برنامه است. در حال حاضر، حتی بدون یک خط کدنویسی نیز برنامه شما قابل اجرا است. با زدن همین دکمه شما میتوانید نتیجه اجرای برنامه (که یک پنجره ساده و خالی است) را ببینید. در صورتیکه شما در حال ویرایش یک فایل مربوط به یک قاب یا فریم باشید (همانند Frame 1) دکمه های دیگری نیز به نوار ابزارها افزوده میشود که مهمترین آنها دکمه Frame Designer است. (برای یافتن نام هر یک از دکمه ها، نشانگر ماوس را روی آنها برده و کمی صبر کنید(. فشردن این دکمه شمارا به حالت طراحی میبرد که در این وضعیت میتوانید ظاهر فرم موردنظر را به دلخواه و با استفاده از ابزارهای گرافیکی تغییر دهید. این دکمه را کلیک کنید تا با ظاهری همانند شکل 2 روبه رو شوید.


 

فرم نمایش داده شده در واقع بستری است که میتوانید کنترلهای دلخواه خود را به آن اضافه کنید. نخستين آیتمی که باید به فرم اضافه کنید، یک کنترل از نوع پنل است. یک رسم نانوشته در توسعه رابطهای گرافیکی وجود دارد که شما را از قرار دادن مستقیم هر کنترلی به جز پنل روی یک فریم منع میکند. پس در قاب ابزارها به برگه Container/Layout بروید. روی دکمه wx.Panel در محل دلخواهی از فریم کلیک کنید. اگر کار را به درستی انجام داده باشید، فریم 1 باید به صورت شکل 3 دارای تعدادی مربع سیاه رنگ کوچک باشد.


 

همانطور که پیشتر هم هشدار داده بودیم، خطوط بدنه پنل دیده نمیشود و برای ویرایش و جابه جایی آن باید به دنبال این 8 مربع کوچک بگردید. برای تغییر اندازه پنل ميتوانيد از اين مربعها استفاده كنيد. در این تمرین ما میخواهیم پنل تمام سطح فریم را پوشش دهد. فریم را کمی کوچکتر و پنل را اندکی بزرگتر کنید تا پنل تمام سطح فریم را پوشش دهد. حال پنلی در اختیار داریم که سایر کنترلها روی آن قرار داده خواهند شد. اگر فریم را کمی جابه جا کنید، خواهید دید که دو دکمه جدید به نوار ابزار قاب ویرایشگر اضافه شده است. یکی به شکل یک تیک و با نام Post و دیگری به شکل ضربدر با نام Cancel. کلیک دکمه Post باعث میشود تا از حالت Design خارج شوید و تغییرات اعمال شده در فریم به صورت کدهای پایتون به فایل آن منتقل شود. البته هنوز وظیفه ذخیره کردن فایل به عهده خود شما است. دکمه Post دیگری هم روی قاب بازرسی دیده میشود که بعدها به آن خواهیم پرداخت. اگر Post را کلیک کرده اید، دوباره به حالت Design برگردید و در قاب ابزارها به برگه دکه ها یا Buttons مراجعه کنید. روی نخستین دکمه سمت راست (wx.Button) کلیک و آن را جایی تقریباً در مرکز فریم قرار دهید.در این حالت فریم شما باید شبیه شكل 4 باشد. همانند پنل، 8 مربع کوچک برای تغییر اندازه دکمه در اطراف آن وجود دارد. اگر برای جابه جا کردن دکمه با مشکل مواجه شدید، براساس توضیح داده شده، از ترکیب کلیدهای Ctrl و جهت نما استفاده کنید.


 


اكنون زمان آن رسیده که به سراغ قاب بازرسی برویم. در حالیکه کنترل دکمه در حالت انتخاب است، به سراغ این قاب و برگه Constr میرویم. در این قسمت میتوانید مشخصات و خواص کنترل انتخاب شده را ویرایش کنید. فعلاً نام کنترل دکمه را به btnShowDialog و برچسب یا Label آن را به Click Me! تغییر دهید. ظاهر برگه Constr باید همانند شکل 5 باشد. ما به بقیه تنظیمات این برگه کاری نداریم و به طور مستقيم به سراغ برگه Objs میرویم.



 

در این برگه شما تمام کنترلهای استفاده شده و روابط والد و فرزندی آنها را مشاهده خواهید کرد. همانگونه که در شكل 6 مشاهده میکنید، کنترل دکمه فرزند پنل و پنل خود فرزند فریم است. با زدن دکمه Post در قاب بازرسی تغییرات را به فایل اعمال کرده و آن را ذخیره کنید. دوباره به حالت Design بازگشته و به برگه Objs از قاب بازرسی مراجعه کنید. اگر فریم انتخاب نشده است آن را انتخاب کرده و به زبانه Constr بروید. در آنجا عنوان فریم را به My First GUI تغییر دهید. تغییرات را Post کرده، سپس فایل را ذخیره کنید.


 

در ادامه با استفاده از مثلث زرد رنگ Run Application برنامه را اجرا کنید. فرمی همانند شکل 7 ظاهر خواهد شد، اما کلیک دکمه روی فرمی هیچ عکس العملی ایجاد نخواهد کرد، زیرا ما هنوز هیچ عملکردی را به آن دکمه نسبت نداده ایم. برای این کار ما باید یک رویداد یا Event را تعریف کرده و به دکمه نسبت بدهیم. پنجره فعلی را بسته و دوباره به حالت Design بروید. پس از کلیک و انتخاب دکمه به برگه Evts در قاب بازرسی مراجعه کنید. از لیست سمت چپ ButtonEvent را انتخاب کرده و از لیست سمت راست wx.EVT_BUTTON را دوباره کلیک کنید.


 


همانگونه که در شكل 8 مشاهده میکنید، در زیر پنجره رویدادی با نام OnBtnShowDialog ساخته شده است. تغییرات را Post و ذخیره کنید. در پایینترین قسمت قاب ویرایشگر باید تابعی با نام OnBtnShowDialog ساخته شده باشد. کاری که اکنون میخواهیم انجام دهیم، فراخوانی یک جعبه متن یا MessageBox است که متنی را برای ما به نمایش درآورد.


 

در اینجا ما از تابع داخلی wx.MessageBox استفاده میکنیم. در قاب ویرایشگر خط زیر را جایگزین event.Skip() کنید:
wx.MessageBox(“You clicked the button !” , “Info”,wx.ICON_QUESTION)
تغییرات را ذخیره کرده و با مثلث زردرنگ برنامه را اجرا کنید. این بار کلیک دکمه وسط فرم باید پیغامی همانند شكل 9 را به نمایش درآورد. توجه کنید که آیکون علامت سؤال ممکن است با توجه به تنظیمات ظاهر سیستم شما شکل متفاوتی داشته باشد. در تابع MessageBox سه آرگومان وارد شده به ترتیب عبارتند از، متن پیغام، عنوان پنجره پیغام و نوع آیکون مورد استفاده. برای تنظیم آیکون گزینه های دیگری نظیر wx.ICON_EXCLAMATION ، wx.ICON_INFORMATION و wx.ICON_ERROR را نیز در اختیار دارید که میتوانید آنها را نیز به سادگی امتحان کنید.

این مثال در عین سادگی، نخستین برنامه کامل شما بر مبنای یک رابط بصری بود.