How to create forms for multiple database tables?

Question

I have an application that processes text files. Depending on the file generator, it searches for some defined texts. Then it executes different actions on the found texts. These actions are stored in a database and correspond to the following entities:

@Entity
@Table(name = "file_generator")
public class FileGenerator {

    @Id
    @GeneratedValue
    private long id;

    private String name;

    @OneToMany(mappedBy = "fileGenerator", cascade = CascadeType.ALL)
    private Set<Action> actions = new HashSet<>();

}

@Entity
@Table(name = "detection_text")
public class DetectionText {

    @Id
    @GeneratedValue
    private long id;

    private String text;

}

@Entity
public class Action {

    @Id
    @GeneratedValue
    private long id;

    @Enumerated(EnumType.STRING)
    private Name name;

    @ManyToOne
    @JoinColumn(name = "file_generator_id")
    private FileGenerator fileGenerator;

    @ManyToOne
    @JoinColumn(name = "detection_text_id")
    private DetectionText detectionText;

    public enum Name {

        DELETE, REPLACE_WITH_DEFAULT

    }

}

For example if I want to delete all occurences of foo in files generated by bar, I would write the following in my database:

file_generator:

+----+------+
| id | name |
+----+------+
|  1 | bar  |
+----+------+

detection_text:

+----+------+
| id | text |
+----+------+
|  1 | foo  |
+----+------+

action:

+----+-------------------+-------------------+--------+
| id | file_generator_id | detection_text_id |  name  |
+----+-------------------+-------------------+--------+
|  1 |                 1 |                 1 | DELETE |
+----+-------------------+-------------------+--------+

Now I want to create one website that lets the user store new FileGenerators together with the Action relation and one website that lets the user edit this 'view'. I created a snippet below, that shows the form.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<form style="margin: 20px;">
  <div class="form-group">
    <label for="file-generator-name">File generator</label>
    <input type="text" class="form-control" id="file-generator-name" name="file-generator-name" />
  </div>
  <div class="form-group">
    <label for="delete-detection-texts">'DELETE' detection texts</label>
    <select class="form-control" id="delete-detection-texts" name="delete-detection-texts" multiple="true">
      <option value="1">All</option>
      <option value="1">available</option>
      <option value="1">detection</option>
      <option value="1">texts</option>
    </select>
  </div>
  <div class="form-group">
    <label for="replace-detection-texts">'REPLACE_WITH_DEFAULT' detection texts</label>
    <select class="form-control" id="replace-detection-texts" name="replace-detection-texts" multiple="true">
      <option value="1">All</option>
      <option value="1">available</option>
      <option value="1">detection</option>
      <option value="1">texts</option>
    </select>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

How can I implement this functionality? Is it even possible? Are there better approaches?

Answer 1

I created a new bean that backs the form:

public class FileGeneratorAndDetectionTexts {

    private String fileGeneratorName;

    private Set<DetectionText> deleteTexts;

    private Set<DetectionText> replaceTexts;

}

I transform this bean in my service layer to the corresponding objects from the OP.