LayoutBuilder
The LayoutBuilder class implements an easy way to build a layout, using a gnode
structure as input.
Import
from xpyth.xierpa.builders.layoutbuilder import LayoutBuilder
An overview
The LayoutBuilder class contains the following tags:| Open tag | Close tag | Attributes | Docstring or default value |
|---|---|---|---|
| divlayout | gnode gstate verbose |
The divlayout tag builds a column structure using on div tags, based on the layout instruction and data
of a list of GNode nodes. This is a recursive structure. It is possible to supply a mode in the GNode that will be passed as parameter to the hook. That way not all hooks need to be different, since a hook method can recognize the defined mode. When a hook is not specified, then the node is ignored in the grid. This way the root node can make the offset of its contained nodes without showing on the output itself. Todo: Make the layout structure also available as XML? Python example layout = gnode(x=8, y=0, mode='root', nodes=[ gnode(y=0, x=0, z=100, colspan=3, w=col(9), mode='head', class_='myhead', hook=pagehead), gnode(y=1, x=1, z=100, w=col(6), mode='content', class_='content', hook=content), gnode(y=1, x=2, z=100, w=col(1), mode='side', class_='content', hook=content), gnode(y=1, x=0, z=100, w=col(2), mode='navigation', class_='content', hook=navigation), gnode(y=2, x=1, z=100, w=col(3), colspan=2, mode='nohook', class_='content'), gnode(y=2, x=0, z=100, w=col(1), mode='nav', class_='content', hook=subnavigation), ]) self.divlayout(layout)  Click on the image to see the example. |
|
| divlayoutcss | gnode gstate |
The divlayoutcss tag generates the column CSS items, that are used by self.divlayout.
The tag must be place inside the style tag inside the head block. The gnode
attribute is initiallly the root GNode holding the layout structure, but the method will also be called recursively
with GNode branches.
Python example self.head() self.style() self.divlayoutcss(layout) self._style() ... self._head() |
|
| tablelayout | gnode verbose |
The tablelayout tag builds a table layout, based on the gnode tree of layout instructions.
This is a recursive structure. It is possible to supply a mode in the GNode that will be passed as parameter to the hook. That way not all hooks need to be different, since a hook method can recognize the defined mode. When a hook is not specified, then the node is ignored in the grid. This way the root node can make the offset of its contained nodes without showing on the output itself. The w attribute of gstate that is defined on top of the table tree, is used as width of the root table. Default value for the table width is 100%. In a tablelayout the backgroundcolor and backgroundimage will be translated to a style attribute for the col tag. Note: For a tablelayout the z-axis does not have any effect. Todo: Make the layout structure also available as XML? Python example layout = gnode(x=8, y=0, mode='root', nodes=[ gnode(y=0, x=0, z=100, colspan=3, w=col(9), mode='head', class_='myhead', hook=pagehead), gnode(y=1, x=1, z=100, w=col(6), mode='content', class_='content', hook=content), gnode(y=1, x=2, z=100, w=col(1), mode='side', class_='content', hook=content), gnode(y=1, x=0, z=100, w=col(2), mode='navigation', class_='content', hook=navigation), gnode(y=2, x=1, z=100, w=col(3), colspan=2, mode='nohook', class_='content'), gnode(y=2, x=0, z=100, w=col(1), mode='nav', class_='content', hook=subnavigation), ]) self.tablelayout(layout)  Click on the image to see the example. |
|
| tablelayoutcss | gnode gstate |
The tablelayoutcss tag generates the table CSS items, that are used by self.tablelayout.
The tag must be place inside the style tag inside the head block. The gnode
attribute is initiallly the root GNode holding the layout structure, but the method will also be called recursively
with GNode branches.
Python example self.head() self.style() self.tablelayoutcss(layout) self._style() ... self._head() |
|
| thumbdivlayout | field gnode gstate scale src table value |
The thumbdivlayout tag builds a thumbnail div layout, based on the gnode tree of layout instructions.
This is a recursive structure. The resulting layout can be used as a thumbnail of a layout, where all area's marked with a position attribute will contain a radio button with that value. |
|
| thumbtablelayout | field gnode table value width |
The thumblayout tag builds a thumbnail table layout, based on the gnode tree of layout instructions.
This is a recursive structure. The resulting layout can be used as a thumbnail of a layout, where all area's marked with a position attribute will contain a radio button with that value. |