101 lines
3.8 KiB
HTML
101 lines
3.8 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<html>
|
|
<head>
|
|
<meta content="text/html; charset=UTF-8"
|
|
http-equiv="content-type">
|
|
<title>File Conventions</title>
|
|
<meta content="$Author$" name="author">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>Preface</h1>
|
|
This document is part of the <a href="http://campcaster.sourcefabric.org/">Campcaster</a>
|
|
project, Copyright © 2007 <a href="http://www.mdlf.org/">Media
|
|
Development Loan Fund</a>, under the GNU <a
|
|
href="http://www.gnu.org/licenses/gpl.html">GPL</a>.<br>
|
|
<ul>
|
|
<li>Author: $Author$</li>
|
|
<li>Version: $Revision$</li>
|
|
<li>Location: $URL$</li>
|
|
</ul>
|
|
|
|
<h1>Scope</h1>
|
|
|
|
This document describes the conventions used for the Glade window design files.<br>
|
|
|
|
|
|
<h1>Introduction</h1>
|
|
|
|
The following are spacing and other conventions observed in the Glade files
|
|
<code>src/products/gLiveSupport/var/glade/*.glade</code>. They are loosely
|
|
based on the design documentation <code>styleguide.pdf</code>.
|
|
|
|
|
|
<h1>Structural conventions</h1>
|
|
|
|
<p>Each toplevel has its own file, named the same as the C++ class which
|
|
controls it, with the extension <code>.glade</code>. For example:
|
|
<code>ScratchpadWindow.glade</code>, <code>LiveModeWindow.glade</code>.
|
|
Pop-up dialogs which do not have their own class go into the Glade file
|
|
of the toplevel which pops them up.
|
|
|
|
<p>Each toplevel should be a GtkWindow, except for pop-ups like the Login
|
|
window, confirmation dialogs etc., which are GtkDialogs or subclasses of it.</p>
|
|
|
|
<p>Always use boxes, because this assures that the widgets get positioned
|
|
and resized properly when the window is resized. Each toplevel should
|
|
contain a single GtkVBox, which contains some number of GtkHBoxes and
|
|
GtkHButtonBoxes, which in turn contain the widgets.</p>
|
|
|
|
<p>If a group of widgets belong logically together, put them in their own
|
|
GtkHBox or GtkVBox.</p>
|
|
|
|
|
|
<h1>Naming conventions</h1>
|
|
|
|
<p>Widgets which need to be referred to from the controlling class should
|
|
have a camelCased name followed by "1", with the function of the widget first
|
|
and the kind of the widget second: e.g., <code>playButton1</code>,
|
|
<code>fileNameEntry1</code>, <code>scratchpadTreeView1</code>. Such names
|
|
must be unique in their own Glade file. If there is a group of
|
|
widgets with same function, they should be numbered starting with 1,
|
|
like this: <code>myGroupButton1</code>, <code>myGroupButton2</code>,
|
|
<code>myGroupButton3</code> etc.</p>
|
|
|
|
<p><em>The reason for the "1" at the end of names, and for the unusual
|
|
1-based numbering for groups of widgets is that this is how Glade does it.
|
|
If you follow these guidelines, and copy or move part of the window using
|
|
copy-paste, the widget names will stay correct. If a widget had a name
|
|
without a number, and you cut and then repasted it, its name would get an
|
|
extra "1" at the end.</em></p>
|
|
|
|
<p>Widgets which do not need to be referred can keep their Glade-assigned
|
|
names like <code>treeview3</code>; these do not need to be unique.</p>
|
|
|
|
|
|
<h1>Sizing conventions</h1>
|
|
<p>Each toplevel should have a border width of <strong>8 pixels</strong>.</p>
|
|
|
|
<p>Use spacing, not padding. For example, if some widgets are packed into
|
|
<code>hbox1</code>, and we want 8 pixels between each widget, set the spacing
|
|
of <code>hbox1</code> to 8 pixels; leave the padding of the widgets at 0.
|
|
To put some space before the first and after the last widget, set the spacing
|
|
of the outer box which contains <code>hbox1</code>.
|
|
For finetuning, if spacing can not be used, you can add padding to boxes,
|
|
but not to widgets.</p>
|
|
|
|
<p>Normal spacing between widgets is <strong>8 pixels</strong>. Spacing
|
|
between related widgets (e.g., an input field and its label) is
|
|
<strong>3 pixels</strong>.</p>
|
|
|
|
|
|
<h1>Other conventions</h1>
|
|
<p>Use stock buttons whenever possible. This makes the application behave
|
|
much nicer with themes.</p>
|
|
|
|
<br><br><br>
|
|
|
|
</body>
|
|
</html>
|