<!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 -- The Packer</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="loadscrollpos" title="The Packer" expanded="true">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="no" title="Built-In Objects" expanded="false">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>7 The Packer</h1>
<h3><a name="id66217">7.1
The Packer</a></h3>
<p>This section describes the geometry manager in GS.</p>
<p>When the user resizes a window, the application normally has to resize and move the graphical objects in the window to fit its new size. This can be handled by a so called <strong>packer</strong> or <strong>geometry manager</strong>. In GS, the packer functionality is a property of the <span class="code">frame</span> object. A frame with the packer property may control the size and position of its children.</p>
<p>A packer frame organises its children according to a grid pattern of rows and columns. Each row or column has a stretching property associated to it. Some columns may expand more than others and some may have a fixed size. The grid pattern is in itself invisible, but the objects contained by it snap to fit the grid.</p>
<p>The packer controlled by the following options:</p>
<p>Frame options:<br><span class="code">{packer_x,Packlist}</span> where <span class="code">Packlist</span> is list() of
<span class="code">PackOption</span>, and<br><span class="code">{packer_y,Packlist}</span> where <span class="code">Packlist</span> is list() of
<span class="code">PackOption</span>.</p>
<p><span class="code">PackOption</span> is:<br><span class="code">{stretch, Weight}</span> where <span class="code">Weight</span> is integer() > 0, or<br><span class="code">{stretch, Weight, MinPixelSize, or}</span><br><span class="code">{stretch, Weight, MinPixelSize, MaxPixelSize}, or</span><br><span class="code">{fixed, PixelSize}</span></p>
<p>A <span class="code">Weight</span> is a relative number that specifies how much of the total space of the frame a row or column will get. If the frame has three columns with the weights 2, 1, 3 it tells the geometry manager that the first column should have 2/6, the second 1/6 and the third 3/6 of the space.</p>
<p>Note that giving a minimum or maximum width of one or more columns will change the relation and the way the space is divided.</p>
<p>Then the objects contained by the frame use the following options to position themselves in the grid:<br><span class="code">{pack_x,Column}</span> where <span class="code">Column</span> is integer(), or<br><span class="code">{pack_x,{StartColumn,EndColumn}}</span></p>
<p>and<br><span class="code">{pack_y,row}</span> where <span class="code">row</span> is integer(), or<br><span class="code">{pack_y,{Startrow,Endrow}}</span></p>
<p>or, the the following option is a convenient shorthand:<br><span class="code">{pack_xy,{Column,row}}</span></p>
<p>Consider the following example.</p>
<div class="example"><pre>
-module(ex17).
-copyright('Copyright (c) 1991-97 Ericsson Telecom AB').
-vsn('$Revision: /main/release/1 $ ').
-export([start/0,init/0]).
start() -> spawn(ex17, init, []).
init() ->
WH = [{width,200},{height,300}],
Win = gs:window(gs:start(),[{map,true},{configure,true},
{title,"Packer Demo"}|WH]),
gs:frame(packer,Win,[{packer_x,[{stretch,1,50},{stretch,2,50},
{stretch,1,50}]},
{packer_y,[{fixed,30},{stretch,1}]}]),
gs:button(packer,[{label,{text,"left"}},{pack_xy,{1,1}}]),
gs:button(packer,[{label,{text,"middle"}},{pack_xy,{2,1}}]),
gs:button(packer,[{label,{text,"right"}},{pack_xy,{3,1}}]),
gs:editor(packer,[{pack_xy,{{1,3},2}},{vscroll,true},{hscroll,true}]),
gs:config(packer,WH), % refresh to initial size
loop().
loop() ->
receive
{gs,_Id,destroy,_Data,_Arg} -> bye;
{gs,_Id,configure,_Data,[W,H|_]} ->
gs:config(packer,[{width,W},{height,H}]), % repack
loop();
Other ->
io:format("loop got: ~p~n",[Other]),
loop()
end.
</pre></div> <p>It defines a frame with three columns where the second should be twice as wide as the other but no column should be smaller than 50 pixels wide. The frame has two rows where the first has a fixed height of 30 pixels and the last row is totally flexible. Three buttons are placed next to each other on the first row, and below them an editor. The editor covers all three columns.</p>
<a name="pic:packer1"></a>
<img alt="IMAGE MISSING" src="images/packer1.gif"><br>
<em>Figure
7.1:
Frame with three columns</em>
<p>The picture below illustrates what happens when the window is resized.</p>
<a name="pic:packer2"></a>
<img alt="IMAGE MISSING" src="images/packer2.gif"><br>
<em>Figure
7.2:
Resized Frame</em>
<p>To repack the objects, the size of the packer frame has to be set explicitly. This is done by using the height and width options as usual. Since the packer frame controls the size of its children, using the standard x, y, width, height options, packer frames may be nested recursively.</p>
<p>The packer is very useful since it simplifies the programming. The programmer will not have to spend time fine tuning x, y, width, height of each object, since these options are handled by the frame.</p>
</div>
<div class="footer">
<hr>
<p>Copyright © 1997-2012 Ericsson AB. All Rights Reserved.</p>
</div>
</div>
</div></body>
</html>
