Dynamische Eingabe-Tabelle mit JSF

[LordZed]

Hallo!

Ich arbeite zur Zeit an einem Projekt mit JSF und stehe gerade vor dem folgenden Problem:

In einem Eingabeformular wird mit JSF eine Tabelle geladen in dem Werte bereits enthalten sind. Diese Tabelle kann vom User über ein JavaScript manipuliert werden (neue Datensätze hinzu, alte löschen) - leider gibt es ja kein FORM-Tag für eine Tabelle. Nun stellt sich mir die Frage, was ich tun muss, damit diese neuen Zeilen im Bean verfügbar sind und ich sie im weiteren Verlauf der Web-Anwendung nutzen kann. Kann mir da vielleicht jemand helfen!? Hoffe ihr wisst, was ich meine 🙂

Gruß, LordZed

 

[L]

leider gibt es ja kein FORM-Tag für eine Tabelle

???

<h:form>
<tabelle-wie-auch-immer>
</h:form>

Ohne form keine chance, die Daten inne bean zu bekommn ..

 

[Guest]

So meinte ich das ja jetzt auch nicht!

Also ich versuchs mal mit Code zu erklären. Ich habe eine Seite mit einem Formular, das etwa so aussieht:

<form>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<table>
<tr>
<th>Vorname</th>
<th>Nachname</th>
</tr>
<tr>
<td>Max</td>
<td>Mustermann</td>
</tr>
</table>
</form>

Hier werden die Inhalte der Textfelder und der Tabellenzeilen dynamisch über JSF aus einer Bean gelesen.

Nun ist es dem User möglich über ein JavaScript der Tabelle neue Zeilen hinzuzufügen und meine Frage ist, was ich tun muss, damit diese über ein JavaScript hinzugefügten Zeilen ebenfalls in der Bean enthalten sind, oder muss ich da nichts weiter tun!?

 

[ps]

ich habe zwar nicht viel Ahnung von JSF, aber so kann das nicht funktionieren.

Wenn du per JavaScript das hinzufügst ist das erstmal nur auf dem Client (also dem Browser) bekannt.

Da eine Tabelle kein Formularelement ist wird das auch nicht bei einem Submit mit dem request übertragen (jaa, tut mir leid, das web ist nunmal http 😉 auch wenn jsf das nicht wahrhaben möchte.) Deine einzige chance ist es das Formular dynamisch per JS zu manipulieren. (ZB. für jede neue Zeile in der Tabelle ebenfalls ein oder mehrere hidden fields einfügen).

 

[Guest]

ok! dann habe ich da in jeder Tabellenzelle ein hiddenfield oder ein Textfield, das ich per CSS so manipuliere, dass man nicht mehr sieht, dass es ein Textfeld ist... aber landen neue Formularfelder der Tabelle dann auch wirklich in der Bean!?

Ich glaube ich werde in einer kleinen Testanwendung damit einfach mal rumspielen müssen! 😉

 

[LordZed]

Also der Code der JSF-Datei sieht jetzt so aus:

<h:form id="myForm">
	<h:dataTable value="#{dataBean.elements}" var="elem" id="myTable">
		<h:column id="colOne">
			<f:facet name="header"><h:outputText value="Vorname" /></f:facet>
			<h:inputText value="#{elem.vorname}" id="valOne" />
		</h:column>
		<h:column id="colTwo">
			<f:facet name="header"><h:outputText value="Nachname" /></f:facet>
			<h:inputText value="#{elem.nachname}" id="valTwo" />
		</h:column>
		<h:column id="colThree">
			<f:facet name="header"><h:outputText value="Delete" /></f:facet>
			<h:outputLink value="javascript:delRow(0);" id="valThree">
				<f:verbatim>Klick</f:verbatim>
			</h:outputLink>
		</h:column>
	</h:dataTable>
	<h:commandButton id="submit" value="Abschicken"/>
</h:form>

Die Funktion delRow(0) die ich jetzt testweise überall eingetragen habe löscht die erste Zeile der Tabelle. Funktioniert auch wunderbar, allerdings ist die Zeile, sobald ich auf "Abschicken" geklickt habe im nächsten Schritt trotzdem da!

 

[maki]

So geht das nicht in JSF, suhe dir lieber eine JSF KOmponente die das bereits unterstützt.

Da eine Tabelle kein Formularelement ist wird das auch nicht bei einem Submit mit dem request übertragen (jaa, tut mir leid, das web ist nunmal http icon_wink.gif auch wenn jsf das nicht wahrhaben möchte.

Hi ps,

stimmt so nicht, eine Tabelle ist in JSF teil eines Formulars, und serverseitig ist sie Teil des Komponentenbaums, http dagegen ist so gut wie irrelevant mit JSF.

 

[Terminator]

1. AJAX Post zum Server
2. Dort Element aus dem Model löschen/hinzufügen
3. Status/Message zurück zum Client senden
4. Client rendered Liste entsprechend des Return Status

 

[Guest]

So geht das nicht in JSF, suhe dir lieber eine JSF KOmponente die das bereits unterstützt.

Da eine Tabelle kein Formularelement ist wird das auch nicht bei einem Submit mit dem request übertragen (jaa, tut mir leid, das web ist nunmal http icon_wink.gif auch wenn jsf das nicht wahrhaben möchte.

Hi ps,

stimmt so nicht, eine Tabelle ist in JSF teil eines Formulars, und serverseitig ist sie Teil des Komponentenbaums, http dagegen ist so gut wie irrelevant mit JSF.

Wo finde ich denn solche fertigen Komponenten, die ich auch frei benutzen kann?

1. AJAX Post zum Server
2. Dort Element aus dem Model löschen/hinzufügen
3. Status/Message zurück zum Client senden
4. Client rendered Liste entsprechend des Return Status

Das's ja nun aber keine Lösung des Problems mit JSF sondern eine ganz andere Methode ^^

 

[Terminator]

> Das's ja nun aber keine Lösung des Problems mit JSF sondern eine ganz andere Methode

Doch das ist die Lösung für JSF, bei normalen Servlet/JSP brauchst du ja eben nicht den Server State zu synchronisieren.
Ob du dafür eine fertige Kompo nimmst, dir eine eigene Kompo baust oder das einmalig per JS codierst bleibt dir überlassen.


> Wo finde ich denn solche fertigen Komponenten, die ich auch frei benutzen kann?

Soviel ich weiss bietet A4J da ZusatzTags an, habs aber selber nicht in Verwendung

 

[Gast]

Würde mich mal bei Richfaces von JBoss umsehen, AJAX supporot kommt da von Haus aus mit, ausserdem gibt es viele andere freien JSF Komponenten.