web-dev-qa-db-ja.com

Twitter Bootstrap with Primefaces（JSF）

Twitter Bootstrap 2.0.2（http://Twitter.github.com/bootstrap）でPrimefaces 3.2（おそらく一般的にJSFに関連している）を使用しようとしています。

Starter-example（http://Twitter.github.com/bootstrap/examples/starter-template.html）に、<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>

これはJSFページでは問題なく機能しますが、単純な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>

ドロップダウンメニューが機能しなくなりました。 JavaScriptに関連していると思いますが、このバグをどこで検索すればよいかわかりません。

javascriptjsf-2primefacestwitter-bootstrap
15
Thor

まず、h:outputScriptを使用してjsファイルをロードすることをお勧めします...

Primefacesjqueryと手動で含まれているjqueryの間の競合の原因は...

PrimeFaces3.2にはjQuery1.7.1が付属しているため、...

を削除します

<script src="/resources/js/jquery-1.7.2.js"></script>あなたのコードから

<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"/>

JQuery Conflicts with Primefaces？ および関連する リソースの順序 もご覧ください。

8
Daniel

このテーマを追加する簡単な方法があります。

mavenプロジェクトベースを使用している場合は、次のようにします。

依存関係を追加する

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

または特定のテーマの依存関係を追加します

これをweb.xmlに追加します

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

Mavenを使用していない場合は、jarを手動でダウンロードして、クラスパスに追加します。

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

参照：

4
Andrés Canavesi

JQueryを2回インクルードしています（Primefacesは自動的にインポートします）。手動インポートを削除します。

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

そして、すべてが機能するはずです。

1
nfechner