Spry Widget
paperboy&co.

• Spry Widget
• Spry Widget
• Spry Widget

Agenda
•
• SpryFramework for Ajax
• Spry Widget
•
• Spry Widget

•
• paperboy &co . EC
• (f-shin / fshin2000 )
• blog : F’s Garage http://www.milkstand.net
cnet blog F’s Garage type C
• twitter movatwitter

• 875 ASP Color Me Shop ! pro

• Color Me Shop!

Spry Widget

DEMO

Spry Framework for Ajax
• Adobe Dreamweaver
“ ”JavaScript
• Ajax UI
• BSD
http://labs.adobe.com/technologies/spry/

Spry Framework for Ajax
• XHTML
• JavaScript XHTML class
spry:
<div id=\"RSSFeedsList\"
spry:region=\"dsCategories dsFeeds\"
class=\"SpryHiddenRegion\">
</div>
• CSS

F’s Garage / December 01 , 2003
•
•
•�
http://www.milkstand.net/fsgarage/archives/000220.html

Spry Framework for Ajax
• Spry XML Data Sets
XML XML
prototype.js
• Spry Effects
script.aculo.us
• Spry Widget
XML Data Sets Effects UI

Spry Widget Widget
•
•
→
window gadget

Spry Widget
•
• text field , textarea select , checkbox , radio
radio button Spry1.5
•
• submit

HTML step1 of 3
Spry JavaScript CSS
<script src=\"/user/javascripts/SpryAssets/SpryValidationTextField.js\"
type=\"text/javascript\" ></script>
<link href=\"/user/javascripts/SpryAssets/SpryValidationTextField.css\"
rel=\"stylesheet\" type=\"text/css\" />
JavaScript TextField, TextArea Script
js

HTML step 2 of 3
HTML
<form method=\"post\" name=\"form1\" action=\"/user/info/confirm\" >
<span id=\"spryEmail\">
<input name=\"txtEmail\" type=\"text\" id=\"txtEmail\" value=\"<% $email %>\" />
<span class=\"textfieldRequiredMsg\"> </span>
<span class=\"textfieldMaxCharsMsg\">25
</span>
</span>
</form>
span CSS

HTML step3 of 3
span
<script type=\"text/javascript\">
<!--
var spryEmail = new Spry.Widget.ValidationTextField(
\"spryEmail\", \"email\",
{isRequired:true , maxChars:50 , validateOn:[\"change\"]});
//-->
</script>
span ID
email , integer , date , none

Dreamweaver CS3
Dreamweaver CS3

Spry

Spry Framework for Ajax
=
JavaScript
Spry

Spry Framework for Ajax
=
JavaScript
Spry

13:30

•
•
•

•
•
•
Spry Widget

DEMO

•
JavaScript Ajax
Spry Widget
•
PHP Perl
validator

• Submit
• Spry Widget Ajax
•
JavasScript

•
• Ajax
•
• JavaScript

• Web Web
•

DEMO

Spry Widget
• Spry
• FORM onSubmit

BSD
13:45

Spry Widget
1.
2. onSubmit
3.

Spry Widget

Inside Spry Widget

Inside Spry Widget
span id = “spryMail”
span class =”textfieldInvalidFormatMsg”

Inside Spry Widget
span id = “spryMail”
span class =”textfieldInvalidFormatMsg”
.textfieldInvalidFormatState .textfieldInvalidFormatMsg
{ display: inline; }

Spry Widget
spryMail

Spry Widget
spryMail
var spryMailObj = new Spry.Widget.ValidationTextField(
\"spryMail\", span ID
\"email\", ( URL )
{maxChars:100 ,
validateOn:[\"change\"], change,submit )
isRequired:false});

1.

(1)

(1)

(1)
onChange!!

(1)
onChange!!
SpryValidationTextField.js

(1)
onChange!!
SpryValidationTextField.js

(1)
onChange!!
SpryValidationTextField.js

(1)
onChange!!
SpryValidationTextField.js

(1)
onChange!!
SpryValidationTextField.js
appendLogic

(1)
onChange!!
SpryValidationTextField.js
appendLogic
appendLogic.onChange()

(1)
onChange!!
SpryValidationTextField.js
appendLogic
appendLogic.onChange()

(2)
HTML JavaScript
Spry Widget
mailAppendCheck = new Object();
mailAppendCheck.onChange = function(me){
//
return true // or false ;
}
// spry Widget
spryMailObj.appendLogic = mailAppendCheck ;

(3)
SpryValidationTextField.js
onChange
Spry.Widget.ValidationTextField.prototype.onChange = function(e)
{
onChange
/* appendLogic */
this.appendLogic.onChange(this);

2. onSubmit
onSubmit

onSubmit (1)

onSubmit (1)

onSubmit (1)
onSubmit!!

onSubmit (1)
onSubmit!!
Spry.Widget.Form

onSubmit (1)
onSubmit!!
Spry.Widget.Form

onSubmit (1)
onSubmit!!
Spry.Widget.Form

onSubmit (1)
onSubmit!!
Spry.Widget.Form

onSubmit (1)
onSubmit!!
Spry.Widget.Form
appendLogic

onSubmit (1)
onSubmit!!
Spry.Widget.Form
appendLogic
appendLogic.onSubmit()

onSubmit (1)
onSubmit!!
Spry.Widget.Form
appendLogic
appendLogic.onSubmit()

onSubmit (2)
HTML JavaScript
Spry Widget
submitCheck = new Object();
submitCheck.onSubmit = function(me){
// submit
return true // or false ;
}
// spry Widget
Spry.Widget.Form.appendLogic = submitCheck ;

onSubmit (2)
SpryValidationTextField.js
Spry.Widget.Form.onSubmit = function(e)
{
onSubmit
this.appendLogic.onSubmit(this);
SpryValidationSelect.js

3.

(1)

(1)
span id = “spryMail”
span class =”textfieldInvalidFormatMsg”
.textfieldInvalidFormatState .textfieldInvalidFormatMsg
{ display: inline; }

(2)
spryMailObj.addClassName( $('spryMail'), 'textfieldInvalidFormatState' )
spryMailObj.removeClassName($('spryMail'),'textfieldInvalidFormatState' );
※ span DOM

(3)
Spry Widget
/* PHP */
setErrorMessage('spryUserName' , 'AccountIsAlreadyExist');
/* PHP */
//
function setErrorMessage(spryId , errClass){
spryMailObj.addClassName($(spryId),errClass);
}

spryMail
<span class=\"textfieldReinputMsg\">

spryMail
<span class=\"textfieldReinputMsg\">
■CSS SpryValidationTextFiled.css
.textfieldRequiredState .textfieldRequiredMsg,
.textfieldReinputState .textfieldReinputMsg
{
display: inline;
}
■
spryMailObj.addClassName($('spryMail'),'textfieldReinputState' );

Spry Widget

Spry Widget
• HTML
•
• Adobe
•

Spry Widget
•
• HTML
Dreamweaver
CSS

Spry Widget
• textArea IME
[DEMO]
•
• textArea prototype.js
Spry 1.5

Dreamweaver Spry Widget
• CS3 Spry
1.4 ( 1.5 prerelease
1.
2.'DW application folder/Configuration/Shared/Spry/'
http://blogs.adobe.com/spryteam/2007/06/post.html

Spry Widget
•
•
• JavaScript
• JavaScript

Spry Widget
• Spry Widget
http://f-shin.net/labs/
•

f-shin@milkstand.net