You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Andrew Robinson <an...@gmail.com> on 2007/05/25 17:53:44 UTC
Re: Javascript and JSF
Yes
There is a submit on event control in the sandbox that will submit the form.
If you want to submit one control, I would suggest the a4j:support from
JBoss Ajax4Jsf that allows you to submit only one control and update the
page using AJAX.
There are many more answers to your question, so the question really is what
is you specific use case?
On 5/25/07, Balaji Saranathan <ba...@wipro.com> wrote:
>
> Hi,
>
>
>
> Is it possible to capture a JavaScript event and update a selected JSF
> component on the page?
>
>
>
> Regards
>
> Balaji
>
>
>
>
>
> The information contained in this electronic message and any attachments
> to this message are intended for the exclusive use of the addressee(s) and
> may contain proprietary, confidential or privileged information. If you are
> not the intended recipient, you should not disseminate, distribute or copy
> this e-mail. Please notify the sender immediately and destroy all copies of
> this message and any attachments.
>
> WARNING: Computer viruses can be transmitted via email. The recipient
> should check this email and any attachments for the presence of viruses. The
> company accepts no liability for any damage caused by any virus transmitted
> by this email.
>
> www.wipro.com
>
Re: Javascript and JSF
Posted by Andrew Robinson <an...@gmail.com>.
I forgot one more point, make sure you store the area in a input hidden
element so you know which one was clicked on the server.
<h:form id="myForm">
<a4j:jsFunction name="onImageAreaClicked" ... />
<h:inputHidden id="x" value="#{myBean.myArea}" />
...
<area ... onclick="document.getElementById("myForm:x").value='area1';onImageAreaClicked();"
/>
</h:form>
On 5/25/07, Balaji Saranathan <ba...@wipro.com> wrote:
>
> Thanks Andrew.
>
> I'm going to try these ideas this weekend. Hope to get it done by the end
> of this week.
>
>
>
> -----Original Message-----
> *From:* Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
> *Sent:* Friday, May 25, 2007 12:21 PM
> *To:* MyFaces Discussion; balaji.saranathan@wipro.com
> *Subject:* Re: Javascript and JSF
>
>
>
> Oops forgot the "()" in the onclick, hopefully you picked that up.
>
> On 5/25/07, *Andrew Robinson* < andrew.rw.robinson@gmail.com> wrote:
>
> Okay, your best bet is a custom component for the "area" tag.
>
> In the renderer for this new component, use the AjaxRendererUtils:
>
> public class HtmlArea
> extends UIComponentBase
> {
> // all the standard component stuff ...
> }
>
> public class HtmlAreaRenderer
> extends RendererBase
> {
> protected Class getComponentClass()
> {
> return HtmlArea.class;
> }
>
> protected void doEncodeEnd(ResponseWriter writer, FacesContext context,
> UIComponent component) throws IOException
> {
> writer.startElement("area", component);
> // write your non-onclick attributes here ...
> writer.writeAttribute("onclick",
> AjaxRendererUtils.buildOnClick(component, context), null);
> writer.endElement("area");
> }
> }
>
>
> Then just put an a4j:region around the area if you only want a subset of
> values to be submitted & updated.
>
> The other alternative is to not use the buildOnClick, but instead just put
> an a4j:support under your custom component:
>
> <my:area ...>
> <a4j:support event="onclick" ... />
> </my:area>
>
> Or if you don't want to create a custom component:
>
> <a4j:jsFunction name="onImageAreaClicked" ... />
>
> <area ... onclick="onImageAreaClicked" />
>
> This last one is the least effort obviously
>
> -Andrew
>
>
>
> On 5/25/07, *Balaji Saranathan* < balaji.saranathan@wipro.com> wrote:
>
> Thanks Andrew.
>
> I'm currently trying to use Ajax4Jsf on top of my MyFaces JSF application
> to enable Ajax capabilities.
>
> I'm trying to prototype a device UI where the "Onclick" JS events of a
> image Map opens up a different set of configuration parameters for the
> device. This keeps changing as per the Map Area clicked. I'm not sure how to
> achieve this.
>
>
>
> My code is something like this.
>
>
>
> <h:graphicImage id="mapImage" url="/images/ device_big.gif"
> usemap="#2004"/>
>
> <map name='Device1'>
>
> <area shape='rect' id='Key1' coords='178,71,203,83' title='Key1'
> nohref='True' onClick="alert('test');" />
>
> <area shape='rect' id='Key2' coords='178,83,203,95' title='Key2'
> nohref='True' onClick="alert('test');" />
>
>
>
> This onclick should be mapped to updating a couple of JSF components on
> the page.
>
>
>
> Regards
>
> Balaji
>
> -----Original Message-----
> *From:* Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
> *Sent:* Friday, May 25, 2007 11:54 AM
> *To:* MyFaces Discussion; balaji.saranathan@wipro.com
> *Subject:* Re: Javascript and JSF
>
>
>
> Yes
>
> There is a submit on event control in the sandbox that will submit the
> form.
>
> If you want to submit one control, I would suggest the a4j:support from
> JBoss Ajax4Jsf that allows you to submit only one control and update the
> page using AJAX.
>
> There are many more answers to your question, so the question really is
> what is you specific use case?
>
> On 5/25/07, *Balaji Saranathan* < balaji.saranathan@wipro.com> wrote:
>
> Hi,
>
>
>
> Is it possible to capture a JavaScript event and update a selected JSF
> component on the page?
>
>
>
> Regards
>
> Balaji
>
>
>
>
>
>
> The information contained in this electronic message and any attachments
> to this message are intended for the exclusive use of the addressee(s) and
> may contain proprietary, confidential or privileged information. If you are
> not the intended recipient, you should not disseminate, distribute or copy
> this e-mail. Please notify the sender immediately and destroy all copies of
> this message and any attachments.
>
> WARNING: Computer viruses can be transmitted via email. The recipient
> should check this email and any attachments for the presence of viruses. The
> company accepts no liability for any damage caused by any virus transmitted
> by this email.
>
> www.wipro.com
>
>
>
>
> The information contained in this electronic message and any attachments
> to this message are intended for the exclusive use of the addressee(s) and
> may contain proprietary, confidential or privileged information. If you are
> not the intended recipient, you should not disseminate, distribute or copy
> this e-mail. Please notify the sender immediately and destroy all copies of
> this message and any attachments.
>
> WARNING: Computer viruses can be transmitted via email. The recipient
> should check this email and any attachments for the presence of viruses. The
> company accepts no liability for any damage caused by any virus transmitted
> by this email.
>
> www.wipro.com
>
>
>
>
>
> The information contained in this electronic message and any attachments
> to this message are intended for the exclusive use of the addressee(s) and
> may contain proprietary, confidential or privileged information. If you are
> not the intended recipient, you should not disseminate, distribute or copy
> this e-mail. Please notify the sender immediately and destroy all copies of
> this message and any attachments.
>
> WARNING: Computer viruses can be transmitted via email. The recipient
> should check this email and any attachments for the presence of viruses. The
> company accepts no liability for any damage caused by any virus transmitted
> by this email.
>
> www.wipro.com
>
RE: Javascript and JSF
Posted by Balaji Saranathan <ba...@wipro.com>.
Thanks Andrew.
I'm going to try these ideas this weekend. Hope to get it done by the end of
this week.
-----Original Message-----
From: Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
Sent: Friday, May 25, 2007 12:21 PM
To: MyFaces Discussion; balaji.saranathan@wipro.com
Subject: Re: Javascript and JSF
Oops forgot the "()" in the onclick, hopefully you picked that up.
On 5/25/07, Andrew Robinson < andrew.rw.robinson@gmail.com
<ma...@gmail.com> > wrote:
Okay, your best bet is a custom component for the "area" tag.
In the renderer for this new component, use the AjaxRendererUtils:
public class HtmlArea
extends UIComponentBase
{
// all the standard component stuff ...
}
public class HtmlAreaRenderer
extends RendererBase
{
protected Class getComponentClass()
{
return HtmlArea.class;
}
protected void doEncodeEnd(ResponseWriter writer, FacesContext context,
UIComponent component) throws IOException
{
writer.startElement("area", component);
// write your non-onclick attributes here ...
writer.writeAttribute("onclick",
AjaxRendererUtils.buildOnClick(component, context), null);
writer.endElement("area");
}
}
Then just put an a4j:region around the area if you only want a subset of
values to be submitted & updated.
The other alternative is to not use the buildOnClick, but instead just put
an a4j:support under your custom component:
<my:area ...>
<a4j:support event="onclick" ... />
</my:area>
Or if you don't want to create a custom component:
<a4j:jsFunction name="onImageAreaClicked" ... />
<area ... onclick="onImageAreaClicked" />
This last one is the least effort obviously
-Andrew
On 5/25/07, Balaji Saranathan < <ma...@wipro.com>
balaji.saranathan@wipro.com> wrote:
Thanks Andrew.
I'm currently trying to use Ajax4Jsf on top of my MyFaces JSF application to
enable Ajax capabilities.
I'm trying to prototype a device UI where the "Onclick" JS events of a image
Map opens up a different set of configuration parameters for the device.
This keeps changing as per the Map Area clicked. I'm not sure how to achieve
this.
My code is something like this.
<h:graphicImage id="mapImage" url="/images/ device_big.gif" usemap="#2004"/>
<map name='Device1'>
<area shape='rect' id='Key1' coords='178,71,203,83' title='Key1'
nohref='True' onClick="alert('test');" />
<area shape='rect' id='Key2' coords='178,83,203,95' title='Key2'
nohref='True' onClick="alert('test');" />
This onclick should be mapped to updating a couple of JSF components on the
page.
Regards
Balaji
-----Original Message-----
From: Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
Sent: Friday, May 25, 2007 11:54 AM
To: MyFaces Discussion; balaji.saranathan@wipro.com
Subject: Re: Javascript and JSF
Yes
There is a submit on event control in the sandbox that will submit the form.
If you want to submit one control, I would suggest the a4j:support from
JBoss Ajax4Jsf that allows you to submit only one control and update the
page using AJAX.
There are many more answers to your question, so the question really is what
is you specific use case?
On 5/25/07, Balaji Saranathan < <ma...@wipro.com>
balaji.saranathan@wipro.com> wrote:
Hi,
Is it possible to capture a JavaScript event and update a selected JSF
component on the page?
Regards
Balaji
The information contained in this electronic message and any attachments to
this message are intended for the exclusive use of the addressee(s) and may
contain proprietary, confidential or privileged information. If you are not
the intended recipient, you should not disseminate, distribute or copy this
e-mail. Please notify the sender immediately and destroy all copies of this
message and any attachments.
WARNING: Computer viruses can be transmitted via email. The recipient should
check this email and any attachments for the presence of viruses. The
company accepts no liability for any damage caused by any virus transmitted
by this email.
www.wipro.com
The information contained in this electronic message and any attachments to
this message are intended for the exclusive use of the addressee(s) and may
contain proprietary, confidential or privileged information. If you are not
the intended recipient, you should not disseminate, distribute or copy this
e-mail. Please notify the sender immediately and destroy all copies of this
message and any attachments.
WARNING: Computer viruses can be transmitted via email. The recipient should
check this email and any attachments for the presence of viruses. The
company accepts no liability for any damage caused by any virus transmitted
by this email.
www.wipro.com
The information contained in this electronic message and any attachments to this message are intended for the exclusive use of the addressee(s) and may contain proprietary, confidential or privileged information. If you are not the intended recipient, you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately and destroy all copies of this message and any attachments.
WARNING: Computer viruses can be transmitted via email. The recipient should check this email and any attachments for the presence of viruses. The company accepts no liability for any damage caused by any virus transmitted by this email.
www.wipro.com
Re: Javascript and JSF
Posted by Andrew Robinson <an...@gmail.com>.
Oops forgot the "()" in the onclick, hopefully you picked that up.
On 5/25/07, Andrew Robinson <an...@gmail.com> wrote:
>
> Okay, your best bet is a custom component for the "area" tag.
>
> In the renderer for this new component, use the AjaxRendererUtils:
>
> public class HtmlArea
> extends UIComponentBase
> {
> // all the standard component stuff ...
> }
>
> public class HtmlAreaRenderer
> extends RendererBase
> {
> protected Class getComponentClass()
> {
> return HtmlArea.class;
> }
>
> protected void doEncodeEnd(ResponseWriter writer, FacesContext context,
> UIComponent component) throws IOException
> {
> writer.startElement("area", component);
> // write your non-onclick attributes here ...
> writer.writeAttribute("onclick",
> AjaxRendererUtils.buildOnClick(component, context), null);
> writer.endElement("area");
> }
> }
>
>
> Then just put an a4j:region around the area if you only want a subset of
> values to be submitted & updated.
>
> The other alternative is to not use the buildOnClick, but instead just put
> an a4j:support under your custom component:
>
> <my:area ...>
> <a4j:support event="onclick" ... />
> </my:area>
>
> Or if you don't want to create a custom component:
>
> <a4j:jsFunction name="onImageAreaClicked" ... />
>
> <area ... onclick="onImageAreaClicked" />
>
> This last one is the least effort obviously
>
> -Andrew
>
>
> On 5/25/07, Balaji Saranathan <ba...@wipro.com> wrote:
> >
> > Thanks Andrew.
> >
> > I'm currently trying to use Ajax4Jsf on top of my MyFaces JSF
> > application to enable Ajax capabilities.
> >
> > I'm trying to prototype a device UI where the "Onclick" JS events of a
> > image Map opens up a different set of configuration parameters for the
> > device. This keeps changing as per the Map Area clicked. I'm not sure how to
> > achieve this.
> >
> >
> >
> > My code is something like this.
> >
> >
> >
> > <h:graphicImage id="mapImage" url="/images/ device_big.gif"
> > usemap="#2004"/>
> >
> > <map name='Device1'>
> >
> > <area shape='rect' id='Key1' coords='178,71,203,83' title='Key1'
> > nohref='True' onClick="alert('test');" />
> >
> > <area shape='rect' id='Key2' coords='178,83,203,95' title='Key2'
> > nohref='True' onClick="alert('test');" />
> >
> >
> >
> > This onclick should be mapped to updating a couple of JSF components on
> > the page.
> >
> >
> >
> > Regards
> >
> > Balaji
> >
> > -----Original Message-----
> > *From:* Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
> > *Sent:* Friday, May 25, 2007 11:54 AM
> > *To:* MyFaces Discussion; balaji.saranathan@wipro.com
> > *Subject:* Re: Javascript and JSF
> >
> >
> >
> > Yes
> >
> > There is a submit on event control in the sandbox that will submit the
> > form.
> >
> > If you want to submit one control, I would suggest the a4j:support from
> > JBoss Ajax4Jsf that allows you to submit only one control and update the
> > page using AJAX.
> >
> > There are many more answers to your question, so the question really is
> > what is you specific use case?
> >
> > On 5/25/07, *Balaji Saranathan* < balaji.saranathan@wipro.com> wrote:
> >
> > Hi,
> >
> >
> >
> > Is it possible to capture a JavaScript event and update a selected JSF
> > component on the page?
> >
> >
> >
> > Regards
> >
> > Balaji
> >
> >
> >
> >
> >
> >
> > The information contained in this electronic message and any attachments
> > to this message are intended for the exclusive use of the addressee(s) and
> > may contain proprietary, confidential or privileged information. If you are
> > not the intended recipient, you should not disseminate, distribute or copy
> > this e-mail. Please notify the sender immediately and destroy all copies of
> > this message and any attachments.
> >
> > WARNING: Computer viruses can be transmitted via email. The recipient
> > should check this email and any attachments for the presence of viruses. The
> > company accepts no liability for any damage caused by any virus transmitted
> > by this email.
> >
> > www.wipro.com
> >
> >
> >
> > The information contained in this electronic message and any attachments
> > to this message are intended for the exclusive use of the addressee(s) and
> > may contain proprietary, confidential or privileged information. If you are
> > not the intended recipient, you should not disseminate, distribute or copy
> > this e-mail. Please notify the sender immediately and destroy all copies of
> > this message and any attachments.
> >
> > WARNING: Computer viruses can be transmitted via email. The recipient
> > should check this email and any attachments for the presence of viruses. The
> > company accepts no liability for any damage caused by any virus transmitted
> > by this email.
> >
> > www.wipro.com
> >
>
>
Re: Javascript and JSF
Posted by Andrew Robinson <an...@gmail.com>.
Okay, your best bet is a custom component for the "area" tag.
In the renderer for this new component, use the AjaxRendererUtils:
public class HtmlArea
extends UIComponentBase
{
// all the standard component stuff ...
}
public class HtmlAreaRenderer
extends RendererBase
{
protected Class getComponentClass()
{
return HtmlArea.class;
}
protected void doEncodeEnd(ResponseWriter writer, FacesContext context,
UIComponent component) throws IOException
{
writer.startElement("area", component);
// write your non-onclick attributes here ...
writer.writeAttribute("onclick",
AjaxRendererUtils.buildOnClick(component, context), null);
writer.endElement("area");
}
}
Then just put an a4j:region around the area if you only want a subset of
values to be submitted & updated.
The other alternative is to not use the buildOnClick, but instead just put
an a4j:support under your custom component:
<my:area ...>
<a4j:support event="onclick" ... />
</my:area>
Or if you don't want to create a custom component:
<a4j:jsFunction name="onImageAreaClicked" ... />
<area ... onclick="onImageAreaClicked" />
This last one is the least effort obviously
-Andrew
On 5/25/07, Balaji Saranathan <ba...@wipro.com> wrote:
>
> Thanks Andrew.
>
> I'm currently trying to use Ajax4Jsf on top of my MyFaces JSF application
> to enable Ajax capabilities.
>
> I'm trying to prototype a device UI where the "Onclick" JS events of a
> image Map opens up a different set of configuration parameters for the
> device. This keeps changing as per the Map Area clicked. I'm not sure how to
> achieve this.
>
>
>
> My code is something like this.
>
>
>
> <h:graphicImage id="mapImage" url="/images/ device_big.gif"
> usemap="#2004"/>
>
> <map name='Device1'>
>
> <area shape='rect' id='Key1' coords='178,71,203,83' title='Key1'
> nohref='True' onClick="alert('test');" />
>
> <area shape='rect' id='Key2' coords='178,83,203,95' title='Key2'
> nohref='True' onClick="alert('test');" />
>
>
>
> This onclick should be mapped to updating a couple of JSF components on
> the page.
>
>
>
> Regards
>
> Balaji
>
> -----Original Message-----
> *From:* Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
> *Sent:* Friday, May 25, 2007 11:54 AM
> *To:* MyFaces Discussion; balaji.saranathan@wipro.com
> *Subject:* Re: Javascript and JSF
>
>
>
> Yes
>
> There is a submit on event control in the sandbox that will submit the
> form.
>
> If you want to submit one control, I would suggest the a4j:support from
> JBoss Ajax4Jsf that allows you to submit only one control and update the
> page using AJAX.
>
> There are many more answers to your question, so the question really is
> what is you specific use case?
>
> On 5/25/07, *Balaji Saranathan* < balaji.saranathan@wipro.com> wrote:
>
> Hi,
>
>
>
> Is it possible to capture a JavaScript event and update a selected JSF
> component on the page?
>
>
>
> Regards
>
> Balaji
>
>
>
>
>
>
> The information contained in this electronic message and any attachments
> to this message are intended for the exclusive use of the addressee(s) and
> may contain proprietary, confidential or privileged information. If you are
> not the intended recipient, you should not disseminate, distribute or copy
> this e-mail. Please notify the sender immediately and destroy all copies of
> this message and any attachments.
>
> WARNING: Computer viruses can be transmitted via email. The recipient
> should check this email and any attachments for the presence of viruses. The
> company accepts no liability for any damage caused by any virus transmitted
> by this email.
>
> www.wipro.com
>
>
>
> The information contained in this electronic message and any attachments
> to this message are intended for the exclusive use of the addressee(s) and
> may contain proprietary, confidential or privileged information. If you are
> not the intended recipient, you should not disseminate, distribute or copy
> this e-mail. Please notify the sender immediately and destroy all copies of
> this message and any attachments.
>
> WARNING: Computer viruses can be transmitted via email. The recipient
> should check this email and any attachments for the presence of viruses. The
> company accepts no liability for any damage caused by any virus transmitted
> by this email.
>
> www.wipro.com
>
RE: Javascript and JSF
Posted by Balaji Saranathan <ba...@wipro.com>.
Thanks Andrew.
I'm currently trying to use Ajax4Jsf on top of my MyFaces JSF application to
enable Ajax capabilities.
I'm trying to prototype a device UI where the "Onclick" JS events of a image
Map opens up a different set of configuration parameters for the device.
This keeps changing as per the Map Area clicked. I'm not sure how to achieve
this.
My code is something like this.
<h:graphicImage id="mapImage" url="/images/ device_big.gif" usemap="#2004"/>
<map name='Device1'>
<area shape='rect' id='Key1' coords='178,71,203,83' title='Key1'
nohref='True' onClick="alert('test');" />
<area shape='rect' id='Key2' coords='178,83,203,95' title='Key2'
nohref='True' onClick="alert('test');" />
This onclick should be mapped to updating a couple of JSF components on the
page.
Regards
Balaji
-----Original Message-----
From: Andrew Robinson [mailto:andrew.rw.robinson@gmail.com]
Sent: Friday, May 25, 2007 11:54 AM
To: MyFaces Discussion; balaji.saranathan@wipro.com
Subject: Re: Javascript and JSF
Yes
There is a submit on event control in the sandbox that will submit the form.
If you want to submit one control, I would suggest the a4j:support from
JBoss Ajax4Jsf that allows you to submit only one control and update the
page using AJAX.
There are many more answers to your question, so the question really is what
is you specific use case?
On 5/25/07, Balaji Saranathan < balaji.saranathan@wipro.com
<ma...@wipro.com> > wrote:
Hi,
Is it possible to capture a JavaScript event and update a selected JSF
component on the page?
Regards
Balaji
The information contained in this electronic message and any attachments to
this message are intended for the exclusive use of the addressee(s) and may
contain proprietary, confidential or privileged information. If you are not
the intended recipient, you should not disseminate, distribute or copy this
e-mail. Please notify the sender immediately and destroy all copies of this
message and any attachments.
WARNING: Computer viruses can be transmitted via email. The recipient should
check this email and any attachments for the presence of viruses. The
company accepts no liability for any damage caused by any virus transmitted
by this email.
www.wipro.com
The information contained in this electronic message and any attachments to this message are intended for the exclusive use of the addressee(s) and may contain proprietary, confidential or privileged information. If you are not the intended recipient, you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately and destroy all copies of this message and any attachments.
WARNING: Computer viruses can be transmitted via email. The recipient should check this email and any attachments for the presence of viruses. The company accepts no liability for any damage caused by any virus transmitted by this email.
www.wipro.com