I am very new to Dojo and was trying a tutorial on DOJO with JSF. I went through numerous link to understand how to integrate DOJO with JSF.
DOJO version: 1.9 JSF Version: 2.0 with JSP
I wrote a code having both JSF and DOJO but apparently it is not working properly.
First the dojo tags are not recognized in Eclipse (IDE). It is a pain remembering each and every tag. Each tag in IDE is highlighted as yellow indicating undefined attribute name. I Have no clue why i cannot press ALT+Space and get the components of dojo. Why even after including all the scripts, the components are not resolved.
Code Snippet:
<%@ 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>
When the Page load, 3 components are visible as opposed to 2.
a. Input text with 'X' marked. I cannot write into this component b. Input text for Project Name. c. Text area for Project Description.
Following problems are faced:
a. Component with X appears which should not appear. b. The project name field has validation.However only after I put space in the input, the validation fires. Else it does not fire. c. The validation message is shown below the text area whereas ideally it should be shown right below the respective component. d. On form submit, the validation is not fired. I dont know whether the input value is correct or not. e. NO VALUE is obtained in the Backing bean action listener. Both the fields prints blank.
Someone please guide.
