jQXM messaging System and Dynamic Widgets


jQXM provides support for sending messages within the various components of a page.
In this way, you can create independent parts that can communicate by sending and receiving messages.
The main use of this feature is the ability to structure yours pages with a composite-type approach where, for example, the main page is the shell and can be loaded on-demand parts further with the help of "jQuery. load". It is also possible to dynamically replace parts that can subscribe to messages and to provide services in a completely decoupled way.
In this example is not shown the way by which you can load separate parts of the page but the mechanism of jQuery is very simple to use. For those using ASP.NET MVC may be very easy to decompose a complex page elements particularly under and use HTMLRenderPartial for assembling the various parts.

A specific function contained in jQXB.utils namespace simplifies Widgets to be loaded correctly and assures the execution of javascript code contained in widget (see Cheat Sheet miscellaneus functions for jQXB.utils.loadWidget()).

 *Live demos available at jQXB homesite *

HTML Declaration

 

    <div style="background-color: Orange;">
        Original Data
        <input type="text" jqxb-datasource="mydata" jqxb-datamember="Name" />
        <input type="text" jqxb-datasource="mydata" jqxb-datamember="Surname" />
        <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.Street" />
        <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.ZipCode" />
    </div>
    <div style="background-color: Silver;">
        Copy 
        <input type="text" jqxb-datasource="mydatacopy" jqxb-datamember="Name" />
        <input type="text" jqxb-datasource="mydatacopy" jqxb-datamember="Surname" />
        <input type="text" jqxb-datasource="mydatacopy" jqxb-datamember="Address.Street" />
        <input type="text" jqxb-datasource="mydatacopy" jqxb-datamember="Address.ZipCode" />
    </div>
    <a id="Anchor Button" href="#" class="dispatchmessage">Click to send message</a>

 

jQXB + jQXBM code

 

  <script type="text/javascript">
        var Customer = { 'Name': 'Anthony', 'Surname': 'Murray', 'Address': { 'Street': 'Carnaby Street', 'ZipCode': 'YTSCH'} };
        // Common jQuery entry point

        var MyFunc = {}
        // Define the handler
        MyFunc.displayCopy = function (argument, sender) {
            jQXB.setDataSource('mydatacopy', argument).doBind('mydatacopy');
            alert("[" + sender.attr('id') + "] has sended a message");
        }
        jQuery(document).ready(function () {
            // Initialize the System
            jQXB.initialize();
            jQXB.setDataSource('mydata', Customer).doBind('mydata');
            jQuery('.dispatchmessage').bind('click', function () { jQXBM.fireMessage('DISPLAYOBJ', jQXB.getDataSource('mydata'), jQuery(this)); });
            // Subscribe Message
            jQXBM.subscribeMessage('DISPLAYOBJ', MyFunc.displayCopy);

        });

    </script>

Last edited Jul 13, 2012 at 10:09 AM by lightcode, version 5

Comments

No comments yet.