私は Dojo を初めて使用し、JSF を使用して DOJO のチュートリアルを試していました。DOJOをJSFと統合する方法を理解するために、多数のリンクを調べました。
DOJO バージョン: 1.9 JSF バージョン: 2.0 with JSP
JSF と DOJO の両方を含むコードを書きましたが、どうやら正しく動作していないようです。
まず、Dojo タグが Eclipse (IDE) で認識されません。タグを一つ一つ覚えるのが大変です。IDE の各タグは、未定義の属性名を示す黄色で強調表示されます。ALT+Space を押して dojo のコンポーネントを取得できない理由がわかりません。すべてのスクリプトを含めた後でも、コンポーネントが解決されないのはなぜですか。
コードスニペット：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
@import url("${pageContext['request'].contextPath}/script/
dojo_lib/dijit/themes/claro/claro.css");
@import url("${pageContext['request'].contextPath}/script/
dojo_lib/dojo/resources/dojo.css");
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true,
isDebug: false,
};
</script>
<script type="text/javascript" src="${pageContext['request'].contextPath}/script/dojo_lib/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.Textarea");
</script>
<script type="text/javascript">
function dojoInit(){
dijit.registry.byClass('dijit.form.ValidationTextBox').forEach(function(pane){
pane.setValue(pane.domNode.previousSibling.value);
});
dijit.registry.byClass('dijit.form.Textarea').forEach(function(pane){
pane.setValue(pane.domNode.previousSibling.value);
});
}
dojo.addOnLoad(dojoInit);
</script>
<script type="text/javascript">
function setDojoValue(){
dijit.registry.byClass('dijit.form.ValidationTextBox').forEach(function(pane){
pane.domNode.previousSibling.value = pane.getValue();
});
dijit.registry.byClass('dijit.form.Textarea').forEach(function(pane){
pane.domNode.previousSibling.value = pane.getValue();
});
}
</script>
</head>
<body class="claro">
<f:view>
<h3>Project</h3>
<h:form id="project">
<table>
<tbody>
<tr>
<td>Project name:</td>
<td><h:inputHidden value="#{projectFormBean.projectName}"/><f:verbatim>
<input type="text" name="projectName" dojotype="dijit.form.ValidationTextBox" regExp="[\w]+"
required="true" invalidMessage="Invalid.Only Alphabets required" requiredMessage="Input Required"/></f:verbatim>
</td>
</tr>
<tr>
<td>Project description: </td>
<td><h:inputHidden value="#{projectFormBean.projectDescription}"/><f:verbatim>
<textarea dojotype="dijit.form.Textarea" style="width:80%">
</textarea></f:verbatim>
</td>
</tr>
</tbody>
</table>
<h:commandButton id="button_submit" actionListener="#{projectFormBean.invokeAction}"
value="Submit" type="submit" onclick="setDojoValue();"></h:commandButton>
</h:form>
</f:view>
<script>
require([
'dojo/parser',
'dojo/domReady!'
], function(parser){
parser.parse(); // tell dojo to check the DOM for widgets
});
</script>
</body>
</html>
ページが読み込まれると、2 つではなく 3 つのコンポーネントが表示されます。
を。'X' マークが付いたテキストを入力します。このコンポーネントに書き込めません b. プロジェクト名のテキストを入力します。c. プロジェクトの説明のテキスト領域。
次の問題に直面しています。
を。表示されるべきではない X のコンポーネントが表示されます。b. プロジェクト名フィールドには検証があります。ただし、入力にスペースを入れた後にのみ、検証が起動します。それ以外の場合は発火しません。c. 検証メッセージはテキスト領域の下に表示されますが、理想的にはそれぞれのコンポーネントのすぐ下に表示する必要があります。d. フォームの送信時に、検証は開始されません。入力値が正しいかどうかわかりません。e. バッキング Bean アクション リスナーで値が取得されません。両方のフィールドが空白で印刷されます。
誰か案内してください。