Ceci est une ancienne révision du document !
This month, we'll explore yet another GUI designer, this time for Tkinter. Many people have an issue with Tkinter because it doesn't offer a built-in designer. While I've shown you how to easily design your applications without a designer, we will examine one now. It's called Page. Basically it's a version of Visual TCL with Python support on top. The current version is 3.2 and can be found at http://sourceforge.net/projects/page/files/latest/download. Prerequisites You need TCK/TK 8.5.4 or later, Python 2.6 or later, and pyttk - which you can get (if you don't already have it) from http://pypi.python.org/pypi/pyttk. You probably have all of these with the possible exception of pyttk. Installation You can't really ask for an easier installation routine. Simply unpack the distribution file into a folder of your choice. Run the script called “configure” from the folder where you just unpacked everything. This will create your launch script called “page” which you use to get everything going. That's it.
Learning Page When you start Page, you'll get three windows (forms). One is a “launch pad”, one is a toolbox, and one shows the Attribute Editor. To start a new project, click on the Toplevel button in the toolbox. This creates your main form. You can move it wherever you wish on your screen. Next, and from now on, click on a widget in the tool box and then click where you want it on the main form. For now, let's do a button. Click on the Button button on the toolbox, and then click somewhere on the main form. Next, in the launch pad form, click on Window and select Attribute Editor (if it's not already showing). Your single button should be highlighted already, so move it around the form and when you release the mouse button you should see the position change in the attribute editor form under 'x position' and 'y position'.
Here we can set other attributes such as the text on the button (or most any other widget), the alias for the widget (the name we will refer to in our code), color, the name we will call it and more. Near the bottom of the attribute editor is the text field. This is the text that appears to the user for, in this case, the button widget. Let's change this from “button” to “Exit”. Notice that now the button says “Exit”. Now resize the form to just show the button and recenter the button in the form. Next click in the main form someplace where the button isn't. The attribute editor form now shows the attributes for the main form. Find the “title” field and change this from “New Toplevel 1” to “Test Form”.
Now, before we save our project, we need to create a folder to hold our project files. Create a folder somewhere on your drive called “PageProjects”. Now, in the launch pad window, select File then Save As. Navigate to your PageProjects folder, and, in the dialog box, type TestForm.tcl and click the Save button. Notice this is saved as a TCL file, not a Python file. We'll create the python file next. In the launch pad, find the Gen_Python menu item and click it. Select Generate Python and a new form appears. Page has generated (as the name suggests) our python code for us and placed it in a window for us to view. At the bottom of this form, are three buttons…Save, Run, and Close. Click Save. If, at this point, you were to look in your PageProjects folder, you will see the python file (TestForm.py). Now click on the Run button. In a few seconds, you'll see the project start up. The button is not connected to anything yet, so it won't do anything if you click on it. Simply close the form with the “X” in the corner of the window. Now close the Python Console window with the close button at the bottom right.
Back at our main form, highlight the Exit button and right click on it. Select “Bindings…”. Under the menu is a set of buttons. The first on the left allows you to create a new binding. Click on “Button-1”. This allows us to enter the binding for the left mouse button. In the window on the right, type “Button1Click”. Save and generate the python code again. Scroll down in the Python Console to the bottom of the file. Above the “class Test_Form” code is the function we just asked to be created. Notice that at this point, it simply is passed. Look further down and you'll see the code that creates and controls our button. Everything is done for us already. However, we still have to tell the button what to do. Close the Python Console and we'll continue. On the launch pad, click Window then select Function List. Here we will write our method to close the window. The first button on the left is the Add button. Click it. In the Function box, type “py:Button1Click” and, in the Arguments box, type “p1”, and change the text in the lower box to…
def Button1Click(p1): sys.exit() Click on the checkmark and we are done with this. Next we have to bind this routine to the button. Select the button in the form, right click it, and select “Bindings…”. As before, click on the far left button on the toolbar and select Button-1. This is the event for the left mouse button click. In the right text box, enter “Button1Click”. Make sure you use the same case that you did for the Function we just created. Click the checkmark on the right side. Now save and generate your python code.
You should see the following code near the bottom, but OUTSIDE of the Test_Form class… def Button1Click(p1) : sys.exit() And the last line of the class should be… self.Button1.bind('<Button-1>',Button1Click) Now, if you run your code and click on the Exit button, the form should close properly.
Moving Forward Now let's do something more complicated. We'll create a demo showing some of the widgets that are available. First close Page and restart it. Next, create a new Toplevel form. Add two frames, one above the other and expand them to pretty much take up the entire width of the form. In the top frame, place a label, and, using the attributes editor, change the text to “Buttons:”. Next, add two buttons along the horizontal plane. Change the text of the left one to “Normal”, and the right one to “Sunken”. While the sunken button is selected, change the relief to “sunken” and name it btnSunken. Name the “Normal” button “btnNormal”. Save this project as “Demos.tcl”. Next, place in the lower frame a label saying “Radio Buttons” and four radio buttons like in the image below. Finally, place an Exit button below the bottom frame.
Before we work on the bindings, let's create our click functions. Open the Function List and create two functions. The first should be called btnNormalClicked and the other btnSunkenClicked. Make sure you set the arguments box to include p1. Here's the code you should have for them… def btnNormalClicked(p1): print “Normal Button Clicked” def btnSunkenClicked(p1) : print “Sunken Button Clicked” Let's add our button bindings. For each button, right click it, select “Bindings…”, and add, as before, a binding to the functions we created. For the normal button, it would be “btnNormalClicked”, and for the sunken button it would be btnSunkenClicked. Save and generate your code. Now, if you were to test the program under the “Run” option of the Python Console, and click any of the buttons, you won't see anything happen. However, when you close the application, you should see the print responses. This is normal for Page and if you simply run it from the command line as you normally do, things should work as expected.
Now for our radio buttons. We have grouped them in two “clusters”. The first two (Radio 1 and Radio 2) will be cluster 1 and the other two will be cluster 2. Click on Radio1 and in the Attribute Editor, set the value to 0 and the variable to “rbc1”. Set the variable for Radio 2 to “rbc1” and the value to 1. Do the same thing for Radio 3 and Radio 4 but for both of these set the variable to “rbc2”. If you want, you can deal with the click of the radiobuttons and print something to the terminal, but for now, the important thing is that the clusters work. Clicking Radio1 will deselect Radio2 and not influence Radio3 or Radio4, and the same for Radio2 and so on. Finally, you should create a function for the Exit button, and bind it to the button like we did in the first example. If you've been following along as we have done our other Tkinter applications, you should be able to understand the code shown above right. If not, please go back a few issues for a full discussion of this code. You can see that using Page makes the basic design process much easier than doing it yourself. We've only scratched the surface of what Page can do, and we'll start doing something much more realistic next time. The python code can be found on pastebin at http://pastebin.com/qq0YVgTb.
One note before we go for this month. You might have noticed that I've missed a couple of issues. This is due to my wife being diagnosed with cancer last year. As hard as I have tried to keep things from falling through the cracks, a number of things have. One of these things is my old domain/web site at www.thedesignatedgeek.com. I blew it and missed the renewal. Due to this, the domain was sold out from under me. I have set up www.thedesignatedgeek.net with all the old stuff. I will be working hard the next month to bring it all up to date.
See you next time.