LoginSignup
5

More than 5 years have passed since last update.

ActionListenerでJavascriptをパラメータを指定して実行

Posted at

JSF+PrimefacesでActionListenerが終了後actionの前にJavascriptを実行するさらにサーバからパラメータをJavascriptに渡す方法

はじめに

Primefacesを使わなくてもできるのですが、結構優れたUIを簡単に実装できるPrimefacesってのがあるので使っています。
(実際使うと諸問題あるんですけどね…しかも結構ドはまりする系の諸問題…まあそれ以上に便利なので使っています今のところ)

JSFは基本的にActionListener実行後にActionが実行されて画面遷移等出来るのですが、ListenerとActionの間にひと手間Javascriptを実行したいという時があります。
さらにその際にサーバからパラメータなんかも渡したかったり、というのがPrimefaces使ってると比較的楽ちんに実現出来ます。

例えば、ListenerでDBを更新し正常に終了したらダイアログを出したい とか

サンプルの構成

  • JSF+Primefaces
  • 画面側はxhtml(JavaScriptが記述)

ざっくりやること

サーバ側のAxctionListenerで返却したフラグによって、ダイアログ(オブジェクト)を出したり隠したりする。

  • 1.xhtmlにPrimefacesのcommandButtonを配置し、oncomplete属性にサーバから呼び出したいJavascriptを記述
  • 2.ActionListenerにJavascriptに渡すパラメータを記述

やること詳細版

xhtmlにcommandButtonを配置

<p:commandButton actionListener="#{sample.test1}"
                            oncomplete="handleRequest(xhr, status, args);" 
                            action="#{sample.test2}"
                            />

cncompleteで実行されるJavascriptを作成

function handleRequest(xhr, status, args) {

  if(args == null){return;}

  if(args.dialogShowFlag) {
      dlg.show();
    } else {
      dlg.hide();
    }
};

args.dialogShowFlagがtrueだったらdlg(dlgと名前つけたダイアログっぽいdivタグ)を表示する。falseだったら逆
後は、サーバからdialogShowFlagに値を返したい。

サーバ側(ActionListener)でJavascriptにcallbackする

public class Sample {
    public void test1(ActionEvent actionEvent){
        RequestContext context = RequestContext.getCurrentInstance();
        boolean flag = true;
        context.addCallbackParam("dialogShowFlag", flag);
    }

こうすると、test1実行後に、JavascriptのhandleRequestが実行されargsにサーバで設定した値が格納されています。
argsは複数の値も指定できるので柔軟にJavascriptをかけます。

最後にPrimefacesを使用していなくても上記は出来るそうです。(実績ないけど)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5