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)
xdialog -l $dname root $chr(9) +ph 0 0 0 0

Fixed - Width - Weight = 0 (1) - ID = 9
xdialog -l $dname cell root $chr(9) +fvi 9 0 0 0

Pane - Vertical - Weight = 1 (2)
xdialog -l $dname cell root $chr(9) +pv 0 1 0 0

Fill - Weight = 1 (2 1) - ID = 10
xdialog -l $dname cell 2 $chr(9) +li 10 1 0 0

Fill - Weight = 2 (2 2) - ID = 11
xdialog -l $dname cell 2 $chr(9) +li 11 2 0

As always you end with
timer 1 0 xdialog -l $dname update

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.


Pane - Horizontal (root)
xdialog -l $dname root $chr(9) +ph 0 0 0 0
Fill - Weight = 1 (1)
xdialog -l $dname cell root $chr(9) +l 0 1 0
Pane - Vertical - Weight = 8 (2)
xdialog -l $dname cell root $chr(9) +pv 0 8 0
Fill - Weight = 1 (3)
xdialog -l $dname cell root $chr(9) +l 0 1 0
Fill - Weight = 1 (2 1)
xdialog -l $dname cell 2 $chr(9) +l 0 1 0
Fill - Weight = 8 (2 2)
xdialog -l $dname cell 2 $chr(9) +li 10 8 0
Fill - Weight = 1 (2 3)
xdialog -l $dname cell 2 $chr(9) +l 0 1 0
timer 1 0 xdialog -l $dname update

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
xdialog -c $dname 5 toolbar 0 0 200 20 list flat arrows bottom
xdid -l $dname 1 10 10 $chr(9) 2 panel 0 0 200 200
xdid -r $dname 1 10 10 $chr(9) 3 panel 0 0 200 200
;this creates a docked to it with 2 panels docked to it where top panel is 2 and bottom 3
;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

xdid -c $dname 2 6 window 0 0 180 200 @mamp
xdid -c $dname 2 8 pbar 200 0 200 14 smooth notheme
xdid -c $dname 2 11 text 200 0 10 14 notheme
xdid -c $dname 2 12 text 200 0 40 14 notheme
xdid -c $dname 2 9 toolbar 0 0 200 20 list flat arrows bottom
;this adds the controls to the top panel

xdid -c $dname 3 4 listview 0 0 200 200 report singlesel fullrow flatsb borderselect
;this adds the bottom panel's listview

xdialog -l $dname root $chr(9) +p 0 0 0 0
xdialog -l $dname cell root $chr(9) +li 1 1 0 0
;I want the divider with the 2 panels to be take 100% of the dialog minus the playlisttoolbar. this panel is vertical because i neither suplied a h or v.
xdialog -l $dname cell root $chr(9) +fvi 5 1 0 20
;2nd row heightfixed so the top row will size it down to the bottom
xdialog -l $dname space root $chr(9) + 0 0 0 -4
;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

xdid -l $dname 2 root $chr(9) +p 0 0 0 0
xdid -l $dname 2 cell root $chr(9) +li 6 1 0 0
;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.
xdid -l $dname 2 cell root $chr(9) +ph 0 0 0 0
;this creates a second row with a pane cell horizontally orientated
xdid -l $dname 2 cell 2 $chr(9) +fvi 8 1 0 0
;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
xdid -l $dname 2 cell 2 $chr(9) +fhvi 11 1 0 0
;I used a blank text to space out the total time a bit it doesnt resize at all
xdid -l $dname 2 cell 2 $chr(9) +fhvi 12 1 0 0
;total time text doesnt size at all
xdid -l $dname 2 cell root $chr(9) +fvi 9 1 0 0
;create the lowest row for the toolbar which doesnt size in height
xdid -l $dname 2 space root $chr(9) + 0 0 0 -4
;that damn toolbar residue again!

xdid -l $dname 3 root $chr(9) +p 0 0 0 0
;creates the root for the bottom panel on the listview
xdid -l $dname 3 cell root $chr(9) +li 4 1 0 0
;creates the first row and fills it with id 4 which is the listview
xdid -l $dname 3 space root $chr(9) + 0 -16 0 -16
;this hides the header dim and top and bottom arrow on the scroll of the listview

.timer 1 0 xdid -l $dname 2 update
.timer 1 0 xdid -l $dname 3 update
.timer 1 0 xdialog -l $dname update
;rests us to update the cla's! and done ! now my dialog fully resizes just the way i want it too

 

 

 

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 (Mpdreamz@gmail.com)