You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Agus Purnomo <fu...@gmail.com> on 2009/07/18 18:03:09 UTC
Dynamic fields in form
Hello.
I'm currently learning Wicket by converting my previous JSP site to Wicket.
In my previous site, I have a product detail forms for the user to enter the
detail of a specific product. This kind of detail differs for each category
of products (e.g. a CPU has different detail with a motherboard). The code
(in mixed JSP, crippled for simplicity sake) is like this :
<form action="edit_action.jsp?product_id=<%= product.getId() %>"
method="post">
<table width="100%" cellpadding="0" cellspacing="5">
<tr valign="top">
<td width="20%">Name : </td>
<td width="80%"><input type="text" name="name" size="50"
maxlength="100" value="<%= product.getName() %>" /></td>
</tr>
*<%
for (ProductDetail productDetail :
EJBAgent.getProductService().getProductDetailsByProduct(product.getId())) {
%>
<tr valign="top">
<td><%=
EJBAgent.**getProductService**().getField(productDetail.getFieldId()).getName()
%> : </td>
<td>
<input type="text" name="<%= productDetail.getFieldId() %>"
id="<%= productDetail.getFieldId() %>" size="50" maxlength="255" value="<%=
productDetail.getContent() %>" />
</td>
</tr>
<%
}
%>*
<tr valign="top">
<td></td>
<td><input type="submit" value="Edit" class="Button" /></td>
</tr>
</table>
</form>
The bold parts are the most important section, in that code, it generates
the dynamic field for each product details associated with a product
(according to their corresponding category).
How can I do this with Wicket? I've been googling so far with no luck...
Thanks before!
Re: Dynamic fields in form
Posted by Igor Vaynberg <ig...@gmail.com>.
i would use repeatingview rather then the listview, or at least call
listview.setreuseitems(true)
-igor
On Sat, Jul 18, 2009 at 10:31 AM, Agus Purnomo<fu...@gmail.com> wrote:
> Ow yeah... Looks like I can get away with this :
>
> === ProductEdit.html ===
>
> <form wicket:id="productEditForm">
> <table width="100%" cellpadding="0" cellspacing="5">
> <tr valign="top" wicket:id="productDetailList">
> <td><span wicket:id="fieldName">FIELD_NAME</span></td>
> <td><input type="text" size="50" maxlength="100"
> wicket:id="productDetailField"/></td>
> </tr>
> <tr valign="top">
> <td></td>
> <td><input type="submit" value="Edit" class="Button" /></td>
> </tr>
> </table>
> </form>
>
> === ProductEditForm.java ===
>
> public class ProductEditForm extends Form {
>
> @EJB(name = "LearnWicketEJB/ProductService")
> private ProductService productService;
>
> private ListView productDetailList;
>
> public ProductEditForm(String componentName, final Product product) {
>
> super(componentName);
> this.product = product;
>
> this.add(productDetailList = new ListView("productDetailList",
> this.productService.getProductDetailsByProductId(product.getId())) {
> @Override
> protected void populateItem(final ListItem item) {
> final ProductDetail productDetail = (ProductDetail)
> item.getModelObject();
> item.add(new Label("fieldName",
> productService.getField(productDetail.getFieldId()).getName() + " :"));
> item.add(new TextField("productDetailField", new
> PropertyModel(productDetail, "content")));
> }
> });
>
> }
>
> @Override
> public void onSubmit() {
>
> for (Object object : this.productDetailList.getModelObject()) {
> ProductDetail productDetail = (ProductDetail) object;
>
> this.productService.updateProductDetail(productDetail.getProductId(),
> productDetail.getFieldId(), productDetail.getContent(),
> productDetail.getNotApplicable());
> }
>
> this.setResponsePage(new
> ProductConfirmation(ProductConfirmation.CONFIRMATION_TYPE_EDIT));
>
> }
>
> }
>
> === End of Code ===
>
> I've realized that the ListView in the form generate unique field name
> (which is exactly what I need) :
>
> <tr valign="top">
> <td><span>Manufacturer :</span></td>
> <td><input type="text" size="50" maxlength="100" value="Intel"
> name="productDetailList:0:productDetailField"/></td>
> </tr>
> <tr valign="top">
> <td><span>Series :</span></td>
> <td><input type="text" size="50" maxlength="100" value="Core i7"
> name="productDetailList:1:productDetailField"/></td>
> </tr>
> <tr valign="top">
> <td><span>Core Name :</span></td>
> <td><input type="text" size="50" maxlength="100" value="Bloomfield"
> name="productDetailList:2:productDetailField"/></td>
> </tr>
> ... etc etc etc ...
>
> Is this good enough? Well, at least this works and simple enough to me...
> Anyone has better solutions?
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Dynamic fields in form
Posted by Daniel Toffetti <dt...@yahoo.com.ar>.
Agus Purnomo <furunomail <at> gmail.com> writes:
>
> ... etc etc etc ...
>
> Is this good enough? Well, at least this works and simple enough to me...
> Anyone has better solutions?
>
I don't know if it's a "better" solution, perhaps just an alternative, have
you taken a look at Wicket Web Beans ?
http://code.google.com/p/wicket-web-beans/
Regards,
Daniel
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Dynamic fields in form
Posted by Agus Purnomo <fu...@gmail.com>.
Ow yeah... Looks like I can get away with this :
=== ProductEdit.html ===
<form wicket:id="productEditForm">
<table width="100%" cellpadding="0" cellspacing="5">
<tr valign="top" wicket:id="productDetailList">
<td><span wicket:id="fieldName">FIELD_NAME</span></td>
<td><input type="text" size="50" maxlength="100"
wicket:id="productDetailField"/></td>
</tr>
<tr valign="top">
<td></td>
<td><input type="submit" value="Edit" class="Button" /></td>
</tr>
</table>
</form>
=== ProductEditForm.java ===
public class ProductEditForm extends Form {
@EJB(name = "LearnWicketEJB/ProductService")
private ProductService productService;
private ListView productDetailList;
public ProductEditForm(String componentName, final Product product) {
super(componentName);
this.product = product;
this.add(productDetailList = new ListView("productDetailList",
this.productService.getProductDetailsByProductId(product.getId())) {
@Override
protected void populateItem(final ListItem item) {
final ProductDetail productDetail = (ProductDetail)
item.getModelObject();
item.add(new Label("fieldName",
productService.getField(productDetail.getFieldId()).getName() + " :"));
item.add(new TextField("productDetailField", new
PropertyModel(productDetail, "content")));
}
});
}
@Override
public void onSubmit() {
for (Object object : this.productDetailList.getModelObject()) {
ProductDetail productDetail = (ProductDetail) object;
this.productService.updateProductDetail(productDetail.getProductId(),
productDetail.getFieldId(), productDetail.getContent(),
productDetail.getNotApplicable());
}
this.setResponsePage(new
ProductConfirmation(ProductConfirmation.CONFIRMATION_TYPE_EDIT));
}
}
=== End of Code ===
I've realized that the ListView in the form generate unique field name
(which is exactly what I need) :
<tr valign="top">
<td><span>Manufacturer :</span></td>
<td><input type="text" size="50" maxlength="100" value="Intel"
name="productDetailList:0:productDetailField"/></td>
</tr>
<tr valign="top">
<td><span>Series :</span></td>
<td><input type="text" size="50" maxlength="100" value="Core i7"
name="productDetailList:1:productDetailField"/></td>
</tr>
<tr valign="top">
<td><span>Core Name :</span></td>
<td><input type="text" size="50" maxlength="100" value="Bloomfield"
name="productDetailList:2:productDetailField"/></td>
</tr>
... etc etc etc ...
Is this good enough? Well, at least this works and simple enough to me...
Anyone has better solutions?
Re: Dynamic fields in form
Posted by Igor Vaynberg <ig...@gmail.com>.
then you can create a panel per field type and add all the right
fields using a repeater. so have a textpanel, selectpanel, etc.
add them into RepeatingView.
-igor
On Sat, Jul 18, 2009 at 9:26 AM, Agus Purnomo<fu...@gmail.com> wrote:
> oh I forgot to write this field in the products table :
> category_id / bigint / FK from Categories.id
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Dynamic fields in form
Posted by Agus Purnomo <fu...@gmail.com>.
oh I forgot to write this field in the products table :
category_id / bigint / FK from Categories.id
Re: Dynamic fields in form
Posted by Agus Purnomo <fu...@gmail.com>.
Well, the problem is, the category itself is dynamic, here's (a simplified
version) my database structure :
--- Table : Products ---
id / bigint / PK
name / varchar
--- Table : Categories ---
id / bigint / PK
name / varchar
--- Table : Fields ---
id / bigint / PK
name / varchar
category_id / bigint / FK from Categories.id
--- Table : Product Details ---
product_id / bigint / PK / FK from Products.id
field_id / bigint / PK / FK from Fields.id
content / varchar
And I'm just starting with Wicket for about 2 days or so...
But let me try that ,haven't learned about it yet... Thanks anyway!
More helps is much appreciated :)
Re: Dynamic fields in form
Posted by Igor Vaynberg <ig...@gmail.com>.
create two different panels or fragments that contain form components
for cpu or motherboard, then simply add the correct one to the form.
-igor
On Sat, Jul 18, 2009 at 9:03 AM, Agus Purnomo<fu...@gmail.com> wrote:
> Hello.
>
> I'm currently learning Wicket by converting my previous JSP site to Wicket.
> In my previous site, I have a product detail forms for the user to enter the
> detail of a specific product. This kind of detail differs for each category
> of products (e.g. a CPU has different detail with a motherboard). The code
> (in mixed JSP, crippled for simplicity sake) is like this :
>
> <form action="edit_action.jsp?product_id=<%= product.getId() %>"
> method="post">
> <table width="100%" cellpadding="0" cellspacing="5">
> <tr valign="top">
> <td width="20%">Name : </td>
> <td width="80%"><input type="text" name="name" size="50"
> maxlength="100" value="<%= product.getName() %>" /></td>
> </tr>
> *<%
> for (ProductDetail productDetail :
> EJBAgent.getProductService().getProductDetailsByProduct(product.getId())) {
> %>
> <tr valign="top">
> <td><%=
> EJBAgent.**getProductService**().getField(productDetail.getFieldId()).getName()
> %> : </td>
> <td>
> <input type="text" name="<%= productDetail.getFieldId() %>"
> id="<%= productDetail.getFieldId() %>" size="50" maxlength="255" value="<%=
> productDetail.getContent() %>" />
> </td>
> </tr>
> <%
> }
> %>*
> <tr valign="top">
> <td></td>
> <td><input type="submit" value="Edit" class="Button" /></td>
> </tr>
> </table>
> </form>
>
> The bold parts are the most important section, in that code, it generates
> the dynamic field for each product details associated with a product
> (according to their corresponding category).
>
> How can I do this with Wicket? I've been googling so far with no luck...
>
> Thanks before!
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org