Simple Use Case: YAHOO.plugin.Dispatcher

Markup (dispatcher container element):
<div id="mydynamicarea">
</div>

Script:
YAHOO.plugin.Dispatcher.fetch ( 'mydynamicarea', 'PATH/TO/CONTENT/page.html' );

The Dispatcher Manager will fetch the remote page, and set the response as the content of the container area "mydynamicarea".

Singleton: YAHOO.plugin.Dispatcher

YAHOO.plugin.Dispatcher.fetch(str|HTMLElement|obj el, str uri, obj config);
Arguments:
(1) HTML ID or HTMLElement of the container.
(2) The remote file used by the connection manager.
(3) Configuration Object: JS object defining configuration properties for the area. See Configuration section for full list.

YAHOO.plugin.Dispatcher.delegate(obj tab, obj tabview, obj config);
Arguments:
(1) reference to the new tab.
(2) reference to the tabview (optional).
(3) Configuration Object: JS object defining configuration properties for the area. See Configuration section for full list

YAHOO.plugin.Dispatcher.process(str|HTMLElement|obj el, str content, obj config);
Arguments:
(1) HTML ID or HTMLElement of the container.
(2) content: You can use another component to managemente the ajax process, and pass the response directly to the dispatcher to process the content and put it inside the container.
(3) config: Configuration Object: JS object defining configuration properties for the area. See Configuration section for full list

YAHOO.plugin.Dispatcher.cssLoader(str uri, obj config);
Arguments:
(1) The remote JS file used by the connection manager.
(2) config: Configuration Object: JS object defining configuration properties for the JS file. See Configuration section for full list

YAHOO.plugin.Dispatcher.jsLoader(str uri, obj config);
Arguments:
(1) The remote CSS file used by the connection manager.
(2) config: Configuration Object: JS object defining configuration properties for the CSS file. See Configuration section for full list

YAHOO.plugin.Dispatcher.applyCSS(str cssCode, obj params, obj config);
Arguments:
(1) cssCode: a chunk of CSS code.
(2) params: List of properties for the new CSS tag (media, href, etc).
(3) config: Configuration Object: JS object defining configuration properties for the CSS chunk. See Configuration section for full list

Solutions:

Use the dispatcher to process the tabview connection method

var tabView = new YAHOO.widget.TabView({id: 'demo'});

YAHOO.plugin.Dispatcher.delegate (new YAHOO.widget.Tab({
  label: 'Remote Scripts',
  dataSrc: 'PATH/TO/xhtml.with.remote.scripts.html',
  cacheData: true,
  active: true
}), tabView);

 YAHOO.plugin.Dispatcher.fetch ( 'my_dynamic_area', 'PATH/TO/xhtml.with.remote.scripts.html' );

Use the dispatcher to process the content provided by an external package:

var area = YAHOO.util.Dom.get ('dynamic_area');
YAHOO.plugin.Dispatcher.process ( area, 'xhtml content here...' );   

CSS Injection:

// injecting a remote CSS file in your page...

YAHOO.plugin.Dispatcher.cssLoader( 'css-injection-default.css');

// injecting certains CSS's rules in your page...
YAHOO.plugin.Dispatcher.applyCSS ("#demo {border: 1px solid #ff0000;} #demo ul {text-align: center;}");    

Avoid memory leaks:

Define the rules to destroy the controls/widgets before change the content of the areas. In this example the dispatcher will destroy the DataTable control, releasing the memory and then will display the new content. Also, by default, the dispatcher will release all the listeners defined for elements within a area before display the new content (YAHOO.util.Event.purgeElement).

// setting the destruction's rules from inside (use this sentence at the end of the remote content)
YAHOO.plugin.Dispatcher.destroyer.subscribe (function(el, config){
    myDataTable.destroy ();
});

// setting the destruction's rules from outside (use this senctence at any time)
YAHOO.plugin.Dispatcher.onDestroy = function ( areaID, function(el, config){
    myDataTable.destroy ();
}, scope);

Key Interesting Moments in Dispatcher

Key Dispatcher Configuration Options

Dependencies

Requires:
YUI:YAHOO, YUI:Dom, YUI:Event and YUI:Connection

Facts

- The dispatcher simulate the browser execution (ordered execution)
- The dispatcher allow cross reference within the dynamic area (YAHOO.util.Dom.get ('id_of_element_within_container'))
- The dispatcher use lineal execution (one thread)

Firewall:

Before load the content of an external source, the dispatcher will analyze the URI, at this point you can define your own routine to determine if the source can be loaded or not, defining your own policies.

In this case we can use the configuration object to define this policies:

• proxy (string):
  It's an URL that will be used to load external sources thru a proxy, by default the proxy setting is:
  '/dispatcher.php?uri='
• monolithic (bool)
  It's an option parameter, if true the dispatcher will be forced to complied with the cross domain policy, loading only the files from the same domain.
• firewall (function):
  It's an optional function that will override the proxy and the monolithic parameters, and will be called it using the URI as the first argument, and using the configuration object like the scope, and the result of this function will be used like the correct URI; if the result isn't an string, this file will be discarded.

Example:

YAHOO.plugin.Dispatcher.fetch ( 'my-div', '/PATH/TO/my-url.html', {
  proxy:  '/PATH/TO/my-proxy.php?f='
});

YAHOO.plugin.Dispatcher.fetch  ( 'my-div', '/PATH/TO/my-url.html', {
  firewall:  function(uri){
    // transform the uri...
    return  uri;
  }

});