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

1

1

Aaron Stevens

13 April 2009

CS108 Lecture 29: GUI: PythonCard Basic Input/Output Widgets

2

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

3

PythonCard Layout Editor

The PythonCard Layout Editor is a WYSIWYG design tool, which allows us to specify widgets

• n a window graphically.

– Look for it:

• Windows:

Start / Programs / PythonCard / Layout Editor

• Mac: open your site-packages/ directory, then

PythonCard/tools/resourceEditor/layoutEditor.py

4

Getting Started

When you open LayoutEditor, you can create a new window from a template:

– File / New

3

5

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)

6

Example

Let’s build the following example window:

4

7

Adding Widgets

Use the Component / <widgetname> menu:

8

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.

5

9

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

10

The Property Editor

The property editor window enables us to modify the names, locations, and appearance of the various widgets on the layout.

6

11

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).

12

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.

7

13

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

14

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…

8

15

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"

16

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”

9

17

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

18

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

• bjects 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

10

19

What are the widgets’ attributes?

You can then call this method from the

• n_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

20

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.

11

21

Student To Dos

– Readings:

Using the PythonCard Layout Editor http://pythoncard.sourceforge.net/walkthrough2.html

– HW12 is due TUESDAY 4/14

22

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.