Application in different files?

[thomy]

How is it possible to navigate between different xhtml files when i use touchfaces?

The configuration in faces-config doesn't work

index.xhtml:

Code: Select all

<f:view xmlns="http://www.w3.org/1999/xhtml" 
		xmlns:f="http://java.sun.com/jsf/core" 
		xmlns:i="http://primefaces.prime.com.tr/touch" 
		xmlns:ui="http://java.sun.com/jsf/facelets" 
		xmlns:h="http://java.sun.com/jsf/html" 
		xmlns:p="http://primefaces.prime.com.tr/ui">
			
		
    <i:application icon="/WebContent/images/logo.png">
        <!--LoginView-->
        <i:view title="Login" id="home">
            <h:form>
                <i:tableView id="panel" display="group" >
   						
						<i:rowGroup id="name" title="Name: " rendered="true">
                        <i:rowItem>
                            <h:inputText id="loginName" value="#{LoginController.name}"/>
                        </i:rowItem>
                    </i:rowGroup>
						<h:commandButton value="Login" action="#{LoginController.login}" />
                </i:tableView>
            </h:form>	
        </i:view>
	</i:application>
</f:view>

sucess.xhtml

Code: Select all

<f:view xmlns="http://www.w3.org/1999/xhtml" 
		xmlns:f="http://java.sun.com/jsf/core" 
		xmlns:i="http://primefaces.prime.com.tr/touch" 
		xmlns:ui="http://java.sun.com/jsf/facelets" 
		xmlns:h="http://java.sun.com/jsf/html" 
		xmlns:p="http://primefaces.prime.com.tr/ui">
	
    <i:application icon="/WebContent/images/logo.png">
        <!--LoginView-->
        <i:view title="success" id="home">
            <h:form prependId="false">
                <i:tableView id="panel" display="group" >
				   Success
                </i:tableView>
            </h:form>		
        </i:view>
	</i:application>
</f:view>

faces-config.xml

Code: Select all

<?xml version='1.0' encoding='UTF-8'?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
              version="1.2">     
      	
      	<application>
      		<view-handler>
      	  		com.sun.facelets.FaceletViewHandler
      		</view-handler>
    	</application>
	<managed-bean>
		<managed-bean-name>LoginController</managed-bean-name>
		<managed-bean-class>beans.LoginController</managed-bean-class>
		<managed-bean-scope>request</managed-bean-scope>
	</managed-bean>
	<navigation-rule>
		<from-view-id>index.xhtml</from-view-id>
		<navigation-case>
			<from-action>#{LoginController.login}</from-action>
			<from-outcome>success</from-outcome>
			<to-view-id>success.xhtml</to-view-id>
		</navigation-case>
	</navigation-rule>
</faces-config>

I Know that i can navigate through the views with the view ID. But i don't want to have my code in one file.

[cagatay.civici]

Well TouchFaces is not designed to navigate like a regular web application, instead views are used for that. General practice is to keep views in different xhtml files and load them dynamically with ajax. Still TouchFaces is beta and we're open to suggestions on improving the features.

[thomy]

Hi cagatay,
i don't know if i understand the navigation in touchfaces correctly.

I have created a small application with loggin. I realised it the way if the logginName and passwort is correct my textfields were not rendered and a link to the menu is rendered.

That works fine.

Code: Select all

<f:view xmlns="http://www.w3.org/1999/xhtml" 
		xmlns:f="http://java.sun.com/jsf/core" 
		xmlns:i="http://primefaces.prime.com.tr/touch" 
		xmlns:ui="http://java.sun.com/jsf/facelets" 
		xmlns:h="http://java.sun.com/jsf/html" 
		xmlns:p="http://primefaces.prime.com.tr/ui">
			
		
    <i:application icon="/WebContent/images/logo.png">
        <!--LoginView-->
        <i:view title="Login" id="home">
            <h:form prependId="false">
                <i:tableView id="panel" display="group" >
   
				    <!--Name-->
                    <i:rowGroup id="name" title="Name: " rendered="#{!LoginValidator.loggedIn}">
                        <i:rowItem>
                            <h:inputText id="loginName" value="#{LoginValidator.logginName}"/>
                        </i:rowItem>
                    </i:rowGroup>
					
					<!--Pw-->
                    <i:rowGroup id="pw" title="Passwort: " rendered="#{!LoginValidator.loggedIn}">
                        <i:rowItem>
                            <h:inputSecret id="loginPw" value="#{LoginValidator.pw}" />
                        </i:rowItem>
                    </i:rowGroup>

					<!--LoginButton-->
                    <i:rowGroup id="Button" rendered="#{!LoginValidator.loggedIn}">
                    	<p:commandLink actionListener="#{LoginValidator.login}" style="margin:0 10px;" styleClass="whiteButton" update="panel" rendered="#{!LoginValidator.loggedIn}">
						Einloggen </p:commandLink>
                    </i:rowGroup>

					<!--Message-->
						<h:outputText id="message" value="#{LoginValidator.message}" />	
					<!--Link Menu-->
					<i:rowGroup id="rowGroupLink" rendered="#{LoginValidator.loggedIn}">
	                    <i:rowItem id="rowItemLink" value="Zum Hauptmenü" view="menu"/>
	                </i:rowGroup>
                </i:tableView>
            </h:form>
			
        </i:view>

...

The problem is in a small project it's ok but when the application is growing on, it is getting more an more confusing.
Think about an application with 10 or more views.

I was looking for something like set an id to the application tag, that i can split my app on different files. But i haven't found anything.

You suggested to use ajax to load the different views dynamically.

Can you post a link to an example where this technology is used?

Thanks Thomy

[cagatay.civici]

Thomy what I meant was placing your views in different xhtml files and include them using <ui:include />, this way you can seperate each view in a seperate file. I'll think about the other navigation suggestion.

News app is pretty dynamic, views are loaded with ajax.

http://97.107.138.40:8080/prime-showcas ... /index.jsf

[thomy]

Hi cagatay,
I just want to make a case differentiation for my logIn.
When the correct name and password is insert i want to navigate to another view.

I found a way but this way isnt't very elegant.

I have a boolean in my bean where i can check the status loggedIn= true or false.

When loggedIn is true a rowItem with the link to another view is displayed.
In the case the name or password isn't correct a message is rendered for example "Name and password isn't correct."

Is it possible to handle such a case differentiation in another way?

Thomy

[cagatay.civici]

Thomy, I'm not sure the case you've mentioned is easy to implement with touchfaces beta but we're adding new features to make things easier. I'd suggest keeping it as it is for now and in november release these will be added to touchfaces. I'll even add an example with your case.

[thomy]

Ok thanks