<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>
DelphiDabbler.com: CodeSnip Design Notes
</title>
<style type="text/css">
<!--
html {
font-family: Verdana, Arial, mono;
font-size: 9pt;
}
.heading {
font-size: 15pt;
font-weight: bold;
padding: 6px;
border: 1px silver solid;
margin-top: 0px;
margin-bottom: 12px;
text-align: center;
background-color: #EEEEEE;
}
h1 {
font-size: 15pt;
font-weight: bold;
}
h2 {
font-size: 13pt;
font-weight: bold;
}
h3 {
font-size: 11pt;
font-weight: bold;
}
h4 {
font-size: 9pt;
font-weight: bold;
}
p {
margin-top: 12px;
margin-bottom: 12px;
}
ul, ol {
padding: 0;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 3em;;
}
li.spaced {
margin-top: 8px;
}
table.gui {
background-color: silver;
}
td.gui, th.gui {
background-color: white;
}
div.copyright,
div.copyright a:link,
div.copyright a:visited,
div.copyright a:active {
margin: 0px;
margin-top: 4px;
font-size: 8pt;
text-align: right;
color: silver;
}
.delphi {
color: blue;
}
.lib {
color: red;
}
-->
</style>
</head>
<body>
<div class="heading">CodeSnip Design Notes</div>
<h1>GUI</h1>
<p>The GUI is represented schematically below:</p>
<table class="gui" cellspacing="2" cellpadding="0" width="100%">
<tr>
<td class="gui"
style="background-color: #CCCCFF; vertical-align: top;">
<div style="text-align: center; padding: 4px;">
<strong>Main Menu / Main Toolbar</strong>
</div>
</td>
</tr>
<tr>
<td class="gui"
style="background-color: #FFCCCC; vertical-align: top;">
<div style="text-align: center; padding: 4px;">
<strong>Main Display</strong>
</div>
<div style="padding: 4px;">
<table class="gui" cellspacing="2" cellpadding="0" width="100%">
<tr>
<td class="gui" height="30px;" width="20%"
style="background-color: #FFFFCC; vertical-align: top;">
<div style="padding: 4px; text-align: center;">
<strong>Overview Pane</strong>
</div>
<div style="padding: 4px; text-align: left;">
Displays an overview of the routines available in the code
snip database. Contains 2 views:<br />
(1) that lists all routines uncategorised<br />
(2) that groups routines in categories.
</div>
</td>
<td class="gui"
style="background-color: #BBFFBB; vertical-align: top;">
<div style="text-align: center; padding: 4px;">
<strong>Details Pane</strong>
</div>
<div style="text-align: center; padding: 4px;">
Determines which if two detail panes is displayed: either a
Detail pane or a Compiler pane. One of the two panes below
is displayed:
</div>
<div style="padding: 4px;">
<table class="gui" cellspacing="2" cellpadding="2"
width="100%" style="background-color: #CCFFCC;">
<tr>
<td width="50%"
style="background-color: #DDFFCC; vertical-align: top;" >
<div style="text-align: center; padding: 4px;">
<strong>Information Pane</strong>
</div>
<div style="text-align: left; padding: 4px;">
Displays detail of currently selected item which can
be one of
</div>
<ul style="margin-top: 0px; margin-left: 20px; padding: 4px;">
<li>A routine: displays info about the routine.</li>
<li>A category: displays list of routines in
category.</li>
<li>Header of uncategorised display: displays list
of all routines with descriptions</li>
<li>Welcome page.</li>
</ul>
</td>
<td width="50%"
style="background-color: #CCFFDD; vertical-align: top;" >
<div style="padding: 4px; text-align: center;">
<strong>Compile Pane</strong>
</div>
<div style="padding: 4px; text-align: left;">
Displays a page where a routine can be test
compiled in one of installed versions of
Delphi, or displays welcome page. If
currently selected item is not a routine
and not displaying welcome page this page
carries a message saying to select a
routine.
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="gui"
style="background-color: #FFCCAA; vertical-align: top;">
<div style="text-align: center; padding: 4px;">
<strong>Status Bar</strong>
</div>
</td>
</tr>
</table>
<p>The GUI is divided conceptually into <em>command</em> and <em>display</em>
subsystems. The <em>command</em> subsystem manages user input and the
<em>display</em> subsytem handles output.</p>
<p>Each of the GUI components noted above takes some responsibility for
processing commands and displaying data as described below.</p>
<table class="gui" width="100%" cellspacing="1" cellpadding="4">
<tr>
<td width="20%" style="background-color: #CCCCFF;">
<strong>Main Menu / Main Toolbar</strong>
</td>
<td width="80%" class="gui">
<div style="margin-bottom: 4px;"><em>Display:</em>
Most menu items and toolbar items have no specific objects used to
manipulate the way they display. However, some, like the forward
and backward navigation controls are managed by manager object.</div>
<div><em>Commands:</em>
Each menu item and toolbar item has an associated action that is
handled by event handlers in the main form (see below) or by custom
actions.</div>
</td>
</tr>
<tr>
<td width="20%" style="background-color: #FFCCCC;">
<strong>Main Display</strong>
</td>
<td width="80%" class="gui">
<div style="margin-bottom: 4px;"><em>Display:</em>
The main display is managed by a
master object that implements some of the high level display
logic. It hands detailed display duties over to other display
objects (below).</div>
<div style="margin-bottom: 4px;"><em>Commands:</em>
This object has no command duties: it simply reports changes of
display to the owner object (main form).</div>
</td>
</tr>
<tr>
<td width="20%" style="background-color: #FFFFCC;">
<strong>Overview Pane</strong>
</td>
<td width="80%" class="gui">
<div style="margin-bottom: 4px;"><em>Display:</em>
Manages the overview routine list (treeview) and the overview
tabs (tab set). Clicking a tab causes a change of display format
(either uncategorised or categorised). All the controls in this view
are encapsulated in a frame. Can be instructed by the Main Display
object to highlight a particular item.</div>
<div><em>Commands:</em>
Selecting a item in the treeview initiates a display command - this
triggers an action in the main form which is passed on to the Main
Display object for implementation. Note that clicking a tab is not
reported as a command since this has an impact only within the pane
and does not change the view elsewhere in the display.</div>
</td>
</tr>
<tr>
<td width="20%" style="background-color: #BBFFBB;">
<strong>Details Pane</strong>
</td>
<td width="80%" class="gui">
<div style="margin-bottom: 4px;"><em>Display:</em>
Has a manager object that simply selects a new tab when
instructed by the Main Display object. This pane is implemented
within a frame that contains a page control that contains other
frames that hold the controls needed by each different detail
view.
</div>
<div><em>Commands:</em>
Triggers an action when a tab control is clicked that is handled
in the main form. The main form instructs the Main Display
object to change the detail view accordingly.
</div>
</td>
</tr>
<tr>
<td width="20%" style="background-color: #DDFFCC;">
<strong>Information Pane</strong>
</td>
<td width="80%" class="gui">
<div style="margin-bottom: 4px;"><em>Display:</em>
This detail display is managed by an object that displays the
current selected view item in a web browser control. This
manager object creates the require HTML. The pane is implemented
in a frame.
</div>
<div><em>Commands:</em>
Some view items display links in the web browser that, when
clicked, perform some action. This is handled by a command
object that both implements the web browser's
"external" object and triggers the appropriate action.
The action is managed by the main form which calls on the
appropropriate object to implement it.
</div>
</td>
</tr>
<tr>
<td width="20%" style="background-color: #CCFFDD;">
<strong>Compile Pane</strong>
</td>
<td width="80%" class="gui">
<div style="margin-bottom: 4px;"><em>Display:</em>
Displays current compiler details to the user and provides
controls that can be used to test-compile a selected unit.
If the currently selected view item is not a routine this area
displays a message to that effect and hides controls.
</div>
<div><em>Commands:</em>
Each control in this area is associated with an action that is
handled by the main form which in turn calls the appropriate
object to handle the action.
</div>
</td>
</tr>
<tr>
<td width="20%" style="background-color: #FFCCAA;">
<strong>Status Bar</strong>
</td>
<td width="80%" class="gui">
<div style="margin-bottom: 4px;"><em>Display:</em>
Displays status information. Updated via action objects.
</div>
<div><em>Commands:</em>
No commands issued.
</div>
</td>
</tr>
<tr>
<td width="25%" class="gui">
<strong>Main Form</strong>
</td>
<td width="80%" class="gui">
<div style="margin-bottom: 4px;"><em>Display:</em>
Handles the display of GUI widgets that do not form part of the
main display - e.g. the splitter bar, the size and location of
the main window etc. Any "commands" that are purely
concerned with main display items are not necessarily handled
by actions but may use event handlers. Several helper objects
are created and maintained by the main form.
</div>
<div><em>Commands:</em>
All commands issued by other GUI components as actions are
handled by the main form. Top level logic is handled here to
convert the action request into a form that can be handled by
some other display or other object. Some simple, none display
related actions may be entirely implemented in the main form.
</div>
</td>
</tr>
</table>
<h1>Handling GUI Events</h1>
<p>There are several ways in which the user can intiate events in the GUI:</p>
<ul>
<li>Menu items</li>
<li>Tool buttons</li>
<li>Tab sets in overview and detail panes</li>
<li>Changing selection in tree view</li>
<li>Clicking links in web browser controls</li>
</ul>
<p>All possible GUI events ultimately result in an Action being triggered. The
following schematic shows how CodeSnip responds to events in the GUI and causes
actions to be triggered:</p>
<p style="text-align: center;">
<img src="GUIEvents.gif" width="456" height="178" border=0" />
</p>
<p>Triggering actions is quite straightforward in the case of menu items and
tool buttons. They have actions associated with them at design time that are
automatically triggered when the menu item or toolbutton is clicked.</p>
<p>For tabs (TTabSet and TPageControl) and the tree view this is not so
straightforward since appropriate actions can't be directly associated. Instead
events in these controls are handled by event handlers, which ultimately call
a method of the "notifier" object (described later).</p>
<p>The web browser controls can also trigger GUI events as a result of the user
clicking links or pressing buttons in HTML forms. The web browser's DOM provides
an "external" object that can be used to transmit these events to the
main application. We define an object that extends the "external"
object with methods that can be called from within the browser. The
"external" object calls methods of the notifier object in response to
these events.</p>
<p>The notifier object has knowledge of various Action objects that can be
triggered when the notifier's methods are called. Some of these actions are
simple actions, some are standard actions and others are custom actions defined
in CodeSnip. The notifier object therefore provides a means for objects that
can't natively trigger actions to cause actions to be triggered.</p>
<p>Most actions are handled in OnExecute event handlers in the main form. Some
of these simply manipulate some values and then cause a further action to be
triggered via the Notifier object. Most lead to the main form implementing the
action, either directly or via subsidiary objects. A few standard and custom
actions lead directly to the requested command being carried out.</p>
<h1>Class Heirachies</h1>
<h2>Frames</h2>
<pre><span class="delphi">[TFrame]</span>
|
+-- TBrowserBaseFrame
| |
| +-- TDetailViewFrame
| | |
| | +-- TCompCheckFrame
| | |
| | +-- TInfoFrame
| |
| +-- THTMLDlgFrame
| | |
| | +-- TFixedHTMLDlgFrame
| | |
| | +-- THTMLTpltDlgFrame
| |
| +-- THTMLPreviewFrame
| |
| +-- TNewsHTMLFrame
|
+-- TCheckedTVFrame
| |
| +-- TSelectSnippetsFrame
| |
| +-- TSelectUserSnippetsFrame
|
+-- TMemoPreviewFrame
| |
| +-- TRTFPreviewFrame
| |
| +-- TTextPreviewFrame
|
+-- TNewsFrame
|
+-- TPrefsBaseFrame
| |
| +-- TGeneralPrefsFrame
| |
| +-- THiliterPrefsFrame
| |
| +-- TPrintingPrefsFrame
| |
| +-- TSourcePrefsFrame
|
+-- TRTFShowCaseFrame
|
+-- TTitledFrame
|
+-- TDetailFrame
|
+-- TOverviewFrame</pre>
<h2>Forms</h2>
<pre><span class="delphi">[TForm]</span>
|
+-- TBaseForm
|
+-- THelpAwareForm
| |
| +-- TGenericDlg
| | |
| | +-- TGenericOKDlg
| | | |
| | | +-- TCodeExportDlg
| | | |
| | | +-- TCompilersDlg
| | | |
| | | +-- TEditTextDlg
| | | |
| | | +-- TFindCompilerDlg
| | | |
| | | +-- TFindTextDlg
| | | |
| | | +-- TFindXRefsDlg
| | | |
| | | +-- TPreferencesDlg
| | | |
| | | +-- TPrintDlg
| | | |
| | | +-- TSelectionSearchDlg
| | | |
| | | +-- TUserDBEditDlg
| | |
| | +-- TGenericViewDlg
| | | |
| | | +-- THTMLViewDlg
| | | | |
| | | | +-- TAboutDlg
| | | | |
| | | | +-- TCompErrorDlg
| | | |
| | | +-- TPreviewDlg
| | | |
| | | +-- TUpdateDlg
| | |
| | +-- TMailingListDlg
| | |
| | +-- TWizardDlg
| | |
| | +-- TBugReportDlg
| | |
| | +-- TCodeSubmitDlg
| | |
| | +-- TRegistrationDlg
| |
| +-- TMainForm
|
+-- TSplashForm
|
+-- TWaitDlg</pre>
<h2>Common Dialogs</h2>
<pre><span class="delphi">[TCommonDialog]</span>
|
+-- <span class="delphi">[TColorDialog]</span>
| |
| +-- TColorDialogEx
|
+-- <span class="delphi">[TOpenDialog]</span>
| |
| +-- <span class="delphi">[TSaveDialog]</span>
| | |
| | +-- TSaveDialogEx
| | |
| | +-- TSaveSourceDlg
| |
| +-- TOpenDialogEx
|
+-- <span class="delphi">[TPageSetupDialog]</span>
|
+-- TPageSetupDialogEx
</pre>
<h2>Actions</h2>
<pre><span class="delphi">[TBasicAction]</span>
|
+-- <span class="delphi">[TContainedAction]</span>
| |
| +-- <span class="delphi">[TCustomAction]</span>
| |
| +-- TLinkAction
|
+-- TCompLogAction
|
+-- TEditRoutineAction
|
+-- TRoutineAction
|
+-- TTestCompileAction
|
+-- TViewItemAction</pre>
<h2>Menus and Menu items</h2>
<pre><span class="delphi">[TPopupMenu]</span>
|
+-- TAbstractWBPopupMenu
| |
| +-- TWBNulPopupMenu
| |
| +-- TWBPopupMenu
| |
| +-- TWBDefaultPopupMenu
|
+-- THistoryMenu
|
+-- TBackHistoryMenu
|
+-- TForwardHistoryMenu</pre>
<pre><span class="delphi">[TMenuItem]</span>
|
+-- THistoryMenuItem
|
+-- TWBTempMenuItem</pre>
</body>
</html>
