Introduction
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.
Your wrong 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 ? in other words:
Cell Layout Algorithm (CLA in short) is the technique developed by ClickHere to resize/aling controls using DCX.dll
CLA is all about creating cells much like you would create a <table> in html to store different cells to position content correctly.
CLA is easiest explained if you already know a little HTML.
<table> = The root command. This specifies the region where all the cells will be hosted
<tr> = A pane cell this is a cell that can host other cells
<td> = A fixed or fill cell that is linked to a control
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!
understanding the command
/xdialog -l dialog [COMMAND] [PATH] [TAB] [+FLAGS] [ID] [WEIGHT] [W] [H] (used for the main dialogs CLA)
/xdid -l dialog [ID] [COMMAND] [PATH] [TAB] [+FLAGS] [ID] [WEIGHT] [W] [H] (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)
COMMAND
root 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
cell 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.
space 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
update apply a set of CLA rules to the dialog ie: .timer 1 0 xdialog -l $dname update
PATH
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.
FLAGS
Type |
Child |
Control |
Flags |
Description |
Fixed |
No |
Yes |
+f using v or h you can verticaly and/or horizonatly fix a controls size (+fv +fh +fhv) |
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 |
Pane |
Yes |
No |
+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) |
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. |
Fill |
No |
Yes |
+l |
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. |
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. 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 |
||||
ID
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
WIDTH
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%
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
or cell 1 = 4 , cell 2 = 7 and cell 3 = 5 then 1 = 4/16th , cell 2 = 7/16th and cell 3 = 5/16th
Some Examples
 |
Pane - Horizontal (root) Fixed - Width - Weight = 0 (1) - ID = 9 Pane - Vertical - Weight = 1 (2) Fill - Weight = 1 (2 1) - ID = 10 Fill - Weight = 2 (2 2) - ID = 11 As always you end with To apply the theme and thats it !. 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. |
 |
This layout has the control always centered in the window. It also is always exactly 80% in width and height (8 / 10). |
 |
Now for a more complex example im going to use the CLA for my mediaplayer: xdialog -c $dname 1 divider 0 0 200 400 xdid -c $dname 2 6 window 0 0 180 200 @mamp xdid -c $dname 3 4 listview 0 0 200 200 report singlesel fullrow flatsb borderselect xdialog -l $dname root $chr(9) +p 0 0 0 0 xdid -l $dname 2 root $chr(9) +p 0 0 0 0 xdid -l $dname 3 root $chr(9) +p 0 0 0 0 .timer 1 0 xdid -l $dname 2 update |
Conclusion
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.
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.
Lets make some 2006 worthy GUI's!!
Made by: Mpdreamz ([email protected])