Follow @BIG_PESH

Page Python GUI Tutorial

How many hours have you spent writing python code to create a GUI (Graphical User Interface) using Pythons builtin Tkinter, trying to get the layout and look just right only to change your mind at the last minute and change it all again?

I know I have and could never really visualise the layout in my mind to put it into code and found myself just smashing the keyboard writing code to get a general bases of a GUI.

This caused me to start to look around the internet for a visual GUI builder like the one in Microsoft’s Visual Studio and Apple’s Xcode.

Well in short there is not much in the way of a python GUI builders but I did stumble upon a really good one which is called Page which uses the Tkinter library to let you build a GUI visually and generates the code for you to enter into your project.

Unfortunately Page is not as easy as a couple of clicks setup, so looks a little daunting to none tekkies (even though it actually is easy).

So this lead me to do this tutorial to setup Page and the usage of page!

OK so to start you need to download Page from the below URL…

Don’t worry what OS your using Page runs on Windows, MacOS & Linux.

After you have downloaded Page leave it for the moment, you now need to download ActiveStates ActiveTcl, you can download this from the below link…

  • Note you have to create a free account with ActiveState

Ok now that you have downloaded ActiveTcl you can now install Page.

You should now have a file named - ‘page’ and its contents should look like the below image…

Pasted Graphic
You now need to run the configure file, this will generate all your OS’s files page needs to run, once this is complete you can run Page.

Pasted Graphic 1
To run Page you can now click the page executable, this should then load Page like below…

Pasted Graphic 2
Page opens with 6 separate windows, this is normal. You should be seeing the below list of open windows…

Status Window
Widget Toolbar Window
Widget Tree Window
TopLevel Window (Main Design Window)
Attribute Editor Window
Terminal Window (Running Wish 8.6)

Ok lets make a simple GUI Login in Page, lets start by adding a 2x buttons to the TopLevel Window

  • Highlight the button widget from the Widget Toolbar
  • Then click anywhere inside the TopLevel Window twice
  • Add 2x Labels to your TopLevel
  • Then lastly add 2x Entry boxes

Position the widgets like the below…

Pasted Graphic 3
That’s it you have now created your first GUI design using Page, EASY!

You can now have a play with the Attribute Editor to change any settings (ie. The text for your labels and buttons)

The Attribute Editor has all the settings for each widget in Page, you can change colours, fonts, height, width and much more, have a play around and make it look how you like.

Now you have the GUI looking ok we now need to generate the code that builds this for inside your programs, we do this by selecting Gen_Python option from the File Menu.

Pasted Graphic 4
Then selecting the Gun Python GUI option, save the file and then you should see the below code generated by Page (Yours may be a little different from mine as you may have changed colours etc.)

Pasted Graphic 5
This is your code you can now add into your project, your project may not be a Login Window but this was a quick way of showing you how easy it is to use Page to create a GUI quickly and save you loads of time typing lines of code.

Obviously there is a lot to
cover in Page but I recommend reading the manual from inside the Page folder, where all the different options are explained in detail.

I hope you found this tutorial useful and happy GUI building!!!

Be sure to follow me @BIG_PESH on Twitter