# OpenFaces tabbedPane und h:form



## lieschen89 (29. Mai 2012)

Hi,

ich würde gern einen o:tabbedPane mit 2 Tabs benutzten. Jeder Tab hat seinen eigenen Button und Textfeld und wegen der Validierung mit h:messages hat auch jeder sein eigenes Form, so dass beim Klick auf Button in Tab1 nicht im Tab2 die messages für das Textfeld kommt weil das leer ist.

Jetzt ist nur das Porblem, dass der tabbedPane selbst in ein form geschachtelt muss, weil ansonsten kann ich nicht navigieren zwischen den beiden Tabs.

also, so geht der tabbedPane, aber bei ButtonKlick in Tab1 gehen in Tab2 die messages los und der ButtonKlick wird nicht ausgeführt


```
<h:body>
  <h:form>
	<o:tabbedPane loadingMode="client">
		<o:subPanel caption="tab1">
				<h:panelGrid id="grid1" columns="2">
					<h:outputText value="Name:" />
					<h:inputText value="#{Bean.name}" id="name" required="true" />

					<h:panelGroup></h:panelGroup>
					<h:commandButton value="einloggen" action="#{Bean.einloggen}" />

					<h:messages globalOnly="true"/>
				</h:panelGrid>
		</o:subPanel>
		<o:subPanel caption="tab2">
				<h:panelGrid id="Createsignon" columns="2">
					<h:outputText value="Name:" />
					<h:inputText value="#{Bean.name}" id="name2" required="true" />
					<h:panelGroup></h:panelGroup>
					<h:message for="name2"/>

					<h:panelGroup></h:panelGroup>
					<h:commandButton value="Registrieren" action="#{Bean.registrieren}"/>

					<h:panelGroup></h:panelGroup>
					<h:messages globalOnly="true" />

				</h:panelGrid>
		</o:subPanel>
	</o:tabbedPane>
 </h:form>
</h:body>
```

und so geht der tabbedPane nicht, also lässt sich einfach nicht navigieren.


```
<h:body>
	<o:tabbedPane loadingMode="client">
		<o:subPanel caption="tab1">
			<h:form>
				<h:panelGrid id="grid1" columns="2">
					<h:outputText value="Name:" />
					<h:inputText value="#{Bean.name}" id="name" required="true" />

					<h:panelGroup></h:panelGroup>
					<h:commandButton value="einloggen" action="#{Bean.einloggen}" />

					<h:messages globalOnly="true"/>
				</h:panelGrid>
			</h:form>
		</o:subPanel>
		<o:subPanel caption="tab2">

			<h:form>

				<h:panelGrid id="Createsignon" columns="2">
					<h:outputText value="Name:" />
					<h:inputText value="#{Bean.name}" id="name2" required="true" />
					<h:panelGroup></h:panelGroup>
					<h:message for="name2"/>

					<h:panelGroup></h:panelGroup>
					<h:commandButton value="Registrieren" action="#{Bean.registrieren}"/>

					<h:panelGroup></h:panelGroup>
					<h:messages globalOnly="true" />

				</h:panelGrid>
			</h:form>
		</o:subPanel>
	</o:tabbedPane>
</h:body>
```

hat vielleicht jemand eine Idee wie ich das lösen kann?


----------



## JimPanse (29. Mai 2012)

Die Lösung mit dem Tabs ist nicht gerade optimal weil die subPanel's nicht das immediate Attribute besitzen d.h. kannst du wegen den required Eingabefeldern nicht navigieren bzw. es erscheint eine Fehlermeldung.

Einfachste Lösung wäre required auf false zu setzen und die Validierung in der jeweiligen action-methode zu verlagern. Die Fehlermeldung kannst du an die auslösende Komponente hängen (actionlistener) oder über die jeweiligen client id's - bsp.


```
<h:body>
  <h:form id="myForm">
	<o:tabbedPane loadingMode="client">
		<o:subPanel caption="tab1">
				<h:panelGrid id="grid1" columns="2">
					<h:outputLabel for="name" value="Name:" />
					<h:inputText value="#{Bean.name}" id="name" required="true" />
                                        <h:message for="name"/>

                                         <h:outputLabel for="login" value=""/>
					<h:commandButton id="login" value="einloggen" action="#{Bean.einloggen}" />
					<h:message for="login"/>
				</h:panelGrid>
		</o:subPanel>
		<o:subPanel caption="tab2">
			...
		</o:subPanel>
	</o:tabbedPane>
 </h:form>
</h:body>
```


```
public class Bean {
private String name;

public String einloggen(){
if(name == null) FacesContext.getCurrentInstance().addMessage("myForm:name", new FacesMessage(FacesMessage.SEVERITY_ERROR, "Eingabe erforderlich", null));
}

try{

}catch(...){
FacesContext.getCurrentInstance().addMessage("myForm:login", new FacesMessage(FacesMessage.SEVERITY_ERROR, "Fehlerhafter login.", null));
return "";
}
return "login";
}
```


----------



## lieschen89 (29. Mai 2012)

super, damit klappts, danke.


----------

