Menu
▾
▴
[Gtk2hs-commit] (main branch): XHTML-ize and CSS-ify ToC and chapters 3 and 4; renumber ToC
|
From: Duncan C. <dun...@wo...> - 2007-09-12 16:01:04
|
Thu Sep 6 14:03:32 PDT 2007 Alex Tarkovsky <ale...@gm...>
* XHTML-ize and CSS-ify ToC and chapters 3 and 4; renumber ToC
move ./docs/tutorial/Tutorial_Port/chap3.html ./docs/tutorial/Tutorial_Port/chap3.xhtml
move ./docs/tutorial/Tutorial_Port/chap4.html ./docs/tutorial/Tutorial_Port/chap4.xhtml
hunk ./docs/tutorial/Tutorial_Port/chap1.html 1
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
-<html>
-<head>
- <meta name="generator" content=
- "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org">
- <meta http-equiv="CONTENT-TYPE" content=
- "text/html; charset=us-ascii">
-
- <title>Gtk2Hs Tutorial</title>
-</head>
-
-<body lang="en-US" text="#000000" link="#0000FF" vlink="#840084"
-bgcolor="#FFFFFF" dir="ltr">
- <h2 align="center"><a name="Gtk2Hs-TUT" id=
- "Gtk2Hs-TUT"></a><a name="AEN2" id="AEN2"></a>Gtk2Hs Tutorial
- (part 1)</h2>
-
- <h3>Hans van Thiel</h3>
- <hr>
- <br>
- <br>
-
- <h3>The start of a port and adaptation to Gtk2Hs of the:</h3>
-
- <h3>GTK+2.0 Tutorial by</h3>
-
- <h3><a name="AEN6" id="AEN6"></a>Tony Gale</h3>
-
- <h3><a name="AEN9" id="AEN9"></a>Ian Main</h3>
-
- <h3><a name="AEN12" id="AEN12"></a>& the GTK team</h3>
- <hr>
-
- <dl>
- <dt><b>Table of Contents</b></dt>
-
- <dt><br>
- <br>
- Introduction and Overview: not available yet...</dt>
-
- <dt><br>
- <a href="chap3.html">Getting Started</a></dt>
-
- <dt><br>
- <a href="chap4.html">Packing Widgets</a></dt>
-
- <dt><br>
- <a href="chap5a.html">Packing Demonstration Program</a></dt>
-
- <dt><br>
- <a href="chap5b.html">Packing Using Tables</a></dt>
-
- <dt><br>
- <a href="chap6.html">The Button Widget</a></dt>
-
- <dt><br>
- <a href="chap7.html">Adjustments, Scale and Range</a></dt>
- </dl><br>
-
- <dl>
- <dt><br>
- <a href="chap8.html">Labels</a></dt>
-
- <dt><br>
- <a href="chap9.html">Arrows and Tooltips</a></dt>
-
- <dt><br>
- <a href="chap10.html">Dialogs, Stock Items and Progress
- Bars</a></dt>
-
- <dt><br>
- <a href="chap11.html">Text Entries and Statusbars</a></dt>
- </dl><br>
- <hr>
- <br>
-
- <h1><a name="CH-COPYRIGHT" id="CH-COPYRIGHT"></a>Tutorial
- Copyright and Permissions Notice</h1>
-
- <p>The GTK Tutorial is Copyright (C) 1997 Ian Main.</p>
-
- <p>Copyright (C) 1998-2002 Tony Gale.</p>
-
- <p>Copyright (C) 2007 Hans van Thiel</p>
-
- <p>Permission is granted to make and distribute verbatim copies
- of this manual provided the copyright notice and this permission
- notice are preserved on all copies.</p>
-
- <p>Permission is granted to copy and distribute modified versions
- of this document under the conditions for verbatim copying,
- provided that this copyright notice is included exactly as in the
- original, and that the entire resulting derived work is
- distributed under the terms of a permission notice identical to
- this one.</p>
-
- <p>Permission is granted to copy and distribute translations of
- this document into another language, under the above conditions
- for modified versions.</p>
-
- <p>If you are intending to incorporate this document into a
- published work, please contact the maintainer, and we will make
- an effort to ensure that you have the most up to date information
- available.</p>
-
- <p>There is no guarantee that this document lives up to its
- intended purpose. This is simply provided as a free resource. As
- such, the authors and maintainers of the information provided
- within can not make any guarantee that the information is even
- accurate.</p>
- <hr>
-
- <table summary="links to other pages" width="100%" border="0"
- cellpadding="0" cellspacing="0">
- <tr valign="top">
- <td width="33%">
- <p align="left"><br></p>
- </td>
-
- <td width="34%">
- <p align="center"><br></p>
- </td>
-
- <td width="33%">
- <p align="right"><a href="chap3.html">Next
- >>></a></p>
- </td>
- </tr>
-
- <tr valign="top">
- <td width="33%">
- <p align="left"><br></p>
- </td>
-
- <td width="34%">
- <p align="center"> </p>
- </td>
-
- <td width="33%">
- <p align="right"><br></p>
- </td>
- </tr>
- </table>
-</body>
-</html>
rmfile ./docs/tutorial/Tutorial_Port/chap1.html
addfile ./docs/tutorial/Tutorial_Port/default.css
addfile ./docs/tutorial/Tutorial_Port/index.xhtml
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 1
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-
-<html>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 5
- <meta name="generator" content=
- "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org">
- <meta http-equiv="CONTENT-TYPE" content=
- "text/html; charset=us-ascii">
-
- <title>Getting Started</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>Gtk2Hs Tutorial: Getting Started</title>
+ <link href="default.css" type="text/css" rel="stylesheet" />
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 10
-<body lang="en-US" text="#000000" link="#0000FF" vlink="#840084"
-bgcolor="#FFFFFF" dir="ltr">
- <table summary="links to other pages" width="100%" border="0"
- cellpadding="0" cellspacing="0">
- <tr>
- <th colspan="3">
- <p align="center">Gtk2Hs Tutorial</p>
- </th>
- </tr>
-
- <tr valign="bottom">
- <td width="10%">
- <p align="left"><a href=
- "chap1.html"><<<Previous</a></p>
- </td>
+<body>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 12
- <td width="80%"></td>
+<div id="header">
+ <h1>Gtk2Hs Tutorial</h1>
+ <span class="nav-previous"><a href="index.xhtml">Previous</a></span>
+ <span class="nav-home"><a href="index.xhtml">Home</a></span>
+ <span class="nav-next"><a href="chap4.xhtml">Next</a></span>
+</div>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 19
- <td width="10%">
- <p align="right"><a href="chap4.html">Next
- >>></a></p>
- </td>
- </tr>
- </table>
- <hr>
+<h2>Getting Started</h2>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 21
- <h3><a name="CH-GETTINGSTARTED" id=
- "CH-GETTINGSTARTED"></a>Getting Started</h3>
+<p>
+The first thing to do, of course, is download Gtk2Hs and install it. You can
+always get the latest version from
+<a href="http://haskell.org/gtk2hs/">http://haskell.org/gtk2hs/</a> and several
+Linux versions have their own Gtk2Hs packages. For Windows there is an
+installer available.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 29
- <p>The first thing to do, of course, is download Gtk2Hs and
- install it. You can always get the latest version from <a href=
- "http://haskell.org/gtk2hs/">http://haskell.org/gtk2hs/</a> and
- several Linux versions have their own Gtk2Hs packages. For
- Windows there is an installer available.</p>
+<p>
+The next thing is to open the Gtk2Hs API reference documentation for your
+version. You will need to use this extensively to be able to find the names for
+widgets, methods, attributes and signals you might want to use. The contents
+lists all modules and there is also an index. Inside each module description
+there is also a class hierarchy. If a method, attribute or signal you expect is
+missing, it might belong to one of the superclasses of which your widget type
+is an instance.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 39
- <p>The next thing is to open the Gtk2Hs API reference
- documentation for your version. You will need to use this
- extensively to be able to find the names for widgets, methods,
- attributes and signals you might want to use. The <i>contents</i>
- list all modules and there is also an <i>index</i>. Inside each
- module description there is also a class hierarchy. If a method,
- attribute or signal you expect is missing, it might belong to one
- of the superclasses of which your widget type is an instance.</p>
+<p>
+To begin our introduction to Gtk2Hs, we'll start with the simplest program
+possible. This program will create a 200x200 pixel window and has no way of
+exiting except to be killed by using the shell.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 45
- <p>To begin our introduction to Gk2Hs, we'll start with the
- simplest program possible. This program will create a 200x200
- pixel window and has no way of exiting except to be killed by
- using the shell.</p>
+<p><img src="./Images/GtkChap3a.png" alt="GtkChap3a" id="GtkChap3a" /></p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 47
- <p><img src="./Images/GtkChap3a.png" align="bottom" alt=
- "GtkChap3a"></p>
-
- <table summary="haskell code" width="100%" border="0"
- cellpadding="2" cellspacing="2" bgcolor="#E0E0E0">
- <tr>
- <td>
- <pre>
+<pre class="codebox">
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 57
- </td>
- </tr>
- </table>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 58
- <p>You can compile the above program with the Glasgow Haskell
- Compiler (GHC) using:</p>
+<p>
+You can compile the above program with the Glasgow Haskell Compiler (GHC)
+using:
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 63
- <p><tt>ghc --make GtkChap3a.hs -o Chap3a</tt></p>
+<pre class="codebox">
+ghc --make GtkChap3a.hs -o Chap3a
+</pre>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 67
- <p>assuming GtkChap3a.hs is the filename. Alternatively you can
- use the interactive GHCi, for earlier and later versions of
- Gtk2Hs. (Because of threading problems intermediate versions will
- not work interactively. Gtk2Hs does not work with Hugs.)</p>
+<p>
+assuming <code>GtkChap3a.hs</code> is the filename. Alternatively you can use
+the interactive GHCi, for earlier and later versions of Gtk2Hs. (Because of
+threading problems intermediate versions will not work interactively. Gtk2Hs
+does not work with Hugs.)
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 74
- <p>The first line imports the Gtk2Hs graphics library.</p>
+<p>
+The first line of the program imports the Gtk2Hs graphics library.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 78
- <p>All Gtk2Hs programs run in main and the first line:</p>
+<p>
+All Gtk2Hs programs run in <code>main</code>. The first line of that function's
+<code>do</code> block:
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 83
- <table summary="haskell code" width="100%" border="0"
- cellpadding="2" cellspacing="2" bgcolor="#E0E0E0">
- <tr>
- <td>
- <pre>
+<pre class="codebox">
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 86
- </td>
- </tr>
- </table>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 87
- <p>is called in all Gk2Hs applications. The next two lines of
- code create and display a window.</p>
+<p>
+is a function called in all Gtk2Hs applications.
+</p>
+
+<p>
+The next two lines in the block create and display a window and its contents:
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 95
- <table summary="haskell code" width="100%" border="0"
- cellpadding="2" cellspacing="2" bgcolor="#E0E0E0">
- <tr>
- <td>
- <pre>
+<pre class="codebox">
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 99
- </td>
- </tr>
- </table>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 100
- <p>Rather than create a window of 0x0 size, a window without
- children is set to 200x200 by default so you can still manipulate
- it. Widgets that can be visible (not all can) may be shown or
- hidden using their own methods, but the second line works on a
- widget (here the window) and all its children.</p>
+<p>
+Rather than create a window of 0x0 size, a window without children is set to
+200x200 by default so you can still manipulate it. Widgets that can be visible
+(not all can) may be shown or hidden using their own methods, but the second
+line works on a widget (here the window) and all its children.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 107
- <p>The last line enters the Gtk2Hs main processing loop.</p>
+<p>
+The last line of <code>main</code> enters the Gtk2Hs main processing loop:
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 111
- <table summary="haskell code" width="100%" border="0"
- cellpadding="2" cellspacing="2" bgcolor="#E0E0E0">
- <tr>
- <td>
- <pre>
+<pre class="codebox">
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 114
- </td>
- </tr>
- </table>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 115
- <p>mainGUI is another call you will see in every Gtk2Hs
- application. When control reaches this point, Gtk2Hs will sleep
- waiting for X events (such as button or key presses), timeouts,
- or file IO notifications to occur. In our simple example,
- however, events are ignored.</p>
+<p>
+and is another call you will see in every Gtk2Hs application. When control
+reaches this point, Gtk2Hs will sleep waiting for X events (such as button or
+key presses), timeouts, or file IO notifications to occur. In our simple
+example, however, events are ignored.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 122
- <h3><a name="SEC-HELLOWORLD" id="SEC-HELLOWORLD"></a>Hello World
- in Gtk2Hs</h3>
+<h3>"Hello World" in Gtk2Hs</h3>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 124
- <p>Now for a program with a widget (a button). It's the classic
- hello world à la Gtk2Hs.</p>
+<p>
+Now for a program with a widget (a button): the classic "hello world" à
+la Gtk2Hs.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 129
- <p><img src="./Images/GtkChap3b.png" name="graphics2" align=
- "bottom" alt="GtkChap3b" id="graphics2"></p>
+<p><img src="./Images/GtkChap3b.png" alt="GtkChap3b" id="GtkChap3b" /></p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 131
- <p>If the button is clicked it will display the text <i>Hello
- World</i>. This is implemented in the Haskell function
- <i>hello</i> with a button <i>b</i> as its argument. The type
- declaration actually states the type variable <i>o</i> is an
- instance of class <i>ButtonClass</i>. Gtk2Hs extensively uses
- Haskell classes to map the object hierarchy of the original Gtk
- widgets. Each widget in Gtk2Hs, of course, has a Haskell
- type.</p>
+<p>
+If the button is clicked it will display the text "Hello World". This is
+implemented in the Haskell function <code>hello</code> with a button
+<var>b</var> as its argument. The type declaration actually states the type
+variable <var>o</var> is an instance of class <code>ButtonClass</code>. Gtk2Hs
+extensively uses Haskell classes to map the object hierarchy of the original
+GTK widgets. Each widget in Gtk2Hs, of course, has a Haskell type.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 140
- <p>Widgets, and the classes their types belong to, usually have
- attributes. These can be set either by named methods or by the
- general <i>set</i> function, which uses a list-like notation as
- shown below. Of special interest here is the
- <i>containerChild</i> attribute of the window (actually a
- superclass of the window) which states the relationship with the
- button. Because of this <i>widgetShowAll window</i> will also
- make the button visible.</p>
+<p>
+Widgets, and the classes their types belong to, usually have attributes. These
+can be set either by named methods or by the general <code>set</code> function,
+which uses a list-like notation as shown below. Of special interest here is the
+<code>containerChild</code> attribute of the window (actually of a superclass
+of the window) which states the relationship with the button. Because of this
+relationship <code>widgetShowAll window</code> will also make the button
+visible.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 150
- <p>Widgets are connected to other widgets in a graphical
- dependency tree (not to be confused with the class hierarchy).
- Gtk2hs also works with the Glade visual interface designer and,
- if you use Glade, such connections are visible in the <i>Widget
- tree</i> window. There is a <a href=
- "http://haskell.org/gtk2hs/docs/tutorial/glade/">separate
- introductory tutorial</a> on how to use Glade with Gtk2Hs.</p>
+<p>
+Widgets are connected to other widgets in a graphical dependency tree (not to
+be confused with the class hierarchy). Gtk2Hs also works with the Glade visual
+interface designer and, if you use Glade, such connections are visible in the
+<i>Inspector</i> pane. There is a
+<a href="http://haskell.org/gtk2hs/docs/tutorial/glade/">separate introductory
+tutorial</a> on how to use Glade with Gtk2Hs.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 159
- <table summary="haskell code" width="100%" border="0"
- cellpadding="2" cellspacing="2" bgcolor="#E0E0E0">
- <tr>
- <td>
- <pre>
+<pre class="codebox">
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 171
- containerChild := button , containerBorderWidth := 10 ]
+ containerChild := button, containerBorderWidth := 10 ]
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 177
- </td>
- </tr>
- </table>
- <hr>
-
- <p>Gtk2Hs is event driven. The mainGUI function will sleep until
- something happens, like a mouse being clicked, a window being
- destroyed or something else typical for a widget. Such events
- then trigger signals which in turn trigger user defined functions
- to be evaluated. In this case the <i>onClicked</i> signal,
- emitted by the user clicking the button, is linked to the text
- being displayed on the same button. When the user destroys the
- window, unlike as with the first program, <i>main</i> now exits
- cleanly.</p>
-
- <p><br>
- <br></p>
-
- <table summary="links to other pages" width="100%" border="0"
- cellpadding="0" cellspacing="0">
- <tr valign="top">
- <td width="33%">
- <p align="left"><a href="chap1.html"><<<
- Previous</a></p>
- </td>
-
- <td width="34%">
- <p align="center"><a href="chap1.html">Home</a></p>
- </td>
-
- <td width="33%">
- <p align="right"><a href="chap4.html">Next
- >>></a></p>
- </td>
- </tr>
-
- <tr valign="top">
- <td width="33%">
- <p align="left">Contents</p>
- </td>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 178
- <td width="34%">
- <p align="center"> </p>
- </td>
+<p>
+Gtk2Hs is event driven. The <code>mainGUI</code> function will sleep until
+something happens, like a mouse being clicked, a window being destroyed or
+something else typical for a widget. Such events then trigger signals which in
+turn trigger user-defined functions to be evaluated. In this case the
+<code>onClicked</code> signal, emitted by the user clicking the button, is
+linked to the text being displayed on the same button. When the user destroys
+the window, unlike with the first program, <code>main</code> now exits cleanly.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 188
- <td width="33%">
- <p align="right">Packing Widgets</p>
- </td>
- </tr>
- </table>
+<div id="footer">
+ <span class="nav-previous"><a href="index.xhtml">Previous</a><br />Table of Contents</span>
+ <span class="nav-home"><a href="index.xhtml">Home</a><br /> </span>
+ <span class="nav-next"><a href="chap4.xhtml">Next</a><br />Packing Widgets</span>
+</div>
hunk ./docs/tutorial/Tutorial_Port/chap3.xhtml 194
- <p><br>
- <br></p>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 1
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-
-<html>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 5
- <meta name="generator" content=
- "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org">
-
- <title>Packing Widgets</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>Gtk2Hs Tutorial: Packing Widgets</title>
+ <link href="default.css" type="text/css" rel="stylesheet" />
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 10
-<body lang="en-US" text="#000000" link="#0000FF" vlink="#840084"
-bgcolor="#FFFFFF" dir="ltr">
- <table summary="links to other pages" width="100%" border="0"
- cellpadding="0" cellspacing="0" style=
- "page-break-before: always">
- <tr>
- <th colspan="3">
- <p align="center">GTK2Hs Tutorial</p>
- </th>
- </tr>
-
- <tr valign="bottom">
- <td width="10%">
- <p align="left"><a href=
- "chap3.html"><<<Previous</a></p>
- </td>
+<body>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 12
- <td width="80%"></td>
+<div id="header">
+ <h1>Gtk2Hs Tutorial</h1>
+ <span class="nav-previous"><a href="chap3.xhtml">Previous</a></span>
+ <span class="nav-home"><a href="index.xhtml">Home</a></span>
+ <span class="nav-next"><a href="chap5a.html">Next</a></span>
+</div>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 19
- <td width="10%">
- <p align="right"><a href="chap5a.html">Next
- >>></a></p>
- </td>
- </tr>
- </table>
- <hr>
+<h2>Packing Widgets</h2>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 21
- <h1><a name="CH-PACKINGWIDGETS" id=
- "CH-PACKINGWIDGETS"></a>Packing Widgets</h1>
+<p>
+When creating an application, you'll want to put more than one widget inside a
+window. Our first "hello world" example only used one widget so we could simply
+use <code>set</code> to specify a <code>containerChild</code> widget for
+<code>window</code>, or use <code>containerAdd</code> to "pack" the widget into
+the window. But when you want to put more than one widget into a window, how do
+you control where that widget is positioned? This is where packing comes in.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 30
- <p>When creating an application, you'll want to put more than one
- widget inside a window. Our first <i>helloworld</i> example only
- used one widget so we could simply use a <i>set</i> (of the
- <i>containerChild</i> attribute) or a <i>containerAdd</i> to
- "pack" the widget into the window. But when you want to put more
- than one widget into a window, how do you control where that
- widget is positioned? This is where packing comes in.</p>
+<h3>Theory of Packing Boxes</h3>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 32
- <h1><a name="SEC-THEORYOFPACKINGBOXES" id=
- "SEC-THEORYOFPACKINGBOXES"></a>Theory of Packing Boxes</h1>
+<p>
+Most packing is done by creating boxes. These are invisible widget containers
+that we can pack our widgets into which come in two forms: a horizontal box and
+a vertical box. When packing widgets into a horizontal box, the objects are
+inserted horizontally from left to right or right to left depending on the call
+used. In a vertical box, widgets are packed from top to bottom or vice versa.
+You may use any combination of boxes inside or beside other boxes to create the
+desired effect.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 42
- <p>Most packing is done by creating boxes. These are invisible
- widget containers that we can pack our widgets into which come in
- two forms, a horizontal box, and a vertical box. When packing
- widgets into a horizontal box, the objects are inserted
- horizontally from left to right or right to left depending on the
- call used. In a vertical box, widgets are packed from top to
- bottom or vice versa. You may use any combination of boxes inside
- or beside other boxes to create the desired effect.</p>
+<p>
+To create a new horizontal box, we use <code>hBoxNew</code>, and for vertical
+boxes, <code>vBoxNew</code>. Both take a <code>Bool</code> and an
+<code>Int</code> parameter. The first parameter will give all children equal
+space allotments if set to <var>True</var> and the second sets the number of
+pixels to place by default between the children.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 50
- <p>To create a new horizontal box, we use <i>hBoxNew</i>, and for
- vertical boxes, <i>vBoxNew</i>. Both take a Bool and an Int
- parameter. The first will give all children equal space
- allotments if set True and the second sets the number of pixels
- to place by default between the children.</p>
+<p>
+The <code>boxPackStart</code> and <code>boxPackEnd</code> functions are used to
+place objects inside of these containers. The <code>boxPackStart</code>
+function will start at the top and work its way down in a <code>VBox</code>,
+and pack left to right in an <code>HBox</code>. <code>boxPackEnd</code> will do
+the opposite, packing from bottom to top in a <code>VBox</code>, and right to
+left in an <code>HBox</code>. Using these functions allows us to right justify
+or left justify our widgets and they may be mixed in any way to achieve the
+desired effect. We will use <code>boxPackStart</code> in most of our examples.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 61
- <p>The <i>boxPackStart</i> and <i>boxPackEnd</i> functions are
- used to place objects inside of these containers. The
- <i>boxPackStart</i> function will start at the top and work its
- way down in a vbox, and pack left to right in an hbox.
- <i>boxPackEnd</i> will do the opposite, packing from bottom to
- top in a vbox, and right to left in an hbox. Using these
- functions allows us to right justify or left justify our widgets
- and may be mixed in any way to achieve the desired effect. We
- will use <i>boxPackStart</i> in most of our examples. An object
- may be another container or a widget. In fact, many widgets are
- actually containers themselves, including the button, but we
- usually only use a label inside a button.</p>
+<p>
+An object may be another container or a widget. In fact, many widgets are
+actually containers themselves—including <code>button</code>, but we
+usually only use a <code>label</code> inside a <code>button</code>.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 67
- <p><img src="Images/GtkChap4.png" name="graphics1" alt="GtkChap4"
- align="bottom" width="210" height="229" border="0" id=
- "graphics1"></p>
+<p><img src="Images/GtkChap4.png" alt="GtkChap4" width="210" height="229" id="graphics1" /></p>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 69
- <table summary="Haskell code" width="100%" border="0"
- cellpadding="2" cellspacing="0" bgcolor="#E0E0E0">
- <col width="256*">
-
- <tr>
- <td width="100%">
- <pre>
+<pre class="codebox">
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 74
- initGUI
- window <- windowNew
- hbox <- hBoxNew True 10
- button1 <- buttonNewWithLabel "Button 1"
- button2 <- buttonNewWithLabel "Button 2"
- set window [windowDefaultWidth := 200, windowDefaultHeight := 200,
- containerBorderWidth := 10, containerChild := hbox ]
- boxPackStart hbox button1 PackGrow 0
- boxPackStart hbox button2 PackGrow 0
- widgetShowAll window
- onDestroy window mainQuit
- mainGUI
+ initGUI
+ window <- windowNew
+ hbox <- hBoxNew True 10
+ button1 <- buttonNewWithLabel "Button 1"
+ button2 <- buttonNewWithLabel "Button 2"
+ set window [windowDefaultWidth := 200, windowDefaultHeight := 200,
+ containerBorderWidth := 10, containerChild := hbox ]
+ boxPackStart hbox button1 PackGrow 0
+ boxPackStart hbox button2 PackGrow 0
+ onDestroy window mainQuit
+ widgetShowAll window
+ mainGUI
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 87
- </td>
- </tr>
- </table>
-
- <p><br>
- <br></p>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 88
- <p>By using these calls, GTK knows where you want to place your
- widgets so it can do automatic resizing and other nifty things.
- The <i>Packing</i> parameter specifies the way the widgets in the
- container behave when the window is resized. <i>PackNatural</i>
- means the widgets will retain their size and stay where they are,
- <i>PackGrow</i> <span style="font-style: normal">means they will
- be resized, and using</span> <i>PackRepel</i> t<span style=
- "font-style: normal">he widgets will be padded equally on both
- sides. The last parameter is an Int, which specifies any extra
- padding to be put between this child and its
- neighbours.</span></p>
+<p>
+By using <code>boxPackStart</code> or <code>boxPackEnd</code>, GTK knows where
+you want to place your widgets so it can do automatic resizing and other nifty
+things.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 94
- <p style="font-style: normal">Note that the packing only applies
- to the dimension of the box. If, for example, you specify
- <i>PackNatural</i> instead of <i>Packgrow</i> in the above,
- resizing horizontally will keep the buttons at their original
- size, but resizing vertically will also resize the buttons. This
- is because the buttons are placed homogoneously in the horizontal
- box (first parameter <i>True</i>) and the box itself will resize
- with the window. The next example will make the effects more
- clear.</p>
- <hr>
-
- <table summary="links to other pages" width="100%" border="0"
- cellpadding="0" cellspacing="0">
- <tr valign="top">
- <td width="33%">
- <p align="left"><a href="chap3.html"><<<
- Previous</a></p>
- </td>
-
- <td width="34%">
- <p align="center"><a href="chap1.html">Home</a></p>
- </td>
+<pre class="codebox">
+boxPackStart :: (WidgetClass child, BoxClass self) => self -> child -> Packing -> Int -> IO ()
+</pre>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 98
- <td width="33%">
- <p align="right"><a href="chap5a.html">Next
- >>></a></p>
- </td>
- </tr>
+<pre class="codebox">
+boxPackEnd :: (WidgetClass child, BoxClass self) => self -> child -> Packing -> Int -> IO ()
+</pre>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 102
- <tr valign="top">
- <td width="33%">
- <p align="left">Getting Started</p>
- </td>
+<p>
+The <code>Packing</code> parameter specifies the way the widgets in the
+container behave when the window is resized. <code>PackNatural</code> means the
+widgets will retain their size and stay where they are, <code>PackGrow</code>
+means they will be resized, and using <code>PackRepel</code> the widgets will
+be padded equally on both sides. The last parameter is an <code>Int</code>,
+which specifies any extra padding to be put between this child and its
+neighbours.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 112
- <td width="34%">
- <p align="center"> </p>
- </td>
+<p>
+Note that the packing only applies to the dimension of the box. If, for
+example, you specify <code>PackNatural</code> instead of <code>PackGrow</code>
+in the above, resizing horizontally will keep the buttons at their original
+size, but resizing vertically will also resize the buttons. This is because the
+buttons are placed homogeneously in the horizontal box (the first parameter is
+<var>True</var>) and the box itself will resize with the window. The next
+example will make the effects more clear.
+</p>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 122
- <td width="33%">
- <p align="right">Packing Demonstration Program</p>
- </td>
- </tr>
- </table>
+<div id="footer">
+ <span class="nav-previous"><a href="chap3.xhtml">Previous</a><br />Getting Started</span>
+ <span class="nav-home"><a href="index.xhtml">Home</a></span>
+ <span class="nav-next"><a href="chap5a.html">Next</a><br />Packing Demonstration Program</span>
+</div>
hunk ./docs/tutorial/Tutorial_Port/chap4.xhtml 128
- <p><br>
- <br></p>
hunk ./docs/tutorial/Tutorial_Port/default.css 1
+a:link, a:visited {
+ text-decoration: none;
+}
+
+body {
+ margin: 0px;
+ border: 20px solid #e7e7e7;
+ padding: 20px;
+ color: #000000;
+ background-color: #ffffff;
+}
+
+h1 {
+ text-align: center;
+}
+
+h2, h3 {
+ border-bottom: 1px solid #ccc;
+}
+
+.codebox {
+ overflow: auto;
+ margin: 10px;
+ border: 1px solid #ccc;
+ padding: 10px;
+ color: #000000;
+ background-color: #eee;
+}
+
+.nav-home {
+ float: left;
+ width: 34%;
+ text-align: center;
+}
+
+.nav-next {
+ float: left;
+ width: 33%;
+ text-align: right;
+}
+
+.nav-previous {
+ float: left;
+ width: 33%;
+ text-align: left;
+}
+
+#authors {
+ text-align: center;
+}
+
+#authors h3 {
+ border-style: none;
+}
+
+#credits {
+ margin-top: 40px;
+ margin-bottom: 40px;
+ text-align: center;
+}
+
+#credits h3 {
+ border-style: none;
+}
+
+#footer {
+ margin: 40px;
+ border: 0px;
+ border-top: 1px solid #ccc;
+}
+
+#header {
+ margin: 0px 40px 40px 40px;
+ border: 0px;
+ border-bottom: 1px solid #ccc;
+}
+
+#header h1 {
+ margin-top: 0px;
+ font-size: medium;
+ text-align: center;
+}
+
+#title h2 {
+ border-style: none;
+ text-align: center;
+}
+
+#toc ol {
+ line-height: 200%;
+ list-style-type: none;
+}
hunk ./docs/tutorial/Tutorial_Port/index.xhtml 1
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>Gtk2Hs Tutorial</title>
+ <link href="default.css" type="text/css" rel="stylesheet" />
+</head>
+
+<body>
+
+<div id="title">
+ <h2>Gtk2Hs Tutorial</h2>
+</div>
+
+<div id="authors">
+ <h3>Hans van Thiel</h3>
+</div>
+
+<div id="credits">
+ <h4>An Adaptation of the GTK+ 2.0 Tutorial by</h4>
+ <h3>Tony Gale</h3>
+ <h3>Ian Main</h3>
+ <h4>&</h4>
+ <h3>The GTK Team</h3>
+</div>
+
+<div id="toc">
+ <h3>Table of Contents</h3>
+ <ol>
+ <li><a href="chap1.xhtml"></a>1. Introduction <i>— Not Available Yet</i></li>
+
+ <li><a href="chap3.xhtml">2. Getting Started</a></li>
+
+ <li>3. Packing
+ <ol>
+ <li><a href="chap4.xhtml">3.1 Packing Widgets</a></li>
+
+ <li><a href="chap5a.html">3.2 Packing Demonstration Program</a></li>
+
+ <li><a href="chap5b.html">3.3 Packing Using Tables</a></li>
+ </ol>
+ </li>
+ <li>4. Miscellaneous Widgets
+ <ol>
+ <li><a href="chap6.html">4.1 The Button Widget</a></li>
+
+ <li><a href="chap7.html">4.2 Adjustments, Scale and Range</a></li>
+
+ <li><a href="chap8.html">4.3 Labels</a></li>
+
+ <li><a href="chap9.html">4.4 Arrows and Tooltips</a></li>
+
+ <li><a href="chap10.html">4.5 Dialogs, Stock Items and Progress Bars</a></li>
+
+ <li><a href="chap11.html">4.6 Text Entries and Status Bars</a></li>
+ </ol>
+ </li>
+ </ol>
+</div>
+
+<h3>Tutorial Copyright and Permissions Notice</h3>
+
+<p>The GTK Tutorial is Copyright © 1997 Ian Main.</p>
+
+<p>Copyright © 1998-2002 Tony Gale.</p>
+
+<p>Copyright © 2007 Hans van Thiel and Alex Tarkovsky.</p>
+
+<p>
+Permission is granted to make and distribute verbatim copies of this manual
+provided the copyright notice and this permission notice are preserved on all
+copies.
+</p>
+
+<p>
+Permission is granted to copy and distribute modified versions of this document
+under the conditions for verbatim copying, provided that this copyright notice
+is included exactly as in the original, and that the entire resulting derived
+work is distributed under the terms of a permission notice identical to this
+one.
+</p>
+
+<p>
+Permission is granted to copy and distribute translations of this document into
+another language, under the above conditions for modified versions.
+</p>
+
+<p>
+If you are intending to incorporate this document into a published work, please
+contact the maintainer, and we will make an effort to ensure that you have the
+most up to date information available.
+</p>
+
+<p>
+There is no guarantee that this document lives up to its intended purpose. This
+is simply provided as a free resource. As such, the authors and maintainers of
+the information provided within can not make any guarantee that the information
+is even accurate.
+</p>
+
+<div id="footer">
+ <span class="nav-previous"> </span>
+ <span class="nav-home"> </span>
+ <span class="nav-next"><a href="chap3.xhtml">Next</a><br />Getting Started</span>
+</div>
+
+</body>
+</html>
|