Source

boa-constructor / Docs / boa / guide / node3.html

Full commit
<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html><head>

  
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

  
  <meta name="GENERATOR" content="Mozilla/4.5 [en] (WinNT; I) [Netscape]">

  
  <title>1.3 The Editor Window</title></head>
<body alink="#ff0000" bgcolor="#ffffff" link="#0000bb" text="#000000" vlink="#551a8b">

<div class="navigation">&nbsp;
<table cellpadding="0" cellspacing="2" width="100%">

  <tbody>

    <tr>

      <td height="32" width="32"><a href="node4.html"><img src="icons/next.gif" alt="Next Page" border="0" height="32" width="32"></a></td>

      <td height="32" width="32"><a href="index.html"><img src="icons/up.gif" alt="Up One Level" border="0" height="32" width="32"></a></td>

      <td height="32" width="32"><a href="node2.html"><img src="icons/previous.gif" alt="Previous Page" border="0" height="32" width="32"></a></td>

      <td align="center" bgcolor="#99ccff" width="100%"><b>Getting
Started Guide
for Boa Constructor</b></td>

      <td height="32" width="32"><a href="index.html"><img src="icons/contents.gif" alt="Contents" border="0" height="32" width="32"></a></td>

      <td height="32" width="32"><img src="icons/blank.gif" border="0" height="32" width="32"></td>

      <td height="32" width="32"><img src="icons/blank.gif" border="0" height="32" width="32"></td>

    </tr>

  
  </tbody>
</table>

<b>Next:<span class="sectref"></span></b><a href="node4.html">The
Designer Window</a><b>Up:<span class="sectref"></span></b><a href="index.html">Getting
Started Guide for Boa Constructor</a> <b>Previous:<span class="sectref"></span></b><a href="node2.html">The
Palette Window</a>
<br>

<hr></div>

<!--End of Navigation Panel-->
<h1>1.3 The Editor Window</h1>

The Editor window is one of the three windows which is created when you
run Boa Constructor. If you close the Editor Window, you can re-open it
from the Palette Window using the&nbsp;<img src="image/Editor.jpg" height="16" width="16">
Button.
<p>When it is opened the Editor provides two pages, the Shell page and
the Explorer page. You can now open a source file into the Editor.
There
are several methods for opening a source file in Boa Constructors
editor.
</p>

<ul>

  <li>Use the Open Option from the Editor Toolbar or Editor File Menu.</li>

  <li>Use operating system Drag and Drop functionality to drop a file
on the
editor.</li>

  <li>Use the <a href="node5.html">Explorer Window</a></li>

  <li>Use an <a href="node6.html">application file</a></li>

  <li>Start the Boa Constructor application with the source file as a
command
line parameter.</li>

  <li>Use one of the options from the 'New' page in the Palette.</li>

</ul>

<p><br>

</p>

<img alt="Editor - source view" title="Editor - source view" src="image/Boa3.png" style="width: 596px; height: 494px;"><br>

<p><br>

</p>

When a source file is opened, the editor creates a new page for the
module.
Within that page, the editor creates another notebook to provide
alternative
views of the file, this depends on the type of file.&nbsp; In this case
we show an "App1" and "Frame1", for the Frame1 file three views are
shown, 'Source', 'Explore' and 'Events', should you look at the "App1"
file you would see 'Application', 'Source' and 'Explore' views.<br>

<br>

<span style="font-weight: bold;">Note:</span> The "*" on the "App1" and
"Frame1" tab indicate that changes have been made which are not saved.<br>

<br>

The Source View (seen above) shows the source code and allows you to
change the source
code, unless it has a "blueish" background which indicates that the
Frame Designer is open/active for this file.<br>

<p><br>

</p>

<img alt="Editor - Explore view" title="Editor - Explore view" src="image/Boa3b.png" style="width: 597px; height: 495px;"><br>

<p><br>

</p>

The Explore View provides a tree view of the module and the icons shown
indicate the following:<br>

<br>

<img alt="Icon - Class" title="Icon - Class" src="image/IconClass.png" style="width: 16px; height: 16px;"> Classes<br>

<img alt="Icon - Method" title="Icon - Method" src="image/IconMethod.png" style="width: 16px; height: 16px;"> Methods<br>

<img alt="Icon - Function" title="Icon - Function" src="image/IconFunction.png" style="width: 16px; height: 16px;">
Functions<br>

<img alt="Icon - Event" title="Icon - Event" src="image/IconEvent.png" style="width: 16px; height: 16px;"> Events<br>

<img alt="Icon - Global" title="Icon - Global" src="image/IconGlobal.png" style="width: 16px; height: 16px;"> Global<br>

<br>

The 'Explore' Pane shows a Class based view of your source. The methods
and attributes of each class in the source are displayed. You can
double-click
the mouse left button on an attribute or method, and the 'Source' view
will display the definition/source code for that item.<br>

<p><br>

</p>

<p><img alt="Editor - Event view" title="Editor - Event view" src="image/Boa3c.png" style="width: 595px; height: 493px;"><br>

</p>

<p><br>

The 'Events' Pane shows a Control based view of the Events you
defined using Boa's Inspector.&nbsp; Manually added events outside the
Boa generated code will not show here.</p>

Additional views can be opened through the Editor/Views menu, this
includes such views as "Application ToDo", "Application Documentation",
"UML" etc, some views will only be available for certain file types.<br>

<p>The 'Views' menu in the editor provides other views on the source.
These
are Hierarchy, Documentation, ToDo, Application ToDo, Imports, UML, CVS
conflicts, Readme.txt, Changes.txt, Todo.txt, Bugs.txt.<br>

</p>

<ul>

  <li>The <b>Hierarchy View</b> shows the classes in your source as a
hierarchy.
The inheritance relationships between classes are clearly visible in
this
view.</li>

  <li>The <b>Documentation View</b> shows documentation, which is
automatically
produced from your source code. If you use standard python
documentation
strings for classes and methods (i.e. a string immediately following
the
declaration), then this information is included in the generated text.</li>

  <li>The <b>ToDo View</b> is used for tracking your to-do lists. You
add
ToDo
items to your code as comment followed by three 'X' characters, e.g. <tt>"#
XXX My todo item</tt>". These are useful to track items that you want
to
comeback to later.</li>

  <li>The <span style="font-weight: bold;">Application ToDo
View</span>
available only for a wx.App type file will show all the files in the
project with the number of todo's per file.</li>

  <li>The <b>UML View</b> shows the relationships between
classes.</li>

  <li>The <b>Imports View</b> shows the relationships between modules.</li>

  <li>The <span style="font-weight: bold;">Diff with: View</span> is
created by selecting the menu option File/NDiff files, it will compare
the already open file with the one you select.<br>

  </li>

  <li>The other views should be obvious.<br>

  </li>

</ul>

<span style="font-weight: bold;">The icons available on the Editor
window toolbar for a wxFrame file are:</span><br>

<br>

<span style="font-weight: bold;">Note:</span> The icons available on
this toolbar change depending on the active file.<br>

<br>

<img alt="Editor toolbar - File icons" title="Editor toolbar - File icons" src="image/EditorToolBarFileIcons.png" style="width: 146px; height: 23px;"><br>

<br>

The icons above allow you to open, close, save, save-as files and
Browse forward/backward icons allow you to jump to marked possitions
(CTRL-M).<br>

<br>

<img alt="Editor toolbar - Run icons" title="Editor toolbar - Run icons" src="image/EditorToolBarRunIcons.png" style="width: 66px; height: 21px;"><br>

<br>

The icons above let you run the application, run the module or debug
the application.<br>

<br>

<img alt="Editor toolbar - source icons" title="Editor toolbar - source icons" src="image/EditorToolBarSourceIcons.png" style="width: 72px; height: 20px;"><br>

<br>

The icons above let you profile the module, check the source, or start
the frame designer (sometimes also refered to as GUI Editor).<br>

<br>

<img alt="Editor toolbar - copypaste Icons" title="Editor toolbar - copypaste Icons" src="image/EditorToolBarCopyPasteIcons.png" style="width: 188px; height: 22px;"><br>

<br>

The icons above let you Refresh the screen, Undo, Redo, Cut, Copy and
Paste.<br>

<br>

<img alt="Editor toolbar - Search icons" title="Editor toolbar - Search icons" src="image/EditorToolBarSearchIcons.png" style="width: 76px; height: 23px;"><br>

<br>

The icons above let you Find/Replace, Find again, and print the source.<br>

<br>

<img alt="Editor toolbar - Other icons" title="Editor toolbar - Other icons" src="image/EditorToolBarOthersIcons.png" style="width: 117px; height: 23px;"><br>

<br>

The icons above let you run to the cursor (in debugger), toggle a
breakpoint (you can also use F5), insert module information (Author
name etc, this can be customized, see <a href="node31.html">Module Info</a>),
and help.<br>

<br>

<span style="font-weight: bold;">Some helpfull short-cuts:<span style="font-weight: bold;"><br>

</span></span>
<ul>

  <li>To jump to assignment -&nbsp;press CTRL and hover the mouse pointer over the
attribute, a blue underline will show and if you click
on it the editor will jump to the definition (if Boa can find it).</li><li>CTRL-space will give you code completion, e.g. after entering
"wx.F" press CTRL-space</li>

  <li>CTRL-SHIFT-space will give me you call tips, e.g. after entering
"wx.Frame(" press CTRL-SHIFT-space</li>

  <li>ALT-O (only available with the ErrOutShortcut plug-in) will show
the notebook with the Tracebacks, Output, Errors and Tasks tabs or if
it is shown will hide it.<br>

  </li>

</ul>

<span style="font-weight: bold;"><span style="font-weight: bold;"></span></span><!--Start of Navigation Panel-->
<div class="navigation">&nbsp;
<table cellpadding="0" cellspacing="2" width="100%">

  <tbody>

    <tr>

      <td height="32" width="32"><a href="node4.html"><img src="icons/next.gif" alt="Next Page" border="0" height="32" width="32"></a></td>

      <td height="32" width="32"><a href="index.html"><img src="icons/up.gif" alt="Up One Level" border="0" height="32" width="32"></a></td>

      <td height="32" width="32"><a href="node2.html"><img src="icons/previous.gif" alt="Previous Page" border="0" height="32" width="32"></a></td>

      <td align="center" bgcolor="#99ccff" width="100%"><b>Getting
Started Guide
for Boa Constructor</b></td>

      <td height="32" width="32"><a href="index.html"><img src="icons/contents.gif" alt="Contents" border="0" height="32" width="32"></a></td>

      <td height="32" width="32"><img src="icons/blank.gif" border="0" height="32" width="32"></td>

      <td height="32" width="32"><img src="icons/blank.gif" border="0" height="32" width="32"></td>

    </tr>

  
  </tbody>
</table>

<b>Next:<span class="sectref"></span></b><a href="node4.html">The
Designer Window</a><b>Up:<span class="sectref"></span></b><a href="index.html">Getting
Started Guide for Boa Constructor</a> <b>Previous:<span class="sectref"></span></b><a href="node2.html">The
Palette Window</a>
<br>

<hr></div>

<!--End of Navigation Panel-->
</body></html>