Webstandard2007  Spry Widget Ver1
Upcoming SlideShare
Loading in...5
×
 

Webstandard2007 Spry Widget Ver1

on

  • 5,245 views

 

Statistics

Views

Total Views
5,245
Views on SlideShare
4,928
Embed Views
317

Actions

Likes
0
Downloads
533
Comments
0

3 Embeds 317

http://www.milkstand.net 314
http://s.deeeki.com 2
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webstandard2007  Spry Widget Ver1 Webstandard2007 Spry Widget Ver1 Presentation Transcript

  • 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=quot;RSSFeedsListquot; spry:region=quot;dsCategories dsFeedsquot; class=quot;SpryHiddenRegionquot;> </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=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
  • 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
  • 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
  • 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( quot;spryMailquot;, span ID quot;emailquot;, ( URL ) {maxChars:100 , validateOn:[quot;changequot;], 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=quot;textfieldReinputMsgquot;>
  • spryMail <span class=quot;textfieldReinputMsgquot;> ■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