Menu
▾
▴
[Pythoncard-cvs] PythonCard/docs/html walkthrough2.html,1.11,1.12
|
From: Alex T. <ale...@us...> - 2005-08-21 22:57:42
|
Update of /cvsroot/pythoncard/PythonCard/docs/html In directory sc8-pr-cvs1.sourceforge.net:/tmp/cvs-serv19175 Modified Files: walkthrough2.html Log Message: Updated screenshots, minor tweaks to text. Index: walkthrough2.html =================================================================== RCS file: /cvsroot/pythoncard/PythonCard/docs/html/walkthrough2.html,v retrieving revision 1.11 retrieving revision 1.12 diff -C2 -d -r1.11 -r1.12 *** walkthrough2.html 26 Jul 2004 15:35:32 -0000 1.11 --- walkthrough2.html 21 Aug 2005 22:57:34 -0000 1.12 *************** *** 46,50 **** make a few observations about other things that I could have done that would make the example more instructive or interesting. Note that this tutorial ! describes how this process is handled in PythonCardPrototype 0.6.4. Continuing enhancements to the UI, especially in the resourceEditor, will make the process more and more streamlined over time.</p> --- 46,50 ---- make a few observations about other things that I could have done that would make the example more instructive or interesting. Note that this tutorial ! describes how this process is handled in PythonCardPrototype 0.8.1. Continuing enhancements to the UI, especially in the resourceEditor, will make the process more and more streamlined over time.</p> *************** *** 55,59 **** The buttons add 1 to the current value displayed in the field, subtract 1 from that field's value, and reset the field's value to 0.</p> ! <p class="imageCaption"><img src="images/wt2fig1.png" alt="Finished Counter Application" width="200" height="158" /><br /> Figure 1. Finished Counter Walk-Through Application</p> <h3>The Application Creation Process</h3> --- 55,59 ---- The buttons add 1 to the current value displayed in the field, subtract 1 from that field's value, and reset the field's value to 0.</p> ! <p class="imageCaption"><img src="images/wt2fig1.png" alt="Finished Counter Application" /><br /> Figure 1. Finished Counter Walk-Through Application</p> <h3>The Application Creation Process</h3> *************** *** 69,75 **** <li>Lay out the application's window in Resource Editor. </li> <li>Script the components that will trigger actions (buttons and/or menus)</li> ! <li>Cleaning up artifacts of the copied program. Let's go through those ! steps with my simple Counter tutorial.</li> </ol> <h4>A. Run resourceEditor to modify an existing application. </h4> <ol> --- 69,75 ---- <li>Lay out the application's window in Resource Editor. </li> <li>Script the components that will trigger actions (buttons and/or menus)</li> ! <li>Cleaning up artifacts of the copied program. </li> </ol> + <p>Let's go through those steps with my simple Counter tutorial.</p> <h4>A. Run resourceEditor to modify an existing application. </h4> <ol> *************** *** 86,93 **** we are running resourceEditor at the moment) rather than the Counter application's menu bar. Figure 2 depicts this start-up situation. ! resourceEditor is a "live" editor; the application is running ! while you edit it.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig2.png" alt="Startup Screen for Walk-Through" width="199" height="101" /><br /> Figure 2. Startup Screen for Walk-Through Counter Application</p> <h4>B. Laying out the window for the counter tutorial application.</h4> --- 86,93 ---- we are running resourceEditor at the moment) rather than the Counter application's menu bar. Figure 2 depicts this start-up situation. ! resourceEditor is a "live" editor; the GUI components of the ! application are running while you edit the window layout.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig2.png" alt="Startup Screen for Walk-Through" /><br /> Figure 2. Startup Screen for Walk-Through Counter Application</p> <h4>B. Laying out the window for the counter tutorial application.</h4> *************** *** 143,147 **** </ol> <p>Your project should now look like Figure 3.</p> ! <p class="imageCaption"><img src="images/wt2fig3.png" alt="Project With Buttons Added" width="200" height="158" /><br /> Figure 3. Project With Buttons Added</p> <h4>C. Scripting the Buttons</h4> --- 143,147 ---- </ol> <p>Your project should now look like Figure 3.</p> ! <p class="imageCaption"><img src="images/wt2fig3.png" alt="Project With Buttons Added" /><br /> Figure 3. Project With Buttons Added</p> <h4>C. Scripting the Buttons</h4> *************** *** 154,160 **** user selecting Exit from the File menu). codeEditor is found in the tools directory of your PythonCard distribution.</li> ! <li>Position your cursor below the last line of the <span class="code">on_menuFileExit_select(self, event):</span> handler.</li> <li>Enter the following script, remembering that Python is white-space ! aware so that indentations of lines are significant.</li> </ol> <p class="code"> def on_incrBtn_mouseClick(self, event):<br /> --- 154,162 ---- user selecting Exit from the File menu). codeEditor is found in the tools directory of your PythonCard distribution.</li> ! <li>Delete the last line of the class definition, which currently says <span class="code">pass</span>.</li> <li>Enter the following script, remembering that Python is white-space ! aware so that indentations of lines are significant. Since this is a definition ! of a method of the class, the first line will be indented, and subsequent ! lines will be indented twice.</li> </ol> <p class="code"> def on_incrBtn_mouseClick(self, event):<br /> *************** *** 186,190 **** begins "app = ". The result should look like Figure 4.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig4.png" alt="Code Changes in counter.py" width="508" height="502" /><br /> Figure 4. Code Changes in counter.py</p> <ol start="5"> --- 188,192 ---- begins "app = ". The result should look like Figure 4.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig4.png" alt="Code Changes in counter.py" /><br /> Figure 4. Code Changes in counter.py</p> <ol start="5"> *************** *** 205,209 **** self.components.field1.text = "0"</p> <p>Figure 5 shows you what your editor window should look like now.</p> ! <p class="imageCaption"><img src="images/wt2fig5.png" alt="Editor Showing Final Code Changes" width="521" height="619" /><br /> Figure 5. Editor Showing Final Code Changes</p> <ol start="12"> --- 207,211 ---- self.components.field1.text = "0"</p> <p>Figure 5 shows you what your editor window should look like now.</p> ! <p class="imageCaption"><img src="images/wt2fig5.png" alt="Editor Showing Final Code Changes" /><br /> Figure 5. Editor Showing Final Code Changes</p> <ol start="12"> *************** *** 230,234 **** displaying the line where we created the intentional typo. (See Figure 6)</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig6.png" alt="Error Shown in Console Window" width="457" height="320" /><br /> Figure 6. Error Shown in Console Window</p> <ol start="6"> --- 232,236 ---- displaying the line where we created the intentional typo. (See Figure 6)</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig6.png" alt="Error Shown in Console Window" /><br /> Figure 6. Error Shown in Console Window</p> <ol start="6"> *************** *** 260,264 **** a single menu choice.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig7.png" alt="Opening Screen of Menu Editor" width="480" height="300" /><br /> Figure 7. Opening Screen of Menu Editor</p> <ol start="3"> --- 262,266 ---- a single menu choice.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig7.png" alt="Opening Screen of Menu Editor" /><br /> Figure 7. Opening Screen of Menu Editor</p> <ol start="3"> *************** *** 266,270 **** in Figure 8.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig8.png" alt="New Menu Dialog Box" width="480" height="300" /><br /> Figure 8. New Menu Item Dialog Box</p> <ol start="4"> --- 268,272 ---- in Figure 8.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig8.png" alt="New Menu Dialog Box" /><br /> Figure 8. New Menu Item Dialog Box</p> <ol start="4"> *************** *** 277,281 **** work should look something like Figure 9.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig9.png" alt="Menu Editor With All Menu Items Defined" width="480" height="300" /><br /> Figure 9. Menu Editor With All Menu Items Defined</p> <ol start="7"> --- 279,283 ---- work should look something like Figure 9.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig9.png" alt="Menu Editor With All Menu Items Defined" width="480" /><br /> Figure 9. Menu Editor With All Menu Items Defined</p> <ol start="7"> *************** *** 293,297 **** Figure 10.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig10.png" alt="All Menu Items Programmed and Ready to Go" width="521" height="634" /><br /> Figure 10. All Menu Items Programmed and Ready to Go</p> <ol start="11"> --- 295,299 ---- Figure 10.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig10.png" alt="All Menu Items Programmed and Ready to Go" /><br /> Figure 10. All Menu Items Programmed and Ready to Go</p> <ol start="11"> *************** *** 305,309 **** expected.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig11.png" alt="Finished C ounter Application With Counter Menu" width="200" height="158" /><br /> Figure 11. Finished Counter Application With Counter Menu</p> <p>(<strong>NOTE</strong> that it would obviously be better design to factor --- 307,311 ---- expected.</li> </ol> ! <p class="imageCaption"><img src="images/wt2fig11.png" alt="Finished C ounter Application With Counter Menu" /><br /> Figure 11. Finished Counter Application With Counter Menu</p> <p>(<strong>NOTE</strong> that it would obviously be better design to factor |
