Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 126 lines (96 sloc) 6.422 kb
83567d0 @stoive directory restructure
authored
1 <html>
2 <head>
3 <title>Lesson 12 - Programming a GUI</title>
4 <!-- meta tags go here -->
5 </head>
6
7 <style type="text/CSS">
8
9 div.CodeTitle { position: relative; float: center;
10 top:0; width: 90%;
11 background-color:Teal; color: White; }
12
13 div.CodeBody { position: relative; overflow: auto; float: center;
14 top:1; width: 90%;
15 background-color:silver; color: black;
16 font-size: 115%; border: 0; }
17
18 div.ImageCaption { position: relative;
19 top:1;
20 background-color:Teal; color: White; }
21
22 div.ImageBody { position: relative;
23 top:0;
24 background-color:silver; color: black; }
25
26 table.TableBody { position: relative; overflow: auto; float: center;
27 top:1; width: 90%;
28 background-color:#EAEEFF; color: black;
29 font-size: 110%; border-width: 0; }
30
31 div.SidePanel { position: absolute; float: left;
32 top: 35; left: 5; width: 200; height: 800;
33 background-color: #EAEEFF;
34 border-style: solid; border-color: black; border-width: 1px;
35 font-size: 80% }
36
37 div.TextPanel { position: absolute; top: 35; left: 220;
38 background-color: #EAEEFF;
39 border-style: solid; border-color: black; border-width: 1px;
40 font-size: 80%; font-family: Arial,sans-serif; }
41
42 div.RightPanel { position: relative;
43 top: 8; left: 98%; width: 15;}
44
45 div.Padding { position: relative;
46 width: 95%; }
47
48 div.PaddingBig { position: relative; align: center;
49 background-color: #EAEEFF;
50 width: 85%; }
51
52 div.MenuSection { position: relative;
53 width: 95%; top: 0; left: 0;
54 background-color: teal; color: white; }
55
56 div.MenuItem { position: relative;
57 width: 85%; top: 3;
58 background-color: silver; color: black; }
59
60 td.TableContent { background-color: silver; }
61
62
63 </style>
64
65 <body bgcolor="Teal">
66 <div style="positioning:relative; top: 10; left: 50; background-color: teal">
67 <script language="JavaScript" src="file:///E:/sthurlowcomBUILD/countdown.js"></script></div>
68 <div style="positioning: relative;">&nbsp;</div>
69 <div align="center" class="SidePanel">
70 <div align="left" class="PaddingBig">
71
72 <h4>Sthurlow.com</h4>
73 <div class="MenuSection">Python Tutorial<div align="right" style="background-color: #EAEEFF">
74 <div align="center" class="MenuItem"><a href="file:///E:/sthurlowcomBUILD/python/lesson01/index.htm">Lesson 1</a></div>
75 <div align="center" class="MenuItem"><a href="file:///E:/sthurlowcomBUILD/python/lesson02/index.htm">Lesson 2</a></div>
76 <div align="center" class="MenuItem"><a href="file:///E:/sthurlowcomBUILD/python/lesson03/index.htm">Lesson 3</a></div>
77 <div align="center" class="MenuItem"><a href="file:///E:/sthurlowcomBUILD/python/lesson04/index.htm">Lesson 4</a></div>
78 <div align="center" class="MenuItem"><a href="file:///E:/sthurlowcomBUILD/python/lesson06/index.htm">Lesson 6</a></div>
79 </div></div><p><a href="file:///E:/sthurlowcomBUILD/index.htm">Sthurlow.com Home</a></p></div>
80 </div>
81
82 <div align="center" class="TextPanel">
83 <div align="left" class="Padding">
84 <h2>Programming a GUI</h2>
85 <h3>What is a GUI?</h3>
86 <p>It's been a while since I wrote my last lesson, and Civilization IV is much closer than it was before! I figured I'd write a tutorial on how to create a graphical user interface (or GUI). But what's a GUI (pronounced 'gooey')? Put simply, the GUI of a program are its buttons, scroll bars, check boxes, clickables, readables, lookables, and anything you are able to see. It is graphical, as opposed to what we are used to in python, which employs simple text, in a command-line interface (like good 'ol MSDOS). To make programs for the rest of the non-computer-knowledgeable people out there, you need a GUI.</p>
87
88 <h3>What is WxPython?</h3>
89 <p>go to the <a href="http://www.wxpython.org/">WxPython website</a>, and you will probably find an introduction that means very little to most people. WxPython is pretty much a tool for creating GUIs that will work on any computer with Windows or Linux. It keeps the look and feel of the programs around it, so a program written in WxPython will look like Windows XP in Windows XP, Windows 98 in Windows 98, and in linux will look like whatever you have hacked together at the time.</p>
90
91 <h3>Getting started</h3>
92 <p>The first thing you should do is <a href="http://www.wxpython.org/download.php">Download WxPython</a>, and follow the prompts in running your download to install it. WxPython is different in that it doesn't come with python by default, so you have to go get it yourself.</p>
93 <p>Got it installed? Good. Now try these commands in the IDLE shell (that >>> thing):</p>
94
95 <div align="center">
96 <div align="center" class="CodeTitle">Code Example 1 - WxWindowy goodness</div>
97 <div align="left" class="CodeBody">
98 <pre>
99 import wx
100 app = wx.PySimpleApp()
101 frame = wx.Frame(None, -1, "Hello, World!")
102 frame.Show(True)
103 app.MainLoop()
104 </pre></div></div>
105 <p>Now a window with the title "Hello, World!" pops up. Cool! Notice that until you typed <tt>app.MainLoop()</tt>, the program pretty much hangs? In my messing around, Windows thought the program wasn't responding. Although the window was displaying, the main program hadn't started.</p>
106 <p>Now what did each line do?</p>
107 <ul>
108 <tt></tt>
109
110 <tt></tt>
111
112 <tt></tt>
113
114 <tt></tt>
115 <tt></tt>
116
117 <tt></tt>
118
119 </ul>
120 <p>It is important to know what a window is when talking about programming. Probably in some vain attempt at making less programmers in this world, a window to a programmer is different to what a window is to the user. To the programmer, a window is anything that is visible onscreen. The frame we created is a window. If we were to add a button, it would be a window, too. It has all the properties of the basic window, plus a few others, like its click-ability. A drop-down list is a window, with even more properties than a button. But in the end, everything is based off this basic 'window', but with a few things of its own added. You could say that buttons and scroll bars are 'inhereted' from the basic window.</p>
121
122 </div>
123 </div></body>
124
125
126 </html>
Something went wrong with that request. Please try again.