You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Richard Wallace <rw...@thewallacepack.net> on 2005/06/19 05:04:00 UTC
Dynamically adding form elements client-side
Hello again,
I'm trying to figure out how, if it's possible to add form elements,
like text fields, when a user clicks an add button without having to
have the page resubmit. I'm not even sure it's 100% possible unless the
STATE_SAVING_METHOD is client. And then the javascript would have to
manipulate that hidden field. Or do some kind of AJAX operation to
modify the state when it's being stored server side. At this point, I
think if anything prevents us from adopting JSF at work it would be
dynamically adding form elements. Any suggestions?
Thanks,
Rich
Re: Dynamically adding form elements client-side
Posted by Werner Punz <we...@gmx.at>.
Martin Marinschek wrote:
> By the way: DWR is under the ASL, no licensing problems here for sure!
>
> regards,
>
neither is the MIT license, I just looked it up :-)
Anyway I will look into DWR, it looks really interesting, it might
already deliver some stuff which I need for the next component.
btw.. here is the MIT license
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Re: Dynamically adding form elements client-side
Posted by Martin Marinschek <ma...@gmail.com>.
By the way: DWR is under the ASL, no licensing problems here for sure!
regards,
Martin
On 6/22/05, Werner Punz <we...@gmx.at> wrote:
> Richard Wallace wrote:
> > Werner Punz wrote:
> >
> >> Richard Wallace wrote:
> >>
> >>> Actually, on reflection, I can't really think of a good way to get
> >>> everything I want for free anyways. I think I will need to develop a
> >>> custom component, probably something that is composed of other
> >>> existing UI elements. The three primary use cases I'm looking at
> >>> currently are a dynamic, editable table with at least 2 text fields
> >>> where rows can be added/removed without the need to roundtrip to the
> >>> server, an editable, dynamic table with a drop down list and a text
> >>> field in a row where rows can be added/removed without roundtripping
> >>> and an element where a user can add multiple file upload elements
> >>> without having to roundtrip. i don't really see a way this can all
> >>> be done in JSF without using custom elements.
> >>>
> >>> Of course, I'm open to suggestions.
> >>>
> >>
> >> Not really suggestions, I see it as you, there is no real free lunch
> >> in this case, but hard work.
> >>
> >> But there is a small project on sourceforge which already has an ajax
> >> component in place, not something as sophisticated as what you want to
> >> do, but you can check it out it might give you a headstart with your
> >> things (and also a small push towards donating code yourself if you
> >> want :-), your components sound interesting )
> >>
> >>
> > I have looked at those components. Very neat. I'm a little curious why
> > you didn't use the DWR library
> > (http://www.getahead.ltd.uk/dwr/index.html) for doing the AJAX stuff.
> > I'll definitely consider donating the code and it shouldn't be a
> > problem, just have to clear it with the higher ups.
> >
> Easy answer, the ajaxed autocomplete was adapted under a lot of time
> pressure and I was totally new to the Ajax stuff. It basically came
> as a side requirement for a project with an extremely tight schedule.
> So I basically took the easy approach and looked for preimplemented
> solutions, which I found halfway in the sun blueprints. I basically
> adapted the component, fixed the javascripts to the degree that they
> also work with the IE, added keyboard handling and let them out in the
> wild, because I had to move on projectwise, to keep the schedule.
>
> I am however not very happy with the autocomplete/ajax javascripts as
> they are now. My long term plan is to clean up the javascript mess, of
> the autocomplete control and move it towards the prototype library, or
> something similar.
> The prototype library is very interesting, because it is under a very
> free licensing (MIT) and is heavily driven by rails (thus under very
> active development) and overall very cleanly written.
>
> As for DWR, I was not aware of that one until now, if I had known that,
> I probably would have started with that one instead of the blueprints.
> I will look into it, it looks really promising.
>
>
Re: Dynamically adding form elements client-side
Posted by Werner Punz <we...@gmx.at>.
Richard Wallace wrote:
> Werner Punz wrote:
>
>> Richard Wallace wrote:
>>
>>> Actually, on reflection, I can't really think of a good way to get
>>> everything I want for free anyways. I think I will need to develop a
>>> custom component, probably something that is composed of other
>>> existing UI elements. The three primary use cases I'm looking at
>>> currently are a dynamic, editable table with at least 2 text fields
>>> where rows can be added/removed without the need to roundtrip to the
>>> server, an editable, dynamic table with a drop down list and a text
>>> field in a row where rows can be added/removed without roundtripping
>>> and an element where a user can add multiple file upload elements
>>> without having to roundtrip. i don't really see a way this can all
>>> be done in JSF without using custom elements.
>>>
>>> Of course, I'm open to suggestions.
>>>
>>
>> Not really suggestions, I see it as you, there is no real free lunch
>> in this case, but hard work.
>>
>> But there is a small project on sourceforge which already has an ajax
>> component in place, not something as sophisticated as what you want to
>> do, but you can check it out it might give you a headstart with your
>> things (and also a small push towards donating code yourself if you
>> want :-), your components sound interesting )
>>
>>
> I have looked at those components. Very neat. I'm a little curious why
> you didn't use the DWR library
> (http://www.getahead.ltd.uk/dwr/index.html) for doing the AJAX stuff.
> I'll definitely consider donating the code and it shouldn't be a
> problem, just have to clear it with the higher ups.
>
Easy answer, the ajaxed autocomplete was adapted under a lot of time
pressure and I was totally new to the Ajax stuff. It basically came
as a side requirement for a project with an extremely tight schedule.
So I basically took the easy approach and looked for preimplemented
solutions, which I found halfway in the sun blueprints. I basically
adapted the component, fixed the javascripts to the degree that they
also work with the IE, added keyboard handling and let them out in the
wild, because I had to move on projectwise, to keep the schedule.
I am however not very happy with the autocomplete/ajax javascripts as
they are now. My long term plan is to clean up the javascript mess, of
the autocomplete control and move it towards the prototype library, or
something similar.
The prototype library is very interesting, because it is under a very
free licensing (MIT) and is heavily driven by rails (thus under very
active development) and overall very cleanly written.
As for DWR, I was not aware of that one until now, if I had known that,
I probably would have started with that one instead of the blueprints.
I will look into it, it looks really promising.
Re: Dynamically adding form elements client-side
Posted by Richard Wallace <rw...@thewallacepack.net>.
Werner Punz wrote:
> Richard Wallace wrote:
>
>> Actually, on reflection, I can't really think of a good way to get
>> everything I want for free anyways. I think I will need to develop a
>> custom component, probably something that is composed of other
>> existing UI elements. The three primary use cases I'm looking at
>> currently are a dynamic, editable table with at least 2 text fields
>> where rows can be added/removed without the need to roundtrip to the
>> server, an editable, dynamic table with a drop down list and a text
>> field in a row where rows can be added/removed without roundtripping
>> and an element where a user can add multiple file upload elements
>> without having to roundtrip. i don't really see a way this can all
>> be done in JSF without using custom elements.
>>
>> Of course, I'm open to suggestions.
>>
>
> Not really suggestions, I see it as you, there is no real free lunch
> in this case, but hard work.
>
> But there is a small project on sourceforge which already has an ajax
> component in place, not something as sophisticated as what you want to
> do, but you can check it out it might give you a headstart with your
> things (and also a small push towards donating code yourself if you
> want :-), your components sound interesting )
>
>
I have looked at those components. Very neat. I'm a little curious why
you didn't use the DWR library
(http://www.getahead.ltd.uk/dwr/index.html) for doing the AJAX stuff.
I'll definitely consider donating the code and it shouldn't be a
problem, just have to clear it with the higher ups.
> the project is http://sourceforge.net/projects/jsf-comp the only ajax
> component currently is an autocomplete field, which basically does
> some element tinkering (blends in a filled div on demand which
> simulates a drop down box), also there is an excellent OO javascript
> library which is under MIT license, which delivers some effects and
> good ajax classes.
>
> The ajax component however does not use the Prototype OO lib yet, it
> still uses a somewhat hackish messy code which was taken from the Sun
> blueprints catalog and hacked in no time to IE compatibility.
>
> Also there is the Sun blueprints catalog which has some ajax stuff in
> there already, on java.net.
>
Re: Dynamically adding form elements client-side
Posted by Werner Punz <we...@gmx.at>.
Richard Wallace wrote:
> Werner Punz wrote:
>
>> Richard Wallace wrote:
>>
>>> Werner Punz wrote:
>>>
>>>> Richard Wallace wrote:
>>>>
>>>>> Ok, but how should I "tinker" with the element tree? I'm guessing
>>>>> AJAX will need to come into play. But how do I get access to the
>>>>> element tree? And exactly how should I manipulate it? I'm
>>>>> guessing there's no ready to go methods already in the JSF APIs to
>>>>> accomplish this, are there?
>>>>>
>>>> I think you have a small misunderstanding here what JSF is and what
>>>> you can do.
>>>
>>>
>>>
>>>
>>> I completely understand that.
>>>
>>>> You cannot alter the backend element tree without any refresh, so
>>>> you have to force a refresh to do that in the backend.
>>>
>>>
>>>
>>>
>>> That's why I was wondering if AJAX could be used when a new form
>>> element is being created to modify the backend element tree without
>>> having to refresh the whole page.
>>>
>> Ok a misunderstanding from my part, to my knowlege, you cannot really
>> do that, because the element tree is rebuilt at each subsequent request.
>> The safest bet is to stay on the ajax/client side only for what you
>> want to achieve, and once you hit a refresh, fetch the ajaxed part
>> directly from the request object if you need to do further processing
>> on it.
>>
>> What you also could do is to componentize the ajaxed part of your
>> form, that way you could establish a connection between the element
>> tree and your ajaxed part of your form.
>>
>>
>> Then the flow would look like that...
>> pure client side... do anything with the ajax elements
>>
>> submit or something else which causes a refresh:
>> the value binding and binding mechanisms transfers the values from the
>> ajaxed components to the backend beans for further processing.
>>
>>
>> The third way could be to have the form parameters parsed at request
>> level and then the component subtree rebuilt at the subsequent refresh.
>> But that approach is probably the messiest of all three.
>>
>>
> Actually, on reflection, I can't really think of a good way to get
> everything I want for free anyways. I think I will need to develop a
> custom component, probably something that is composed of other existing
> UI elements. The three primary use cases I'm looking at currently are a
> dynamic, editable table with at least 2 text fields where rows can be
> added/removed without the need to roundtrip to the server, an editable,
> dynamic table with a drop down list and a text field in a row where rows
> can be added/removed without roundtripping and an element where a user
> can add multiple file upload elements without having to roundtrip. i
> don't really see a way this can all be done in JSF without using custom
> elements.
>
> Of course, I'm open to suggestions.
>
Not really suggestions, I see it as you, there is no real free lunch in
this case, but hard work.
But there is a small project on sourceforge which already has an ajax
component in place, not something as sophisticated as what you want to
do, but you can check it out it might give you a headstart with your
things (and also a small push towards donating code yourself if you want
:-), your components sound interesting )
the project is http://sourceforge.net/projects/jsf-comp the only ajax
component currently is an autocomplete field, which basically does some
element tinkering (blends in a filled div on demand which simulates a
drop down box), also there is an excellent OO javascript library which
is under MIT license, which delivers some effects and good ajax classes.
The ajax component however does not use the Prototype OO lib yet, it
still uses a somewhat hackish messy code which was taken from the Sun
blueprints catalog and hacked in no time to IE compatibility.
Also there is the Sun blueprints catalog which has some ajax stuff in
there already, on java.net.
Re: Dynamically adding form elements client-side
Posted by Richard Wallace <rw...@thewallacepack.net>.
Werner Punz wrote:
> Richard Wallace wrote:
>
>> Werner Punz wrote:
>>
>>> Richard Wallace wrote:
>>>
>>>> Ok, but how should I "tinker" with the element tree? I'm guessing
>>>> AJAX will need to come into play. But how do I get access to the
>>>> element tree? And exactly how should I manipulate it? I'm
>>>> guessing there's no ready to go methods already in the JSF APIs to
>>>> accomplish this, are there?
>>>>
>>> I think you have a small misunderstanding here what JSF is and what
>>> you can do.
>>
>>
>>
>> I completely understand that.
>>
>>> You cannot alter the backend element tree without any refresh, so
>>> you have to force a refresh to do that in the backend.
>>
>>
>>
>> That's why I was wondering if AJAX could be used when a new form
>> element is being created to modify the backend element tree without
>> having to refresh the whole page.
>>
> Ok a misunderstanding from my part, to my knowlege, you cannot really
> do that, because the element tree is rebuilt at each subsequent request.
> The safest bet is to stay on the ajax/client side only for what you
> want to achieve, and once you hit a refresh, fetch the ajaxed part
> directly from the request object if you need to do further processing
> on it.
>
> What you also could do is to componentize the ajaxed part of your
> form, that way you could establish a connection between the element
> tree and your ajaxed part of your form.
>
>
> Then the flow would look like that...
> pure client side... do anything with the ajax elements
>
> submit or something else which causes a refresh:
> the value binding and binding mechanisms transfers the values from the
> ajaxed components to the backend beans for further processing.
>
>
> The third way could be to have the form parameters parsed at request
> level and then the component subtree rebuilt at the subsequent refresh.
> But that approach is probably the messiest of all three.
>
>
Actually, on reflection, I can't really think of a good way to get
everything I want for free anyways. I think I will need to develop a
custom component, probably something that is composed of other existing
UI elements. The three primary use cases I'm looking at currently are a
dynamic, editable table with at least 2 text fields where rows can be
added/removed without the need to roundtrip to the server, an editable,
dynamic table with a drop down list and a text field in a row where rows
can be added/removed without roundtripping and an element where a user
can add multiple file upload elements without having to roundtrip. i
don't really see a way this can all be done in JSF without using custom
elements.
Of course, I'm open to suggestions.
Rich
Re: Dynamically adding form elements client-side
Posted by Werner Punz <we...@gmx.at>.
Richard Wallace wrote:
> Werner Punz wrote:
>
>> Richard Wallace wrote:
>>
>>> Ok, but how should I "tinker" with the element tree? I'm guessing
>>> AJAX will need to come into play. But how do I get access to the
>>> element tree? And exactly how should I manipulate it? I'm guessing
>>> there's no ready to go methods already in the JSF APIs to accomplish
>>> this, are there?
>>>
>> I think you have a small misunderstanding here what JSF is and what
>> you can do.
>
>
> I completely understand that.
>
>> You cannot alter the backend element tree without any refresh, so you
>> have to force a refresh to do that in the backend.
>
>
> That's why I was wondering if AJAX could be used when a new form element
> is being created to modify the backend element tree without having to
> refresh the whole page.
>
Ok a misunderstanding from my part, to my knowlege, you cannot really do
that, because the element tree is rebuilt at each subsequent request.
The safest bet is to stay on the ajax/client side only for what you want
to achieve, and once you hit a refresh, fetch the ajaxed part directly
from the request object if you need to do further processing on it.
What you also could do is to componentize the ajaxed part of your form,
that way you could establish a connection between the element tree and
your ajaxed part of your form.
Then the flow would look like that...
pure client side... do anything with the ajax elements
submit or something else which causes a refresh:
the value binding and binding mechanisms transfers the values from the
ajaxed components to the backend beans for further processing.
The third way could be to have the form parameters parsed at request
level and then the component subtree rebuilt at the subsequent refresh.
But that approach is probably the messiest of all three.
Re: Dynamically adding form elements client-side
Posted by Richard Wallace <rw...@thewallacepack.net>.
Werner Punz wrote:
> Richard Wallace wrote:
>
>> Ok, but how should I "tinker" with the element tree? I'm guessing
>> AJAX will need to come into play. But how do I get access to the
>> element tree? And exactly how should I manipulate it? I'm guessing
>> there's no ready to go methods already in the JSF APIs to accomplish
>> this, are there?
>>
> I think you have a small misunderstanding here what JSF is and what
> you can do.
I completely understand that.
> You cannot alter the backend element tree without any refresh, so you
> have to force a refresh to do that in the backend.
That's why I was wondering if AJAX could be used when a new form element
is being created to modify the backend element tree without having to
refresh the whole page.
> If you want to alter the displayed form controls without refresh you
> only can do it with javascript (and ajax if it is dependend on data)
>
> JSF is a plain and pure server side UI api, while javascript a pure
> client side one is. Thus you cannot really change the form rendering
> from pure JSF without any refresh or going the javascript route.
>
Here's an example of the sort of thing that I want to do:
http://tacos.mine.nu:8080/tacos-demo/app?service=page/PartialForms.
If it's impossible to accomplish something like this in JSF right now,
that's fine. I'll just use Tapestry and hope that JSF will be able to
support this idea of "partial forms" in the future. Then again, it's
just a component in Tapestry so I don't see why it can't be a component
in JSF. Unless there really is no way to modify that component tree
without having to resubmit the whole form.
Re: Dynamically adding form elements client-side
Posted by Werner Punz <we...@gmx.at>.
Richard Wallace wrote:
> Ok, but how should I "tinker" with the element tree? I'm guessing AJAX
> will need to come into play. But how do I get access to the element
> tree? And exactly how should I manipulate it? I'm guessing there's no
> ready to go methods already in the JSF APIs to accomplish this, are there?
>
I think you have a small misunderstanding here what JSF is and what you
can do.
You cannot alter the backend element tree without any refresh, so you
have to force a refresh to do that in the backend.
If you want to alter the displayed form controls without refresh you
only can do it with javascript (and ajax if it is dependend on data)
JSF is a plain and pure server side UI api, while javascript a pure
client side one is. Thus you cannot really change the form rendering
from pure JSF without any refresh or going the javascript route.
Re: Dynamically adding form elements client-side
Posted by Richard Wallace <rw...@thewallacepack.net>.
Werner Punz wrote:
> Richard Wallace wrote:
>
>> Werner Punz wrote:
>>
>>> Richard Wallace wrote:
>>>
>>>> Hello again,
>>>>
>>>> I'm trying to figure out how, if it's possible to add form
>>>> elements, like text fields, when a user clicks an add button
>>>> without having to have the page resubmit.
>>>
>>>
>>>
>>> Only by using javascript, but without javascript no.
>>> That is a limit caused by the beast which is called html.
>>> With javascript you can do it by altering the dom
>>> tree.
>>
>>
>>
>> I understand that, but how do you have JSF pickup the new element(s)
>> when restoring state when the form is submitted?
>>
> To my knowledge by adding child elements to an element binding in
> the backend bean.
> JSF basically builds an element tree internally, and you basically can
> access this tree over various methods. - One being the element bindind
> mechanism.
> During the rendering phase, the elements then are rendered into the
> target (mostly html)
>
> Thus you cann add and remove those elements by tinkering with the
> element tree in your backend bean.
>
Ok, but how should I "tinker" with the element tree? I'm guessing AJAX
will need to come into play. But how do I get access to the element
tree? And exactly how should I manipulate it? I'm guessing there's no
ready to go methods already in the JSF APIs to accomplish this, are there?
Rich
Re: Dynamically adding form elements client-side
Posted by Werner Punz <we...@gmx.at>.
Richard Wallace wrote:
> Werner Punz wrote:
>
>> Richard Wallace wrote:
>>
>>> Hello again,
>>>
>>> I'm trying to figure out how, if it's possible to add form elements,
>>> like text fields, when a user clicks an add button without having to
>>> have the page resubmit.
>>
>>
>> Only by using javascript, but without javascript no.
>> That is a limit caused by the beast which is called html.
>> With javascript you can do it by altering the dom
>> tree.
>
>
> I understand that, but how do you have JSF pickup the new element(s)
> when restoring state when the form is submitted?
>
To my knowledge by adding child elements to an element binding in
the backend bean.
JSF basically builds an element tree internally, and you basically can
access this tree over various methods. - One being the element bindind
mechanism.
During the rendering phase, the elements then are rendered into the
target (mostly html)
Thus you cann add and remove those elements by tinkering with the
element tree in your backend bean.
Re: Dynamically adding form elements client-side
Posted by Richard Wallace <rw...@thewallacepack.net>.
Werner Punz wrote:
> Richard Wallace wrote:
>
>> Martin Marinschek wrote:
>>
>>> You need to explicitly add these new elements, this is entirely your
>>> responsibility...
>>>
>>>
>>>
>> I understand that, my question is "How do I add the new elements?"
>>
>
> If you can do a refresh, you simple do a binding to the backend bean,
> and there you can access the elements via a getChildElements (or
> something similarily named control)
>
> If you cannot do a refresh, you have to revert to javascript and dom
> (and possibly) ajax to alter the form elements.
>
> For explanation of bindings and backendbeans, lookup the JSF docs, or
> http://www.jsftutorials.net/
>
> Werner
>
I think you're completely missing the idea behind what I want to do. I
know you have to use javascript to add the form elements. I have
already done that in webapps in the past. The question I'm asking here
is how to get those new form elements, created on the client side, to be
bound to my backing bean. The reason I mention ajax is to possibly
modify the form state if it is being stored on the server side so that
JSF will handle the value bindings.
Re: Dynamically adding form elements client-side
Posted by Werner Punz <we...@gmx.at>.
Richard Wallace wrote:
> Martin Marinschek wrote:
>
>> You need to explicitly add these new elements, this is entirely your
>> responsibility...
>>
>>
>>
> I understand that, my question is "How do I add the new elements?"
>
If you can do a refresh, you simple do a binding to the backend bean,
and there you can access the elements via a getChildElements (or
something similarily named control)
If you cannot do a refresh, you have to revert to javascript and dom
(and possibly) ajax to alter the form elements.
For explanation of bindings and backendbeans, lookup the JSF docs, or
http://www.jsftutorials.net/
Werner
Re: Dynamically adding form elements client-side
Posted by Richard Wallace <rw...@thewallacepack.net>.
Martin Marinschek wrote:
>You need to explicitly add these new elements, this is entirely your
>responsibility...
>
>
>
I understand that, my question is "How do I add the new elements?"
Rich
>regards,
>
>Martin
>
>On 6/20/05, Richard Wallace <rw...@thewallacepack.net> wrote:
>
>
>>Werner Punz wrote:
>>
>>
>>
>>>Richard Wallace wrote:
>>>
>>>
>>>
>>>>Hello again,
>>>>
>>>>I'm trying to figure out how, if it's possible to add form elements,
>>>>like text fields, when a user clicks an add button without having to
>>>>have the page resubmit.
>>>>
>>>>
>>>Only by using javascript, but without javascript no.
>>>That is a limit caused by the beast which is called html.
>>>With javascript you can do it by altering the dom
>>>tree.
>>>
>>>
>>I understand that, but how do you have JSF pickup the new element(s)
>>when restoring state when the form is submitted?
>>
>>
>>
>>>With server side roundtripping, JSF has special api hooks
>>>to do that (component bindings, child element trees)
>>>
>>>
>>>
>>>
>>>>I'm not even sure it's 100% possible unless the STATE_SAVING_METHOD
>>>>is client. And then the javascript would have to manipulate that
>>>>hidden field. Or do some kind of AJAX operation to modify the state
>>>>when it's being stored server side. At this point, I think if
>>>>anything prevents us from adopting JSF at work it would be
>>>>dynamically adding form elements. Any suggestions?
>>>>
>>>>
>>>>
>>>Well depends on what you want to do with it, if you need additional
>>>data from the server, either use ajax, or go the roundtripping way.
>>>But if you want to stay on the client side, there is no way you can
>>>avoid javascript and if you dont want javascript, there is no way you
>>>can avoid roundtripping.
>>>
>>>
>>>
>>
>>
Re: Dynamically adding form elements client-side
Posted by Martin Marinschek <ma...@gmail.com>.
You need to explicitly add these new elements, this is entirely your
responsibility...
regards,
Martin
On 6/20/05, Richard Wallace <rw...@thewallacepack.net> wrote:
> Werner Punz wrote:
>
> > Richard Wallace wrote:
> >
> >> Hello again,
> >>
> >> I'm trying to figure out how, if it's possible to add form elements,
> >> like text fields, when a user clicks an add button without having to
> >> have the page resubmit.
> >
> > Only by using javascript, but without javascript no.
> > That is a limit caused by the beast which is called html.
> > With javascript you can do it by altering the dom
> > tree.
>
> I understand that, but how do you have JSF pickup the new element(s)
> when restoring state when the form is submitted?
>
> > With server side roundtripping, JSF has special api hooks
> > to do that (component bindings, child element trees)
> >
> >
> >> I'm not even sure it's 100% possible unless the STATE_SAVING_METHOD
> >> is client. And then the javascript would have to manipulate that
> >> hidden field. Or do some kind of AJAX operation to modify the state
> >> when it's being stored server side. At this point, I think if
> >> anything prevents us from adopting JSF at work it would be
> >> dynamically adding form elements. Any suggestions?
> >>
> > Well depends on what you want to do with it, if you need additional
> > data from the server, either use ajax, or go the roundtripping way.
> > But if you want to stay on the client side, there is no way you can
> > avoid javascript and if you dont want javascript, there is no way you
> > can avoid roundtripping.
> >
>
>
Re: Dynamically adding form elements client-side
Posted by Richard Wallace <rw...@thewallacepack.net>.
Werner Punz wrote:
> Richard Wallace wrote:
>
>> Hello again,
>>
>> I'm trying to figure out how, if it's possible to add form elements,
>> like text fields, when a user clicks an add button without having to
>> have the page resubmit.
>
> Only by using javascript, but without javascript no.
> That is a limit caused by the beast which is called html.
> With javascript you can do it by altering the dom
> tree.
I understand that, but how do you have JSF pickup the new element(s)
when restoring state when the form is submitted?
> With server side roundtripping, JSF has special api hooks
> to do that (component bindings, child element trees)
>
>
>> I'm not even sure it's 100% possible unless the STATE_SAVING_METHOD
>> is client. And then the javascript would have to manipulate that
>> hidden field. Or do some kind of AJAX operation to modify the state
>> when it's being stored server side. At this point, I think if
>> anything prevents us from adopting JSF at work it would be
>> dynamically adding form elements. Any suggestions?
>>
> Well depends on what you want to do with it, if you need additional
> data from the server, either use ajax, or go the roundtripping way.
> But if you want to stay on the client side, there is no way you can
> avoid javascript and if you dont want javascript, there is no way you
> can avoid roundtripping.
>
Re: Dynamically adding form elements client-side
Posted by Werner Punz <we...@gmx.at>.
Richard Wallace wrote:
> Hello again,
>
> I'm trying to figure out how, if it's possible to add form elements,
> like text fields, when a user clicks an add button without having to
> have the page resubmit.
Only by using javascript, but without javascript no.
That is a limit caused by the beast which is called html.
With javascript you can do it by altering the dom
tree.
With server side roundtripping, JSF has special api hooks
to do that (component bindings, child element trees)
> I'm not even sure it's 100% possible unless the
> STATE_SAVING_METHOD is client. And then the javascript would have to
> manipulate that hidden field. Or do some kind of AJAX operation to
> modify the state when it's being stored server side. At this point, I
> think if anything prevents us from adopting JSF at work it would be
> dynamically adding form elements. Any suggestions?
>
Well depends on what you want to do with it, if you need additional data
from the server, either use ajax, or go the roundtripping way.
But if you want to stay on the client side, there is no way you can
avoid javascript and if you dont want javascript, there is no way you
can avoid roundtripping.
Re: Dynamically adding form elements client-side
Posted by Martin Marinschek <ma...@gmail.com>.
Hmmmm...
an interesting question.
Well, the JSF component tree is forever in your forming hands, so what
you could do is write e.g. a custom form which looks at the request
values and does something with the component tree if a new, unknown
parameter shows up. (It's easy to add components, just create a new
one and add it to its parent).
I am not sure though if submitting would work in all cases (especially
if you clicked on a link).
You might as well try it out, we have never had a use-case like this.
All we did was hiding and showing fields depending on some javascript
wise changed status.
regards,
Martin
On 6/19/05, Richard Wallace <rw...@thewallacepack.net> wrote:
> Thanks, I understand how to do it on the javascript side. I'm just not
> sure how to translate it into something the JavaServer Faces will be
> able to understand. Optimally, of course, the values of the new
> elements would be bound to the backing bean in the same way as any other
> values. The difficulty is, of course, changing the state on either the
> client or the server side so it is restored in the restore view phase.
> If someone can tell me how to do that, I will be forever grateful.
>
> Rich
>
> David G. Friedman wrote:
>
> >Richard,
> >
> >I am still learning about MyFaces so I can only give you the JavaScript/DOM
> >portion of the solution. I can't yet give you information on how to name
> >your fields to work with a map/list/set backed Managed bean. I'm hoping
> >this will get you far enough along so your MyFaces skills can fill in the
> >gaps past my own light DOM/JavaScript knowledge.
> >
> >A good reference link (for me) was:
> >http://www.mozilla.org/docs/dom/technote/tn-dom-table/#quick
> >
> >My test file used an input button on my form with an onClick like so:
> >
> >javascript:addFieldPlusLineBr(this);return false;
> >
> >To invoke a JavaScript example method of my own making to add a text field
> >and line break to the form:
> >
> ><script language="javascript">
> >function addFieldPlusLineBr(input) {
> > var form = input.form;
> > alert("hello");
> > var inputNode = document.createElement("input");
> > form.appendChild(document.createElement("br"));
> > inputNode.setAttribute("name","fred");
> > inputNode.setAttribute("value","fredValue");
> > form.appendChild(inputNode);
> >}
> ></script>
> >
> >Your trick will be figuring out how to place it exactly WHERE you want it in
> >your form. The link I mentioned should include various methods you could
> >invoke to add it after the element, or elements, of your choice.
> >
> >Good luck!
> >
> >Regards,
> >David
> >
> >-----Original Message-----
> >From: Richard Wallace [mailto:rwallace@thewallacepack.net]
> >Sent: Saturday, June 18, 2005 11:10 PM
> >To: MyFaces Discussion
> >Subject: Re: Dynamically adding form elements client-side
> >
> >
> >David G. Friedman wrote:
> >
> >
> >
> >>Richard,
> >>
> >>Are you talking about hiding/showing the fields (such as using a CSS style)
> >>or completely adding to the page without a resubmit?
> >>
> >>
> >>
> >>
> >>
> >Completely adding a new element to the form.
> >
> >
> >
> >>Regards,
> >>David
> >>
> >>-----Original Message-----
> >>From: Richard Wallace [mailto:rwallace@thewallacepack.net]
> >>Sent: Saturday, June 18, 2005 11:04 PM
> >>To: MyFaces Discussion
> >>Subject: Dynamically adding form elements client-side
> >>
> >>
> >>Hello again,
> >>
> >>I'm trying to figure out how, if it's possible to add form elements,
> >>like text fields, when a user clicks an add button without having to
> >>have the page resubmit. I'm not even sure it's 100% possible unless the
> >>STATE_SAVING_METHOD is client. And then the javascript would have to
> >>manipulate that hidden field. Or do some kind of AJAX operation to
> >>modify the state when it's being stored server side. At this point, I
> >>think if anything prevents us from adopting JSF at work it would be
> >>dynamically adding form elements. Any suggestions?
> >>
> >>Thanks,
> >>Rich
> >>
> >>
> >>
> >>
> >>
> >
> >
> >
>
>
Re: Dynamically adding form elements client-side
Posted by Werner Punz <we...@gmx.at>.
Richard Wallace wrote:
> Thanks, I understand how to do it on the javascript side. I'm just not
> sure how to translate it into something the JavaServer Faces will be
> able to understand. Optimally, of course, the values of the new
> elements would be bound to the backing bean in the same way as any other
> values. The difficulty is, of course, changing the state on either the
> client or the server side so it is restored in the restore view phase.
> If someone can tell me how to do that, I will be forever grateful.
>
Well, my guess is, if you alter the form on the client side via
javascript and then do a submit on the server, the safest way to process
the data is to get the request parameters of the new controls directly,
instead of trying to bind it to jsf controls.
The restore view phase however might be really problematic.
Well the safest guess for doing something like that and keeping the
values intact probably would be to go the plain ajax route directly in
this case, thus no refresh is triggered at all.
Re: Dynamically adding form elements client-side
Posted by Richard Wallace <rw...@thewallacepack.net>.
Thanks, I understand how to do it on the javascript side. I'm just not
sure how to translate it into something the JavaServer Faces will be
able to understand. Optimally, of course, the values of the new
elements would be bound to the backing bean in the same way as any other
values. The difficulty is, of course, changing the state on either the
client or the server side so it is restored in the restore view phase.
If someone can tell me how to do that, I will be forever grateful.
Rich
David G. Friedman wrote:
>Richard,
>
>I am still learning about MyFaces so I can only give you the JavaScript/DOM
>portion of the solution. I can't yet give you information on how to name
>your fields to work with a map/list/set backed Managed bean. I'm hoping
>this will get you far enough along so your MyFaces skills can fill in the
>gaps past my own light DOM/JavaScript knowledge.
>
>A good reference link (for me) was:
>http://www.mozilla.org/docs/dom/technote/tn-dom-table/#quick
>
>My test file used an input button on my form with an onClick like so:
>
>javascript:addFieldPlusLineBr(this);return false;
>
>To invoke a JavaScript example method of my own making to add a text field
>and line break to the form:
>
><script language="javascript">
>function addFieldPlusLineBr(input) {
> var form = input.form;
> alert("hello");
> var inputNode = document.createElement("input");
> form.appendChild(document.createElement("br"));
> inputNode.setAttribute("name","fred");
> inputNode.setAttribute("value","fredValue");
> form.appendChild(inputNode);
>}
></script>
>
>Your trick will be figuring out how to place it exactly WHERE you want it in
>your form. The link I mentioned should include various methods you could
>invoke to add it after the element, or elements, of your choice.
>
>Good luck!
>
>Regards,
>David
>
>-----Original Message-----
>From: Richard Wallace [mailto:rwallace@thewallacepack.net]
>Sent: Saturday, June 18, 2005 11:10 PM
>To: MyFaces Discussion
>Subject: Re: Dynamically adding form elements client-side
>
>
>David G. Friedman wrote:
>
>
>
>>Richard,
>>
>>Are you talking about hiding/showing the fields (such as using a CSS style)
>>or completely adding to the page without a resubmit?
>>
>>
>>
>>
>>
>Completely adding a new element to the form.
>
>
>
>>Regards,
>>David
>>
>>-----Original Message-----
>>From: Richard Wallace [mailto:rwallace@thewallacepack.net]
>>Sent: Saturday, June 18, 2005 11:04 PM
>>To: MyFaces Discussion
>>Subject: Dynamically adding form elements client-side
>>
>>
>>Hello again,
>>
>>I'm trying to figure out how, if it's possible to add form elements,
>>like text fields, when a user clicks an add button without having to
>>have the page resubmit. I'm not even sure it's 100% possible unless the
>>STATE_SAVING_METHOD is client. And then the javascript would have to
>>manipulate that hidden field. Or do some kind of AJAX operation to
>>modify the state when it's being stored server side. At this point, I
>>think if anything prevents us from adopting JSF at work it would be
>>dynamically adding form elements. Any suggestions?
>>
>>Thanks,
>>Rich
>>
>>
>>
>>
>>
>
>
>
RE: Dynamically adding form elements client-side
Posted by "David G. Friedman" <hu...@ix.netcom.com>.
Richard,
I am still learning about MyFaces so I can only give you the JavaScript/DOM
portion of the solution. I can't yet give you information on how to name
your fields to work with a map/list/set backed Managed bean. I'm hoping
this will get you far enough along so your MyFaces skills can fill in the
gaps past my own light DOM/JavaScript knowledge.
A good reference link (for me) was:
http://www.mozilla.org/docs/dom/technote/tn-dom-table/#quick
My test file used an input button on my form with an onClick like so:
javascript:addFieldPlusLineBr(this);return false;
To invoke a JavaScript example method of my own making to add a text field
and line break to the form:
<script language="javascript">
function addFieldPlusLineBr(input) {
var form = input.form;
alert("hello");
var inputNode = document.createElement("input");
form.appendChild(document.createElement("br"));
inputNode.setAttribute("name","fred");
inputNode.setAttribute("value","fredValue");
form.appendChild(inputNode);
}
</script>
Your trick will be figuring out how to place it exactly WHERE you want it in
your form. The link I mentioned should include various methods you could
invoke to add it after the element, or elements, of your choice.
Good luck!
Regards,
David
-----Original Message-----
From: Richard Wallace [mailto:rwallace@thewallacepack.net]
Sent: Saturday, June 18, 2005 11:10 PM
To: MyFaces Discussion
Subject: Re: Dynamically adding form elements client-side
David G. Friedman wrote:
>Richard,
>
>Are you talking about hiding/showing the fields (such as using a CSS style)
>or completely adding to the page without a resubmit?
>
>
>
Completely adding a new element to the form.
>Regards,
>David
>
>-----Original Message-----
>From: Richard Wallace [mailto:rwallace@thewallacepack.net]
>Sent: Saturday, June 18, 2005 11:04 PM
>To: MyFaces Discussion
>Subject: Dynamically adding form elements client-side
>
>
>Hello again,
>
>I'm trying to figure out how, if it's possible to add form elements,
>like text fields, when a user clicks an add button without having to
>have the page resubmit. I'm not even sure it's 100% possible unless the
>STATE_SAVING_METHOD is client. And then the javascript would have to
>manipulate that hidden field. Or do some kind of AJAX operation to
>modify the state when it's being stored server side. At this point, I
>think if anything prevents us from adopting JSF at work it would be
>dynamically adding form elements. Any suggestions?
>
>Thanks,
>Rich
>
>
>
Re: Dynamically adding form elements client-side
Posted by Richard Wallace <rw...@thewallacepack.net>.
David G. Friedman wrote:
>Richard,
>
>Are you talking about hiding/showing the fields (such as using a CSS style)
>or completely adding to the page without a resubmit?
>
>
>
Completely adding a new element to the form.
>Regards,
>David
>
>-----Original Message-----
>From: Richard Wallace [mailto:rwallace@thewallacepack.net]
>Sent: Saturday, June 18, 2005 11:04 PM
>To: MyFaces Discussion
>Subject: Dynamically adding form elements client-side
>
>
>Hello again,
>
>I'm trying to figure out how, if it's possible to add form elements,
>like text fields, when a user clicks an add button without having to
>have the page resubmit. I'm not even sure it's 100% possible unless the
>STATE_SAVING_METHOD is client. And then the javascript would have to
>manipulate that hidden field. Or do some kind of AJAX operation to
>modify the state when it's being stored server side. At this point, I
>think if anything prevents us from adopting JSF at work it would be
>dynamically adding form elements. Any suggestions?
>
>Thanks,
>Rich
>
>
>
RE: Dynamically adding form elements client-side
Posted by "David G. Friedman" <hu...@ix.netcom.com>.
Richard,
Are you talking about hiding/showing the fields (such as using a CSS style)
or completely adding to the page without a resubmit?
Regards,
David
-----Original Message-----
From: Richard Wallace [mailto:rwallace@thewallacepack.net]
Sent: Saturday, June 18, 2005 11:04 PM
To: MyFaces Discussion
Subject: Dynamically adding form elements client-side
Hello again,
I'm trying to figure out how, if it's possible to add form elements,
like text fields, when a user clicks an add button without having to
have the page resubmit. I'm not even sure it's 100% possible unless the
STATE_SAVING_METHOD is client. And then the javascript would have to
manipulate that hidden field. Or do some kind of AJAX operation to
modify the state when it's being stored server side. At this point, I
think if anything prevents us from adopting JSF at work it would be
dynamically adding form elements. Any suggestions?
Thanks,
Rich