From 9d42606405caa3f0deadd0241ef3b763f45d1a97 Mon Sep 17 00:00:00 2001 From: wei <> Date: Thu, 27 Apr 2006 13:14:29 +0000 Subject: Add effects to validation summary. --- framework/Web/Javascripts/js/validator.js | 57 ++++++--- framework/Web/Javascripts/prado/validation3.js | 72 ++++++++---- framework/Web/UI/WebControls/TBaseValidator.php | 69 +++++++++-- .../Web/UI/WebControls/TValidationSummary.php | 129 +++++++++++++++++++++ .../features/protected/pages/ValidatorEffects.page | 12 +- 5 files changed, 284 insertions(+), 55 deletions(-) diff --git a/framework/Web/Javascripts/js/validator.js b/framework/Web/Javascripts/js/validator.js index 5e23df50..4519357c 100644 --- a/framework/Web/Javascripts/js/validator.js +++ b/framework/Web/Javascripts/js/validator.js @@ -156,41 +156,45 @@ Prado.WebUI.TValidationSummary.prototype = group : null, options : {}, visible : false, -summary : null, +messages : null, initialize : function(options) { this.options = options; this.group = options.ValidationGroup; -this.summary = $(options.ID); -this.visible = this.summary.style.visibility != "hidden" -this.visible = this.visible && this.summary.style.display != "none"; +this.messages = $(options.ID); +this.visible = this.messages.style.visibility != "hidden" +this.visible = this.visible && this.messages.style.display != "none"; Prado.Validation.addSummary(options.FormID, this); }, updateSummary : function(validators, update) { if(validators.length <= 0) -return this.hideSummary(update); +{ +if(update || this.options.Refresh != false) +{ +return this.hideSummary(validators); +} +return; +} var refresh = update || this.visible == false || this.options.Refresh != false; if(this.options.ShowSummary != false && refresh) { -this.displayHTMLMessages(this.getMessages(validators)); -this.visible = true; +this.updateHTMLMessages(this.getMessages(validators)); +this.showSummary(validators); } if(this.options.ScrollToSummary != false) -window.scrollTo(this.summary.offsetLeft-20, this.summary.offsetTop-20); +window.scrollTo(this.messages.offsetLeft-20, this.messages.offsetTop-20); if(this.options.ShowMessageBox == true && refresh) { this.alertMessages(this.getMessages(validators)); this.visible = true; } }, -displayHTMLMessages : function(messages) +updateHTMLMessages : function(messages) { -this.summary.show(); -this.summary.style.visibility = "visible"; -while(this.summary.childNodes.length > 0) -this.summary.removeChild(this.summary.lastChild); -new Insertion.Bottom(this.summary, this.formatSummary(messages)); +while(this.messages.childNodes.length > 0) +this.messages.removeChild(this.messages.lastChild); +new Insertion.Bottom(this.messages, this.formatSummary(messages)); }, alertMessages : function(messages) { @@ -208,15 +212,28 @@ messages.push(message); }) return messages; }, -hideSummary : function(refresh) +hideSummary : function(validators) +{if(typeof(this.options.OnHideSummary) == "function") { -if(refresh || this.options.Refresh != false) +this.messages.style.visibility="visible"; +this.options.OnHideSummary(this,validators) +} +else { +this.messages.style.visibility="hidden"; if(this.options.Display == "None" || this.options.Display == "Dynamic") -this.summary.hide(); -this.summary.style.visibility="hidden"; -this.visible = false; +this.messages.hide(); } +this.visible = false; +}, +showSummary : function(validators) +{ +this.messages.style.visibility="visible"; +if(typeof(this.options.OnShowSummary) == "function") +this.options.OnShowSummary(this,validators); +else +this.messages.show(); +this.visible = true; }, formats : function(type) { @@ -330,6 +347,7 @@ if(this.isValid) if(typeof(this.options.OnSuccess) == "function") { this.visible = true; +this.message.style.visibility = "visible"; this.updateControlCssClass(this.control, this.isValid); this.options.OnSuccess(this, invoker); } @@ -341,6 +359,7 @@ else if(typeof(this.options.OnError) == "function") { this.visible = true; +this.message.style.visibility = "visible"; this.updateControlCssClass(this.control, this.isValid); this.options.OnError(this, invoker); } diff --git a/framework/Web/Javascripts/prado/validation3.js b/framework/Web/Javascripts/prado/validation3.js index 3ed31744..d5da977f 100644 --- a/framework/Web/Javascripts/prado/validation3.js +++ b/framework/Web/Javascripts/prado/validation3.js @@ -336,7 +336,7 @@ Prado.WebUI.TValidationSummary.prototype = group : null, options : {}, visible : false, - summary : null, + messages : null, /** * @@ -356,9 +356,9 @@ Prado.WebUI.TValidationSummary.prototype = { this.options = options; this.group = options.ValidationGroup; - this.summary = $(options.ID); - this.visible = this.summary.style.visibility != "hidden" - this.visible = this.visible && this.summary.style.display != "none"; + this.messages = $(options.ID); + this.visible = this.messages.style.visibility != "hidden" + this.visible = this.visible && this.messages.style.display != "none"; Prado.Validation.addSummary(options.FormID, this); }, @@ -370,19 +370,25 @@ Prado.WebUI.TValidationSummary.prototype = */ updateSummary : function(validators, update) { - if(validators.length <= 0) - return this.hideSummary(update); + if(validators.length <= 0) + { + if(update || this.options.Refresh != false) + { + return this.hideSummary(validators); + } + return; + } var refresh = update || this.visible == false || this.options.Refresh != false; if(this.options.ShowSummary != false && refresh) { - this.displayHTMLMessages(this.getMessages(validators)); - this.visible = true; + this.updateHTMLMessages(this.getMessages(validators)); + this.showSummary(validators); } if(this.options.ScrollToSummary != false) - window.scrollTo(this.summary.offsetLeft-20, this.summary.offsetTop-20); + window.scrollTo(this.messages.offsetLeft-20, this.messages.offsetTop-20); if(this.options.ShowMessageBox == true && refresh) { @@ -394,13 +400,11 @@ Prado.WebUI.TValidationSummary.prototype = /** * Display the validator error messages as inline HTML. */ - displayHTMLMessages : function(messages) + updateHTMLMessages : function(messages) { - this.summary.show(); - this.summary.style.visibility = "visible"; - while(this.summary.childNodes.length > 0) - this.summary.removeChild(this.summary.lastChild); - new Insertion.Bottom(this.summary, this.formatSummary(messages)); + while(this.messages.childNodes.length > 0) + this.messages.removeChild(this.messages.lastChild); + new Insertion.Bottom(this.messages, this.formatSummary(messages)); }, /** @@ -428,18 +432,34 @@ Prado.WebUI.TValidationSummary.prototype = }, /** - * Hides the validation summary if options['Refresh'] is not false. - * @param boolean true to always hide the summary + * Hides the validation summary. */ - hideSummary : function(refresh) - { - if(refresh || this.options.Refresh != false) + hideSummary : function(validators) + { if(typeof(this.options.OnHideSummary) == "function") { + this.messages.style.visibility="visible"; + this.options.OnHideSummary(this,validators) + } + else + { + this.messages.style.visibility="hidden"; if(this.options.Display == "None" || this.options.Display == "Dynamic") - this.summary.hide(); - this.summary.style.visibility="hidden"; - this.visible = false; - } + this.messages.hide(); + } + this.visible = false; + }, + + /** + * Shows the validation summary. + */ + showSummary : function(validators) + { + this.messages.style.visibility="visible"; + if(typeof(this.options.OnShowSummary) == "function") + this.options.OnShowSummary(this,validators); + else + this.messages.show(); + this.visible = true; }, /** @@ -638,6 +658,7 @@ Prado.WebUI.TBaseValidator.prototype = if(typeof(this.options.OnSuccess) == "function") { this.visible = true; + this.message.style.visibility = "visible"; this.updateControlCssClass(this.control, this.isValid); this.options.OnSuccess(this, invoker); } @@ -648,7 +669,8 @@ Prado.WebUI.TBaseValidator.prototype = { if(typeof(this.options.OnError) == "function") { - this.visible = true; + this.visible = true; + this.message.style.visibility = "visible"; this.updateControlCssClass(this.control, this.isValid); this.options.OnError(this, invoker); } diff --git a/framework/Web/UI/WebControls/TBaseValidator.php b/framework/Web/UI/WebControls/TBaseValidator.php index 4ca4c1f6..01d1b978 100644 --- a/framework/Web/UI/WebControls/TBaseValidator.php +++ b/framework/Web/UI/WebControls/TBaseValidator.php @@ -43,7 +43,7 @@ * * You can also customized the client-side behaviour by adding javascript * code to the subproperties of the {@link getClientValidation ClientValidation} - * property. + * property. See quickstart documentation for further details. * * You can also place a {@link TValidationSummary} control on a page to display error messages * from the validators together. In this case, only the {@link setErrorMessage ErrorMessage} @@ -79,7 +79,9 @@ abstract class TBaseValidator extends TLabel implements IValidator * @var boolean whether the validator has been registered with the page */ private $_registered=false; - + /** + * @var TValidatorClientScript validator client-script options. + */ private $_clientScript; /** @@ -186,7 +188,7 @@ abstract class TBaseValidator extends TLabel implements IValidator */ protected function createClientScript() { - return new TValidatorClientScript($this->getPage()->getClientScript()); + return new TValidatorClientScript; } /** @@ -491,7 +493,21 @@ abstract class TBaseValidator extends TLabel implements IValidator /** * TValidatorClientScript class. * - * @todo Add doc to quickstart and classes. + * Client-side validator events can be modified through the {@link + * TBaseValidator::getClientValidation ClientValidation} property of a + * validator. The subproperties of ClientValidation are those of the + * TValidatorClientScript properties. The client-side validator supports the + * following events. + * + * The OnValidate event is raise before the validator validation + * functions are called. + * + * The OnSuccess event is raised after the validator has successfully + * validate the control. + * + * The OnError event is raised after the validator fails validation. + * + * See the quickstart documentation for further details. * * @author Wei Zhuo * @version $Revision: $ $Date: $ @@ -500,51 +516,88 @@ abstract class TBaseValidator extends TLabel implements IValidator */ class TValidatorClientScript extends TComponent { + /** + * @var TMap client-side validator event javascript code. + */ private $_options; - private $_manager; - private $_effectsEnabled = false; - public function __construct($manager) + /** + * Constructor. + */ + public function __construct() { $this->_options = new TMap; - $this->_manager = $manager; } + /** + * @return string javascript code for client-side OnValidate event. + */ public function getOnValidate() { return $this->_options->itemAt['OnValidate']; } + /** + * Client-side OnValidate validator event is raise before the validators + * validation functions are called. + * @param string javascript code for client-side OnValidate event. + */ public function setOnValidate($javascript) { $this->_options->add('OnValidate', $this->ensureFunction($javascript)); } + /** + * Client-side OnSuccess event is raise after validation is successfull. + * This will override the default client-side validator behaviour. + * @param string javascript code for client-side OnSuccess event. + */ public function setOnSuccess($javascript) { $this->_options->add('OnSuccess', $this->ensureFunction($javascript)); } + /** + * @return string javascript code for client-side OnSuccess event. + */ public function getOnSuccess() { return $this->_options->itemAt('OnSuccess'); } + /** + * Client-side OnError event is raised after validation failure. + * This will override the default client-side validator behaviour. + * @param string javascript code for client-side OnError event. + */ public function setOnError($javascript) { $this->_options->add('OnError', $this->ensureFunction($javascript)); } + /** + * @return string javascript code for client-side OnError event. + */ public function getOnError() { return $this->_options->itemAt('OnError'); } + /** + * @return array list of client-side event code. + */ public function getOptions() { return $this->_options->toArray(); } + /** + * Ensure the string is a valid javascript function. If the string begins + * with "javascript:" valid javascript function is assumed, otherwise the + * code block is enclosed with "function(validator, invoker){ }" block. + * @param string javascript code. + * @return string javascript function code. + */ private function ensureFunction($javascript) { if(TJavascript::isFunction($javascript)) diff --git a/framework/Web/UI/WebControls/TValidationSummary.php b/framework/Web/UI/WebControls/TValidationSummary.php index 2bc3f62c..aa46142b 100644 --- a/framework/Web/UI/WebControls/TValidationSummary.php +++ b/framework/Web/UI/WebControls/TValidationSummary.php @@ -36,6 +36,11 @@ */ class TValidationSummary extends TWebControl { + /** + * @var TValidatorClientScript validator client-script options. + */ + private $_clientScript; + /** * Constructor. * This method sets the foreground color to red. @@ -242,9 +247,32 @@ class TValidationSummary extends TWebControl $options['Refresh'] = $this->getAutoUpdate(); $options['ValidationGroup'] = $this->getValidationGroup(); $options['Display'] = $this->getDisplay(); + + if(!is_null($this->_clientScript)) + $options = array_merge($options,$this->_clientScript->getOptions()); + return $options; } + /** + * @return TValidationSummaryClientScript client-side validation summary + * event options. + */ + public function getClientValidation() + { + if(is_null($this->_clientScript)) + $this->_clientScript = $this->createClientScript(); + return $this->_clientScript; + } + + /** + * @return TValidationSummaryClientScript javascript validation summary + * event options. + */ + protected function createClientScript() + { + return new TValidationSummaryClientScript; + } /** * Get the list of validation error messages. * @return array list of validator error messages. @@ -343,4 +371,105 @@ class TValidationSummary extends TWebControl } } +/** + * TValidationSummaryClientScript class. + * + * Client-side validation summary events such as {@link setOnHideSummary + * OnHideSummary} and {@link setOnShowSummary OnShowSummary} can be modified + * through the {@link TBaseValidator:: getClientValidation ClientValidation} + * property of a validation summary. + * + * The OnHideSummary event is raise when the validation summary + * requests to hide the messages. + * + * The OnShowSummary event is raised when the validation summary + * requests to show the messages. + * + * See the quickstart documentation for further details. + * + * @author Wei Zhuo + * @version $Revision: $ $Date: $ + * @package System.Web.UI.WebControls + * @since 3.0 + */ +class TValidationSummaryClientScript extends TComponent +{ + /** + * @var TMap client-side validation summary event javascript code. + */ + private $_options; + + /** + * Constructor. + */ + public function __construct() + { + $this->_options = new TMap; + } + + /** + * @return string javascript code for client-side OnHideSummary event. + */ + public function getOnHideSummary() + { + return $this->_options->itemAt['OnHideSummary']; + } + + /** + * Client-side OnHideSummary validation summary event is raise when all the + * validators are valid. This will override the default client-side + * validation summary behaviour. + * @param string javascript code for client-side OnHideSummary event. + */ + public function setOnHideSummary($javascript) + { + $this->_options->add('OnHideSummary', $this->ensureFunction($javascript)); + } + + /** + * Client-side OnShowSummary event is raise when one or more validators are + * not valid. This will override the default client-side validation summary + * behaviour. + * @param string javascript code for client-side OnShowSummary event. + */ + public function setOnShowSummary($javascript) + { + $this->_options->add('OnShowSummary', $this->ensureFunction($javascript)); + } + + /** + * @return string javascript code for client-side OnShowSummary event. + */ + public function getOnShowSummary() + { + return $this->_options->itemAt('OnShowSummary'); + } + + /** + * @return array list of client-side event code. + */ + public function getOptions() + { + return $this->_options->toArray(); + } + + /** + * Ensure the string is a valid javascript function. If the string begins + * with "javascript:" valid javascript function is assumed, otherwise the + * code block is enclosed with "function(summary, validators){ }" block. + * @param string javascript code. + * @return string javascript function code. + */ + private function ensureFunction($javascript) + { + if(TJavascript::isFunction($javascript)) + return $javascript; + else + { + $code = "function(summary, validators){ {$javascript} }"; + return TJavascript::quoteFunction($code); + } + } +} + ?> \ No newline at end of file diff --git a/tests/FunctionalTests/features/protected/pages/ValidatorEffects.page b/tests/FunctionalTests/features/protected/pages/ValidatorEffects.page index 47d99969..22a034cf 100644 --- a/tests/FunctionalTests/features/protected/pages/ValidatorEffects.page +++ b/tests/FunctionalTests/features/protected/pages/ValidatorEffects.page @@ -4,7 +4,7 @@
Create New Account - +
Username: @@ -81,8 +81,14 @@ + Display="Dynamic" + ClientValidation.OnHideSummary="Effect.Squish(summary.messages)" + HeaderText="

You could not login because

"> + + Effect.Appear(summary.messages) + Effect.Shake(summary.messages) + +
-- cgit v1.2.3