mollusk/eumandy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added eugtk examples

Browse Source
This commit is contained in:
mollusk
2016-11-25 00:33:18 -07:00
parent 87a821e3da
commit c0b98b619e
877 changed files with 96872 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
eugtk/examples/documentation/.httpd.css Normal file
View File

@@ -0,0 +1,11 @@
/*
-- ====================================================================
-- Styling for the remote display is set here;
-- ====================================================================
*/
button {width: 100%;}
button.dir {background-color: skyblue;}
button.html {background-color: orange;}
body {background-image: linear-gradient(180deg, yellow, blue); background-repeat: no-repeat;)

41
eugtk/examples/documentation/Broadway Normal file
View File

@@ -0,0 +1,41 @@
launchpad.net GTK+3 with the Broadway (HTML5) backend : Nicolas Delvaux
This is a rebuild of the GTK+3 Ubuntu 12.04, 12.10, 13.04, 13.10, 14.04 and 14.10 packages with an enabled Broadway backend.
Note that this PPA is no longer necessary starting from Ubuntu 15.04, as the Broadway backend is now enabled by default. The main difference with this PPA is that the "broadwayd" binary is shipped in the "libgtk-3-bin" package when it was in a separated "broadwayd" package in the PPA.
ADDING THIS PPA TO YOUR SYSTEM
==============================
Run these commands in a terminal:
sudo add-apt-repository ppa:malizor/gtk-broadway
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install broadwayd # For Ubuntu >= 13.10
HOWTO SINCE SAUCY (gtk+ >= 3.8)
===============================
As an example, here is how to run gedit in your browser.
In a terminal, run:
broadwayd
In another terminal, run:
GDK_BACKEND=broadway UBUNTU_MENUPROXY= LIBOVERLAY_SCROLLBAR=0 eui test0.ex
Finally, open you Web browser and go to http://localhost:8080/
The "UBUNTU_MENUPROXY= LIBOVERLAY_SCROLLBAR=0" is only useful if you use the global-menu and/or overlay-scrollbars. You have to disable them for Broadway, otherwise the program will segfault.
Please see the "broadwayd" manpage for more information.
HOWTO BEFORE SAUCY (gtk+ < 3.8)
===============================
As an example, here is how to run gedit in your browser.
In a terminal, run:
GDK_BACKEND=broadway UBUNTU_MENUPROXY= LIBOVERLAY_SCROLLBAR=0 gedit
Finally, open you Web browser and go to http://localhost:8080/
The "UBUNTU_MENUPROXY= LIBOVERLAY_SCROLLBAR=0" is only useful if you use the global-menu and/or overlay-scrollbars. You have to disable them for Broadway, otherwise the program will segfault.
You can customize the port by setting the BROADWAY_DISPLAY variable.
DISCLAIMER
==========
I provide this PPA in the hope that it will be useful and I will try to upload new versions whenever the Ubuntu package is updated.
However, I do NOT guarantee that this PPA will always be stable and up-to-date nor that packages it contains may not destroy your computer, cause the end of the world and kill kittens. AaCharis SIL CompactAaClear Sans AAAAA DarkLightAuto

418
eugtk/examples/documentation/Glade.html Normal file
View File

@@ -0,0 +1,418 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>EuGTK and Glade</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<heading>
<img src="../thumbnails/gtk-logo-rgb.gif" alt="GTK LOGO" />
<img src="../thumbnails/mongoose.png" alt="mongoose" />
<figure style="float:right; border:solid thin black;">
<img src="../screenshots/glade.png" alt="glade" align="right" width="400px" />
<figcaption>
&nbsp;Calendar program being edited in Glade
</figcaption>
</figure>
<h2> <hr />EuGTK 4.11.11 and Glade<hr /> </h2>
<h3>Drag and Drop interface construction</h3>
</heading>
<nav>
<div class="hdr">Quick Links</div>
<a href="StartingGlade.html"><button>Starting with Glade</button></a><br />
<a href="#overview"><button>Overview</button></a>
<a href="#namespaces"><button>Namespaces</button></a>
<a href="#problems"><button>Problems?</button></a>
<a href="#compile"><button>Compiling/Shrouding/Binding</button></a>
<br />
<div class="hdr">Other Files:</div>
<a href="HowItWorks.html"><button>How EuGTK Works</button></a>
<a href="README.html"><button>README</button></a>
<a href="guide_a.html"><button>Alphabetical Guide</button></a>
<a href="dialogs.html"><button>Built-in EuGTK Dialogs</button></a>
<a href="treeviews.html"><button>ListView/TreeView widgets</button></a>
<a href="pango_markup.html"><button>Markup</button></a>
<a href="printing.html"><button>Printing</button></a>
<a href="ServerHelp.html"><button>Web Server</button></a>
<a href="functions.html"><button>Quick Function List</button></a>
<a href="platforms.html"><button>Platforms</button></a>
<br />
</nav>
<a name="overview" />
<h3><hr />Overview<hr /></h3>
<p>
It is now possible to use <a href="http://glade.gnome.org">Glade</a> to design your EuGTK
program interface. I've tested with Glade versions 3.16 and 3.18.
You will still have to write snippets of code in Euphoria to handle
user events - just as you would when using Visual Basic&trade;, Delphi&trade;, etc.
</p>
<p>Begin by reading <a href="StartingGlade.html">Starting Glade I and II</a> for an
introduction, thenread the rest of this page for details.
</p>
<p>
Glade has a preview button so that you can see, to a limited extent, what your program
will look like. Controls won't be linked (can't respond to user interaction) until you
load the glade XML into your Euphoria program and provide the 'handler' functions.
Often, these handler functions will only require a few lines of code.
</p>
<p>
EuGTK will try to help you with this task by supplying a ready-made template
for undeclared functions, which you copy and paste into your Euphoria code using whatever
text exitor you prefer.
</p>
<p>This template will appear on the terminal from which you run your
program. See the screenshot below.
</p>
<p>You <b><i>must</i></b> run programs from a terminal (x-term, for example) while
developing and testing. There's no way around this.
</p>
<p>
Your program begins as usual:<br />
<img src="../screenshots/template.png" alt="template" clear="left" align="right" width="400px" />
<code>
<pre> <em class="kw">include</em> GtkEngine.e</pre>
</code>
</p>
<p>
Next, you tell EuGTK's built-in <i>builder</i> object
to load your program's XML description from the file created by Glade. The builder will
try to connect any signals for which you have declared a handler
(in the Glade Properties/Signals tabs). Finally, you call main() to start the GTK
processing loop.
<div class="quote"><tt><pre>
<em class="kw">include</em> GtkEngine.e
<em class="gtk">add</em>(builder,<em class="str">"~/demos/examples/widgets.glade"</em>)
<em class="gtk">main()</em><pre></tt></div>
</p>
<p>With just those three lines of code, you are now ready to run your program!<br /><br />
Of course, it won't do anything, except perhaps spit out a message telling you that
you haven't bothered to write handlers for events declared in Glade.
</p>
<p>
You should run the program (preferably from WEE with terminal, the BEAR, Geany using
gneui.ex, or directly from an x-term).
EuGTK will prompt you with an error message and hopefully a function template for the
missing function.
You can copy and paste that into your editor, and then fill in the body of the function.
Put these functions after the call to main().
</p>
<div class="hint">
<img class="hint" src="../thumbnails/hint.png" alt="hint" width="100px" align="left" float="right" />
<p>
Note that when using Glade, your Euphoria code may use string identifiers to refer to
objects, rather than having to obtain a pointer (a.k.a. 'handle') to them first.
</p>
<p>
Glade will assign a unique identifier for widgets (which it calls the <b>ID:</b>).
The ID will be something like 'checkbutton1', 'checkbutton2', 'radiobutton1', etc.
</p>
<p> This ID property is found on the General tab of the Properties dialog.
You may change the IDs if you wish, sometimes changing them can make your code clearer.
</p>
<p>
Obviously, you should avoid naming two controls with the same name.
</p>
<p>
If you are using <u>multiple</u> Glade files, you will almost certainly have more than
one 'button1', etc. but this isn't a problem, because a namespace will be prepended.
See <a href="#namespaces"> namespaces </a>below.
</p>
</div>
<br clear="all" />
<a name="namespaces" />
<h3><hr />Namespaces<hr /></h3>
<p>When writing a large program with multiple windows, Glade can become difficult to
navigate safely. Click on the wrong thing in Glade, and you may lose all your work.
This isn't good, so you should try to break up your program into small, safe 'modules',
each with it's own Euphoria include (.e) file and corresponding Glade (.glade) file.
</p>
<p>
Let's say, for example, I'm going to need a 'main' window, a pop-up 'edit' window, and
the usual "About..." dialog.
I'd create three Glade files, one named main.glade, the second edit.glade, and the third
about.glade.
After laying out these three windows using Glade, it's very likely that Glade will
have used identical names for controls in the files. 'button1', for example, might appear
in all three. You could, if you wish, wade thru all your Glade files and rename these as
necessary to prevent conflicts, but
EuGTK version 4.8.9 and up offers a less labor-intensive way.
</p>
<p>
EuGTK namespacing allows you to refer to these controls by name in a manner familiar to
Euphoria programmers:<br />
"button1" (the button1 in main.ex); "edit:button1" and "about:button1"
(buttons in the respective edit.e and about.e files).<br />
<code><pre> <em class="gtk">set</em>(<em class="str"><b>"edit:window1"</b>,"background","blue"</em>)
</pre></code>
Note that these are strings. If you wish to convert them to Euphoria objects, you can,
starting with EuGTK 4.8.9, use the new pointer() function:
<pre><code> <em class="kw">constant</em> win1 = <em class="gtk">pointer</em>(<em class="str"><b>"edit:window1"</b></em>)
</code></pre>
Other files can now access the edit.e window in the normal Euphoria way:
<pre><code> <em class="gtk">set</em>(win1,<em class="str">"background"</em>,...)</code></pre>
</p>
<p>There seems to be no noticeable delay when accessing controls via the string names.
In a test which read and set label text using the constant 'handle' to the label, 20,000
iterations per second were reported.
When using the label's name in string form, 18,900 per second were reported. </p>
<div class="hint">
<img class="hint" src="../thumbnails/hint.png" alt="hint" width="100px" align="left" float="right" />
<p>
When using the string form, the namespace prefix will be the same as the Glade file name
(sans the .glade part) which the include file loaded into the GTK builder.<br /><br />
When exported as a Eu constant or variable, the namespace prefix will be whatever
namespace the included .e file declares. To prevent confusion, it's probably best to use
identical names. IOW, code in 'foo.e' would have the namespace foo.
</p>
</div>
<p>
To keep things neatly organized, you should put your Eu code in separate files as well:
main.ex, edit.e, and about.e.
</p>
<p>
Your Eu file main.ex would then include the line:
<pre><code> <em class="gtk">add</em>(builder,<em class="str">"main.glade"</em>)</code></pre>
</p>
<p>And your edit.e include file would have the lines:
<div class="quote"><tt><pre>
<em class="kw">namespace</em> edit
<em class="kw">include</em> GtkEngine.e
<em class="gtk">add</em>(builder,<em class="str">"edit.glade"</em>)
</pre></tt></div>
</p>
<p>
<img src="../screenshots/namespace.png" align="right" width="500px" />
To examine the namespaced names as loaded by EuGTK, add the line
<b><code> with define BUILDER </code></b>
to your main program prior to including GtkEngine.e,
or add <b><code>-d BUILDER</code></b> to the command-line.
The namespaced names will be shown on the xterm when you run your program. <i>(as shown above)</i>
</p>
<p>
Glade objects loaded by the main (.ex) program will <i>not</i> be namespaced.
Those items can be addressed directly without a namespace qualifier.
This is done so that small programs which don't need multiple Glade 'includes' can
use code that isn't cluttered with unnecessary namespacery.</p>
<hr />
<p><b>Widget names</b><br /><br />
Confusingly, Glade also has a Widget name: property, found under the Common tab,
which you should avoid using except under special circumstances. It isn't normally
needed. EuGTK refers to widgets created by Glade by their ID:, e.g. the main window
of a program created by Glade would have the default ID of "window1", and your EuGTK
program would access that window as "window1".
</p>
<p>
There are a few 'trick' uses for this Widget name property, however:<br />
<p>One possible use is to pass data to functions which handle more than one control.
For example, you might have a set of radio buttons which all call a single handler
function. That function could examine the control's 'name' to determine what to do.
If, for example, the buttons select various colors, each button could have a different
color as the name property: 'red', 'green', or 'blue', etc.
</p>
<p>A more complex use might be to pass function names to a central 'dispatch' function,
which could then call the desired function by converting the 'name' into a routine_id.
</p>
<p>
Some of the demos in the glade subfolder utilize these tricks. See, for example, the
hello.* files: <a href="../glade/hello.ex">hello.ex</a>, <a href="../glade/es.e">es.e</a>,
etc...
</p>
<hr />
<p><b>Cautions</b><br /><br />
The XML file created by Glade may include a "requires..." line, demanding a certain GTK
version be present. You may find it helpful to remove that line under certain conditions,
for example when designing your program on Linux with a current version of GTK/Glade,
but running it on Windows&trade;, which lags behind the other platforms.
Just use a plain-text editor to zap the offending line.
</p>
<a name="problems" />
<h3><hr />Common Problems<hr /></h3>
<p>
<ol>
<li>I run my program without errors but <i>can't see anything!</i><br />
<dfn>
You <u>must</u> click on the <i>'visible'</i> property checkbox for your main window.
This is found on the 'Common' tab under 'Widget Flags'.<br />
<i></i><b>Oh, and while you're there,</b></i> be sure to link the main window's <i>destroy</i>
signal to the built-in function Quit, so that your program will clean up after itself when finished!
You must do these two things for the main window of every program you write.</dfn>
</li>
<li>I put buttons in a dialog, such as FileChooserDialog, but they don't do anything!<br />
<dfn>Set a unique <i>'Response ID'</i> for each button.
This is found on the 'General' tab under 'Button Attributes'.<br />
This ID is returned when the dialog closes as a result of a button being clicked.
</dfn>
</li>
<li>How do I make menu items work like check menu items or radio menu items?<br />
<dfn>
I don't know how to do that using Glade.
You'll have to write code in Euphoria, or &lt;gasp!&gt; try to edit the .glade xml directly.
</dfn>
</li>
<li>I want to use widget x, but can't find it on the Glade palette<br />
<dfn>
Some things are hard to find, and some just aren't there.
New GTK widgets introduced since GTK 3.10 are partially missing.
If you're working on the 'bleeding edge' of GTK3, you probably should be
coding by hand.
</dfn>
</li>
<li>How do I know how to name the function that responds to a signal?<br />
<dfn>
If you click on the widget's Signals tab, you'll see a list of signals that can be linked.<br />
For example, a button has a 'clicked' signal.
You then click on the &lt;type here&gt; space adjacent to the signal name, and press the 'o' key. <br />
<em>(That's the letter o, not a zero!)</em><br />
When you do, a suggested function handler name will be plugged in.
You can, of course, type in any global function name you prefer here.
For example, the handler name for a Quit or Exit button should usually be <em class="black">Quit</em>
(no quotes)<br />This will call EuGTK's built-in Quit() function when the button is clicked.
</dfn>
</li>
<li>I want to write <i>one</i> Eu function to handle multiple controls.<br />
<dfn>
Instead of accepting the default handler name, supply your own
For example, if you have 3 buttons, Glade will supply handler names:
<ul><li>on_button1_clicked</li><li>on_button2_clicked</li><li>on_button3_clicked</li></ul>
You simply remove the 1,2,and 3 from the handler names, and name your Eu function
<em class="black">on_button_clicked</em>. All 3 buttons will call that function.
It's then your job to sort them out.
</dfn>
</li>
</ol>
</p>
<a name="compile" />
<h3><hr />Compiling, Binding, etc...<hr /></h3>
<p>
As usual, you can compile, bind, or shroud your program. If you do any of these, your program
will <i>still</i> load the GUI description from the Glade XML file at run-time. This could be either good or bad, depending upon your perspective.
</p>
<p>
<u>The benefits:</u>
<ul>
<li>The GUI appearance can be adjusted without messing with the program logic</li>
</ul>
</p>
<p>
<u>The drawbacks:</u>
<ul>
<li>Anyone can easily trash your nice program by changing names or removing controls in the .glade file.
</li>
<li>The .glade file must be distributed along with the .ex file
</li>
</ul>
</p>
<div class="hint" style="width:80%;" >
<img class="hint" src="../thumbnails/hint.png" width="100px" alt="hint" align="left" float="right" />
<p style="margin-left: 40px">
<b>Knowing the way some users think...</b><br />
It's almost certain that someone will see that Glade&trade;<sup><em>*</em></sup> file,<br />
think <i>"I don't care about air fresheners.."</i> and delete it.
<br /><br />
<small><i><sup><em>*</em></sup> brand name for a common type of room deodorizer in the U.S.</i></small>
</p>
</div>
<p>
One easy solution to this problem is to copy the glade XML, paste it into a new file,
enclose it in triple quotes, and assign it to an exported constant. Below, the added code is in red, while the XML from Glade is shown in black:
<code><pre><em> export constant XML = """</em>
&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!-- Generated with glade 3.16.1 --&gt;
&lt;interface&gt;
&lt;requires lib="gtk+" version="3.10"/&gt;
---etc---
<em>"""</em>
</pre></code></p>
<p>
Save this new file as an include, perhaps widgets.xml, with the widgets namespace, and then your code becomes:
<code><pre>
<em class="kw">include</em> GtkEngine.e
<em class="kw">include</em> widgets.xml
<em class="gtk">add</em>(builder,widgets:XML) <em>-- EuGTK can add objects from either a string variable or a filename</em>
<em class="gtk">main()</em>
</pre></code>
</p>
<p>
Now you can bind or compile your program and the interface will be 'hard coded' into it. Changing or deleting
the widgets.xml or widgets.glade files will make no difference. No changes to your program interface can be made
without re-compiling or re-binding.
</p>
<footer>
<div class="hint">
<img class="hint" src="../thumbnails/mongoose.png" alt="hint" align="left" float="right" />
<p>
This page edited by The <a href="README.html#bear">Bear</a>,
a web-page and programming editor
written in <a href="OpenEuphoria.org">Euphoria</a>.
</p>
<p>
Updated for EuGTK version 4.11.11, Sept 1, 2016<br />
All code &copy; 2016 by Irv Mullins
</p>
</div>
</footer>
</body>
</html>

1195
eugtk/examples/documentation/HowItWorks.html Normal file
View File

File diff suppressed because it is too large Load Diff

1169
eugtk/examples/documentation/README.html Normal file
View File

File diff suppressed because it is too large Load Diff

184
eugtk/examples/documentation/ServerHelp.html Normal file
View File

@@ -0,0 +1,184 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Eu Server</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<img src="../thumbnails/gtk-logo-rgb.gif" alt="GTK Logo">
<img src="../thumbnails/mongoose.png" alt="OpenEuphoria Logo">
<img src="../screenshots/Screenshot-14.png" align="right" alt="server" width="50%" />
<h1>EuGTK 4.12.0</h1>
<h3><hr />Euphoria Web Server<hr /></h3>
<h4>version 1.1</h4>
</header>
<nav>
<div class="hdr">Quick Links</div>
<a href="#options"><button>Options</button></a>
<a href="#screenshots"><button>Screenshots</button></a>
</nav>
<nav>
<div class="hdr">Other Files</div>
<a href="README.html"><button>Readme First</button></a>
<a href="HowItWorks.html"><button>How EuGTK Works</button></a>
<a href="dialogs.html"><button>Dialogs</button></a>
<a href="printing.html"><button>Printing</button></a>
<a href="pango_markup.html"><button>Markup</button></a>
<a href="treeviews.html"><button>TreeViews</button></a>
<a href="guide_a.html"><button>Alphabetical Guide</button></a>
<a href="functions.html"><button>Quick Function List</button></a>
<a href="Glade.html"><button>Glade GUI Builder</button></a>
<a href="platforms.html"><button>Platforms</button></a>
<hr />
</nav>
<article {width: 950px; display: table;}
<p>
This uses a heavily modified <a href="../examples/httpd.ex">httpd.ex</a> (from the Eu demos) to serve up files over the local network.
</p>
<p>
Apache would work, but who wants to deal with all that arcane stuff?, Besides,
I'd still have to write cgi code to display the pages... so why go thru all that
just to share some files?
This solution is much simpler, and is written in Euphoria, so you can modify it as you wish!
</p>
<p>
Httpd.ex can work from a command line - just issue
<samp> %> eui httpd </samp> to see the options. When running from the command line, you'll need to enter
your server's IP address (use ifconfig to get that), and port, perhaps 8080, and the root (starting directory).
</p>
<p>
You can run more than one server at a time, just use a different port for each. For example,
set the root for port 8081 to your Music/Blues folder, and the root for port 8082 to your
Music/Opera folder - that way, listeners won't have to wade thru albums they may be allergic to:)
</p>
<p>
To make the server easier to use, I've added the EuGTK GUI shown above, which lets you select some options, and then starts the server running in the background
when you click the OK button. Once it's running, you just enter the IP address and port in your tablet or phone's
browser address bar to connect. e.g: <samp>192.168.1.100:8080</samp>
</p>
<a name="options" />
<h3><hr />httpd.ex<hr /></h3>
<ul>
<li class="opts"><i>-help</i> <dfn>displays Usage</dfn></li>
<li class="opts"><i>-bind</i> <dfn><b>required</b> ip_address:port, e.g. 192.168.1.100:8080</dfn></li>
<li class="opts"><i>-root</i> <dfn> <b>required</b> e.g. /home/irv/demos/documentation</dfn></li>
<li class="opts"><i>-log</i> <dfn>optional, name of log file</dfn></li>
<li class="opts"><i>-h</i> <dfn>optional, show hidden files in directory listing</dfn></li>
<li class="opts"><i>-s</i> <dfn>optional, sort directory listings</dfn></li>
<li class="opts"><i>-r</i> <dfn>optional, include full request and response in log</dfn></li>
<li class="opts"><i>-t</i> <dfn>optional, number of tries to obtain port before giving up</dfn></li>
</ul>
<h3><hr />webserver.ex<hr /></h3>
<ul>
<li><b>IP</b>:
<dd>Your network address, or 127.0.0.1 (a.k.a. localhost) if not networked.
This should be filled in automatically. If it's wrong, use ifconfig
to get the inet addr of your computer.</dd>
</li>
<li><b>Port</b>:
<dd>use 8080, 8081, etc.<em> -- Avoid port 80</em></dd>
</li>
<li><b>Root</b>:
<dd>Starting (root) directory to serve up. Set this to your Music directory or a mounted music CD.
Also, try your Pictures directory, Demos, etc...
I have tried to make it difficult to browse 'off-limits',
i.e: into files or folders which are not in or subfolders of doc_root.
You may have better ideas than I do on this topic. Please contribute!</dd>
</li>
<li><b>Log file</b>:
<dd>Name of a file to write transactions to. A new log file will be created if necessary.
You should delete it when no longer needed, since it continues to grow...
I suggest you make the log file a hidden file, so it won't show in normal directory listings.
Log entries will have date and time, client IP, plus name of file requested.</dd>
</li>
<li><b>Tail -f</b>:
<dd>If checked, opens a terminal which follows the log file.
With mate-terminal, which I use, this opens a single terminal with two tabs,
one for the web server messages, and another for following the log file.
You may need to modify the routine at the top of webserver.ex which chooses a terminal,
depending upon what terminal programs you have available.
If, like mate-terminal, your term has different profiles, it will be helpful to create
a new profile named 'logview' with different colors, a tiny font size, etc.
for most convenient viewing of the log output.
This is how I get the nice transparent log view shown in the <a href="../screenshots/Screenshot-14.png" alt="server">screenshot</a> at top.</dd>
</li>
<li><b>Sort</b>:
<dd>If checked, sort the file listing.</dd>
</li>
<li><b>Show Full Request</b>
<dd>Adds the full request string to the server log. This includes info on the browser doing the request.
This info might be used to create and return different results depending upon whether the browser was
running on a computer, or perhaps a cell phone.</dd>
</li>
<li><b>Show Hidden</b>:
<dd>If checked, show hidden files along with others in the directory listing</dd>
</li>
</ul>
</p>
<a name="screenshots" />
<img src="../screenshots/Vancouver.png" alt="Screenshot-18" width="100%" />
<p>
The appearance of the page is controlled by a file named .httpd.css, if it exists in the
currently-browsed folder. This is done so that directory
listings from different folders can have their own individual appearances (see screenshot above).
If no .httpd.css exists in a given folder, defaults built into
httpd.ex will be used.
</p>
<img src= "../screenshots/Screenshot-11.png" alt="Screenshot-11" width="100%" />
<p>
Above, webserver.ex serving a specified file as entered on the address bar, or by clicking on a link in a previous page.
</p>
<p>
After closing the server, or a crash, it may take several seconds to minutes for your computer to
free the port you've used. Trying to run again too soon using the same port will result in an error (-2).
I have included a loop which will retry up to 20 times (unless overridden by the -t option), and then abort. If this happens, and you are running from the GUI, you can try hitting the OK button again. It may take
several tries, or you may have to shut down the port manually from a terminal.
</p>
</article>
<br clear="all" />
<footer>
<div class="hint">
<img class="hint" src="../thumbnails/mongoose.png" alt="hint" align="left" float="right" />
<p>
This page edited by The <a href="README.html#bear">Bear</a>,
a web-page and programming editor
written in <a href="OpenEuphoria.org">Euphoria</a>.
</p>
<p>Updated for EuGTK version 4.12.0, Sept 15, 2016<br />
All code &copy; 2016 by Irv Mullins
</p>
</div>
</footer>
</body>
</html>

271
eugtk/examples/documentation/StartingGlade.html Normal file
View File

@@ -0,0 +1,271 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Starting Glade Chap. 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<img src="../screenshots/glade_test_1.png" alt="glade test 1" align="right" width="500" />
<h2>Using Glade 1</h2>
<a name="starting" />
<h3>Getting Started</h3>
<h4>Step 1 - Design a Window</h4>
<p>
<ol>
<li>Open Glade, and create a new file
<dd>(File/New menu item)</dd>
</li>
</li>
<li>Click on the Window icon <img class="x" src="../thumbnails/red_star.png" height="15px" />
<dd>(leftmost item under the Toplevels tab)</dd>
<dd>
This will add a main window to your glade program.
It will be named <i>window1</i>.</dd>
</li>
<li>Next, click on the Common tab in the Window Properties pane
<dd>(lower right) and scroll down a bit to the Widget Flags section.</dd>
</li>
<li>Check the Visible checkbox.
<dd><em>If you don't make the main window visible,
how are you going to be able to tell if your program
is running?</em> :)</dd>
</li>
<li>Save it with the extension .glade, e.g. <i>test1.glade</i></li>
</ol>
</p>
<p>
This will produce a .glade xml file which describes the interface.
</p>
<p>
You don't need to be concerned with this xml, there's no need even
to look at it, much less edit it. The sample below is provided just
to satisfy your curiosity:
</p>
<div class="quote"><pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!-- Generated with glade 3.16.1 --&gt;
&lt;interface&gt;
&lt;requires lib="gtk+" version="3.0"/&gt;
&lt;object class="GtkWindow" id="window1"&gt;
&lt;property name="visible"&gt;True&lt;/property&gt;
&lt;property name="can_focus"&gt;False&lt;/property&gt;
&lt;property name="title" translatable="yes"&gt;Glade Test 1&lt;/property&gt;
&lt;child&gt;
&lt;placeholder/&gt;
&lt;/child&gt;
&lt;/object&gt;
&lt;/interface&gt;</code></pre></div>
<h4>Step 2 - Link to Euphoria</h4>
<p>
Create a Euphoria program to load and run the .xml you just created:
</p>
<div class="quote"><pre><code><em class="kw">include</em> GtkEngine.e
<em class="gtk">add</em>(builder,<em class="str">"~/demos/examples/glade/test1.glade"</em>)
<em class="gtk">main</em>()
</code></pre></div>
<p>
Save this as <i>test1.ex</i>. If you keep the names the same, it will be less confusing.
</p>
<h4>Step 3 - Test Run</h4>
<p><img src="../screenshots/test1.png" alt="test1" float="right" align="left" />
<br /><br />
You will <b><i><u>always</u></i></b> run from an x-terminal (mate-terminal, etc) until your program is completely finished. There is no way around this if you <i>ever</i> expect to get it completely debugged.</p>
<p>
Run the program:
<div class="scrn">
<tt>$> eui test1</tt>
</div>
</p>
<br clear="all" />
<hr />
<a name="adding_widgets" />
<h4>Step 4 - Adding Widgets</h4>
<p><img src="../screenshots/x2.png" alt="x2" align="right" width="400" />
<ul>
<li><em>Add a container for a menu and button to your window</em></li>
<ol>
<li>Go back to Glade, and select a container.
<dd>Box will do nicely</dd>
<dd>(see <img src="../thumbnails/green_star.png" height="15px" />in screenshot above)</dd>
</li>
<li>Drag and drop it into the window
<dd>(accept the default number of items, and click Create)</dd>
</li>
</ol>
<li><em>Add a standard menu to your window</em></li>
<ol>
<li>Click on File
<dd>(in the little 3-sided box under Containers, also)</dd>
</li>
<li>Drop it into the top panel in the window.</li>
</ol>
<li><em>Add a Quit button to your window</em></li>
<ol>
<li>Click on the OK button
<dd>(under the Control and Display tab)</dd>
</li>
<li>Drop that into the bottom panel of the window.</li>
<li>Click on the actual button (in the window) to select it.</li>
<li>Select the General tab under Button properties
<dd>(lower right pane)</dd>
</li>
<li>Scroll down to the Button Content section, click Stock Button, and from the combo box select Quit <dd>(scroll down the list)</dd>
</li>
<li>Click on the Signals tab in the Button properties pane.</li>
<li>Select the <i>clicked</i> signal]
<dd>where it says &lt;Type here&gt;, enter Quit <em>-- no quotes please</em></dd>
</li>
<li>Be sure to hit enter or click on something else
<dd>(so that your typed entry will be saved. <em>-- this is a quirk of Glade</em>)</dd>
</li>
</ol>
<li><em>Save your work</em>
<ul>
<li>Ctl-s, File/Save, or click on the "save the current project" toolbar icon.</li>
</ul>
</ul>
</p>
<hr />
<p>
<img src="../screenshots/test2.png" alt="test2" align="right" />
You'll now have a window with a fairly complete menu and a functioning Quit button.
</p>
<p>
<i>But wait!</i><br />The button works, but the File/Quit menu item doesn't!
</p>
<p>
Let's fix that:
<ul>
<li>In Glade, click on the File menu item on your new window
<dd>
<dfn>(not the Glade File menu, <u>your</u> new menu)</dfn>
</dd>
<dd>
<ul>
<li>This will select menuitem1 in the upper right Glade pane</li>
<li>Click the arrow to open the submenu (menu1)</li>
<li>Click its arrow to expand the actual menu items</li>
<li>Select imagemenuitem5
(That will be <u>your</u> File/Quit menu item.)
</li>
</ul>
</dd>
</li>
<li>From the Menu Item Properties pane <dfn>(lower right)</dfn> select the Signals tab.</li>
<li>Select the activate signal, and as you did with the Quit button, type in Quit.</li>
</ul>
</p>
<p>
Now your File menu Quit option will...erm.. quit.</p>
</p>
<hr />
<h4>Step 5 - Connecting Euphoria Functions</h4>
<p>
Let's add some actual Euphoria code next. Follow the steps directly above, but this time click on
the Help menu item, and expand the list so that you can select imagemenuitem10 (Help/About).
<ul>
<li>In the Signals tab, select activate and type in help_me (again, no quotes, hit enter)</li>
<li>Save your work, and run the program again.</li>
</ul>
<p>In your terminal you should see something like:</p>
<div class="scrn">
<tt><pre>
-----------------------------------------------
-- Undeclared function in test1.glade
-----------------------------------------------
---------------------------
global function help_me()
---------------------------
return 1
end function
</pre></tt></div>
<p>
What to do? Copy the function prototype and paste it into your Euphoria program.
Then edit it to look like the one below:
</p><img src="../screenshots/test3.png" alt="test3" align="right" float="left" />
<div class="quote" style="width:50%"><pre><em> --------------------------</em>
<em class="kw"><b> global</b> function</em> help_me()
<em> --------------------------</em>
<em class="gtk"> Info</em>(,,<em class="str">"About","My fine program!"</em>)
<em class="kw"> return</em> 1
<em class="kw"> end function</em>
</pre></div>
<p>
Run it again, and click on the Help/About menu item. Note that your program is still only
7 lines of code.
</p>
<br clear="all" />
<p>
<hr />
<a href="StartingGlade2.html">On to topic two</a>
<hr />
</p>
<footer>
<div class="hint">
<img class="hint" src="../thumbnails/mongoose.png" alt="hint" align="left" float="right" />
<p>
This page edited by The Bear,
a web-page and programming editor
written in <a href="OpenEuphoria.org">Euphoria</a>.
</p>
<p>Updated for EuGTK version 4.11.11, Sept 1, 2016<br />
All code &copy; 2016 by Irv Mullins
</p>
</div>
</footer>
</body>
</html>

208
eugtk/examples/documentation/StartingGlade2.html Normal file
View File

@@ -0,0 +1,208 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Starting Glade - Chap. 2</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h2>Using Glade</h2>
<img src="../screenshots/x3.png" alt="glade" align="right" width="400" />
<h3>Linking more functions</h3>
<h4>Opening a file</h4>
<p>
Use Glade to select the File/Open menu item, which will be named imagemenuitem2<br />
<i><small><em>(note that you are free to change the name of any item by typing the new name
into the ID: entry on the General tab for that item.</small></i>
</em></p>
<p>
Let's do so, and change this to the more meaningful name: <code>file_open</code>
(as usual, no quotes).
</p>
<p>
Now select the Signals tab, and set the <i>activate</i> handler to be <code>open_file</code>
(ok, so I'm not being very original, too bad :p)
</p>
<p>Click the Save the Current Project toolbutton, and run your program again.
In your terminal you should see something resembling:
<div class="scrn"><tt><pre>
-------------------------------------------------
-- Undeclared function in test1.glade
-------------------------------------------------
------------------------------
global function open_file()
------------------------------
return 1
end function
</pre></tt></div>
<p>
You should have expected that. Copy this template, paste it into your Eu program,
and fill in the blank.
</p>
<p>For this program, you'll also have to
add <tt><em class="kw">include</em> GtkFileSelector.e</tt> to your program.
</p>
<div class="quote"></p><tt><pre>
<em class="kw">include</em> GtkEngine.e
<em class="kw">include</em> GtkFileSelector.e
<em class="gtk">add</em>(builder,<em class="str">"~/demos/examples/glade/test1.glade"</em>)
<em class="gtk">main</em>()
<em>---------------------------</em>
<em class="kw"><b>global</b> function</em> help_me()
<em>---------------------------</em>
<em class="kw">return</em> <em class="gtk">Info</em>(,,<em class="str">"About","My fine program!"</em>)
<em class="kw">end function</em>
<em>----------------------------</em>
<em class="kw"><b>global</b> function</em> open_file()
<em>----------------------------</em>
<em class="kw">object</em> fname = fileselector:Open(<em class="str">"*.ex"</em>)
<em class="kw">if sequence</em>(fname) <em class="kw">then</em>
<em class="gtk">Info</em>(,,<em class="str">"You Selected"</em>,fname)
<em class="kw">end if</em>
<em class="kw">return</em> 1
<em class="kw">end function</em>
</pre></tt>
</div>
<p>
Click on a file, and you should see the filename displayed in
a neat pop-up box.
</p>
<hr />
<img src="../screenshots/glade_test_1.png" alt="glade test 1" align="right" width="500" />
<h3>Adding Widgets</h3>
<h4>Containers</h4>
<p>
If you recall, the original Box<img class="x" src="../thumbnails/green_star.png" alt="green star" height="15px;" /> we added as the first item in our window had
3 'divisions'. We filled the first (top) with a menu, and the 3rd (bottom) with
a button. The middle one was left empty, and so it doesn't show at all.
</p>
<p>Let's add some things to the middle.
We can't put more than one item in there; try it, you'll see.
</p>
<p>
We'll need a container if we want more than one thing there, so choose another
Box <img class="x" src="../thumbnails/green_star.png" alt="green star" height="15px;" />,
drop it into the empty middle space, change number of items to 2, and click create.
The default orientation is vertical, which won't do for this particular demo, so change it
to horizontal.
</p>
<p>
Into the left-hand panel of the Box we just added, drop an image container. It's the little house with the yellow roof in the Control and Display section of the left-hand toolbar. <img src="../thumbnails/little_house.png" alt="little house" align="top" />
</p>
<p>
In the right-hand panel, drop a label container. It's also in the Control and Display section. Under Appearance/Label: type in some text. Use markup if you like, and click the Use Markup checkbox.
Save your work, you should do this frequently.
</p>
<img src="../screenshots/test5.png" alt="test5" align="right" />
<p>
What about the image?
We'll need to pick one, so click on the little missing image
icon on your program's window, and choose one of the following:
<ul>
<li>A stock id from the drop-down combo</li>
<li>An icon name<dd>face-cool, for example</dd></li>
<li>A file
<dd>Choose one from the file selector on the right.</dd>
<dd>(You'll find that if you use an image loaded from a file,
the image must be in the same folder as your program,
otherwise it's difficult, but not impossible,
for your program to find it at runtime.)
</em></dd>
</li>
</ul>
</p>
<p>
Run the program again, and note that no changes or additions or adjustments were required to the 12 lines of Euphoria source code.
</p>
<br clear="all" />
<hr />
<img src="../screenshots/test6.png" alt="Calendar" align="right" width="500px" />
<p>
Suppose we want an image more pleasing than the one above?
Just change the open_file function a bit:
</p>
<p>
<div class="quote"><pre><code> <em>-----------------------------</em>
<em class="kw"><b> global</b> function</em> open_file()
<em> -----------------------------</em>
<em class="gtk"> fileselector:filters</em> = {<em class="str">"image"</em>}
<em class="kw" > object</em> newfile = <em class="gtk">fileselector:Open</em>(<em class="str">"*"</em>)
<em class="kw"> if sequence</em>(newfile) <em class="kw">then</em>
<em class="gtk"> set</em>(<em class="str">"image1","from file"</em>,newfile)
<em class="kw"> end if</em>
<em class="kw"> return</em> 1
<em class="kw"> end function</em>
</code></pre></div>
</p>
<p>
Just click on the image you prefer. I like this one!
</p>
<hr />
<h3>In Conclusion</h3>
<h4>Chapters 3...99</h4>
<p>
Building more complex objects such as TreeViews, ListViews, etc. with Glade will involve some experimenting.
Explaining these in detail (using words) would require a whole book, which, like most such
books, would cost $99.00 plus tax, and would bore you half to death.
</p>
<p>
So, if you really feel that you can't handle it on your own from here, start saving your $99.00 (plus tax) for the book. You might have a long wait.
</p>
<p>But frankly, Glade doesn't save any time when creating these objects, since the process is somewhat tedious. You can achieve the same outcome by writing just a few
lines of code with an ordinary text editor, cutting and pasting from demo programs where applicable. Try it - this isn't rocket science!
</p>
<hr />
<footer>
<div class="hint">
<img class="hint" src="../thumbnails/mongoose.png" alt="hint" align="left" float="right" />
<p>
This page edited by The Bear,
a web-page and programming editor
written in <a href="OpenEuphoria.org">Euphoria</a>.
</p>
<p>Updated for EuGTK version 4.11.11, Sept 1, 2016<br />
All code &copy; 2016 by Irv Mullins
</p>
</div>
</footer>
</body>
</html>

153
eugtk/examples/documentation/bear.html Normal file
View File

@@ -0,0 +1,153 @@
<!DOCTYPE html>
<head>
<title>Bear Docs</title>
<style>
div.hint {
display: block;
border: thin solid black;
padding: 8px;
font-size: small;
background-image: linear-gradient(180deg, cornsilk,skyblue);
border-radius: 15px;
margin-left: 10px;
margin-right: 10px;
width=80%;}
div.hdr {
display: block;
background-image: linear-gradient(180deg, cornsilk, skyblue);
background-repeat: no-repeat;
}
div.quote {
display: block;
margin: 5px;
padding: 5px;
border: thin solid black;
background-image: linear-gradient(180deg, ivory,honeydew);
font-size: small;
}
div.quote dd {font-size: smaller;}
</style>
</head>
<body>
<div class="hdr">
<h2><hr />The Bear Help file<hr /></h2>
</div>
<figure style="float:right; border:solid thin black; border:none; width="100%">
<a href="images/bear0.png">
<img src="images/bear0.png" alt="bear" width="100%" style="margin-left:0;" /></a>
<figcaption>
<small><i>&nbsp;The BEAR can even view Bear videos!</i></small>
</a>
</figcaption>
</figure>
<br clear="all" />
<h4>Browser Controls</h4>
<img src="images/bear1.png" />
<p>
To open a page from the web, click the Network button. A dialog box
will appear for you to type in a web address: http://OpenEuphoria.org,
for example. This button will be disabled if you are not on a network.
</p>
<p>
To open a local file (.html or otherwise), click the Local button. In most cases,
the file type will be automatically recognized and placed into the appropriate
window.
</p>
<div class="hint">
<img class="hint" src="../thumbnails/hint.png" alt="hint" width="100px" align="left" float="right" />
<p>
The sourcecode editor does <i><b>not</b></i> automatically 'track' the
current web page being viewed. If you want to edit the current web page
.html, you <b>must</b> click on the Edit button in the Browser toolbar!</p>
</div>
<hr />
<h4>Source Controls</h4>
<img src="images/bear3.png" />
<p>
Click New or Open to create or edit a text file (Euphoria source code, for example).
If the file extension is .ex, then the Execute button in the Source toolbar
will be enabled; clicking on it will run <i>a temporary copy</i> of the program in the Source pane.
If you are satisfied with the way the temporary copy ran, just click on the Save or SaveAs buttons
to write the updated code to disk.
</p>
<img src="images/bear4.png" />
<p>
The Execute button will be disabled if the code being edited is not
a Euphoria program, but the Save and SaveAs buttons will function to save
text, including .html that you may have modified. If the file is .html, then
the WebView will be reloaded to show the updated web page.
</p>
<div class="quote">
<h4>Preferences</h4>
<p>
Options for the source code editor are:
<ul>
<li>Set Editor Font<dd> (only monospace fonts are shown in the
font dialog, since this is primarily for editing source and html
code)</dd></li>
<li>Use Line Numbers</li>
<li>Spaces and Tabs<dd>Make whitespace characters visible</dd></li>
</ul>
</p>
</div>
<br />
<b>Navigating</b>
<p>
In order to more easily edit html source code, you can highlight
words or a phrase in the web view, and select 'copy' from the pop-up menu.
Then click on the Find button in the Web Page control panel.
This will try to scroll the editor
pane to find the matching word(s).
</p>
<p>Avoid clicking on text that
includes markup, such as <i>italics</i> or <b>bold</b>, as those won't match a text search.
Neither will markup items such as &amp; &lt; &gt;, etc.,
or hidden markup such as links.
</p>
<p>This scheme doesn't always work perfectly,
(sometimes not at all, try clicking on the find button again),
but it's certainly
better than nothing! If you know of a better way, please let me know!
</p>
<footer>
<div class="hint">
<img class="hint" src="../thumbnails/mongoose.png" alt="hint" align="left" float="right" />
<p>
This page edited by The <a href="../BEAR.ex">Bear</a>,
a web-page and programming editor
written in <a href="OpenEuphoria.org">Euphoria</a>.
</p>
<p>
Updated for EuGTK version 4.11.11, Aug 15, 2016<br />
All code &copy; 2016 by Irv Mullins
</p>
</div>
</footer>
</body>
</html>

277
eugtk/examples/documentation/dialogs.html Normal file
View File

@@ -0,0 +1,277 @@
<! DOCTYPE html>
<html lang="en">
<head>
<title>EuGTK Dialogs</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<img src="../thumbnails/gtk-logo-rgb.gif"><alt="GTK LOGO"></img>
<img src="../thumbnails/mongoose.png"><alt="mongoose"></img>
<img src="../thumbnails/gnome-run.png"alt="gnome-run" align="right" />
<h2><hr />EuGTK 4.12.0</h2>
<h3>Built-in Dialogs</h3><hr />
</header>
<nav>
<div class="hdr">Quick Links:</div>
<a href="#creating"><button>Creating</button></a>
<a href="#modal"><button>Modal Dialogs</button></a>
<a href="#nonmodal"><button>Non-modal Dialogs</button></a>
<br />
<div class="hdr">Other Files:</div>
<a href="README.html"><button>README</button></a>
<a href="HowItWorks.html"><button>How EuGTK Works</button></a>
<a href="guide_a.html"><button>Alphabetical guide</button></a>
<a href="printing.html"><button>Printing</button></a>
<a href="pango_markup.html"><button>Markup</button></a>
<a href="treeviews.html"><button>ListView/TreeView</button></a>
<a href="ServerHelp.html"><button>Web Server</button></a>
<a href="functions.html"><button>Quick Function List</button></a>
<a href="Glade.html"><button>Glade GUI Builder</button></a>
<a href="platforms.html"><button>Platforms</button></a>
</nav>
<br />
<hr />
<table border="0">
<tr><th colspan="1">Built-in Dialogs</th></tr>
<tr>
<td rowspan="6">
<div class="hint">
<img class="hint" src="../thumbnails/hint.png" alt="hint" width="100px" align="left" float="right" />
<p><b>New:</b><br />
An easy-to-use Custom dialog, and <a href="#nonmodal">non-modal dialogs</a>!
</p>
</div>
<p>
There are five pre-built <a href="#modal">modal dialogs</a> in EuGTK, which you can use
in your own programs to save time and typing, while making your program
code much easier to read and maintain. They require only one line of code,
whereas using GTK's Dialogs or MessageDialogs can require many lines of code. There's also a non-modal dialog.
</p>
<p>
Dialogs have a title, a <i>primary text</i> item, a <i>secondary text</i> item,
plus one or more buttons.
</p>
<p>
Note that each dialog has different default titles, icons and buttons.
The primary and secondary text however, must be supplied by the programmer.
</p>
<p>
Dialogs appearance and contents can be changed by exercising various options. See 8 below.
</p>
<p>
All defaults can be overridden when creating a dialog. The
parameters to the dialog are shown below. All are optional.<br />
<ol>
<li>Parent of the dialog
<dd>If you want the dialog to use the parent window's titlebar icon (and window theme allows), put the parent's handle here</dd></li>
<li>Title appearing on the titlebar
<dd>If omitted, title will be the type of dialog, e.g. Info, Error, Warning, or Question</dd></li>
<li>Primary text
<dd>Will be bold if there is secondary text, use markup if you wish</dd></li>
<li>Secondary text
<dd>Will be smaller than primary text, use markup if you wish</dd></li>
<li>Button set
<dd>Leave empty to use the default button set,</dd>
<dd>or use GTK_BUTTONS_ enums to change button set.</dd>
<dd>NULL (0) in this slot means don't use any buttons!</dd></li>
<li>Dialog icon
<dd>A GtkImage, GdkPixbuf, path to an image file, or name of stock or theme icon,
will override the default dialog icon with a custom image.</dd>
<dd>NULL in this slot means don't use a dialog icon.</dd>
<dd>Leave empty to use default Info, Warn, Error, Question icons</dd></li>
<li>Titlebar Icon
<dd>Name of icon, this overrides icon set by dialog.</dd>
<dd>NULL here means use parent's icon.</dd>
<dd>Leave empty to use default Info, Warn, Error, Question icons</dd>
<dd><em>Note: some themes refuse to show an icon on the titlebar.</em></dd></li>
<hr />
<li>Modality
<dd>MODAL/NONMODAL</dd>
</li>
<li>Addon
<small><em>new in EuGTK 4.10</em></small>
<dd>You can pass the handle to a widget here,
and the widget will be added to the dialog.
The widget can, of course, be a container which
may contain several items. See example on the right,
which adds a GtkTextView widget to the
standard Info dialog.</dd>
</li>
<li>X position
<small><em>new in EuGTK 4.11</em></small>
<dd>You can pass an x position for the dialog, following the addon option</dd>
</li>
<li>Y position
<small><em>new in EuGTK 4.11</em></small>
<dd>You can pass a y position for the dialog, following the X option</dd>
</li>
</ol>
</p>
</td>
</tr>
<tr>
<td><img src="../screenshots/info.png" alt="info dialog" title="Info dialog" /></td>
</tr>
<tr>
<td><img src="../screenshots/error.png" alt="error dialog" title="Error dialog" /></td>
</tr>
<tr>
<td><img src="../screenshots/warn.png" alt="warn dialog" title="Warn dialog" /></td>
</tr>
<tr>
<td><img src="../screenshots/question.png" alt="question dialog" title="Question dialog" /></td>
</tr>
<tr>
<td><img src="../screenshots/test92.png" alt="custom dialog"
title = "Custom dialog" width="300" align="right" /></td>
</tr>
</table>
<a name="creating" />
<h3><hr />Creating the dialogs<hr /></h3>
<p>
<ul>
<li><i>result</i> = <b>Info(</b><i><small>&nbsp;[parent]</small></i>,<i><small>&nbsp;[title]</small></i>,&nbsp;"Primary Text",&nbsp;"Secondary Text",<br />&nbsp;<i><small>[button type],&nbsp;[dialog icon],&nbsp;[titlebar icon],&nbsp;[modal],&nbsp;[addon],&nbsp;[x pos],&nbsp;[y pos]</small></i><b>)</b></li>
<li><i>result</i> = <b>Error(</b><i><small>&nbsp;[parent]</small></i>,<i><small>&nbsp;[title]</small></i>,&nbsp;"Primary Text",&nbsp;"Secondary Text",<br />&nbsp;<i><small>[button type],&nbsp;[dialog icon],&nbsp;[titlebar icon],&nbsp;[modal],&nbsp;[addon],&nbsp;[x pos],&nbsp;[y pos]</small></i><b>)</b></li>
<li><i>result</i> = <b>Warn(</b><i><small>&nbsp;[parent]</small></i>,<i><small>&nbsp;[title]</small></i>,&nbsp;"Primary Text",&nbsp;"Secondary Text",<br />&nbsp;<i><small>[button type],&nbsp;[dialog icon],&nbsp;[titlebar icon],&nbsp;[modal],&nbsp;[addon],&nbsp;[x pos],&nbsp;[y pos]</small></i><b>)</b></li>
<li><i>result</i> = <b>Question(</b><i><small>&nbsp;[parent]</small></i>,<i><small>&nbsp;[title]</small></i>,&nbsp;"Primary Text",&nbsp;"Secondary Text",<br />&nbsp;<i><small>[button type],&nbsp;[dialog icon],&nbsp;[titlebar icon],&nbsp;[modal],&nbsp;[addon],&nbsp;[x pos],&nbsp;[y pos]</small></i><b>)</b></li>
<li><i>result</i> = <b>Custom(</b><i><small>&nbsp;[parent]</small></i>,<i><small>&nbsp;[title]</small></i>,&nbsp;"Primary Text",&nbsp;"Secondary Text",<br />&nbsp;<i><small>[button type],&nbsp;[dialog icon],&nbsp;[titlebar icon],&nbsp;[modal],&nbsp;[addon],&nbsp;[x pos],&nbsp;[y pos]</small></i><b>)</b></li>
</ul>
</p>
<p>
Primary and Secondary text can be marked up as desired. <i><small>[optional]</small></i> parameters can be left empty,
defaults will be used.
</p>
<a name="modal" />
<h3><hr />Modal Dialogs<hr /></h3>
<p>Modal dialogs lock you out of doing other things until you reply to them, then return various values when dismissed via button clicks
or the titlebar 'close' button. These values are:<br />
<ul>
<li>MB_ABORT (-4) when dialog is closed using the titlebar 'close' button <b>[X]</b></li>
<li>MB_OK (-5) when <b><u>O</u>K</b> button is clicked</li>
<li>MB_CANCEL (-6) when <b><u>C</u>ancel</b> button is clicked</li>
<li>MB_CLOSE (-7) when <b><u>C</u>lose</b> button is clicked</li>
<li>MB_YES (-8) when the <b><u>Y</u>es</b> button is clicked</li>
<li>MB_NO (-9) when the <b><u>N</u>o</b> button is clicked</li>
<li>MB_APPLY (-10)</li>
</ul>
</p>
<a name="nonmodal" />
<h3><hr />Non-modal dialogs<hr /></h3>
<p>
All the above built-in dialogs are by default <u>modal</u>, in that they capture the program focus until
they are dismissed. This is probably appropriate for most notification purposes. For places where
you need non-modal dialogs which you can leave on the screen while you work on
other windows in the same program, you'll have to do this a different way.
</p>
<p>
<i>Why,</i> you ask?
</p>
<p>
Because the reason for leaving dialogs on the screen is so they can
they interact with your code, perhaps
changing items in other windows in response to changes in dialog options.
I can't predict what those options and connections might be, so I can't provide a ready-to-use dialog.
You might start with a basic GtkDialog, and build one up yourself, but this can be a lot of work, so I've
added a pre-built Custom dialog with options.
</p>
<a name="nonmodal" />
<p>
A non-modal dialog needs to be able to trigger actions <i>before</i> closing,
since it can remain on the screen for as long as the user wants.
Therefore, the dialog's buttons must be connected to user-written functions
prior to adding them to the dialog.
</p>
<p>
To add buttons to a Custom dialog, use the following syntax:
<code><pre>
<em>-- for one button</em>
<em class="kw">object</em> btn = {{<em class="str">"gtk-ok"</em>,say,<em class="str">"OK"</em>}} <em>-- say is the call_back to your function Say(), and "OK" is text to send to the function.</em>
<em>-- or, for more than one</em>
<em class="kw">object</em> btns = {
{<em class="str">"gtk-ok"</em>,say,<em class="str">"OK"</em>},
{<em class="str">"gtk-cancel"</em>}, <em>-- any button not provided with a call_back will be used to cancel the dialog (regardless of what the button caption says)</em>
{<em class="str">"gtk-quit","Quit"</em>} <em>-- this does the obvious, killing the whole program, probably not something you'd want to do from a non-modal dialog!</em>
}
</pre></code></p>
Next, you put the btn or btns array as the 5<sup>th</sup> parameter passed to the dialog constructor:
<pre><code> <em class="gtk">Custom</em>(win,<em class="str">"Fonts Help","Instructions"</em>,help_text,<em class='blue'><u><b>btns</b></u></em>)
</code></pre>
</p>
<p>
Most often, you will want to add some control(s) other than buttons to a non-modal dialog, for example, one
or more color chooser buttons, or a font chooser, etc., or perhaps some scrolling text or an image.
These would look out of place if they were added to the button area of a dialog.
</p>
<p>
To add these to the dialog's content area, create the item and pass the handle of this item as the Addon (9<sup>th</sup>) parameter to the dialog.
If you need several, pack them into a container and pass the handle of the container. See <a href="../test200.ex">test200.ex</a>.
</p>
<p>
It is best to limit the use of non-modal dialogs, since they tend to clutter up the screen. If you're using lots of these,
you are most likely doing something wrong. Menu options, sidebars, or moveable panes are often better substitutes.
</p>
<footer>
<div class="hint">
<img class="hint" src="../thumbnails/mongoose.png" alt="hint" align="left" float="right" />
<p>
This page edited by The <a href="README.html#bear">Bear</a>,
a web-page and programming editor
written in <a href="OpenEuphoria.org">Euphoria</a>.
</p>
<p>
Updated for EuGTK version 4.12.0, Sept 15, 2016<br />
All code &copy; 2016 by Irv Mullins
</p>
</div>
</footer>
</body>
</html>

BIN
eugtk/examples/documentation/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

253
eugtk/examples/documentation/functions.html Normal file
View File

@@ -0,0 +1,253 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>EuGTK Internals</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<heading>
<img src="../thumbnails/gtk-logo-rgb.gif" alt="GTK LOGO" />
<img src="../thumbnails/mongoose.png" alt="mongoose" />
<img src="../thumbnails/gnome-run.png"alt="gnome-run" align="right" />
<h2> <hr />EuGTK 4.12.0<hr /> </h2>
<h3>Quick Function List</h3>
</heading>
<nav>
<div class="hdr">Quick Links</div>
<a href="#functions"><button>Functions</button></a>
<a href="#utilities"><button>Utilities</button></a>
<a href="#constants"><button>Constants</button></a>
<a href="#identifiers"><button>Identifiers</button></a>
<a href="#misc"><button>Other</button></a>
</nav>
<nav>
<div class="hdr">Other Files:</div>
<a href="HowItWorks.html"><button>How EuGTK Works</button></a>
<a href="README.html"><button>README</button></a>
<a href="guide_a.html"><button>Alphabetical Guide</button></a>
<a href="dialogs.html"><button>Built-in EuGTK Dialogs</button></a>
<a href="treeviews.html"><button>ListView/TreeView widgets</button></a>
<a href="pango_markup.html"><button>Markup</button></a>
<a href="printing.html"><button>Printing</button></a>
<a href="ServerHelp.html"><button>Web Server</button></a>
<a href="Glade.html"><button>Glade GUI Builder</button></a>
<a href="platforms.html"><button>Platforms</button></a>
</nav>
<body>
<a name="functions" />
<h3><hr />Public functions ~ commonly-used<hr /></h3>
<ul>
<li>create() <dfn>returns handle to newly-created widget:<em> win = create(GtkWindow)</em></dfn></li>
<li>set() <dfn>sets a property for a widget: <em>set(win,"background","blue")</em></dfn></li>
<li>get() <dfn>gets a property: <em>? get(win,"background")</em></dfn></li>
<li>add() <dfn>adds a widget to a container: <em>add(win,panel)</em>; spaces divided equally</dfn></li>
<li>pack_start() <dfn> adds at top/left</dfn></li>
<li>pack_end() <dfn> adds at bottom/right</dfn></li>
<li>show() <dfn>show a widget: <em>show(btn)</em></dfn></li>
<li>show_all() <dfn>show a container and all items contained within: <em>show_all(win)</em></dfn></li>
<li>hide() <dfn>hide a widget: <em>hide(btn)</em></dfn></li>
<li>hide_all() <dfn>hide a container and all items contained within: <em>hide_all(win)</em></dfn></li>
<li>connect() <dfn>connect a signal to a Eu function: <em>connect(btn1,"clicked","FooBar",33)</em> Note: connect() returns a sigid, usually ignored unless you plan to disconnect.</dfn></li>
<li>disconnect() <dfn>disconnect a signal: <em>disconnect(btn1,sigid)</em></dfn></li>
<li>main() <dfn>start the GTK main processing loop: <em>main()</em></dfn></li>
<li>requires() <dfn>pop up an Error dialog if not available: <em>requires("3.10","GtkRevealer")</em></dfn></li>
<li>destroy() <dfn>destroy a widget: <em>destroy(win)</em></dfn></li>
<li>unpack() <dfn>convert data attached to a control back into format usable by Euphoria: <em>unpack(data)</em></dfn></li>
<li>show_uri() <dfn>call default handler for uri (file, http, etc...): <em>show_uri("http://gtk.org")</em></dfn></li>
<li>"Quit" <dfn>global call to shut down the GTK main processing loop: <em>connect(win,"destroy","Quit")</em></dfn></li>
<li> pointer() <dfn>obtains a handle, a.k.a. pointer, to an object loaded from Glade
<em>constant win = pointer("help:window1")</em></dfn></li>
<li>_() <dfn>shorthand for call_back(routine_id()), links signals to local functions, no global declarations required</dfn></li>
<li>$... <dfn>shorthand for signal links e.g. $destroy=Quit</dfn></li>
</ul>
<p>
See <a href="HowItWorks.html">HowItWorks</a> for details on the above functions, you will use some of them frequently!
</p>
<p> See also: <a href="HowItWorks.html#settings"> settings</a></p>
<a name="utilities" />
<h3><hr />Utility functions ~ sometimes used<hr /></h3>
<h5>General functions</h5>
<ul>
<li> has_icon(name) <dfn>returns TRUE if named icon exists in current theme</dfn></li>
<li> list_icons() <dfn>returns a {list} of all icon names in current theme</dfn></li>
<li> valid_icon({list}) <dfn>given a list of possible icon names, returns handle to an image made from first valid name</dfn> </li>
<li> valid_icon_name({list}) <dfn>given a list of possible icon names, returns first valid name</dfn> </li>
<li> icon_info(handle) <dfn>returns a sequence: pointer to info struct, name, path, size, scale</dfn></li>
<li> class_name(handle) <dfn>returns the classname from a widget handle: <em>display(classname(win))</em> => &quot;GtkWindow&quot; </dfn></li>
<li> class_id(handle) <dfn>returns the enumerated class for the handle: <em>if classid(win) = GtkWindow then ...</em> </dfn></li>
<li> object_name(handle) <dfn>returns name if object has a name, -nil- otherwise</dfn></li>
<li> register(handle,class) <dfn>registers handle as a class: <em>register(win,GtkWindow)</em> hardly ever needed.</dfn></li>
<li> to_sequence(GList) <dfn>converts a glist pointer back into a Eu sequence: <em>rarely used!</em></dfn></li>
<li> to_rgba(str) <dfn>converts a color description to a pointer: <em>? to_rgba("skyblue")</em></dfn></li>
<li> from_rgba(ptr) <dfn>converts a color pointer into <em>&quot;rgb(r,g,b)&quot;</em> or <em>&quot;rgba(r,g,b,a)&quot;</em></dfn></li>
<li> pixbuf_formats() <dfn>returns a list of implemented formats for pixbuf loader</dfn></li>
</ul>
<hr />
<h5>Settings</h5>
<ul>
<li>settings:Save()</li>
<li>settings:Load()</li>
<li>settings:Add()</li>
</ul>
<hr />
<h5>Events</h5>
<ul>
<li> events:id <dfn>returns unique event id: <em>? events:id(event)</em></dfn></li>
<li> events:xy <dfn> returns location of event</dfn></li>
<li> events:axes </li>
<li> events:time </li>
<li> events:state</li>
<li> events:window</li>
<li> events:device</li>
<li> events:clicks <dfn>returns # of mouse clicks in event</dfn></li>
<li> events:scroll_dir</li>
<li> events:key <dfn>returns keypressed value</dfn></li>
<li> events:button <dfn>returns mouse button 1..3 when given an event:
<em>? events:button(event)</em></dfn></li>
<li> events:pending <dfn>used when multitasking</dfn></li>
<li> events:main_iteration </li>
<li> events:main_iteration_do </li>
</ul)
</ul></ul>
<hr />
<h5>Networking</h5>
<ul>
<li> networked <dfn> returns TRUE if your computer is part of a network</dfn></li>
<li> inet_connected <dfn> returns TRUE if internet could be reached</dfn></li>
<li> get_net_address <dfn> returns 127.0.0.1 or your current ip</dfn></li>
</ul>
<p> See <a href="../GtkEvents.e"> events</a></p>
<a name="constants" />
<h3><hr />Exported constants ~ available if you need them<hr /></h3>
<img src="../screenshots/test0.png" alt="test0 screenshot" title="Test0 demonstrates most of these!" align="right" width="50%" />
<ul class="constants">
<li>version<dfn> EuGTK version: <em> "4.11.8"</em></dfn></li>
<li>release<dfn> EuGTK release date: <em>"Aug 1, 2014"</em></dfn></li>
<li>copyright<dfn> EuGTK copyright: <em> "(c) 2015 by Irv Mullins"</em></dfn></li>
<li>major_version<dfn> for GTK 3.10.1: <em>3</em></dfn></li>
<li>minor_version<dfn> for GTK 3.10.1: <em>10</em></dfn></li>
<li>micro_version<dfn> for GTK 3.10.1: <em>1</em></dfn></li>
<li>user_name<dfn> The user logged-in: <em> irv </em></dfn></li>
<li>real_name<dfn> Full name: <em> Irv Mullins</em></dfn></li>
<li>host_name<dfn> host name of computer: <em> Mint17</em></dfn></li>
<li>host_addr <dfn> host address: <em>192.168.1.100</em></li>
<li>home_dir<dfn> logged-in user's home: <em> /home/irv</em></dfn></li>
<li>temp_dir<dfn> user's temp dir: <em> /tmp</em></dfn></li>
<li>curr_dir<dfn> user's currently-logged into directory </dfn></li>
<li>conf_dir<dfn> user's config directory <em> /home/irv/.conf</em></dfn></li>
<li>runt_dir<dfn> user's runtime directory <em> /run/user/1000</em></dfn></li>
<li>prg_name<dfn> current program <em> test0.ex</em></dfn></li>
<li>os_name <dfn><em>Linux</em></dfn></li>
<li>os_distro <dfn><em> Mint 17</em></dfn></li>
<li>os_version <dfn><em>3.13.0-24-generic</em></dfn></li>
<li>os_comp <dfn><em>#46-Ubuntu SMP Thu Apr 10...</em></dfn></li>
<li>os_arch <dfn><em>x86_64</em></dfn> </li>
<li>os_term <dfn><em>xterm</em></dfn></li>
<li>os_shell <dfn><em>/bin/bash</em></dfn></li>
<li>eu_version <dfn> version string: <em>"4.1.0"</em></dfn></li>
<li>eu_revision <dfn> revision # <em>6318</em></dfn></li>
<li>eu_date <dfn>date compiled</dfn></li>
<li>today <dfn>date program started</dfn></li>
<li>start_time <dfn>time program started</dfn></li>
<br />
<li>def_lang <dfn>default language <em>en-us</em></dfn></li>
<br />
<li>CMD1 <dfn>command_line[1] <em>e.g. eui</em></dfn></li>
<li>CMD2 <dfn>command_line[2] <em>e.g. /home/irv/demos/test1.ex</em></dfn></li>
<br />
<li>LGPL<dfn> Text of the Lesser General Public License</dfn></li>
<li>stock_list<dfn> List of GTK stock items - soon to be deprecated!</dfn></li>
</ul>
<p>
<em>Note 1:</em> these constants are generated when EuGTK starts up, and are available in two different forms:
<ul>
<li>As individual constants</li>
<li>As key/value pairs in the gtk:info structure,
provided mainly for convenience when displaying them:
&nbsp;<code> display("[{prg_name}]",gtk:info)</code></li>
</ul>
See <a href="../test0.ex">test0</a> for an example.
<br /><br />
</p>
<h3><hr />Other Stuff<hr /></h3>
<a name="identifiers" />
<b>Identifiers</b>
<p>Below are unique identifiers used to specify storage types in List/Tree models, not only do these control how the value
is stored, but also how it is displayed:
<ul>
<li>gINT <dfn>Store and display as an integer (rounds floats down)</dfn></li>
<li>gDBL <dfn>Store and display as a double</dfn></li>
<li>gSTR <dfn>Store and display as a string</dfn></li>
<li>gPTR <dfn>Generic pointer - seldom used</dfn></li>
<li>gFLT <dfn>Displays with six digits following the decimal point</dfn></li>
<li>gBOOL <dfn>anything other than 0 displays TRUE, 0 displays FALSE</dfn></li>
<li>gPIX <dfn>Stores handle to a pixbuf, displays that image</dfn></li>
<li>gCOMBO <dfn>Stores handle to a GtkComboBox</dfn></li>
</ul>
<p>Unique identifiers below save space in method prototypes;
programmer may use them when calling the three user functions which follow.
<ul>
<li>P <dfn>= C_POINTER expected parameter is a pointer</dfn></li>
<li>I <dfn>= C_INT expected parameter is an integer</dfn></li>
<li>S <dfn>= E_OBJECT expected parameter is a string</dfn></li>
<li>B <dfn>= C_BYTE expected parameter is boolean</dfn></li>
<li>D <dfn>= C_DOUBLE expected parameter is a double</dfn></li>
<li>F <dfn>= C_FLOAT expected parameter is a floating-point value</dfn></li>
<li>A <dfn>= E_SEQUENCE expected parameter is an array</dfn></li>
</ul>
<a name="misc" />
<b>User functions</b>
<p>While mostly used internally by EuGTK, they may be useful
when testing or when implementing GTK methods which haven't been added to EuGTK.
</p>
<ul>
<li>gtk_func<dfn> Example:<code> <em>gtk_func("gtk_label_set_text",{P},{allocate_string("Hello")})</em></code></dfn></li>
<li>gtk_str_func<dfn> Example:<code><em> puts(1,gtk_str_func("gtk_label_get_text",{P},{lbl})</em></code></dfn></li>
<li>gtk_proc<dfn> Example:<code><em> gtk_proc("gtk_widget_hide",{P},{win})</em></code></dfn></li>
</ul>
<footer>
<div class="hint">
<img class="hint" src="../thumbnails/mongoose.png" alt="hint" align="left" float="right" />
<p>
This page edited by The <a href="README.html#bear">Bear</a>,
a web-page and programming editor
written in <a href="OpenEuphoria.org">Euphoria</a>.
</p>
<p>
Updated for EuGTK version 4.12.0, Sept 15, 2016<br />
All code &copy; 2016 by Irv Mullins
</p>
</div>
</footer>
</body>
</html>

1558
eugtk/examples/documentation/guide_a.html Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
eugtk/examples/documentation/images/bear0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 691 KiB

BIN
eugtk/examples/documentation/images/bear1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
eugtk/examples/documentation/images/bear2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
eugtk/examples/documentation/images/bear3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
eugtk/examples/documentation/images/bear4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

267
eugtk/examples/documentation/pango_markup.html Normal file
View File

@@ -0,0 +1,267 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pango Markup</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<heading>
<img src="../thumbnails/gtk-logo-rgb.gif" alt="gtk logo" />
<img src="../thumbnails/mongoose.png" alt="mongoose" />
<a href="../test5.ex" alt="test5" title="click me" >
<img src="../screenshots/test5.jpg" alt="test5" title="test5" align="right" />
</a>
<h2>EuGTK 4.12.0</h2><h1>Pango Markup</h1>
<hr />
</heading>
<nav>
<div class="hdr">Other Files:</div>
<a href="README.html"><button>README</button></a>
<a href="HowItWorks.html"><button>How EuGTK Works</button></a>
<a href="guide_a.html"><button>Alphabetical Guide</button></a>
<a href="dialogs.html"><button>Built-in Dialogs</button></a>
<a href="treeviews.html"><button>ListView/TreeView</button></a>
<a href="printing.html"><button>Printing</button></a>
<a href="ServerHelp.html"><button>Web Server</button></a>
<a href="functions.html"><button>Quick Function List</button></a>
<a href="Glade.html"><button>Glade GUI Builder</button></a>
<a href="platforms.html"><button>Platforms</button></a>
<br />
</nav>
<a name="markup" />
<h3>Markup</h3>
<p>
While you can set text font, size and style for most Gtk widgets using normal
method calls, this affects <i>all</i> text displayed by that widget.
Changing only selected portions of the text cannot be done that way.
Instead, we can use a subset of HTML to embed changes within
the text string.
</p>
<small><i>Quote from the Pango Docs (formatting added)</i></small>
<div class="quote">
<blockquote>
<h3>Pango Text Attribute Markup Language</h3>
<p>
Frequently, you want to display some text to the user with attributes applied
to part of the text (for example, you might want bold or italicized words).
With the base Pango interfaces, you could create a PangoAttrList and apply
it to the text; the problem is that you'd need to apply attributes to some
numeric range of characters, for example "characters 12-17." This is broken
from an internationalization standpoint; once the text is translated, the
word you wanted to italicize could be in a different position.
</p>
<p>
The solution is to include the text attributes in the string to be translated.
Pango provides this feature with a small markup language...
</p>
<p>
A simple example of a marked-up string might be:
"&lt;span foreground='blue' size='x-large'&gt;Blue text&lt;/span&gt; is &lt;i&gt;cool&lt;/i&gt;!"
</p>
<p>
Pango uses #GMarkup to parse this language, which means that XML features such as numeric
character entities such as &amp;#169; for &#169; can be used too.
</p>
<p>
The root tag of a marked-up document is &lt;markup&gt;, but pango_parse_markup()
allows you to omit this tag, so you will most likely never need to use it.
The most general markup tag is &lt;span&gt;, then there are some convenience tags.
&lt;span&gt; has the following attributes:
</p>
<p>
<table class="testing" border="1">
<tr><th colspan="2">Attributes</th></tr>
<tr>
<td>font, font_desc</td>
<td>A font description string, such as "Sans Italic 12".
See pango_font_description_from_string() for a description of the format of the
string representation . Note that any other span attributes will override this
description. So if you have "Sans Italic" and also a style="normal" attribute,
you will get Sans normal, not italic.</td>
</tr>
<tr>
<td>font_family, face</td>
<td>A font family name</td>
</tr>
<tr>
<td>font_size, size</td>
<td>Font size in 1024ths of a point, or one of the absolute sizes 'xx-small',
'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', or one of the
relative sizes 'smaller' or 'larger'. If you want to specify a absolute size,
it's usually easier to take advantage of the ability to specify a partial font
description using 'font'; you can use font='12.5' rather than size='12800'</td>
</tr>
<tr>
<td>font_style, style</td>
<td>One of 'normal', 'oblique', 'italic'</td>
</tr>
<tr>
<td>font_weight, weight</td>
<td>One of 'ultralight', 'light', 'normal', 'bold', 'ultrabold', 'heavy',
or a numeric weight</td>
</tr>
<tr>
<td>font_variant, variant</td>
<td>One of 'normal' or 'smallcaps'</td>
</tr>
<tr>
<td>font_stretch, stretch</td>
<td>One of 'ultracondensed', 'extracondensed', 'condensed', 'semicondensed',
'normal', 'semiexpanded', 'expanded', 'extraexpanded', 'ultraexpanded'</td>
</tr>
<tr>
<td>foreground, fgcolor, color</td>
<td>An RGB color specification such as '#00FF00' or a color name such as 'red'</td>
</tr>
<tr>
<td>background, bgcolor</td>
<td>An RGB color specification such as '#00FF00' or a color name such as 'red'</td>
</tr>
<tr>
<td>underline</td>
<td>One of 'none', 'single', 'double', 'low', 'error'</td>
</tr>
<tr>
<td>underline_color</td>
<td>The color of underlines; an RGB color specification such as '#00FF00' or a
color name such as 'red'</td>
</tr>
<tr>
<td>rise</td>
<td>Vertical displacement, in Pango units. Can be negative for subscript, positive
for superscript.</td>
</tr>
<tr>
<td>strikethrough</td>
<td>'true' or 'false' whether to strike through the text</td>
</tr>
<tr>
<td>strikethrough_color</td>
<td>The color of strikethrough lines; an RGB color specification such as '#00FF00'
or a color name such as 'red'</td>
</tr>
<tr>
<td>fallback</td>
<td>'true' or 'false' whether to enable fallback. If disabled, then characters
will only be used from the closest matching font on the system. No fallback will
be done to other fonts on the system that might contain the characters in the text.
Fallback is enabled by default. Most applications should not disable fallback.</td>
</tr>
<tr>
<td>lang</td>
<td>A language code, indicating the text language</td>
</tr>
<tr>
<td>letter_spacing</td>
<td>Inter-letter spacing in 1024ths of a point.</td>
</tr>
<tr>
<td>gravity</td>
<td>One of 'south', 'east', 'north', 'west', 'auto'.</td>
</tr>
<tr>
<td>gravity_hint</td>
<td>One of 'natural', 'strong', 'line'.</td>
</tr>
<tr>
<th colspan="2">The following convenience tags are provided:</th>
</tr>
<tr>
<td>&lt;b&gt;</td>
<td>Bold</td>
</tr>
<tr>
<td>&lt;big&gt;</td>
<td>Makes font relatively larger, equivalent to &lt;span size="larger"&gt;</td>
</tr>
<tr>
<td>&lt;i&gt;</td>
<td>Italic</td>
</tr>
<tr>
<td>&lt;s&gt;</td>
<td>Strikethrough</td>
</tr>
<tr>
<td>&lt;sub&gt;</td>
<td>Subscript</td>
</tr>
<tr>
<td>&lt;sup&gt;</td>
<td>Superscript</td>
</tr>
<tr>
<td>&lt;small&gt;</td>
<td>Makes font relatively smaller, equivalent to &lt;span size="smaller"&gt;</td>
</tr>
<tr>
<td>&lt;tt&gt;</td>
<td>Monospace font</td>
</tr>
<tr>
<td>&lt;u&gt;</td>
<td>Underline</td>
</tr>
</table>
</p>
</div>
</blockquote>
<footer>
<div class="hint">
<img class="hint" src="../thumbnails/mongoose.png" alt="hint" align="left" float="right" />
<p>
This page edited by The <a href="README.html#bear">Bear</a>,
a web-page and programming editor
written in <a href="OpenEuphoria.org">Euphoria</a>.
</p>
<p>
Updated for EuGTK version 4.12.0, Sept 15, 2016<br />
All code &copy; 2016 by Irv Mullins
</p>
</div>
</footer>
</body>
</html>

141
eugtk/examples/documentation/platforms.html Normal file
View File

@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>EuGTK Platforms</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<img src="../thumbnails/gtk-logo-rgb.gif" alt="GTK LOGO" />
<img src="../thumbnails/mongoose.png" alt="mongoose" />
<a href="../screenshots/Windows.png">
<figure style="float:right; border:thin solid black;">
<img src="../screenshots/Windows.png" alt="Windows 7" width="400px" />
<figcaption><small><i>&nbsp;EuGTK running on Windows 7</i></small></figcaption>
</figure>
</a>
<h2>EuGTK&nbsp;4.12.0</h2>
<h2>Platforms</h2>
</header>
<nav>
<div class="hdr">Other Files:</div>
<a href="README.html"><button>README</button></a>
<a href="HowItWorks.html"><button>How EuGTK Works</button></a>
<a href="guide_a.html"><button>Alphabetical Guide</button></a>
<a href="dialogs.html"><button>Built-in EuGTK Dialogs</button></a>
<a href="treeviews.html"><button>ListView/TreeView widgets</button></a>
<a href="pango_markup.html"><button>Markup</button></a>
<a href="printing.html"><button>Printing</button></a>
<a href="ServerHelp.html"><button>Web Server</button></a>
<a href="functions.html"><button>Quick Function List</button></a>
<a href="Glade.html"><button>Glade GUI Builder</button></a>
<br />
</nav>
<hr />
<p>
<b>EuGTK is native for Linux</b><br />
Most modern Linux distros come with GTK3 already installed. If not, you can usually
install the GTK3 libraries easily with your package manager (apt-get or similar).
No special setup or configuration steps are involved.
</p>
<p>
<b>EuGTK is also reported to work with OS X&trade;</b>. First, install MacPorts, and
then the GTK3 library with this command:
<code>sudo port install gtk3</code>
That should eventually install the library to /opt/local/lib/libgtk-3.dylib.
I cannot test this, since I have no computer running OSX, but Pete Eberlein's
cross-platform Euphoria editor WEE runs on OS X using EuGTK for the user interface.
That's a pretty good test.
</p>
<p>
<b>EuGTK works with Windows&trade;,</b> more or less, starting with version 4.9.0!
I have only tested this on Windows 7, 64-bit, as I have no other version of Windows
available.
</p>
<p>You'll need the GTK3 dll's for Windows; download them from
the download page at <a href="https://github.com/tschoonj/GTK-for-
Windows-Runtime-Environmane-Installer">https://github.com/tschoonj/GTK-for-
Windows-Runtime-Environmane-Installer</a>. Be sure to chose the correct
set, either 32-bit or 64-bit, and make sure you are running the matching version of
Euphoria (32-bit or 64-bit). I use Euphoria 4.0.1 beta 2, which seems to work fine.
Mixing 32 and 64 bit software is sure to cause strange problems, such as reports that
dll's can't be found, even though they are right there in plain sight.
</p>
<p>
Once you've installed the GTK3 package, you'll need to download some
Windows-compatible <a href="">icons</a>. Unzip these and put them in
C:/ProgramData/icons.
</p>
<p><b>EuGTK programs may run on <i>any</i> platform.</b><br />
You can even run EuGTK programs on a remote client (anything that has an HTML5 web
browser, including tablets, phones, etc.), by using broadway on the server.
Clients do not need EuGTK, Euphoria, or GTK to be installed.
</p>
<p>
The Broadway server can be downloaded using apt-get, or your package manager,
and it also comes 'stock' with the latest Mint 18, and perhaps some other distros as well.
</p>
<p>
This is still experimental, but most of the demos in this package work ok
with a web browser, and some work when browsing with a tablet. Probably the
demo programs need to listen for 'motion' events (swipes, etc) to get these
working fully, or perhaps the browsers on my tablet aren't up-to-date with HTML5?
</p>
<p>
If you create a 'batch' Eu program, as shown below, you can start the broadway
server, and open a firefox page with your EuGTK program running
in the browser:<br />
<code><pre>
<em>-- name this go.ex
-- then start your program with:
-- eui go test1 (where test1 is the program to run)</em>
include GtkEngine.e
object cmd = command_line()
system(sprintf("firefox %s:8080 & broadwayd & ",{inet_address()}),0)
setenv("GDK_BACKEND","broadway")
system(sprintf("%s %s",{cmd[1],cmd[3]}),0)
system("killall broadwayd",0)
</pre></code>
</p>
<figure style="float:right; border:thin solid black;">
<img src="../screenshots/broadway.png" alt="Broadway" />
<figcaption>&nbsp;<small>Three EuGTK demos running in a Firefox&trade; window</small>
</figcaption>
</figure>
<br clear="all" />
<br />
<footer>
<div class="hint">
<img class="hint" src="../thumbnails/mongoose.png" alt="hint" align="left" float="right" />
<p>
This page edited by The <a href="README.html#bear">Bear</a>,
a web-page and programming editor
written in <a href="OpenEuphoria.org">Euphoria</a>.
</p>
<p>
Updated for EuGTK version 4.12.0, Sept 15, 2016<br />
All code &copy; 2016 by Irv Mullins
</p>
</div>
</footer>
</body>
</html>

327
eugtk/examples/documentation/printing.html Normal file
View File

@@ -0,0 +1,327 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>EuGTK Printing</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<heading>
<img src="../thumbnails/gtk-logo-rgb.gif" alt="gtk logo" />
<img src="../thumbnails/mongoose.png" alt="mongoose" />
<a href="../test150.ex" alt="test150" title="click me" >
<figure style="float:right; border:solid thin black;">
<img src="../screenshots/test150.jpg" alt="test150" title="test150" width="400px" align="right" />
</a>
<figcaption><small><i>&nbsp;GtkPrinter</i></small></figcaption>
</figure>
<h2><hr />EuGTK 4.12.0</h2>
<h3>GtkPrinter support functions</h3>
</heading>
<br clear="all" />
<nav>
<div class="hdr">Quick Links:</div>
<a href="#setup"><button>Setup</button></a>
<a href="#printing"><button>Printing</button></a>
<a href="#connecting"><button>Connecting</button></a>
<a href="#calling"><button>Calling print functions</button></a>
<a href="#headers"><button>Custom headers &amp; footers</button></a>
<a href="#progress"><button>ProgressBar</button></a>
<a href="#custom"><button>Custom Tabs</button></a>
</div>
<br /><br />
<div class="hdr">Other Files:</div>
<a href="README.html"><button>README</button></a>
<a href="HowItWorks.html"><button>How EuGTK Works</button></a>
<a href="guide_a.html"><button>Alphabetical Guide</button></a>
<a href="dialogs.html"><button>Built-in Dialogs</button></a>
<a href="pango_markup.html"><button>Markup</button></a>
<a href="treeviews.html"><button>ListView/TreeView</button></a>
<a href="ServerHelp.html"><button>Web Server</button></a>
<a href="functions.html"><button>Quick Function List</button></a>
<a href="Glade.html"><button>Glade GUI Builder</button></a>
<a href="platforms.html"><button >Platforms</button></a>
<br />
</nav>
<a name="intro" />
<h3><hr />Introduction<hr /></h3>
<p>
This include adds very easy-to-use printing capabilities to
EuGTK; most printing tasks require only one or two extra lines
of code.
</p>
<p>
It offers the ability to print documents on physical
printers as well as to print them as .pdf or .ps
(postscript), and perhaps .svg files, depending upon the
hardware and software installed on your pc.
</p>
<a name="setup" />
<h3><hr>Setup<hr></h3>
<p>
When printing, font size, lines-per-page, and page length
must be taken into account.
Obviously, the larger the font, the fewer lines will fit
on a given page.
</p>
<p>
By default (on Linux), GtkPrinter.e will print using an Ubuntu Mono 8pt. font and print
62 lines per 8.5x11 inch (na_letter) page or 84 lines on 8.5x14 (na_legal) paper.
Other paper sizes and orientations are available from the pop-up printer dialog,
and these should also be computed automatically, as long as the font isn't changed.
Try <a href="../test190.ex">test190</a>.
</p>
<p>
Other fonts may not work so well with the default lines_per_page settings. They often take up more (or less) space, both vertically
and horizontally, than the same size Ubuntu Mono font. For these, you must set lines_per_page manually.
</p>
<p>Example 1:
<pre>
<em class="gtk">printer:font</em> = <em class="str">"Ubuntu mono 10"</em>
<em class="gtk">printer:lines_per_page</em> = 65
</pre>
Example 2:
<pre>
<em class="gtk">printer:font</em> = <em class="str">"Purisa 12"</em>
<em class="gtk">printer:lines_per_page</em> = 34
</pre>
</p>
<p>
Some options,
like the paper size and orientation, can also be changed by selections in
the pop-up printer dialogs. When paper size or orientation is changed via
the pop-up dialog, the auto_lpp will adjust for those. If you're specifying
fonts manually, or auto_lpp is FALSE, you'll have to set these in advance.
</p>
<p>
Your program can override <i>many</i> other settings exported by GtkPrinter.e,
some of the most useful being:
<ul class="small">
<li>Customized page headers and/or footers
<dfn>(see <a href="#headers">headers</a>)</dfn>
</li>
<li>paper_name
<dfn>default is us_letter,
see <a href="../resources/papersizes.txt">resources/papersizes.txt</a></dfn>
</li>
<li>lines_per_page <dfn>default is 58</dfn></li>
<li>use_line_numbers <dfn>default is TRUE</dfn></li>
<li>use_color <dfn>default is TRUE;
currently, only prints Eu comments in red</dd>
</li>
<li>font <dfn>the usual font description: e.g. "Courier 12", or "Georgia bold 16"...</dfn>
</li>
<li>show_progress <dfn>default is TRUE, see <a href="#progress">progress bar</a></dfn>
</li>
<li>orientation <dfn>portrait, landscape </dfn></li>
<li>quality <dfn>draft, etc.</dfn></li>
<li>number_up <dfn>print 2-up or 4-up on a single sheet</dfn></li>
<li>number_up_layout <dfn>see GTK docs</dfn></li>
<li>Margins <dfn>top_margin, left_margin, etc.; default is .25 inch</dfn></li>
<li>units <dfn>default is GTK_UNIT_INCH</dfn></li>
<li>scale <dfn>default is 100%</dfn></li>
<li>n_pages <dfn>max number of pages to print, defaults to full document</dfn></li>
<li>order <dfn>0 = normal (first to last page), 1 = reverse (last to first)</dfn></li>
<li>name <dfn>printer name</dfn></li>
<li>plaintext <dfn>set to TRUE to print text containing &lt; or &gt; or &amp; chars</dfn></li>
<li>wrap_at <dfn>default is 0 (no wrap)</dfn></li>
<li>tabs <dfn>replace each tab with spaces or other chars, default is 2 spaces</dfn></li>
<li>jobname <dfn>shown in printer queue, defaults to filename and job #</dfn></li>
<li>track_status <dfn>default is TRUE</dfn></li>
<li>settings_file <dfn>filename to save print job settings to.
<dd><em>-- this is <u>not</u> the same as the GtkSettings ini file!</em></dd></dfn>
</li>
<li>setup_file <dfn>see the GTK docs</dfn></li>
<li>parent <dfn>pass the main window handle here [optional]</dfn></li>
<li>action <dfn>one of the following enums:</dfn>
<dfn>GTK_PRINT_OPERATION_ACTION_PRINT_DIALOG
<dd><em>-- show printer setup dialog, then print (this is the default)</em></dd></dfn>
<dfn>GTK_PRINT_OPERATION_ACTION_PRINT
<dd><em>-- print without showing any dialogs</em></dd></dd>
<dd>GTK_PRINT_OPERATION_ACTION_PREVIEW
<dd><em>-- preview only, without dialogs, don't print</em></dd></dd>
<dd>GTK_PRINT_OPERATION_ACTION_EXPORT
<dd><em>-- write a pdf to [export_file] without dialogs</em></dd></dd>
</li>
<li>export_file <dfn>name to use for .pdf file </dfn></li>
<li>confirm <dfn>pop up a dialog when job is complete, default is FALSE</dfn></li>
</ul>
Be sure to use the <i>printer:</i> namespace when modifying the above variables.
Certain other things, such as selecting a range of pages to print, or
putting a job on hold, can only be done by the user in the print setup
dialogs at this time.
</p>
<a name="printing" />
<h3><hr>Printing<hr></h3>
<p>
Adding print capability to your program is actually pretty easy. There are two main options:
<ol>
<li>Print from a disk file</li>
<li>Print from in-line or generated text</li>
</ol>
And, there are two ways to start the print process:
<ol>
<li>Connect the print_file or print_text function to a button, and attach the filename or text as the button's data item</li>
<li>Call the exported function PrintFile() or PrintText()</li>
</ol>
<a name="connecting" />
<h3><hr>Connecting to buttons<hr></h3>
<p>
Often, you can save a lot of typing by simply connecting a call to print_file or
print_text to a button, followed by the file name, file handle or text to print as the data item:
</p>
<p><pre><code> <em class="kw">constant</em> btn1 = <em class="gtk">create</em>(GtkButton,<em class="str">"gtk-print"</em>,print_file,<em class="str">"~/demos/GtkEngine.e"</em>)<em>-- default title will be GtkEngine.e</em>
<em class="kw">constant</em> btn2 = <em class="gtk">create</em>(GtkButton,<em class="str">"gtk-print"</em>,print_text,LGPL)
<em class="kw">constant</em> btn3 = <em class="gtk">create</em>(GtkButton,<em class="str">"gtk-print"</em>,print_file,fn) <em>-- using a Eu file handle to a previously opened file</em></code></pre>See <a href="../test189.ex">test189</a> and <a href="../test190.ex">test190</a> for various ways to call these functions.
</p>
<a name="calling" />
<h3><hr>Calling via function calls<hr></h3>
<p>
If you call the print routines via a normal function call, you have the option to add
a page title to appear in the header.<pre><code> <em class="gtk">PrintFile</em>(<em class="str">"~/demos/GtkEngine.e"</em>) <em>-- default title will be "GtkEngine.e"</em>
<em class="gtk">PrintFile</em>(<em class="str">"License Terms","~/demos/license.txt"</em>) <em>-- title will be "License Terms"</em></code></pre>
See <a href="../test189.ex">test189</a> and <a href="../test190.ex">test190</a> for various ways to call these functions.<pre><code> <em class="gtk">PrintText</em>(<em class="str">""</em>,LGPL) <em>-- no title</em>
<em class="gtk">PrintText</em>(<em class="str">"Lesser General Public License"</em>,LGPL) <em>-- prints "Lesser General Public License" as the title</em>
</code></pre>
See <a href="../test191.ex">test191</a> to see how to print direct to a .pdf file.
</p>
<a name="headers" />
<h3><hr>Headers and Footers<hr></h3>
<p>
You may wish to override the default page header and/or footer formats.<br />
Headers and footers are printed using text:format(), so you can choose what info shows
and in what order by using square brackets.<br />For example:
<pre><code> <em class="gtk">printer:header</em> = <em class="str">""</em> <em> -- no header</em>
<em class="gtk">printer:header</em> = <em class="str">"Title: &lt;b&gt;[1]&lt;/b&gt; User: [9]\n\n"</em> <em>-- prints page title (bold) and user name</em></code></pre>
The numbers in the format box or boxes in the header or footer will be replaced with: <br />
<ol class="small">
<li>page title <dfn>heading for all pages, unless there's a subtitle</dfn></li>
<li>page subtitle <dfn>heading to use on pages after pg 1</dfn></li>
<li>file name </li>
<li>short name <dfn>file name w/o path</dfn></li>
<li>current page number</li>
<li>n_pages printed</li>
<li>n_copies requested</li>
<li>today's date in date_format</li>
<li>user name</li>
<li>real name</li>
<li>font name used for this print job</li>
<li>file length (bytes) <dfn>for named files only</dfn></li>
<li>file timestamp <dfn>for named files only</dfn></li>
<li>export filename <dfn>for pdf files</dfn></li>
</ol>
You can use these in any order and combined with other text as you wish.
If you define custom headers or footers, be sure to end the header string, and begin the footer string, with one or two '\n' to separate them from the body text!<br />
You may use any of the normal <a href="pango_markup.html">markup</a> tokens in the header and footer, including font and color specifications.
</p>
<img src="../screenshots/header1.png" alt="header" />
</p>
<p>
If you use custom headers or footers, be <i>sure</i> to declare them <i>after</i> you call
<code> show_all(mainwindow)</code>. This way, they won't be accessed until after the GTK engine has been fully initialized. Of course, if you print from
a Eu function you have written, you can declare the header and/or footer formats at the start of the function. They won't be set until
the function is called.
</p>
<p>
The current date display format can be changed by overriding printer:date_format.The format is the same as used in std/datetime.e.</p>
</p>
<a name="progress" />
<h3><hr>Progress Bar<hr></h3>
<p>
There's a ready-to use progressbar exported by GtkPrinter.e. To use it,
just add it in the appropriate place on your window or dialog:
<br />
<tt><pre>
<em class="gtk">pack</em>(panel,printer:progress)
</pre></tt>
The progressbar will be updated automatically. Sometimes it's nice to hide the progressbar until printing begins.
</p>
<a name="custom" />
<h3><hr>Custom Tabs<hr></h3>
<p>
You can construct a custom tab and page which will be added to the print dialog.
To do so, you will need to override 3 variables in GtkPrinter.e.
<ol>
<li><i>custom_tab_label</i></li>
<li><i>custom_tab_func</i>
<dl><small>A call_back to your function which creates and returns the handle to a container (GtkBox) with one or more controls embedded.<br />This will be the contents of your added page.</small></dl></li>
<li><i>custom_tab_hook</i>
<dl><small>A call_back to a function which retrieves the settings from your embedded controls and applies them as appropriate.</small></dl></li>
</ol>
</p>
<footer>
<div class="hint">
<img class="hint" src="../thumbnails/mongoose.png" alt="hint" align="left" float="right" />
<p>
This page edited by The <a href="README.html#bear">Bear</a>,
a web-page and programming editor
written in <a href="OpenEuphoria.org">Euphoria</a>.
</p>
<p>
Updated for EuGTK version 4.12.0, Sept 15, 2016<br />
All code &copy; 2016 by Irv Mullins
</p>
</div>
</footer>
</body>
</html>

107
eugtk/examples/documentation/style.css Normal file
View File

@@ -0,0 +1,107 @@
body {margin-right: 10px; margin-left: 10px;}
h3 {color: blue;}
img {margin-right: 10px;}
p.small {font-size: small; font-style: italic;}
em {color: red;}
em.kw {color: blue;}
em.gtk {color: magenta; }
em.str {color: green;}
em.black {color: black;}
em.blue {color: blue;}
em.green {color: green;}
em.brown {color: brown; font-style: normal;}
em.orange {color: orange;}
button {margin-bottom: 5px; background-color: #A6F583;}
b.x {background-color: #A6F583;}
figure {background-color: #EFEFEB;}
table {margin: 10px;}
th {background-color: #FCFAC7;}
tr.note {background-color: yellow;}
tr.subtitle {font-size: smaller;}
td {
background-color: #F2F9FA;
padding-left: 10px;
padding-right: 10px;
font-size: smaller;
}
td.eucode {background-color: #F2F9FA;}
td.emphasis {background-color: #FBF00A;}
td.note {background-color: yellow;}
td.ba {background-color: cyan;}
td.bb {background-color: skyblue;}
td.bc {background-color: #A3FCA3;}
ol li {margin-bottom: 10px;}
ul li {margin-bottom: 5px;}
ul.small {font-size: small;}
ol.small {font-size: small;}
dfn {font-size: small; color: blue;}
dd {font-size: smaller;}
div.hdr {
display: block;
padding:3px;
border:none;
background: skyblue;
color:yellow;
font-style: italic;
}
div.hint {
display: block;
border: thin solid black;
padding: 8px;
font-size: small;
border-radius: 20px;
margin-left: 20px;
margin-right: 20px;
background-color: #D9F9E4;
}
div.quote {
display: block;
border: 1px dashed black;
padding: 5px;
background: #F0F0F0;
margin: 5px;
}
div.scrn {
display: block;
border: 2px solid green;
padding: 4px;
font-size: 12pt;
color: #00FF00;
background-color: black;
width: 100%;
}
div.urgent {
display: block;
border: 4px dashed red;
padding: 4px;
margin: 4px;
font-size: 12pt;
color: red;
}
img {margin-left: 5px; margin-bottom: 5px;}
img.x {margin:0px;}
figure {margin-left: 2px; margin-bottom: 2px;}
figcaption {background-color: #F2F2F2;}
footer {font-size: smaller;}

496
eugtk/examples/documentation/treeviews.html Normal file
View File

@@ -0,0 +1,496 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>TreeView/ListView</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<img src="../thumbnails/gtk-logo-rgb.gif"><alt="GTK LOGO"></img>
<img src="../thumbnails/mongoose.png"><alt="mongoose"></img>
<a href="../test33.ex">
<img src="../screenshots/test33.jpg" alt="test33.jpg" title="test33" align="right" />
</a>
<h2><hr />EuGTK 4.12.0</h2>
<h3>ListViews / TreeViews</h2>
<hr>
</header>
<br clear="all" />
<nav>
<div class="hdr">Quick Links:</div>
<a href="#overview"><button>Overview</button></a>
<a href="#model"><button>Models</button></a>
<a href="#columns"><button>Columns</button></a>
<a href="#renderers"><button>Cell Renderers</button></a>
<a href="#signals"><button>Signals</button></a>
<a href="#retrieving"><button>Retrieving Data</button></a>
<a href="#floats"><button>Formatting Data</button></a>
<a href="#functions"><button>New Functions!</button></a>
<a href="#syntax"><button>New Easy Syntax!</button></a>
<br />
</nav>
<nav>
<div class="hdr">Other Files:</div>
<a href="README.html"><button>README</button></a>
<a href="HowItWorks.html"><button>How EuGTK Works</button></a>
<a href="guide_a.html"><button>Alphabetical guide to GTK widgets</button></a>
<a href="dialogs.html"><button>Built-in EuGTK Dialogs</button></a>
<a href="pango_markup.html"><button>Markup</button></a>
<a href="printing.html"><button>Printing Engine</button></a>
<a href="ServerHelp.html"><button>Web Server</button></a>
<a href="functions.html"><button>Quick Function List</button></a>
<a href="Glade.html"><button>Glade GUI Builder</button></a>
<a href="platforms.html"><button>Platforms</button></a>
<br />
</nav>
<a name="#overview" /><h3><hr />ListView/TreeView Overview<hr /></h3>
<p>
Gtk TreeViews and Listviews are used to display one or more columns of data in
a scrollable, sortable, reorderable table format.
</p>
<p>GTK3 uses the Model/View/Controller scheme for organizing and
displaying data.
<ul>
<li><i>In theory,</i> this is more versatile, allowing you to display
the same data in various forms simultaneously.</li>
<li><i>In reality,</i> you rarely need to do this sort of thing, and when you do, you probably know an easier way.</li>
<li><i>In practice,</i> this MVC design makes even simple lists mind-bogglingly difficult to
understand and use.</li>
</ul>
</p>
<p>
Don't let this deter you, however, because EuGTK handles all the twiddling with iterators
and paths, etc. that make using the List/TreeViews so difficult. You can accomplish almost anything you need to do
by cutting and pasting from example code, thereby getting some programming done instead of
sitting there wondering <i>"what <u>were</u> they thinking?"</i>
</p>
<h3><hr />Getting Started<hr /></h3>
<p>
The first step will be to create a model in which to store your data.
The model can be thought of as a table with one or more rows of data,
arranged in one or more columns,
where each column contains one specific <i>type</i> of data.</p>
<p>
A model is not unlike a Euphoria sequence. Take, for example, the
following:
<code><pre><em class="kw">sequence</em> students { <em>-- name, age, amt due</em>
{<em class="str">"Sam Smith"</em>,<em class="brown"> 15, 19.95</em>},
{<em class="str">"Sue Jones"</em>, <em class="brown">14, 12.99</em>},
$<em> -- etc...</em>
}</pre>
</code>
In the above, col 1 contains strings, col 2 contains integers, col 3 contains floats.
Your model must mirror the number and types of
data in the sequence to be used.
</p>
<a name="model" /><h3><hr />Models<hr /></h3>
<p>
There are two kinds of model which come
pre-built with GTK, plus others you can supposedly devise, if you believe the GTK docs!
- Let's stick with the two easy ones:<br />
<ul>
<li>GtkListStore</li>
<li>GtkTreeStore</li>
</ul>
You'll have noted that, just to make things even more confusing, GTK decided to call the
list model a ListStore, and the tree model a TreeStore. So we might as well give our Euphoria
object variable the name <i>store</i>.
</p>
<p>
Creating your model a.k.a. store is easy, you just need to specify a data type
for each of the columns to match the type of data to be stored there.
</p>
<p>
For the example Euphoria sequence shown above, (students) we do this:
<code><pre>
<em class="kw">constant</em> store = <em class="gtk">create</em>(GtkListStore,{gSTR,gINT,gFLT}) <em>-- name, age, amt due</em>
</pre></code>
</p>
<p>
Note: by specifying a data type for each column, you are not only indicating what type of data
can be stored there, but also describing the way you want the data to look. IOW, you might
define the "name" column as gINT, but that would result in the name column displaying
the pointers to the students name strings, rather than the names in readable form.
Likewise, gINT, gFLT, and gDBL result in different ways to display the same numeric
contents.
<i>Note: EuGTK implements a 'convenience' here for numbers: see <a href="#floats">floats</a>.</i>
</p>
<p>
Next, you need to load the model with your data:
This can be done in one <i>swell foop</i> by simply typing:
<pre><code> <em class="gtk">set</em>(store,<em class="str">"data"</em>,students)</code></pre>
<a name="columns" /><h3><hr />Columns<hr /></h3>
<p>
TreeView columns are created as you might expect.<br /><small>
Note: there are no ListView columns, everything uses a TreeViewColumn.</small><br />
<pre><code> <em class="kw">constant</em> col1 = <em class="gtk">create</em>(GtkTreeViewColumn) <em>-- no params needed</em></code></pre>
Each column will display a "vertical slice" of your Eu sequence.</p>
<p>
You do <i>not</i> need to define a column for each column of data in your original Eu sequence.
Only create a column for each item you want to <i>see</i> in the listview.
In addition, the columns do <i>not</i> have to be in the same order as the original
Eu sequence. You can specify which column in the store is to provide the values to
be displayed in each column. See <a href="#connecting"> connecting</a> below.
</p>
<a name="renderers" /><h3><hr />Cell Renderers<hr /></h3>
<p>
In order to be able to display the data, each column must have a cell renderer associated with it.
Every cell in a given column displays the same <i>type</i> of data: string, integer, or float,
but using individual <i>values</i> which are gotten from the 'model' attached to the view.
<p>
Cell renderers are created by:
<pre><code> <em class="kw">constant</em> rend1 = <em class="gtk">create</em>(GtkCellRendererText) <em>-- no params needed</em></code></pre>
Where the renderer can be one of several types.<br />
<ul class="small">
<li>GtkCellRendererText</li>
<li>GtkCellRendererPixbuf</li>
<li>GtkCellRendererProgress</li>
<li>GtkCellRendererSpin</li>
<li>GtkCellRendererToggle</li>
<li>GtkCellRendererCombo</li>
</ul>
As you can see, the names indicate different ways to display the data from the model.
For example, the CellRendererText will display strings, integers, or floats in human-readable form,
i.e. alpha-numeric characters, while the CellRendererProgress will display percentages as a variable-length bar.</p>
The CellRendererToggle displays boolean values as a check-box, CellRendererSpin displays a potentially
changeable numeric value, and a CellRendererPixbuf displays an image when given the handle to a GdkPixbuf.
</p>
<div class="hint">
<img class="hint" src="../thumbnails/hint.png" alt="hint" width="100px" align="left" float="right" />
<p>
Some cell renderers, such as text, toggle, and spin, can be made 'editable', so that the
user can edit strings or modify values. Be aware however: edits are <i><b>NOT</b></i> automatically
saved to the underlying model. You have to write routines to do this when necessary.
Refer to <a href="../test33.ex"> test33</a> and <a href="../test35.ex"> test35</a> for examples of
how to make a renderer editable, and how to update the model to reflect the edited data.
</p>
</div>
<p>
You will always create a column and a renderer together, and pack the renderer into the
column. It is possible to pack more than one renderer into a single column.
<pre><code> <em class="kw">constant</em>&nbsp;col1 = <em class="gtk">create</em>(GtkTreeViewColumn)
<em class="gtk">set</em>(col1,<em class="str">"title","Name"</em>) <em>-- you may set some properties of the column</em>
<em class="kw">constant</em>&nbsp;rend1 = <em class="gtk">create</em>(GtkCellRendererText)
<em class="gtk">set</em>(rend1,<em class="str">"font","Courier 8"</em>) <em>-- you may set some properties of the renderer, these affect the entire column</em>
<em class="gtk">set</em>(col1,<em class="str">"pack start"</em>,rend1) <em>-- and finally, add the renderer to the column!</em>
</code></pre>
</p>
<a name="connecting" />
<h3><hr />Connecting data to column renderers<hr /></h3>
<p>
Next, you need to associate each column in the view with the column in the model where it
will find its data.
Of course, it can't be this easy. Instead, you have to tell the column to tell its
cell renderer where to find the data:<br />
<pre><code> <em class="gtk">set</em>(col1,<em class="str">"add attribute"</em>,rend1,<em class="str">"text"</em>,1)</code></pre>
Which means: col1 should get the text to be displayed by its cell renderer (rend1) from column #1 of the model.
In the example, this would be the name of the student.
</p>
<p>
Often you may have more data in your Eu sequence - and hence, in your model - than you wish to display,
and/or you may want to display the columns in a different order than they appear in the original sequence.
This "add attribute" call allows you to control that.
</p>
<p>
'Text' is only one attribute that the GtkCellRendererText has to offer; some of the others are
'markup', 'background', 'foreground', 'language', 'font', etc. By now, you won't be surprised to find that these
aren't called attributes by the GTK docs, instead you'll find them listed under Properties for
the various GtkCellRenderers.
</p>
<i><b>But wait, there's more!</b></i>
<p>
Just to keep things from getting boring, there are two ways to set an attribute a.k.a. property for a cell renderer.
The first, as shown below, is to tell the column to tell the renderer where to get its background for this particular
cell.
Let's assume col# 2 of the model contains color names, perhaps a different color for
each row in the list:<br />
<pre><code> <em class="gtk">set</em>(col1,<em class="str">"add attribute"</em>,rend1,<em class="str">"background"</em>,2)</code></pre>
</p>
<p>
On the other hand, suppose you tell the cell renderer <i>directly</i> to set a property.
This will affect <i>all</i> cells in the column which contains that renderer. This is done
as follows:
<pre><code> <em class="gtk">set</em>(rend1,<em class="str">"background","skyblue"</em>) <em>-- entire column will have a sky blue background</em>
<em class="gtk">set</em>(rend1,<em class="str">"size-points"</em>,36) <em>-- and all text in that column will be 36 points</em>
</code></pre>
</p>
<a name="#finish" /><h3><hr />Finally<hr /></h3>
<p>
Now you only have to create a GtkTreeView to hold the columns.<br /><small>
(Here again, there is no GtkListView, everything uses a GtkTreeView)</small><br />
<pre><code> <em class="kw">constant</em> tv = <em class="gtk">create</em>(GtkTreeView)
<em class="gtk">set</em>(tv,<em class="str">"rules hint"</em>,<em class="kw">TRUE</em>) <em>-- set some appearance options for the tree view:</em>
</code></pre>
Then tell it which model it should use to obtain its data; and append the column(s):
<pre><code> <em class="gtk">set</em>(tv,<em class="str">"model"</em>,store)
<em class="gtk">set</em>(tv,<em class="str">"append columns"</em>,{col1...})
</code></pre>
</p>
<p>
And, more often than not, you'll add the view to a scrolled window and viewport, which keeps long
lists from extending past the bottom of the screen.
</p>
<a name="signals" /><h3><hr />Signals<hr /></h3>
<p>
The normal signal to connect to is "row-activated", which will select
a row when it is double-clicked or a row is highlighted and the &lt;enter&gt; key is pressed.
<pre><code> <em class="gtk">connect</em>(tv,<em class="str">"row-activated"</em>,<em class="kw">call_back</em>(<em class="kw">routine_id</em>(<em class="str">"Foo"</em>)))
</code></pre>
If you are using GTK version 3.8 or above, you can choose to activate on a
single click by setting the following:
<pre><code> <em class="gtk">set</em>(tv,<em class="str">"activate on single click"</em>,<em class="kw">TRUE</em>)
</code></pre>
</p>
<a name="syntax" /><h3><hr />Easy Syntax! <small>~ new in EuGTK 4.11.2</small><hr /></h3>
<p>
Below is the code needed to produce a listview; it isn't such a big deal, as you can see.
Refer to the simple <a href="../test3.ex">test3.ex</a> demo,
and the overly-fancy <a href="../test33.ex">test33.ex</a> demo.
</p>
<p><code><pre><em class="kw">constant</em> store = <em class="gtk">create</em>(GtkListStore,{gSTR,gSTR,gSTR}) <em> -- describe type of data to be stored in each column;</em>
<em class="gtk">set</em>(store,<em class="str">"data"</em>,{ <em> -- here's the data;</em>
{<em class="str">"Apple", "doz"</em>,5.00},
{<em class="str">"Cherry","lb"</em>, 3.69}, <em>-- note: 3rd column is numeric,</em>
{<em class="str">"Lime", "ea"</em>, .99}, <em>-- but will automatically be converted</em>
{<em class="str">"Orange","ea"</em>, 0.79}, <em>-- to a string by the store</em>
{<em class="str">"Banana","lb"</em>, 1.89}
})
<em class="kw">constant</em> scroller = <em class="gtk">create</em>(GtkScrolledWindow)
<em class="gtk">pack</em>(panel,scroller,<em class="kw">TRUE,TRUE</em>)
<em class="kw">constant</em> tv = <em class="gtk">create</em>(GtkTreeView,{
{<em class="str">"model"</em>,store},
{<em class="str">"connect","row-activated"</em>,_(<em class="str">"ShowChoice"</em>)}}) <em>-- see function below</em>
<em class="gtk">add</em>(scroller,tv)
<em class="kw">constant</em>
col1 = <em class="gtk">create</em>(GtkColumn,<em class="str">"title=Name,type=text,text=1,sort_column_id=1"</em>),
col2 = <em class="gtk">create</em>(GtkColumn,<em class="str">"title=Quantity,type=text,text=2"</em>),
col3 = <em class="gtk">create</em>(GtkColumn,<em class="str">"title=Price,type=text,text=3,sort_column_id=3"</em>)
<em class="gtk">set</em>(tv,<em class="str">"append columns"</em>,{col1,col2,col3})
<em class="kw">constant</em> selection = get(tv,<em class="str">"selection"</em>)
<em>---------------------</em>
<em class="kw">function</em> ShowChoice() <em>-- our function to handle selections</em>
<em>---------------------</em>
<em class="kw">object</em> choice = <em class="gtk">get</em>(selection,<em class="str">"selected row data"</em>)
<em class="gtk">Info</em>(,,choice[1],<em class="kw">format</em>(<em class="str">"Price: $[3] per [2]"</em>,choice))
<em class="kw">return</em> 1
<em class="kw">end function</em>
</pre></code>
</p>
<a name="functions" /><h3><hr />Functions <small>~ new in EuGTK 4.8.7</small><hr /></h3>
<p>
Please don't bother trying to figure out the GTK docs when it comes to using a list or tree view.<br /> You'll find yourself
...<i> lost in an endless maze of twisty
passages... </i>
</p>
<p>
The stock GtkListView/GtkTreeView scheme is rediculously complex, and nearly impossible to understand.
With this version of EuGTK, I have implemented easier ways to deal with these things.
</p>
<p>
After you create a ListView model, you can load it with an ordinary Euphoria sequence<em>*</em>
and manipulate it using familiar calls. Note that there is no direct connection between the Eu
data sequence and the list view store, so changing the Eu sequence does not change the list view,
or vice-versa. To keep the two in sync, you must update as appropriate. See the <a href="#hint2">hint</a> below.
</p>
<p><code><pre>
<em class="kw">constant</em> store = <em class="gtk">create</em>(GtkListStore,{gSTR,gSTR,gFLT})
<em class="kw">sequence</em> customers = {<em>-- first, last, balance due</em>
{<em class="str">"Sue","Jones"</em>,40.95},
{<em class="str">"Ralph","Wiggums"</em>,29.44}}
<em class="kw">sequence</em> new_cust = {<em class="str">"Ferd","Merkle"</em>,12.50}</pre>
<ul>
<li>Working with entire contents as Eu Sequence</li>
<dd><em class="gtk">set</em>(<i>store</i>,<em class="str">"data"</em>,<i>customers</i>) <em>-- store Eu sequence to listview</em></dd>
<dd><em class="gtk">get</em>(<i>store</i>,<em class="str">"data"</em>) <em>-- retrieve listview data as Eu sequence</em></dd>
<dd><em class="gtk">set</em>(<i>store</i>,<em class="str">"clear"</em>) <em>-- clear listview, does not affect original Eu sequence</em></dd>
<br />
<li>Working with individual rows</li>
<dd><em class="gtk">get</em>(<i>selection</i>,<em class="str">"selected row"</em>) <em>-- returns integer row number</em></dd>
<dd><em class="gtk">get</em>(<i>selection</i>,<em class="str">"selected rows"</em>) -- <em> returns sequence of row numbers: {2,6,23}</em></dd>
<a name="hint2"></a>
<dd><em class="gtk">set</em>(<i>store</i>,<em class="str">"append row"</em>,<i>new_cust</i>) <em>-- add to bottom of list, invalid if view is sorted</em></dd>
<dd><em class="gtk">set</em>(<i>store</i>,<em class="str">"prepend row"</em>,<i>new_cust</i> <em>-- add to top of list, invalid if view is sorted</em></dd>
<dd><em class="gtk">set</em>(<i>store</i>,<em class="str">"insert row"</em>,<i>new_cust</i>,pos#) <em>-- add at pos, invalid if view is sorted</em></li>
<dd><em class="gtk">set</em>(<i>store</i>,<em class="str">"remove row"</em>,row#)</dd>
<dd><em class="gtk">set</em>(<i>store</i>,<em class="str">"replace row"</em>,row#,new_cust) <em>-- replace row or list of selected rows with new data</em></dd>
</ul>
<div class="hint">
<img class="hint" src="../thumbnails/hint.png" alt="hint" width="100px" align="left" float="right" />
<p>The above <em class="gtk">set</em>() calls actually <u>return</u>
the modified data, which you can ignore,
or use to sync the modified data to disk, if you wish, whenever data is changed.</p>
</div>
<ul>
<li>Working with a single row/column</li>
<dd><em class="gtk">set</em>(<i>store</i>,<em class="str">"col data"</em>,row#,col#,data)</dd>
<dd><em class="gtk">get</em>(<i>store</i>,<em class="str">"col data"</em>,row#,col#)</dd>
<br />
<li>Other functions</li>
<dd><em class="gtk">set</em>(<i>store</i>,<em class="str">"swap"</em>,row_a,row_b) <em>-- trade places. row_a and row_b are integer row numbers</em></dd>
<dd><em class="gtk">set</em>(<i>store</i>,<em class="str">"move before"</em>,row_a,row_b) <em> -- only valid if view is unsorted</em></dd>
<dd><em class="gtk">set</em>(<i>store</i>,<em class="str">"move after"</em>,row_a,row_b) <em>-- only valid if view is unsorted</em></dd>
<dd><em class="blue">NOTE: the above return the modified sequence, could be used to save updates to disk, etc.</em></dd>
<br />
<li>Information functions</li>
<dd><em class="gtk">get</em>(<i>store</i>,<em class="str">"n rows"</em>) <em>-- returns current number of rows in model</em></dd>
<dd><em class="gtk">get</em>(<i>store</i>,<em class="str">"n cols"</em>) <em>-- returns number of columns in model</em></dd>
<dd><em class="gtk">get</em>(<i>store</i>,<em class="str">"is sorted"</em>)</dd>
<dd><em class="gtk">get</em>(<i>store</i>,<em class="str">"sort column id"</em>) <em>-- 1..n</em></dd>
<dd><em class="gtk">get</em>(<i>store</i>,<em class="str">"sort order"</em>) <em>-- 0 = ascending, 1 = descending</em></dd>
<dd><em class="blue">NOTE: sort order is only valid if "is sorted" = TRUE</em></dd>
</ul>
</code>
</p>
<p><em>* </em>
Eu sequences must be conformant - IOW, each column must contain one consistent type of data:
if the first column contains strings, then all entries in column one must be strings, if a column contains numbers, for example,
age or balance due, then all entries in that column should be numbers.
</p>
<p>
Each view column can have an optional sort column id - this tells the view column which column in the model (store) contains the value to use in the sort.
In practical terms, this means that you could tell column #1 (names) that it should be sorted based on the value in #3 (amt_due).
You may also want to make the TreeView's headers clickable, so the user can sort each column when desired.
You can also, thru code, tell the model to sort itself by column and direction:
<pre><code> <em class="gtk">set</em>(store,<em class="str">"sort column id"</em>,3,GTK_SORT_ASCENDING)
<em>-- instead of an integer column #, you can use:</em>
<em>-- GTK_TREE_SORTABLE_UNSORTED_SORT_COLUMN_ID (-2) = no sorting</em>
<em>-- sort directions are, as you would expect: GTK_SORT_ASCENDING | GTK_SORT_DESCENDING </em>
</code></pre>
</p>
<p>
You can also write your own custom sorting function, and tell the TreeView to use that function.
See the GTK docs on GtkTreeSortable for a prototype (GtkTreeIterCompareFunc) you can use when writing your
Euphoria function.
</p>
<a name="retrieving" /><h3><hr />Retrieving data<hr /></h3>
To get the full data set back as a Euphoria sequence, just use:
<pre><code> <em class="gtk">get</em>(store,<em class="str">"data"</em>)</code></pre>
</p>
<p>
To get the <i>selected</i> data back from a ListView/TreeView, you must first obtain a GtkSelection object
from the view. Normally, this can be done at the time the view is created:
<pre><code> <em class="kw">constant</em> selection = <em class="gtk">get</em>(tv,<em class="str">"selection"</em>) <em>-- this tracks the changing selection(s)</em>
<em class="gtk">set</em>(selection,<em class="str">"mode"</em>,GTK_SELECTION_SINGLE)</code></pre>
</p>
<p>
Then, you can get the data contained in the selected row if selection mode is
GTK_SELECTION_SINGLE or GTK_SELECTION_BROWSE;
or rows, if selection mode is GTK_SELECTION_MULTIPLE.
</p>
<pre><code> <em class="kw">object</em> rowlist = <em class="gtk">get</em>(selection,<em class="str">"selected rows"</em>) <em>-- this returns a Eu sequence of one or more integers, e.g. {3} or {1,3,5,6}</em>
<em class="kw">object</em> data
<em class="kw">for</em> i = 1 <em class="kw">to length</em>(rowlist) <em class="kw">do</em>
data = <em class="gtk">get</em>(store,<em class="str">"row data"</em>,rowlist[i]) <em>-- use each row # to get the row's data</em>
<em>-- here, you do something with that data...</em></code></pre>
</p>
<p>
Sometimes, it's convenient get the contents of a single cell in a row by calling:
<pre><code> data = <em class="gtk">get</em>(store,<em class="str">"col data"</em>,row,2) <em>-- where 2 is the column# </em></code></pre>
</p>
<p>
The above instructions apply primarily to CellRendererText renderers.
Lists using other types of CellRenderers require different methods to retrieve the contents/results of a selection.
Please refer to the <a href="guide_a.html#c">alphabetical guide</a>, the GTK docs on CellRenderer properties, and the respective demos.
</p>
<a name="floats" /><h3><hr />Floats<hr /></h3>
<a href="../test194.ex">
<img src="../screenshots/test194.jpg" alt="test194" align="left" float="left" />
</a>
<p><br />
The default display format for floating point numbers (gFLT) used in ListViews will probably not
be what you want - there will be too many digits following the decimal point.
In order to fix this, you can connect your own cell data function formatting routine.
See <a href="../test66.ex"> test66</a> for an example of how to do this.<br /><br />
</p>
<br clear="all" />
<p>
As a convenience, another way to handle common values with 2 decimal points
is to declare the column as gSTR, but to pass atoms or integers.
No cell data formatting function is needed for this special case.</p>
<img src="../screenshots/test3.jpg" alt="test3" />
<hr />
<footer>
<div class="hint">
<img class="hint" src="../thumbnails/mongoose.png" alt="hint" align="left" float="right" />
<p>
This page edited by The <a href="README.html#bear">Bear</a>,
a web-page and programming editor
written in <a href="OpenEuphoria.org">Euphoria</a>.
</p>
<p>
Updated for EuGTK version 4.12.0, Sept 15, 2016<br />
All code &copy; 2016 by Irv Mullins
</p>
</div>
</footer>
</body>
</html>