web-dev-qa-db-fra.com

Twitter Bootstrap avec Primefaces (JSF)

J'essaie d'utiliser Primefaces 3.2 (c'est peut-être lié à JSF en général) avec Twitter Bootstrap 2.0.2 (http://Twitter.github.com/bootstrap).

J'ai ajouté à l'exemple de démarrage (http://Twitter.github.com/bootstrap/examples/starter-template.html) un menu déroulant avec les scripts suivants dans <h:head>:

<script src="/resources/js/bootstrap.js"></script>  
<script src="/resources/js/jquery-1.7.2.js"></script>
<script src="/resources/js/bootstrap-dropdown.js"></script>

Cela fonctionne très bien sur la page JSF, mais si j’ajoute un simple p:dataTable

<p:dataTable var="i" value="#{testBean.list}">
  <p:column>
    <f:facet name="header"><h:outputText value="Item"/></f:facet>
    <h:outputText value="#{i}"/>
  </p:column>
</p:dataTable>

le menu déroulant ne fonctionne plus. Je suppose que c'est lié à JavaScript, mais je ne sais pas où chercher ce bogue.

javascriptjsf-2primefacestwitter-bootstrap
15
Thor

Tout d’abord, vous feriez mieux d’utiliser h:outputScript pour charger des fichiers js ...

Je pense que sa cause de conflits entre primefaces jquery et celui inclus manuellement ...

PrimeFaces 3.2 est livré avec jQuery 1.7.1, donc ...

Retirer le

<script src="/resources/js/jquery-1.7.2.js"></script> de votre code

et modifiez votre inclusion de la manière suivante dans votre élément <h:head>

<f:facet name="first">
  <h:outputScript library="js" name="bootstrap.js"/>
</f:facet>
<h:outputScript library="primefaces" name="jquery/jquery.js"/>
<h:outputScript library="js" name="bootstrap-dropdown.js"/>

Jetez également un coup d'œil à JQuery Conflicts with Primefaces? et connexes classement des ressources .

8
Daniel

il existe un moyen plus facile d'ajouter ce thème.

Si vous utilisez une base maven project, procédez comme suit:

Ajouter une dépendance

    <dependency>  
        <groupId>org.primefaces.themes</groupId>  
        <artifactId>all-themes</artifactId>  
        <version>1.0.9</version>  
    </dependency>

Ou ajoutez une dépendance de thème spécifique

Ajoutez ceci dans votre web.xml 

    <context-param>
      <param-name>primefaces.THEME</param-name>
      <param-value>bootstrap</param-value>
    </context-param>

Si vous n'utilisez pas Maven, téléchargez le fichier jar manuellement et ajoutez-le à votre chemin de classe:

http://repository.primefaces.org/org/primefaces/themes/

Références:

4
Andrés Canavesi

Vous incluez deux fois JQuery (Primefaces l'importe automatiquement). Supprimez votre importation manuelle:

<script src="/erp/resources/js/jquery-1.7.2.js"></script>

et tout devrait fonctionner.

1
nfechner