今だけ人気マンガ100円レンタル特集♪

JSF初心者の為、頓珍漢な質問で恐縮です。

以下のようなJSFタグを使用したJSPがあるとします。

<%@ page contentType="text/html;charset=Shift_JIS" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
</head>
<body>
<f:view>
<h:form>
<h:inputText id="number" value="#{myBean.message}"/>
<h:commandButton action="#{myBean.doHoge}" value="送信"/>
</h:form>
</f:view>
</body>
</html>

このJSPに、以下の処理をJavaScriptで実装したいと思っています。
「送信ボタンのOnClickイベントでinputTextに入力された文字をJavaScriptのAlert()関数でポップアップ表示する。」

JSFタグがなければなんてことのない処理ですが、JSFタグを使用している状況でどのようにJavaScriptを使用していいものなのかがよくわかりません。


上記の処理はどのように実装すればいいのでようか?
JSFでJavaScriptを使用する方法について参考になるサイトがあれば教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

JSFでも、普通にJavaScriptは組み込めますよ。



<%@ page contentType="text/html;charset=Shift_JIS" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
<script language="JavaScript">
function test(){
alert("Hello");
}
</script>
</head>
<body>
<f:view>
<h:form>
<h:inputText id="number" value="#{myBean.message}"/>
<h:commandButton action="" onclick="test()" value="送信"/>
</h:form>
</f:view>
</body>
</html>

こんな感じで、ボタンをクリックするとtest()が呼び出されると思います。onclickを使うならば、当然ですが同じコンポーネントのactionに設定したバインディングははずしておきます。
<h:commandButton>など、JSFのGUIコンポーネントには、onclickなどのJavaScriptイベント用の属性が用意されていますので調べてみるといいでしょう。
    • good
    • 1
この回答へのお礼

なるほど、JSFでない場合と同じですね。
とても参考になりました!
ありがとうございます!

お礼日時:2006/01/16 13:59

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QXHTMLで外部JSファイルを読み込むには?

XHTMLで外部JSファイルを読み込むには?

よろしくおねがいします。

初歩的ですみません

当方 XHTML+CSSでページを作成し
JSファイルを読み込みページのTOPへ移動するスクリプトを
作ったのですがXHTML上では上手くうごいてくれません。。。。
ソースはこちらです。
--------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>てすと</title>
<link href="style/stylesheet.css" rel="stylesheet" type="text/css">
<script src="script/top.js" type="text/JavaScript"></script>
--省略--
上記のソースは普通に動作するのですがDOCTYPEの宣言を

-------------------------------------------------------------
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>てすと</title>
<link href="style/stylesheet.css" rel="stylesheet" type="text/css">
<script src="script/top.js" type="text/JavaScript"></script>

--省略--

にすると・・・動いてくれません。下段のソースを利用したいのですが
何かJSファイルを読み込む方法はありますでしょうか??

アドバイス頂ければ幸いです。よろしくお願いいたします。

XHTMLで外部JSファイルを読み込むには?

よろしくおねがいします。

初歩的ですみません

当方 XHTML+CSSでページを作成し
JSファイルを読み込みページのTOPへ移動するスクリプトを
作ったのですがXHTML上では上手くうごいてくれません。。。。
ソースはこちらです。
--------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
...続きを読む

Aベストアンサー

どんな理由で「読み込まない」と判断されてるのでしょうか?

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QonClickで関数呼出し後に、結果に応じてsubmitを実行する方法

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しません・・・
onClick部分にonClick="return func(),submit();"と記述した場合、
func関数の実行結果がtrueでもfalseでも遷移してしまいます。
そこで、なんとなくonClick="return func()&&submit();"と記述してみたところ、
func関数がtrueの時のみうまく遷移するようになりました。

これは偶然そう動作しているのでしょうか、それとも上記は正しい記述方法なのでしょうか?
正しい記述方法ならいいのですが、上記以外に正式な記述方法があれば
教えていただけないでしょうか?

※TYPE="submit"にすればいいとは思うのですが、buttonで実現したいと
考えております。

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しませ...続きを読む

Aベストアンサー

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右式を結果とする演算子です。よって、funcメソッド、submitメソッド両方を評価するため、funcメソッドの戻り値に関係なく、submitされます。

3.&&で区切った場合、
論理演算子「&&」は、左右ともにtrue(0以外)の場合のみtrueとする演算子です。また、2項論理演算子は左式から評価し、左式だけで全体の結果がわかる場合、右式を評価しません。よって、funcメソッドがfalseを戻した場合、その時点でsubmitを評価しなくても演算結果は必ずfalseとなるのでそこで打ち切られ、trueを戻した場合、submitを評価しないと演算結果を得られないため、遷移したわけです。「&&」を「||(論理和)」に変更すると逆の結果得たと思います。

さて、では3の「&&」が正しいかと言われたら、文法上は正しいです。ただし、他人がみてわかるとは思えません。
そこで、以下の記述はいかがでしょう。読んでみてソースを理解できますか。


<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="func()">
</FORM>

(中略)

// funcの定義
function func() {
 if (a==0) {
  alert("処理しない");
  return ;
 }
 document.FormName.submit();
}

要は、ボタンを押されたら、funcを呼び出せ。
funcでは、aが0ならば、そこで終了しろ。
そうでなければ、documentオブジェクト内のFormNameと言う名前のオブジェクトのsubmitメソッドを呼べ。
です。

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右...続きを読む

Qyyyymmddからyyyy/mm/ddへの変換

いつもお世話になっております。
Aと言う変数にはyyyymmddの値が入っていて
Aをyyyy/mm/ddにしてBの変数に入れたい場合の処理がわかりません。
調べたところ、SimpleDateFormatクラスと言うものを使えばよいと言うことが判明しました。
しかし、今まで使ったことがないのでよくわかりません。
変数Aと変数BはどちらもString型です。
ご教授お願い致します。

Aベストアンサー

 こんにちは。

 本当に変数aの中の文字列が厳密にyyyyMMddの形式のなっているのなら、普通に

String b = a.substring(0, 4) + "/" + a.substring(4, 6) + "/" + a.substring(6, 8);

 これでいいと思いますが、いったんDate型にする必要があったり、ちゃんと日付として認識できるか確かめる必要がある場合は、

String a = "20051029";

SimpleDateFormat formatter = (SimpleDateFormat)DateFormat.getDateInstance();
formatter.applyPattern("yyyyMMdd");
try {
  Date date = formatter.parse(a);
  formatter.applyPattern("yyyy/MM/dd");
  String b = formatter.format(date);
  System.out.println(b);
}
catch (ParseException ex) {
  System.out.println("解析失敗");
}

 こんな感じでいいんじゃないでしょうか。

 こんにちは。

 本当に変数aの中の文字列が厳密にyyyyMMddの形式のなっているのなら、普通に

String b = a.substring(0, 4) + "/" + a.substring(4, 6) + "/" + a.substring(6, 8);

 これでいいと思いますが、いったんDate型にする必要があったり、ちゃんと日付として認識できるか確かめる必要がある場合は、

String a = "20051029";

SimpleDateFormat formatter = (SimpleDateFormat)DateFormat.getDateInstance();
formatter.applyPattern("yyyyMMdd");
try {
  Date date = formatter.p...続きを読む

QJava-jspの画面入力値保持について

画面にテキスト、ラジオボタン、リストボックス とボタンがあります。
ボタンを押すと、JAVAで処理を行い、jspのviewで表示します。

1.テキスト、ラジオボタン、リストボックスなどに値が入力、設定されている状態で
ボタンを押して処理後にテキスト、ラジオボタン、リストボックスの値が
変わらないようにしたいのですが、
その場合、たとえば、入力、設定値をセッションになどに格納しておき
jspの所で、セッションから値を設定すると言うような方法になるのでしょうか?

2.ボタン押して処理後、ラジオボタン、リストボックスの選択値も
  変えないようにしたいのですが、
  これはどのように実現するのが、適切なのでしょうか?


以上、よろしくお願いします。

Aベストアンサー

ボタンというのはフォームのサブミットボタンのことですよ?
つまり、画面遷移が起きることを前提とすると(元の同じ画面に戻るのも含みます)

テキスト、ラジオボタン、リストボックスの状態を「要求パラメータ」として
送信し、それを次画面に反映するというのが最も一般的な方法です。

フレームワーク struts のアクションフォーム&JSPカスタムタグを使うと比較的楽に
そういう画面が作れますが、多くのフレームワークでも大差ありません。
簡単な画面なら素のサーブレート+JSPでも十分作れます。

セッションでもできますが、 セッションはログイン情報などの保持など、
限定された範囲で使うのが普通です。また、結局セッションに最新の
テキスト、ラジオボタン、リストボックスの状態を送るには、「要求パラメータ」
を送信する必要があります。

AJAXを使うという方法もあります。この場合、ボタンは AJAX 処理だけを行い
画面遷移を起こさないので、サーバ側で画面のテキスト、ラジオボタン、
リストボックスの状態をもつ必要はありません。

Qjavascriptからjavaを呼び出したい

javascriptの勉強中です。
javascriptでajaxを用いてjavaのメソッドにアクセスし、結果をjavascriptに返す、という実装をしたいのですが上手く行きません。

流れとしては以下のようなものを想定しています。

js
/project/WebContent/js/testJS.js(画面の値を引数としてtestJavaクラスのtestMethodメソッドを呼び出す)

java
/project/src/java/jp/co/application/util/testJava.java(受け取った引数の値をtestDAOクラスのtestDAOMethodメソッドに渡す)

java
/project/src/java/jp/co/application/dao/testDAO.java(受け取った値を用いてDBにアクセスし、結果をjsに返す)

まず技術的に、同じプロジェクト内のjavaメソッドをjs上で呼び出し、結果を受け取るということは可能なのでしょうか。
ご教示お願いします。

Aベストアンサー

#3 です。

> 「javaを使わない」という条件だと、XMLのリクエストのみで実現は可能でしょうか。
DB上にあるデータを全てXML化して置いておけば出来なくはありません。
ただ、その場合は静的データ(XML)で管理することになるので、DBを使用する意味がなくなると思うのですが…。

DBを利用するならサーバサイドスクリプトの存在は必須です。

1. DBの内容をサーバ意サイドスクリプトで出力
2. 出力データを JavaScript で受け取り、カレンダーに描画する

このような処理が必要になります。
出力データのフォーマットは JSON, XML 何でも良いですが、JavaScript で認識しやすいデータが望ましいですね。
DBデータがあらかじめキャッシュして置ける内容なら初めからJavaScriptに全データをObjectとして渡しておくのが理想だと思います。
月が変化する毎にリクエストを発行する必要がなくなりますので、コードを単純化できます。
その場合は、カレンダーを出力するHTMLをサーバサイドスクリプトで書いて、JSONを出力しておくのが楽な実装ですね。

# Re: mifu223さん

#3 です。

> 「javaを使わない」という条件だと、XMLのリクエストのみで実現は可能でしょうか。
DB上にあるデータを全てXML化して置いておけば出来なくはありません。
ただ、その場合は静的データ(XML)で管理することになるので、DBを使用する意味がなくなると思うのですが…。

DBを利用するならサーバサイドスクリプトの存在は必須です。

1. DBの内容をサーバ意サイドスクリプトで出力
2. 出力データを JavaScript で受け取り、カレンダーに描画する

このような処理が必要になります。
出力データのフォーマッ...続きを読む

QonClickとsubmitの処理順序

#過去ログをあたりましたが、自分で納得いく解答がなかったので質問します。

フォームのsubmitボタンにonClickでチェッカーなどの関数を与えた場合、
submitでフォーム内容を送信するのと、onClickで指定されている関数の
どちらが先に処理されるのでしょうか。
(一応、WindowsのIE、ネスケ共々、onClickの処理の後、submitされるようではあります)

function tasikame {
(フォームの内容チェック/中略)
alert("入力されていない項目があります")
}

例えば、このような関数をonClickで起動する場合、フォームに入力されていない
項目があると、警告されます。
この時、submitはどの環境でも起動しないで終わるのでしょうか。
それとも警告が起動した後、フォーム内容はsubmitされてしまうのでしょうか。

#分かりづらければ、補足しますのでどうぞよろしく。

Aベストアンサー

> 例えば、このような関数をonClickで起動する場合、フォームに入力されていない
> 項目があると、警告されます。
> この時、submitはどの環境でも起動しないで終わるのでしょうか。
> それとも警告が起動した後、フォーム内容はsubmitされてしまうのでしょうか。

この関数の書き方だと、警告のメッセージボックスが表示され、OK を押すと、フォームの
内容は submit されます。

イベントハンドラでは、false を返すことで、本来の動作をキャンセルすることができます。
ですから、期待する(であろう)動作をするためには、

function tasikame {
 //フォームの内容チェック
  ...

 if ( フォームの内容が正しくなければ ) {
  alert("入力されていない項目があります");
  return false;
 } else {
  return true;
 }
}

というような書き方になります。

Q【JSF】バッキングビーンから別のバッキングビーンを参照するには?

【質問1】
表題のとおり、あるバッキングビーンからセッションスコープの別のバッキングビーンのプロパティをgetterで取得したいのですが、可能でしょうか?可能な場合、どのようにコードを組めばいいのでしょうか?


【質問2】
JSFを使用すればconfigの設定によりバッキングビーンがセッションに格納されますが、バッキングビーン以外のビーンクラス(バッキングビーンとしては使用しないがgetter、setterでアクセスするクラス)をHttpSessionに格納・取得することは出来ますか?

<h:commandButton action="#{myBean.doHoge}" value="GOGO" />

というのも、以上のボタンを押下すればバッキングビーン”myBean”のdoHoge()メソッドが呼び出されます。doHoge()の引数でRequestオブジェクトがもらえればそこからHttpSessionを利用することも出来るでしょうが、doHoge()メソッドは引数VOIDなので、HttpSessionをどう利用していいのかがわかりません。


よろしくお願いいたします。

【質問1】
表題のとおり、あるバッキングビーンからセッションスコープの別のバッキングビーンのプロパティをgetterで取得したいのですが、可能でしょうか?可能な場合、どのようにコードを組めばいいのでしょうか?


【質問2】
JSFを使用すればconfigの設定によりバッキングビーンがセッションに格納されますが、バッキングビーン以外のビーンクラス(バッキングビーンとしては使用しないがgetter、setterでアクセスするクラス)をHttpSessionに格納・取得することは出来ますか?

<h:commandButton...続きを読む

Aベストアンサー

要するに、あるメソッドから他のBeanにアクセスできればいいわけですね。

まず、Beanクラスを定義し、これをfaces-config.xmlなどに<managed-bean>タグで登録しておきます。このへんは普通のBacking Beanと同じですからそれの登録を参照してください。これで、Backing Bean以外にもいくらでもBeanは登録できます。
 で、外部からBeanを利用する方法ですが、例えば"bean1"という名前のMyBeanクラスのBeanインスタンスを得るならこんな具合になります。

FacesContext fc = FacesContext.getCurrentInstance();
Application app = fc.getApplication();
ValiableResolver vr = app.getVariableResolver();
MyBean bean = (MyBean)cr.resolveVariable(fc,"bean1");

FacesContextからApplicationを取得し、そこから更にValiableResolverを取得します。これが各種の情報を取得するためのクラスで、resolveVariableを使えば指定した名前の変数を取り出せます。
 なお、これらのクラスの詳細はJavaDocを参照してください。

参考URL:http://java.sun.com/j2ee/javaserverfaces/1.1_01/docs/api/index.html

要するに、あるメソッドから他のBeanにアクセスできればいいわけですね。

まず、Beanクラスを定義し、これをfaces-config.xmlなどに<managed-bean>タグで登録しておきます。このへんは普通のBacking Beanと同じですからそれの登録を参照してください。これで、Backing Bean以外にもいくらでもBeanは登録できます。
 で、外部からBeanを利用する方法ですが、例えば"bean1"という名前のMyBeanクラスのBeanインスタンスを得るならこんな具合になります。

FacesContext fc = FacesContext.getCurrentInstance(...続きを読む

Qテキストボックスに数字しか入力できないようにするには?

タイトルの通りなのですが、あるテキストボックスに数字しか入力できないようにしたいのですが可能でしょうか?また、

「あいうえお 12345 「」:・、¥・」

というような文字列をコピーし、そのテキストボックスにペーストした際にも数字の12345だけが残るといった事も実現したいのですが…

どなたかご存知の方いらっしゃいましたら教えて頂けると幸いです。

Aベストアンサー

>英数字

では、こんな感じで

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9a-z]+/i,'')">

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング