Redesing the version view using inline script and Ext.grid.Panel.

controllers/plugin_dbui.py

@@ -291,5 +291,16 @@ def versions():
     """Return the versions of the different part of the code.
     
     """
+    import json
     from plugin_dbui import get_versions
-    return get_versions()
+    
+    # the configuration for the Ext.data.ArrayStore
+    cfg = dict()
+
+    cfg['fields'] = [{'name': 'code', 'type': 'string'},
+                     {'name': 'version', 'type': 'string'}]
+
+    cfg['data'] = get_versions()
+
+    
+    return dict(cfg_store=json.dumps(cfg))

languages/fr-fr.py

@@ -102,6 +102,7 @@
 'select publications with a given AERES code': 'selectionne les publications avec un code AERES',
 'select publications with a given category code': 'select publications with a given category code',
 'select...': 'sélectionner...',
+'Software versions': 'Versions des logiciels',
 'Speaker': 'Orateur',
 'Start date': 'Date de début',
 'Store': 'Store',
@@ -118,8 +119,8 @@
 'undefined': 'indéfini',
 'unknown': 'unknown',
 'url': 'url',
-'value already in database or empty': 'La valeur existe dans la base de données ou est nulle',
 'Value already in database or empty': 'La valeur existe dans la base de données ou est nulle',
+'value already in database or empty': 'La valeur existe dans la base de données ou est nulle',
 'versions': 'versions',
 'Volume': 'Volume',
 'year': 'année',

models/widgets_viewport.py

@@ -50,6 +50,7 @@ gridNode.add_children(db.tables, func=to_grid)
 loader = dict(ajaxOptions=dict(disableCaching=False),
               autoLoad=True,
               renderer='html',
+              scripts=True,
               url=URL('plugin_dbui', 'versions'))
 
 aboutLeaf = Panel(autoLoad=URL('plugin_dbui', 'about'), autoScroll=True)

modules/plugin_dbui/helper.py

@@ -545,14 +545,9 @@ def get_store_id(name):
 def get_versions():
     """Get the versions of the application and plugins.
     
-    @rtype: dict
-    @return:
-        - C{ace} the version of the plugin ace
-        - C{dbui} the version of the plugin  dbui
-        - C{extjs} the version of the plugin extjs
-        - C{mathjax} the version of the plugin mathjax
-        - C{web2py} the version of the framework web2oy
-        - C{myapp} the version of my application
+    @rtype: list of tuple
+    @return: each tuple contains the name of the software
+    and its version identifier.
     
     """
     server_path, client_path = get_reference_paths()
@@ -633,12 +628,15 @@ def get_versions():
         
         os.chdir(ref_path)
 
-    return dict(ace=ace, 
-                dbui=dbui, 
-                extjs=extjs, 
-                mathjax=mathjax,
-                myapp=myapp, 
-                web2py=web2py)
+    # prepare the output
+    li = [("web2py", web2py),
+          ("dbui", dbui),
+          ("extjs", extjs),
+          ("mathjax", mathjax),
+          ("ace", ace),
+          (current.request.application, myapp)]
+    
+    return li
 
 
 def get_where_query(table):

static/plugin_dbui/CHANGELOG

@@ -2,6 +2,9 @@
 
 HEAD
 
+   - Use inline script and Ext.grid.Panel to display software versions.
+   - Migrate to HTML5 sysntax.
+
 0.6.1.6 (Jul 2014)
   - Add protection to avoid Direct transaction with null TableId identifier
     It happens from time to time when the proxy is not yet ready.

views/plugin_dbui/versions.html

 {{
-    title = 'Software versions'
-    response.write(P(title, _class="dbui-p dbui-small-cap dbui-large"))
-
-    table = TABLE(TR(TD("web2py",  _class="dbui-td"), TD(web2py,  _class="dbui-td")),
-                  TR(TD("dbui",    _class="dbui-td"), TD(dbui,    _class="dbui-td")),
-                  TR(TD("extjs",   _class="dbui-td"), TD(extjs,   _class="dbui-td")),
-                  TR(TD("mathjax", _class="dbui-td"), TD(mathjax, _class="dbui-td")),
-                  TR(TD("ace",     _class="dbui-td"), TD(ace,     _class="dbui-td")),
-                  TR(TD(request.application, _class="dbui-td"), TD(myapp, _class="dbui-td")),
-                  _style="margin-left:6%")
-
-    response.write(P(table))
-}}
\ No newline at end of file
+    #--------------------------------------------------------------------------
+    #
+    # The python controller return cfg_store, the configuration of
+    # the Ext.data.Array
+    #
+    # prepare the data
+    #    - build unique DIV identifier
+    #    - Title and DIV block
+    #
+    #--------------------------------------------------------------------------
+
+    #
+    # unique identifier for the DIV block associated to the grid
+    #
+    divgrid = abs(hash(cfg_store))
+
+    #
+    # The title and the DIV block
+    #
+    style = ["font-size: 12px;",
+             "font-variant: small-caps;",
+             "margin-left: 20px;",
+             "margin-bottom: 1ex;",
+             "margin-top: 2ex;"]
+
+    response.write(P(T("Software versions"), _style="".join(style)))
+    response.write(DIV(_id="grid-%s" % divgrid))
+
+}}
+<script>
+
+    /**
+     * Inline javascript to instantiate and render the Ext JS grid
+     *
+     */
+
+    //
+    // bind the python and javascript variables
+    // use the internationalization of web2py to translate grid header
+    // MANDATORY: escape false to convert properly the quotes
+    //
+    {{
+        def write(value):
+            return response.write("\n%s" % value, escape=False)
+
+        write("var cfgStore = %s;" % cfg_store)
+    }}
+
+    //
+    // instantiate the grids
+    //
+    var grid = Ext.create('Ext.grid.Panel', {
+        store: Ext.create('Ext.data.ArrayStore', cfgStore),
+        columns: [
+            {text: "Software", dataIndex: 'code', flex: 0.8},
+            {text: "Version", dataIndex: 'version', flex: 1.2}
+        ],
+        forceFit: true,
+        hideHeaders: true,
+        padding: "10 40 20 60",
+        renderTo: 'grid-{{=divgrid}}',
+        width: 300
+    });
+
+</script>