Creating a dynamic html form

Question

Trying to learn how to create a dynamic html form. Elements will be defined in the database. After the page is created, the writeback data will be processed by the controller to insert the data into the database.

I am using playframework 1.2.4

I will be grateful for any recommendations / useful links

I can create a page if I know what the elements are and pull the data from the selection list from the database table when I call render (param object) from my controller and access the object in my view.

My hack so far: Created a table with the following columns

rid HTMLElementType ElementName HTMLElementOptions [if the element type is select] HTMLDefaultValue [default value for select like 'select a value from below'] HTMLElementEnabled 

Created a model

 package models; import play.*; import play.db.jpa.*; import play.data.validation.*; import javax.persistence.*; import java.util.*; @javax.persistence.Entity @Table(name="mytable") public class DynameForm extends Model{ public String HTMLElementType; public String ElementName; public String HTMLElementOptions; public String HTMLDefaultValue; public String HTMLElementEnabled; } 

In my view, I go through checking if it is <select> , and if so, enter an empty option. But not sure if this is the right way. In addition, in my opinion, I also have to check if this is there, then I need to put <input type=> and build the full tag

Also, how would I enforce validation on certain fields that are required, for example, surname name / ssn / etc? I can modify my table to have an IsRequired column that could help me.

Not sure if the right way to even capture data in the response record

Answer 1

basically the problem is creating the html form. You seem to have figured out your model. What you are missing is an idea. I did something like the following one time to create a model for a simple DB model.

I provide a list of fields, and the user interface is created based on the fields. I had only text fields, and I need only 2 cases (visible and invisible). Your usecase may require more complexity, so you can adapt if necessary.

dish.fields contains fields with relevant metadata. Any special things, such as require verification or are necessary, you will need to provide this information for presentation so that it can visualize the field accordingly.

The simplest way to simulate it would be to start with an HTML form and begin to generalize it one field at a time.

  #{list items:dish.fields, as:'f'} #{field 'f'} #{if f.display } <div class="control-group"> <label class="control-label"> &{f.name} </label> <div class="controls"> <input type="text" class="input-xlarge" placeholder="&{f.name}" name="${dish.getFieldId(f)}" value="${dish.getValue(f)}" ></input> </div> </div> #{/if} #{else} <input type="hidden" class="input-xlarge" placeholder="&{f.name}" name="${dish.getFieldId(f)}" value="${dish.getValue(f)}" ></input> #{/else} #{/field} #{/list} #{else} No fields #{/else} 

I needed to define my own fields, but you should be able to get this idea.

You will probably have to have many different input types for different use cases, so start with simple ones and generalize as you continue. You can also take a look at the implementation of the CRUD module.

my DisplayAttribute class (metadata for fields) looks something like this: You can use it as a starting point.

 public class DisplayAttribute { public Boolean display = Boolean.TRUE; public String type = ""; public String name; public DisplayAttribute(String name){ this.name = name; this.display = Boolean.TRUE; } public DisplayAttribute(String name, Boolean display){ this.name = name; this.display = display; } ... overridden equals and hash } 

edit How fields are processed? The controller passes the metadata ( DisplayAttribute ) to the view, in this case the metadata contains only the field name and can be displayed or not.

Model

Here, the model contains fields for rendering, but you can just as easily retrieve them from the database. My model is shared because I realized that I continued to do the same thing over and over for several models.

I implement my own interface, which gives me the getFields method. I also support two maps, so given the attribute, I can get its DisplayAttribute, and given the DisplayAttribute attribute, I get its name. I call the methods of this model from the view when necessary.

  public class GenericSimpleDBModel implements SimpleDBModel { public static AmazonSimpleDB sdb = null; private static final String bracketRemovalPattern = "(^.*?\\[|\\]\\s*$)"; private Map<DisplayAttribute, Set<String>> data = new TreeMap<DisplayAttribute, Set<String>>(new UuidComparator()); private Map<String, DisplayAttribute> attributeCache = new HashMap<String, DisplayAttribute>(); protected final String DOMAIN_NAME; public GenericSimpleDBModel() { initialize(getFields()); this.DOMAIN_NAME = "dishes"; } protected void initialize(String[] fields) { data = new TreeMap<DisplayAttribute, Set<String>>(new UuidComparator()); attributeCache = new HashMap<String, DisplayAttribute>(); for (String f : fields) { // if (f.equals(getUUIDField()) || f.equals(getIntegrityField())) { if (f.endsWith("uuid") || f.endsWith("integrity")) { setValue(f, "", Boolean.FALSE); } else { setValue(f, "", Boolean.TRUE); } } } protected void initialize(Set<DisplayAttribute> fields) { data = new TreeMap<DisplayAttribute, Set<String>>(new UuidComparator()); attributeCache = new HashMap<String, DisplayAttribute>(); for (DisplayAttribute atr : fields) { setValue(atr.name, ""); } } ... more methods }