wxGlade - Code Generator
വിഷ്വല്‍ പ്രോഗ്രാമുകള്‍ ഉപയോഗിക്കുമ്പോള്‍ പ്രോഗ്രാമിംഗ് എളുപ്പമാകുന്നു. ഇത് കമ്പ്യൂട്ടര്‍ പ്രോഗ്രാമുകള്‍ തയ്യാറാക്കുന്നതിനുള്ള WYSIWIG ( What You See Is What You Get) മാതൃകകളാണ്. സാധാരണ പ്രോഗ്രാമിംഗ് ഭാഷകളില്‍ ഒരു ചതുരം വരയ്ക്കുന്നതിന് ബന്ധപ്പെട്ട കോഡുകളടങ്ങിയ നിര്‍ദ്ദേശങ്ങള്‍ ടൈപ്പു ചെയ്യണം. എന്നാല്‍ വിഷ്വല്‍ പ്രോഗ്രാമുകളില്‍ ഒരു ചതുരം വരയ്ക്കുന്നതിന് Open Office Writer ലേയും മറ്റും പോലെ ഡ്രാഗ് ആന്റ് ഡ്രോപ് മതിയാകും. പ്രോഗ്രാമിംഗ് ഭാഷയുടെ കോഡുകളും പദവിന്യാസവും അറിയാതെ തന്നെ പ്രോഗ്രാമുകള്‍ തയ്യാറാക്കുന്നതിന് Code Generator സഹായിക്കുന്നു. പൈത്തണ്‍, C++, Perl, XRC, Lisp എന്നീ പ്രോഗ്രാമിംഗ് ഭാഷകളില്‍ ഉപയോഗിക്കുന്ന ഒരു കോഡ് ജനറേറ്ററാണ് wxGlade .
മുകളില്‍ കൊടുത്തിരിക്കുന്ന രീതിയിലുള്ള ഒരു ഫ്രെയിം wxGlade ഉപയോഗിച്ച് തയ്യാറാക്കി അതില്‍ രണ്ടു സംഖ്യകളുടെ തുകയും വ്യത്യാസവും കാണുന്നതിനുള്ള പ്രോഗ്രാം പൂര്‍ത്തിയാക്കുന്നതെങ്ങനെയെന്നു നോക്കാം.
1. Applications മെനുവിലെ Programming എന്ന സബ് മെനുവില്‍ നിന്നും wxGlade തൂറക്കുക.മൂന്നു ജാലകങ്ങള്‍ തുറന്നു വരും.
a. wxGlade പ്രധാന ജാലകം (മെനുകളും, ടൂള്‍ ബട്ടണുകള്‍ കാണാം)
b. wxGlade:Tree ജാലകം
c. Properties ജാലകം.
2. പ്രധാന ജാലകത്തിലെ Add a Frame (ആദ്യത്തെ ബട്ടണ്‍) ബട്ടണില്‍ ക്ലിക്കു ചെയ്താല് ലഭിക്കുന്ന Select frame class ഡയലോഗ് ബോക്സില് നിന്നും wxFrame ഓപ്‌ഷന്‍ സെലക്ട് ചെയ്‌ത് OK ബട്ടണില്‍ ക്ലിക്കു ചെയ്യുക. പുതിയൊരു ഫ്രെയിം ലഭിക്കും(<design>ജാലകം). wxGlade:Tree ജാലകത്തില്‍ വരുന്ന മാറ്റം ശ്രദ്ധിക്കുക. Properties ജാലകത്തിലെ widget ടാബ് സെലക്ട് ചെയ്‌ത് Title ബോക്സില് ആവശ്യമായ ടൈറ്റില്‍ നല്‌കുക. ഫ്രെയിമിന്റെ Title bar ല്‍ പുതിയ പേര് വന്നിട്ടുണ്ടാകും. ഫ്രെയിമിന്റെ (<design>ജാലകം) size, background color, foreground color, font ഇവയില്‍ ആവശ്യമായ മാറ്റങ്ങള്‍ നല്‍കുന്നതിനുള്ള ഓപ്‌ഷനുകള്‍ Common ടാബില്‍ ലഭ്യമാണ്.
3. പ്രധാന ജാലകത്തിലെ Add a GridSizer (അവസാനത്തെ ബട്ടണ്‍) ബട്ടണ്‍ സെലക്ട് ചെയ്‌തതിനുശേഷം പുതുതായി ലഭിച്ച ഫ്രെയമിന്റെ (<design>ജാലകം) ഉള്ളില്‍ ക്ലിക്കുചെയ്യുക. അപ്പോള്‍ തുറന്നു വരുന്ന Select sizer attributes ഡയലോഗ് ബോക്സില് ആവശ്യമായ വിലകള്‍ (Rows, Columns,....)നല്‍കി OK ബട്ടണില്‍ ക്ലിക്കുചെയ്യുക. അതോടെ ഫ്രെയിമില്‍ ആവശ്യമായ രീതിയില്‍ വരികളും നിരകളും വന്നിട്ടുണ്ടാകും.
വിഷ്വല്‍ പ്രോഗ്രാമുകള്‍ ഉപയോഗിക്കുമ്പോള്‍ പ്രോഗ്രാമിംഗ് എളുപ്പമാകുന്നു. ഇത് കമ്പ്യൂട്ടര്‍ പ്രോഗ്രാമുകള്‍ തയ്യാറാക്കുന്നതിനുള്ള WYSIWIG ( What You See Is What You Get) മാതൃകകളാണ്. സാധാരണ പ്രോഗ്രാമിംഗ് ഭാഷകളില്‍ ഒരു ചതുരം വരയ്ക്കുന്നതിന് ബന്ധപ്പെട്ട കോഡുകളടങ്ങിയ നിര്‍ദ്ദേശങ്ങള്‍ ടൈപ്പു ചെയ്യണം. എന്നാല്‍ വിഷ്വല്‍ പ്രോഗ്രാമുകളില്‍ ഒരു ചതുരം വരയ്ക്കുന്നതിന് Open Office Writer ലേയും മറ്റും പോലെ ഡ്രാഗ് ആന്റ് ഡ്രോപ് മതിയാകും. പ്രോഗ്രാമിംഗ് ഭാഷയുടെ കോഡുകളും പദവിന്യാസവും അറിയാതെ തന്നെ പ്രോഗ്രാമുകള്‍ തയ്യാറാക്കുന്നതിന് Code Generator സഹായിക്കുന്നു. പൈത്തണ്‍, C++, Perl, XRC, Lisp എന്നീ പ്രോഗ്രാമിംഗ് ഭാഷകളില്‍ ഉപയോഗിക്കുന്ന ഒരു കോഡ് ജനറേറ്ററാണ് wxGlade .
1. Applications മെനുവിലെ Programming എന്ന സബ് മെനുവില്‍ നിന്നും wxGlade തൂറക്കുക.മൂന്നു ജാലകങ്ങള്‍ തുറന്നു വരും.
a. wxGlade പ്രധാന ജാലകം (മെനുകളും, ടൂള്‍ ബട്ടണുകള്‍ കാണാം)
b. wxGlade:Tree ജാലകം
c. Properties ജാലകം.
2. പ്രധാന ജാലകത്തിലെ Add a Frame (ആദ്യത്തെ ബട്ടണ്‍) ബട്ടണില്‍ ക്ലിക്കു ചെയ്താല് ലഭിക്കുന്ന Select frame class ഡയലോഗ് ബോക്സില് നിന്നും wxFrame ഓപ്‌ഷന്‍ സെലക്ട് ചെയ്‌ത് OK ബട്ടണില്‍ ക്ലിക്കു ചെയ്യുക. പുതിയൊരു ഫ്രെയിം ലഭിക്കും(<design>ജാലകം). wxGlade:Tree ജാലകത്തില്‍ വരുന്ന മാറ്റം ശ്രദ്ധിക്കുക. Properties ജാലകത്തിലെ widget ടാബ് സെലക്ട് ചെയ്‌ത് Title ബോക്സില് ആവശ്യമായ ടൈറ്റില്‍ നല്‌കുക. ഫ്രെയിമിന്റെ Title bar ല്‍ പുതിയ പേര് വന്നിട്ടുണ്ടാകും. ഫ്രെയിമിന്റെ (<design>ജാലകം) size, background color, foreground color, font ഇവയില്‍ ആവശ്യമായ മാറ്റങ്ങള്‍ നല്‍കുന്നതിനുള്ള ഓപ്‌ഷനുകള്‍ Common ടാബില്‍ ലഭ്യമാണ്.
3. പ്രധാന ജാലകത്തിലെ Add a GridSizer (അവസാനത്തെ ബട്ടണ്‍) ബട്ടണ്‍ സെലക്ട് ചെയ്‌തതിനുശേഷം പുതുതായി ലഭിച്ച ഫ്രെയമിന്റെ (<design>ജാലകം) ഉള്ളില്‍ ക്ലിക്കുചെയ്യുക. അപ്പോള്‍ തുറന്നു വരുന്ന Select sizer attributes ഡയലോഗ് ബോക്സില് ആവശ്യമായ വിലകള്‍ (Rows, Columns,....)നല്‍കി OK ബട്ടണില്‍ ക്ലിക്കുചെയ്യുക. അതോടെ ഫ്രെയിമില്‍ ആവശ്യമായ രീതിയില്‍ വരികളും നിരകളും വന്നിട്ടുണ്ടാകും.
4. ഫ്രെയിമില്‍ അടുത്തതായി നമുക്ക് ലേബലുകളും ടെക്‌സ്‌റ്റ് ബോക്‌സുകളും ബട്ടണുകളും ഉള്‍പ്പെടുത്തണം.
a. ലേബല്‍ നിര്‍മ്മാണം :
a. ലേബല്‍ നിര്‍മ്മാണം :
പ്രധാന ജാലകത്തിലെ Add a Static Text ബട്ടണ്‍ സെലക്ട് ചെയ്‌ത് <design>ജാലകത്തിന്റെ ആദ്യത്തെ കളത്തില്‍ ക്ലിക്കുചെയ്യുക. <design>ജാലകത്തിലും wxGlade:Tree ജാലകത്തിലും ലേബലിന്റെ പേര് തെളിഞ്ഞുവരും.
Properties ജാലകത്തിലെ Widget ടാബ് സെലക്ട് ചെയ്‌ത് Label 1 എന്നത് മാറ്റി പകരം ആവശ്യമായ ടെക്‌സ്‌റ്റുകള്‍ ചേര്‍ക്കാം (Number 1).
Layout ടാബ് സെലക്ട് ചെയ്‌ത് ടെക്‌സ്‌റ്റിന്റെ allignment കൃത്യമാക്കാം. ഇതേ രീതിയില്‍ <design>ജാലകത്തിലെ രണ്ടാമത്തെ Row യിലെ ആദ്യത്തെ കളത്തിലും (Number 2), മൂന്നാമത്തെ Row യിലെ ആദ്യത്തെ കളത്തിലും (Answer) ആവശ്യമായ ടെക്‌സ്‌റ്റുകള്‍ ചേര്‍ക്കാം.
b. ടെക്‌സ്‌റ്റ് ബോക്‌സ് ഉള്‍പ്പെടുത്തല്‍
പ്രധാന ജാലകത്തിലെ Add a TextCtrl ബട്ടണ്‍ സെലക്ട് ചെയ്‌ത് <design>ജാലകത്തിന്റെ രണ്ടാമത്തെ Column - ത്തിലെ ആദ്യത്തെ കളത്തില്‍ ക്ലിക്കു ചെയ്താല് ടെക്‌സ്‌റ്റു ബോക്‌സ് ലഭ്യമാകും. Properties ജാലകത്തിലെ Layout ടാബ് സെലക്ട് ചെയ്‌ത് ടെക്‌സ്‌റ്റ് ബോക്‌സിന്റെ allignment കൃത്യമാക്കാം. കൂടാതെ Common ടാബ് സെലക്ട് ചെയ്‌ത് Name ബോക്‌സിലെ text_ctrl_1 എന്നതിനു പകരം മറ്റൊരു പേര് (x) വേണമെങ്കില്‍ നല്‍കാം. ഇതുപോലെ രണ്ടാമത്തെ Column - ത്തിലെ രണ്ടാമത്തെ കളത്തിലും ടെക്‌സ്‌റ്റു ബോക്‌സ് ലഭ്യമാക്കാം. ഇവിടെയും Common ടാബ് സെലക്ട് ചെയ്‌ത് Name ബോക്‌സിലെ text_ctrl_2 എന്നതിനു പകരം മറ്റൊരു പേര് (y) വേണമെങ്കില്‍ നല്‍കാം.
c.ബട്ടണുകള്‍ ചേര്‍ക്കല്‍
പ്രധാന ജാലകത്തിലെ Add a Button ടൂള്‍ സെലക്ട് ചെയ്‌ത് ആദ്യത്തെ Row യിലെ അവസാനത്തെ കളത്തില്‍ ക്ലിക്കുചെയ്യുമ്പോള്‍ അവിടെ ഒരു ബട്ടണ്‍ പ്രത്യക്ഷമാകും Properties ജാലകത്തിലെ Widget ടാബ് സെലക്ട് ചെയ്‌ത് Button_ 1 എന്നത് മാറ്റി പകരം ആവശ്യമായ ടെക്‌സ്‌റ്റുകള്‍ ചേര്‍ക്കാം (Add or +). അതിനു ശേഷം Properties ജാലകത്തിലെ Events ടാബ് സെലക്ട് ചെയ്‌ത് Handler എന്ന ഭാഗത്ത് ബട്ടണില്‍ ക്ലിക്കു ചെയ്യുമ്പോള്‍ പ്രവര്‍ത്തിക്കേണ്ട ഫങ്ഷന്റെ പേര് (sum) ചേര്‍ക്കണം. ഇതുപോലെ തൊട്ടുതാഴെയുള്ള കളത്തിലും ഒരു ബട്ടണ്‍ഉള്‍പ്പെടുത്തുക (subtract 0r -). Properties ജാലകത്തിലെ Events ടാബ് സെലക്ട് ചെയ്‌ത് Handler എന്ന ഭാഗത്ത് ബട്ടണില്‍ ക്ലിക്കു ചെയ്യുമ്പോള്‍ പ്രവര്‍ത്തിക്കേണ്ട ഫങ്ഷന്റെ പേര് (diff) ചേര്‍ക്കണം.
ഉത്തരം പ്രത്യക്ഷപ്പെടേണ്ട കളത്തില്‍ മറ്റൊരു ബട്ടണ്‍ ഉള്‍പ്പെടുത്തുക. Properties ജാലകത്തിലെ Widget ടാബ് സെലക്ട് ചെയ്‌ത് Button_ 3 എന്നത് ഒഴിവാക്കണം. കൂടാതെ Common ടാബ് സെലക്ട് ചെയ്‌ത് Name ബോക്‌സിലെ text_ctrl_1 എന്നതിനു പകരം മറ്റൊരു പേര് (z) വേണമെങ്കില്‍ നല്‍കാം. ഇതോടെ ഫ്രെയിം നിര്‍മ്മാണം പൂര്‍ത്തിയായി. <design>ജാലകത്തില്‍ Right Click ചെയ്യുമ്പോള്‍ ലഭിക്കുന്ന drop down ലിസ്‌റ്റില്‍ നിന്നും Preview ക്ലിക്കു ചെയ്താല് ഫ്രെയിം കാണാം.
5. പൈത്തണ്‍ കോഡ് നിര്‍മ്മാണം :
<design>ജാലകത്തിലെ ക്രമീകരണത്തിനു സമാനമായ പൈത്തണ്‍ കോഡ് നിര്‍മ്മിക്കണം. wxGlade ജാലകത്തിലെ Applications ക്ലിക്കു ചെയ്യുക. അതിനു ശേഷം Properties ജാലകത്തില്‍ Language എന്നതില്‍ python സെലക്ട് ചെയ്‌ത് Output path ഓപ്‌ഷനു നേരെയുള്ള ബട്ടണില്‍ ക്ലിക്കു ചെയ‌ത് ആവശ്യമായ ഫോള്‍ഡര്‍ തെരഞ്ഞെടുത്ത് ഫയല്‍ നാമം നല്‍കി (calc.py) Save വട്ടണില്‍ ക്ലിക്കു ചെയ്യുക. .py എന്ന എക്‌സ്‌റ്റന്‍ഷന്‍ നിര്‍ബന്ധമായും നല്‍കണം. തുടര്‍ന്ന് Generate Code ബട്ടണില്‍ ക്ലിക്കു ചെയ്യുക. Code generation completed successfully എന്ന ഒരു Information കാണാം. OK ബട്ടണില്‍ ക്ലിക്കു ചെയ്യുക. .wxg എന്ന എക്‌സ്‌റ്റന്‍ഷനോടുകൂടി ഈ പ്രോജക്ട് സേവ് ചെയ്യാം. (File--> Save)
6. സേവ് ചെയ്‌തിരിക്കുന്ന പൈത്തണ്‍ ഫയല്‍ (calc.py) gedit text editor ല്‍ തുറക്കുക.
sum ഫങ്ഷന്റെ കോഡ് വരുന്ന ഭാഗത്തും diff ഫങ്ഷന്റെ കോഡ് വരുന്ന ഭാഗത്തും താഴെ കൊടുത്ത രീതിയല്‍ മാറ്റങ്ങള്‍ വരുത്തി സേവ് ചെയ്‌തതിനു ശേഷം പ്രോഗ്രാം പ്രവര്‍ത്തിപ്പിച്ചു നോക്കൂ.
print "Event handler `Sum' not implemented!"
എന്നതിനു പകരം
c=int(self.x.Value)+int(self.y.Value)
self.z.SetLabel(str(c))
എന്നും
print "Event handler `diff' not implemented!"
എന്നതിനു പകരം
c=int(self.x.Value)-int(self.y.Value)
self.z.SetLabel(str(c))
എന്നുമാണ് gedit text editor ല്‍ മാറ്റേണ്ടത്.
Click here
b. ടെക്‌സ്‌റ്റ് ബോക്‌സ് ഉള്‍പ്പെടുത്തല്‍
പ്രധാന ജാലകത്തിലെ Add a TextCtrl ബട്ടണ്‍ സെലക്ട് ചെയ്‌ത് <design>ജാലകത്തിന്റെ രണ്ടാമത്തെ Column - ത്തിലെ ആദ്യത്തെ കളത്തില്‍ ക്ലിക്കു ചെയ്താല് ടെക്‌സ്‌റ്റു ബോക്‌സ് ലഭ്യമാകും. Properties ജാലകത്തിലെ Layout ടാബ് സെലക്ട് ചെയ്‌ത് ടെക്‌സ്‌റ്റ് ബോക്‌സിന്റെ allignment കൃത്യമാക്കാം. കൂടാതെ Common ടാബ് സെലക്ട് ചെയ്‌ത് Name ബോക്‌സിലെ text_ctrl_1 എന്നതിനു പകരം മറ്റൊരു പേര് (x) വേണമെങ്കില്‍ നല്‍കാം. ഇതുപോലെ രണ്ടാമത്തെ Column - ത്തിലെ രണ്ടാമത്തെ കളത്തിലും ടെക്‌സ്‌റ്റു ബോക്‌സ് ലഭ്യമാക്കാം. ഇവിടെയും Common ടാബ് സെലക്ട് ചെയ്‌ത് Name ബോക്‌സിലെ text_ctrl_2 എന്നതിനു പകരം മറ്റൊരു പേര് (y) വേണമെങ്കില്‍ നല്‍കാം.
c.ബട്ടണുകള്‍ ചേര്‍ക്കല്‍
പ്രധാന ജാലകത്തിലെ Add a Button ടൂള്‍ സെലക്ട് ചെയ്‌ത് ആദ്യത്തെ Row യിലെ അവസാനത്തെ കളത്തില്‍ ക്ലിക്കുചെയ്യുമ്പോള്‍ അവിടെ ഒരു ബട്ടണ്‍ പ്രത്യക്ഷമാകും Properties ജാലകത്തിലെ Widget ടാബ് സെലക്ട് ചെയ്‌ത് Button_ 1 എന്നത് മാറ്റി പകരം ആവശ്യമായ ടെക്‌സ്‌റ്റുകള്‍ ചേര്‍ക്കാം (Add or +). അതിനു ശേഷം Properties ജാലകത്തിലെ Events ടാബ് സെലക്ട് ചെയ്‌ത് Handler എന്ന ഭാഗത്ത് ബട്ടണില്‍ ക്ലിക്കു ചെയ്യുമ്പോള്‍ പ്രവര്‍ത്തിക്കേണ്ട ഫങ്ഷന്റെ പേര് (sum) ചേര്‍ക്കണം. ഇതുപോലെ തൊട്ടുതാഴെയുള്ള കളത്തിലും ഒരു ബട്ടണ്‍ഉള്‍പ്പെടുത്തുക (subtract 0r -). Properties ജാലകത്തിലെ Events ടാബ് സെലക്ട് ചെയ്‌ത് Handler എന്ന ഭാഗത്ത് ബട്ടണില്‍ ക്ലിക്കു ചെയ്യുമ്പോള്‍ പ്രവര്‍ത്തിക്കേണ്ട ഫങ്ഷന്റെ പേര് (diff) ചേര്‍ക്കണം.
ഉത്തരം പ്രത്യക്ഷപ്പെടേണ്ട കളത്തില്‍ മറ്റൊരു ബട്ടണ്‍ ഉള്‍പ്പെടുത്തുക. Properties ജാലകത്തിലെ Widget ടാബ് സെലക്ട് ചെയ്‌ത് Button_ 3 എന്നത് ഒഴിവാക്കണം. കൂടാതെ Common ടാബ് സെലക്ട് ചെയ്‌ത് Name ബോക്‌സിലെ text_ctrl_1 എന്നതിനു പകരം മറ്റൊരു പേര് (z) വേണമെങ്കില്‍ നല്‍കാം. ഇതോടെ ഫ്രെയിം നിര്‍മ്മാണം പൂര്‍ത്തിയായി. <design>ജാലകത്തില്‍ Right Click ചെയ്യുമ്പോള്‍ ലഭിക്കുന്ന drop down ലിസ്‌റ്റില്‍ നിന്നും Preview ക്ലിക്കു ചെയ്താല് ഫ്രെയിം കാണാം.
5. പൈത്തണ്‍ കോഡ് നിര്‍മ്മാണം :
<design>ജാലകത്തിലെ ക്രമീകരണത്തിനു സമാനമായ പൈത്തണ്‍ കോഡ് നിര്‍മ്മിക്കണം. wxGlade ജാലകത്തിലെ Applications ക്ലിക്കു ചെയ്യുക. അതിനു ശേഷം Properties ജാലകത്തില്‍ Language എന്നതില്‍ python സെലക്ട് ചെയ്‌ത് Output path ഓപ്‌ഷനു നേരെയുള്ള ബട്ടണില്‍ ക്ലിക്കു ചെയ‌ത് ആവശ്യമായ ഫോള്‍ഡര്‍ തെരഞ്ഞെടുത്ത് ഫയല്‍ നാമം നല്‍കി (calc.py) Save വട്ടണില്‍ ക്ലിക്കു ചെയ്യുക. .py എന്ന എക്‌സ്‌റ്റന്‍ഷന്‍ നിര്‍ബന്ധമായും നല്‍കണം. തുടര്‍ന്ന് Generate Code ബട്ടണില്‍ ക്ലിക്കു ചെയ്യുക. Code generation completed successfully എന്ന ഒരു Information കാണാം. OK ബട്ടണില്‍ ക്ലിക്കു ചെയ്യുക. .wxg എന്ന എക്‌സ്‌റ്റന്‍ഷനോടുകൂടി ഈ പ്രോജക്ട് സേവ് ചെയ്യാം. (File--> Save)
6. സേവ് ചെയ്‌തിരിക്കുന്ന പൈത്തണ്‍ ഫയല്‍ (calc.py) gedit text editor ല്‍ തുറക്കുക.
എന്നതിനു പകരം
c=int(self.x.Value)+int(self.y.Value)
self.z.SetLabel(str(c))
എന്നും
print "Event handler `diff' not implemented!"
എന്നതിനു പകരം
c=int(self.x.Value)-int(self.y.Value)
self.z.SetLabel(str(c))
എന്നുമാണ് gedit text editor ല്‍ മാറ്റേണ്ടത്.
Click here
No comments:
Post a Comment