Overview/Questions How do we start create a custom GUI dialog? - PDF document

CS108 Lecture 29: GUI: PythonCard Basic Input/Output Widgets Aaron Stevens 13 April 2009 1 Overview/Questions – How do we start create a custom GUI dialog? – Using the PythonCard LayoutEditor. – How do we specify input/output widgets? – Using polymorphism to connect the GUI to the events. 2 1

PythonCard Layout Editor The PythonCard Layout Editor is a WYSIWYG design tool, which allows us to specify widgets on a window graphically. – Look for it:  Windows: Start / Programs / PythonCard / Layout Editor  Mac: open your site-packages/ directory, then PythonCard/tools/resourceEditor/layoutEditor.py 3 Getting Started When you open LayoutEditor, you can create a new window from a template: – File / New 4 2

Adding Widgets Let’s add some widgets to the layout: – Text Field (single line, no scrollbars) – Text Area (multi line, with scrollbars) – Button (clickable input) – Static Box (outline to visually group items) – Static Line (a visual separator) 5 Example Let’s build the following example window: 6 3

Adding Widgets Use the Component / <widgetname> menu: 7 Naming Widgets It’s important to give good names to our widgets, especially so we can tell what they are when editing the code. We’ll use a prefix-based naming convention: – Each widget type gets a 3-letter prefix. – The rest of the name is up to you. 8 4

Naming Widgets Widget Prefixes: – btn for buttons, e.g. btnIncrement – txt for text field, e.g. txtOutput – txa for text area – sbx for static box – sln for static line This webpage has a list of naming conventions to follow: http://www.cs.bu.edu/courses/cs108/gui_naming_conventions.html 9 The Property Editor The property editor window enables us to modify the names, locations, and appearance of the various widgets on the layout. 10 5

Adding Event Handlers Once we have some widgets on the screen, it’s time to hook up some event handlers for them. Save the layout resource file, and open the code file (in IDLE or Code Editor). 11 Adding Event Handlers PythonCard event handlers are declared as methods on a class, and must follow this exact naming convention: def on_<component-name>_<event>(self, event): where <component-name> is the name you gave the component in Layout Editor, and <event> is the event name. 12 6

Adding Event Handlers About 20 events are supported. The most common ones are: –command –mouseClick –initialize –select The complete list is posted here: http://pythoncard.sourceforge.net/framework/events_and_handlers.html 13 Adding Event Handlers Applying the general form: def on_<component-name>_<event>(self, event): To add an event handler for the component btnIncrementCounter ’s mouseClick event: def on_btnIncrement_mouseClick(self,event): # handler code here… 14 7

Example: Event Handlers def on_btnIncrement_mouseClick(self,event): count = int(self.components.txtCounter.text) count = count + 1 self.components.txtCounter.text = str(count) def on_btnDecrement_mouseClick(self,event): count = int(self.components.txtCounter.text) count = count - 1 self.components.txtCounter.text = str(count) def on_btnReset_mouseClick(self,event): self.components.txtCounter.text = "42" 15 Interacting with the Widgets Each of the widgets has some attributes, which we will want to interact with from our code. – Widgets are instance variables of the implementation class. We will use this general form: self.components.<widget-name>.<attribute> Example: self.components.txtCounter.text = “42” 16 8

What are the widgets’ properties? Each of the widgets has some properties, which we will want to interact with from our code. Go to the API pages, here: http://pythoncard.sourceforge.net/framework/components.html 17 What are the widgets’ attributes? Another trick: – You can find out what the components are called, and what they can do, using introspection – asking the objects what their attributes are: def debugComponentsAndAttributes(self): for component in self.components.iterkeys(): # self.components is a dictionary (and also an object) print component, "->", type(self.components[component]) attributes = dir(type(self.components[component])) for attr in attributes: if attr[0] >= 'a': # only print lower case names print "\t",attr print 18 9

What are the widgets’ attributes? You can then call this method from the on_initialize(..) event, and at startup time it will print out: – the names of each of the components – the class which defines each component’s attributes – the list of attributes we care about for each 19 Take-Away Points – Layout Editor, WYSIWYG – Use Property Editor to modify the widgets’ properties (name, size, location, etc.) – Write event handler methods in the class definition. – Interact with widgets through their attributes. 20 10

Student To Dos – Readings: Using the PythonCard Layout Editor http://pythoncard.sourceforge.net/walkthrough2.html – HW12 is due TUESDAY 4/14 21 Launching PythonCard LayoutEditor on Mac OS Create a shell script file called run_RE.sh in the <site-packages>/PythonCard/tools/resourceEditor/ directory. #! /bin/sh # # A quick shell script to launch the PythonCard Layout Editor # python /Users/azs/code/python/lib/PythonCard- 0.8.2/tools/resourceEditor/layoutEditor.py Note the above had one long line… Open this file with Terminal. 22 11