• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Dynamically populating an inputTextArea with the values being selected from the UI

 
Greenhorn
Posts: 29
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello all, what I am trying to do goes something like this: I have a small UI(3 selectOneMenus with some values, some buttons, and an inputTextArea) , now I want to fill the inputTextArea with the data that is being changed by the user. (I know, kind of vague).

For example: the user wants to perform a mathematical operation like this: (selectBoxValue1+selectBoxValue2) - selectBoxValue3 and so on. Now every time the user selects a value from a selectOneMenu , this value will be displayed in the inputTextArea and it will be followed by whatever operation button the user wants to press, then possibly by another value and so on.

Is this doable using selectOneMenus and inputTextArea or should I be looking for something else? Another question: if this is not doable , is there any other way to achieve this while using JSF?

I hope the question was formulated clear enough(i have the tendency to beat around the bush alot when asking questions), if it wasn't and you need more details please just let me know and i will do my best to provide them.

Thanks,
Daniel
 
Ranch Hand
Posts: 5575
Eclipse IDE Windows XP Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
<form>
selectBox where user will select a value

panelGroup currently rendered as false
</form>
when a user select a value and trigger a valueChangeListener(using onChange attribute) and there populate a HtmlInputText/HtmlOutputText dynamically with value and then add it to the panelGroup and change the rendered status of panelGroup as true and call the form page(dont forget to renderdResponse() on faces context at endof the actionListener method)
 
Daniel Vlad
Greenhorn
Posts: 29
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for the quick answer but could you clear things up a bit please? How do i add it to the panelGroup after the inputTextArea has been populated. Here is a sample of my code as it is now:


For some reason i thought about putting the textArea in the panel and setting that to true once the first selection is done, but that makes no sence. Any sort of clarification will be greatly appreciated.

Thanks,
Daniel
 
Saloon Keeper
Posts: 27752
196
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
There are 2 ways to do this. One is plain HTML style. The other is using AJAX. They are mostly done the same way, but the difference is in how the user will interact with the display.

JSF's core functionality revolves around having a model and action processors that (usually) set and/or use data from the model. In your case, the model (backing bean) would contain the values of each of the 3 listboxes, the value in the textinput control, and whatever other data UI elements you want.

For simplicity's sake, the same backing bean that holds the model data is usually the one that holds the functions that act on the model. I avoided using the word "Controller" here, because true MVC controllers don't do anything but adjust Models and Views to keep them in sync, and JSF action methods are more related to the business functionality. If there's a good technical name for that, I've never heard it.

In the non-AJAX (straight HTML) method, you'd set the display controls and then you'd have to click a commandButton or commandLink control to fire off an action method. The action method would do its calculations (or whatever), update the model values, and return to JSF, whose Controllers would then update the display from the updated model.

This works, but it can be annoying, since you have to make an extra effort to get a response.

If you add AJAX to the mix, you can make it so that when the data controls are changed by the user, the act of changing them fires off an invocation of an action method. In that case, you don't need a "go" button to make things work.

AJAX required either an AJAX-aware extension tag set such as RichFaces or JSF2, which adds an "ajax" tag to the core JSF tag set. Listeners do not provide any AJAX support - all they are are tap-ins to the normal JSF lifecycle, so you can't just code a Listener. And, in fact, there's really nothing Listeners can do for you here that can't be done simpler with the normal action methods that you are required to have anyway. Until an action is fired (whether traditionally or via AJAX), Listeners won't be invoked - they're not asynchronous methods. In the JSF lifecycle, their time comes after the data has been validated and updated, but right before the action method is invoked.
 
Daniel Vlad
Greenhorn
Posts: 29
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Well I'm currently doing something like this:



And it's doing what it should(printing the selected content to the textarea) , but the issue is that it will always appear in the textArea in the exact same order I put it in and that's not what I need it to do. I want the user to be able to select let's say "property1 from the first selectbox" and then click the "+" button and then select "property 3 from the second selectBox" and so on with other operators and properties, and end up with something like : property1 + property3 - whatever else he chooses + .... So I would like him to be able to see the operations he is doing in the textArea, but to see them in the exact order in which he is doing them. (If it's not clear what i wanted to say, please let me know).

The beans I''m using look something like this:



Same for the other beans i use to populate the selectBoxes. The output bean i use for saving the created formula to a .txt file.


I'm also thinking of doing something like this:



And then maybe iterrate through he list somehow and order them in the way we need(just an idea and not a pretty good one, but it's all i have for now). And use this method as an ajax listener in the JSF maybe?
Would appreciate any sort of input .

PS. maybe someone can point me to a Calculator like application on the web(preferably made with JSF, but not only) which i can study and maybe adapt something from there to what I need. Because honestly i see this as a sort of calculator which can also use words(strings) besides numbers and mathematical operations.
 
Tim Holloway
Saloon Keeper
Posts: 27752
196
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sounds like you want to basically run a calculator with a tape.

Because the normal (non-AJAX) mode for web pages is to submit everything at once, enforcing the order that controls are touched isn't easy. You can, however, bind the "+" key to an action so that it submits. You'd then have to queue up the "+" operation internally so that that's what would be invoked when the "=" key is clicked after the second input is selected.

A somewhat more natural UI would be to provide 4 sets of controls. Argument 1, Operator (can be dropdown or radio button), Argument 2, and "Enter". That's also easier to program and doesn't have the intermediary submits to slow people down.

For the tape itself, about the easiest way to handle that would be to represent the entries as rows in a ListBox control. As people calculate, new rows are added.
 
Daniel Vlad
Greenhorn
Posts: 29
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for the advice. I ended up fixing my problem by adding a simple Javascript function which got the value i wanted from the selectbox and put it in the inputTextArea. (i can give a code example of how i fixed it if anyone is interested). Now I have another question : is it possible to make 2 buttons with (JSF or javascript and jquery) which basically imitate the effects that the Enter and Backspace keys would have on a textArea. For example if the user clicks the "Enter" button, the cursor will move to a new line and if he clicks the "Backspace" button he can delete the last entry he made in the textbox. I am asking this because i'm thinking of making the textArea readOnly for now and once my application evolves I will allow users who are more experienced to manually modify the formulas if they so desire.

Once again any input is welcome

Thanks,
Daniel
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic