<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:fn="http://www.w3.org/2005/02/xpath-functions">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../../doc/otp_doc.css" type="text/css">
<title>Erlang -- Built-In Objects</title>
</head>
<body bgcolor="white" text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000"><div id="container">
<script id="js" type="text/javascript" language="JavaScript" src="../../../../doc/js/flipmenu/flipmenu.js"></script><script id="js2" type="text/javascript" src="../../../../doc/js/erlresolvelinks.js"></script><script language="JavaScript" type="text/javascript">
<!--
function getWinHeight() {
var myHeight = 0;
if( typeof( window.innerHeight ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
return myHeight;
}
function setscrollpos() {
var objf=document.getElementById('loadscrollpos');
document.getElementById("leftnav").scrollTop = objf.offsetTop - getWinHeight()/2;
}
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
addEvent(window, 'load', setscrollpos);
//--></script><div id="leftnav"><div class="innertube">
<img alt="Erlang logo" src="../../../../doc/erlang-logo.png"><br><small><a href="users_guide.html">User's Guide</a><br><a href="index.html">Reference Manual</a><br><a href="release_notes.html">Release Notes</a><br><a href="../pdf/gs-1.5.15.1.pdf">PDF</a><br><a href="../../../../doc/index.html">Top</a></small><p><strong>Graphics System (GS)</strong><br><strong>User's Guide</strong><br><small>Version 1.5.15.1</small></p>
<br><a href="javascript:openAllFlips()">Expand All</a><br><a href="javascript:closeAllFlips()">Contract All</a><p><small><strong>Chapters</strong></small></p>
<ul class="flipMenu" imagepath="../../../../doc/js/flipmenu">
<li id="no" title="GS - The Graphics System" expanded="false">GS - The Graphics System<ul>
<li><a href="gs_chapter1.html">
Top of chapter
</a></li>
<li title="Introduction"><a href="gs_chapter1.html#id62365">Introduction</a></li>
<li title="Basic Architecture of GS"><a href="gs_chapter1.html#id61203">Basic Architecture of GS</a></li>
</ul>
</li>
<li id="no" title="Interface Functions" expanded="false">Interface Functions<ul>
<li><a href="gs_chapter2.html">
Top of chapter
</a></li>
<li title="Overview"><a href="gs_chapter2.html#id61459">Overview</a></li>
<li title="A First Example"><a href="gs_chapter2.html#id57477">A First Example</a></li>
<li title="Creating Objects"><a href="gs_chapter2.html#id63683">Creating Objects</a></li>
<li title="Ownership"><a href="gs_chapter2.html#id59961">Ownership</a></li>
<li title="Naming Objects"><a href="gs_chapter2.html#id59975">Naming Objects</a></li>
</ul>
</li>
<li id="no" title="Options" expanded="false">Options<ul>
<li><a href="gs_chapter3.html">
Top of chapter
</a></li>
<li title="The Option Concept"><a href="gs_chapter3.html#id58188">The Option Concept</a></li>
<li title="The Option Tables"><a href="gs_chapter3.html#id64276">The Option Tables</a></li>
<li title="Config-Only Options"><a href="gs_chapter3.html#id64432">Config-Only Options</a></li>
<li title="Read-Only Options"><a href="gs_chapter3.html#id64553">Read-Only Options</a></li>
<li title="Data Types"><a href="gs_chapter3.html#id64674">Data Types</a></li>
</ul>
</li>
<li id="no" title="Events" expanded="false">Events<ul>
<li><a href="gs_chapter4.html">
Top of chapter
</a></li>
<li title="Event Messages"><a href="gs_chapter4.html#id65002">Event Messages</a></li>
<li title="Generic Events"><a href="gs_chapter4.html#id65107">Generic Events</a></li>
<li title="Object Specific Events"><a href="gs_chapter4.html#id65547">Object Specific Events</a></li>
<li title="Matching Events Against Object Identifiers"><a href="gs_chapter4.html#id65664">Matching Events Against Object Identifiers</a></li>
<li title="Matching Events Against Object Names"><a href="gs_chapter4.html#id65689">Matching Events Against Object Names</a></li>
<li title="Matching Events Against the Data Field"><a href="gs_chapter4.html#id65716">Matching Events Against the Data Field</a></li>
<li title="Experimenting with Events"><a href="gs_chapter4.html#id65756">Experimenting with Events</a></li>
</ul>
</li>
<li id="no" title="Fonts" expanded="false">Fonts<ul>
<li><a href="gs_chapter5.html">
Top of chapter
</a></li>
<li title="The Font Model"><a href="gs_chapter5.html#id65831">The Font Model</a></li>
</ul>
</li>
<li id="no" title="Default Values" expanded="false">Default Values<ul>
<li><a href="gs_chapter6.html">
Top of chapter
</a></li>
<li title="The Default Value Model"><a href="gs_chapter6.html#id66044">The Default Value Model</a></li>
</ul>
</li>
<li id="no" title="The Packer" expanded="false">The Packer<ul>
<li><a href="gs_chapter7.html">
Top of chapter
</a></li>
<li title="The Packer"><a href="gs_chapter7.html#id66217">The Packer</a></li>
</ul>
</li>
<li id="loadscrollpos" title="Built-In Objects" expanded="true">Built-In Objects<ul>
<li><a href="gs_chapter8.html">
Top of chapter
</a></li>
<li title="Overview"><a href="gs_chapter8.html#id66484">Overview</a></li>
<li title="Generic Options"><a href="gs_chapter8.html#id66791">Generic Options</a></li>
<li title="Window"><a href="gs_chapter8.html#id67843">Window</a></li>
<li title="Button"><a href="gs_chapter8.html#id68226">Button</a></li>
<li title="Label"><a href="gs_chapter8.html#id68734">Label</a></li>
<li title="Frame"><a href="gs_chapter8.html#id68905">Frame</a></li>
<li title="Entry"><a href="gs_chapter8.html#id69050">Entry</a></li>
<li title="Listbox"><a href="gs_chapter8.html#id69366">Listbox</a></li>
<li title="Canvas"><a href="gs_chapter8.html#id70050">Canvas</a></li>
<li title="Menu"><a href="gs_chapter8.html#id72195">Menu</a></li>
<li title="Grid"><a href="gs_chapter8.html#id80608">Grid</a></li>
<li title="Editor"><a href="gs_chapter8.html#id81434">Editor</a></li>
<li title="Scale"><a href="gs_chapter8.html#id82183">Scale</a></li>
</ul>
</li>
</ul>
</div></div>
<div id="content">
<div class="innertube">
<h1>8 Built-In Objects</h1>
<h3><a name="id66484">8.1
Overview</a></h3>
<p>This section describes the built-in objects of the graphics interface. The following objects exist:</p>
<dl>
<dt><strong><strong>Window</strong></strong></dt>
<dd>An ordinary window.</dd>
<dt><strong><strong>Button</strong></strong></dt>
<dd>A simple press button.</dd>
<dt><strong><strong>Checkbutton</strong></strong></dt>
<dd>A button with a check-mark indicator.</dd>
<dt><strong><strong>Radiobutton</strong></strong></dt>
<dd>A button with an indicator that has an only-one-selected-at-a-time property.</dd>
<dt><strong><strong>Label</strong></strong></dt>
<dd>Shows a text or bitmap.</dd>
<dt><strong><strong>Frame</strong></strong></dt>
<dd>A plain container object. It is used for logical and visual grouping of objects.</dd>
<dt><strong><strong>Entry</strong></strong></dt>
<dd>A one-line object for entering text.</dd>
<dt><strong><strong>Listbox</strong></strong></dt>
<dd>A list of text strings.</dd>
<dt><strong><strong>Canvas</strong></strong></dt>
<dd>A drawing area which contains light-weight objects such as rectangle, line, etc.</dd>
<dt><strong><strong>Menu</strong></strong></dt>
<dd>A collection of objects for constructing pull-down and pop-up menus.</dd>
<dt><strong><strong>Grid</strong></strong></dt>
<dd>An object for showing tables. A kind of multi-column listbox.</dd>
<dt><strong><strong>Editor</strong></strong></dt>
<dd>A multi-line text editor.</dd>
<dt><strong><strong>Scale</strong></strong></dt>
<dd>To select a value within a range.</dd>
</dl>
<p>Some objects can act as container objects. The following table describes these relationships:</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Objects</strong></td>
<td align="left" valign="middle"><strong>Valid Parents</strong></td>
</tr>
<tr>
<td align="left" valign="middle">window</td>
<td align="left" valign="middle">window, gs</td>
</tr>
<tr>
<td align="left" valign="middle">buttons, canvas, editor, entry, frame, grid, label, listbox, menubar, scale</td>
<td align="left" valign="middle">frame, window</td>
</tr>
<tr>
<td align="left" valign="middle">arc, image, line, oval, polygon, rectangle, text</td>
<td align="left" valign="middle">canvas</td>
</tr>
<tr>
<td align="left" valign="middle">menubutton</td>
<td align="left" valign="middle">menubar, window, frame</td>
</tr>
<tr>
<td align="left" valign="middle">gridline</td>
<td align="left" valign="middle">grid</td>
</tr>
<tr>
<td align="left" valign="middle">menuitem</td>
<td align="left" valign="middle">menu</td>
</tr>
<tr>
<td align="left" valign="middle">menu</td>
<td align="left" valign="middle">menubutton, menuitem (with {itemtype, cascade}), window, frame (the last two are for pop-up menus)</td>
</tr>
</table>
<em>Table
8.1:
Relations Between Objects and Container Objects</em>
<h3><a name="id66791">8.2
Generic Options</a></h3>
<p>Most objects have a common subset of options and will be referred to as generic options. They apply to most objects.</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">beep</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">A beep will sound. Applies to all objects.</td>
</tr>
<tr>
<td align="left" valign="middle">{bg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Background color. Applies to objects which have a background color.</td>
</tr>
<tr>
<td align="left" valign="middle">{data, Term}</td>
<td align="left" valign="middle">[]</td>
<td align="left" valign="middle">Always delivered with the event in the data field. Applies to all objects.</td>
</tr>
<tr>
<td align="left" valign="middle">{default,Objecttype,{Key,Value}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Applies to all container objects. Specifies the default value for an option for children of type Objecttype.</td>
</tr>
<tr>
<td align="left" valign="middle">{enable, Bool}</td>
<td align="left" valign="middle">true</td>
<td align="left" valign="middle">Objects can be enabled or disabled. A disabled object cannot be clicked on, and text cannot be entered. Applies to buttons, menuitem, entry, editor, scale.</td>
</tr>
<tr>
<td align="left" valign="middle">{font, Font}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Applies to all text related objects and the grid.</td>
</tr>
<tr>
<td align="left" valign="middle">{fg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Foreground color. Applies to objects which have a foreground color.</td>
</tr>
<tr>
<td align="left" valign="middle">flush</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Ensures that front-end and back-end are synchronized. Applies to all objects.</td>
</tr>
<tr>
<td align="left" valign="middle">{setfocus, Bool}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Set or remove keyboard focus to this object. Applies to objects which can receive keyboard events.</td>
</tr>
</table>
<em>Table
8.2:
Generic Options</em>
<p>The following options apply to objects which can have a <strong>frame</strong> as parent. Coordinates are relative to the parent.</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{cursor, Cursor}</td>
<td align="left" valign="middle">parent</td>
<td align="left" valign="middle">The appearance of the mouse cursor.</td>
</tr>
<tr>
<td align="left" valign="middle">{height, Int}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The height in pixels.</td>
</tr>
<tr>
<td align="left" valign="middle">{pack_x, Column|{StartColumn,EndColumn}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Packing position. See The Packer section.</td>
</tr>
<tr>
<td align="left" valign="middle">{pack_y, row|{Startrow,Endrow}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Packing position. See The Packer section.</td>
</tr>
<tr>
<td align="left" valign="middle">{pack_xy, {Column,row}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Packing position. See The Packer section.</td>
</tr>
<tr>
<td align="left" valign="middle">{width, Int}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The width in pixels.</td>
</tr>
<tr>
<td align="left" valign="middle">{x, Int}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The x coordinate within the parent objects frame in pixels. 0 is to the left.</td>
</tr>
<tr>
<td align="left" valign="middle">{y, Int}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The y coordinate in pixels. 0 is at the top.</td>
</tr>
</table>
<em>Table
8.3:
Generic Options (Frame as Parent)</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Config-Only</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">lower</td>
<td align="left" valign="middle">Lowers this object to the bottom in the visual hierarchy.</td>
</tr>
<tr>
<td align="left" valign="middle">raise</td>
<td align="left" valign="middle">Lowers this object in the visual hierarchy.</td>
</tr>
</table>
<em>Table
8.4:
Generic Config-Only Options</em>
<p>The following table lists generic Read-Only options:</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Read-Only</strong></td>
<td align="left" valign="middle"><strong>Return</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">children</td>
<td align="left" valign="middle">[ObjectId1, ..., ObjectIdN]</td>
<td align="left" valign="middle">All children</td>
</tr>
<tr>
<td align="left" valign="middle">{choose_font,Font}</td>
<td align="left" valign="middle">Font</td>
<td align="left" valign="middle">Return the font that is actually used if a particular font is given.</td>
</tr>
<tr>
<td align="left" valign="middle">id</td>
<td align="left" valign="middle">ObjectId</td>
<td align="left" valign="middle">Return the object id for this object. Useful if the object is a named object.</td>
</tr>
<tr>
<td align="left" valign="middle">{font_wh,{Font,Text}}</td>
<td align="left" valign="middle">{Width,Height}</td>
<td align="left" valign="middle">Return the size of a text in a specified font. It returns the size of the font that is actually chosen by the back-end.</td>
</tr>
<tr>
<td align="left" valign="middle">type</td>
<td align="left" valign="middle">Atom</td>
<td align="left" valign="middle">The type of this object.</td>
</tr>
<tr>
<td align="left" valign="middle">parent</td>
<td align="left" valign="middle">ObjectId</td>
<td align="left" valign="middle">The parent of this object.</td>
</tr>
</table>
<em>Table
8.5:
Generic Read-Only Options</em>
<h4>Generic Event Options</h4>
<p>The table below lists all generic event options:
</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{buttonpress, Bool}</td>
<td align="left" valign="middle">false</td>
</tr>
<tr>
<td align="left" valign="middle">{buttonrelease, Bool}</td>
<td align="left" valign="middle">false</td>
</tr>
<tr>
<td align="left" valign="middle">{enter, Bool}</td>
<td align="left" valign="middle">false</td>
</tr>
<tr>
<td align="left" valign="middle">{leave, Bool}</td>
<td align="left" valign="middle">false</td>
</tr>
<tr>
<td align="left" valign="middle">{keypress, Bool}</td>
<td align="left" valign="middle">false</td>
</tr>
<tr>
<td align="left" valign="middle">{motion, Bool}</td>
<td align="left" valign="middle">false</td>
</tr>
</table>
<em>Table
8.6:
Generic Event Options</em>
<h3><a name="id67843">8.3
Window</a></h3>
<p>The basic object is the window object. It is the most common container object. All graphical applications use at least one (top-level) window.</p>
<a name="gs_fig8"></a>
<img alt="IMAGE MISSING" src="images/window.gif"><br>
<em>Figure
8.1:
Empty Window titled "A Window".</em>
<p>The following tables show all window specific options:</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{bg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">{R,G,B} or a color name</td>
</tr>
<tr>
<td align="left" valign="middle">{configure,Bool}</td>
<td align="left" valign="middle">false</td>
<td align="left" valign="middle">Will generate a <span class="code">configure</span>event when the window has been resized or moved. The <span class="code">Args</span>field contains [Width,Height,X,Y|_]</td>
</tr>
<tr>
<td align="left" valign="middle">{destroy,Bool}</td>
<td align="left" valign="middle">true</td>
<td align="left" valign="middle">Will generate a <span class="code">destroy</span>event when the window is destroyed from the window manager. All GS applications should handle this event.</td>
</tr>
<tr>
<td align="left" valign="middle">{iconname, String}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">{iconify, Bool}</td>
<td align="left" valign="middle">false</td>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">{map, Bool}</td>
<td align="left" valign="middle">false</td>
<td align="left" valign="middle">Make it visible on the screen</td>
</tr>
<tr>
<td align="left" valign="middle">{title, String}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The title of the window. The default is the internal widget name which is platform specific.</td>
</tr>
</table>
<em>Table
8.7:
Window Options</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Config-Only</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">raise</td>
<td align="left" valign="middle">Raise window on top of all other windows.</td>
</tr>
<tr>
<td align="left" valign="middle">lower</td>
<td align="left" valign="middle">Lower window to background.</td>
</tr>
</table>
<em>Table
8.8:
Window Config-Only Options</em>
<p>The following example shows how to create a window and configure it to enable various events.</p>
<div class="example"><pre>
-module(ex7).
-copyright('Copyright (c) 1991-97 Ericsson Telecom AB').
-vsn('$Revision: /main/release/2 $ ').
-export([mk_window/0]).
mk_window() ->
S= gs:start(),
Win= gs:create(window,S,[{motion,true},{map,true}]),
gs:config(Win,[{configure,true},{keypress,true}]),
gs:config(Win,[{buttonpress,true}]),
gs:config(Win,[{buttonrelease,true}]),
event_loop(Win).
event_loop(Win) ->
receive
{gs,Win,motion,Data,[X,Y | Rest]} ->
%% mouse moved to position X Y
io:format("mouse moved to X:~w Y:~w~n",[X,Y]);
{gs,Win,configure,Data,[W,H | Rest]} ->
%% window was resized by user
io:format("window resized W:~w H:~w~n",[W,H]);
{gs,Win,buttonpress,Data,[1,X,Y | Rest]} ->
%% button 1 was pressed at location X Y
io:format("button 1 pressed X:~w Y:~w~n",[X,Y]);
{gs,Win,buttonrelease,Data,[_,X,Y | Rest]} ->
%% Any button (1-3) was released over X Y
io:format("Any button released X:~w Y:~w~n",[X,Y]);
{gs,Win,keypress,Data,[a | Rest]} ->
%% key `a' was pressed in window
io:format("key a was pressed in window~n");
{gs,Win,keypress,Data,[_,65,1 | Rest]} ->
%% Key shift-a
io:format("shift-a was pressed in window~n");
{gs,Win,keypress,Data,[c,_,_,1 | Rest]} ->
%% CTRL_C pressed
io:format("CTRL_C was pressed in window~n");
{gs,Win,keypress,Data, ['Return' | Rest]} ->
%% Return key pressed
io:format("Return key was pressed in window~n")
end,
event_loop(Win).
</pre></div>
<h3><a name="id68226">8.4
Button</a></h3>
<a name="gs_fig9"></a>
<img alt="IMAGE MISSING" src="images/buttons.gif"><br>
<em>Figure
8.2:
Radio Buttons, Check Buttons, and Ordinary Button</em>
<p>Buttons are the simplest and the most commonly used objects. You press them and get a click event. The following tables show the options for all button types.</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{align, Align}</td>
<td align="left" valign="middle">center</td>
<td align="left" valign="middle">Text alignment within the frame.</td>
</tr>
<tr>
<td align="left" valign="middle">{justify, left | center | right}</td>
<td align="left" valign="middle">center</td>
<td align="left" valign="middle">Justification is only valid when there are several lines of text.</td>
</tr>
<tr>
<td align="left" valign="middle">{label, Label}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Text or image to show.</td>
</tr>
<tr>
<td align="left" valign="middle">{select, Bool}</td>
<td align="left" valign="middle">false</td>
<td align="left" valign="middle">Check buttons and radio buttons. true means that the button is selected.</td>
</tr>
<tr>
<td align="left" valign="middle">{underline, Int}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Underline character N to indicate a keyboard accelerator.</td>
</tr>
<tr>
<td align="left" valign="middle">{group, Atom}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Radio button: only one per group is selected at one time. Check button: All in the same group are selected automatically.</td>
</tr>
<tr>
<td align="left" valign="middle">{value, Atom}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Radio buttons only. Groups radio buttons together within a group.</td>
</tr>
</table>
<em>Table
8.9:
Options for all Button Types</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Config-Only</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">flash</td>
<td align="left" valign="middle">Flash button</td>
</tr>
<tr>
<td align="left" valign="middle">invoke</td>
<td align="left" valign="middle">Explicit button press.</td>
</tr>
<tr>
<td align="left" valign="middle">toggle</td>
<td align="left" valign="middle">Check buttons only. Toggles select value.</td>
</tr>
</table>
<em>Table
8.10:
Config-Only Options for all Button types</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Buttontype</strong></td>
<td align="left" valign="middle"><strong>Event</strong></td>
</tr>
<tr>
<td align="left" valign="middle">normal</td>
<td align="left" valign="middle">{gs, itemId, click, Data, [Text| _]}</td>
</tr>
<tr>
<td align="left" valign="middle">check</td>
<td align="left" valign="middle">{gs, itemId, click, Data, [Text, Group, Bool | _]}</td>
</tr>
<tr>
<td align="left" valign="middle">radio</td>
<td align="left" valign="middle">{gs, itemId, click, Data, [Text, Group, Value | _]}</td>
</tr>
</table>
<em>Table
8.11:
>Events for all Button types</em>
<p>Buttons and check buttons are simple to understand, radio buttons are more difficult. Each radio button has a group and a value option. The group option is used to group together two or more radio buttons. Normally, each radio button within a group has a unique value which means that only one radio button can be selected at a time. If two (or more) radio buttons share the same value and one of them is selected, then both will be selected and all others are de-selected. The following short example shows how to program radio button logic in a situation where two of them share the same value.</p>
<div class="example"><pre>
-module(ex8).
-copyright('Copyright (c) 1991-97 Ericsson Telecom AB').
-vsn('$Revision: /main/release/2 $ ').
-export([start/0]).
start() ->
gs:window(win,gs:start(),{map,true}),
gs:radiobutton(rb1,win,[{label,{text,"rb1"}},{value,a},{y,0}]),
gs:radiobutton(rb2,win,[{label,{text,"rb2"}},{value,a},{y,30}]),
gs:radiobutton(rb3,win,[{label,{text,"rb3"}},{value,b},{y,60}]),
rb_loop().
rb_loop() ->
receive
{gs,Any_Rb,click,Data,[Text, Grp, a | Rest]} ->
io:format("either rb1 or rb2 is on.~n",[]),
rb_loop();
{gs,rb3,click,Data,[Text, Grp, b | Rest]} ->
io:format("rb3 is selected.~n",[]),
rb_loop()
end.
</pre></div> <a name="gs_fig10"></a>
<img alt="IMAGE MISSING" src="images/ex8.gif"><br>
<em>Figure
8.3:
Radio Button Group with Last Button Selected</em>
<p>The example shown creates three radio buttons which are members of the same group. The default behavior is that all radio buttons created by the same process are members of the same group. Normally, only one in a group may be selected at the same time, but since we defined the value-option to have the same value for <span class="code">rb1</span> and <span class="code">rb2</span>, they will both be selected/de-selected simultaneously. The normal radio button group behavior is that all radio buttons within the same group have unique default values.</p>
<h3><a name="id68734">8.5
Label</a></h3>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{align,Align}</td>
<td align="left" valign="middle">center</td>
<td align="left" valign="middle">How the text is aligned within the frame.</td>
</tr>
<tr>
<td align="left" valign="middle">{justify,left|right|center}</td>
<td align="left" valign="middle">left</td>
<td align="left" valign="middle">How to justify several lines of text.</td>
</tr>
<tr>
<td align="left" valign="middle">{label,Label}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Text or image to show.</td>
</tr>
<tr>
<td align="left" valign="middle">{underline,Int}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Underline character N to indicate a keyboard accelerator.</td>
</tr>
</table>
<em>Table
8.12:
Label Options</em>
<p>A label is a simple text field which is used to display text to the user. It is possible to have several lines of text by inserting newline '\
' characters between each line. The label object does not automatically adjust its size so that text will fit inside. This has to be done manually, or the text may be clipped at the edges.</p>
<h3><a name="id68905">8.6
Frame</a></h3>
<p>The frame object acts as a container for other objects. Its main use is to logically and visually group objects together. Grouped objects can then be moved, displayed, or hidden in one single operation.</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{bw,Int}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Border width</td>
</tr>
<tr>
<td align="left" valign="middle">{packer_x,PackList}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Makes the frame pack its children. See the packer section.</td>
</tr>
<tr>
<td align="left" valign="middle">{packer_y,PackList}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Makes the frame pack its children. See the packer section.</td>
</tr>
</table>
<em>Table
8.13:
Frame Options</em>
<p>It is possible to have frame objects within frame objects so that large hierarchical structures of objects can be created.</p>
<h3><a name="id69050">8.7
Entry</a></h3>
<a name="gs_fig11"></a>
<img alt="IMAGE MISSING" src="images/ex9.gif"><br>
<em>Figure
8.4:
Label and Entry Objects for User Input</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{justify, left|right|center}</td>
<td align="left" valign="middle">left</td>
<td align="left" valign="middle">Text justification in entry field.</td>
</tr>
<tr>
<td align="left" valign="middle">{text, String}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Use this option to initially set some text, and to read the text.</td>
</tr>
</table>
<em>Table
8.14:
Entry Options</em>
<p>Entrys are used to prompt the user for text input.</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Config-Only</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{delete, {From, To}}</td>
<td align="left" valign="middle">Deletes the characters within index {From,To}.</td>
</tr>
<tr>
<td align="left" valign="middle">{delete, last}</td>
<td align="left" valign="middle">Deletes the last character.</td>
</tr>
<tr>
<td align="left" valign="middle">{delete, Index}</td>
<td align="left" valign="middle">Deletes the character at position Index.</td>
</tr>
<tr>
<td align="left" valign="middle">{insert, {Index, String}}</td>
<td align="left" valign="middle">Inserts text at the specific character position. Index starts from 0.</td>
</tr>
<tr>
<td align="left" valign="middle">{select, {From, To}}</td>
<td align="left" valign="middle">Selects a range.</td>
</tr>
<tr>
<td align="left" valign="middle">{select, clear}</td>
<td align="left" valign="middle">De-selects selected text.</td>
</tr>
</table>
<em>Table
8.15:
Entry Config-Only Options</em>
<p>A common usage of the entry object is to listen for the 'Return' key event and then read the text field. The following example shows a simple dialog which prompts the user for a name and returns the tuple <span class="code">{name,Name}</span> when a name is entered, or <span class="code">cancel</span> if the cancel button is pressed.</p>
<div class="example"><pre>
-module(ex9).
-copyright('Copyright (c) 1991-97 Ericsson Telecom AB').
-vsn('$Revision: /main/release/2 $ ').
-export([start/0,init/1]).
start() ->
spawn(ex9, init, [self()]),
receive
{entry_reply, Reply} -> Reply
end.
init(Pid) ->
S = gs:start(),
Win = gs:create(window,S,[{title,"Entry Demo"},
{width,150},{height,100}]),
gs:create(label,Win,[{label,{text,"What's your name?"}},
{width,150}]),
gs:create(entry,entry,Win,[{x,10},{y,30},{width,130},
{keypress,true}]),
gs:create(button,ok,Win,[{width,45},{y,60},{x,10},
{label,{text,"Ok"}}]),
gs:create(button,cancel,Win,[{width,60},{y,60},{x,80},
{label,{text,"Cancel"}}]),
gs:config(Win,{map,true}),
loop(Pid).
loop(Pid) ->
receive
{gs,entry,keypress,_,['Return'|_]} ->
Text=gs:read(entry,text),
Pid ! {entry_reply,{name,Text}};
{gs,entry,keypress,_,_} -> % all other keypresses
loop(Pid);
{gs,ok,click,_,_} ->
Text=gs:read(entry,text),
Pid ! {entry_reply,{name,Text}};
{gs,cancel,click,_,_} ->
Pid ! {entry_reply,cancel};
X ->
io:format("Got X=~w~n",[X]),
loop(Pid)
end.
</pre></div> <p>The program draws the dialog and waits for the user to either press the return key or click one of the buttons. It then reads the text option of the entry and returns the string to the client process.</p>
<h3><a name="id69366">8.8
Listbox</a></h3>
<p>A listbox is a list of labels with optional scroll bars attached. The user selects one or more predefined alternative entries. You can add and remove entries in the listbox. The first element in a listbox has index 0.</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{hscroll, Bool | top | bottom}</td>
<td align="left" valign="middle">true</td>
<td align="left" valign="middle">Horizontal scroll bar.</td>
</tr>
<tr>
<td align="left" valign="middle">{items, [String, String ... String]}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">All items (entries) in the listbox.</td>
</tr>
<tr>
<td align="left" valign="middle">{scrollbg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Foreground color of scroll bar.</td>
</tr>
<tr>
<td align="left" valign="middle">{scrollfg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Background color of scroll bar.</td>
</tr>
<tr>
<td align="left" valign="middle">{selectmode, single | multiple}</td>
<td align="left" valign="middle">single</td>
<td align="left" valign="middle">Controls if it is possible to have several items selected at the same time.</td>
</tr>
<tr>
<td align="left" valign="middle">{vscroll, Bool | left | right}</td>
<td align="left" valign="middle">true</td>
<td align="left" valign="middle">Vertical scroll bar.</td>
</tr>
</table>
<em>Table
8.16:
Listbox Options</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Config-Only</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{add, {Index, String}}</td>
<td align="left" valign="middle">Add an item at specified index.</td>
</tr>
<tr>
<td align="left" valign="middle">{add, String}</td>
<td align="left" valign="middle">Add an item last.</td>
</tr>
<tr>
<td align="left" valign="middle">{change, {Index,String}}</td>
<td align="left" valign="middle">Change one item.</td>
</tr>
<tr>
<td align="left" valign="middle">clear</td>
<td align="left" valign="middle">Delete all items.</td>
</tr>
<tr>
<td align="left" valign="middle">{del, Index | {From, To}}</td>
<td align="left" valign="middle">Delete an item at specified index, or all from index From to index To.</td>
</tr>
<tr>
<td align="left" valign="middle">{see, Index}</td>
<td align="left" valign="middle">Make the item at specified index visible.</td>
</tr>
<tr>
<td align="left" valign="middle">{selection, Index | {From,To}| clear}</td>
<td align="left" valign="middle">Select an item (highlight it). Clear erases the selection.</td>
</tr>
</table>
<em>Table
8.17:
Listbox Cinfig-only Options</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Read-Only</strong></td>
<td align="left" valign="middle"><strong>Return</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">selection</td>
<td align="left" valign="middle">ListOfStrings</td>
<td align="left" valign="middle">Returns current selection. All selected item indices will be returned in a list.</td>
</tr>
<tr>
<td align="left" valign="middle">size</td>
<td align="left" valign="middle">Int</td>
<td align="left" valign="middle">The number of items (entries) in the listbox.</td>
</tr>
<tr>
<td align="left" valign="middle">{get, Index}</td>
<td align="left" valign="middle">String</td>
<td align="left" valign="middle">Returns item at specified index.</td>
</tr>
</table>
<em>Table
8.18:
Listbox Read-Only Options</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Event</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{gs, ListBox, click, Data, [Index, Text,Bool | _]}</td>
</tr>
<tr>
<td align="left" valign="middle">{gs, ListBox, doubleclick, Data, [Index, Text,Bool | _]}</td>
</tr>
</table>
<em>Table
8.19:
Listbox Events</em>
<p><span class="code">Bool</span> is true if object is selected, false if de-selected.</p>
<p>Note that <span class="code">click</span> and <span class="code">doubleclick</span> are two discrete events: if you have subscribed to both, you will receive both a <span class="code">click</span> event and a <span class="code">doubleclick</span> event when double-clicking on one item (since two rapid clickings are regarded as both a <span class="code">click</span> and a <span class="code">doubleclick</span>). The subscription of <span class="code">doubleclick</span> events does <span class="code">not</span> result in the <span class="code">click</span> events being unsubscribed!</p>
<p>The following example shows a simple application which prompts the user for a text item. The user has the following options:</p>
<ul>
<li>browse the items and then double-click the required item</li>
<li>type the name into the entry field and then press the Return key</li>
<li>select the required item and then click the OK button.</li>
</ul>
<a name="gs_fig12"></a>
<img alt="IMAGE MISSING" src="images/ex1.gif"><br>
<em>Figure
8.5:
Simple Browser Dialog</em>
<div class="example"><pre>
-module(ex10).
-copyright('Copyright (c) 1991-97 Ericsson Telecom AB').
-vsn('$Revision: /main/release/2 $ ').
-export([start/0, init/3]).
start() ->
start("Pick a fruit:",
[apple, banana, lemon, orange, strawberry,
mango, kiwi, pear, cherry,pineapple,peach,apricot]).
start(Text,Items) ->
spawn(ex10,init,[self(),Text,Items]),
receive
{browser,Result} -> Result
end.
init(Pid,Text,Items) ->
S=gs:start(),
Win=gs:window(S,[{width,250},{height,270},
{title,"Browser"}]),
Lbl=gs:label(Win,[{label,{text,Text}},{width,250}]),
Entry=gs:entry(Win,[{y,35},{width,240},{x,5},
{keypress,true},
{setfocus,true}]),
Lb=gs:listbox(Win,[{x,5},{y,65},{width,160},
{height,195},{vscroll,right},
{click,true},{doubleclick,true}]),
Ok=gs:button(Win,[{label,{text,"OK"}},
{width,40},{x,185},{y,175}]),
Cancel=gs:button(Win,[{label,{text,"Cancel"}},
{x,175},{y,225},{width,65}]),
gs:config(Lb,[{items,Items}]),
gs:config(Win,{map,true}),
browser_loop(Pid,Ok,Cancel,Entry,Lb).
browser_loop(Pid,Ok,Cancel,Entry,Lb) ->
receive
{gs,Ok,click,_,_} ->
Txt=gs:read(Entry,text),
Pid ! {browser,{ok,Txt}};
{gs,Cancel,click,_,_} ->
Pid ! {browser,cancel};
{gs,Entry,keypress,_,['Return'|_]} ->
Txt=gs:read(Entry,text),
Pid ! {browser,{ok,Txt}};
{gs,Entry,keypress,_,_} ->
browser_loop(Pid,Ok,Cancel,Entry,Lb);
{gs,Lb,click,_,[Idx, Txt|_]} ->
gs:config(Entry,{text,Txt}),
browser_loop(Pid,Ok,Cancel,Entry,Lb);
{gs,Lb,doubleclick,_,[Idx, Txt|_]} ->
Pid ! {browser,{ok,Txt}};
{gs,_,destroy,_,_} ->
Pid ! {browser,cancel};
X ->
io:format("Got X=~w~n",[X]),
browser_loop(Pid,Ok,Cancel,Entry,Lb)
end.
</pre></div>
<h3><a name="id70050">8.9
Canvas</a></h3>
<p>The canvas object is a simple drawing area. The user can draw graphical objects and move them around the drawing area. The canvas also has optional scroll bars which can be used to scroll the drawing area. The graphical objects that can be created on a canvas object are:</p>
<ul>
<li>arc</li>
<li>image</li>
<li>line</li>
<li>oval</li>
<li>polygon</li>
<li>rectangle</li>
<li>text.</li>
</ul>
<p>These objects must have a canvas object as a parent, but they are otherwise similar to all other basic objects. The following tables show the options which apply to canvas objects.</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{bg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Color of the drawing area.</td>
</tr>
<tr>
<td align="left" valign="middle">{hscroll, Bool | top | bottom}</td>
<td align="left" valign="middle">false</td>
<td align="left" valign="middle">Horizontal scroll bar.</td>
</tr>
<tr>
<td align="left" valign="middle">{scrollbg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Foreground color of scroll bar.</td>
</tr>
<tr>
<td align="left" valign="middle">{scrollfg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Background color of scroll bar.</td>
</tr>
<tr>
<td align="left" valign="middle">{scrollregion, {X1,Y1,X2,Y2}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The size of the drawing area to be scrolled. </td>
</tr>
<tr>
<td align="left" valign="middle">{vscroll, Bool | left | right}</td>
<td align="left" valign="middle">false</td>
<td align="left" valign="middle">Vertical scroll bar.</td>
</tr>
</table>
<em>Table
8.20:
Canvas Options</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Read-Only</strong></td>
<td align="left" valign="middle"><strong>Return</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{hit, {X,Y}}</td>
<td align="left" valign="middle">list of ObjectId</td>
<td align="left" valign="middle">Returns the canvas objects at X,Y.</td>
</tr>
<tr>
<td align="left" valign="middle">{hit, [{X1,Y1},{X2,Y2}]}</td>
<td align="left" valign="middle">list of ObjectId</td>
<td align="left" valign="middle">Returns the canvas objects which are hit by the rectangle.</td>
</tr>
</table>
<em>Table
8.21:
Canvas Read-Only Options</em>
<p>Canvas objects have the same types of events as other objects. The following Config-Only options also apply to canvas objects:</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Config-Only</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">lower</td>
<td align="left" valign="middle">Lowers the object.</td>
</tr>
<tr>
<td align="left" valign="middle">{move, {Dx, Dy}}</td>
<td align="left" valign="middle">Moves object relative to its current position.</td>
</tr>
<tr>
<td align="left" valign="middle">raise</td>
<td align="left" valign="middle">Raises the object above all other objects.</td>
</tr>
</table>
<em>Table
8.22:
Canvas Config-Only Options</em>
<p>The following sections describe the graphical objects which can be drawn on a canvas object.</p>
<h4>The Canvas Arc Object</h4>
<p>The canvas arc object is defined within a rectangle and is drawn from a start angle to the extent angle. Origo is in the center of the rectangle.</p>
<a name="gs_fig13"></a>
<img alt="IMAGE MISSING" src="images/arc.gif"><br>
<em>Figure
8.6:
Canvas Arc Object</em>
<div class="example"><pre>
gs:create(arc,Canvas,[{coords,[{10,10},{80,80}]},{fill,yellow}]).
</pre></div>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{bw, Int}</td>
<td align="left" valign="middle">1</td>
<td align="left" valign="middle">Defines the width.</td>
</tr>
<tr>
<td align="left" valign="middle">{coords, [{X1,Y1},{X2,Y2}]}</td>
<td align="left" valign="middle"> </td>
<td align="left" valign="middle">Defines a rectangle to draw the arc within.</td>
</tr>
<tr>
<td align="left" valign="middle">{extent, Degrees}</td>
<td align="left" valign="middle"> </td>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">{fg, Color}</td>
<td align="left" valign="middle"> </td>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">{fill, Color|none}</td>
<td align="left" valign="middle">none</td>
<td align="left" valign="middle">Defines fill color of arc object.</td>
</tr>
<tr>
<td align="left" valign="middle">{start, Degrees}</td>
<td align="left" valign="middle"> </td>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">{style, arc}</td>
<td align="left" valign="middle"> </td>
<td align="left" valign="middle">No line segments.</td>
</tr>
<tr>
<td align="left" valign="middle">{style, chord}</td>
<td align="left" valign="middle"> </td>
<td align="left" valign="middle">A single line segment connects the two end points of the perimeter section.</td>
</tr>
<tr>
<td align="left" valign="middle">{style, pieslice}</td>
<td align="left" valign="middle">This Style</td>
<td align="left" valign="middle">Two lines are drawn between the center of the oval and each end of the perimeter section.</td>
</tr>
</table>
<em>Table
8.23:
Canvas Arc Options</em>
<h4>The Canvas Image Object</h4>
<p>The canvas image object displays images and moves them around in a simple way. The currently supported image formats are bitmap and gif.</p>
<a name="gs_fig14"></a>
<img alt="IMAGE MISSING" src="images/image.gif"><br>
<em>Figure
8.7:
Canvas Image Object</em>
<div class="example"><pre>
gs:create(image,Canvas,[{load_gif,"brick.gif"}]).
</pre></div>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{anchor, Anchor}</td>
<td align="left" valign="middle">nw</td>
<td align="left" valign="middle">Anchor reference specified by {X,Y} .</td>
</tr>
<tr>
<td align="left" valign="middle">{bg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Background color. Pixel value 0.</td>
</tr>
<tr>
<td align="left" valign="middle">{bitmap, FileName}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">A bitmap file which contains a bmp bitmap.</td>
</tr>
<tr>
<td align="left" valign="middle">{coords, [{X,Y}]}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Position on the canvas.</td>
</tr>
<tr>
<td align="left" valign="middle">{fg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Foreground color. Pixel value 1.</td>
</tr>
<tr>
<td align="left" valign="middle">{load_gif, FileName}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Loads a gif image.</td>
</tr>
</table>
<em>Table
8.24:
Canvas Image Object Options</em>
<h4>The Canvas Line Object</h4>
<a name="gs_fig15"></a>
<img alt="IMAGE MISSING" src="images/line.gif"><br>
<em>Figure
8.8:
Line Object Drawn on a Canvas</em>
<div class="example"><pre>
gs:create(line,Canvas,
[{coords,[{25,25},{50,50},{50,40},{85,75}]},
{arrow,last},{width,2}]).
</pre></div>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{arrow, both | none | first | last}</td>
<td align="left" valign="middle">none</td>
<td align="left" valign="middle">Draws arrows at the end points of the line.</td>
</tr>
<tr>
<td align="left" valign="middle">{coords, [{X1,Y1},{X2,Y2}, ... {Xn,Yn}]}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">A list of coordinates. The line will be drawn between all pairs in the list.</td>
</tr>
<tr>
<td align="left" valign="middle">{fg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The color of the line.</td>
</tr>
<tr>
<td align="left" valign="middle">{smooth, Bool}</td>
<td align="left" valign="middle">false</td>
<td align="left" valign="middle">Smoothing with Bezier splines.</td>
</tr>
<tr>
<td align="left" valign="middle">{splinesteps, Int}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">{width, Int}</td>
<td align="left" valign="middle">1</td>
<td align="left" valign="middle">The width of the line.</td>
</tr>
</table>
<em>Table
8.25:
Canvas Line Object Options</em>
<h4>The Canvas Oval Object</h4>
<a name="gs_fig16"></a>
<img alt="IMAGE MISSING" src="images/oval.gif"><br>
<em>Figure
8.9:
Oval Object Drawn on a Canvas</em>
<div class="example"><pre>
gs:create(oval,Canvas,
[{coords,[{25,25},{125,75}]},{fill,red},{bw,2}]).
</pre></div>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{bw, Int}</td>
<td align="left" valign="middle">1</td>
<td align="left" valign="middle">Width.</td>
</tr>
<tr>
<td align="left" valign="middle">{coords, [{X1,Y1},{X2,Y2}]}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Bounding rectangle which defines shape of object.</td>
</tr>
<tr>
<td align="left" valign="middle">{fg, Color}</td>
<td align="left" valign="middle"> </td>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">{fill, Color|none}</td>
<td align="left" valign="middle">none</td>
<td align="left" valign="middle">Object fill color.</td>
</tr>
</table>
<em>Table
8.26:
Canvas Oval Object Options</em>
<h4>The Canvas Polygon Object</h4>
<a name="gs_fig17"></a>
<img alt="IMAGE MISSING" src="images/polygon.gif"><br>
<em>Figure
8.10:
Canvas Polygon Object</em>
<div class="example"><pre>
gs:create(polygon,Canvas,
[{coords,[{10,10},{50,50},{75,30}]}]).
</pre></div>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{bw, Int}</td>
<td align="left" valign="middle">1</td>
<td align="left" valign="middle">Width.</td>
</tr>
<tr>
<td align="left" valign="middle">{coords, [{X1,Y1},{X2,Y2} | {Xn,Yn}]}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Defines all points in the polygon. There may be any number of points in the polygon.</td>
</tr>
<tr>
<td align="left" valign="middle">{fg, Color}</td>
<td align="left" valign="middle">black</td>
<td align="left" valign="middle">The color of the polygon outline. </td>
</tr>
<tr>
<td align="left" valign="middle">{fill, Color|none}</td>
<td align="left" valign="middle">none</td>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">{smooth, Bool}</td>
<td align="left" valign="middle">false</td>
<td align="left" valign="middle">Smoothing with Bezier splines.</td>
</tr>
<tr>
<td align="left" valign="middle">{splinesteps, Int}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle"> </td>
</tr>
</table>
<em>Table
8.27:
Canvas Polygon Object Options</em>
<h4>The Canvas Rectangle Object</h4>
<a name="gs_fig18"></a>
<img alt="IMAGE MISSING" src="images/rectangle.gif"><br>
<em>Figure
8.11:
Rectangle Object Created on a Canvas</em>
<div class="example"><pre>
gs:create(rectangle,Canvas,
[{coords,[{30,30},{70,70}]},{fill,cyan},{bw,2}]).
</pre></div>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{bw, Int}</td>
<td align="left" valign="middle">1</td>
<td align="left" valign="middle">The width of the border line.</td>
</tr>
<tr>
<td align="left" valign="middle">{coords, [{X1,Y1},{X2,Y2}]}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Defines rectangle coordinates.</td>
</tr>
<tr>
<td align="left" valign="middle">{fg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The color of the border line.</td>
</tr>
<tr>
<td align="left" valign="middle">{fill, Color|none}</td>
<td align="left" valign="middle">none</td>
<td align="left" valign="middle">Fill color of rectangle.</td>
</tr>
</table>
<em>Table
8.28:
Canvas Rectangle Object Options</em>
<h4>The Canvas Text Object</h4>
<a name="gs_fig19"></a>
<img alt="IMAGE MISSING" src="images/text.gif"><br>
<em>Figure
8.12:
Canvas Text Object</em>
<div class="example"><pre>
gs:create(text,C,[{coords,[{50,50}]},
{font,{times,18}},
{fg,red},
{text,"Hello World!"}]).
</pre></div>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{anchor, Anchor}</td>
<td align="left" valign="middle">nw</td>
<td align="left" valign="middle">Anchor reference specified by {X,Y}.</td>
</tr>
<tr>
<td align="left" valign="middle">{coords, [{X, Y}]}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Position in the canvas.</td>
</tr>
<tr>
<td align="left" valign="middle">{fg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Text color (background color is the canvas color).</td>
</tr>
<tr>
<td align="left" valign="middle">{justify, left | center | right}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Tex justification. Only valid with several lines of text.</td>
</tr>
<tr>
<td align="left" valign="middle">{text, String}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The text string to display.</td>
</tr>
<tr>
<td align="left" valign="middle">{width, Int}</td>
<td align="left" valign="middle"> </td>
<td align="left" valign="middle">The width in pixels. The text will be wrapped into several lines to fit inside the width.</td>
</tr>
</table>
<em>Table
8.29:
Canvas Text Object Options</em>
<h3><a name="id72195">8.10
Menu</a></h3>
<p>Menus consist of four object types:</p>
<ul>
<li>the menu bar</li>
<li>the menu button</li>
<li>the menu</li>
<li>the menu item.</li>
</ul>
<h4>Menu Bar</h4>
<p>The menu bar is a simple object. It is placed at the top of the window and contains menu items. {x,y} or width cannot be controlled since, by definition, the menu bar is placed at the top of the window.</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle"><only generic options></td>
<td align="left" valign="middle"> </td>
<td align="left" valign="middle"> </td>
</tr>
</table>
<em>Table
8.30:
Menu Bar Options</em>
<h4>Menu Button</h4>
<p>The menu button displays a menu when pressed. The width of the menu button is automatically determined by the size of the text.</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{align, Align}</td>
<td align="left" valign="middle">center</td>
<td align="left" valign="middle">Text alignment within the frame.</td>
</tr>
<tr>
<td align="left" valign="middle">{justify, left | center | right}</td>
<td align="left" valign="middle">center</td>
<td align="left" valign="middle">Justification is only valid when there are several lines of text.</td>
</tr>
<tr>
<td align="left" valign="middle">{label,{text,Text}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">{side, left | right}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Placement on the menu bar. The menu button created first will have the left/right position.</td>
</tr>
<tr>
<td align="left" valign="middle">{underline, Int}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Underline character N to indicate an keyboard accelerator.</td>
</tr>
</table>
<em>Table
8.31:
Menu Button Options</em>
<h4>Menu</h4>
<p>The menu contains menu items, which are displayed vertically. Its width is automatically determined by the width of the menu items it contains.</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{selectcolor, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The indicator color of radio buttons and check buttons.</td>
</tr>
</table>
<em>Table
8.32:
Menu Options</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Config-Only</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{post_at,{X,Y}}</td>
<td align="left" valign="middle">Displays the menu as a pop-up menu at {X,Y} (coordinate system of the parent).</td>
</tr>
</table>
<em>Table
8.33:
Menu Config-Only Options</em>
<h4>Menu Item</h4>
<p>The menu item is an object of its own. It can send events when the user selects it.</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{group, Atom}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">For {type, radio|check}.</td>
</tr>
<tr>
<td align="left" valign="middle">{itemtype, type}</td>
<td align="left" valign="middle">normal</td>
<td align="left" valign="middle">The type of this item. Cannot be reconfigured.</td>
</tr>
<tr>
<td align="left" valign="middle">{label, {text,Text}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The text of the item.</td>
</tr>
<tr>
<td align="left" valign="middle">{underline, Int}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Underline character N to indicate an keyboard accelerator.</td>
</tr>
<tr>
<td align="left" valign="middle">{value, Atom}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle"> </td>
</tr>
</table>
<em>Table
8.34:
Menu Item Options</em>
<p><span class="code">type: normal | separator | check | radio | cascade</span></p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>itemtype</strong></td>
<td align="left" valign="middle"><strong>Event</strong></td>
</tr>
<tr>
<td align="left" valign="middle">normal</td>
<td align="left" valign="middle">{gs, itemId, click, Data, [Text, Index | _]}</td>
</tr>
<tr>
<td align="left" valign="middle">check</td>
<td align="left" valign="middle">{gs, itemId, click, Data, [Text, Index, Group, Bool| _]}</td>
</tr>
<tr>
<td align="left" valign="middle">radio</td>
<td align="left" valign="middle">{gs, itemId, click, Data, [Text, Index, Group, Value| _]}</td>
</tr>
</table>
<em>Table
8.35:
Menu Item Events</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Read-Only</strong></td>
<td align="left" valign="middle"><strong>Return</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">index</td>
<td align="left" valign="middle">Int</td>
<td align="left" valign="middle">Index in the menu. Starts counting from 0.</td>
</tr>
</table>
<em>Table
8.36:
Menu Item Read-Only Options</em>
<h4>Menu Demo</h4>
<a name="gs_fig20"></a>
<img alt="IMAGE MISSING" src="images/ex13.gif"><br>
<em>Figure
8.13:
Simple Menu</em>
<p>The following example shows a short demo of the <span class="code">gs</span> menus:</p>
<div class="example"><pre>
-module(ex13).
-copyright('Copyright (c) 1991-97 Ericsson Telecom AB').
-vsn('$Revision: /main/release/2 $ ').
-export([start/0,init/0]).
start() -> spawn(ex13, init, []).
init() ->
I=gs:start(),
Win=gs:window(I, [{width,200},{height,100},
{title,"menu"},{map, true}]),
Bar = gs:create(menubar, Win, []),
Fmb = gs:create(menubutton, Bar,
[{label,{text,"File"}}]),
Emb = gs:create(menubutton, Bar,
[{label,{text,"Edit"}}]),
Hmb = gs:create(menubutton, Bar,
[{label,{text,"Help"}},{side,right}]),
Fmnu = gs:create(menu, Fmb, []),
Emnu = gs:create(menu, Emb, []),
Hmnu = gs:create(menu, Hmb, []),
gs:create(menuitem, load, Fmnu,
[{label,{text, "Load"}}]),
gs:create(menuitem, save, Fmnu,
[{label,{text, "Save"}}]),
Exit = gs:create(menuitem, Fmnu,
[{label,{text, "Exit"}}]),
Color = gs:create(menuitem, Emnu,
[{label,{text, "Color"}},
{itemtype, cascade}]),
Cmnu = gs:create(menu, Color, [{disabledfg,gray}]),
gs:create(menuitem, Cmnu, [{label, {text,"Red"}},
{data, {new_color, red}},
{itemtype,radio},{group,gr1}]),
gs:create(menuitem, Cmnu, [{label, {text,"Blue"}},
{data, {new_color, blue}},
{itemtype,radio},{group,gr1}]),
gs:create(menuitem,Cmnu, [{label, {text,"Black"}},
{data, {new_color, black}},
{itemtype,radio},{group,gr1}]),
Y = gs:create(menuitem, Hmnu, [{label, {text,"You"}},
{itemtype, check}]),
M = gs:create(menuitem, me, Hmnu, [{label, {text, "Me"}},
{itemtype, check}]),
gs:create(menuitem, Hmnu, [{itemtype, separator}]),
gs:create(menuitem, Hmnu, [{label, {text, "Other"}},
{itemtype, check},
{enable,false}]),
gs:create(menuitem, doit, Hmnu, [{label, {text, "Doit!"}},
{data, {doit, Y, M}}]),
loop(Exit, Win).
loop(Exit, Win) ->
receive
{gs, save, click, _Data, [Txt, Index | Rest]} ->
io:format("Save~n");
{gs, load, click, _Data, [Txt, Index | Rest]} ->
io:format("Load~n");
{gs, Exit, click, _Data, [Txt, Index | Rest]} ->
io:format("Exit~n"),
exit(normal);
{gs, _MnuItem, click, {new_color, Color}, Args} ->
io:format("Change color to ~w. Args:~p~n",
[Color, Args]),
gs:config(Win, [{bg, Color}]);
{gs, doit, click, {doit, YouId, MeId}, Args} ->
HelpMe = gs:read(MeId, select),
HelpYou = gs:read(YouId, select),
io:format("Doit. HelpMe:~w, HelpYou:~w, Args:~p~n",
[HelpMe, HelpYou, Args]);
Other -> io:format("Other:~p~n",[Other])
end,
loop(Exit, Win).
</pre></div>
<h3><a name="id80608">8.11
Grid</a></h3>
<p>The grid object is similar to the listbox object. The main difference is that the grid is a multi-column object which is used to display tables. If needed, the grid can send click events when a user presses the mouse button in a table cell. Although the grid has a behavior which is similar to the listbox, the programming is somewhat different. The data in a table cell is represented as a pure <span class="code">gs</span> object and can be treated as such. This object is called a grid line. It is located at a row in the parent grid. If a grid line is clicked, it sends an event to its owner.</p>
<h4>Grid Line</h4>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{{bg, Column},Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The background color of a cell.</td>
</tr>
<tr>
<td align="left" valign="middle">{bg, {Column,Color}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Equivalent to {{bg, Column},Color}.</td>
</tr>
<tr>
<td align="left" valign="middle">{bg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The background color of all cells.</td>
</tr>
<tr>
<td align="left" valign="middle">{click, Bool}</td>
<td align="left" valign="middle">true</td>
<td align="left" valign="middle">Turns click events on/off.</td>
</tr>
<tr>
<td align="left" valign="middle">{doubleclick, Bool}</td>
<td align="left" valign="middle">false</td>
<td align="left" valign="middle">Turns double-click events on/off.</td>
</tr>
<tr>
<td align="left" valign="middle">{{fg, Column},Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The foreground color of a cell.</td>
</tr>
<tr>
<td align="left" valign="middle">{fg, {Column,Color}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Equivalent to {{fg, Column},Color}</td>
</tr>
<tr>
<td align="left" valign="middle">{fg,Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The foreground color of all cells.</td>
</tr>
<tr>
<td align="left" valign="middle">{text, {Column,Text}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The text in the cell.</td>
</tr>
<tr>
<td align="left" valign="middle">{{text, Column},Text}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Equivalent to {text,{Column,Text}}.</td>
</tr>
<tr>
<td align="left" valign="middle">{text,Text}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The text for all cells.</td>
</tr>
<tr>
<td align="left" valign="middle">{row, {row}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The grid row. Must not be occupied by another grid line.</td>
</tr>
</table>
<em>Table
8.37:
Grid Line Options</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Event</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{gs, GridLineId, click, Data, [Col, row, Text | _]}</td>
</tr>
<tr>
<td align="left" valign="middle">{gs, GridLineId, doubleclick, Data, [Col, row, Text | _]}</td>
</tr>
</table>
<em>Table
8.38:
Gride Line Events</em>
<h4>Grid</h4>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{font,Font}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">A "global" grid font.</td>
</tr>
<tr>
<td align="left" valign="middle">{hscroll, Bool|top|bottom}</td>
<td align="left" valign="middle">true</td>
<td align="left" valign="middle">Horizontal scroll bar.</td>
</tr>
<tr>
<td align="left" valign="middle">{vscoll, Bool|left|right}</td>
<td align="left" valign="middle">true</td>
<td align="left" valign="middle">Vertical scroll bar.</td>
</tr>
<tr>
<td align="left" valign="middle">{rows, {Minrow,Maxrow}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The rows which are currently displayed.</td>
</tr>
<tr>
<td align="left" valign="middle">{columnwidths, [WidthCol1,WidthCol2, ..., WidthColN}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Defines the number of columns and their widths in coordinates. The size of the columns can be reconfigured, but not the number of columns.</td>
</tr>
<tr>
<td align="left" valign="middle">{fg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The color of the grid pattern and the text.</td>
</tr>
<tr>
<td align="left" valign="middle">{bg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The background color.</td>
</tr>
</table>
<em>Table
8.39:
Grid Options</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Read-Only</strong></td>
<td align="left" valign="middle"><strong>Return</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{obj_at_row, row}</td>
<td align="left" valign="middle">Object |undefined</td>
<td align="left" valign="middle">The grid line at row.</td>
</tr>
</table>
<em>Table
8.40:
Grid Read-Only Options</em>
<p>The rows and columns start counting at 1.</p>
<h4>Grid Demo</h4>
<a name="gs_fig21"></a>
<img alt="IMAGE MISSING" src="images/ex12.gif"><br>
<em>Figure
8.14:
Simple Grid</em>
<p>The following simple example shows how to use the grid.</p>
<div class="example"><pre>
-module(ex12).
-copyright('Copyright (c) 1991-97 Ericsson Telecom AB').
-vsn('$Revision: /main/release/2 $ ').
-export([start/0,init/0]).
start() -> spawn(ex12, init, []).
init() ->
R=[{window,[{width,200},{height,200},{title,"grid"},{map, true}],
{grid, [{x,10},{y,10},{height,180},{width,180},{columnwidths,[80,60]},
{rows,{1, 20}}],
[{gridline,[{text,{1,"NAME"}},{text,{2,"PHONE"}},
{font,{screen,bold,12}},{row,1},{click,false}]},
{gridline,[{text,{1,"Adam"}},{text,{2,"1234"}},{row,2}]},
{gridline,[{text,{1,"Beata"}},{text,{2,"4321"}},{row,3}]},
{gridline,[{text,{1,"Thomas"}},{text,{2,"1432"}},{row,4}]},
{gridline,[{text,{1,"Bond"}},{text,{2,"007"}},{row,5}]},
{gridline,[{text,{1,"King"}},{text,{2,"112"}},{row,6}]},
{gridline,[{text,{1,"Eva"}},{text,{2,"4123"}},{row,7}]}]}}],
gs:create_tree(gs:start(),R),
loop().
loop() ->
receive
{gs,_Win,destroy,_Data,_Args} -> bye;
{gs,_Gridline,click,_Data,[Col,Row,Text|_]} ->
io:format("Click at col:~p row:~p text:~p~n",[Col,Row,Text]),
loop();
Msg ->
io:format("Got ~p~n",[Msg]),
loop()
end.
</pre></div>
<h3><a name="id81434">8.12
Editor</a></h3>
<p>The editor object is a simple text editor.</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{hscroll, Bool | top | bottom}</td>
<td align="left" valign="middle">false</td>
<td align="left" valign="middle">Horizontal scroll bar.</td>
</tr>
<tr>
<td align="left" valign="middle">{insertpos,{row,Col}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The position of the cursor.</td>
</tr>
<tr>
<td align="left" valign="middle">{insertpos,'end'}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The position of the cursor.</td>
</tr>
<tr>
<td align="left" valign="middle">{justify, left| right| center}</td>
<td align="left" valign="middle">left</td>
<td align="left" valign="middle">Text justification.</td>
</tr>
<tr>
<td align="left" valign="middle">{scrollbg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Background color of scroll bar.</td>
</tr>
<tr>
<td align="left" valign="middle">{scrollfg, Color}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">Foreground color of scroll bar.</td>
</tr>
<tr>
<td align="left" valign="middle">{selection, {FromIndex,ToIndex}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The text range that is currently selected.</td>
</tr>
<tr>
<td align="left" valign="middle">{vscroll, Bool | left | right}</td>
<td align="left" valign="middle">false</td>
<td align="left" valign="middle">Vertical scroll bar.</td>
</tr>
<tr>
<td align="left" valign="middle">{vscrollpos, row}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The top most visible row in the editor.</td>
</tr>
<tr>
<td align="left" valign="middle">{wrap, none|char | word}</td>
<td align="left" valign="middle">none</td>
<td align="left" valign="middle">How to wrap text when the line is full.</td>
</tr>
</table>
<em>Table
8.41:
Editor Options</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Config-Only</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">clear</td>
<td align="left" valign="middle">Clears the editor.</td>
</tr>
<tr>
<td align="left" valign="middle">{del, {FromIndex, ToIndex}}}</td>
<td align="left" valign="middle">Deletes text.</td>
</tr>
<tr>
<td align="left" valign="middle">{fg, {{FromIndex,ToIndex},Color}}</td>
<td align="left" valign="middle">Sets the foreground color of a range of text.</td>
</tr>
<tr>
<td align="left" valign="middle">{load, FileName}</td>
<td align="left" valign="middle">Read FileName into the editor.</td>
</tr>
<tr>
<td align="left" valign="middle">{insert, {Index, Text}}</td>
<td align="left" valign="middle">Inserts new text.</td>
</tr>
<tr>
<td align="left" valign="middle">{overwrite, {Index, Text}}</td>
<td align="left" valign="middle">Writes new text at index.</td>
</tr>
<tr>
<td align="left" valign="middle">{save, FileName}</td>
<td align="left" valign="middle">Writes editor contents to file.</td>
</tr>
</table>
<em>Table
8.42:
Editor Config-Only Options</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Read-Only</strong></td>
<td align="left" valign="middle"><strong>Return</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">char_height</td>
<td align="left" valign="middle">Int</td>
<td align="left" valign="middle">The height of the editor window measured in characters.</td>
</tr>
<tr>
<td align="left" valign="middle">char_width</td>
<td align="left" valign="middle">Int</td>
<td align="left" valign="middle">The width of the editor window measured in characters.</td>
</tr>
<tr>
<td align="left" valign="middle">{fg,Index}</td>
<td align="left" valign="middle">Int</td>
<td align="left" valign="middle">The foreground color of the text at Index.</td>
</tr>
<tr>
<td align="left" valign="middle">{get,{FromIndex, ToIndex}}</td>
<td align="left" valign="middle">Text</td>
<td align="left" valign="middle">The text between the indices.</td>
</tr>
<tr>
<td align="left" valign="middle">size</td>
<td align="left" valign="middle">Int</td>
<td align="left" valign="middle">The number of rows in the editor.</td>
</tr>
</table>
<em>Table
8.43:
Editor Read-Only Options</em>
<div class="example"><pre>
Index: 'end'|insert|{row,Col}|{row,lineend}
</pre></div>
<h4>Editor Demo</h4>
<a name="gs_fig22"></a>
<img alt="IMAGE MISSING" src="images/ex14.gif"><br>
<em>Figure
8.15:
Simple Editor</em>
<div class="example"><pre>
-module(ex14).
-copyright('Copyright (c) 1991-97 Ericsson Telecom AB').
-vsn('$Revision: /main/release/2 $ ').
-export([start/0,init/0]).
start() -> spawn(ex14, init, []).
init() ->
Y = [{y,0},{height, 30},{width, 90}],
R=[{window, [{width, 400},{height, 300}, {title,"editor"},{map, true}],
[{editor,editor,[{x,0},{y, 35},{width,300},{height,250},
{insert,{'end',"Edit this text!"}},{vscroll,right}]},
{button, clear, [{label, {text, "Clear"}},{x,0} | Y]},
{checkbutton,enable,[{label,{text,"Enable"}},{select,false},{x,100}|Y]},
{button, time, [{label, {text, "Insert Time"}},{x,200} | Y]},
{button, quit, [{label, {text, "Quit"}},{x,300} | Y]}]}],
gs:create_tree(gs:start(),R),
gs:config(editor,{enable,false}),
loop().
loop() ->
receive
{gs, clear, _, _, _} ->
io:format("clear editor~n"),
Enable = gs:read(editor, enable),
gs:config(editor,{enable, true}),
gs:config(editor,clear),
gs:config(editor,{enable, Enable});
{gs, enable, _, _, [_Txt, _Grp, Enable|_]} ->
io:format("Enable: ~w~n", [Enable]),
gs:config(editor,{enable, Enable});
{gs, time, _, _, _} ->
TimeStr = io_lib:format("Hr:Min:Sec is now ~w:~w:~w~n",
tuple_to_list(time())),
io:format("Insert Time: ~s~n", [TimeStr]),
Enable = gs:read(editor, enable),
gs:config(editor,{enable, true}),
gs:config(editor,{insert, {insert, TimeStr}}),
gs:config(editor,{enable, Enable});
{gs, quit, _, _, _} ->
exit(normal);
Other ->
io:format("Other:~w~n",[Other])
end,
loop().
</pre></div>
<h3><a name="id82183">8.13
Scale</a></h3>
<p>A scale object is used to select a value within a specified range.</p>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>{Option,Value}</strong></td>
<td align="left" valign="middle"><strong>Default</strong></td>
<td align="left" valign="middle"><strong>Description</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{orient, vertical | horizontal}</td>
<td align="left" valign="middle">horizontal</td>
<td align="left" valign="middle">The orientation of the scale.</td>
</tr>
<tr>
<td align="left" valign="middle">{pos, Int}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The current value of the scale objects within the range.</td>
</tr>
<tr>
<td align="left" valign="middle">{range, {Min, Max}}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">The value range.</td>
</tr>
<tr>
<td align="left" valign="middle">{showvalue, Bool}</td>
<td align="left" valign="middle">true</td>
<td align="left" valign="middle">Turns showing of scale value on/off.</td>
</tr>
<tr>
<td align="left" valign="middle">{text, String}</td>
<td align="left" valign="middle"><unspec></td>
<td align="left" valign="middle">If specified, a label will be attached to the scale.</td>
</tr>
</table>
<em>Table
8.44:
Scale Object Options</em>
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="middle"><strong>Event</strong></td>
</tr>
<tr>
<td align="left" valign="middle">{gs, Scale, click, Data, [Value | _]}</td>
</tr>
</table>
<em>Table
8.45:
Scale Object Options</em>
<p>The following example prompts a user to specify an RGB-value for the background color of a window.</p>
<a name="gs_fig23"></a>
<img alt="IMAGE MISSING" src="images/ex11.gif"><br>
<em>Figure
8.16:
Scale Objects for Selecting RGB Values for a Window</em>
<div class="example"><pre>
-module(ex11).
-copyright('Copyright (c) 1991-97 Ericsson Telecom AB').
-vsn('$Revision: /main/release/3 $ ').
-export([start/0,init/0]).
start() ->
spawn(ex11,init,[]).
init() ->
I= gs:start(),
W= gs:window(I,[{title,"Color Demo"},
{width,300},{height,195}]),
B=gs:button(W,[{label,{image,"die_icon"}},{x,271},{y,166},
{width,30}]),
gs:config(B,[{bg,yellow},{fg,hotpink1},{data,quit}]),
gs:scale(W,[{text,"Red"},{y,0},{range,{0,255}},
{orient,horizontal},
{height,65},{data,red},{pos,42}]),
gs:scale(W,[{text,"Blue"},{y,65},{range,{0,255}},
{orient,horizontal},
{height,65},{data,blue},{pos,42}]),
gs:scale(W,[{text,"Green"},{y,130},{range,{0,255}},
{orient,horizontal},
{height,65},{data,green},{pos,42}]),
gs:config(W,{map,true}),
loop(W,0,0,0).
loop(W,R,G,B) ->
gs:config(W,{bg,{R,G,B}}),
receive
{gs,_,click,red,[New_R|_]} ->
loop(W,New_R,G,B);
{gs,_,click,green,[New_G|_]} ->
loop(W,R,New_G,B);
{gs,_,click,blue,[New_B|_]} ->
loop(W,R,G,New_B);
{gs,_,click,quit,_} ->
true;
{gs,W,destroy,_,_} ->
true
end.
</pre></div>
</div>
<div class="footer">
<hr>
<p>Copyright © 1997-2012 Ericsson AB. All Rights Reserved.</p>
</div>
</div>
</div></body>
</html>
distrib
>
Fedora
>
17
>
i386
>
media
>
updates
>
by-pkgid
>
675c8c8167236dfcf8d66da674f931e8
>
files
>
657
