December 2012 CubicWeb Sprint Report

For two days, on dec 13th/14th 2012, ten hackers gathered at Logilab to improve the user interface of CubicWeb. This hackathon was initiated by Crealibre. About a year ago, they started the Orbui project, a new user interface for CubicWeb based on the Bootstrap HTML/CSS framework.

http://www.orbui.com/images/itisa960.png

Several projects at Logilab and Crealibre proved that Orbui was heading in the right direction, but that it had to fight with the default user interface of Cubicweb. Orbui makes different design/ergonomic choices and needs different HTML/CSS structure and Javascript components.

Sylvain published a roadmap back in may with a section titled "on the road to Bootstrap". After more than half a day of heated debate on the firts day, it was decided to follow the direction he pointed to. We started extracting from CubicWeb the default user interface and turning it into a set of cubes:

cubicweb-legacyui: css, views and templates extracted from CubicWeb 3.16, so as to provide full backward compatibility
cubicweb-bootstrap: empty cube with only bootstrap version 2.2.2 in data/
cubicweb-squareui: bootstrapified version of legacyui (slightly altered to benefit from the bootstrap css without breaking backward compatibility too hard)

At the end of the sprint, one could add_cube('squareui') on an existing application and keep it usable... and get "some kind of responsiveness" for free, thus proving that we were on the right track.

A lot of work is still ahead of us, but we have moved a few step forward towards the goal of making it easier to implement different UIs on top of CubicWeb 3.17.

For the curious, here is what the skeleton of legacyui.views.maintemplate (aka cw.web.views.maintemplate) looks like:

<body> (MainTemplate.template_body_header)
<table id="header"> (HTMLPageHeader.main_header)
for header in self.headers:
<td id="header-{left,center,right}">
render selected components(ctxcomponents, header-{left,center,right})
</td>
</table>
<div id="stateheader"> HTMLPageHeader.call
<div class="stateMessage"> HTMLPageHeader.state_header
</div>
<div id="page"> MainTemplate.template_body_header
<table id="mainLayout"> MainTemplate.template_body_header
if boxes (selected components(ctxcomponents, left): MainTemplate.nav_column
<td id="navColumnLeft">
<div class="navboxes">
render boxes
</div>
</td>
<td id="contentColumn"> MainTemplate.template_body_header
render selected components(rqlinput)
render selected components(applmessages)
if navtop (selected components(ctxcomponents, navtop): HTMLContentHeader.call
<div id="contentheader">
render components
</div>
<div class='clear'/>
<div id="pageContent"> MainTemplate.call
if vtitle:
<div class="vtitle" />
if etypenavigation:
render etypenavigation
view pagination
<div id="contentmain">
render view
</div>
view pagination
</div>
if navbottom (selected components(ctxcomponents, navbottom): HTMLContentFooter.call
<div id="contentfooter">
render components
</div>
</td>
if boxes (selected components(ctxcomponents, right): MainTemplate.nav_column
<div id="navColumnRight">
<div class="navboxes">
render boxes
</div>
</table>
</div>
<div id="footer"> HTMLPageFooter.call
render actions selected (actions, 'footer')
</div>
</body>

and here is what the skeleton from squareui.views.maintemplate looks like:

<body>
<div class="container-fluid">
<div id="header" class="row-fluid">
<!-- .header -->
</div>
<div class="row-fluid">
<div id="navColumnLeft" class="span3">
<!-- .leftcolumn -->
</div>
<div id="contentColumn" class="span6">
<!-- .contentcol -->
<div class="row-fluid">
<div id="contentheader" class="span12">
<!-- .contentheader -->
</div>
</div>
<div class="row-fluid">
<div id="contentmain" class="span12">
<!-- .contentmain -->
</div>
</div>
<div class="row-fluid">
<div id="contentfooter" class="span12">
<!-- .contentfooter -->
</div>
</div>
</div>
<div id="navColumnRight" class="span3">
<!-- .rightcolumn -->
</div>
</div>
<div id="footer" class="row-fluid">
<!-- .footer -->
</div>
</div>
</body>

Stay tuned for the updates on this (important) topic!