Orbeon Forms community mailing list

event handling with css selectors

Classic

List

Threaded

6 messages Options

Henrik Pettersen

event handling with css selectors

All,

I came across this rather neat way of handling events using css selectors:
http://encytemedia.com/event-selectors/

Perhaps this could be used for templating xforms controls?

   '#hover-text a:mouseover': function(element) {
       /* the rest follows from onmouseover in xforms.css (848)*
        var target = ORBEON.xforms.Events._findParentXFormsControl (YAHOO.util.Event.getTarget(event));
        if (target != null) {

            if (ORBEON.util.Dom.hasClass(target, "xforms-help-image")) {
                // Show help tool-tip
                var label = target.nextSibling;
                while (!ORBEON.util.Dom.isElement(label)) label = target.nextSibling;
                var control = document.getElementById(label.htmlFor);
                ORBEON.xforms.Events._showToolTip (event, label, "xforms-help", ORBEON.xforms.Controls.getHelpMessage(control));
            } else if (ORBEON.util.Dom.hasClass(target, "xforms-alert-active")) {
                var control = document.getElementById (target.htmlFor);
                var message = ORBEON.xforms.Controls.getAlertMessage(control);
                if (message != "") {
                    // Show alert tool-tip
                    ORBEON.xforms.Events._showToolTip (event, target, "xforms-alert", ORBEON.xforms.Controls.getAlertMessage(control));
                }
            }
        }

   },

   '#icons a:mouseout': function(element) {
       /* the rest follows from onmouseover in xforms.css (848)*
        var target = ORBEON.xforms.Events._findParentXFormsControl(YAHOO.util.Event.getTarget(event));
        if (target != null) {

            // Hide help
            if (ORBEON.util.Dom.hasClass(target, "xforms-help-image")
                    || ORBEON.util.Dom.hasClass(target, "xforms-alert-active"))
                tt_Hide();
        }
   }

I'm going to give them a whirl.

Henrik

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Larry T. Chen

Bug with xf:submission replace="instance" when using XHTML output option in epilogue-servlet.xpl

Hi All,

Here's a really convoluted bug that took me all day to track down. When
using the XHTML output option in epilogue-servlet.xpl (by uncommenting
the "ASSUME SOME XHTML CLIENTS" block and commenting out the "ASSUME NO
XHTML CLIENTS"), background submissions using replace="instance" that
feed an itemset of a select1 control appear to have some issues The
submission is invoked and the server-side XML service is called
correctly, but when the form tries to process the results and feed it to
the itemset it displays "Error while processing response: template has
no properties" on the client-side form.

This issue goes away when I switch to using HTML in epilogue-servlet.
(I'm running Orbeon Forms through a filter).

I don't know how to make epilogue-portlet generate XHTML. If someone
could show me how to do so, I could test the XForms Sandbox to see if
the issue can be reproduced in the sandbox.

Larry T. Chen
Senior Software Engineer
Intelenet Communications, Inc.

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Alessandro Vernet

Re: event handling with css selectors

Administrator

In reply to this post by Henrik Pettersen

Henrik,

This code looks good when executed by the over-head projector, but it
can be very slow when executed by a browser on a large page.

The implementation (Behaviour, or event:Selector) needs to find the
elements that match the selector. Say your selector is "a.clazz", it
needs to find all the <a> that have a class="clazz" (with maybe other
classes). Unfortunately there is no way to do this efficiently with
the DOM API on large pages. YUI have methods to do this, that are
maybe more efficient than what one would write without thinking too
much about performance, but those methods are still slow. So it is
better to avoid (and I think now we completely got rid of) code that
does things like looking for all the <a> with class "clazz".

Alex

On 12/19/06, Henrik Pettersen <[hidden email]> wrote:

> All,
>
> I came across this rather neat way of handling events using css selectors:
> http://encytemedia.com/event-selectors/
>
> Perhaps this could be used for templating xforms controls?
>
> '#hover-text a:mouseover': function(element) {
> /* the rest follows from onmouseover in xforms.css (848)*
> var target =
> ORBEON.xforms.Events._findParentXFormsControl
> (YAHOO.util.Event.getTarget(event));
> if (target != null) {
>
> if (ORBEON.util.Dom.hasClass(target, "xforms-help-image")) {
> // Show help tool-tip
> var label = target.nextSibling;
> while (!ORBEON.util.Dom.isElement(label))
> label = target.nextSibling;
> var control = document.getElementById(label.htmlFor);
> ORBEON.xforms.Events._showToolTip (event,
> label, "xforms-help",
> ORBEON.xforms.Controls.getHelpMessage(control));
> } else if (ORBEON.util.Dom.hasClass(target,
> "xforms-alert-active")) {
> var control = document.getElementById (target.htmlFor);
> var message =
> ORBEON.xforms.Controls.getAlertMessage(control);
> if (message != "") {
> // Show alert tool-tip
> ORBEON.xforms.Events._showToolTip
> (event, target, "xforms-alert",
> ORBEON.xforms.Controls.getAlertMessage(control));
> }
> }
> }
>
> },
>
> '#icons a:mouseout': function(element) {
> /* the rest follows from onmouseover in xforms.css (848)*
> var target =
> ORBEON.xforms.Events._findParentXFormsControl(YAHOO.util.Event.getTarget(event));
> if (target != null) {
>
> // Hide help
> if (ORBEON.util.Dom.hasClass(target, "xforms-help-image")
> || ORBEON.util.Dom.hasClass(target,
> "xforms-alert-active"))
> tt_Hide();
> }
> }
>
> I'm going to give them a whirl.
>
> Henrik
>
>
>
>
> --
> You receive this message as a subscriber of the [hidden email]
> mailing list.
> To unsubscribe: mailto:[hidden email]
> For general help: mailto:[hidden email]?subject=help
> ObjectWeb mailing lists service home page: http://www.objectweb.org/wws
>
>
>

--
Blog (XML, Web apps, Open Source):
http://www.orbeon.com/blog/

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet

Alessandro Vernet

Re: Bug with xf:submission replace="instance" when using XHTML output option in epilogue-servlet.xpl

Administrator

In reply to this post by Larry T. Chen

Larry,

On 12/19/06, Larry T. Chen <[hidden email]> wrote:
> Here's a really convoluted bug that took me all day to track down. When
> using the XHTML output option in epilogue-servlet.xpl (by uncommenting
> the "ASSUME SOME XHTML CLIENTS" block and commenting out the "ASSUME NO
> XHTML CLIENTS"), background submissions using replace="instance" that
> feed an itemset of a select1 control appear to have some issues The
> submission is invoked and the server-side XML service is called
> correctly, but when the form tries to process the results and feed it to
> the itemset it displays "Error while processing response: template has
> no properties" on the client-side form.

My pragmatic 2 cents: Unless you really need to generate XHTML, you
might to stay with HTML, just because most people here are using HTML
and you are less likely to have issue with HTML than XHTML.

> I don't know how to make epilogue-portlet generate XHTML. If someone
> could show me how to do so, I could test the XForms Sandbox to see if
> the issue can be reproduced in the sandbox.

The sandbox generates XHTML just like the other pages if you modify
the epilogue. Let us know if you can make a reproducible use case for
this that runs in the sandbox.

Alex
--
Blog (XML, Web apps, Open Source):
http://www.orbeon.com/blog/

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet

Henrik Pettersen

Re: event handling with css selectors

In reply to this post by Alessandro Vernet

Hmmm.... I never considered this. Thanks, Alex!

On 12/21/06, Alessandro Vernet <[hidden email]> wrote:

Henrik,

This code looks good when executed by the over-head projector, but it
can be very slow when executed by a browser on a large page.

The implementation (Behaviour, or event:Selector) needs to find the
elements that match the selector. Say your selector is "a.clazz", it
needs to find all the <a> that have a class="clazz" (with maybe other
classes). Unfortunately there is no way to do this efficiently with
the DOM API on large pages. YUI have methods to do this, that are
maybe more efficient than what one would write without thinking too
much about performance, but those methods are still slow. So it is
better to avoid (and I think now we completely got rid of) code that
does things like looking for all the <a> with class "clazz".

Alex

On 12/19/06, Henrik Pettersen <[hidden email]> wrote:

> All,
>
> I came across this rather neat way of handling events using css selectors:
> http://encytemedia.com/event-selectors/
>
> Perhaps this could be used for templating xforms controls?
>
>    '#hover-text a:mouseover': function(element) {
>        /* the rest follows from onmouseover in xforms.css (848)*
>         var target =
> ORBEON.xforms.Events._findParentXFormsControl
> (YAHOO.util.Event.getTarget(event));
>         if (target != null) {
>
>             if (ORBEON.util.Dom.hasClass(target, "xforms-help-image")) {
>                 // Show help tool-tip
>                 var label = target.nextSibling;
>                 while (!ORBEON.util.Dom.isElement(label))
> label = target.nextSibling;
>                 var control = document.getElementById(label.htmlFor);
>                 ORBEON.xforms.Events._showToolTip (event,
> label, "xforms-help",
> ORBEON.xforms.Controls.getHelpMessage(control));
>             } else if (ORBEON.util.Dom.hasClass(target,
> "xforms-alert-active")) {
>                 var control = document.getElementById (target.htmlFor);
>                 var message =
> ORBEON.xforms.Controls.getAlertMessage(control);
>                 if (message != "") {
>                     // Show alert tool-tip
>                     ORBEON.xforms.Events._showToolTip

> (event, target, "xforms-alert",
> ORBEON.xforms.Controls.getAlertMessage(control));
>                 }
>             }
>         }
>
>    },
>
>    '#icons a:mouseout': function(element) {
>         /* the rest follows from onmouseover in xforms.css (848)*
>         var target =
> ORBEON.xforms.Events._findParentXFormsControl (YAHOO.util.Event.getTarget(event));
>         if (target != null) {
>
>             // Hide help
>             if (ORBEON.util.Dom.hasClass(target, "xforms-help-image")
>                     || ORBEON.util.Dom.hasClass(target,
> "xforms-alert-active"))
>                 tt_Hide();
>         }
>    }
>
> I'm going to give them a whirl.
>
> Henrik
>
>
>
>
> --
> You receive this message as a subscriber of the [hidden email]
> mailing list.
> To unsubscribe: mailto:[hidden email]
> For general help: mailto:[hidden email]?subject=help
> ObjectWeb mailing lists service home page: http://www.objectweb.org/wws
>
>
>

--
Blog (XML, Web apps, Open Source):
http://www.orbeon.com/blog/

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto: [hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Henrik Pettersen

Re: event handling with css selectors

In reply to this post by Alessandro Vernet

All,

just found this benchmark on different CSS selector libraries, in case
you are interested:

http://www.yui-ext.com/playpen/selectors/
http://www.jackslocum.com/blog/2007/01/11/domquery-css-selector-basic-xpath-implementation-with-benchmarks/

Henrik

On 12/21/06, Alessandro Vernet <[hidden email]> wrote:

> Henrik,
>
> This code looks good when executed by the over-head projector, but it
> can be very slow when executed by a browser on a large page.
>
> The implementation (Behaviour, or event:Selector) needs to find the
> elements that match the selector. Say your selector is "a.clazz", it
> needs to find all the <a> that have a class="clazz" (with maybe other
> classes). Unfortunately there is no way to do this efficiently with
> the DOM API on large pages. YUI have methods to do this, that are
> maybe more efficient than what one would write without thinking too
> much about performance, but those methods are still slow. So it is
> better to avoid (and I think now we completely got rid of) code that
> does things like looking for all the <a> with class "clazz".
>
> Alex
>
> On 12/19/06, Henrik Pettersen <[hidden email]> wrote:
> > All,
> >
> > I came across this rather neat way of handling events using css selectors:
> > http://encytemedia.com/event-selectors/
> >
> > Perhaps this could be used for templating xforms controls?
> >
> > '#hover-text a:mouseover': function(element) {
> > /* the rest follows from onmouseover in xforms.css (848)*
> > var target =
> > ORBEON.xforms.Events._findParentXFormsControl
> > (YAHOO.util.Event.getTarget(event));
> > if (target != null) {
> >
> > if (ORBEON.util.Dom.hasClass(target, "xforms-help-image")) {
> > // Show help tool-tip
> > var label = target.nextSibling;
> > while (!ORBEON.util.Dom.isElement(label))
> > label = target.nextSibling;
> > var control = document.getElementById(label.htmlFor);
> > ORBEON.xforms.Events._showToolTip (event,
> > label, "xforms-help",
> > ORBEON.xforms.Controls.getHelpMessage(control));
> > } else if (ORBEON.util.Dom.hasClass(target,
> > "xforms-alert-active")) {
> > var control = document.getElementById (target.htmlFor);
> > var message =
> > ORBEON.xforms.Controls.getAlertMessage(control);
> > if (message != "") {
> > // Show alert tool-tip
> > ORBEON.xforms.Events._showToolTip
> > (event, target, "xforms-alert",
> > ORBEON.xforms.Controls.getAlertMessage(control));
> > }
> > }
> > }
> >
> > },
> >
> > '#icons a:mouseout': function(element) {
> > /* the rest follows from onmouseover in xforms.css (848)*
> > var target =
> > ORBEON.xforms.Events._findParentXFormsControl(YAHOO.util.Event.getTarget(event));
> > if (target != null) {
> >
> > // Hide help
> > if (ORBEON.util.Dom.hasClass(target, "xforms-help-image")
> > || ORBEON.util.Dom.hasClass(target,
> > "xforms-alert-active"))
> > tt_Hide();
> > }
> > }
> >
> > I'm going to give them a whirl.
> >
> > Henrik
> >
> >
> >
> >
> > --
> > You receive this message as a subscriber of the [hidden email]
> > mailing list.
> > To unsubscribe: mailto:[hidden email]
> > For general help: mailto:[hidden email]?subject=help
> > ObjectWeb mailing lists service home page: http://www.objectweb.org/wws
> >
> >
> >
>
>
> --
> Blog (XML, Web apps, Open Source):
> http://www.orbeon.com/blog/
>
>
>
>
> --
> You receive this message as a subscriber of the [hidden email] mailing list.
> To unsubscribe: mailto:[hidden email]
> For general help: mailto:[hidden email]?subject=help
> ObjectWeb mailing lists service home page: http://www.objectweb.org/wws
>
>
>