Goal of this project is to create a new layout for the show page/the show widget and insert it into RUM. We progress in the following way:
The default ShowWidget? in RUM is called BaseShowWidget We import it for subclassing:
from tw.rum.widgets import BaseShowWidget
Our new widget will use the dojo SplitContainer?: http://dojocampus.org/explorer/#Dijit_Layout_Split%20Container_Horizontal
The basic widget definition looks as follows
class ShowWidget(BaseShowWidget, DojoBase):
params = ["fields", "labels", "columns"]
fields = []
css = [CSSLink(modname = "owconf", filename='public/css/rumshowwidget.css')]
columns = None
template = "genshi:owconf.templates.rum.show_widget"
require= ["dijit.layout.SplitContainer",
"dijit.layout.ContentPane"]
def __init__(self, *args, **kw):
super(ShowWidget, self).__init__(*args, **kw)
def update_params(self, d):
super(ShowWidget, self).update_params(d)
len_fields=len(d.fields)
if d.columns is None:
if len_fields>15:
d.columns=3
else:
if len_fields>7:
d.columns=2
else:
d.columns=1
if len_fields% d.columns!=0:
len_fields=len_fields-len_fields%d.columns+d.columns
d.len_per_column=len_fields/d.columns
This is no example for perfect layout, but how to modify the RUM layout. In this sense the template and css look as follows:
<div xmlns="http://www.w3.org/1999/xhtml"
xmlns:py="http://genshi.edgewall.org/"
class="${css_class}">
<div dojoType="dijit.layout.SplitContainer"
orientation="horizontal"
sizerWidth="7"
activeSizing="false" class="splitcontainer">
<div py:for="i in xrange(columns)" dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20" style="" class="contentpane">
<dl>
<py:for each="label, child in zip(labels, children)[i*len_per_column: (i+1)*len_per_column]">
<dt>${label}</dt>
<dd>${child(value)}</dd>
</py:for>
</dl>
</div>
</div>
<div.clear />
</div>
div.showwidget dt {
border-top: 1px dashed #999;
padding-top: 10px;
}
div.showwidget dt:first-child {
border-top: none;
}
div.showwidget dd {
margin-bottom: 5px;
padding-left: 20px;
clear: both;
}
div.showwidget dl {
margin-left:10px;
}
div.clear{
clear:both;
}
div.showwidget div.contentpane {
border: 1px solid #bfbfbf; float: left;
}
div.showwidget div.splitcontainer{ height:600px;}
Finally we register the widget:
from tw.rum.viewfactory import get as get_view, WidgetFactory
@get_view.when("isinstance(self, WidgetFactory) and "
"attr is None and action=='show'", prio=0)
def _get_wid_for_action(self, resource, parent, remote_name, attr, action,
args):
return ShowWidget
Attachments
- layoutforweb.png (125.1 KB) - added by brickenstein 15 months ago.

