私はJSFが初めてで、私が取り組んでいるアプリケーションのために、複数のフィールド入力フォームを作成する必要があります。
簡単に言えば、ユーザーはデータを入力するときに inputText と、別のデータを入力するために新しい入力テキストを追加する「追加」ボタンを持つ必要があります。ユーザーが完了したら、別の送信ボタンを押します。すでに行われたものを探しましたが、何も見つからなかったので、独自のカスタム jsf コンポーネントを作成することにしました
アイデアは、datatable の各行の inputText を含む dataTable と、datatable にバインドされたコレクションに行を追加するボタンを組み合わせたコンポーネントを作成することでした。
私はjsfのドキュメントと本を調べていますが、少し混乱していて、そのようなコンポーネントを作成できるかどうかわかりません...誰か助けてもらえますか? ティア
あなたが望むすべてを行うことが可能です。
既存のコントロールを使用して、必要なものに近いものを構築できます。JSF を最大限に活用するための良い方法は、ビューに合わせてモデルを調整することです。たとえば、このビューには、データ テーブルに値を追加できる編集オプションが表示されます。
<f:view>
<h:form>
<h:dataTable value="#{people.list}" var="row">
<h:column>
<f:facet name="header">
<h:outputText value="#" />
</f:facet>
<h:selectBooleanCheckbox value="#{row.selected}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="First Name" />
</f:facet>
<h:inputText value="#{row.firstname}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Last Name" />
</f:facet>
<h:inputText value="#{row.lastname}" />
</h:column>
<f:facet name="footer">
<h:panelGroup>
<h:commandButton value="Add Row" action="#{people.addPerson}" />
<h:commandButton value="Delete Selected"
action="#{people.deleteSelected}" />
<h:commandButton value="Finish" action="#{people.finish}" />
</h:panelGroup>
</f:facet>
</h:dataTable>
</h:form>
</f:view>
ピープル豆:
public class People implements Serializable {
private static final long serialVersionUID = 1L;
private List<Person> people = new ArrayList<Person>();
public People() {
// initialise with one entry
people.add(new Person());
}
public List<Person> getList() {
return people;
}
public String addPerson() {
people.add(new Person());
return null;
}
public String deleteSelected() {
Iterator<Person> entries = people.iterator();
while (entries.hasNext()) {
Person person = entries.next();
if (person.isSelected()) {
entries.remove();
}
}
return null;
}
public String finish() {
System.out.println(people);
return "someNavigationRule";
}
}
人豆:
public class Person implements Serializable {
private static final long serialVersionUID = 1L;
private String firstname;
private String lastname;
private transient boolean selected = false;
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getLastname() {
return lastname;
}
public void setLastname(String lastname) {
this.lastname = lastname;
}
public boolean isSelected() {
return selected;
}
public void setSelected(boolean selected) {
this.selected = selected;
}
}
顔-config.xml:
<managed-bean>
<managed-bean-name>people</managed-bean-name>
<managed-bean-class>addmultiple.People</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
このアプローチは非常に柔軟で、一部の CSS を使用すると見栄えがよくなります。ビューとモデルにいくつかの変更を加えると、たとえば、最後の行のみを編集可能にすることができます。
結果のエクスペリエンスが十分にリッチでない場合、または再利用できるものが必要な場合は、カスタム コントロールを作成できます。何が欲しいかを正確に知らずに詳細に入るのは難しいですが、おそらく次のものが必要になるでしょう: