Pages: 1
| Posted: 10 May 2009 17:10 | |
|
Registered User |
Posts: 12 Join Date: May 2009 |
|
Groups are used to group together elements. This may be done for either or both of the following reasons.
1) To format them similarly 2) To control them in relationship to one another Similar formatting can be controlled with the following properties visible, enabled, alignChildren and orientation, while the spacing property controls the amount of space between all the elements in the group. While the visible and enabled properties are easily understood, it is the alignChildren and orientation properties that need some extra explaining. Starting with orientation, which controls whether the elements added to group are placed from top to bottom like a column or from left to right like a row. There is also a third option stack which will be discussed in a later post. By default a group places the elements in row orientation. A typical line in code would be Code:
myDlg.myGroup.orientation = "column"; //choices are column,row,stack Using alignChildren property will only make a difference when the preferred size of the group is larger the size needed to hold the elements of the group. For example if the preferred width is 800 and the group only needs 400 to fit your elements then the default alignment will place your elements to the left of group, this can be changed by using alignChildren and aligning all children to center, right or fill (which stretches elements to fill the empty space). Code:
myDlg.myGroup.alignChildren = ['center',' ']; //leave blank for default Similarly if the Height is set to a greater amount then needed for elements then alignChildren will control their position (default is center and could be changed to top,bottom,fill) Code:
myDlg.myGroup.alignChildren = ['','bottom']; //leave blank for default If you don't want to align all your elements then use the alignment property of that specific element to override the alignChildren property. |
|
| Posted: 12 May 2009 05:22 | |
|
Registered User |
Posts: 12 Join Date: May 2009 |
|
A panel is a group with 2 additional properties and 1 other difference.
It has a text property that is like a caption for all elements and a borderStyle property which defines a visible border around the panel area. The borderStyle property is etched by default and accepts the following following values black,grey,etched,raised and sunken. There is an important difference that the group element by default is column orientation, while the panel element is column orientation, meaning by default one element is above the next element. There is another common use for a panel, as a vertical seperator. Here is a code sample Code:
var rapidDlg = new Window('dialog',"<Replace Me>",undefined); buildWindow(); rapidDlg.show(); function buildWindow(){ rapidDlg.orientation = "row"; // Properties for rapidDlg.Group2 rapidDlg.Group2 = rapidDlg.add('group',undefined); // Properties for rapidDlg.Group2.Button5 rapidDlg.Group2.Button5 = rapidDlg.Group2.add('button',undefined,"<Replace Me>"); // Properties for rapidDlg.Panel1 rapidDlg.Panel1 = rapidDlg.add('panel',undefined,undefined); rapidDlg.Panel1.alignment = [' ','fill']; // Properties for rapidDlg.Group2 rapidDlg.Group2 = rapidDlg.add('group',undefined); rapidDlg.Group2.graphics.font = ScriptUI.newFont(rapidDlg.Group2.graphics.font.family,rapidDlg.Group2.graphics.font.style,12); // Properties for rapidDlg.Group2.Button1 rapidDlg.Group2.Button1 = rapidDlg.Group2.add('button',undefined,"<Replace Me>"); } Since there is no elements in panel it is neccesary to set alignment to fill so it fills from top to bottom of the parent container, otherwise it wouldn't take up space and wouldn't be visible. |
|
Pages: 1
