1. Spry Widget
paperboy&co.

2. • Spry Widget
• Spry Widget
• Spry Widget

3. Agenda
•
• SpryFramework for Ajax
• Spry Widget
•
• Spry Widget

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

6. • 875 ASP Color Me Shop ! pro

7. • Color Me Shop!

8. Spry Widget

9. DEMO

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

11. Spry Framework for Ajax
• XHTML
• JavaScript XHTML class
spry:
<div id=quot;RSSFeedsListquot;
spry:region=quot;dsCategories dsFeedsquot;
class=quot;SpryHiddenRegionquot;>
</div>
• CSS

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

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

14. Spry Widget Widget
•
•
→
window gadget

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

16. HTML step1 of 3
Spry JavaScript CSS
<script src=quot;/user/javascripts/SpryAssets/SpryValidationTextField.jsquot;
type=quot;text/javascriptquot; ></script>
<link href=quot;/user/javascripts/SpryAssets/SpryValidationTextField.cssquot;
rel=quot;stylesheetquot; type=quot;text/cssquot; />
JavaScript TextField, TextArea Script
js

17. HTML step 2 of 3
HTML
<form method=quot;postquot; name=quot;form1quot; action=quot;/user/info/confirmquot; >
<span id=quot;spryEmailquot;>
<input name=quot;txtEmailquot; type=quot;textquot; id=quot;txtEmailquot; value=quot;<% $email %>quot; />
<span class=quot;textfieldRequiredMsgquot;> </span>
<span class=quot;textfieldMaxCharsMsgquot;>25
</span>
</span>
</form>
span CSS

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

19. Dreamweaver CS3
Dreamweaver CS3

20. Spry

21. Spry Framework for Ajax
=
JavaScript
Spry

22. Spry Framework for Ajax
=
JavaScript
Spry

23. 13:30

25. •
•
•

26. •
•
•
Spry Widget

27. DEMO

28. •
JavaScript Ajax
Spry Widget
•
PHP Perl
validator

29. • Submit
• Spry Widget Ajax
•
JavasScript

30. •
• Ajax
•
• JavaScript

31. • Web Web
•

32. DEMO

33. Spry Widget
• Spry
• FORM onSubmit

34. BSD
13:45

35. Spry Widget
1.
2. onSubmit
3.

36. Spry Widget

37. Inside Spry Widget

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

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

40. Spry Widget
spryMail

41. Spry Widget
spryMail
var spryMailObj = new Spry.Widget.ValidationTextField(
quot;spryMailquot;, span ID
quot;emailquot;, ( URL )
{maxChars:100 ,
validateOn:[quot;changequot;], change,submit )
isRequired:false});

42. 1.

43. (1)

44. (1)

45. (1)
onChange!!

46. (1)
onChange!!
SpryValidationTextField.js

47. (1)
onChange!!
SpryValidationTextField.js

48. (1)
onChange!!
SpryValidationTextField.js

49. (1)
onChange!!
SpryValidationTextField.js

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

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

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

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

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

55. 2. onSubmit
onSubmit

56. onSubmit (1)

57. onSubmit (1)

58. onSubmit (1)
onSubmit!!

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

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

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

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

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

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

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

66. 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 ;

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

68. 3.

69. (1)

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

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

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

74. spryMail
<span class=quot;textfieldReinputMsgquot;>

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

76. Spry Widget

77. Spry Widget
• HTML
•
• Adobe
•

78. Spry Widget
•
• HTML
Dreamweaver
CSS

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

80. 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

81. Spry Widget
•
•
• JavaScript
• JavaScript

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

83. f-shin@milkstand.net