Cell Layout Algorithm Tutorial — File Browser
CellLayoutAlgorithmTutorialv1.0 / CellLayoutAlgorithmTutorialv1.0 / CLA.htm
CLA.htm — 15.25 KB — Download this file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cell Layout Algorithm Tutorial by Mpdreamz</title>
<style type="text/css">
<!--
body,td,th {
font-family: Tahoma;
font-size: 9pt;
}
.style1 {
font-size: 12pt;
font-weight: bold;
color: #000066;
}
.style2 {
color: #FF9900;
font-weight: bold;
}
.style3 {
color: #FF0000;
font-weight: bold;
}
.style4 {
color: #0080FF;
font-weight: bold;
}
.style5 {
color: #00FF00;
font-weight: bold;
}
-->
</style></head>
<body>
<table width="96%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><p><span class="style1">Introduction</span><br />
<br />
So you've checked out the cool new controls , new events and all the information at hand from these controls and you think DCX just couldn't be any better.<br />
<strong>Your wrong</strong> theres one feature in DCX that is extremely useful and once mastered pixel alligning & $calc resizing is a thing from the past! The DCX help file describes CLA as: "The Cell Layout Algorithm is a dynamic autosizing algorithm aimed at making child controls of dialogs or container windows fully resizeable with a set of predefined rules. The rules are encapsulated in a container-like objects called cells. People with knowledge of HTML table structures will recognize the type of operations at stake." Thats quite a mouthful dont you reckon ? <strong>in other words:</strong><br />
Cell Layout Algorithm (CLA in short) is the technique developed by ClickHere to resize/aling controls using DCX.dll<br />
CLA is all about creating cells much like you would create a <table> in html to store different cells to position content correctly.<br />
CLA is easiest explained if you already know a little HTML.<br />
<table> = The root command. This specifies the region where all the cells will be hosted<br />
<tr> = A pane cell this is a cell that can host other cells<br />
<td> = A fixed or fill cell that is linked to a control</p>
<p>Even if you dont want a resizeable dialog learning CLA is a must because if you know cla you dont have to be bothered with filling in the correct x y w h for each control. You just create controls on the dialogs and CLA them into position making aligning controls a piece of cake!</p>
<p class="style1">understanding the command</p>
<p><span class="style2">/xdialog -l dialog [COMMAND] [PATH] [TAB] [+FLAGS] [ID] [WEIGHT] [W] [H] </span>(used for the main dialogs CLA)<br />
<span class="style2">/xdid -l dialog [ID] [COMMAND] [PATH] [TAB] [+FLAGS] [ID] [WEIGHT] [W] [H]</span> (used for any container control on the dialog, for instance: a panel on a dialog needs its own CLA. The panel itself follows the dialog's CLA)</p>
<p><span class="style2">COMMAND</span><br />
<span class="style3">root</span> Sets the root cell element. This is the first command that should be given to CLA ie xdialog -l $dname root $chr(9) +p 0 0 0 0<br />
<span class="style3">cell</span> Adds a cell element as a child of another cell element. This is where cell types play a role as shown in the flags section.<br />
<span class="style3">space</span> Sets the space padding around a cell element. The [ID] [WEIGHT] [W] [H] will turn into [Left padding] [Top padding] [Right Padding] [Bottom Padding]. Padding values are in pixels<br />
<span class="style3">update</span> apply a set of CLA rules to the dialog ie: .timer 1 0 xdialog -l $dname update</p>
<p><span class="style2">PATH</span><br />
PATH stands for the route leading back to the root of the CLA, if you specify root as path, the cell will be created on the root and in order of adding those cells will be given a number, The first cell added on the root is 1 then second is 2 and so on and so on.if you specify 1 it will mean the cell will be created in the first cell. note how i didnt use root 1 as PATH , 2 1 3 means the the 3rd cell in the 1st cell of the 2nd cell on the root.<br />
<span class="style2">FLAGS</span></p>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#E6E6E6">
<td width="5%"><div align="center"><strong>Type</strong></div></td>
<td width="5%"><div align="center"><strong>Child</strong></div></td>
<td width="5%"><div align="center"><strong>Control</strong></div></td>
<td width="15%"><div align="center"><strong>Flags</strong></div></td>
<td width="70%"><div align="center"><strong>Description</strong></div></td>
</tr>
<tr valign="top">
<td width="5%"><div align="center" class="style3">Fixed</div></td>
<td width="5%"><div align="center">No</div></td>
<td width="5%"><div align="center">Yes</div></td>
<td><div align="center">+f using v or h you can verticaly and/or horizonatly fix a controls size (+fv +fh +fhv) </div></td>
<td><div align="center">This cell has a fixed Width or Height or Both. It can host a child control that will be expanded in the direction where it is not fixed to fill the available length. It can't hold child cell structures. If you fill in 0 for Height or Width the width of the control as supplied by xdialog -c is taken</div></td>
</tr>
<tr valign="top">
<td width="5%"><div align="center" class="style3">Pane</div></td>
<td width="5%"><div align="center">Yes</div></td>
<td width="5%"><div align="center">No</div></td>
<td><div align="center">+p (h makes hosted cells apear next to eachother (horizontal motion),v on top of eachother (vertical motion) if none is given v is assumed) </div></td>
<td><div align="center">This cell control hosts a collection of stacked horizontal or vertical cell structures. They can't host child controls as these must be hosted by their hosted cell structures. It's child cell structures are added with an associated weight (can be zero) where the it's child cell structures will receive space determined by the total weight proportional factor. For example, if a two cell structures are added with a weight of 1 each, then each will receive 50% of the available space.</div></td>
</tr>
<tr valign="top">
<td width="5%"><div align="center" class="style3">Fill</div></td>
<td width="5%"><div align="center">No</div></td>
<td width="5%"><div align="center">Yes</div></td>
<td><div align="center">+l</div></td>
<td><div align="center">This cell is expanded in all directions to fill the available space. It can host a child control. It can't hold child cell structures.</div></td>
</tr>
<tr valign="top">
<td colspan="5"><div align="center">if you add +i as flag in any combination that supports Control you can specify an [ID] of a control that will be "docked" in that cell. ie +fvhi which will create a Control that wont be resized when the dialog resizes.<br />
The root control is always set to the maximum client area of the dialog minus it's padding values. There can be only one root per dialog or Container control</div></td>
</tr>
</table>
<p> <span class="style2">ID</span><br />
As mentioned when you use +i you can specify the id of the control the cell should host, if you dont want any control to be hosted in the cell use 0<br />
<span class="style2">WIDTH</span><br />
width can be any numerical value you want (except negative and decimals) the combined value of the cells in root or a pane defines 100%<br />
so if you have 2 cells one is 2 the other is 8 in width the first will be 2/10th of the dialogs width the other 8/10th<br />
or cell 1 = 4 , cell 2 = 7 and cell 3 = 5 then 1 = 4/16th , cell 2 = 7/16th and cell 3 = 5/16th<br />
</p>
<p><span class="style1">Some Examples</span><br />
</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="630"><img src="images/layout.png" width="630" height="402" /></td>
<td valign="top"><p><span class="style3">Pane - Horizontal (root)</span><br />
xdialog -l $dname root $chr(9) +ph 0 0 0 0</p>
<p><span class="style4">Fixed - Width - Weight = 0 (1) - ID = 9</span><br />
xdialog -l $dname cell root $chr(9) +fvi 9 0 0 0</p>
<p><span class="style4">Pane - Vertical - Weight = 1 (2)</span><br />
xdialog -l $dname cell root $chr(9) +pv 0 1 0 0</p>
<p><span class="style5">Fill - Weight = 1 (2 1) - ID = 10</span><br />
xdialog -l $dname cell 2 $chr(9) +li 10 1 0 0</p>
<p><span class="style5">Fill - Weight = 2 (2 2) - ID = 11</span><br />
xdialog -l $dname cell 2 $chr(9) +li 11 2 0</p>
<p><strong>As always you end with</strong><br />
timer 1 0 xdialog -l $dname update</p>
<p>To apply the theme and thats it !.</p>
<p>The top green part of the dialog is always 1 third of the dialogs height in height wheres as the lower part is 2 third. The left blue part will never grow in width but is always 100% in height.</p>
<p></p></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="441"><img src="images/layout2.png" width="441" height="377" /></td>
<td><p><br />
<span class="style4">Pane - Horizontal (root)</span><br />
xdialog -l $dname root $chr(9) +ph 0 0 0 0<br />
<span class="style3">Fill - Weight = 1 (1)</span><br />
xdialog -l $dname cell root $chr(9) +l 0 1 0<br />
<span class="style3">Pane - Vertical - Weight = 8 (2)</span><br />
xdialog -l $dname cell root $chr(9) +pv 0 8 0<br />
<span class="style3">Fill - Weight = 1 (3)</span><br />
xdialog -l $dname cell root $chr(9) +l 0 1 0<br />
<span class="style5">Fill - Weight = 1 (2 1)</span><br />
xdialog -l $dname cell 2 $chr(9) +l 0 1 0<br />
<span class="style5">Fill - Weight = 8 (2 2)</span><br />
xdialog -l $dname cell 2 $chr(9) +li 10 8 0<br />
<span class="style5">Fill - Weight = 1 (2 3)</span><br />
xdialog -l $dname cell 2 $chr(9) +l 0 1 0<br />
timer 1 0 xdialog -l $dname update</p>
<p>This layout has the control always centered in the window. It also is always exactly 80% in width and height (8 / 10).</p></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="577"><img src="images/layout3.PNG" width="577" height="450" /></td>
<td><p><span class="style2">Now for a more complex example im going to use the CLA for my mediaplayer:</span><br />
</p>
<p>xdialog -c $dname 1 divider 0 0 200 400<br />
xdialog -c $dname 5 toolbar 0 0 200 20 list flat arrows bottom<br />
xdid -l $dname 1 10 10 $chr(9) 2 panel 0 0 200 200<br />
xdid -r $dname 1 10 10 $chr(9) 3 panel 0 0 200 200<br />
<strong>;this creates a docked to it with 2 panels docked to it where top panel is 2 and bottom 3</strong><br />
<strong>;reason why i add the toolbar here is because i want to hide part of the listview on the bottom part which requires the toolbar to go over it</strong></p>
<p>xdid -c $dname 2 6 window 0 0 180 200 @mamp<br />
xdid -c $dname 2 8 pbar 200 0 200 14 smooth notheme<br />
xdid -c $dname 2 11 text 200 0 10 14 notheme<br />
xdid -c $dname 2 12 text 200 0 40 14 notheme<br />
xdid -c $dname 2 9 toolbar 0 0 200 20 list flat arrows bottom<br />
<strong>;this adds the controls to the top panel</strong></p>
<p>xdid -c $dname 3 4 listview 0 0 200 200 report singlesel fullrow flatsb borderselect<br />
<strong>;this adds the bottom panel's listview</strong></p>
<p>xdialog -l $dname root $chr(9) +p 0 0 0 0<br />
xdialog -l $dname cell root $chr(9) +li 1 1 0 0<br />
<strong>;I want the divider with the 2 panels to be take 100% of the dialog minus the playlisttoolbar. </strong><strong>this panel is vertical because i neither suplied a h or v. </strong><br />
xdialog -l $dname cell root $chr(9) +fvi 5 1 0 20<br />
;2nd row heightfixed so the top row will size it down to the bottom<br />
xdialog -l $dname space root $chr(9) + 0 0 0 -4<br />
<strong>;this removes the bottom 4 pixels of the panel as this is residue of the toolbar control i dont want to see and cant be sized smaller</strong></p>
<p>xdid -l $dname 2 root $chr(9) +p 0 0 0 0<br />
xdid -l $dname 2 cell root $chr(9) +li 6 1 0 0<br />
<strong>;this creates the fill for the visualisation screen i use a weight value for 1 because i know i dont want the controls below it to resize.</strong><br />
xdid -l $dname 2 cell root $chr(9) +ph 0 0 0 0<br />
<strong>;this creates a second row with a pane cell horizontally orientated</strong><br />
xdid -l $dname 2 cell 2 $chr(9) +fvi 8 1 0 0<br />
<strong>;this adds the seeker it cant size in height i also gave this a weight value of 1 because i already know to total time doesnt size at all so it will resize in width as much as it can</strong><br />
xdid -l $dname 2 cell 2 $chr(9) +fhvi 11 1 0 0<br />
<strong>;I used a blank text to space out the total time a bit it doesnt resize at all</strong><br />
xdid -l $dname 2 cell 2 $chr(9) +fhvi 12 1 0 0<br />
<strong>;total time text doesnt size at all</strong><br />
xdid -l $dname 2 cell root $chr(9) +fvi 9 1 0 0<br />
<strong>;create the lowest row for the toolbar which doesnt size in height</strong><br />
xdid -l $dname 2 space root $chr(9) + 0 0 0 -4<br />
<strong>;that damn toolbar residue again!</strong></p>
<p>xdid -l $dname 3 root $chr(9) +p 0 0 0 0<br />
<strong>;creates the root for the bottom panel on the listview</strong><br />
xdid -l $dname 3 cell root $chr(9) +li 4 1 0 0<br />
;creates the first row and fills it with id 4 which is the listview<br />
xdid -l $dname 3 space root $chr(9) + 0 -16 0 -16<br />
<strong>;this hides the header dim and top and bottom arrow on the scroll of the listview</strong></p>
<p>.timer 1 0 xdid -l $dname 2 update<br />
.timer 1 0 xdid -l $dname 3 update<br />
.timer 1 0 xdialog -l $dname update<br />
<strong>;rests us to update the cla's! and done ! now my dialog fully resizes just the way i want it too</strong><br />
</p></td>
</tr>
</table> <p> </p>
<p> </p>
<p> </p>
<p> </p>
<p class="style1">Conclusion</p>
<p>DCX can be quite a hazard to learn at first as its alot of information to keep in mind, but once you get the hang off it and you understand its ( oddly enough) simplicity you'll learn to love it.<br />
I hope this tutorial gave you some more insights on how to use CLA and i'd love to see future addons using this powerful feauture of DCX. </p>
<p>Lets make some 2006 worthy GUI's!!<br />
Made by: Mpdreamz (Mpdreamz@gmail.com) </p>
<p></p></td>
</tr>
</table>
</body>
</html>