Published 2014-05-12 00:00:00

A little update on our latest little mini project. Wrapping the Twitter Bootstrap library into RooJS Objects, and creating a manageable method to develop Bootstrap applications without the JQuery spaghetti. 


A few years ago I forked the original ExtJS1 and created the RooJS1 library, since then we have extended, fixed and enhanced the library quite a bit. It forms the backbone of most of the customer driven applications. 
At the same time we developed a desktop tool app.Builder, that enables us to drag and drop components from the library and edit them in a WYSIWYG interface. Not only able to design the interface, but also add the Javascript to manage the interactive elements of the interface. This tool is essential to rapidly building the UI, and maintaining applications, as there is a direct relationship between an element in the application and the code that occurs when someone presses a button/ reloads a grid etc..
The only downside to this library has been that is is not well suited to general web user frontend applications. While we have improved it's mobile feature set, it is not particularly responsive, and does not work that well to small devices.

Twitter Bootstrap

Like most of the rest of the world we noticed Twitter's bootstrap library, however did not really do much investigative work until recently when we started a couple of new projects that needed a more mobile/web front end. As we had a reasonable lead time on the projects I made the decision to start implementing a Roo wrapper around the Bootstrap components.
The reasons for this was two fold, first was to avoid jquery, as it tends to result in horrific unreadable spaghetti code, great for those quick special effect, but awful for a larger project which is evolving and needs to stay manageable. Second was so we could use our builder tool to create Bootstrap applications.
The first step for this was to extend the Roo.Component (which provides a basic building block) into Roo.bootstrap.Component. Then create a Roo class for each of the major Bootstrap components. Buttons, Form elements, layout elements etc..
Since this is part of the Roo library we have infrastructure in place to build documentation for all these components. this is all in the roojs documentation
Once we had the components built, the next step was modifying our standard Component manager Roo.XComponent so it can build user interfaces from JavaScript structures defining the UI. 
Our code for a generate page looks like this.

Index = new Roo.XComponent({
    part     :  ["templates","Index"],
    order    : '001-Index',
    region   : 'center',
    parent   : '#bootstrap',
    name     : "unnamed module",
    disabled : false, 
    permname : '', 
    _tree : function()
        var _this = this;
        var MODULE = this;
        return {
            xtype: 'Body',
            xns: Roo.bootstrap,
            'xtype-bootstrap' : 'Roo.bootstrap.Body',
            items : [
                    xtype: 'Container',
                    xns: Roo.bootstrap,
                    'xtype-bootstrap' : 'Roo.bootstrap.Container',
                    sticky : 'wrap',
                    items : [
                            xtype: 'Navbar',
                            xns: Roo.bootstrap,
                            'xtype-bootstrap' : 'Roo.bootstrap.Navbar',
                            bar : true,
                            inverse : true,
                            brand : 'Some Brand',
                            brand_href : baseURL,
                            items : [

a menu item with some interactivity
    xtype: 'MenuItem',
    xns: Roo.bootstrap,
    'xtype-bootstrap' : 'Roo.bootstrap.MenuItem',
    listeners : {
        click : function (e)
                url : baseURL + '/MyAccount/Logout',
                method: 'POST',
                success : function()
                    location.href = baseURL;
    html : 'Logout'

So our UI builder can generate these files and allows you to add listeners (event handlers) directly to the elements.
From there, we just include the code on the front page
 <script type="text/javascript">
//     Roo.debug = 1; // outputs debugging to show what is going on.;

Making it SEO friendly.

The one snag with this approach is that the resulting pages are just a few javascript includes, and practically no HTML or content. The means that if google indexes the page it's likely to find no keywords, links etc. to add to it's database. making the site invisible to google. A rather disastrous situation if you are a startup hoping for a few hits from google.
To solve this, we came up with the idea of saving the rendered HTML to a file, and then using that as a PHP template (like a classic MVC) application. Then by calling the build method above with build_from_html set (as below) the components objects that make up the javascript take ownership of the rendered HTML as if it had been rendered initially by the components.{
        build_from_html : true
This means that we can mix back end dynamically generated HTML pages, with a front end rich user experience, and keep the code manageable and clean.
The builder app only works on Linux (using gnome seed / gtk) and I've written a bit before about how to use it.


good one
The post is really amazing. It has many helpful information which is written in a simple and meaningful way. thank you for sharing this article. The content is honestly written. This blog is always sharing useful facts. Keep sharing more posts.
#0 - mariakim ( Link) on 2017-11-15 14:37:15 Delete Comment
play yahtzee
Obstacle your pals to see if they could beat your rating, learn who will certainly become a king!
#1 - sweetmom ( Link) on 2018-01-26 11:35:44 Delete Comment
writing tips
great and high level of information can be shared with our writing company. The general way and good tracking information can be update from our writing company.
#2 - essay reviews ( Link) on 2018-02-06 14:25:02 Delete Comment
sewing machine in India
In India, the sewing machine is the essential thing, and every housewife's favorite work is stitching, and women do small-scale business home business gets your sewing machine in India.
#3 - sewing machine in India ( Link) on 2018-02-06 15:34:01 Delete Comment
Helping tool
This post is extremely good. Way of presentation is really good. Each and every content of this post is really good.
#4 - Thesis writing service ( Link) on 2018-03-02 14:12:14 Delete Comment
tubemate app
TubeMate app download 2018 is the latest Android application which allows you to download videos from any sources like YouTube for free of cost
#5 - tubemate app ( Link) on 2018-03-21 13:48:58 Delete Comment
FIFO pros and cons
FIFO saves money and time when calculating the cost of the inventory being sold or purchases. And just like any other pricing technique, it is dependent upon inflation. This means it doesn't consider many variables like supply and demand, transfer pricing, discounts on, foreign exchange movements etc.
#6 - Owen Davis ( Link) on 2018-05-18 20:55:22 Delete Comment
In 1968 it was officially named as dollar general corporation. The founders of this organization are James Luther Turner and Cal Turner. The headquarters is located in Goodlettsville, Tennessee in the United States.
#7 - ( Link) on 2018-06-26 03:48:20 Delete Comment
Law Assignment Help
This A Good Way To Appreciate The Teacher As They Put Their Efforts To Train Students. UK Dissertation Writers Appreciates The Teachers.
#8 - Law Assignment Help ( Link) on 2018-07-06 19:36:12 Delete Comment
MHR Writer
This is also a very good post which I really enjoyed reading. It is not every day that I have the possibility to see something like this..
#9 - MHR Writer ( Link) on 2018-07-11 19:46:54 Delete Comment

Add Your Comment

Follow us on