JSFでコンポーネントをプログラムから動的に生成する

現在の開発とは別件の技術調査依頼があって、Java EEで次のようなことをしたい、とのことでした。

• 画像の上にコンポーネントを絶対座標で配置したい
• コンポーネントはDBの値によって動的に変えたい(プルダウンとか、その中身とかも)

最初聞いたとき、それWebじゃないですよね？と思いましたが、Web必須とのこと…ええ(-_-;

何の技術を使うか(ASP.NETとかになるかも)確定ではないですが、Java EE6ベースでどこまでできる？という感じの確認です。

とりあえず30分くらいで簡単な検証してみました。(DBは未使用)
※また今回のはあくまでも検証で、実用に耐えうるかわかりませんのでご注意下さい。

JSFは通常ビューを定義しますが、動的にコンポーネントが変わる、となるとプログラム側で生成せざるを得ません(render属性で切り替えもできなくはないですが)。幸いJSFはそういったことと親和性はあるので、以下のように書けました。

ちなみにコンポーネントはPrimeFacesを利用しています(^^;

package jp.co.hoge.technicalconfirmation;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.enterprise.context.SessionScoped;
import javax.faces.component.UISelectItems;
import javax.faces.context.FacesContext;
import javax.faces.model.SelectItem;
import javax.inject.Named;
import org.primefaces.component.panel.Panel;
import org.primefaces.component.selectonemenu.SelectOneMenu;

@Named(value = "testBean")
@SessionScoped
public class TestBean implements Serializable{
    
    //BackingBeanの呼び出しトリガーのためにとりあえず定義
    private String txt;

    public String getTxt() {
        return txt;
    }

    public void setTxt(String txt) {
        this.txt = txt;
    }
    
    @PostConstruct
    public void init(){
        txt = "値設定";
        
        //パネル生成
        Panel codingPanel = new Panel();
        codingPanel.setId("pnlCoding");
        codingPanel.setHeader("コードから生成したパネル");
        //絶対座標はとりあえずCSSで定義してみる
        codingPanel.setStyle("position:absolute;left:150px;top:300px;");
        
        //プルダウン生成
        SelectOneMenu codingPullDown = new SelectOneMenu();
        codingPullDown.setId("pdmCoding");
        
        //パネルの中にプルダウンを置く
        codingPanel.getChildren().add(codingPullDown);
        
        //プルダウンのアイテムを生成
        List<SelectItem> items = new ArrayList<SelectItem>();
        items.add(new SelectItem("key1","コードで追加した項目1"));
        items.add(new SelectItem("key2","コードで追加した項目2"));
        
        //UISelectItemsにアイテムをセット
        UISelectItems selectItems = new UISelectItems();
        selectItems.setValue(items);
        
        //プルダウンにアイテムを紐づける
        codingPullDown.getChildren().add(selectItems);
        
        //パネルを描画
        FacesContext.getCurrentInstance().getViewRoot().getChildren().add(codingPanel);
    }
    
}

ほとんどWindows Formプログラムのような…(-_-;
イベントの生成とかは今回していませんが、多分、今後の検証でやるかと思います。

で、画像はべたにビューへ置いておいて

<p:graphicImage id="imgId" value="/resources/images/duke.jpg" />

実行すると…

一応できたー。

プルダウン選択して、他の自動生成コンポの状態も変わって…なんてことやっていくと結構おそろしいコードになりそうなので、微妙ですが(^^;