Worked on, added experimentally handlebars as template engine.

war/src/main/coffeescript/aji/AppRouter.coffee

@@ -27,7 +27,7 @@ define(["backbone","aji/HeaderView","aji/mbean/MBeanBrowserView"],(Backbone,Head
       navigator: () ->
         if (!@mbeanBrowserView)
           @mbeanBrowserView = new MBeanBrowserView()
-        $('#content').html(@mbeanBrowserView.render().el)
+        $('#content').replaceWith(@mbeanBrowserView.render().el).attr("id","#content")
   )
 
   AppRouter

war/src/main/coffeescript/aji/TemplateManager.coffee

@@ -16,11 +16,25 @@
 
 
 ###
- The current implementation uses underscore template, but can be switched later
+ The current implementation uses handelbars template, but can be switched later
  on to something more sophisticated
 ###
 define(["jquery","handlebars"], ($,Handlebars) ->
-    tpl =
+  Handlebars.registerHelper('eachProp', (context, options) ->
+    ret = ""
+    for prop,value of context
+      ret = ret + options.fn(
+          prop:   prop
+          value:  value
+      )
+    ret
+  )
+
+  Handlebars.registerHelper('jsonify', (context,options) ->
+    JSON.stringify(options.fn(context))
+  )
+
+  {
       # Hash of preloaded templates for the app
       templates:{}
 
@@ -32,7 +46,14 @@ define(["jquery","handlebars"], ($,Handlebars) ->
             name = names[index]
             console.log('Loading template: ' + name)
             $.get('tmpl/' + name + '.html', (data) =>
-                @templates[name] = Handlebars.compile(data)
+                $sub = $(data).filter("script[type=text/handlebar]")
+                if (!$sub.size())
+                   @templates[name] = Handlebars.compile(data)
+                else
+                   tmpl = @templates
+                   $sub.each((el) ->
+                     tmpl[this.id] = Handlebars.compile($(this).html())
+                   )
                 index++
                 if (index < names.length)
                   loadTemplate(index)
@@ -43,20 +64,5 @@ define(["jquery","handlebars"], ($,Handlebars) ->
 
       # Get template by name from hash of preloaded templates
       template: (name,context) -> @templates[name](context)
-
-    Handlebars.registerHelper('eachProp', (context, options) ->
-      ret = ""
-      for prop,value of context
-        ret = ret + options.fn(
-            prop:   prop
-            value:  value
-        )
-      ret
-    )
-
-    Handlebars.registerHelper('jsonify', (context,options) ->
-      JSON.stringify(options.fn(context))
-    )
-
-    tpl
+  }
 )

war/src/main/coffeescript/aji/mbean/MBeanView.coffee

@@ -2,11 +2,17 @@ define(["backbone","underscore","jquery","aji/mediator","aji/jolokia","aji/Templ
   MBeanView = Backbone.View.extend(
 
     attributes:
-      class: "9span"
+      class: "span9"
 
     initialize: ->
       mediator.subscribe("navigator-mbean-select",(mbean) => @render(mbean))
 
+    typeShortenMap:
+      'java.lang.String': 'String'
+      'javax.management.openmbean.CompositeData': 'CompositeData'
+
+    arrayRegexp: /^\s*\[L(.*);\s*$/
+
     render: (mbean) ->
       # add up a map
       info = jolokia.getMBeanInfo(mbean)
@@ -15,18 +21,43 @@ define(["backbone","underscore","jquery","aji/mediator","aji/jolokia","aji/Templ
       console.dir(attributes)
       data = for attr,meta of attributes
         { name: attr
-        desc: meta.desc
-        value: attributeValues[attr]
-        type: meta.type
+        desc: @cleanupDescription(attr,meta)
+        value:@prepareValue(attributeValues[attr],meta)
+        type: @shortenType(meta.type)
         rw: meta.rw }
-      console.dir(data)
 
-      html = TemplateManager.template("mbean",
+      html = TemplateManager.template("attributes",
         data: data
         info: info
         attributes: attributes
       )
       @$el.html(html)
       #@$el.text("Info: " + JSON.stringify(info))
+
+    shortenType: (type) ->
+      arrayMatch = @arrayRegexp.exec(type);
+      isArray = false
+      if (arrayMatch)
+        type = arrayMatch[1]
+        isArray = true
+      type = @typeShortenMap[type] if @typeShortenMap[type]
+      type += "[]" if isArray
+      type
+
+    cleanupDescription: (name,meta) ->
+      return if meta.desc == name then "" else meta.desc
+
+    prepareValue: (value,meta) ->
+      if (meta.type == 'javax.management.openmbean.CompositeData')
+         TemplateManager.template("compositeData",
+            data:  for key,val of value
+              {
+                key: key
+                value: val
+              }
+         )
+      else
+         "<strong>" + value + "</strong>"
+
   )
 )

war/src/main/coffeescript/aji/mbean/NavigatorView.coffee

@@ -26,8 +26,10 @@ define(["backbone","underscore","jquery","aji/mediator","aji/jolokia","aji/Templ
       # Create the filter box
       @$filterEl = $(@make("input",
         type: "text"
-        class: "filter"
+        class: "search-query filter"
+        placeholder: "Filter"
       )).appendTo(@$el)
+
       @$ul = $("<ul class='nav nav-pills nav-stacked navigator domain-list'></ul>").appendTo(@$el)
       @$ul.delegate("li.navigator","click",@clickHandler)
 
@@ -43,7 +45,7 @@ define(["backbone","underscore","jquery","aji/mediator","aji/jolokia","aji/Templ
         )
         @domain2ElementMap[domain] = $domain
         $domain.append($("<a href='#' class='navigator domain-name'></a>").text(domain))
-        $mbeans = $("<ul class='navigator mbean-list'></ul>").appendTo($domain)
+        $mbeans = $("<ul class='nav nav-pills nav-stacked navigator mbean-list'></ul>").appendTo($domain)
         for mbean in _.keys(mbeans).sort()
           $mbean = $("<li class='navigator mbean'></li>").append($("<a href='#'></a>").text(mbean)).appendTo($mbeans)
           objectname = domain + ":" + mbean

war/src/main/webapp/app/index.html

@@ -18,6 +18,9 @@
       body {
         padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
       }
+      .navigator .mbean {
+        padding-left: 20px;
+      }
     </style>
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->

war/src/main/webapp/app/tmpl/mbean.html

@@ -13,32 +13,53 @@
   ~  See the License for the specific language governing permissions and
   ~  limitations under the License.
   -->
-<table class="table table-striped">
-  <thead>
+<script id="attributes" type="text/handlebar">
+  <table class="table table-striped">
+    <thead>
     <tr>
       <th>Name</th>
       <th>Type</th>
       <th>Value</th>
       <th>Description</th>
-      <th>R/W</th>
     </tr>
-  </thead>
-  <tbody>
-  {{#each data}}
-  <tr>
-    <td>
-      {{this.name}}
-    </td>
-    <td>
-      {{this.type}}
-    </td>
-    <td>
-      <strong>{{this.value}}</strong>
-    </td>
-    <td>{{this.desc}}</td>
-    <td>{{this.rw}}</td>
-  </tr>
-  {{/each}}
-  </tbody>
-</table>
+    </thead>
+    <tbody>
+    {{#each data}}
+    <tr>
+      <td>
+        {{this.name}}
+      </td>
+      <td>
+        {{this.type}}
+      </td>
+      <td>
+        {{this.value}}
+      </td>
+      <td>{{this.desc}}</td>
+    </tr>
+    {{/each}}
+    </tbody>
+  </table>
+</script>
+
+<script id="compositeData" type="text/handlebar">
+  <table class="table">
+    <tbody>
+    {{#each data}}
+    <tr>
+      <td>
+        {{this.key}}
+      </td>
+      <td>
+        {{this.value}}
+      </td>
+    </tr>
+    {{/each}}
+    </tbody>
+  </table>
+</script>
+
+<script id="plainValue" type="text/handlebar">
+   <strong>{{value}}</strong>
+</script>