I am developing a registration web app using Struts2 and need some guidance.
Background:
On the registration form, there is a set of five form fields: 1 text box, and 4 drop down select boxes. The five fields describe a person's primary position in an educational setting: the text field allows the user to insert their job title, and the drop down menus allow the user to select what school, institution, department, and division they belong to. The drop down menus are initialized with options that are stored in a database (inside the registration action, array lists are initialized with these values before the form is displayed). For example:
<s:select emptyOption="true" key="school1.schoolId" list="schoolList" listKey="schoolId" listValue="schoolName" required="true" />
Problem:
I need to provide the user with the ability add an X number of secondary positions. On the registration form, a user can click an "add another affiliation" button, and a new set of the 5 form fields are displayed. These fields will also need to be validated, and saved when the user clicks the form's submit button.
What would be the best approach to tackling this problem?
So far, I have only declared array lists for each form field, like so:
private List<String> jobTitles = new ArrayList<String>();
private List<School> schools = new ArrayList<School>();
private List<Institution> institutions = new ArrayList<Institution>();
private List<Department> departments = new ArrayList<Department>();
private List<Division> divisions = new ArrayList<Division>();
But I do not know how to proceed. How do I display the initial 5 fields for the primary position? If I use Javascript to insert new form fields dynamically, how do I initialize the dynamic drop down menus with the options stored in the database? How do I retain these values if the page is reloaded?
Any help is appreciated - thanks!
The basic problem you need to tackle is how to get an indexed list of request parameters into your action class. This is quite simple, and I think you are on the right track by starting off by creating Lists of input parameters. I found a bit of documentation on the subject here. Basically you can have form fields with names like jobTitles[0], jobTitles[1] which would be used to populate the jobTitles List.
However, I think the concept of 'Affiliation' deserves a class of it's own:
class UserAffiliation {
private String title;
private String schoolId;
private String institutionId;
private String departmentId;
private String divisionId;
// Make sure that there is a no-args constructor (default or explicit) for Struts to create instances.
// Add getters and setters
}
In your action class:
private List<UserAffiliation> affiliations;
...
// getter and setter for affiliations
Would be enough to capture the user input.
Your jsp could look something like:
<form action=".." method="post">
<div class="affiliation">
<s:textfield name="affiliations[0].title"/>
<s:select name="affiliations[0].schoolId" list="schools" listKey="schoolId" listValue="schoolName"/>
...
</div>
<s:if test="affiliations != null && affiliations.size > 1">
<s:iterator value="affiliations" begin="1" status="status">
<s:textfield name="affiliations[%{#status.index + 1}].title"/>
<s:select name="affiliations[%{#status.index + 1}].schoolId" list="schools" listKey="schoolId" listValue="schoolName"/>
...
</s:iterator>
</s:if>
....
</form>
<div id="affilationTemplate" style="display:none;">
<div class="affiliation">
<s:textfield name="affiliations[__IDX__].title"/>
<s:select name="affiliations[__IDX__].schoolId" list="schools" listKey="schoolId" listValue="schoolName"/>
</div>
...
</div>
Note the div affilationTemplate. You could use JS to get the html of this template, replace __IDX__ with the appropriate index, and append to the form contents when the user clicks on the 'add another affiliation' button. This makes sure that the newly added select boxes are pre-populated with appropriate values.
The iterator block displays what ever the values the user had already submitted (with the exception of the 'primary affiliation', which is already displayed above it).
NOTE: You should of course, try to get rid of the repeated form elements if possible. I would try with extracting them into an include.
Related
I'm working on a website in which users can add and edit things (it's not relevant describing what these things are in particular).
I'm implementing it using Thymeleaf for the frontend, Spring MVC for the backend and JPA for the database logic. Now I'm trying to implement the edit logic but I don't know which is the best way to do it.
What I'm thinking is: display to the user all the input fields (on a HTML page) that he is allowed to edit, already filled in with the current values. He can edit then whatever fields he wants and finally press the edit button to persist the changes.
Once I get the new object in the backend, I retrieve the old version from the database in order to check which field the user changed. For every field that got changed I update the old version and only when I've finished I call the JPA method save and I persist the new version of that object.
Is there a better way to do it?
It would be perfect if the object I put inside the model in order to display all its field to the user inside the HTML page, could mantain all the information of the old object and not just the ones the user can change. Let me explain better what I'm trying to say with an example:
Let's say the object we are trying to edit its called Person and has these attributes:
id
name
surname
money
nickname
sex
But the user can edit only the following attributes:
money
nickname
sex
so the controller which handler the get request of the page would look like this:
#GetMapping("person/{personId}/edit")
public String getEditPersonPage(#PathVariable Integer personId, Model model) {
Person person = personService.getById(personId); //person has all the attributes filled in
model.addAttribute("person", person);
and the controller which handler the put request looks like this:
#PutMapping("person/{personId}/edit")
public String editPerson(#ModelAttribute Person person, #PathVariable Integer personId){
personService.editPerson(person); //person has only the three fields filled in and all the other attributes as NULL
return "redirect:/person/" + personId;
}
the HTML page:
<form th:object="${person}" th:method="PUT">
<fieldset>
<p th:text="*{id}"></p>
<p th:text="*{name}"></p>
<p th:text="*{surname}"></p>
<input type="number" th:field="*{money}" th:value="*{money}" />
<input type="text" th:field="*{nickname}" th:value="*{nickname}" />
<input type="text" th:field="*{sex}" th:value="*{sex}" />
<input type="submit" value="Edit" />
</fieldset>
</form>
When I insert the object person inside the model to render the HTML page the object has all the attributes. Indeed I can decide which of its attributes display inside the HTML page (in this case only three: money, nickname and sex). But when the user press the submit button (edit), I receive only the fields displayed inside the HTML page (money, nickname, sex). So what I have to do is: I have to take these three fields, check if they are changed and if so, update the old version.
It would be perfect if when the user press the submit button, all the fields of person (and not just those three he is allowed to update) could be retrieved by the controller. In that case I could skip the check phase and persist directly the new version inside the database (with the old values unchanged and not set to NULL).
Any thoughts?
You can use readonly attributes for the ones that are not going to be edited.
I think is the best way in order to keep all the values visible in the form to give all the info to the user that is editing. All the values will be submitted and serialized with your object, but the form just allows to edit the three of them that you need.
A readonly element is just not editable, but gets sent when the according form submits. A disabled element isn't editable and isn't sent on submit.
<form:form method="post" action="/changeEnabledResource" modelAttribute="user">
<c:forEach items="${user.resources}" var="resource">
<form:radiobutton path="resources"
value="${resource}"
label="${resource.name}"
checked="${resource.enabled ? 'checked' : ''}/>
</c:forEach>
<input type="submit" value="Submit"/>
</form>
Resource class:
public class Resource {
private Long id;
private String name;
private boolean enabled;
//getters setters
}
User class:
public class User {
private List<Resource> resources;
....
//rest of code
}
With the above code all form:radiobuttons have checked="checked", so the last one is always checked when the form loads. Submitting works correctly and it changes the correct one to enabled and the rest to not enabled (service class handles this). But when the page loads all radio buttons have checked="checked".
Why is this happening, or what would be the correct way to do this so that the resource that IS enabled has the radio button checked?
The answer to this is to NOT use the form:radiobutton(s) tags since they apparently don't work very well. I have yet to find any good examples anywhere using this tag. My solution was just to use plain HTML input tags and use the #RequestParam in the controller method which will pass only the value of the radio button that is checked. And I can easily use ${resource.enabled ? 'checked' : ''} to ensure that the correct one is selected.
Set the selected value in a separate property:
public class User {
private int selectedResourceId;
private List<Resource> resources;
....
//rest of code
}
...
<form:radiobutton path="selectedResourceId"
value="${resource.id}"
label="${resource.name}"/>
...
On page load, initalize the selectedResourceId (based on the resource where enabled flag is true), so that the form:radiobutton tag knows which one is selected when the page is rendered.
Upon form submission, go in the other direction and set the appropriate resource.enabled flag based on the selectedResourceId.
After thinking a lot, this is the best question title I could find. Not that representative, I'm sorry :-(.
By the way let me explain the problem.
I have to implement an administration panel. It displays a table where every line contains a user with his roles and account status. You can see the idea sketched in the following image
now, my problem is about managing the backing model object:
I have to pass a list of users to populate the administration panel but
I have to bind each user to a model object and
I have to submit each user separately.
I found many tips for managing the table as a whole so that a single button submits all the users at the same time, but what I want to do is populating the table with a list and managing every list record (the user) separately.
I thought to manage each line with javascript to keep trace of the modified values and to use them to build a uri like http://authority/app/user_management/{user_id}/{is_locked}/{is_admin}/.../. The uri will be triggered by the corresponding submit button, but I prefer to avoid this approach.
Moreover, to populate the table with the correct checkbox value it is necessary to have a binding enstablished.
Any advice?
Thanks!
I think you can use separate form for each row with a User object as a Model. You will have simple 'updateUser' handler with User object in input parameters list.
As I remember it could be a User you are iterating through in your foreach, but I need to check it with the real example..) At least you can use simple form and pass 'id', 'isLocked', etc. as request parameters.
<!-- Inside foreach loop -->
<form action="/updateUser" method="POST">
<input type="hidden" name="id" value="${user.id}"/>
<tr>
<td><input type="checkbox" name="isAdmin" value="Is Admin" checked="${user.isAdmin}"/></td>
<td><input type="submit" value="Submit"/></td>
</tr>
</form>
And something similar on server side:
#RequestMapping(value = "/updateUser", method = RequestMethod.POST)
#ResponseBody
public ResponseDTO updateUser(#RequestParam String id, #RequstParam boolean isAdmin) {
// your update logic
}
My command object have a list of objects. I want to bind a text field to the attribute of the object inside that list. Is it possible to do in Spring MVC?
Command object class
public class SubDevisonDto {
private String devId;
private List subDevisions;
Subdevision object class mentioned in the list
public class SubDivison implements Serializable{
private String subDivisonName;
private String createdBy;
private String createdDate;
private String developerID;
private List users;
I want text box to set the value for subDivisonName field.
I have written the Spring MVC tags like this.
<spring:bind path="subdivisondto.subDevisions[0].subDivisonName">
<span class="formw">
<input name="subDivisonName" type="text" style="width:350px;" />
</span>
</spring:bind>
Just for test purpose I have given it as 0. If it's working I can make it to a variable. my requirement is, I should let the user to dynamically add subdevision objects. So, initially when page is loading I will just show one text box. I will give a button for him to add if he want to add more. I will dynamically generate text boxes when he clicks the add button. After that I have to submit the form with the list.
This jsp code gives me an error. It says:
org.springframework.beans.NullValueInNestedPathException
Is there anyway for me to do this in jsp code?
I found the answer for my question. But, it's not the solution for my requirement as I need to implement a dynamic list. but I found a solution for this question.
As I understood, first time we have to send data from back end to bind input elements. I didn't find a way to bind form elements which takes input without sending a list data from beck end. But when we send data and bind the elements, we can take input from those elements. So, I think to bind the element in a situation like this we need to send data first time. Correct me if this statement is wrong. Because, that would be a more good solution for me.
We need to use the lazy list and jsp code is bit modified.
Your command class object should be created as below mentioned.
import org.apache.commons.collections.list.LazyList;
import org.apache.commons.collections.FactoryUtils;
public class SubDevisonDto {
private String devId;
private List subDevisions =
LazyList.decorate(
new ArrayList(),
FactoryUtils.instantiateFactory(SubDivison.class));
JSP code should look like below.
<c:forEach items="${subs.subDevisions}" var="obj" varStatus="gridRow">
Binding an input element text box
<spring:bind path="subdivisondto.subDevisions[${gridRow.index}].subDivisonName">
<span class="formw"><input name="<c:out value="${status.expression}"/>" type="text" style="width:350px;" />
binding an input element check box. This input element makes a list.
<spring:bind path="subs.subDevisions[${gridRow.index}].users">
<c:forEach items="${obj.users}" var="dependenttwo" varStatus="dependentRowtwo">
<li>
<input name="<c:out value="${status.expression}"/>" type="checkbox" class="users" value="<c:out value="${dependenttwo}"/>"/>
<c:out value="${dependenttwo}"/>
</li>
</c:forEach>
</spring:bind>
`subs` is a map key name. the value for this key `subs` is a list of my DTO objects which named as `SubDevisonDto `
This code works fine for me.
Thanks the support given.
In dto :
private List<SubDivision> SubDivisions = new AutoPopulatingList<SubDivision>(new SubDivisionFactory());
and factory would be something like:
public class SubDivisionFactory implements AutoPopulatingList.ElementFactory<SubDivision> {
public String createElement(int index) {
SubDivision subDivision = new SubDivision();
return subDivision;
}
}
using AutopopulatingList from spring. And your jsp will look the same, you can iterate over as many as you want.
I'm using Struts2 to display the contents of a list of objects on a JSP.
The flow of events is as following:
GetDataAction.java -> fetches values from
the database, fills in the ArrayList
named tableList. On success, the
displayData.jsp is shown.
displayData.jsp -> uses the s:iterate tag to display the values of objects
in the tableList.
The user changes some values in the
displayData.jsp and presses on the
Update button. On the click of
Update button, the
UpdateDataAction.java is called.
Now my problem is; How do I use the same tableList in UpdateDataAction.java to get the modified values?
I tried declaring an ArrayList with the same name 'tableList' (along with getters and setters), in UpdateDataAction.java but it throws a NullPointerException.
Please suggest.
IMO the way you are updating is not a good idea.Either you should link every row to a seperate edit page or use ajax.There are many plugins available to update table values using ajax,If you need i can provide you the links
Back to your way of doing it,i guess you are doing it as follows
<s:form action="UpdateDataActionName">
<s:iterator value="tableList">
<s:textfield name="objectName.propertyName1" value="%(propertyName1)">
<s:textfield name="objectName.propertyName2" value="%(propertyName2)">
<s:textfield name="objectName.propertyName3" value="%(propertyName3)">
</s:iterator>
<s:submit value="Update"/>
</s:form>
Now declare a list in your UpdateDataAction,of type <objectNameoftableListType> i.e. the same object type which the tabeList is representing.The name of the list must be objectName.Try to Iteate and check if you are getting the right values as submitted from the jsp.