2016-08-24 3 views
2

環境:ui:repeatをb:カルーセルと使用しますか?

私はJSF2.2、Bootsfaces 0.9.1での作業、Primefaces 6.0、JEE7とMySQL 5.7 DBとの組み合わせで5.2を休止しています。

は私が持っているもの:

私はイメージのセットを持つモデルを持っています。このセットには、タイトル、説明、ファイル名など、イメージの値を保持する私のカスタムImageクラスのインスタンスが含まれています。

イメージはファイルシステムに保存されており、モデルを格納するためのMySQL DBが用意されています。私は私のwebapp内のビューに画像を表示しようとし、すべて正常に動作します。私はブーツサーフェスからb:カルーセル・タグを使っていくつかの画像を表示しました。私が試した

次のステップは、異なるサイズのイメージのセットを表示するために使用していた:私はやってみました何

。次のコードはこれを実現する私の試みでした:

<b:carousel id="carousel" style="width: 800px; height: 400px;"> 
    <ui:repeat value="#{modelDetailBean.modelImages}" var="img"> 
     <b:carouselItem> 
       <b:image value="#{modelDetailBean.getImage(img)}"/> 
     </b:carouselItem> 
    </ui:repeat> 
</b:carousel> 

私のカルーセルに画像が表示されていないことを認識しました。それから、私はそれが動作しているかどうかを確認するために少なくとも1つの修正を追加しました。ただし、セットのすべてのイメージがカルーセルに存在することが認識されましたが、カルーセルはそれらを正しく考慮しません。

私の主な質問:カルーセルを移入するために繰り返しタグ:

はUIを使用することが可能ですか?

可能な場合:どうすればいいですか?私はここで間違って何をしていますか?

そうでない場合: JSFでこれを実現するにはどうすればよいですか?

答えて

1

基本的に、b:carouselコンポーネントは静的アイテムを必要としますが、ui:repeatは動的にレンダリングします。解決策は、b:carouselItemsの生成を早期のJSFライフサイクル段階に移行することです。

JSFはライフサイクルを段階的に実行し、レスポンスのレンダリングを担当するものが最後のものです(以下のリンクで詳しく説明しています)。要点は、コンポーネントではなくタグハンドラであり、ビューのビルド時に実行するJSTLを引き続き使用できることです。だから、基本的に、あなたのui:repeatc:forEachによってはあなたの問題を解決する必要があり置き換える:

<b:carousel id="carousel" style="width: 800px; height: 400px;"> 
    <c:forEach items="#{modelDetailBean.modelImages}" var="img"> 
     <b:carouselItem> 
       <b:image value="#{modelDetailBean.getImage(img)}"/> 
     </b:carouselItem> 
    </c:forEach> 
</b:carousel> 

古いクロサギ科JSFバージョン(2.1.18および以前)にPARTIAL_STATE_SAVINGでトラブルに開発者にもたらすために使用されるこのトリックはなく、もはや。とにかく、コンポーネントが評価される前に、常にJSTLの動作を覚えておいてください。以下のリンクから:

JSTLタグは、JSFコンポーネントツリー構築のフローを制御するためにのみ使用してください。 JSF UIコンポーネントを使用して、HTML出力生成のフローを制御します。 反復JSFコンポーネントのvarをJSTLタグ属性にバインドしないでください。 は、JSTLタグ属性のJSFイベントに依存しません。

また、それはそれを自分で行いのセクションで説明されているようb:carouselコンポーネントを忘れ、あなたは、単なるHTMLジェネレータとしてJSFを使用し、プレーンなブートストラップを使用してカルーセルを表示するために必要なHTMLを生成することがありましたdocs

も参照してください:まあはトリックをしたと、説明

+1

!残念ながら私は別の問題に遭遇しました。私はそれについて新しい質問をします。 – mweber

+0

さらに、 'b:カルーセル'と 'b:courouselItems'の間に' ui:repeat'を置くと、アイテムのHTML IDが変更されます。クライアント側のウィジェットが変更されたIDに対応しているかどうかは確認しませんでしたが、多くのウィジェットではそうではありません。さらに悪いことに、JSFツリーはBootsFacesの予想とは異なって見えます。それは 'ui:repeat'を見る。このコンポーネントは暗黙のうちに無視されます。 'b:carouselItem'は' ui:repeat'の子で、 'b:カルーセル'の孫です。私たちはBootsFacesにまだ孫を気にするよう教えていませんでした。さらに、 'ui:repeat'の子はレンダリングフェーズ中にレンダリングされます。これはBootsFacesのために遅くなります。 –

+0

@Xtreme Biker:答えの最初の文章を言いたいことがあります。残りの答えは正しいです。 'b:carousel'は静的コンテンツを期待しているので、JSFツリーを修正するのが解決策です.JSTLタグがそうしています。 –

関連する問題