I'm trying to work on a user interface for adding "events". These events have either 0 or many contacts.
Ideally I would like to have an interface that when entering a new event, has a section for contacts, with a little form to enter one contact (name, phone, etc). On the bottom of that mini-form I would like to have a link or button saying "Add another" that would dynamically load another another mini contact form.
Is this possible with rishfaces/jsf?
Yes, it's doable. Adding another contact have to send ajax event to rerender contact list (addContact method need to result null to remain on the same page). After entering event data and selecting contact list the form will be submitted with event data.
The key elements are:
<a4j:commandButton value="Add contact" reRender="contactList" action="#{yourBean.addContact}" >
contact list may be created as <rich:orderingList id="contactList" ...> - see demo
If you want that panel with contact form initialy should be hidden you can use rendered property or use any collapsible component like <rich:simpleTogglePanel> or use <rich:modalPanel>
I thing it may help. Take a look of richfaces demo how to use a4j tags.
I believe it is as you would expect. Check out the following link, except replace the words ui:repeat with a4j:repeat
https://rogerkeays.com/jsf-c-foreach-vs-ui-repeat
Related
I'm creating a Django website where I want to implement such functionality.
There will be one Dropdown list and one submit button. When user selects any item from dropdown list - An image according to user selection will be displayed.
ie. There's drop-down list containing names of animals and one submit button. When user selects any animal from list, photo/details of that animal should appear before pressing submit button.
I don't know how to create link between them. Any reference to such work or advice would be appreciate.
Thank you :)
You likely want to use async request with JavaScript here (look for AJAX or JS Fetch API)
Attach it to onchange event of select element and send it's value to django.
Django will have a view that processes this request and returns a JsonResponse with image url.
Alternatively you can load all urls before hand and just select them on page without request, but anyway if you don't want to press button to take change - you need JavaScript.
I have come across a situation where in a form a customer needs to enter address. A customer can have more than one address and further the address field contains more than one text fields,combo boxes etc. A customer can dynamically add more address and remove any address entry. Eg: there is one add button on form, which when clicked will display all address fields as a group. if the user wants to add more address then he/she can again click the add button, so that a new entry for the address fields will be displayed. Also each corresponding new entry will have a delete button so that if the user wants to delete the entry then he/she can. Finally all the address entries should get mapped to a backing bean.
eg: in backing bean one has " private List address" and Address class further has street,pincode,state,city etc.
Is there any jsf ui component that can help out in the above scenario. In short, a user can enter more than one address dynamically and then a list of address gets mapped to the corresponding entry in backing bean..
Please guys, contribute for this, i am sure that this kind of component will make development way simpler.
The component should have the facility of describing our own sub group items. here in the above case it was address, but in different cases one might require it to be something else like mobile number, websites,email address etc. The component should be fully customizable ie. from group entries to mapping it.
Please developers, develop this kind of component and tell me from where and how can i start to be a part of it. If we all come together we can develop this wonderful component which will make development lot easier.
Ok, here's a a few ideas for you based on your narrative:
Make a form of <h:inputText> components bound to properties (Strings?) on your Backing Bean.
Make up a Class which describes a User's Address - UserAddress()?
Create a <h:commandButton> whose actionListener calls a method on the same backing bean, which creates a UserAddress() object from the values of the Strings on the backing bean, and then add it to a List of type List<UserAddress> on your Backing Bean.
Most JSF components are geared up to accept Lists of objects, so you'll be in a good position to then use such a component to loop over your List<UserAddress> to put all the user addresses on the screen.
There are plenty of component libraries out there to choose from. One which immediately comes to mind from the currently popular PrimeFaces library is the editable DataTable.
Good luck.
I am currently introducing a mobile friendly version of our web-application.
In a first step I transformed a rich:dataTable with a lot of columns into a rich:dataList containing only a few columns as values.
The old table used pagination and I want to reuse this existing mechanism to some extend in the new list. In the new list, however, I don't want to paginate but append! So when I click on a "Load More" button, I want to append the new elements to the already existing ones.
However appending should not happen on the server side, but on the client side. Because the normal mechanism is to append elements on the backing bean's list on "Load More" and then trigger some reRendering (e.g. via ). The result of this, is that the old data is fetched from the server again, which I don't want. I just want the new data, which is the next pagination, to be appended to the already existing ones.
Does someone has an idea, how I can realize that?
(limiting factors: JSF 1.X and Richfaces 3.X [in combination with jQuery mobile])
An list pagination example (it's primefaces, cause I couldn't find a richface example): http://www.primefaces.org/showcase/ui/dataListAjax.jsf And something like this I want to transform into an infinite list with a "Load More" button.
Would really appreciate your help and/or ideas about that!
Thanks in advance!
Just in case somebody else is interested in this...
I found a solution or rather a workaround:
I introduced another rich:dataList, that gets rerendered every time I click on "Load More".
The "Load More" button is a "a4j:commandButton" and its action triggers pagination. Finally I use its oncomplete-attribute to call a JavaScript function, that moves the next pagination (temporary list) to my main list via jQuery DOM manipulation.
It works just fine
I have a form which one of it's fields is a code and description, also a button for opening a popup window that contains a list of all of the available codes.
when the user double clickes a row from that table i want to set these values to the code and description. - how can this be done?
Another question, I want to create this popup and table to be initialized dynamically - by that i mean that if i have a few forms in my application, when ever i have a field which has a description i want to be able to open this popup and to see the available list for that field. (every field can be from a diffrent table). is it possible to create something like that? if so, how?
Any help will be appritiated,
Thank's In Advance.
Yes, it is possible. Even more, many component libraries have ready to use popup/dialog components, such as RichFaces with <rich:popupPanel> and PrimeFaces with <p:dialog>.
If you do not want to use a component library for some reason, you would need to create a custom component for this which generates basically an absolutely positioned HTML <div> element with a CSS overlay which get shown/hidden by JS on a particular click/action. The HTML/CSS/JS part should be relatively simple if you are familiar with those languages. The JSF part is somewhat hard if you have never created a custom component before, but it should be possible with a composite component as well, so you could also just create one with pure XHTML. The updating/refreshing can just take place by the usual <f:ajax> means.
I have a JSF 1.2 Form which is composed of several parts.
I have validation with required tag turned on.
I want to be able to clear a certain part of the form which has required fields so on the 'clear' button i used the immediate tag.
Now the challenge - When pressing the 'clear' button all the values that were filled since the last submission are restored to the last submitted state while I would like only the certain part of the form to be affected. (Meaning, all the values that are not in that part of the form should be sumbitted although the button pressed is immediate)
Is there a way to do this?
EDIT - Can I submit a value after every time it was filled? This might be a solution.
Thanks!
If you want to take some fields along with the cancel button with immediate="true", then you should also put immediate="true" on those fields.
If you want to skip validation on those fields as well, then you need to change required="true" to required="#{empty param['formId:cancelButtonId']}" so that it is only required when the cancel button is not been used to submit the form.
As to submitting the values on change, that's best to be achieved with ajax in combination with a value change listener. To achieve that you would need to upgrade to JSF 2.0 or to introduce an ajaxified JSF component library.