dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: jBuilder - Plugin for building websites w/o HTML

Hybrid View

  1. #1
    Join Date
    Jun 2012
    Posts
    20

    Lightbulb jBuilder - Plugin for building websites w/o HTML

    Hey guys, just wanted to get some opinions on the topic and what people think on my little library. Some background on this is, I'm a Software Engineer working for a company who develops web apps and primarily use ExtJS because of its ability to create consistent looking interfaces quickly, even in a team environment by turning a JSON object into HTML.

    The problem comes up that I, and other developers like jQuery better, so we end up including both ExtJS and jQuery making for a pretty hefty inclusion script. My idea was this, why not create something similar as a plugin in jQuery? So that's when I started creating this library.

    This library takes advantage of whats available to us already under jQueryUI, but just makes it even simpler to create the interfaces we need. I'd like to provide an example of what I'm talking about. The code below will generate two interfaces using two different looks, but if you take note, the only thing you have to do to change the look is change 1 variable from tab to accordion.

    HTML Code:
    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>jBuilder Example 1</title>
    
        <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" />
        <link rel="stylesheet" href="css/jBuilder.css" />
    
        <!-- Library Files -->
        <script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="lib/ui/jquery-ui-1.8.21.custom.min.js"></script>
    
        <!-- jBuilder Files -->
        <script type="text/javascript" src="jquery.jBuilder.min.js"></script>
    
        <script type="text/javascript">
            jQuery(document).ready(function() {
                var form = {
                    layout : 'tab',
                    width : 400,
                    renderTo: jQuery("#tab-layout-example"),
                    items : [{
                        type : "form",
                        method : "POST",
                        label : "Login",
                        defaults : {
                            anchor : "30%"
                        },
                        id : "loginForm1",
                        items : [{
                            type : "textfield",
                            name : "username",
                            label : "Username",
                            width : 200,
                            tabindex : 1
                        },{
                            type : "password",
                            label : "Password",
                            width : 200,
                            name : "userpass"
                        },{
                            type : "checkbox",
                            label : "Options",
                            items : [{label : "Remember Me", name : "RememberMe", value : "true"}]
                        },{
                            type : "button",
                            items : [{
                                text : "Log In",
                                handler : function() {
                                    alert("You clicked the Log In button!");
                                    return false;
                                }
                            },{
                                text : "Retrieve",
                                handler : function() {
                                    new jQuery.jBuilder.dialog({
                                        title : "Retrieve Password",
                                        modal : true,
                                        minWidth : 340,
                                        resizable : false,
                                        buttons : {
                                            "Submit" : function() {
                                                alert("Retrieve Password");
                                            }
                                        },
                                        items : [{
                                            type : "form",
                                            method : "POST",
                                            label : "Forgot Password",
                                            id : "forgotForm",
                                            items : [{
                                                type : "textfield",
                                                anchor : "30%",
                                                name : "email",
                                                label : "Email",
                                                width : 200,
                                                tabindex : 1
                                            }]
                                        }]
                                    });
                                    return false;
                                }
                            }]
    
                        }]
                    },{
                        type : "form",
                        method : "POST",
                        label : "Register",
                        id : "registerForm",
                        defaults : {
                            type : "textfield",
                            anchor : "30%"
                        },
                        items : [{
                            name : "username",
                            label : "Username",
                            width : 200,
                            tabindex : 1
                        },{
                            name : "email",
                            label : "Email",
                            width : 200,
                            tabindex : 1
                        },{
                            type : "password",
                            name : "userpass",
                            label : "Password",
                            width : 200,
                            tabindex : 1
                        },{
                            type : "password",
                            label : "Re-type",
                            width : 200,
                            tabindex : 1
                        },{
                            type : "button",
                            text : "Submit",
                            handler : function() {
                                alert("You clicked the Submit button!");
                                return false;
                            }
                        }]
                    }]
                };
                jQuery.jBuilder.build(form);
    
                form.layout = "accordion";
                form.renderTo = jQuery("#accordion-layout-example");
                jQuery.jBuilder.build(form);
            });
        </script>
    </head>
    <body>
    <div id="tab-layout-example" style="width : 50%;float:left;"></div>
    <div id="accordion-layout-example" style="width : 50%;float:left;"></div>
    </body>
    </html>
    You can view this example in action at http://nodeka411.net/nemesis/jBuilderDemo/ It can also be noted that these two interfaces where generated by using a small 12kB JS plugin (after being minified) and the code is reusable as you can see.

    My end goal with this is be able to create an interface entirely out of JS like above using an MVC architecture without having to write any HTML and integrating plugins such as jQGrid to make life extremely simple. A custom compiler had already been included in the project for those who want to create a custom build with only the elements they use from the library.

    I'm just starting to put this project together so building the documentation is taking some time but if anyone wants to check out the guts of the project, feel free to look at it at https://github.com/Nemesis9765/jBuilder

    Comments and ideas are welcome Enjoy.

  2. #2
    Join Date
    Jun 2012
    Posts
    20
    *bump*

  3. #3
    Join Date
    Jun 2012
    Posts
    20
    Developed a website explaining the plugin. You can visit it at http://www.jbuilder.info

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles