209 lines
6.8 KiB
HTML
209 lines
6.8 KiB
HTML
|
<!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 © 2016 by Irv Mullins
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|