Wiki

Clone wiki

rum / LayoutModifications

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

The result is visible here: screenshot

Updated

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.