Monthly Archives: May 2012

Ribbonbar UI 2.0 Released

Ribbonbar UI is by far the best recreation of the “real” desktop ribbonbar for the web. It is skinnable, fully AJAX driven component that is ready to use on any website. What you can you do with a MS Office like ribbon bar in web environment? Whether use it for navigation, associate it with your WYSIWYG editor, use in an email application, display links to your favorite social websites or simply build your entire webpage around it – this depends only on you.

Ribbonbar UI has everything you would expect from a ribbonbar – cool looks, comprehensive and easy API, amazing command handling, different sets of inbuilt tools, cool Windows7 skin. And at last, but not least – deploying and configuring it is a matter of minutes.

Screenshots:

What’s New:

– JSON file instead of XML for tabs, ribbons and tools rendering.
– Rendering at lightning speed.
– Improved browser support.
– Fully CSS3 skinning mechanism with decent fallback for older browsers.
– New and easy to use client API.
– New command handling based on delegation;
– Support for external tools loaded via AJAX.
– Can be used on any server environment (default is PHP, but it can be extended to JAVA, .NET, etc).

Features:

– By far, the most successful recreation of the “real” desktop ribbonbar as a web component.
– Comprehensive and fun to use API.
– Easy to modify JSON structures for tabs, ribbons and commands.
– Imageless CSS3 skin working with all modern browsers and falling back nicely for older browsers.
– 4 types of inbuilt tools – “toolbar”, “office menu”, “split-button” and “external”.
– Ability to load external tools by loading them via AJAX and passing get/post parameters.
– Small footprint.
– Easy command handling.
– Can be used with 3-rd party WYSIWYG editors, as a navigation component, in email systems, etc.
– The retrieval for the JSON files can be done with any server runtime (however Ribbonbar is shipped with PHP routine only).

Now What?

Check the info page, go to the demo or visit the documentation page for Ribbonbar UI to learn how to integrate it into your own project. Eventually download it. As usual, the component is included in the latest version if Acid.JS Web.UI.

Improved URI to JSON Serializer

Below is an improved version of the URI to JSON serializer JavaScript class I presented a couple of days ago.

What it Does:

uriToJSON() is a tiny JavaScript class, using the HTMLAnchorElement interface to convert URI string into a JSON object.  The object returned by the function contains hash, host, hostname, parameters key-value map, pathname, port and protocol. Works with all major browsers (Firefox, Chrome, Safari, Opera, IE6-10).

What is new:

  • The parameters are no longer in an array but in a hash map, which can be easily accessed like parameters.someParameter rather than parameters[0], parameters[1], etc.
  • Automatic typecasting for strings, Boolean and Numbers for the parameters map and for the port.

Here is the demo, and the code below shows how to use the class:

function uriToJSON(uri) {
    "use strict";

    if(!("hostname" in document.createElement("a"))) {
        return;
    }

    var
        anchor = document.createElement("a"),
        params = {},
        data,
        param;

        anchor.setAttribute("href", uri);
        data = {
            hash: anchor.hash.replace("#", ""),
            host: anchor.host,
            hostname: anchor.hostname,
            parameters: null,
            pathname: anchor.pathname,
            port:  parseInt(anchor.port) ? parseInt(anchor.port) : anchor.port,
            protocol: anchor.protocol,
            uri: uri
        };

        if(anchor.search.split("?")[1]) {
            params = anchor.search.split("?")[1].split("&");
            data.parameters = {};
        }

        for(param in params) {
            if(params.hasOwnProperty) {
                var
                    pair = params[param].split("="),
                    key = pair[0],
                    value = pair[1] === "true" ? true : pair[1] === "false" ? false : pair[1];

                data.parameters[key] = parseInt(value) ? parseInt(value) : value;
            }
        }

        return data;
}

A few tests:

var
    data = uriToJSON("https://www.google.com:3030/search?number1=123&number2=456q=javascript&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-GB:official&client=firefox-a#somehash");

    console.log(data);
    console.log(data.hash);
    console.log(data.host);
    console.log(data.hostname);
    console.log(data.parameters);
    console.log(data.pathname);
    console.log(data.port);
    console.log(data.protocol);
    console.log(data.uri);

Related Posts

JavaScript URI to JSON Serializer

Here is a small cross-browser JavaScript class, which is using the HTMLAnchorElement interface to convert URI string into a serialized JSON object.  The JSON object returned by the function contains hash, host, hostname, key-value array map of get parameters, pathname, port and protocol and the uri itself. uriToJSON() works with all major browsers (Firefox, Chrome, Safari, Opera, IE6/7/8/9/10).

There is a newer and improved version of the class on this page.