You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@tapestry.apache.org by jk...@apache.org on 2006/06/13 06:13:55 UTC
svn commit: r413800 - in /tapestry/tapestry4/trunk:
examples/TimeTracker/src/context/css/ framework/src/js/tapestry/
framework/src/js/tapestry/form/ framework/src/js/tapestry/widget/
framework/src/js/tests/widget/
Author: jkuhnert
Date: Mon Jun 12 21:13:51 2006
New Revision: 413800
URL: http://svn.apache.org/viewvc?rev=413800&view=rev
Log:
Playing with form validation
Added:
tapestry/tapestry4/trunk/framework/src/js/tapestry/widget/AlertDialog.js (with props)
tapestry/tapestry4/trunk/framework/src/js/tests/widget/test_AlertDialog.html (with props)
Modified:
tapestry/tapestry4/trunk/examples/TimeTracker/src/context/css/exception.css
tapestry/tapestry4/trunk/framework/src/js/tapestry/form.js
tapestry/tapestry4/trunk/framework/src/js/tapestry/form/validation.js
Modified: tapestry/tapestry4/trunk/examples/TimeTracker/src/context/css/exception.css
URL: http://svn.apache.org/viewvc/tapestry/tapestry4/trunk/examples/TimeTracker/src/context/css/exception.css?rev=413800&r1=413799&r2=413800&view=diff
==============================================================================
--- tapestry/tapestry4/trunk/examples/TimeTracker/src/context/css/exception.css (original)
+++ tapestry/tapestry4/trunk/examples/TimeTracker/src/context/css/exception.css Mon Jun 12 21:13:51 2006
@@ -1,32 +1,44 @@
.exceptionDialog {
- overflow:auto;
- display:block;
- margin-left:5%;
- margin-right:5%;
- height:500px;
- background-color:white;
+ overflow: auto;
+ display: block;
+ margin-left: 5%;
+ margin-right: 5%;
+ height: 500px;
+ background-color: white;
border-left: 2px solid #E07000;
border-right: 2px solid #E07000;
border-bottom: 2px solid #E07000;
- -moz-border-radius-bottomright: 10px;
- -moz-border-radius-bottomleft: 10px;
+ -moz-border-radius-bottomright: 10px;
+ -moz-border-radius-bottomleft: 10px;
}
.exceptionCloseLink {
- display:block;
- margin-left:5%;
- margin-right:5%;
+ display: block;
+ margin-left: 5%;
+ margin-right: 5%;
background-color: ThreeDFace;
- padding-top:3px;
- padding-left:5px;
- padding-bottom:3px;
- font-weight:bold;
- color:#000000;
- cursor:pointer;
- cursor:hand;
+ padding-top: 3px;
+ padding-left: 5px;
+ padding-bottom: 3px;
+ font-weight: bold;
+ color: #000000;
+ cursor: pointer;
+ cursor: hand;
border-left: 2px solid #E07000;
border-right: 2px solid #E07000;
border-top: 2px solid #E07000;
- -moz-border-radius-topright: 10px;
- -moz-border-radius-topleft: 10px;
+ -moz-border-radius-topright: 10px;
+ -moz-border-radius-topleft: 10px;
}
+
+.alertDialog {
+ width: 50%;
+ border: 2px solid #ff660a;
+ padding: 1em;
+ padding-bottom: 1.7em;
+ background: #ffffff;
+}
+
+.alertDialog .dojoButton {
+ float: right;
+}
\ No newline at end of file
Modified: tapestry/tapestry4/trunk/framework/src/js/tapestry/form.js
URL: http://svn.apache.org/viewvc/tapestry/tapestry4/trunk/framework/src/js/tapestry/form.js?rev=413800&r1=413799&r2=413800&view=diff
==============================================================================
--- tapestry/tapestry4/trunk/framework/src/js/tapestry/form.js (original)
+++ tapestry/tapestry4/trunk/framework/src/js/tapestry/form.js Mon Jun 12 21:13:51 2006
@@ -178,10 +178,14 @@
var id=evt.target.getAttribute("id");
if (!id) return;
-
+ try {
if (!tapestry.form.validation.validateForm(evt.target, this.forms[id])) {
dojo.event.browser.stopEvent(evt);
dojo.log.info("Stopped form submission, invalid input.");
+ }
+ } catch (e) {
+ alert("Error validating form:" + e);
+ dojo.event.browser.stopEvent(evt);
}
},
Modified: tapestry/tapestry4/trunk/framework/src/js/tapestry/form/validation.js
URL: http://svn.apache.org/viewvc/tapestry/tapestry4/trunk/framework/src/js/tapestry/form/validation.js?rev=413800&r1=413799&r2=413800&view=diff
==============================================================================
--- tapestry/tapestry4/trunk/framework/src/js/tapestry/form/validation.js (original)
+++ tapestry/tapestry4/trunk/framework/src/js/tapestry/form/validation.js Mon Jun 12 21:13:51 2006
@@ -2,6 +2,9 @@
dojo.require("dojo.validate.check");
dojo.require("dojo.html");
+dojo.require("dojo.widget.*");
+
+dojo.require("tapestry.widget.AlertDialog");
tapestry.form.validation={
@@ -47,6 +50,7 @@
var results=dojo.validate.check(form, props.profiles[i]);
if (!this.processResults(form, results, props.profiles[i])) {
+ this.summarizeErrors(form, results, props.profiles[i]);
return false;
}
}
@@ -71,6 +75,8 @@
processResults:function(form, results, profile){
if (results.isSuccessful()) return true;
+ //TODO: Need to remove previous field validation
+ //decorations for things fixed since last run
var formValid=true;
if (results.hasMissing()) {
var missing=results.getMissing();
@@ -110,5 +116,33 @@
if (!dojo.html.hasClass(field, this.invalidClass)){
dojo.html.prependClass(field, this.invalidClass);
}
+ },
+
+ /**
+ * Optionally allows an alert dialog/dhtml dialog/etc to
+ * be displayed to user to alert them to the invalid state
+ * of their form if validation errors have occurred.
+ *
+ * @param form The form being validated.
+ * @param results Returned value of dojo.validate.check(form, profile)
+ * @param profile Validation profile definition
+ */
+ summarizeErrors:function(form, results, profile){
+
+ var ad=dojo.widget.byId("validationDialog");
+ if (ad) {
+ ad.setMessage("You ~still~ have form input errors...wtf?");
+ ad.show();
+ return;
+ }
+
+ var node=document.createElement("span");
+ document.body.appendChild(node);
+ var dialog=dojo.widget.createWidget("AlertDialog",
+ {
+ widgetId:"validationDialog",
+ message:"Form input errors found, please fix before proceeding."
+ }, node);
+ dialog.show();
}
}
Added: tapestry/tapestry4/trunk/framework/src/js/tapestry/widget/AlertDialog.js
URL: http://svn.apache.org/viewvc/tapestry/tapestry4/trunk/framework/src/js/tapestry/widget/AlertDialog.js?rev=413800&view=auto
==============================================================================
--- tapestry/tapestry4/trunk/framework/src/js/tapestry/widget/AlertDialog.js (added)
+++ tapestry/tapestry4/trunk/framework/src/js/tapestry/widget/AlertDialog.js Mon Jun 12 21:13:51 2006
@@ -0,0 +1,52 @@
+dojo.provide("tapestry.widget.AlertDialog");
+
+dojo.require("dojo.widget.*");
+dojo.require("dojo.widget.Dialog");
+dojo.require("dojo.widget.Button");
+dojo.require("dojo.event.*");
+dojo.require("dojo.html");
+
+dojo.widget.defineWidget(
+ "tapestry.widget.AlertDialog",
+ dojo.widget.html.Dialog,
+ {
+ bgColor: "white",
+ bgOpacity: 0.5,
+ okButton:null,
+ messageNode:null,
+ message:"",
+
+ postCreate: function(args, frag, parentComp) {
+ tapestry.widget.AlertDialog.superclass.postCreate.call(this, args, frag, parentComp);
+
+ var content=document.createElement("div");
+ this.containerNode.appendChild(content);
+ dojo.html.addClass(this.containerNode, "alertDialog");
+
+ this.messageNode=document.createElement("div");
+ this.messageNode.innerHTML=this.message;
+ content.appendChild(this.messageNode);
+
+ var buttNode=document.createElement("div");
+ buttNode.appendChild(document.createTextNode("ok"));
+ content.appendChild(buttNode);
+ this.okButton=dojo.widget.createWidget("Button",{}, buttNode);
+
+ dojo.event.connect(this.okButton, "onClick", this, "hide");
+ },
+
+ setMessage:function(str){
+ this.messageNode.innerHTML=str;
+ },
+
+ hideDialog:function(e){
+ this.hide();
+ this.okButton.destroy();
+ tapestry.widget.AlertDialog.superclass.destroy.call(this);
+ dojo.dom.removeNode(this.bg);
+ }
+ },
+ "html"
+);
+
+dojo.widget.tags.addParseTreeHandler("dojo:alertdialog");
Propchange: tapestry/tapestry4/trunk/framework/src/js/tapestry/widget/AlertDialog.js
------------------------------------------------------------------------------
svn:eol-style = native
Added: tapestry/tapestry4/trunk/framework/src/js/tests/widget/test_AlertDialog.html
URL: http://svn.apache.org/viewvc/tapestry/tapestry4/trunk/framework/src/js/tests/widget/test_AlertDialog.html?rev=413800&view=auto
==============================================================================
--- tapestry/tapestry4/trunk/framework/src/js/tests/widget/test_AlertDialog.html (added)
+++ tapestry/tapestry4/trunk/framework/src/js/tests/widget/test_AlertDialog.html Mon Jun 12 21:13:51 2006
@@ -0,0 +1,52 @@
+<!--
+<!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" xml:lang="en" lang="en">
+<head>
+<title>DatePicker Test</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
+
+<script type="text/javascript">
+var djConfig = {
+ isDebug: true
+};
+</script>
+<script type="text/javascript" src="../../dojo/dojo.js"></script>
+<script type="text/javascript" src="../../tapestry/core.js"></script>
+
+</head>
+
+<body>
+<style>
+
+ .alertDialog {
+ width:260px;
+ border:2px solid #ff660a;
+ padding:1em;
+ padding-bottom:1.7em;
+ }
+
+ .alertDialog .dojoButton {
+ float:right;
+ }
+</style>
+
+<script type="text/javascript">
+ dojo.require("tapestry.widget.AlertDialog");
+
+ dojo.addOnLoad(function() {
+ dojo.widget.byId("alertDialog").show();
+ });
+</script>
+<p>la la la la lalala lala </p>
+
+
+<p> la ? lalale..... </p>
+<p>
+<div dojoType="AlertDialog" widgetId="alertDialog" ></div>
+</p>
+
+</body>
+</html>
\ No newline at end of file
Propchange: tapestry/tapestry4/trunk/framework/src/js/tests/widget/test_AlertDialog.html
------------------------------------------------------------------------------
svn:eol-style = native