!エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。PrimeFacesTweetあけましておめでとうございます。2014年も開発を中心に、自分なりにコツコツと頑張っていこうと思います(^^)冬休み、やっと少しまとまった時間が取れたので、今さらながらにJavaScriptやjQueryを触っています。EE7ベース)、「こんなことやりたい」といったイメージの具体化を少しずつしています。無限スクロールで、今やりたいことの1つに無限スクロールがあります。TwitterやFacebookで画面下にスクロールするとデータが読み込まれるアレです。最近、動画サービスのHuluに入ったのですが、画像で同じようなことがされていました。別にJSFにこだわるわけではないのですが、JSFだとどんな風に実現するんだ?と気になって(^^;イメージとしては以下のようにパネルのコンポーネントが並んでいる画面で下にスクロールすると新しいパネルが表示されていく、というそんな様な画面です。jQueryだとjQueryのプラグインだと色々あるみたいです(^^;以下サイトでまとまってました。要素を無限スクロールさせるjQueryプラグインいくつかjQueryを触り始めて思ったのですが、プラグインがたくさんありすぎて、どれがマッチするのか探すの結構大変そうな気が...(^^;時間があると楽しいの間違いないですが、納期ある仕事だと悩ましそうな。JSFだとJSFでも普通にjQueryのプラグインとうまく組み合わせて作ることもできそうです。実際、以下のサイトはそんな感じでした。ExtensionsのWaypointコンポPrimeFacesのデモを何気にみていたら、Extensionsに無限スクロールのサンプルがあって、コンポーネントもありました。(なぜ上記のサンプルではPrimeFaces使ってるのにこれを使わないかは不明です...)Waypointコンポーネントhttp://fractalsoft.net/primeext-showcase-mojarra/views/waypoint.jsf中身はjQueryのWaypointプラグインを利用してると思われます(サンプルのコード的にも)で、これを使って簡単に最初のイメージのものを作ってみました。画面表示時こんな感じでパネルがワラワラと並んでます。スクロールして画面の最下端に触れるとイベントが発火して「すたーと」ダイアログ表示とともに追加のパネルデータを読み込みます(読み込む前の時点では以下図のようにパネル50まで存在)。パネルの読み込み完了のイベントで「えんど」ダイアログが表示されます。パネルがちゃんと増えてるー。再度スクロールして画面下に到達すると同じことの繰り返しです。Bean)に画面に表示されるパネルの元データとしてListを定義します。この例ではサンプルを簡単にするためStringにしています。初期表示時に文字列を50個、リストに入れます。リストに文字列を追加するメソッドも定義しておきます。}}画面側は以下のような感じで、少しややこしい感じです。Bean)のメソッドを呼ぶためにremoteCommandコンポを定義してactionListenerでメソッドを紐づけますこんな感じです。1では通常、for属性でコンポのIDを指定するか、入れ子にwaypointを定義します。上記ではどちらの定義でもないのですが、forがnullの場合は親に対するものとなるため、上記例はFormが対象となりますJavaScriptの中でwaypointを外したり付けたりしてるのは、データを増やしたタイミングで再度イベント実行されて無限ループされるのを防ぐためです。Waypointsのドキュメントやサンプルが参考になりました。$.waypoints('viewportHeight')はざっくり言うと内部で表示されている縦幅なんですね。http://imakewebthings.com/jquery-waypoints/#docsわかりにくかったので図にしてみました。上記のwaypointはfor属性でコンポーネント指定していないので、親であるformが指定されています。formのoffsetがマイナス画面でみえない分=最下端となってます。ヶ月)長らくC#屋でした。EEを触ることになりました。Web開発も初めてです。日々の勉強メモとしてブログ作成。デビュー当時から堀北真希さんを愛するエンジニアです。現在は乃木坂46が大好きです。(15)にほんブログ村にほんブログ村はてなブログをはじめよう!kikutaro777さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。