XBL executes on an attribute?

[Aaron Reed]

Hi,

I know that in XBL I can attach a binding to an element based on CSS.
For example, I can do:

@namespace xf url(http://www.w3.org/2002/xforms);

*[xf|mustUnderstand="true"] {
-moz-binding:
url('chrome://xforms/content/xforms.xml#xforms-mustUnderstand);
}

and that inside this binding I can execute javascript to handle this
XForms attribute on an element from any namespace.

However, I'll run into problems if this element already has an XBL
binding of its own. We'd essentially replace the binding that was on
this element with ours and we really don't need that. We just want to
execute some JS that is independent of any other binding on the element.
Is there any way to currently do that in XBL or will there be a way to
do something like that in XBL2? Like have a 'readonly' or 'parasite'
binding that isn't allowed anonymous content and can't modify the bound
element? It would save us from having to walk all the way through the
DOM looking for such elements and it would also allow us to handle
dynamically inserted elements that have this attribute or elements that
might add this attribute dynamically.

--Aaron

[Ian Hickson]

On Mon, 28 Aug 2006, Aaron Reed wrote:
>
> We just want to execute some JS that is independent of any other binding
> on the element. Is there any way to currently do that in XBL or will
> there be a way to do something like that in XBL2?

Yes, in XBL2 if you use the element="" binding mechanism you can bind as
many bindings as you want to any element.

--
Ian Hickson U+1047E )\._.,--....,'``. fL
http://ln.hixie.ch/ U+263A /, _.. \ _\ ;`._ ,.
Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'

[Sean Hogan]

I'd like to see more examples of solutions that XBL2 provides for common
UI patterns.

e.g.
1. show/hide button. The button should not be part of the html source
code for the page (should be added by XBL), nor should it necessarily be
part of the tree that it will be hiding/showing (rather it should be
anchored to some uniquely identifiable part of the page).

2. switch and tabbox

3. document-map

4. user-selectable form-layout, e.g.
- vanilla html form
- vanilla html form + pop-up help boxes
- wizard mode

5. pop-up footnotes. Backwards compatible source code:
<a href="#footnote1">[#1]</a> ... <a id="footnote1">Footnote 1</a>

Maybe I don't understand the spec, but I can't see these patterns being
facilitated and I think they are valid targets.

cheers,
Sean

[Ian Hickson]

On Fri, 1 Sep 2006, Sean Hogan wrote:
>
> I'd like to see more examples of solutions that XBL2 provides for common
> UI patterns.

I've added some examples that you suggested.

> e.g.
> 1. show/hide button. The button should not be part of the html source
> code for the page (should be added by XBL)

The <details> example does this:

http://www.w3.org/TR/xbl/#simple-shadow-example

> nor should it necessarily be part of the tree that it will be
> hiding/showing (rather it should be anchored to some uniquely
> identifiable part of the page).

I don't really understand what you're asking for here. Could you give an
example of what you mean by "anchored" and "part of the page"? An example
of a page with this effect (though of course not using XBL) would be
really useful.

> 2. switch and tabbox

Not sure what you mean by "switch", but I added a tabbox example to the
xblSetInsertionPoint section.

> 3. document-map

Not sure what you mean by this.

> 4. user-selectable form-layout, e.g.
> - vanilla html form
> - vanilla html form + pop-up help boxes
> - wizard mode

Added a couple of examples for this in the HTML Forms section.

> 5. pop-up footnotes. Backwards compatible source code:
> <a href="#footnote1">[#1]</a> ... <a id="footnote1">Footnote 1</a>

Hm, tough one. I mean, you could do that one with XBL, but it would be
pretty ugly -- you'd basically just do it by a bunch of JavaScript,
without really using the XBL features at all.

Thanks for your feedback,

[Sean Hogan]

Thanks for the reply.

I think things are clearer for me now.

I had assumed that XBL2 was intended to be *the* new way to deliver
*all* javascript and create rich, dynamic UIs.

I was also hoping XBL2 templates and handlers would all but do away with
createElement and addEventListener, etc but it seems that anything
moderately complex still requires them.

I need to create some example pages for some of my suggested UI
"patterns"... (TODO)

In the mean-time I have added a bit more explanation below...
plus there seem to be a few bugs in the example code in the spec which I
have also commented on.

Ian Hickson wrote:
>> e.g.
>> 1. show/hide button. The button should not be part of the html source
>> code for the page (should be added by XBL)
>>
>
> The <details> example does this:
>
> http://www.w3.org/TR/xbl/#simple-shadow-example
>

This code would seem to hide the "container" div of the details element
even if the "container" rather than the "header" div is clicked while
the details element is in the open state.

I think it needs
this.shadowTree.getElementById("header").addEventHandler() in
xblBindingAttached().

>> 2. switch and tabbox
>>
>
> Not sure what you mean by "switch", but I added a tabbox example to the
> xblSetInsertionPoint section.
>

A switch as in the proposed HTML5 element.
http://whatwg.org/specs/web-apps/current-work/#switch

There seems to be a couple of bugs in that example code.

<div class="tabs"/> should be <div class="tabs" id="tabs"> to make the rest of the code work.

The created divs used as individual tabs need a "selected" attribute to be set/reset as appropriate.
This will make the ".tabs > div.selected" style valid.

I've generally thought that the use of implied 'this' wasn't valid across browsers.
I just did a test in Firefox and it doesn't seem to work.

addTabFor has a missing "}" and should read:
function(section) {
var tab = document.createElementNS('http://www.w3.org/ns/xbl', 'div');
tab.appendChild(document.createTextNode(section.getAttribute('title')););
tab.addEventListener('click', function (_this) { return function (event) {
_this.current = section;
event.preventDefault();
}(this) }/* bracket was missing */, false);
this.shadowTree.getElementById('tabs').appendChild(tab);
}

>> 3. document-map
>>
>
> Not sure what you mean by this.
>

As in a word-processor document-map. Or even something simpler like S5:
http://meyerweb.com/eric/tools/s5/
S5 would be a great example for XBL2.

>> 4. user-selectable form-layout, e.g.
>> - vanilla html form
>> - vanilla html form + pop-up help boxes
>> - wizard mode
>>
>
> Added a couple of examples for this in the HTML Forms section.
>

Yes. That was easier than I expected.

>
>
>> 5. pop-up footnotes. Backwards compatible source code:
>> <a href="#footnote1">[#1]</a> ... <a id="footnote1">Footnote 1</a>
>>
>
> Hm, tough one. I mean, you could do that one with XBL, but it would be
> pretty ugly -- you'd basically just do it by a bunch of JavaScript,
> without really using the XBL features at all.
>

This was when I realized that XBL2 wasn't intended to be as
comprehensive as I had assumed.
> Thanks for your feedback,
>
And yours.

[Erik Arvidsson]

On 10/6/06, Sean Hogan <shog...@westnet.com.au> wrote:
> This code would seem to hide the "container" div of the details element
> even if the "container" rather than the "header" div is clicked while
> the details element is in the open state.
>
> I think it needs
> this.shadowTree.getElementById("header").addEventHandler() in
> xblBindingAttached().

You could also check that the header contains the target

--
erik

[Ian Hickson]

On Sat, 7 Oct 2006, Sean Hogan wrote:
>
> I think things are clearer for me now.

Great!

> I had assumed that XBL2 was intended to be *the* new way to deliver *all*
> javascript and create rich, dynamic UIs.

No, even XBL is not the answer to all the world's problems. :-)

> I was also hoping XBL2 templates and handlers would all but do away with
> createElement and addEventListener, etc but it seems that anything
> moderately complex still requires them.

Yup.

> > The <details> example does this:
> >
> > http://www.w3.org/TR/xbl/#simple-shadow-example
>

> This code would seem to hide the "container" div of the details
> element even if the "container" rather than the "header" div is clicked
> while the details element is in the open state.

The behaviour you describe is the intended behaviour.

> > > 2. switch and tabbox
> >
> > Not sure what you mean by "switch", but I added a tabbox example to
> > the xblSetInsertionPoint section.
>
> A switch as in the proposed HTML5 element.
> http://whatwg.org/specs/web-apps/current-work/#switch

It's not yet really clear how <switch> in HTML5 will work (if we keep it).
So it's hard to implement in XBL. :-)

> There seems to be a couple of bugs in that example code.
>
> <div class="tabs"/> should be <div class="tabs" id="tabs"> to make the rest of
> the code work.

Fixed.

> The created divs used as individual tabs need a "selected" attribute to
> be set/reset as appropriate. This will make the ".tabs > div.selected"
> style valid.

Oops. Fixed.

> I've generally thought that the use of implied 'this' wasn't valid across
> browsers. I just did a test in Firefox and it doesn't seem to work.

Not sure what you're referring to here.

> addTabFor has a missing "}" and should read: function(section) {
> var tab = document.createElementNS('http://www.w3.org/ns/xbl', 'div');
> tab.appendChild(document.createTextNode(section.getAttribute('title')););
> tab.addEventListener('click', function (_this) { return function (event)
> {
> _this.current = section;
> event.preventDefault();
> }(this) }/* bracket was missing */, false);
> this.shadowTree.getElementById('tabs').appendChild(tab);
> }

You're right that a bracket was missing, but it should have been at the
start of the line, not after the "(this)". Fixed.

> > > 3. document-map
> >
> > Not sure what you mean by this.
>
> As in a word-processor document-map. Or even something simpler like S5:
> http://meyerweb.com/eric/tools/s5/
> S5 would be a great example for XBL2.

S5 would probably be better handled by CSS Presentation Levels:

http://www.w3.org/TR/css3-preslev/

...but yeah, you could do something like this with XBL. It would be very
similar to the tab/wizard examples.

> > > 5. pop-up footnotes. Backwards compatible source code:
> > > <a href="#footnote1">[#1]</a> ... <a id="footnote1">Footnote 1</a>
> >
> > Hm, tough one. I mean, you could do that one with XBL, but it would be
> > pretty ugly -- you'd basically just do it by a bunch of JavaScript,
> > without really using the XBL features at all.
>
> This was when I realized that XBL2 wasn't intended to be as
> comprehensive as I had assumed.

Yeah. Can't solve everything without making the language far too difficult
to understand... and XBL is already pretty hard to understand as is. :-/

Thanks again for your input,

[Sean Hogan]

Ian Hickson wrote:
> On Sat, 7 Oct 2006, Sean Hogan wrote:
>
>> I've generally thought that the use of implied 'this' wasn't valid across
>> browsers. I just did a test in Firefox and it doesn't seem to work.
>>
>
> Not sure what you're referring to here.
>

Sorry. I wasn't clear.

Looking at the example code for tab-box under xblSetInsertionPoint:
http://www.mozilla.org/projects/xbl/xbl2.html#xblsetinsertionpoint

xblBindingAttached() calls this.updateTabs() (OK)

updateTabs() calls clearTabs() and addTabFor(), as functions not as
methods (that's what I meant by implied 'this')

That's not going to work is it?

[Ian Hickson]

Woops! Indeed that won't work. Fixed.

[Sean Hogan]

I've been implementing XBL2 in javascript. A few demos are up at:

http://www.meekostuff.net/xbl2/showcase/index.html

Feedback is welcome.

There's still a lot more to do, and I'm only aiming for a partial
implementation, but it has raised a few questions about the spec:

1. Processing Instructions in HTML (as opposed to XML) aren't detected
in many browsers.
How about <link rel="bindings" type="text/xml" href="binding.xml" /> as
an alternative?

2. Ordinary scripts can override native methods of elements. It should
be possible for XBL bindings to as well.
Perhaps binding documents linked with rel="system bindings"?

3. Shouldn't xblBindingAttached be executed when the sub-tree is ready?
Or maybe there could be a xblSubtreeReady method?

4. It seems illogical to have an xblBindingAttached, but not
xblBindingDetached.

5. Is the global script scope (and the Window object) for a binding
document the same as that of the bound document? (apart from document,
location, history and cookie properties).
I guess the motivating question is: are functions, classes, etc declared
in a bound document available in the binding document context, and
vice-versa?

6. Does ElementXBL.addBinding(url) add the binding if it has already
been added with addBinding?

7. 'Anything else ("modifier")' in Section 6.7 is under specified.

8. The @extends attribute on a binding doesn't match the usual
understanding of extends.
I'm sure you'll getting people expecting to access
this.baseBinding.method() as this.method()
Also, when ES4 comes along you will get bindings written as:
<binding element="*" extends="#bindingA">
<implementation>
new class classB extends classA { }
</implementation>
</binding>

Shouldn't @extends be @base-binding?

9. The relationship between external and internal objects and the
implementation prototype seems wrong. (Section 5.4)
Shouldn't the [[Prototype]] property of the internal object be set to
the implementation prototype object.
Then any methods or properties on the implementation prototype are added
to the external object as though they are bound to the internal object.

Something like:
var prototype = ... ; // from binding document
var implementation = function() {};
implementation.prototype = prototype;
var internal = new implementation;
var external = {};
for (var method in implementation.prototype) {
external[method] = function() {
implementation.prototype[method].apply(internal, arguments); }
}

10. Shouldn't there be a ElementXBL.getBinding(url)? I can't see that
the current spec facilitates this.

cheers,
Sean

[Sean Hogan]

You may find the (hopefully valid) status report for my XBL2
implementation at

http://www.meekostuff.net/xbl2/status.html

cheers,
Sean