ARtyProg: 2011-03-20

Friday, March 25, 2011

Event Pooling in Javascript

(...)Managing Complexity in the UI

As everyone knows, the more dependencies you have in a system, the harder maintaining that system is. Javascript is no exception- and orchestrating actions across complex user interfaces can be a nightmare if not done properly.

Luckily, there’s a great pattern for orchestrating complex interaction in a disconnected way. No, it’s not the Observer pattern. It’s a take on the Observer pattern called Event Pooling which is a piece of cake with jQuery’s bind and trigger functions. For the get to the code folks, here’s an example of using jQuery’s bind and trigger for event pooling.
(...)
http://www.michaelhamrah.com/blog/2008/12/event-pooling-with-jquery-using-bind-and-trigger-managing-complex-javascript/

Thursday, March 24, 2011

Routing in Javascript

(...)route.js is the smallest, easiest way to create stateful navigation based on unique ... route.js doesn't impose any other libraries or formats, handlers are ...
(...)route.js

Indeed, it' is a very nice piece of work
Here is a little example

<!DOCTYPE>
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/route.js" type="text/javascript"></script>
    <script>

        var nbrLoadedPages = 0;
        var pageNames = [];

        var staticPages = { "accueil": "Pages/accueil.htm",
                            "gestion": "Pages/gestion.htm",
                            "admin": "Pages/admin.htm"
                          };     
        var pages = {}


        displayPage = function (p) {
            var np = p.param
            if (pages[np]) {
                $("#page").html(pages[p.param]);
                return false;
            }          
        }


        setupRoutes = function () {
            route('#/page/:param').bind(displayPage);            
        }

        setupRouting = function () {
            setupRoutes();
            hashObject = {};
            hashObject._hashchange_last = '';
            hashObject._onhashchange = function () {
                if (hashObject._hashchange_last != location.hash) {
                    hashObject._hashchange_last = location.hash;
                    route(location.hash).run();
                }
            }
            setInterval(function () { hashObject._onhashchange(); }, 50);
        }

        
        initPages = function () {
            for (var key in staticPages) {
                if (staticPages.hasOwnProperty(key)) {
                    pages[key] = null;
                } 
            }
        }

        loadPages = function () {
            $.each(pages, function (k) {
                $.get(staticPages[k], (function (r) { pages[k] = r; nbrLoadedPages += 1; }));
            });
            checkLoading = setInterval(checkIfLoaded, 50);
        }

        checkIfLoaded = function () {
            if (nbrLoadedPages < staticPages.length) {
                // Waiting...
            }
            else {
                $("#main").css("display", "block");
                clearInterval(checkLoading);
                setupRouting();
            }
        }


        $(document).ready(function () {
            initPages();
            loadPages();
        });
    </script>
</head>
<body>
    <div id="log">
    </div>
    <div id="main" style="display: none">
        <center>
            <div>
                <h1>
                    <a href="#/page/accueil">Accueil</a> 
                    <a href="#/page/gestion">Gestion</a> 
                    <a href="#/page/admin">Administration</a>                       
                </h1>
            </div>
        </center>
        <div id="page" />
    </div>
</body>
</html>

Monday, March 21, 2011

corMVC: An jQuery-based MVC Framework

(...)corMVC stands for “client-only-required” Model-View-Controller and that means it does not depend on specific server-side technology. In case you want to demo something, it would be perfect if everything can be done on client side. Of course, you can save changes or load data from server (via Model) as the general illustration below(...)

http://javascriptly.com/2009/12/coremvc-an-jquery-based-mvc-framework/

Links - Pages