Hi Alex

I am stuck with a design problem while trying to create xbl for tabview - specifically with YUI Tab component which has 2 components to add.


I am planning to use YUI TabView and Tab. TabView and Tab can be added as HTML or can be added dynamically through javascript.

In case of dynamic addition code looks like this:

------------------
tabView.addTab( new YAHOO.widget.Tab({ 
	    label: 'ipsum', 
	    content: '<ul><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li></ul>' 
	 
	})); 
------------------

My content part would contain xforms tags - which would require ops transformation, hence dynamic addition of tabs is ruled out. 

So I decided I would have to add all tabs with content on the server side and on browser side do a dynamic addition and deletion (with some caching for performance). 

Now comes the XBL part. 

For static addition (at html body level), I would need a structure like:

	<xhtml:div id="demo" class="yui-navset">
		<xhtml:ul class="yui-nav">
			<xhtml:li id="li.1">
				<a href="#tab1"><em>Tab One Label</em></a>
			</xhtml:li>
			<xhtml:li class="selected" id="li.2">
				<a href="#tab2"><em>Tab Two Label</em></a>
			</xhtml:li>
			<xhtml:li id="li.3">
				<a href="#tab3"><em>Tab Three Label</em></a>
			</xhtml:li>
		</xhtml:ul>
		<xhtml:div class="yui-content">
			<xhtml:div id="tab1">
				<p>Tab One Content</p>
			</xhtml:div>
			<xhtml:div id="tab2">
				<p>Tab Two Content</p>
			</xhtml:div>
			<xhtml:div id="tab3">
				<p>Tab Three Content</p>
			</xhtml:div>
		</xhtml:div>
	</xhtml:div>

of which TabView structure would be:

	<xhtml:div id="demo" class="yui-navset">
		<xhtml:ul class="yui-nav">
		</xhtml:ul>
		<xhtml:div class="yui-content">
		</xhtml:div>
	</xhtml:div>

which I think I can manage in XBL.

However, for tab I need to add 2 separate components at different places.

			<xhtml:li id="li.1">
				<a href="#tab1"><em>Tab One Label</em></a>
			</xhtml:li>

			<xhtml:div id="tab1">
				<p>Tab One Content</p>
			</xhtml:div>


I am struggling with this now - that in xbl:template section of tab-binding, how do I specify that there are 2 components to add at separate places?

Can you provide with some input to start with ?

with regards
Pralhad