Challenge Engineer Life !

エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。

PrimeFacesのCarouselコンポとTwitter4Jで遊ぶ

Twitter4Jで何して遊ぼうかなーと考えてたのですが、PrimeFacesのリッチコンポにくっつけて表示してみようと思い、Carouselコンポーネントと合わせてみました。

別に明確な目的や意味はなくて、単にタイムラインを横に流してみただけ(^^;

こんな感じで表示されて

f:id:kikutaro777:20130721232843j:plain

右上の矢印でスライド

f:id:kikutaro777:20130721232849j:plain

だからどうしたって感じですが(^^;

ELでResponseListとバインドできるのでかなり簡単で、5分くらい作れました。

JSFのビューは

<?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:p="http://primefaces.org/ui">
    <h:head>
        <title>PrimeFacesとTwitter4jで遊ぶ</title>
    </h:head>
    <h:body>
        <h:form id="frm" style="font-size: 0.7em;">
            <h:panelGrid columns="1">
                <!-- プロフィール画像 -->
                <p:graphicImage id="profileImage" cache="true" value="#{twitterBean.profileImage}" />

                <!-- Carousel -->
                <p:carousel id="carouselTweet" value="#{twitterBean.myTweetList}" var="myTweet" 
                            circular="true" pageLinks="3" 
                            headerText="#{twitterBean.user.name}" footerText="#{twitterBean.user.screenName}">
                    <p:panel id="pnlTweet">
                        <h:panelGrid columns="1">
                            <!-- ツイート -->
                            <p:inputTextarea rows="6" value="#{myTweet.text}" />

                            <!-- ツイートした時間 -->
                            <h:outputLabel value="#{myTweet.createdAt}" />
                        </h:panelGrid>
                    </p:panel>
                </p:carousel>
            </h:panelGrid>
        </h:form>
    </h:body>
</html>

サンプルなのでJSFの管理対象Beanを使って

package jp.co.hoge.bean;

import java.io.IOException;
import java.io.Serializable;
import java.net.MalformedURLException;
import java.net.URL;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import lombok.Getter;
import lombok.Setter;
import org.primefaces.model.DefaultStreamedContent;
import org.primefaces.model.StreamedContent;
import twitter4j.ResponseList;
import twitter4j.Status;
import twitter4j.Twitter;
import twitter4j.TwitterException;
import twitter4j.TwitterFactory;
import twitter4j.User;

@ManagedBean
@SessionScoped
public class TwitterBean implements Serializable{
    
    private Twitter twitter;

    //Setter GetterはLombok利用
    
    @Setter @Getter
    private User user;
    
    @Setter @Getter
    private StreamedContent profileImage;
    
    @Setter @Getter
    private ResponseList<Status> myTweetList;

    @PostConstruct
    public void init() throws TwitterException, MalformedURLException, IOException{
        twitter = new TwitterFactory().getInstance();
        user = twitter.verifyCredentials();
        
        String imageUrl = user.getProfileImageURL();
        URL url = new URL(imageUrl);
        profileImage = new DefaultStreamedContent(url.openStream(), "image/jpeg");
        
        myTweetList = twitter.getUserTimeline();
    }
}

なんかもう少し本気で遊んでみて自分用のツイート画面作ってみようかなー。

にほんブログ村 IT技術ブログへ
にほんブログ村 にほんブログ村 IT技術ブログ Javaへ
にほんブログ村