2010-08-25 9 views
3

Je suis nouveau à JSF, je suis actuellement en cours d'exécution JSF 2.0 avec Tomcat et Primefaces. J'ai créé une page simple en utilisant le menu primal layoutUnit and primefaces. J'ai une disposition à trois panneaux avec le menu dans le panneau de gauche, la page principale au centre, et quelques trucs métriques/graphiques dans le panneau de droite. Je rencontre des difficultés à comprendre comment créer des vues séparées pour le panneau principal qui seront affichées lors de la sélection de l'élément de menu approprié. Je veux utiliser ajax donc il n'y a pas d'actualisation de page donc je veux juste créer quelque chose où si j'ai un outil "utilisateurs", quand je clique dessus, l'affichage des utilisateurs apparaîtra dans le panneau central, de même si j'ai un outil de configuration , Je veux que la vue configure soit montrée. J'ai essayé de créer des layoutUnits séparés pour chaque vue, puis j'utilise le rendu = "" pour le rendre quand un certain outil est cliqué mais cela ne fonctionne pas. Quelqu'un peut-il faire la lumière sur la bonne façon de faire cela? Je ne trouve aucun exemple en ligne. Merci.JSF 2.0 question de navigation du menu

Répondre

1

Essayez votre application Web en termes de modèle et utilisez la fonction de modèle Facelets. (Quelle version de JSF utilisez-vous? Essayez d'utiliser JSF2 ...).

Votre mise en page de primefaces pourrait faire partie du modèle. Par conséquent, chaque page ("utilisateurs", "outils") utilisant le modèle correspondrait en fait au panneau principal de votre mise en page "automatiquement" avec les panneaux gauche et droit ajoutés.

Imaginons que vous ayez un sous-menu "utilisateurs" dans le composant de menu de votre panneau de gauche. Il serait alors lié à votre vue "utilisateurs" (en utilisant Ajax).

Vous devriez lire: http://www.ibm.com/developerworks/java/library/j-jsf2fu2/

0

Vous devez créer des modèles Étape: 1

<?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:ui="http://java.sun.com/jsf/facelets" 
     xmlns:p="http://primefaces.org/ui" 

    <div> 
    /* define your pages here.*/ 
    /*menuPage refers the header information*/   
     <div class="menuPage"> 
      <ui:insert name="menuPage" /> 
     </div>  
    /* mainPage refers the what are your .xhtml files*/ 
     <div class="mainPage"> 
      <ui:insert name="mainPage" /> 
     </div> 
    /*footer page*/ 
     <div class="footerPage"> 
      <ui:insert name="footerPage" /> 
     </div> 

    </div> 

</html> 

Étape 2 Ensuite, créez la page pour MenuPage.xhtml séparée, MainPage.xhtml et FooterPage.xhtml

Étape: 3 Ecrire modèle

<?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:ui="http://java.sun.com/jsf/facelets" 
     xmlns:p="http://primefaces.org/ui"> 


    <ui:composition template="template.xhtml"> 

     <ui:define name="menuPage"> 
      <ui:include src="menuPage.xhtml" /> 
     </ui:define> 

     <ui:define name="mainPage"> 
      <ui:include src="mainPage.xhtml" /> 
     </ui:define> 

     <ui:define name="footerPage"> 
      <ui:include src="footerPage.xhtml" /> 
     </ui:define> 

    </ui:composition> 
</html>