Jason McKesson avatar Jason McKesson committed f6d1ee6

Added grid column and row proportions.

Comments (0)

Files changed (4)

                     define how the windows they contain are arranged within the window.</para>
                 <para>There are several sizing and positioning scheme that LuaGUI supports, based on
                     wxWidget's sizers. The default is the box sizing scheme.</para>
-                <para>The box sizing scheme is controlled by the <literal>orient</literal>
+                <para>The box sizing scheme is controlled by the <literal>box.orient</literal>
                     attribute. This attribute defines the stacking direction of child windows of
                     this container. It can be <quote><literal>horizontal</literal></quote> or
                             <quote><literal>vertical</literal></quote>. If the orientation is
                     the order in which the windows appear in the XML file. If this attribute is not
                     present, then the default is vertical.</para>
                 <para>Another arrangement scheme is the grid arrangement scheme. This arrangement is
-                    active if either the <literal>numCols</literal> or <literal>numRows</literal>
-                    scheme is present. Both can be present. The way it works is that the container's
-                    children are arranged in a grid. The number of columns in the grid is set by the
-                        <literal>numCols</literal> attribute, and the number of rows is set by the
-                        <literal>numRows</literal> attribute. If one of these is not set, or is set
-                    to zero, then the container can have any number of that attribute.</para>
+                    active if either the <literal>grid.numCols</literal> or
+                        <literal>grid.numRows</literal> scheme is present. Both can be present. The
+                    way it works is that the container's children are arranged in a grid. The number
+                    of columns in the grid is set by the <literal>grid.numCols</literal> attribute,
+                    and the number of rows is set by the <literal>grid.numRows</literal> attribute.
+                    If one of these is not set, or is set to zero, then the container can have any
+                    number of that attribute.</para>
                 <para>For example, if you set the container to have 4 columns, and it has 7
                     children, then it will automatically have 2 rows. If you set the container to
                     have 2 rows, and it has 5 children, then it will have 3 columns.</para>
                 <para>The entries in the grid are always filled in row-major order. That is, if you
                     have a 2x3 grid, the second child will be in the first row, second column. The
                     fourth child will be in the second row, first column. And so on.</para>
-                <para>A gap can be added between the columns and rows. The <literal>hGap</literal>
-                    attribute specifies the number of pixels between columns, while the
-                        <literal>vGap</literal> attribute specifies the number of pixels between
-                    rows.</para>
+                <para>A gap can be added between the columns and rows. The
+                        <literal>grid.hGap</literal> attribute specifies the number of pixels
+                    between columns, while the <literal>grid.vGap</literal> attribute specifies the
+                    number of pixels between rows.</para>
                 <para>The area given to each control can be portioned in one of two ways. The
                     default way is to let each column and row be independent of each other. The
                     width of any column is the largest width of any item in the column. And the
                     height of a row is the largest height of any item in the row.</para>
                 <para>The other way is specified by setting the attribute
-                        <literal>fixedGrid</literal> to <quote><literal>true</literal></quote>. When
-                    this happens, the width of any column becomes the largest width of
+                        <literal>grid.fixed</literal> to <quote><literal>true</literal></quote>.
+                    When this happens, the width of any column becomes the largest width of
                         <emphasis>any</emphasis> item in the grid, regardless of what column it is.
                     The same goes for rows. This means that each control gets as much space as the
                     largest control, and the space for every cell in the grid is the same.</para>
+                <para>The <literal>proportion</literal> attribute on children of a container is used
+                    in box layout to determine how much space to give each control. This does not
+                    work in grid layout. When using non-fixed grid layout, it is possible to specify
+                    something similar using the <literal>grid.colProportion</literal> and
+                        <literal>grid.rowProportion</literal> attributes. This allows the user to
+                    specify the proportions for particular columns and rows.</para>
+                <para>The way this works is as follows. The width of a column is determined by the
+                    largest width item in that column. This is the normal way that sizing works.
+                    However, if the column's proportion is set, this changes. The width of that
+                    column is proportionate to the width of other columns that have a proportion
+                    value set. So if column 0 has a proportion value of 2 and column 1 has a
+                    proportion value of 1, then column 0 will be 2x the width of column 1. This
+                    works for rows and height as well.</para>
+                <para>This works almost exactly like the <literal>proportion</literal> attribute.
+                    There is one difference however: the treatment of 0. In grid layout, a
+                    proportion of 0 means to give that column or row no actual room in layout.
+                    Unless all columns have a proportion of 0, which then works like giving all
+                    columns or rows the same proportion value: each row or column will be the same
+                    size.</para>
+                <para>This only serves to increase the available area provided by the grid to a
+                    control. To actually have a control take advantage of the extra space, you must
+                    use the usual layout attributes on that control, as specified below (alignment,
+                    expand, etc).</para>
+                <para>The contents of the attributes are a bit complicated, due to the need to
+                    support the ability to set multiple column or row proportions. The attributes
+                    contain a sequence of <quote>column/row number = proportion</quote> values.
+                    These values can be separated by spaces, commas, or whatever you want except for
+                    actual numbers. There can be no spaces or non-number characters between the
+                    column/row number, the proportion value, and the equals sign. So the following
+                    is correct: <quote>1=2 0=3,4=2 dhosaha</quote>. This is not correct: <quote>1
+                        =2</quote>.</para>
+                <para>You can specify the column or row proportions in any order.</para>
                 <para>You cannot use box and grid sizing attributes on the same element.</para>
             </section>
             <section>
                 <para>A box is defined by the <classname>box</classname> element. This is a fairly
                     simple container; it draws a box around its contents, visually separating them
                     from the windows around it.</para>
+                <note>
+                    <para>Currently, the box container does not have the expected layout attributes.
+                        It only can have box-style layout, and this is specified by the
+                            <literal>orient</literal> attributes, rather than the
+                            <literal>box.orient</literal> attribute. This is done to emphasize the
+                        fact that boxes are special.</para>
+                </note>
                 <glosslist>
                     <title>Box Attributes</title>
                     <glossentry>
                                 Required.</para>
                         </glossdef>
                     </glossentry>
+                    <glossentry>
+                        <glossterm>orient</glossterm>
+                        <glossdef>
+                            <para>Defines the stacking direction of the radio buttons. If this is
+                                        <quote><literal>horizontal</literal>,</quote> then the radio
+                                buttons are stacked left-to-right, and if this is
+                                        <quote><literal>vertical</literal>,</quote> they are stacked
+                                top-to-bottom.</para>
+                            <para>Optional. Defaults to
+                                <quote><literal>vertical</literal>.</quote></para>
+                        </glossdef>
+                    </glossentry>
                 </glosslist>
             </section>
             <section>
                                 top-to-bottom.</para>
                             <para>Optional. Defaults to
                                 <quote><literal>vertical</literal>.</quote></para>
+                            <note>
+                                <para>This attribute does not mean the same thing as
+                                        <literal>box.orient</literal>, though it does have similar
+                                    effects.</para>
+                            </note>
                         </glossdef>
                     </glossentry>
                     <glossentry>
                 (lg.gridsizer.numCols.attribute, lg.gridsizer.numRows.attribute)),
             lg.gridsizer.hGap.attribute?,
             lg.gridsizer.vGap.attribute?,
-            lg.gridsizer.fixedGrid.attribute?)  |
-        (lg.orient.attribute?)
+            lg.gridsizer.fixedGrid.attribute?,
+            lg.gridsizer.colProportion.attribute?,
+            lg.gridsizer.rowProportion.attribute?)  |
+        (lg.box.orient.attribute?)
     
     lg.aui.attlist =
         lg.aui.title.attribute?,
         [ a:defaultValue = "vertical" ]
         attribute orient { "horizontal" | "vertical" }
         
+    lg.box.orient.attribute =
+        lg.orient.attribute |
+        (
+        ## The box-layout stacking orientation for children of this node.
+        [ a:defaultValue = "vertical" ]
+        attribute box.orient { "horizontal" | "vertical" })
+       
     lg.gridsizer.numCols.attribute =
         ## This represents the number of columns in a grid sizer. The presents of this
         ## attribute means that the sizer used for child windows will be a grid sizer
         ## with this many columns.
-        attribute numCols { xsd:nonNegativeInteger }
+        attribute grid.numCols { xsd:nonNegativeInteger }
         
     lg.gridsizer.numRows.attribute =
         ## The number of rows in a grid sizer.
         [ a:defaultValue = "0" ]
-        attribute numRows { xsd:nonNegativeInteger }
+        attribute grid.numRows { xsd:nonNegativeInteger }
         
     lg.gridsizer.hGap.attribute =
         ## The gap, in pixels, between two adjacent columns of a grid sizer.
         [ a:defaultValue = "0" ]
-        attribute hGap { xsd:nonNegativeInteger }
+        attribute grid.hGap { xsd:nonNegativeInteger }
         
     lg.gridsizer.vGap.attribute =
         ## The gap, in pixels, between two adjacent rows of a grid sizzer.
         [ a:defaultValue = "0" ]
-        attribute vGap { xsd:nonNegativeInteger }
+        attribute grid.vGap { xsd:nonNegativeInteger }
         
     lg.gridsizer.fixedGrid.attribute =
         ## If true, then the grid sizer's entries will be of a fixed size. All grid items will
         ## have the same width and height.
         [ a:defaultValue = "false"]
-        attribute fixedGrid { lg.data.boolean }
+        attribute grid.fixed { lg.data.boolean }
+        
+    lg.gridsizer.colProportion.attribute =
+        attribute grid.colProportion { text }
 
+    lg.gridsizer.rowProportion.attribute =
+        attribute grid.rowProportion { text }
         
     lg.id.attribute =
         ## The identifier of the control. This identifier allows the user to find a particular

Testing/LuaGuiTest.xml

                 </menu>
             </menu>
         </menubar>
-        <panel title="Left" width="175" direction="left" orient="vertical" >
-            <collpane orient="vertical" text="somethingCute" collapsed="true">
+        <panel title="Left" width="175" direction="left" box.orient="vertical" >
+            <collpane box.orient="vertical" text="somethingCute" collapsed="true">
                 <button text="Page1a" align="left" tip="Page 1 Tooltip"/>
                 <button text="Page1b" align="left" tip="Pushes the second page."/>
             </collpane>
                     <editbox readonly="true" default="bisco" tip="This is a tooltip"/>
                     <editbox height="100" multiline="true"/>
                     <spinner min="-50" max="50" default="0" />
+                    <sizer grid.numCols="2" grid.hGap="3" grid.colProportion="1=1" expand="true">
+                        <static text="Label" valign="center"/>
+                        <editbox default="Some special text." expand="true"/>
+                        <static text="Longer Label" valign="center"/>
+                        <editbox default="Different set of text." expand="true"/>
+                    </sizer>
                     <slider min="-5" max="5" default="0" onchange="local value=...; print(value)"/>
-                    <listbox id="the.List.Box" height="150" onselchange="local event = ...; print(event:GetString())" />
+                    <listbox id="the.List.Box" height="150" expand="true" onselchange="local event = ...; print(event:GetString())" />
                     <dropdown id="theDropDown"/>
                 </tab>
                 <tab text="Foo">
                 </tab>
             </tabs>
         </panel>
-        <panel title="Right" orient="vertical" width="340" expand="true" direction="left" maximizebutton="true">
+        <panel title="Right" box.orient="vertical" width="340" expand="true" direction="right" maximizebutton="true">
             <box border="0" text="Game" expand="true" orient="horizontal">
                 <button proportion="1" text="Left" expand="true"/>
                 <button proportion="1" text="Right" expand="true"/>
             </box>
         </panel>
         <toolbar expand="true" gripper="true" proportion="1" height="100" direction="left" row="0">
-            <sizer orient="vertical" expand="true" border="3" width="100">
+            <sizer box.orient="vertical" expand="true" border="3" width="100">
                 <checkbox border="2" text="Test Checkbox" oncheck='print("Checked!")' onuncheck='print("Unchecked!")'/>
                 <checkbox border="2" text="Look" default="true"/>
                 <checkbox border="2" text="See" default="true"/>
             </sizer>
         </toolbar>
-        <toolbar expand="true" gripper="false" proportion="1" orient="vertical" height="100" direction="top" row="1">
+        <toolbar expand="true" gripper="false" proportion="1" box.orient="vertical" height="100" direction="top" row="1">
             <checkbox border="2" text="Param 1" default="true" align="center" proportion="1"/>
             <checkbox border="2" text="Param 2" default="true"/>
             <checkbox border="2" text="Param 3" default="true"/>
             <checkbox border="2" text="See" default="true"/>
         </toolbar>
     </frame>
-    <dialog id="dialog" title="Test Dialog" orient="vertical">
-        <sizer orient="horizontal">
+    <dialog id="dialog" title="Test Dialog" box.orient="vertical">
+        <sizer box.orient="horizontal">
             <box text="Box1" border="5">
                 <button text="Button A"/>
                 <button text="Button B"/>
 	return size;
 end
 
-local function GetBoxSizerOrientation(currNode)
+local function GetOrientation(currNode)
 	local orientation = currNode:GetPropVal("orient", "vertical");
 	if(orientation == "horizontal") then
 		return wx.wxHORIZONTAL;
 	return orientation;
 end
 
+local function GetBoxSizerOrientation(currNode)
+	local bHasProp, orientation = currNode:GetPropVal("box.orient");
+	if(bHasProp) then
+		if(orientation == "horizontal") then
+			return wx.wxHORIZONTAL;
+		else
+			if(orientation == "vertical") then
+				return wx.wxVERTICAL;
+			else
+				assert(0, "box.orient attribute must be 'horizontal' or 'vertical'.");
+			end
+		end
+	else
+		orientation = currNode:GetPropVal("orient", "vertical");
+		if(orientation == "horizontal") then
+			return wx.wxHORIZONTAL;
+		else
+			if(orientation == "vertical") then
+				return wx.wxVERTICAL;
+			else
+				assert(0, "orient attribute must be 'horizontal' or 'vertical'.");
+			end
+		end
+	end
+	
+	return nil;
+end
+
+local function CalcGridProportions(strGridProport)
+	local ret = {};
+	print("here!");
+	for colRow, proportion in strGridProport:gmatch("(%d+)=(%d+)") do
+		print("during!");
+		ret[tonumber(colRow)] = tonumber(proportion);
+	end
+	print("after!");
+	return ret;
+end
+
 local function CreateStandardSizer(currNode)
-	if(currNode:HasProp("numCols") or currNode:HasProp("numRows")) then
-		local bFixed = GetNodeBoolProp(currNode, "fixedGrid", false);
-		local numColumns = tonumber(currNode:GetPropVal("numCols", "0"));
-		local numRows = tonumber(currNode:GetPropVal("numRows", "0"));
-		local hGap = tonumber(currNode:GetPropVal("hGap", "0"));
-		local vGap = tonumber(currNode:GetPropVal("vGap", "0"));
+	if(currNode:HasProp("grid.numCols") or currNode:HasProp("grid.numRows")) then
+		local bFixed = GetNodeBoolProp(currNode, "grid.fixed", false);
+		local numColumns = tonumber(currNode:GetPropVal("grid.numCols", "0"));
+		local numRows = tonumber(currNode:GetPropVal("grid.numRows", "0"));
+		local hGap = tonumber(currNode:GetPropVal("grid.hGap", "0"));
+		local vGap = tonumber(currNode:GetPropVal("grid.vGap", "0"));
 		
 		if(bFixed) then
 			return wx.wxGridSizer(numRows, numColumns, vGap, hGap);
 		else
-			return wx.wxFlexGridSizer(numRows, numColumns, vGap, hGap);
+			local gridSizer = wx.wxFlexGridSizer(numRows, numColumns, vGap, hGap);
+			
+			local proportions = currNode:GetPropVal("grid.colProportion", "");
+			
+			proportions = CalcGridProportions(proportions);
+			for column, proportion in pairs(proportions) do
+				gridSizer:AddGrowableCol(column, proportion);
+			end
+			
+			proportions = currNode:GetPropVal("grid.rowProportion", "");
+			
+			proportions = CalcGridProportions(proportions);
+			for row, proportion in pairs(proportions) do
+				gridSizer:AddGrowableRow(row, proportion);
+			end
+			
+			return gridSizer;
 		end
 	else
 		return wx.wxBoxSizer(GetBoxSizerOrientation(currNode));
 elementJumpTable.panel = elementJumpTable["toolbar"];
 
 function elementJumpTable.box(parWnd, sizer, currNode, notebook, auiNotebook)
-	local orient = GetBoxSizerOrientation(currNode);
+	local orient = GetOrientation(currNode);
 	local size = GetNodeSize(currNode);
 	local staticBox = wx.wxStaticBox(parWnd, wx.wxID_ANY,
 		currNode:GetPropVal("text", "Box With No Name"), wx.wxDefaultPosition, size);
 
 
 function elementJumpTable.radiobuttons(parWnd, sizer, currNode, notebook, auiNotebook)
-	local orientation = GetBoxSizerOrientation(currNode);
+	local orientation = GetOrientation(currNode);
 	
 	if(orientation == wx.wxHORIZONTAL) then
 		orientation = wx.wxRA_SPECIFY_ROWS
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.