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.milk...
•   875   ASP Color Me Shop ! pro
•   Color Me Shop!
Spry Widget
DEMO
Spry             Framework for Ajax

• Adobe   Dreamweaver
  “              ”JavaScript

• Ajax                  UI

• BSD...
Spry Framework for Ajax
•                 XHTML

•   JavaScript   XHTML             class
    spry:

<div id=quot;RSSFeeds...
F’s Garage / December 01 , 2003


•
•
•�


    http://www.milkstand.net/fsgarage/archives/000220.html
Spry Framework for Ajax
• Spry XML Data Sets
  XML                          XML
                                   prototy...
Spry Widget        Widget

•

•
                       →
       window gadget
Spry Widget
•


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

•

•                  ...
HTML                                             step1 of 3


   Spry JavaScript CSS

<script src=quot;/user/javascripts/S...
HTML                                        step 2 of 3
HTML


<form method=quot;postquot; name=quot;form1quot; action=quo...
HTML                                             step3 of 3
                                                 span
<script ...
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”



.textfieldInvali...
Spry Widget
     spryMail
Spry Widget
                      spryMail




var spryMailObj = new Spry.Widget.ValidationTextField(

quot;spryMailquot;,...
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



       ...
(1)




                  onChange!!

SpryValidationTextField.js
                                   appendLogic



       ...
(2)

                  HTML          JavaScript
                     Spry Widget


mailAppendCheck = new Object();
mailApp...
(3)

                      SpryValidationTextField.js

                           onChange

Spry.Widget.ValidationTextFiel...
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
                            ap...
onSubmit                                  (1)




               onSubmit!!

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




               onSubmit!!

  Spry.Widget.Form
                          ...
onSubmit                                   (2)
                  HTML          JavaScript
                       Spry Widg...
onSubmit                                         (2)

                  SpryValidationTextField.js

Spry.Widget.Form.onSub...
3.
(1)
(1)

    span id = “spryMail”




                  span class =”textfieldInvalidFormatMsg”



.textfieldInvalidFormatState ...
(2)



spryMailObj.addClassName( $('spryMail'), 'textfieldInvalidFormatState' )




spryMailObj.removeClassName($('spryMail...
(3)


                Spry Widget

/* PHP            */
 setErrorMessage('spryUserName' , 'AccountIsAlreadyExist');
/* PHP...
spryMail




           <span class=quot;textfieldReinputMsgquot;>
spryMail




                             <span class=quot;textfieldReinputMsgquot;>

■CSS             SpryValidationTextFi...
Spry Widget
Spry Widget
•                   HTML



•

• Adobe

•
Spry Widget

•

• HTML
     Dreamweaver
    CSS
Spry Widget


• textArea                         IME
                          [DEMO]

•
• textArea     prototype.js
    S...
Dreamweaver                     Spry Widget



• CS3                                Spry
 1.4 (        1.5    prerelease

...
Spry Widget

•

•
• JavaScript
• JavaScript
Spry Widget

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

•
f-shin@milkstand.net
Webstandard2007  Spry Widget Ver1
Webstandard2007  Spry Widget Ver1
Webstandard2007  Spry Widget Ver1
Upcoming SlideShare
Loading in …5
×

Webstandard2007 Spry Widget Ver1

3,761 views
3,650 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,761
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
535
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webstandard2007 Spry Widget Ver1

  1. 1. Spry Widget paperboy&co.
  2. 2. • Spry Widget • Spry Widget • Spry Widget
  3. 3. Agenda • • SpryFramework for Ajax • Spry Widget • • Spry Widget
  4. 4. • • paperboy &co . EC • (f-shin / fshin2000 ) • blog : F’s Garage http://www.milkstand.net cnet blog F’s Garage type C • twitter movatwitter
  5. 5. • 875 ASP Color Me Shop ! pro
  6. 6. • Color Me Shop!
  7. 7. Spry Widget
  8. 8. DEMO
  9. 9. Spry Framework for Ajax • Adobe Dreamweaver “ ”JavaScript • Ajax UI • BSD http://labs.adobe.com/technologies/spry/
  10. 10. Spry Framework for Ajax • XHTML • JavaScript XHTML class spry: <div id=quot;RSSFeedsListquot; spry:region=quot;dsCategories dsFeedsquot; class=quot;SpryHiddenRegionquot;> </div> • CSS
  11. 11. F’s Garage / December 01 , 2003 • • •� http://www.milkstand.net/fsgarage/archives/000220.html
  12. 12. Spry Framework for Ajax • Spry XML Data Sets XML XML prototype.js • Spry Effects script.aculo.us • Spry Widget XML Data Sets Effects UI
  13. 13. Spry Widget Widget • • → window gadget
  14. 14. Spry Widget • • text field , textarea select , checkbox , radio radio button Spry1.5 • • submit
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. Dreamweaver CS3 Dreamweaver CS3
  19. 19. Spry
  20. 20. Spry Framework for Ajax = JavaScript Spry
  21. 21. Spry Framework for Ajax = JavaScript Spry
  22. 22. 13:30
  23. 23. • • •
  24. 24. • • • Spry Widget
  25. 25. DEMO
  26. 26. • JavaScript Ajax Spry Widget • PHP Perl validator
  27. 27. • Submit • Spry Widget Ajax • JavasScript
  28. 28. • • Ajax • • JavaScript
  29. 29. • Web Web •
  30. 30. DEMO
  31. 31. Spry Widget • Spry • FORM onSubmit
  32. 32. BSD 13:45
  33. 33. Spry Widget 1. 2. onSubmit 3.
  34. 34. Spry Widget
  35. 35. Inside Spry Widget
  36. 36. Inside Spry Widget span id = “spryMail” span class =”textfieldInvalidFormatMsg”
  37. 37. Inside Spry Widget span id = “spryMail” span class =”textfieldInvalidFormatMsg” .textfieldInvalidFormatState .textfieldInvalidFormatMsg { display: inline; }
  38. 38. Spry Widget spryMail
  39. 39. 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});
  40. 40. 1.
  41. 41. (1)
  42. 42. (1)
  43. 43. (1) onChange!!
  44. 44. (1) onChange!! SpryValidationTextField.js
  45. 45. (1) onChange!! SpryValidationTextField.js
  46. 46. (1) onChange!! SpryValidationTextField.js
  47. 47. (1) onChange!! SpryValidationTextField.js
  48. 48. (1) onChange!! SpryValidationTextField.js appendLogic
  49. 49. (1) onChange!! SpryValidationTextField.js appendLogic appendLogic.onChange()
  50. 50. (1) onChange!! SpryValidationTextField.js appendLogic appendLogic.onChange()
  51. 51. (2) HTML JavaScript Spry Widget mailAppendCheck = new Object(); mailAppendCheck.onChange = function(me){ // return true // or false ; } // spry Widget spryMailObj.appendLogic = mailAppendCheck ;
  52. 52. (3) SpryValidationTextField.js onChange Spry.Widget.ValidationTextField.prototype.onChange = function(e) { onChange /* appendLogic */ this.appendLogic.onChange(this);
  53. 53. 2. onSubmit onSubmit
  54. 54. onSubmit (1)
  55. 55. onSubmit (1)
  56. 56. onSubmit (1) onSubmit!!
  57. 57. onSubmit (1) onSubmit!! Spry.Widget.Form
  58. 58. onSubmit (1) onSubmit!! Spry.Widget.Form
  59. 59. onSubmit (1) onSubmit!! Spry.Widget.Form
  60. 60. onSubmit (1) onSubmit!! Spry.Widget.Form
  61. 61. onSubmit (1) onSubmit!! Spry.Widget.Form appendLogic
  62. 62. onSubmit (1) onSubmit!! Spry.Widget.Form appendLogic appendLogic.onSubmit()
  63. 63. onSubmit (1) onSubmit!! Spry.Widget.Form appendLogic appendLogic.onSubmit()
  64. 64. 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 ;
  65. 65. onSubmit (2) SpryValidationTextField.js Spry.Widget.Form.onSubmit = function(e) { onSubmit this.appendLogic.onSubmit(this); SpryValidationSelect.js
  66. 66. 3.
  67. 67. (1)
  68. 68. (1) span id = “spryMail” span class =”textfieldInvalidFormatMsg” .textfieldInvalidFormatState .textfieldInvalidFormatMsg { display: inline; }
  69. 69. (2) spryMailObj.addClassName( $('spryMail'), 'textfieldInvalidFormatState' ) spryMailObj.removeClassName($('spryMail'),'textfieldInvalidFormatState' ); ※ span DOM
  70. 70. (3) Spry Widget /* PHP */ setErrorMessage('spryUserName' , 'AccountIsAlreadyExist'); /* PHP */ // function setErrorMessage(spryId , errClass){ spryMailObj.addClassName($(spryId),errClass); }
  71. 71. spryMail <span class=quot;textfieldReinputMsgquot;>
  72. 72. spryMail <span class=quot;textfieldReinputMsgquot;> ■CSS SpryValidationTextFiled.css .textfieldRequiredState .textfieldRequiredMsg, .textfieldReinputState .textfieldReinputMsg { display: inline; } ■ spryMailObj.addClassName($('spryMail'),'textfieldReinputState' );
  73. 73. Spry Widget
  74. 74. Spry Widget • HTML • • Adobe •
  75. 75. Spry Widget • • HTML Dreamweaver CSS
  76. 76. Spry Widget • textArea IME [DEMO] • • textArea prototype.js Spry 1.5
  77. 77. 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
  78. 78. Spry Widget • • • JavaScript • JavaScript
  79. 79. Spry Widget • Spry Widget http://f-shin.net/labs/ •
  80. 80. f-shin@milkstand.net

×