<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
  <channel>
    <title>yapi</title>
    <description>i am a web guy</description>
    <link>http://yapi.javaeye.com</link>
    <language>UTF-8</language>
    <copyright>Copyright 2003-2008, JavaEye.com</copyright>
    <docs>http://blogs.law.harvard.edu/tech/rss</docs>
    <generator>JavaEye - 做最棒的软件开发交流社区</generator>
      <item>
        <title>jQuery Plugins</title>
        <author>yapi</author>
        <description>
          <![CDATA[
          <br/>
          作者: <a href="http://yapi.javaeye.com">yapi</a>&nbsp;
          链接：<a href="http://yapi.javaeye.com/blog/204188" style="color:red;">http://yapi.javaeye.com/blog/204188</a>&nbsp;
          发表时间: 2008年06月16日
          <br/><br/>
          声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！
          <br/><br/>
          <p><span style="font-family: Tahoma; line-height: 18px; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px;">
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">概述</h2>
<p style="padding: 0px; margin: 0px;">jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是&mdash;写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不<a href="http://www.cnblogs.com/images/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/jquery_2.gif" style="color: #006699; text-decoration: underline;"><img src="http://www.cnblogs.com/images/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/jquery_thumb.gif" border="0" height="117" align="right" alt="jquery" style="border: 0px initial initial;" width="164" /></a>及的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js来调用命令了，只需定义 id 即可。今天在<a href="http://www.kollermedia.at/" title="Logo Kollermedia.at" style="color: #006699; text-decoration: underline;">Kollermedia.at</a>上发现了一篇JQuery插件列表的<a href="http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/" target="_blank" style="color: #006699; text-decoration: underline;">文章</a>，特推荐如下。</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">文件上传(File upload)<a href="http://www.cnblogs.com/images/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/JQuery_001_6.gif" style="color: #006699; text-decoration: underline;"><img src="http://www.cnblogs.com/images/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/JQuery_001_thumb_2.gif" border="0" height="165" align="right" alt="JQuery_001" style="border: 0px initial initial;" width="396" /></a></h2>
<p style="padding: 0px; margin: 0px;"><a href="http://www.phpletter.com/Demo/AjaxFileUpload-Demo/" style="color: #006699; text-decoration: underline;">Ajax File Upload</a>.<br /><a href="http://www.pixeline.be/experiments/jqUploader/" style="color: #006699; text-decoration: underline;">jQUploader</a>.<br /><a href="http://www.fyneworks.com/jquery/multiple-file-upload/" style="color: #006699; text-decoration: underline;">Multiple File Upload plugin</a>.&nbsp;<br /><a href="http://www.appelsiini.net/projects/filestyle" style="color: #006699; text-decoration: underline;">jQuery File Style</a>.<br /><a href="http://jquery.com/plugins/project/InputFileCSS" style="color: #006699; text-decoration: underline;">Styling an input type file</a>.<br /><a href="http://digitalbush.com/projects/progress-bar-plugin" style="color: #006699; text-decoration: underline;">Progress Bar Plugin</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">表单验证(Form Validation)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" style="color: #006699; text-decoration: underline;">jQuery Validation</a>.<br /><a href="http://www.dyve.net/jquery/?autohelp" style="color: #006699; text-decoration: underline;">Auto Help</a>.<br /><a href="http://www.willjessup.com/sandbox/jquery/form_validator/form_validate.html" style="color: #006699; text-decoration: underline;">Simple jQuery form validation</a>.<br /><a href="http://letmehaveblog.blogspot.com/2007/08/easy-client-side-web-forms-validations.html" style="color: #006699; text-decoration: underline;">jQuery XAV - form validations</a>.<br /><a href="http://itgroup.com.ph/alphanumeric/" style="color: #006699; text-decoration: underline;">jQuery AlphaNumeric</a>.<br /><a href="http://digitalbush.com/projects/masked-input-plugin" style="color: #006699; text-decoration: underline;">Masked Input</a>.<br /><a href="http://www.dennydotnet.com/post/TypeWatch-jQuery-Plugin.aspx" style="color: #006699; text-decoration: underline;">TypeWatch Plugin</a>.<br /><a href="http://jquery.com/plugins/project/TextLimiter" style="color: #006699; text-decoration: underline;">Text limiter for form fields</a>.<br /><a href="http://www.shawngo.com/gafyd/index.html" style="color: #006699; text-decoration: underline;">Ajax Username Check with jQuery</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">表单－选取框(Form - Select Box stuff)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://jquery.sanchezsalvador.com/page/jquerycombobox.aspx" style="color: #006699; text-decoration: underline;">jQuery Combobox</a>.<br /><a href="http://www.ajaxray.com/blog/2007/11/08/jquery-controlled-dependent-or-cascading-select-list-2/" style="color: #006699; text-decoration: underline;">jQuery controlled dependent (or Cascadign) Select List</a>.<br /><a href="http://code.google.com/p/jqmultiselects/" style="color: #006699; text-decoration: underline;">Multiple Selects</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/select/" style="color: #006699; text-decoration: underline;">Select box manipulation</a>.<br /><a href="http://code.google.com/p/jqueryselectcombo/" style="color: #006699; text-decoration: underline;">Select Combo Plugin</a>.<br /><a href="http://www.msxhost.com/jquery/linked-selects/json/%20target=" style="color: #006699; text-decoration: underline;">jQuery - LinkedSelect</a><br /><a href="http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/" style="color: #006699; text-decoration: underline;">Auto-populate multiple select boxes</a>.<br /><a href="http://www.sitespotting.it/esempi/002/" style="color: #006699; text-decoration: underline;">Choose Plugin (Select Replacement)</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">表单基本、输入框、选择框等(Form Basics, Input Fields, Checkboxes etc.)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://www.malsup.com/jquery/form/" style="color: #006699; text-decoration: underline;">jQuery Form Plugin</a>.<br /><a href="http://code.handlino.com/wiki/jquery-form" style="color: #006699; text-decoration: underline;">jQuery-Form</a>.<br /><a href="http://envero.org/jlook/" style="color: #006699; text-decoration: underline;">jLook Nice Forms</a>.<br /><a href="http://www.whitespace-creative.com/jquery/jNice/" style="color: #006699; text-decoration: underline;">jNice</a>.<br /><a href="http://www.brainfault.com/2007/07/07/pin-plugin-reloaded/" style="color: #006699; text-decoration: underline;">Ping Plugin</a>.<br /><a href="http://grzegorz.frydrychowicz.net/jquery_toggleformtext/" style="color: #006699; text-decoration: underline;">Toggle Form Text</a>.<br /><a href="http://thoughts.kuzemchak.net/entry/toggleval-for-jquery/" style="color: #006699; text-decoration: underline;">ToggleVal</a>.<br /><a href="http://www.pengoworks.com/workshop/jquery/field.plugin.htm" style="color: #006699; text-decoration: underline;">jQuery Field Plugin</a>.<br /><a href="http://code.befruit.com/" style="color: #006699; text-decoration: underline;">jQuery Form&rsquo;n Field plugin</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/checkboxes/" style="color: #006699; text-decoration: underline;">jQuery Checkbox manipulation</a>.<br /><a href="http://www.alcoholwang.cn/jquery/jTaggingDemo.htm" style="color: #006699; text-decoration: underline;">jTagging</a>.<br /><a href="http://code.google.com/p/labelcheck/" style="color: #006699; text-decoration: underline;">jQuery labelcheck</a>.<br /><a href="http://scott.sauyet.com/thoughts/archives/2007/03/31/overlabel-with-jquery/" style="color: #006699; text-decoration: underline;">Overlabel</a>.<br /><a href="http://blog.amicoimmaginario.it/2007/08/28/jquery-plugin-3-state-radio-buttons/" style="color: #006699; text-decoration: underline;">3 state radio buttons</a>.<br /><a href="http://sanisoft-demo.com/jquery/plugins/shiftcheckbox/" style="color: #006699; text-decoration: underline;">ShiftCheckbox jQuery Plugin</a>.<br /><a href="http://digitalbush.com/projects/watermark-input-plugin" style="color: #006699; text-decoration: underline;">Watermark Input</a>.<br /><a href="http://kawika.org/jquery/checkbox/" style="color: #006699; text-decoration: underline;">jQuery Checkbox (checkboxes with imags)</a>.<br /><a href="http://www.softwareunity.com/sandbox/jqueryspinbtn/" style="color: #006699; text-decoration: underline;">jQuery SpinButton Control</a>.<br /><a href="http://www.phpletter.com/form_builder/demo.html" style="color: #006699; text-decoration: underline;">jQuery Ajax Form Builder</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/focusfields/" style="color: #006699; text-decoration: underline;">jQuery Focus Fields</a>.<br /><a href="http://home.iprimus.com.au/kbwood/jquery/timeEntry.html" style="color: #006699; text-decoration: underline;">jQuery Time Entry</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">时间、日期和颜色选取(Time, Date and Color Picker)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://marcgrabanski.com/code/ui-datepicker/" style="color: #006699; text-decoration: underline;">jQuery UI Datepicker</a>.<br /><a href="http://kelvinluck.com/assets/jquery/datePicker/" style="color: #006699; text-decoration: underline;">jQuery date picker plugin</a>.<br /><a href="http://code.google.com/p/jquery-timepicker/" style="color: #006699; text-decoration: underline;">jQuery Time Picker</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/timepicker/" style="color: #006699; text-decoration: underline;">Time Picker</a>.<br /><a href="http://www.oakcitygraphics.com/jquery/clockpick/ClockPick.cfm" style="color: #006699; text-decoration: underline;">ClickPick</a>.<br /><a href="http://labs.perifer.se/timedatepicker/" style="color: #006699; text-decoration: underline;">TimePicker</a>.<br /><a href="http://acko.net/dev/farbtastic" style="color: #006699; text-decoration: underline;">Farbtastic jQuery Color Picker Plugin</a>.<br /><a href="http://www.intelliance.fr/jquery/color_picker/" style="color: #006699; text-decoration: underline;">Color Picker by intelliance.fr</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">投票插件(Rating Plugins)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://www.phpletter.com/Demo/Jquery-Star-Rating-Plugin/#" style="color: #006699; text-decoration: underline;">jQuery Star Rating Plugin</a>.<br /><a href="http://www.m3nt0r.de/devel/raterDemo/" style="color: #006699; text-decoration: underline;">jQuery Star Rater</a>.<br /><a href="http://riderdesign.com/articles/displayarticle.aspx?articleid=21" style="color: #006699; text-decoration: underline;">Content rater with asp.net, ajax and jQuery</a>.<br /><a href="http://www.learningjquery.com/2007/05/half-star-rating-plugin" style="color: #006699; text-decoration: underline;">Half-Star Rating Plugin</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">搜索插件(Search Plugins)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://www.vulgarisoip.com/2007/08/06/jquerysuggest-11/" style="color: #006699; text-decoration: underline;">jQuery Suggest</a>.<br /><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/" style="color: #006699; text-decoration: underline;">jQuery Autocomplete</a>.<br /><a href="http://www.pengoworks.com/workshop/jquery/autocomplete.htm" style="color: #006699; text-decoration: underline;">jQuery Autocomplete Mod</a>.<br /><a href="http://www.ajaxdaddy.com/demo-jquery-autocomplete.html" style="color: #006699; text-decoration: underline;">jQuery Autocomplete by AjaxDaddy</a>.<br /><a href="http://dev.reach1to1.net/saurabh/jplugins/autocomplete/" style="color: #006699; text-decoration: underline;">jQuery Autocomplete Plugin with HTML formatting</a>.<br /><a href="http://interface.eyecon.ro/docs/autocomplete" style="color: #006699; text-decoration: underline;">jQuery Autocompleter</a>.<br /><a href="http://nodstrum.com/2007/09/19/autocompleter/" style="color: #006699; text-decoration: underline;">AutoCompleter (Tutorial with PHP&amp;MySQL)</a>.<br /><a href="http://rikrikrik.com/jquery/quicksearch/" style="color: #006699; text-decoration: underline;">quick Search jQuery Plugin</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">编辑器(Inline Edit &amp; Editors)<a href="http://www.cnblogs.com/images/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/JQuery_002_2.gif" style="color: #006699; text-decoration: underline;"><img src="http://www.cnblogs.com/images/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/JQuery_002_thumb.gif" border="0" height="193" align="right" alt="JQuery_002" style="border: 0px initial initial;" width="400" /></a></h2>
<p style="padding: 0px; margin: 0px;"><a href="http://www.jaysalvat.com/jquery/jtageditor/" style="color: #006699; text-decoration: underline;">jTagEditor</a>.<br /><a href="http://demo.wymeditor.org/demo.html" style="color: #006699; text-decoration: underline;">WYMeditor</a>.<br /><a href="http://garage.pimentech.net/scripts_doc_jquery_jframe/" style="color: #006699; text-decoration: underline;">jQuery jFrame</a>.<br /><a href="http://www.appelsiini.net/projects/jeditable" style="color: #006699; text-decoration: underline;">Jeditable - edit in place plugin for jQuery</a>.&nbsp;<br /><a href="http://www.dyve.net/jquery/?editable" style="color: #006699; text-decoration: underline;">jQuery editable</a>.<br /><a href="http://www.jdempster.com/category/jquery/disableTextSelect/" style="color: #006699; text-decoration: underline;">jQuery Disable Text Select Plugin</a>.<br /><a href="http://15daysofjquery.com/edit-in-place-with-ajax-using-jquery-%20-library/15/" style="color: #006699; text-decoration: underline;">Edit in Place with Ajax using jQuery</a>.<br /><a href="http://davehauenstein.com/blog/archives/28" style="color: #006699; text-decoration: underline;">jQuery Plugin - Another In-Place Editor</a>.<br /><a href="http://dev.iceburg.net/jquery/tableEditor/demo.php" style="color: #006699; text-decoration: underline;">TableEditor</a>.<br /><a href="http://joshhundley.com/teditable-in-place-editing-for-tables/" style="color: #006699; text-decoration: underline;">tEditable - in place table editing for jQuery</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">多媒体、视频、Flash等(Audio, Video, Flash, SVG, etc)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://www.contentwithstructure.com/extras/jmedia" style="color: #006699; text-decoration: underline;">jMedia - accessible multi-media embedding</a>.<br /><a href="http://sourceforge.net/projects/jbedit/" style="color: #006699; text-decoration: underline;">JBEdit - Ajax online Video Editor</a>.<br /><a href="http://www.sean-o.com/jquery/jmp3/" style="color: #006699; text-decoration: underline;">jQuery MP3 Plugin</a>.<br /><a href="http://malsup.com/jquery/media/" style="color: #006699; text-decoration: underline;">jQuery Media Plugin</a>.<br /><a href="http://jquery.lukelutman.com/plugins/flash/index.html" style="color: #006699; text-decoration: underline;">jQuery Flash Plugin</a>.<br /><a href="http://www.solitude.dk/archives/embedquicktime/" style="color: #006699; text-decoration: underline;">Embed QuickTime</a>.<br /><a href="http://keith-wood.name/svg.html" style="color: #006699; text-decoration: underline;">SVG Integration</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">图片(Photos/Images/Galleries)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://jquery.com/demo/thickbox/" style="color: #006699; text-decoration: underline;">ThickBox</a>.<br /><a href="http://leandrovieira.com/projects/jquery/lightbox/" style="color: #006699; text-decoration: underline;">jQuery lightBox plugin</a>.<br /><a href="http://blog.joshuaeichorn.com/archives/2007/01/11/jquery-image-strip/" style="color: #006699; text-decoration: underline;">jQuery Image Strip</a>.<br /><a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html" style="color: #006699; text-decoration: underline;">jQuery slideViewer</a>.<br /><a href="http://benjaminsterling.com/2007/09/09/jquery-jqgalscroll-photo-gallery/" style="color: #006699; text-decoration: underline;">jQuery jqGalScroll 2.0</a>.<br /><a href="http://benjaminsterling.com/2007/10/02/jquery-jqgalviewii-photo-gallery/" style="color: #006699; text-decoration: underline;">jQuery - jqGalViewII</a>.<br /><a href="http://benjaminsterling.com/2007/10/21/jqgalviewiii-proof-of-concept/" style="color: #006699; text-decoration: underline;">jQuery - jqGalViewIII</a>.<br /><a href="http://opiefoto.com/articles/photoslider" style="color: #006699; text-decoration: underline;">jQuery Photo Slider</a>.<br /><a href="http://joanpiedra.com/jquery/thumbs/" style="color: #006699; text-decoration: underline;">jQuery Thumbs - easily create thumbnails</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/jQIR/" style="color: #006699; text-decoration: underline;">jQuery jQIR Image Replacement</a>.<br /><a href="http://www.gmarwaha.com/jquery/jcarousellite/index.php#what" style="color: #006699; text-decoration: underline;">jCarousel Lite</a>.<br /><a href="http://projects.sevir.org/storage/jpanview/index.html" style="color: #006699; text-decoration: underline;">jQPanView</a>.<br /><a href="http://sorgalla.com/projects/jcarousel/#Examples" style="color: #006699; text-decoration: underline;">jCarousel</a>.<br /><a href="http://www.intelliance.fr/jquery/imagebox/" style="color: #006699; text-decoration: underline;">Interface Imagebox</a>.<br /><a href="http://www.getintothis.com/blog/2006/10/12/image-gallery-using-jquery-interface-reflections/" style="color: #006699; text-decoration: underline;">Image Gallery using jQuery, Interface &amp; Reflactions</a>.<br /><a href="http://realazy.org/lab/jquery/j-gallery/" style="color: #006699; text-decoration: underline;">simple jQuery Gallery</a>.<br /><a href="http://chicagosocial.com/gallery/" style="color: #006699; text-decoration: underline;">jQuery Gallery Module</a>.<br /><a href="http://www.eogallery.com/" style="color: #006699; text-decoration: underline;">EO Gallery</a>.<br /><a href="http://flesler.blogspot.com/search/label/jQuery.ScrollShow" style="color: #006699; text-decoration: underline;">jQuery ScrollShow</a>.<br /><a href="http://www.malsup.com/jquery/cycle/" style="color: #006699; text-decoration: underline;">jQuery Cycle Plugin</a>.<br /><a href="http://www.projectatomic.com/en/flickr.htm" style="color: #006699; text-decoration: underline;">jQuery Flickr</a>.<br /><a href="http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin" style="color: #006699; text-decoration: underline;">jQuery Lazy Load Images Plugin</a>.<br /><a href="http://www.sunsean.com/zoomi/" style="color: #006699; text-decoration: underline;">Zoomi - Zoomable Thumbnails</a>.<br /><a href="http://remysharp.com/2007/03/19/a-few-more-jquery-plugins-crop-labelover-and-pluck/#crop" style="color: #006699; text-decoration: underline;">jQuery Crop - crop any image on the fly</a>.<br /><a href="http://jquery.com/plugins/project/reflection" style="color: #006699; text-decoration: underline;">Image Reflection</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">Google地图（Google Map）</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://www.dyve.net/jquery/?googlemaps" style="color: #006699; text-decoration: underline;">jQuery Plugin googlemaps</a>.<br /><a href="http://code.google.com/p/jmaps/" style="color: #006699; text-decoration: underline;">jMaps jQuery Maps Framework</a>.<br /><a href="http://projects.sevir.org/storage/jqmaps/index.html" style="color: #006699; text-decoration: underline;">jQmaps</a>.<br /><a href="http://olbertz.de/jquery/googlemap.html#" style="color: #006699; text-decoration: underline;">jQuery &amp; Google Maps</a>.<br /><a href="http://snippets.dzone.com/posts/show/4361" style="color: #006699; text-decoration: underline;">jQuery Maps Interface forr Google and Yahoo maps</a>.<br /><a href="http://webrocket.ulmb.com/jmaps/" style="color: #006699; text-decoration: underline;">jQuery J Maps - by Tane Piper</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">游戏(Games)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://fmarcia.info/jquery/tetris/tetris.html" style="color: #006699; text-decoration: underline;">Tetris with jQuery</a>.<br /><a href="http://64squar.es/" style="color: #006699; text-decoration: underline;">jQuery Chess</a>.<br /><a href="http://www.bennadel.com/blog/623-jQuery-Demo-Mad-Libs-Word-Game.htm" style="color: #006699; text-decoration: underline;">Mad Libs Word Game</a>.<br /><a href="http://www.alexatnet.com/node/68" style="color: #006699; text-decoration: underline;">jQuery Puzzle</a>.<br /><a href="http://www.willjessup.com/sandbox/jquery/solar_system/rotator.html" style="color: #006699; text-decoration: underline;">jQuery Solar System (not a game but awesome jQuery Stuff)</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">表格等(Tables, Grids etc.)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://docs.jquery.com/Plugins/Tablesorter" style="color: #006699; text-decoration: underline;">UI/Tablesorter</a>.<a href="http://www.cnblogs.com/images/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/JQuery_003_2.gif" style="color: #006699; text-decoration: underline;"><img src="http://www.cnblogs.com/images/cnblogs_com/Terrylee/WindowsLiveWriter/240jQuery_128F5/JQuery_003_thumb.gif" border="0" height="143" align="right" alt="JQuery_003" style="border: 0px initial initial;" width="400" /></a>&nbsp;<br /><a href="http://www.reconstrukt.com/ingrid/" style="color: #006699; text-decoration: underline;">jQuery ingrid</a>.<br /><a href="http://www.trirand.com/blog/?p=13" style="color: #006699; text-decoration: underline;">jQuery Grid Plugin</a>.<br /><a href="http://ideamill.synaptrixgroup.com/jquery/tablefilter/tabletest.htm" style="color: #006699; text-decoration: underline;">Table Filter - awesome!</a>.<br /><a href="http://dev.iceburg.net/jquery/tableEditor/demo.php" style="color: #006699; text-decoration: underline;">TableEditor</a>.<br /><a href="http://www.hanpau.com/jquery/unobtrusivetreetable.php" style="color: #006699; text-decoration: underline;">jQuery Tree Tables</a>.<br /><a href="http://www.javascripttoolbox.com/jquery/#expandablerows" style="color: #006699; text-decoration: underline;">Expandable &ldquo;Detail&rdquo; Table Rows</a>.<br /><a href="http://www.remotesynthesis.com/blog/index.cfm/2007/9/25/Sortable-Table-ColdFusion-Custom-Tag-with-jQueryUI" style="color: #006699; text-decoration: underline;">Sortable Table ColdFusion Costum Tag with jQuery UI</a>.<br /><a href="http://flesler.blogspot.com/2007/10/jquerybubble.html" style="color: #006699; text-decoration: underline;">jQuery Bubble</a>.<br /><a href="http://tablesorter.com/docs/" style="color: #006699; text-decoration: underline;">TableSorter</a>.<br /><a href="http://www.webtoolkit.info/demo/jquery/scrollable/demo.html" style="color: #006699; text-decoration: underline;">Scrollable HTML Table</a>.<br /><a href="http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html" style="color: #006699; text-decoration: underline;">jQuery column Manager Plugin</a>.<br /><a href="http://p.sohei.org/stuff/jquery/tablehover/demo/demo.html" style="color: #006699; text-decoration: underline;">jQuery tableHover Plugin</a>.<br /><a href="http://p.sohei.org/stuff/jquery/columnhover/demo/demo.html" style="color: #006699; text-decoration: underline;">jQuery columnHover Plugin</a>.<br /><a href="http://makoomba.altervista.org/grid/" style="color: #006699; text-decoration: underline;">jQuery Grid</a>.<br /><a href="http://motherrussia.polyester.se/jquery-plugins/tablesorter/" style="color: #006699; text-decoration: underline;">TableSorter plugin for jQuery</a>.<br /><a href="http://joshhundley.com/teditable-in-place-editing-for-tables/" style="color: #006699; text-decoration: underline;">tEditable - in place table editing for jQuery</a>.<br /><a href="http://www.hovinne.com/dev/jquery/chartotable/" style="color: #006699; text-decoration: underline;">jQuery charToTable Plugin</a>.<br /><a href="http://www.ita.es/jquery/jquery.grid.columnSizing.htm" style="color: #006699; text-decoration: underline;">jQuery Grid Column Sizing</a>.<br /><a href="http://www.ita.es/jquery/jquery.grid.rowSizing.htm" style="color: #006699; text-decoration: underline;">jQuery Grid Row Sizing</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">统计图(Charts, Presentation etc.)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://worcesterwideweb.com/2007/06/04/jquery-wizard-plugin/" style="color: #006699; text-decoration: underline;">jQuery Wizard Plugin&nbsp;</a>.<br /><a href="http://www.reach1to1.com/sandbox/jquery/jqchart/" style="color: #006699; text-decoration: underline;">jQuery Chart Plugin</a>.<br /><a href="http://ejohn.org/apps/speed/" style="color: #006699; text-decoration: underline;">Bar Chart</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">边框、圆角、背景(Border, Corners, Background)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://www.malsup.com/jquery/corner/" style="color: #006699; text-decoration: underline;">jQuery Corner</a>.<br /><a href="http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery" style="color: #006699; text-decoration: underline;">jQuery Curvy Corner</a>.<br /><a href="http://dev.jquery.com/~paul/plugins/nifty/example.html" style="color: #006699; text-decoration: underline;">Nifty jQuery Corner</a>.<br /><a href="http://illandril.net/jQuery/transparentCorners/" style="color: #006699; text-decoration: underline;">Transparent Corners</a>.<br /><a href="http://www.methvin.com/jquery/jq-corner.html" style="color: #006699; text-decoration: underline;">jQuery Corner Gallery</a>.<br /><a href="http://blog.brandonaaron.net/my-jquery-plugins/gradient/" style="color: #006699; text-decoration: underline;">Gradient Plugin</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">文字和超链接(Text and Links)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://wanderinghorse.net/computing/%20/jquery/spoilers/demo.html" style="color: #006699; text-decoration: underline;">jQuery Spoiler plugin</a>.<br /><a href="http://johannburkard.de/blog/programming/%20/highlight-%20-text-higlighting-jquery-plugin.html" style="color: #006699; text-decoration: underline;">Text Highlighting</a>.<br /><a href="http://www.jdempster.com/category/jquery/disableTextSelect/" style="color: #006699; text-decoration: underline;">Disable Text Select Plugin</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/newsticker/" style="color: #006699; text-decoration: underline;">jQuery Newsticker</a>.<br /><a href="http://www.ollicle.com/2007/jun/03/jquery_lineheight_flexible.html" style="color: #006699; text-decoration: underline;">Auto line-height Plugin</a>.<br /><a href="http://agencenp.net/textgrad/textgrad.html" style="color: #006699; text-decoration: underline;">Textgrad - a text gradient plugin</a>.<br /><a href="http://kawika.org/jquery/linklook/" style="color: #006699; text-decoration: underline;">LinkLook - a link thumbnail preview</a>.<br /><a href="http://rikrikrik.com/jquery/pager/#examples" style="color: #006699; text-decoration: underline;">pager jQuery Plugin</a>.<br /><a href="http://rikrikrik.com/jquery/shortkeys/" style="color: #006699; text-decoration: underline;">shortKeys jQuery Plugin</a>.<br /><a href="http://www.ollicle.com/eg/jquery/biggerlink" style="color: #006699; text-decoration: underline;">jQuery Biggerlink</a>.<br /><a href="http://troy.dyle.net/linkchecker/" style="color: #006699; text-decoration: underline;">jQuery Ajax Link Checker</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">鼠标提示（Tooltips）</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/" style="color: #006699; text-decoration: underline;">jQuery Plugin - Tooltip</a>.<br /><a href="http://www.codylindley.com/blogstuff/js/jtip/" style="color: #006699; text-decoration: underline;">jTip - The jQuery Tool Tip</a>.<br /><a href="http://examples.learningjquery.com/62/demo/index.html#examplesection" style="color: #006699; text-decoration: underline;">clueTip</a>.<br /><a href="http://edgarverle.com/BetterTip/default.cfm" style="color: #006699; text-decoration: underline;">BetterTip</a>.<br /><a href="http://ioreader.com/2007/05/15/flash-tooltips-using-jquery/" style="color: #006699; text-decoration: underline;">Flash Tooltips using jQuery</a>.<br /><a href="http://www.texotela.co.uk/code/jquery/tooltipdemo/" style="color: #006699; text-decoration: underline;">ToolTip</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">菜单和导航(Menus, Navigations)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://stilbuero.de/jquery/tabs_3/" style="color: #006699; text-decoration: underline;">jQuery Tabs Plugin - awesome!&nbsp;</a>. [<a href="http://stilbuero.de/jquery/tabs_3/nested.html" style="color: #006699; text-decoration: underline;">demo nested tabs</a>.]<br /><a href="http://blog.cutterscrossing.com/index.cfm/2007/6/15/Updated-JQuery-Nested-Tab-Set-with-Demo" style="color: #006699; text-decoration: underline;">another jQuery nested Tab Set example (based on jQuery Tabs Plugin)</a>.<br /><a href="http://www.sunsean.com/idTabs/" style="color: #006699; text-decoration: underline;">jQuery idTabs</a>.<br /><a href="http://jdsharp.us/jQuery/plugins/jdMenu/" style="color: #006699; text-decoration: underline;">jdMenu - Hierarchical Menu Plugin for jQuery</a>.<br /><a href="http://be.twixt.us/jquery/suckerFish.php" style="color: #006699; text-decoration: underline;">jQuery SuckerFish Style</a>.<br /><a href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/" style="color: #006699; text-decoration: underline;">jQuery Plugin Treeview</a>.<br /><a href="http://be.twixt.us/jquery/treeView.php" style="color: #006699; text-decoration: underline;">treeView Basic</a>.<br /><a href="http://labs.activespotlight.net/jQuery/menu_demo.html" style="color: #006699; text-decoration: underline;">FastFind Menu</a>.<br /><a href="http://www.getintothis.com/blog/2006/09/26/my-first-jquery-plugin-a-sliding-menu/" style="color: #006699; text-decoration: underline;">Sliding Menu</a>.<br /><a href="http://gmarwaha.com/blog/?p=7" style="color: #006699; text-decoration: underline;">Lava Lamp jQuery Menu</a>.<br /><a href="http://icon.cat/wiki/IconDock_En#iconDock_jQuery_Plugin" style="color: #006699; text-decoration: underline;">jQuery iconDock</a>.<br /><a href="http://cherne.net/brian/resources/jquery.variations.html" style="color: #006699; text-decoration: underline;">jVariations Control Panel</a>.<br /><a href="http://www.trendskitchens.co.nz/jquery/contextmenu/" style="color: #006699; text-decoration: underline;">ContextMenu plugin</a>.<br /><a href="http://p.sohei.org/jquery-plugins/clickmenu/" style="color: #006699; text-decoration: underline;">clickMenu</a>.<br /><a href="http://www.ndesign-studio.com/blog/mac/css-dock-menu" style="color: #006699; text-decoration: underline;">CSS Dock Menu</a>.<br /><a href="http://webexpose.org/2006/12/28/jquery-pop-up-menu-tutorial/" style="color: #006699; text-decoration: underline;">jQuery Pop-up Menu Tutorial</a>.<br /><a href="http://www.getintothis.com/blog/2006/09/26/my-first-jquery-plugin-a-sliding-menu/" style="color: #006699; text-decoration: underline;">Sliding Menu</a>.</p>
<p style="padding: 0px; margin: 0px;"><a href="http://stilbuero.de/jquery/tabs_3/" title="http://stilbuero.de/jquery/tabs_3/" style="color: #006699; text-decoration: underline;">http://stilbuero.de/jquery/tabs_3/</a></p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">幻灯、翻转等(Accordions, Slide and Toggle stuff)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-accordion/" style="color: #006699; text-decoration: underline;">jQuery Plugin Accordion</a>.<br /><a href="http://fmarcia.info/jquery/accordion.html" style="color: #006699; text-decoration: underline;">jQuery Accordion Plugin Horizontal Way</a>.<br /><a href="http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html" style="color: #006699; text-decoration: underline;">haccordion - a simple horizontal accordion plugin for jQuery</a>.<br /><a href="http://dev.portalzine.de/index?/Horizontal_Accordion--print" style="color: #006699; text-decoration: underline;">Horizontal Accordion by portalzine.de</a>.<br /><a href="http://berndmatzner.de/jquery/hoveraccordion/" style="color: #006699; text-decoration: underline;">HoverAccordion</a>.<br /><a href="http://fmarcia.info/jquery/accordion.html" style="color: #006699; text-decoration: underline;">Accordion Example from fmarcia.info</a>.<br /><a href="http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index.php" style="color: #006699; text-decoration: underline;">jQuery Accordion Example</a>.<br /><a href="http://jquery.com/files/demo/dl-done.html" style="color: #006699; text-decoration: underline;">jQuery Demo - Expandable Sidebar Menu</a>.<br /><a href="http://www.andreacfm.com/examples/jQpanels/" style="color: #006699; text-decoration: underline;">Sliding Panels for jQuery</a>.<br /><a href="http://jquery.andreaseberhard.de/toggleElements/" style="color: #006699; text-decoration: underline;">jQuery ToggleElements</a>.<br /><a href="http://www.ndoherty.com/demos/coda-slider/" style="color: #006699; text-decoration: underline;">Coda Slider</a>.<br /><a href="http://sorgalla.com/projects/jcarousel/#Examples" style="color: #006699; text-decoration: underline;">jCarousel</a>.<br /><a href="http://www.reindel.com/accessible_news_slider/" style="color: #006699; text-decoration: underline;">Accesible News Slider Plugin</a>.<br /><a href="http://icant.co.uk/sandbox/jquerycodeview/" style="color: #006699; text-decoration: underline;">Showing and Hiding code Examples</a>.<br /><a href="http://gsgd.co.uk/sandbox/jquery/easing/" style="color: #006699; text-decoration: underline;">jQuery Easing Plugin</a>.<br /><a href="http://sonspring.com/journal/jquery-portlets" style="color: #006699; text-decoration: underline;">jQuery Portlets</a>.<br /><a href="http://jdsharp.us/jQuery/plugins/AutoScroll/" style="color: #006699; text-decoration: underline;">AutoScroll</a>.<br /><a href="http://medienfreunde.com/lab/innerfade/" style="color: #006699; text-decoration: underline;">Innerfade</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">拖放插件(Drag and Drop)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://docs.jquery.com/UI/Draggables" style="color: #006699; text-decoration: underline;">UI/Draggables</a>.<br /><a href="http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/" style="color: #006699; text-decoration: underline;">EasyDrag jQuery Plugin</a>.<br /><a href="http://sonspring.com/journal/jquery-portlets" style="color: #006699; text-decoration: underline;">jQuery Portlets</a>.<br /><a href="http://dev.iceburg.net/jquery/jqDnR/" style="color: #006699; text-decoration: underline;">jqDnR - drag, drop resize</a>.<br /><a href="http://interface.eyecon.ro/demos/drag.html" style="color: #006699; text-decoration: underline;">Drag Demos</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">XML XSL JSON Feeds</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://www.jongma.org/webtools/jquery/xslt/" style="color: #006699; text-decoration: underline;">XSLT Plugin</a>.<br /><a href="http://cgaskell.wordpress.com/2006/11/02/jquery-ajax-call-and-result-xml-parsing/" style="color: #006699; text-decoration: underline;">jQuery Ajax call and result XML parsing</a>.<br /><a href="http://jquery.com/plugins/project/xmlObjectifier" style="color: #006699; text-decoration: underline;">xmlObjectifier - Converts XML DOM to JSON</a>.<br /><a href="http://jquery.glyphix.com/" style="color: #006699; text-decoration: underline;">jQuery XSL Transform</a>.<br /><a href="http://malsup.com/jquery/taconite/" style="color: #006699; text-decoration: underline;">jQuery Taconite - multiple Dom updates</a>.<br /><a href="http://www.hovinne.com/blog/index.php/2007/07/15/132-jfeed-jquery-rss-atom-feed-parser-plugin" style="color: #006699; text-decoration: underline;">RSS/ATOM Feed Parser Plugin</a>.<br /><a href="http://www.malsup.com/jquery/gfeed/" style="color: #006699; text-decoration: underline;">jQuery Google Feed Plugin</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">浏览器(Browserstuff)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://noteslog.com/post/how-to-fix-the-resize-event-in-ie/" style="color: #006699; text-decoration: underline;">Wresize - IE Resize event Fix Plugin</a>.<br /><a href="http://jquery.khurshid.com/ifixpng.php" style="color: #006699; text-decoration: underline;">jQuery ifixpng</a>.<br /><a href="http://jquery.andreaseberhard.de/pngFix/" style="color: #006699; text-decoration: underline;">jQuery pngFix</a>.<br /><a href="http://www.crismancich.de/jquery/plugins/linkscrubber/" style="color: #006699; text-decoration: underline;">Link Scrubber - removes the dotted line onfocus from links</a>.<br /><a href="http://www.matthewjrichards.co.uk/articles/2007/06/25/jquery-perciformes-the-entire-suckerfish-familly-under-one-roof" style="color: #006699; text-decoration: underline;">jQuery Perciformes - the entire suckerfish familly under one roof</a>.<br /><a href="http://blog.brandonaaron.net/my-jquery-plugins/background-iframe/" style="color: #006699; text-decoration: underline;">Background Iframe</a>.<br /><a href="http://jquery.com/plugins/project/QinIE" style="color: #006699; text-decoration: underline;">QinIE - for proper display of Q tags in IE</a>.<br /><a href="http://webrocket.ulmb.com/ability/" style="color: #006699; text-decoration: underline;">jQuery Accessibility Plugin</a>.<br /><a href="http://www.ogonek.net/mousewheel/jquery-demo.html" style="color: #006699; text-decoration: underline;">jQuery MouseWheel Plugin</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">对话框、确认窗口(Alert, Prompt, Confirm Windows)</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://trentrichardson.com/Impromptu/" style="color: #006699; text-decoration: underline;">jQuery Impromptu</a>.<br /><a href="http://nadiaspot.com/jquery/confirm" style="color: #006699; text-decoration: underline;">jQuery Confirm Plugin</a>.<br /><a href="http://dev.iceburg.net/jquery/jqModal/" style="color: #006699; text-decoration: underline;">jqModal</a>.<br /><a href="http://www.ericmmartin.com/projects/simplemodal/" style="color: #006699; text-decoration: underline;">SimpleModal</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">CSS</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://www.kelvinluck.com/article/switch-stylesheets-with-jquery" style="color: #006699; text-decoration: underline;">jQuery Style Switcher</a>.<br /><a href="http://andykent.bingodisk.com/bingo/public/jss/" style="color: #006699; text-decoration: underline;">JSS - Javascript StyleSheets</a>.<br /><a href="http://flesler.blogspot.com/2007/11/jqueryrule.html" style="color: #006699; text-decoration: underline;">jQuery Rule - creation/manipulation of CSS Rules</a>.<br /><a href="http://www.designerkamal.com/jPrintArea/" style="color: #006699; text-decoration: underline;">jPrintArea</a>.</p>
<h2 style="font-size: 1.5em; line-height: 1.5em; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; color: black; padding: 0px;">DOM、AJAX和其它JQuery插件（DOM, Ajax and other jQuery plugins）</h2>
<p style="padding: 0px; margin: 0px;"><a href="http://flydom.socianet.com/" style="color: #006699; text-decoration: underline;">FlyDOM</a>.<br /><a href="http://brandonaaron.net/docs/dimensions/#getting-started" style="color: #006699; text-decoration: underline;">jQuery Dimenion Plugin</a>.<br /><a href="http://happygiraffe.net/blog/articles/2007/09/26/jquery-logging" style="color: #006699; text-decoration: underline;">jQuery Loggin</a>.<br /><a href="http://jquery.com/plugins/project/metadata" style="color: #006699; text-decoration: underline;">Metadata - extract metadata from classes, attributes, elements</a>.<br /><a href="http://johannburkard.de/blog/programming/%20/inc-a-super-tiny-client-side-include-%20-jquery-plugin.html" style="color: #006699; text-decoration: underline;">Super-tiny Client-Side Include Javascript jQuery Plugin</a>.<br /><a href="http://humanized.com/weblog/2007/09/14/undo-made-easy-with-ajax-part-1/" style="color: #006699; text-decoration: underline;">Undo Made Easy with Ajax</a>.<br /><a href="http://www.jasons-toolbox.com/JHeartbeat/" style="color: #006699; text-decoration: underline;">JHeartbeat - periodically poll the server</a>.<br /><a href="http://www.appelsiini.net/projects/lazyload" style="color: #006699; text-decoration: underline;">Lazy Load Plugin</a>.<br /><a href="http://blog.brandonaaron.net/2007/08/19/new-plugin-live-query/" style="color: #006699; text-decoration: underline;">Live Query</a>.<br /><a href="http://jquery.offput.ca/every/" style="color: #006699; text-decoration: underline;">jQuery Timers</a>.<br /><a href="http://www.joanpiedra.com/jquery/shareit/" style="color: #bc2a4d; text-decoration: underline;">jQuery Share it - display social bookmarking icons</a>.<br /><a href="http://www.jdempster.com/category/code/jquery/cookiejar/" style="color: #006699; text-decoration: underline;">jQuery serverCookieJar</a>.<br /><a href="http://ideamill.synaptrixgroup.com/?p=3" style="color: #006699; text-decoration: underline;">jQuery autoSave</a>.<br /><a href="http://www.semicomplete.com/blog/geekery/jquery-interface-puffer.html" style="color: #006699; text-decoration: underline;">jQuery Puffer</a>.<br /><a href="http://33rockers.com/jquery/iframe-demo/" style="color: #006699; text-decoration: underline;">jQuery iFrame Plugin</a>.<br /><a href="http://www.stilbuero.de/2006/09/17/%20-plugin-for-jquery/" style="color: #006699; text-decoration: underline;">Cookie Plugin for jQuery</a>.<br /><a href="http://leftlogic.com/lounge/articles/jquery_spy2" style="color: #006699; text-decoration: underline;">jQuery Spy - awesome plugin</a>.<br /><a href="http://www.learningjquery.com/2007/01/effect-delay-trick" style="color: #006699; text-decoration: underline;">Effect Delay Trick</a>.<br /><a href="http://jquick.sullof.com/jquick/" style="color: #006699; text-decoration: underline;">jQuick - a quick tag creator for jQuery</a>.<a href="http://noteslog.com/post/metaobjects-11-released-today/" style="color: #006699; text-decoration: underline;"><br />Metaobjects</a>.<br /><a href="http://www.thunderguy.com/semicolon/2007/08/14/elementready-jquery-plugin/" style="color: #006699; text-decoration: underline;">elementReady</a>.</p>
</span></p>
          <br/>
          <span style="color:red;">
            <a href="http://yapi.javaeye.com/blog/204188#comments" style="color:red;">本文的讨论也很精彩，浏览讨论>></a>
          </span>
          <br/><br/><br/>
          <span style="color:#E28822;">JavaEye推荐</span>
          <br/>
          <ul class='adverts'><li><a href='/adverts/41' target='_blank'><span style="color:red;font-weight:bold;">北京: 千橡集团暨校内网诚聘软件研发工程师</span></a></li><li><a href='/adverts/42' target='_blank'><span style="color:red;font-weight:bold;">搜狐网站诚聘Java、PHP和C++工程师</span></a></li><li><a href='/adverts/115' target='_blank'><span style="color:red;font-weight:bold;">JavaEye图灵杯第2届问答大赛开始了！8月4日至8月17日，奖品丰厚！</span></a></li></ul>
          <br/><br/><br/>
          ]]>
        </description>
        <pubDate>Mon, 16 Jun 2008 15:58:09 +0800</pubDate>
        <link>http://yapi.javaeye.com/blog/204188</link>
        <guid>http://yapi.javaeye.com/blog/204188</guid>
      </item>
      <item>
        <title>Flex Builder教程</title>
        <author>yapi</author>
        <description>
          <![CDATA[
          <br/>
          作者: <a href="http://yapi.javaeye.com">yapi</a>&nbsp;
          链接：<a href="http://yapi.javaeye.com/blog/179769" style="color:red;">http://yapi.javaeye.com/blog/179769</a>&nbsp;
          发表时间: 2008年04月05日
          <br/><br/>
          声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！
          <br/><br/>
          # 一，概述<br /># 二，使用MXML组件构建用户界面<br /># 三，数据绑定<br /># 四，界面布局和导航<br /># 五，使用CSS格式化组件<br /># 六，使用特效丰富用户体验<br /># 七，使用ActionScript处理事件<br /># 六，数据服务器访问概述<br /># 七，HTTPService<br /># 八，WebService<br /># 九，Flex Data Services<br /># 十，其它RemoteObject技术<br /># 十一, 创建自定义组件<br /># 参见<br /><br />一，概述<br /><br />Flex语言包含了一个丰富的用户界面组件库，MXML（一种基于XML的标记语言）和ActionScript?（基于ECMA 262的、强类型面向对象编程语言）。MXML用于排布用户界面和处理应用中其他方面的问题，而ActionScript?用来处理用户交互逻辑。由于Flash平台的普及， Flex使开发者可以开发广泛的应用程序。开发者可以使用工业标准（如XML，CSS和SVC）和他们所熟悉的模式和范例来创建应用。Flex的分离协作方式和Flex公用组件模型也使得开发者和界面设计者能更好的进行协作，在可靠的、易于维护的架构上生产出在用户体验方面有突破性的产品。<br /><br />Flex Builder(FB)之于MXML就如DREAWEAVER之于HTML。FB实现了代码与界面分开，FLEX的类程序扩展名为*.as，语法与java/c++很象，FLEX程序文件扩展名为.mxml，其实就是拥有很多特殊元素的XML文件。<br /><br />二，使用MXML组件构建用户界面<br /><br />MXML 语言支持两种用户界面组件类型: 控件和容器。容器是包含控件和其他容器的屏幕的矩形区域。控件是表单元素, 如按钮、文本字段和列表框。<br /><br />可以使用Flex Component ExplorerFlex MXML组件浏览工具来查看所有控件的代码和样例。<br /><br />1，加入常用可视控件: 使用可视控件组织界面，可以定义组件属性供外部访问<br /><br />A, 基于文本的控件(Text controls): Label(单行文本显示)、Text(多行文本显示)、TextInput?(单行文本显示与输入)、 TextArea?(多行行文本显示与输入)和 RichTextEditor? (富文本显示与输入)控件。用于显示文本和/或接收来自用户的文本输入，都有一个 text 属性用于设置要显示的文本。使用 RichTextEditor? 控件可以输入文本、编辑文本和设置文本格式。用户通过使用位于 RichTextEditor? 控件底部的子控件, 应用文本格式和 URL 链接。<br /><br />B, 基于按钮的控件组件(Button 系列,Form controls):Button(激活时会发出click和buttonDown事件)、LinkButton?(用于打开URL)、CheckBox?(标签会被自动裁剪以适合控件边界。)、RadioButton?(指由 &lt;mx:RadioButtonGroup?&gt; 标签创建的组) 和 PopupButton? 控件(常用于打开List控件或Menu控件签。)。<br /><br />2，加入基于列表的控件，并获取数据<br /><br />基于列表的控件: 是在其继承层次结构内的某些点上扩展 ListBase? 类的那些控件。它们包括 ComboBox?、List、HorizontalList?、DataGrid?、Tile、Menu 和 Tree 控件。都可从某数据提供程序的数据获得数据列表。<br /><br />另: 许多标准控件 (包括 ColorPicker? 和 MenuBar? 控件) 也是数据提供程序控件。<br /><br />可以使用两种方法设置组件的数据提供程序:<br /><br />1)，直接在MXML标签中加入数据，将 Array 或 Collection 定义为取得数据提供程序的控件的子标签。该方法具有实施快速的优点, 适合与静态数据一起使用及用于原型设计。<br /><br />                &lt;mx:ComboBox id=&quot;userRating&quot; width=&quot;100%&quot;&gt;<br />                    &lt;!-- An inline data provider --&gt;<br />                    &lt;mx:Array&gt;<br />                        &lt;mx:Object data=&quot;0&quot; label=&quot;Zero&quot; /&gt;<br />                        &lt;mx:Object data=&quot;1&quot; label=&quot;One&quot; /&gt;<br />                    &lt;/mx:Array&gt;<br />                &lt;/mx:ComboBox&gt; <br /><br />2)，使用数据绑定: 使用[Bindable]元数据标签(属性非默认绑定,必须明确的声明被绑定的属性)，将控件绑定到使用 ActionScript? 定义的现有 Array 或 Collection。<br /><br />    &lt;mx:Script&gt;<br />        &lt;![CDATA[<br />            [Bindable]<br />            private var subscriptions:ArrayCollection = <br />                new ArrayCollection <br />                (<br />                    [<br />                        {data:0, label:&quot;Print&quot;},<br />                        {data:1, label:&quot;Website&quot;},<br />                    ]<br />                ); <br />         <br />        ]]&gt;<br />    &lt;/mx:Script&gt;<br />            &lt;mx:FormItem label=&quot;Subscriptions:&quot; width=&quot;100%&quot;&gt;<br />                &lt;mx:List <br />                    id=&quot;userSubscriptions&quot; rowCount=&quot;3&quot;<br />                    allowMultipleSelection=&quot;true&quot; width=&quot;100%&quot;<br />                    dataProvider=&quot;{subscriptions}&quot;<br />                /&gt;<br /><br />3， 使用REPEATER: 是非可视控件，类似于编程语言里的For循环，可在执行期复制其它组件。&lt;mx:Repeater&gt;的卷标要自己输入，而 dataProvider可在&lt;mx:Script&gt;区段之中，以[Bindable]的Metadata定义之数组作连结。 REPEATER还可嵌套使用。<br /><br />  &lt;mx:Script&gt;<br />    &lt;![CDATA[<br />      [Bindable]<br />      public var dp:Array=[1,2,3,4];<br />    ]]&gt;<br />  &lt;/mx:Script&gt;<br /><br />  &lt;mx:ArrayCollection id=&quot;myAC&quot; source=&quot;{dp}&quot;/&gt;<br />    <br />  &lt;mx:Repeater id=&quot;r&quot; dataProvider=&quot;{myAC}&quot;&gt;<br />    &lt;mx:Button id=&quot;repbutton&quot; label=&quot;button {r.currentItem}&quot;/&gt;<br />  &lt;/mx:Repeater&gt;<br /><br />4, 加入数据验证:数据模型支持自动数据验证，这就意味着你可以很方便地使用Flex验证器。as3.0验证的类包为mx.Validators.包中有一个基类Validator,其他的类都为其子类:<br /><br />1)，用标签实现验证:<br /><br />//绑定验证对象:source:表示验证的对象，property:表示验证对象的属性<br /> &lt;mx:PhoneNumberValidator id=&quot;pnV&quot; source=&quot;{phoneInput}&quot; property=&quot;text&quot;/&gt; <br /><br /> &lt;mx:TextInput id=&quot;phoneInput&quot;/&gt; <br /><br />2)，用AS编程实现验证<br /><br />&lt;mx:Script&gt; <br /> &lt;![CDATA[ <br /> import mx.validators.PhoneNumberValidator; <br /> // 创建验证器<br /> private var v:PhoneNumberValidator = new PhoneNumberValidator(); <br /> private function createValidator():void { <br /> // 设置验证器<br /> v.source = phoneInput; <br /> v.property = &quot;text&quot;; <br /> } <br /> ]]&gt; <br /> &lt;/mx:Script&gt;  <br /><br /> &lt;mx:TextInput id=&quot;phoneInput&quot; creationComplete=&quot;createValidator();&quot;/&gt; <br /><br />还可以加入按钮触发器，并修改默认提示错误<br /><br />//trigger:表示触发验证事件的对象<br />//triggerEvent:表示对象触发验证事件的时机(如click,mouseOver等)<br />//requiredFieldError属性 表示必填项没填入数据的时的提示错误信息<br />//wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息<br />//invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息 <br /> &lt;mx:PhoneNumberValidator id=&quot;pnV&quot; source=&quot;{phoneInput}&quot; property=&quot;text&quot; <br /> trigger=&quot;{btn}&quot; triggerEvent=&quot;click&quot; <br /> requiredFieldError=&quot;此项为必填&quot; invalidCharError=&quot;请输入阿拉伯数字&quot; wrongLengthError=&quot;请至少输入请输入10个阿拉伯数字&quot; /&gt;  <br /><br /> &lt;mx:TextInput id=&quot;phoneInput&quot;/&gt; <br /> &lt;mx:Button label=&quot;Button&quot; id=&quot;btn&quot;/&gt; <br /><br />3)，高级用法: 使用正则表达式创建自定义验证器<br /><br />5， 加入资源(图片,音频,视频,程序):运行时外载和编译时直接内嵌两种方式，外载方式要多花一段载入时间，但使用简单；内嵌方式可直接调用资源，但加重了程序的负担(体积变大，且图片编辑后需要重新编译)<br /><br />1)，Image(图画)控件: 可外载或内嵌多种富媒体资源: JPEG、GIF、PNG位图、SVG矢量图(只能内嵌) , SWF动画(非Flex的SWF应用程序。),SWF库按钮(Button)，SWF库动画(MovieClip?)，<br /><br />//外载一个富媒体，可使用绝对或者相对路径。<br />但加入SWF文件时，可用use-network参数指定其使用网络或者本地文件二者之一。<br />&lt;mx:Image id=&quot;myLogo0&quot; source=&quot;assets/logo.png&quot;/&gt;<br /><br />//简单地内嵌一个富媒体.png,.jpg,.gif,<br />.swf(可将嵌入的SWF文件的实例当作 MovieClip.MovieClipAsset 类的实例处理,<br />不能直接访问嵌入的SWF文件的属性或方法。<br />但可用 LocalConnection以允许SWF之间进行通信。)，<br />.SVG(可将嵌入的SVG文件的实例当作Sprite.SpriteAsset类的实例处理。)<br />&lt;mx:Image id=&quot;myLogo&quot; source=&quot;@Embed('assets/logo.png')&quot;/&gt;<br /><br />//在脚本中定义富媒体对象，然后在MXML中可以多次嵌入<br />    &lt;mx:Script&gt;<br />        &lt;![CDATA[<br />            [Embed(source=&quot;assets/logo.png&quot;)]<br />            [Bindable]<br /><br />            public var Logo:Class;            <br />        ]]&gt;<br />    &lt;/mx:Script&gt;<br /><br />    &lt;mx:Image id=&quot;myLogo&quot; source=&quot;{Logo}&quot;/&gt;<br />    &lt;mx:Image id=&quot;myLogo2&quot; source=&quot;{Logo}&quot;/&gt;<br /><br />//在脚本中定义图片的scale-9像框缩放功能就可以保持边框的清晰,<br />(旋转嵌入的scale-9 图像的实例会关闭该图像的scale-9功能。)。<br />&lt;mx:Script&gt;<br />        &lt;![CDATA[<br />            [Embed(<br />                source=&quot;assets/fancy_border.png&quot;, <br />                scaleGridTop=&quot;55&quot;, scaleGridBottom=&quot;137&quot;, <br />                scaleGridLeft=&quot;57&quot;, scaleGridRight=&quot;266&quot;<br />            )]<br />            <br />            [Bindable]<br />            public var FancyBorderImage:Class;<br />        ]]&gt;<br />    &lt;/mx:Script&gt;<br /><br />    &lt;mx:Image source=&quot;{FancyBorderImage}&quot; width=&quot;146&quot; height=&quot;82&quot;/&gt;<br /><br />//嵌入 SWF 库资源<br />  <br />    &lt;mx:Script&gt;<br />    &lt;![CDATA[<br />            [Embed(source=&quot;assets/library.swf&quot;, symbol=&quot;BadApple&quot;)]<br /><br />            [Bindable]<br />            public var BadApple:Class;<br />        ]]&gt;<br />    &lt;/mx:Script&gt;<br /><br />    &lt;mx:Image id=&quot;badApple&quot; source=&quot;{BadApple}&quot; width=&quot;150&quot; <br /><br />height=&quot;151.8&quot;/&gt;<br /><br />2) 设置翻转的图片:使用 CSS为外观外载/内嵌翻转的图像<br /><br />可以定义一个现有的CSS类型选择器为该类型的所有组件设置外观。还可以进一步创建自定义CSS 类。<br /><br />    &lt;mx:Style&gt;<br />        Button <br />        {<br />            upSkin: Embed(&quot;assets/box_closed.png&quot;);<br />            overSkin: Embed(&quot;assets/box.png&quot;);<br />            downSkin: Embed(&quot;assets/box_new.png&quot;);<br />        }<br />    &lt;/mx:Style&gt;<br />  <br />    &lt;mx:Button/&gt;<br /><br />3), SWFLoader控件: 通常用来加入Flex应用程序(可以使用AS与其通信)，当然也能用于加入Image控件所能加入的富媒体资源。<br /><br />//外载入SWF程序<br />&lt;mx:SWFLoader id=&quot;loader1&quot; source=&quot;FlexApp.swf&quot;/&gt;<br />//内嵌入SWF程序<br />&lt;mx:SWFLoader id=&quot;loader2&quot; source=&quot;@Embed(source='flexapp.swf')&quot;/&gt;<br />//还可以在FDS环境下加入MXML文件，要以buttonicon.mxml.swf形式加入，以提示FDS编译该文件。<br />&lt;?xml version=&quot;1.0&quot;?&gt;<br />&lt;mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;&gt;<br />    &lt;mx:SWFLoader source=&quot;buttonicon.mxml.swf&quot; scaleContent=&quot;false&quot;/&gt; <br />&lt;/mx:Application&gt;<br /><br />4), 加入MP3音频: 您可以在 Flex 应用程序中通过使用[Embed]元数据标签嵌入MP3文件并播放它。注意音频文件的体积要优化。<br /><br />    &lt;mx:Script&gt;<br />        &lt;![CDATA[<br />            import mx.core.SoundAsset;<br />            import flash.media.*;<br />            [Embed(source=&quot;assets/pie-yan-knee.mp3&quot;)]<br />            [Bindable]<br />          //MP3 的一个新实例<br />            public var Song:Class;<br />          //将该实例创建为一个 SoundAsset<br />            public var mySong:SoundAsset = new Song() as SoundAsset;<br />            public var channel:SoundChannel;<br />          //使用 SoundAsset 类的 play() 方法来播放 MP3 文件的实例  <br />            public function playSound():void <br />            {<br />                // 先消音，防止同时多次播放<br />                stopSound();             <br />                // 播放该音频，并存储返回的SoundChannel对象结束播放。<br />                channel = mySong.play();<br />            }<br />            <br />            public function stopSound():void <br />            {<br />                // 当音频播放时，调用SoundChannel对象的 stop() 方法以停止播放<br />                if ( channel != null ) channel.stop();<br />            }<br />        ]]&gt;<br />    &lt;/mx:Script&gt;<br />        &lt;mx:Button label=&quot;play&quot; click=&quot;playSound();&quot;/&gt;<br />        &lt;mx:Button label=&quot;stop&quot; click=&quot;stopSound();&quot;/&gt;        <br /><br />5), 加入字体: 您希望在 Flex 应用程序中嵌入一种字体并将它用作基于文本的组件的样式。<br /><br />下面的示例创建引用嵌入的字体的 font-family 名称的一个类选择器。 接着它会创建一个 Text 控件并将其样式设置为该类选择器。<br /><br />提示: 您在嵌入字体以节省文件大小时仅可以从字体添加某些字符, 方法是指定您的 @font-face 声明的 unicode-range 属性。<br /><br />    &lt;mx:Style&gt;<br />        @font-face <br />        {<br />            font-family: Copacetix;<br /><br />            src: url(&quot;assets/copacetix.ttf&quot;);<br />            unicode-range:<br />                U+0020-U+0040, /* Punctuation, Numbers */<br /><br />                U+0041-U+005A, /* Upper-Case A-Z */<br />                U+005B-U+0060, /* Punctuation and Symbols */<br />                U+0061-U+007A, /* Lower-Case a-z */<br />                U+007B-U+007E; /* Punctuation and Symbols */<br /><br />        }<br /><br />        .MyTextStyle <br />        { <br />            font-family: Copacetix; <br />            font-size: 24pt;    <br />        }<br /><br />    &lt;/mx:Style&gt;<br /><br />    &lt;mx:Text styleName=&quot;MyTextStyle&quot; text=&quot;Embedded fonts rock!&quot; width=&quot;100%&quot;/&gt;<br /><br />三，数据绑定<br /><br />以MXML标记来描述UI，数据绑定(Data binding)来连接数据，这样就真正实现了UI和程序逻辑的分离。Data binding可以一绑多或者多绑一。<br /><br />1， 在MXML中使用大括号{}语句: 格式为:{源对象.属性}。可直接传送给目标对象；高级用法是在{}中包含AS表达式、AS函数或者E4X表达式<br /><br />2， 在MXML中使用&lt;mx:Binding&gt;标签:这是{}语句的替代用法，格式为:&lt;mx:Binding source=&quot;源对象.属性&quot; destination=&quot;目标对象.属性&quot;/&gt;；高级用法是在标签中包含AS表达式或者E4X表达式<br /><br />    //在Model数据中使用{}语句来绑定数据<br />    &lt;mx:Model id=&quot;thing1&quot;&gt;<br />        &lt;data&gt;<br />            &lt;part&gt;{input1.text}&lt;/part&gt;<br />        &lt;/data&gt;<br />    &lt;/mx:Model&gt;<br />    //用&lt;mx:Binding&gt;标签来绑定数据<br />    &lt;mx:Binding source=&quot;input2.text&quot; destination=&quot;thing1.part&quot;/&gt;<br /><br />    &lt;mx:TextInput id=&quot;input1&quot;/&gt;<br />    &lt;mx:TextInput id=&quot;input2&quot;/&gt;<br />    <br />    &lt;mx:TextArea text=&quot;{thing1.part}&quot;/&gt;<br /><br />3， 使用AS类来绑定:使用mx.binding.utils.BindingUtils?的bindProperty()或者bindSetter() 方法<br /><br />四，界面布局和导航<br /><br />容器定义了Flash Player的绘图表面的一个矩形区域。子容器包括控件和容器。Container 类是所有 Flex 容器类的基本类。扩展 Container 类的容器添加它们自己的功能以进行子组件布局。Application 容器是的Flex应用程序的唯一根部容器, 代表整个 Flash Player 绘图表面。<br /><br />1，布局容器: 使用布局容器可进行用户界面布局。<br /><br />A, 面板(Panel)容器 显示一个标题栏、一个标题、一个边框及其子级。默认情况下, Panel 容器会对子组件进行垂直布局, 并且可以通过将布局属性设置为 &quot;absolute&quot; 或 &quot;horizontal&quot;来覆盖此设置。<br /><br />B, HDividedBox?容器 对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器很相似。 VDividedBox? 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线。<br /><br />C, 平铺(Tile)容器 以多行或多列的形式排列其子级。<br /><br />D, 表单(Form)容器 以标准的表单格式排列其子级。<br /><br />E, ApplicationControlBar? 容器 容纳提供全局导航和应用程序命令的组件, 并可以停靠在 Application 容器的上边缘。<br /><br />F, ControlBar?容器将控件置于 Panel 或 TitleWindow? 容器的下边缘。<br /><br />G, 另外可使用Spacer控件来辅助布局。Spacer控件并非容器，而是基于百分比的可用于挤占留空以准确定位的一个不可见控件。<br /><br />2, 导航容器: 使用导航容器可以控制其他容器的多个子级之间的用户移动或导航。导航器容器不能直接嵌套控件，只能嵌套容器。<br /><br />A，手风琴(Accordion)容器 定义一个子面板序列, 但一次仅显示一个面板。 若要导航容器, 用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器, 用户可以按任何顺序访问子面板以在表单中前后移动。<br /><br />B, TabNavigator?容器 创建和管理一组选项卡, 使用它们可在其子级中间导航。 TabNavigator? 容器的子级是其他容器。 TabNavigator? 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavigator? 容器会显示相关联的子级。<br /><br />C, ViewStack?容器 由彼此堆叠在一起的子容器的一个集合组成, 一次只有一个容器是可见的或活动的。 ViewStack? 容器不为用户定义切换当前活动容器的内置机制；您必须使用 LinkBar?、TabBar?、ButtonBar? 或 ToggleButtonBar? 控件或自己在 ActionScript? 中构建逻辑让用户来更改当前活动的子级。<br /><br />3, 使用容器Containers进行定位布局<br /><br />定位方式有三种:<br /><br />A, 自动定位:多数Flex容器使用默认预定义的规则来自动定位你在其中定义的所有的子组件。<br /><br />B, 使用绝对定位: 用于使控件重叠<br /><br />C, 使用基于约束的布局: 可以锚定容器的边缘或者中心点，然后控件就会随着容器的伸缩而伸缩<br /><br />Canvas容器，和layout属性为absolute的Application或Panel容器才能进行绝对定位，或约束布局。<br /><br />4，使用视图状态(或ViewStack?导航容器)进行用户界面切换导航<br /><br />可以为一个Flex程序或组件定义几种视图状态，然后通过改变(切换)视图状态而改变用户界面。(ViewStack?导航容器可实现同样效果)<br /><br />1)，设计基础状态(Base state,Start,currentState=''):就是在默认状态下设计用户界面。<br /><br />2)，设计视图状态(currentState='SomeState?'):在设计模式中，在状态查看（Window &gt; States）上点击新状态/New? State 按钮。然后在此状态下编辑的界面即为该视图的对应界面。<br /><br />3)，创建用户行为切换控件: 定义用户变换状态的点击事件处理器。一般是使用一个LinkButtun?，激活currentState='SomeState?'以切换到某界面，激活currentState=''以回到默认界面。<br /><br />五，使用CSS格式化组件<br /><br />1. 文字横竖排列Aligning Text Vertically &amp; Horizontally<br /><br />样式对于定义Flex应用程序的外观和感觉 (外观) 很有用。您可以使用它们来更改单一组件的外观, 或在所有组件上应用它们。<br /><br />在 Flex 中应用样式有许多方法。 某些样式提供更多粒度控制并能以编程方式被执行。其他样式不像那么灵活, 但可能需要较少的计算。在 Flex 中, 可以使用以下几种方法将样式应用到控件:<br /><br />1, 使用本地样式定义<br /><br />2, 使用外部样式表<br /><br />3, 使用线上样式<br /><br />4, 使用 setStyle() 方法<br /><br />六，使用特效丰富用户体验<br /><br />1, 添加效果<br /><br />1), 效果是在较短时间上发生的对组件的更改。 效果的例子有: 淡化组件、调整组件大小和移动组件。一种效果与一个触发器相结合才能形成一个行为, 如组件上的鼠标单击、组件获得焦点或组件变成可见的。 在 MXML 中, 您将效果应用为控件或容器的属性。 Adobe&reg; Flex&trade; 提供具有默认属性的一组内置效果。<br /><br />作为对某些用户或编程操作的响应, 行为使您可以将动画、动作和声音添加到应用程序中。 例如, 您可使用行为在获得焦点时弹出对话框, 或是在用户输入无效的值时发出声音。<br /><br />Flex 触发器属性是作为层叠样式表 (CSS) 样式被实施的。 在 Adobe Flex 2 语言参考中, 触发器被列出在标题&ldquo;效果&rdquo;的下面。<br /><br />若要创建行为, 您定义一个具有唯一 ID 的特定效果并将它绑定到触发器。 例如, 下面的代码创建两个缩放效果: 一个用于轻微缩小组件, 一个用于将组件还原至其原始大小。 这些效果通过使用它们的唯一 ID 被分配到&ldquo;按钮&rdquo;组件上的 mouseDownEffect? 和 mouseUpEffect? 触发器上。<br /><br />注意如何将 Panel 容器的 autoLayout 属性设置为 &quot;false&quot;。这样是为了阻止在按钮改变大小时面板改变大小。<br /><br />2)，使用效果方法和事件<br /><br />您可以调用效果上的方法来改变它们播放的方式。 例如, 可以通过调用效果的 pause() 方法来暂停效果, 并通过使用其 resume() 方法来继续该效果。可以通过调用效果的 end() 方法来结束该效果。<br /><br />当效果开始和效果结束时, 它也会发出 startEffect 和 endEffect 事件。 您可以监听这些事件并响应您的事件状态中的更改。<br /><br />下面的示例使用&ldquo;移动&rdquo;效果的方法和事件来创建一个简单的游戏。 该游戏的目标是使直升飞机尽可能接近靶而又不撞到它。 靠得越近, 赢得的点数越多。<br /><br />3, 使用过渡增加用户界面切换效果<br /><br />过渡(transition,变换)是定义在视图状态切换之间播放的一种或多种视觉效果。过渡不会替换效果；即, 您仍可以将单一效果应用到一个组件, 并通过使用一个效果触发器或者 playEffect()方法来调用该效果。创建过渡样例如下:<br /><br />&lt;mx:transitions&gt;<br />//fromState 属性指定当应用该过渡时您要更改的视图状态<br />//toState 属性指定您要更改为的视图状态<br />//effect 属性是对要播放的 Effect 对象的引用<br />&lt;mx:Transition id=&quot;myTransition&quot; fromState=&quot;*&quot; toState=&quot;Advanced&quot;&gt;<br /><br />//&lt;mx:Parallel&gt; 和 &lt;mx:Sequence&gt; 标签分别引发并行或按顺序播放的效果<br />&lt;mx:Parallel target=&quot;{myVBox}&quot;&gt;<br /><br />//效果标签<br />&lt;mx:WipeDown duration=&quot;2000&quot;/&gt;<br />&lt;mx:Dissolve alphaFrom=&quot;0.0&quot; alphaTo=&quot;1.0&quot; duration=&quot;2000&quot;/&gt;<br />&lt;/mx:Parallel&gt;<br />&lt;/mx:Transition&gt;<br />&lt;/mx:transitions&gt;<br /><br />4, 为用户提供工具提示<br /><br />Adobe Flex ToolTip? 使您能够为您的用户提供有帮助的信息。当用户在图形组件上移动鼠标指针时, 会弹出包含文本信息的工具提示。您可以使用工具提示来指导用户完成使用应用程序或自定义它们来提供其他功能。<br /><br />扩展 UIComponent 类 (该类实现 IToolTipManagerClient? 界面) 的每个可视 Flex 组件都支持 toolTip 属性。您将 toolTip 属性的值设置为一个文本字符串, 并且, 当鼠标指针悬停在该组件上时, 会显示该文本字符串。<br /><br />尽管长消息很难读取, 但对工具提示文本的大小不存在任何限制。当工具提示文本达到工具提示框的宽度时, 文本会自动换至下一行。可以在工具提示文本中添加换行符。在 ActionScript? 中, 您使用 \n 转义的新行字符。在 MXML 标签中, 您使用 XML 实体。<br /><br />可以通过使用层叠样式表 (CSS) 语法或 mx.styles.StyleManager? 类更改工具提示文本和工具提示框的外观。对工具提示样式的更改适用于当前应用程序中的所有工具提示。<br /><br />5, 控制光标<br /><br />使用Flex光标管理器可以控制 Flex 应用程序中的光标图像。 例如, 如果应用程序执行的处理需要用户等待, 直到处理完成为止, 则可以将光标更改为某个自定义的光标图像, 比如沙漏, 以使它反映该等待期。<br /><br />您还可以更改光标以向用户提供反馈, 指示用户可以执行的操作。 例如, 您可以使用一个光标图像来指示用户输入被启用, 而使用另一个光标图像来指示输入被禁用。<br /><br />CursorManager? 类控制一个光标优先顺序列表, 在其中具有最高优先级的光标当前是可见的。 如果光标列表包含具有相同优先级的多个光标, 则光标管理器会显示最近创建的光标。<br /><br />1), 使用默认的忙光标<br /><br />Flex 定义了一个默认的忙光标, 可用来指示应用程序正在处理, 且在应用程序对用户输入作出响应之前, 用户应等待, 直到处理完成。 默认的忙光标是一个动画时钟。<br /><br />可以使用以下几种方式来控制忙光标:<br /><br />          o 可以使用 CursorManager? 方法来设置和删除忙光标。<br />          o 可以使用 SWFLoader、WebService?、HttpService? 和 RemoteObject? 类的 showBusyCursor? 属性自动显示忙光标。<br /><br />下面的示例使用 CursorManager? 类的静态 setBusyCursor?() 和 removeBusyCursor?() 方法, 根据切换按钮的状态显示和隐藏默认的 Flex 忙光标。<br /><br />2), 使用自定义光标<br /><br />可以使用 JPEG、GIF、PNG 或 SVG 图像, Sprite 对象或 SWF 文件作为光标图像。<br /><br />若要使用光标管理器, 您将 mx.managers.CursorManager? 类导入到应用程序中, 然后引用其属性和方法。<br /><br />下面的示例嵌入一个在 Adobe Flash 中创建的沙漏的 SWF 动画, 并将它用作一个自定义光标。 在该示例中, 创建自定义光标的方法是, 调用 CursorManager? 类的 setCursor() 静态方法, 然后将它传送给对您希望用作自定义光标的嵌入资源的类的引用。 可以通过调用 CursorManager? 类的 removeCursor() 静态方法并将它传送给 CursorManager? 类的 currentCursorID? 静态属性来删除活动的自定义光标。<br /><br />七，使用ActionScript处理事件<br /><br />1, 事件模型与机制<br /><br />Flex的事件模型基于DOM3事件模型。通过创建注册事件监听器(事件处理程序,事件处理器,是函数方法用于响应指定的事件)，可以在组件的实例发出某个事件(如用户何时与界面组件交互, 以及在组件的外观或生命周期中何时发生重要的变化, 如组件的创建或破坏或调整其大小等)时, 对象事件自动派发此事件到所有注册过的监听器。<br /><br />1)，事件流:当一个事件被派发出来时, 事件对象从根节点开始自上而下开始扫描display list(如), 一直到目标对象, 检查每个节点是否有相应的监听器。目标对象指的是display list中产生事件的对象. 比如:&lt;mx:Panel&gt;&lt;mx:HBox&gt;&lt;mx:VBox&gt;&lt;mx:Button /&gt;&lt;/mx:VBox&gt;&lt;/mx:HBox&gt;&lt;/mx:Panel&gt;。如果此时 resize了VBox, 则会从根(Application)开始, 下来检查Panel, HBox, 直到目标对象-产生resize事件的VBox为止.<br /><br />2), 事件的派发 Flex中可以通过dispatchEvent()方法手工派发事件, 所有UIComponent的子类都可以调用此方法. 语法:<br /><br />//参数event_type是Event对象的type属性<br />//函数的返回值总是True.<br />objectInstance.dispatchEvent(new Event(&quot;event_type&quot;):Boolean<br /><br />可以使用此方法派发任意事件, 而不仅仅是用户自定义事件, 比如: 可以派发一个Button的Click事件. var result:Boolean = buttonInstance.dispatchEvent(new Event(MouseEvent?.CLICK));<br /><br />在Flex应用中不是必须对新派发的事件进行处理, 如果触发了一个事件, 而没有对应的Listener时,Flex忽略此事件.<br /><br />如果想给Event对象添加新属性, 就必须继承Event类,然后定义新属性<br /><br />3), 事件的传播<br /><br />事件触发后, Flex有3个检测事件监听器的阶段, 3个阶段的发生的顺序如下:<br /><br />A. 捕获阶段:在捕获阶段,Flex在显示列表中检查事件的祖先是否注册了事件的监听器. Flex从根节点开始顺序而下. 大多数情况中, 根节点是Application对象. 同时, Flex改变事件的currentTarget值. 缺省情况下, 在此阶段,没有容器监听事件. use_capture参数的值是False,在此阶段添加监听的唯一方法是在调用add_listener时,传入一个为True值的use_capture参数, 比如:<br /><br />myAccordion.addEventListener(MouseEvent.MOUSE_DOWN, customLogEvent, true);<br /><br />如果是在Mxml中添加监听, Flex设置此参数为False, 没有办法进行修改. 如果设置了use_capture为True, 那么事件将不会上浮. 如果既想捕获又想上浮就必须调用 addEventListener?两次. 一次use_capture参数为true, 一次为false; 捕获很少使用, 上浮的使用更为普遍.<br /><br />B. 目标阶段: 在目标阶段, Flex激发事件的监听程序, 不检查其他的节点.<br /><br />C. 上浮阶段:事件只在bubbles属性为True时才进行上浮. 可以上浮的事件包括: change, click, doubleClick, keyDown, keyUp, mouseDown, mouseUp. 在上浮阶段, Flex改变事件的currentTarget属性, 而target属性是初始派发事件的对象.<br /><br />在任意一个阶段, 节点们都有机会操作事件. 比如: 用户点击了一个在VBox中的Button,在捕获阶段, Flex检查Application对象(根节点)和VBox是否有监听器处理此事件. Flex然后在目标阶段触发按钮的监听器.在上浮阶段, VBox和应用以与捕获阶段相反的顺序再次获得机会处理事件.<br /><br />在Actionscript3.0中,你可以在任意目标节点上注册事件监听器. 但是部分事件会被直接传给目标节点,比如Socket类. 捕获阶段的节点顺序是从父节点到子节点的, 而上浮阶段刚好相反.<br /><br />捕获事件缺省是关闭的,也就是说如果要捕获事件, 必须显式指定在捕获阶段进行处理.<br /><br />每一个Event都有target和currentTarget属性, 帮助跟踪事件传播的过程.<br /><br />4), 查询事件阶段<br /><br />使用事件的eventPhase可以获得事件当前的阶段,<br /><br />1): CAPTURE_PHASE<br /><br />2): AT_TARGET<br /><br />3): BUBBLING_PHASE<br /><br />示例: private function determineState(event:MouseEvent?):Void { Debug.trace(event.eventPhase + &quot;:&quot; + event.currentTarget.id); }<br /><br />5), 停止传播<br /><br />使用下面两个函数停止事件的传播:<br /><br />stopPropagation()<br /><br />stopImmediatePropagation?()<br /><br />2, 创建监听器<br /><br />组件有Flex提供的内建事件. 也可以使用派发-监听模型定义自己的事件监听器, 并指定监听器监听何种事件.<br /><br />有三种方式:<br /><br />1), 内部MXML中的AS函数法: 在MXML的&lt;mx:Script&gt;&lt;/mx:Script&gt;声明中注册监听器: 这是第一个和使用最广泛的方法，在 MXML 中定义事件发生时会调用的事件处理程序。<br /><br />2), 外部AS文件中的AS函数法:通过ActionScript?定义注册事件处理程序: 可以通过使用ActionScript? 中的 addEventHandler?() 等方法来注册事件处理程序。 可将 addEventHandler?() 方法置于 Application 容器的 creationComplete 事件(在 Application 表单及其子级被初始化之后, 在启动应用程序时发生)的事件处理程序中。 详见Action Script教程。<br /><br />3), 代码混写法: 在MXML的控件标签中直接完全嵌入监听器(这也称为使用线上事件处理程序): 这样比较直接，代码也较少，但会导致代码很难阅读、维护和缩放。如果监听器是多个AS语句甚至更复杂的逻辑，不推荐此方法。<br /><br />六，数据服务器访问概述<br /><br />Flex 被设计为可以与许多类型的服务器打交道，从而提供对本地和远端逻辑的访问。提供数据访问的MXML 组件被称之为数据服务器组件(data service components)。MXML 包含了如下几种类型的数据服务器组件：<br /><br />1. HTTPService 提供对返回数据的HTTP URLs 的访问。通过 Http get/post 来传递纯文字资料。好处是非常普及于所有的后台，但缺点则是复杂的数据类型要经过复杂的序列化与解序列化程序才能在client/server间交换。<br /><br />2. WebService? 提供对使用SOAP 的web 服务器的访问。WebService? 也是很常见的选择，好处是规则共通，方便不同技术平台交换资料，缺点则同样是某些复杂数据结构无法轻易的交换，在编码与译码的过程中往往会出现意外，例如 Date 的表现方式。以 .NET 来说，使用 web service 应该是再方便不过的选择，只要把 asmx 档案准备好再从 flex client 呼叫即可。<br /><br />3. RemoteObject?(Flash Remoting) 技术:官方支持的平台有三种，分别是 Java Coldfusion(但实际上Coldfusion应该只算是java的subset，它是一种 scripting tag library)与.NET。Flex Data Services 或Macromedia ColdFusion? MX 7.0.2通过使用AMF协议提供对Java 对象（Java Beans、EJBs、POJOs）的访问。<br /><br />4，其它非官方RemoteObject?技术: 由于AMF格式已被非官方反编译，所以有许多开源的remoting替代方案：<br /><br />A，AMFPHP: 这是php版的remoting<br /><br />B，OPENAMF: java版的remoting<br /><br />C，Flap: Perl 与Python版的remoting<br /><br />S，FlashORB: 商业版的remoting替代方案，目前支持java与.net<br /><br />七，HTTPService<br /><br />使用plaine text format的传输方式，通过xml, loadVars, loadVariables 等方式<br /><br />外部XML讀取 Actionscript 3.0 的賣點之一，就是加強XML讀取的方便性，讀取外部XML是常用的前後端整合手段，而XML節點的操作，比之前AS2用DOM更直觀，可以直接運用標籤與屬性名稱訪問節點。<br /><br />主要參考章節： Reading external XML documents Traversing XML structures<br /><br />Lesson 6: RETRIEVING XML DATA (37 min) 1. Setting Up an XML Data Project &amp; Setting HTTP Service 2. Setting Up a DataGrid? to Display XML Data 3. Adding a Label Control to a DataGrid? 4. Using an ArrayCollection? 5. Examining a Data Structure in Debugging Mode 6. Utilizing Data Returned in an Event Object 7. Using the HTTP Service Class to Catch Faults 8. Creating a Cross Domain Security File<br /><br />Lesson 13: MANIPULATING XML (34 min) 1. Manipulating Client Side Data Using E4X Syntax 2. Creating a Tree Control to Display the XML Data 3. Adding a Change Event to Display Data from the Tree 4. Populating the Shopping Cart with Raw XML Content 5. Working with an XML List Collection 6. Using Conditional Logic to Compare &amp; Update Values<br /><br />八，WebService<br /><br />Lesson 14: USING WEB SERVICES (25 min) 1. Accessing Web Services 2. Invoking Web Services Methods &amp; Results 3. Using a FaultHandler? 4. Call Multiple Methods from One Web Service Object 5. Passing Parameters to Web Services<br /><br />九，Flex Data Services<br /><br />FDS (Data Service, Messaging)<br /><br />Flex Data Service 是 Flex 2 里新出现的技术，主要目地是希望提供更自动的方法来让 client 与 server 交换资料，它的核心实际上仍然是 AMF 与 RTMP (对，就是 Flash Media Server 用的那种)，部份功能也与 FMS 重叠，但它着重在 Data Sharing 与 Exchange 这部份。<br /><br />目前 FDS 只有 Java 的版本，也就是 server 端要用 java 写，但 Adobe 宣称将来会有 FDS for .NET 版。不过好消息是，有一家叫 theMidnightCoders? 的公司抢先推出了 FDS 兼容版本，不但同时支持 AMF0 与 AMF3，更支持部份 FDS 的功能(主要是资料同步的部份，与server端的冲突处理与资料储存)。<br /><br />以 .NET 来说，付费的选择中 weborb 算是目前最优的选择，价钱只有官方版的一半，但功能更完整；而免钱的选择则当非 Fluorine 莫属。<br /><br />功能描述：如果你有Flex Data services，你可以发布一组MXML和AS文件，Flex Data Services可以在收到Http请求前，把你的MXML和AS文件编译成Swf文件。<br /><br />Flex执行以下步骤：<br /><br />1． 编译MXML并产生一个SWF文件<br /><br />2． 贮藏已编译的MXML文件<br /><br />3． 向安户端返回SWF文件<br /><br />发布你的程序方法一：发布一个SWF文件<br /><br />访问方法：http://hostname/path/filename.swf<br /><br />方法二：发布MXML和AS文件<br /><br />访问方法：http://hostname/path/filename.mxml<br /><br />FDS在你的Java服务器上或者Java容器内运行。以保证在以下几个特征领域的广泛性<br /><br />1&gt;多个客户端的数据共享<br /><br />1． 支持C2C的数据通讯<br /><br />2． 服务器端数据增加<br /><br />3． 安户端访问服务器资源的证明<br /><br />4． 数据服务日志<br /><br />2&gt;提高RPC的广泛性<br /><br />十，其它RemoteObject技术<br /><br />现有许多非官方的开源RemoteObject?(Flash Remoting)技术，流行的服务端（Java、Php、.Net、Perl/Python?、Ruby）技术Flex都已打通，您可以直接在Flex/Flash?中通过RemoteObject?直接调用 A，AMFPHP: Flash和PHP的整合 AMFPHP<br /><br />B，AMF.NET: Flex调用不同参数类型的.Net WebMethod<br /><br />C，AMF::Perl<br /><br />D，RubyAmf<br /><br />E，与JAVA:<br /><br />F，和ASP的整合：Flash2ASP是能自动生成ASP和AS代码的工具。虽然Flash2ASP作后台速度不如AMFphp，但由于国内ASP资源丰富，而且Flash2ASP教程文档详细，也可作为一个选择。<br /><br />在线版<br /><br />说明图<br /><br />55分钟详细使用方法以及留言簿范例视频教程<br /><br />本地运行版下载(exe)<br /><br />详细情况<br /><br />十一, 创建自定义组件<br /><br />1, Flex是由as类结构实现的。类结构包含了组件类，管理类，数据服务类，和其他用来实现flex功能的类。下图展示的是类结构中flex可视化组件的一部分，关于控制和容器的部分：<br /><br />所有的可视化组件继承自UIComponent as类。Flex中非可视化组件也是依靠as类结构来实现的。大部分的非可视化组件都是Validator，Formatter，或者是Effect 类。<br /><br />通过使用mxml和as语言扩展Flex类结构来创建自定义的组件。组件都继承了父类的属性，方法，行为，风格和效果。<br /><br />通过as创建一个flex组件时，必须继承自一个flex类。类的名称必须和类文件的名称相同。子类继承了父类的所有属性的和方法。在 mxml中使用这个组件时，通过使用类名称的标签来引用。例如，类名称是myASButton，文件名则为myASButton.as，在mxml中使用 &lt; myASButton&gt;标签来使用组件。<br /><br />在通过mxml创建一个组建时，flex编译器将自动的生成一个as类。mxml文件的名称必须和as类名称相同。同样，在mxml中使用这个名称标签来使用这个组件。<br /><br />下图展示了分别通过as和mxml创建的Flex Button组件的自定义组件：<br /><br />Button.as<br /><br />MyASButton.as<br /><br />package<br />{<br />  public class MyASButton extends Button<br />  {<br /><br />    //Override inherited methods and properties.<br />    //Define new methods and properties.<br />    //Define custom logic in ActionScript.<br /><br />  }<br />}<br /><br />&lt;mx:Button&gt;<br />  <br />  &lt;ms:Script&gt;<br />    //Override inherited methods and properties.<br />    //Define new methods and properties.<br />    //Define custom logic in ActionScript.<br />  &lt;/mx:Script&gt;<br /><br />&lt;!-- Add MXML code. --&gt;<br />&lt;/mx:Button&gt;<br /><br />上面的两种实现方法都生成了一个Button类的子类。同样的继承了所有的属性，方法和button类的所有元素。都可以重写类的属性，方法和逻辑。<br /><br />注意：父类中的变量是不能被覆盖，但是可以覆盖通过setter和getter方法实现的属性。你可以重新设置这些变量的值。<br /><br />另外，如果使用mxml创建组建，flex编译器完成了创建一个组件的子类的大部分工作，因此使用mxml创建组件比用as创建组件更加容易。<br /><br />2, 决定是使用mxml还是as创建组件<br /><br />在创建组件之前需要做的一个首要决定是，使用as还是mxml。由你需要开发应用程序来决定你需要使用什么样的组件。<br /><br />下面是一些基本的指导方针：<br /><br />mxml和as组件都定义了新的as类。基本上所有能用as完成的自定义组件都可以通过mxml来实现。一般来说，对于简单的自定义组建，例如修改已有组建的一些属性和方法，使用mxml要比使用as方便得多。当你在新的组件中使用了别的组建，而且需要使用flex layout容器来进行多个组件的布局设置，那么需要使用mxml来定义。如果你想修改某一个组件的行为，例如一个容器中子元素的布局方式，则使用as。如果你想通过创建UIComponent的子类来创建一个全新的可视化组件，则使用as。如果你想创建一个全新的非可视化组件，例如formatter，validator，或者effect，则使用as。注意：Flash Professional 8是不能开发AS3.0的组件的，如果要使用AS3.0开发Flex2组件，应该使用Flex Builder IDE。<br /><br />3, 组件部署<br /><br />在部署你的mxml或as文件的自定义组件时，一般将这些文件放置在你的应用程序的子目录内，或者一个定义好的as类路径下。<br /><br />为了保密，你可能不希望使用源码的形式来部署你的源文件。因此你可以使用swc文件或者共享资源库（RSL）作为用来部署的文件。<br /><br />Swc文件是Flex组件的一种集合格式。使用swc文件可以方便的在开发人员之间进行交流，这样你使用使用一个文件，而不是很多mxml，as文件，或者图片和其他资源。更重要的是，swc文件中的swf已经被编译了，这意味着你不用看着繁杂的代码。<br /><br />Swc文件可以包含多个组件，使用PKZip打包格式将其打包在一起。你可以使用winzip，jar或者任何打包工具来打开这个文件。但是，一般来说不要直接在swc外部运行打包在swc里面的swf文件。<br /><br />创建swc文件，需要使用compc工具，该工具在flex安装目录下的bin目录内。compc工具可以将mxml文件，或as文件，或两种文件一起，打包成swc文件。<br /><br />要缩小你的swf格式的应用程序的大小，有一种方式是将共享资源打包到文件外部，由client下载并保存在缓存中。这些外部职员可以在程序运行的时候多次被使用，但是只需要从服务器传输到client端一次。这些文件就是共享资源库（RSL）。<p>&nbsp;</p>
          <br/>
          <span style="color:red;">
            <a href="http://yapi.javaeye.com/blog/179769#comments" style="color:red;">本文的讨论也很精彩，浏览讨论>></a>
          </span>
          <br/><br/><br/>
          <span style="color:#E28822;">JavaEye推荐</span>
          <br/>
          <ul class='adverts'><li><a href='/adverts/115' target='_blank'><span style="color:red;font-weight:bold;">JavaEye图灵杯第2届问答大赛开始了！8月4日至8月17日，奖品丰厚！</span></a></li><li><a href='/adverts/41' target='_blank'><span style="color:red;font-weight:bold;">北京: 千橡集团暨校内网诚聘软件研发工程师</span></a></li><li><a href='/adverts/42' target='_blank'><span style="color:red;font-weight:bold;">搜狐网站诚聘Java、PHP和C++工程师</span></a></li></ul>
          <br/><br/><br/>
          ]]>
        </description>
        <pubDate>Sat, 05 Apr 2008 23:21:11 +0800</pubDate>
        <link>http://yapi.javaeye.com/blog/179769</link>
        <guid>http://yapi.javaeye.com/blog/179769</guid>
      </item>
      <item>
        <title>Impression on 37signal products</title>
        <author>yapi</author>
        <description>
          <![CDATA[
          <br/>
          作者: <a href="http://yapi.javaeye.com">yapi</a>&nbsp;
          链接：<a href="http://yapi.javaeye.com/blog/178251" style="color:red;">http://yapi.javaeye.com/blog/178251</a>&nbsp;
          发表时间: 2008年04月01日
          <br/><br/>
          声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！
          <br/><br/>
          1 basecamp<br />   project management: message, to-do ,milestone(schedule),whiteboard<br />2 campfire<br />   chat-room & file exchange
          <br/>
          <span style="color:red;">
            <a href="http://yapi.javaeye.com/blog/178251#comments" style="color:red;">本文的讨论也很精彩，浏览讨论>></a>
          </span>
          <br/><br/><br/>
          <span style="color:#E28822;">JavaEye推荐</span>
          <br/>
          <ul class='adverts'><li><a href='/adverts/42' target='_blank'><span style="color:red;font-weight:bold;">搜狐网站诚聘Java、PHP和C++工程师</span></a></li><li><a href='/adverts/115' target='_blank'><span style="color:red;font-weight:bold;">JavaEye图灵杯第2届问答大赛开始了！8月4日至8月17日，奖品丰厚！</span></a></li><li><a href='/adverts/41' target='_blank'><span style="color:red;font-weight:bold;">北京: 千橡集团暨校内网诚聘软件研发工程师</span></a></li></ul>
          <br/><br/><br/>
          ]]>
        </description>
        <pubDate>Tue, 01 Apr 2008 01:02:04 +0800</pubDate>
        <link>http://yapi.javaeye.com/blog/178251</link>
        <guid>http://yapi.javaeye.com/blog/178251</guid>
      </item>
      <item>
        <title>Basics of the Unix Philosophy</title>
        <author>yapi</author>
        <description>
          <![CDATA[
          <br/>
          作者: <a href="http://yapi.javaeye.com">yapi</a>&nbsp;
          链接：<a href="http://yapi.javaeye.com/blog/177745" style="color:red;">http://yapi.javaeye.com/blog/177745</a>&nbsp;
          发表时间: 2008年03月30日
          <br/><br/>
          声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！
          <br/><br/>
          <div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2877537">Rule of Modularity: Write simple parts connected by clean interfaces.</a></h3></div></div><p><a id="id2877537">As Brian Kernighan once observed, &ldquo;Controlling complexity
is the essence of computer programming&rdquo; [</a><a href="http://www.faqs.org/docs/artu/apb.html#Kernighan-Plauger" title="[Kernighan-Plauger]">Kernighan-Plauger</a>]. Debugging dominates
development time, and getting a working system out the door is
usually less a result of brilliant design than it is of managing not
to trip over your own feet too many times.</p><p>Assemblers, compilers, flowcharting, procedural programming,
structured programming, &ldquo;artificial intelligence&rdquo;,
fourth-generation languages, object
orientation<a class="indexterm" id="id2877569">, and software-development
methodologies without number have been touted and sold as a cure for
this problem. All have failed as cures, if only because they
&lsquo;succeeded&rsquo; by escalating the normal level of program
complexity to the point where (once again) human brains could barely
cope. As Fred Brooks</a><a class="indexterm" id="id2877583"> famously observed [</a><a href="http://www.faqs.org/docs/artu/apb.html#Brooks" title="[Brooks]">Brooks</a>], there is no silver bullet.</p><p>The only way to write complex software that won't fall on its
face is to hold its global complexity down &mdash; to build it out of
simple parts connected by well-defined interfaces, so that most
problems are local and you can have some hope of upgrading
a part without breaking the whole.</p></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2877610">Rule of Clarity: Clarity is better than cleverness.</a></h3></div></div><p><a id="id2877610">Because maintenance is so important and so expensive, write
programs as if the most important communication they do is not to the
computer that executes them but to the human beings who will read and
maintain the source code in the future (including&nbsp;yourself).</a></p><p><a id="id2877610">In the Unix tradition, the implications of this advice go beyond
just commenting your code.  Good Unix practice also embraces choosing
your algorithms and implementations for future maintainability.  Buying a
small increase in performance with a large increase in the complexity 
and obscurity of your technique is a bad trade &mdash; not merely because
complex code is more likely to harbor bugs, but also because complex
code will be harder to read for future maintainers.</a></p><p><a id="id2877610">Code that is graceful and clear, on the other hand, is less
likely to break &mdash; and more likely to be instantly comprehended
by the next person to have to change it.  This is important,
especially when that next person might be yourself some years down the
road.</a></p><div class="blockquote"><table class="blockquote" cellspacing="0" border="0" summary="Block quote" width="100%" cellpadding="0"><tbody><tr><td valign="top" width="10%">&nbsp;</td><td valign="top" width="80%"><p>Never struggle to decipher subtle code three times.  Once might
be a one-shot fluke, but if you find yourself having to figure it out
a second time &mdash; because the first was too long ago and you've
forgotten details &mdash; it is time to comment the code so that the
third time will be relatively painless.</p></td><td valign="top" width="10%">&nbsp;</td></tr><tr><td align="right" valign="top" colspan="2">--<span class="attribution">
<span class="author">Henry Spencer</span>
<a class="indexterm" id="id2877661">
</a></span></td><td valign="top" width="10%">&nbsp;</td></tr></tbody></table></div></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2877684">Rule of Composition: Design programs to be connected with other programs.</a></h3></div></div><p><a id="id2877684">It's hard to avoid programming overcomplicated monoliths if none
of your programs can talk to each other.</a></p><p><a id="id2877684">Unix tradition strongly encourages writing programs that
read and write simple, textual, stream-oriented, device-independent
formats.  Under classic Unix, as many programs as possible are written
as simple <em>filters</em>, which take a simple text
stream on input and process it into another simple text stream on
output.</a></p><p><a id="id2877684">Despite popular mythology, this practice is favored not because
Unix programmers hate graphical user interfaces. It's because if you
don't write programs that accept and emit simple text streams, it's
much more difficult to hook the programs together.</a></p><p><a id="id2877684">Text streams are to Unix tools as messages are to objects in an
object-oriented setting. The simplicity of the text-stream interface
enforces the encapsulation of the tools.  More elaborate forms of
inter-process communication, such as remote procedure calls, show a
tendency to involve programs with each others' internals too
much.</a></p><p><a id="id2877684">To make programs composable, make them independent.  A program
on one end of a text stream should care as little as possible about
the program on the other end.  It should be made easy to replace one
end with a completely different implementation without disturbing the
other.</a></p><p><a id="id2877684">GUIs can be a very good thing. Complex binary data formats are
sometimes unavoidable by any reasonable means. But before writing a
GUI, it's wise to ask if the tricky interactive parts of your
program can be segregated into one piece and the workhorse
algorithms into another, with a simple command stream or
application protocol connecting the two. Before devising a tricky
binary format to pass data around, it's worth experimenting to see
if you can make a simple textual format work and accept a little
parsing overhead in return for being able to hack the data stream
with general-purpose tools.</a></p><p><a id="id2877684">When a serialized, protocol-like interface is not natural for the
application, proper Unix design is to at least organize as many of the
application primitives as possible into a library with a well-defined
API.  This opens up the possibility that the application can be called
by linkage, or that multiple interfaces can be glued on it for different&nbsp;tasks.</a></p><p><a id="id2877684">(We discuss these issues in detail in </a><a href="http://www.faqs.org/docs/artu/multiprogramchapter.html" title="Chapter&nbsp;7.&nbsp;Multiprogramming">Chapter&nbsp;7</a>.)</p></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2877777">Rule of Separation: Separate policy from mechanism;
separate interfaces from engines.</a></h3></div></div><p><a id="id2877777">In our discussion of what Unix gets wrong, we observed that the
designers of X</a><a class="indexterm" id="id2877788"> made a basic decision to implement
&ldquo;mechanism, not policy&rdquo;</a><a class="indexterm" id="id2877801">&mdash;to make X a generic
graphics engine and leave decisions about user-interface style to
toolkits and other levels of the system.  We justified this by
pointing out that policy and mechanism tend to mutate on different
timescales, with policy changing much faster than mechanism. Fashions
in the look and feel of GUI toolkits may come and go, but raster
operations and compositing are forever.</a></p><p><a class="indexterm" id="id2877801">Thus, hardwiring policy and mechanism together has two bad
effects: It makes policy rigid and harder to change in response to user
requirements, and it means that trying to change policy has a strong
tendency to destabilize the mechanisms.</a></p><p><a class="indexterm" id="id2877801">On the other hand, by separating the two we make it possible to
experiment with new policy without breaking mechanisms.  We also make
it much easier to write good tests for the mechanism (policy,
because it ages so quickly, often does not justify the investment).</a></p><p><a class="indexterm" id="id2877801">This design rule has wide application outside the GUI
context.  In general, it implies that we should look for ways to
separate interfaces from engines.</a></p><p><a class="indexterm" id="id2877801">One way to effect that separation is, for example, to write
your application as a library of C</a><a class="indexterm" id="id2877847"> service routines that are driven by an
embedded scripting language, with the application flow of control
written in the scripting language rather than&nbsp;C. A&nbsp;classic example of
this pattern is the <em>Emacs</em> editor, which uses
an embedded Lisp</a><a class="indexterm" id="id2877866"> interpreter to control editing
primitives written in C.  We discuss this style of design in </a><a href="http://www.faqs.org/docs/artu/interfacechapter.html" title="Chapter&nbsp;11.&nbsp;Interfaces">Chapter&nbsp;11</a>.</p><p>Another way is to separate your application into cooperating
front-end and back-end processes communicating through a specialized
application protocol over sockets<a class="indexterm" id="id2877889">; we discuss this kind of design in </a><a href="http://www.faqs.org/docs/artu/textualitychapter.html" title="Chapter&nbsp;5.&nbsp;Textuality">Chapter&nbsp;5</a> and <a href="http://www.faqs.org/docs/artu/multiprogramchapter.html" title="Chapter&nbsp;7.&nbsp;Multiprogramming">Chapter&nbsp;7</a>.  The front end implements policy; the
back end, mechanism.  The global complexity of the pair will often be
far lower than that of a single-process monolith implementing the same
functions, reducing your vulnerability to bugs and lowering life-cycle
costs.</p></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2877917">Rule of Simplicity: Design for simplicity; add complexity only where you must.</a></h3></div></div><p><a id="id2877917">Many pressures tend to make programs more complicated (and
therefore more expensive and buggy). One such pressure is technical
machismo. Programmers are bright people who are (often justly) proud
of their ability to handle complexity and juggle abstractions. Often
they compete with their peers to see who can build the most intricate
and beautiful complexities. Just as often, their ability to design
outstrips their ability to implement and debug, and the result is
expensive failure.</a></p><div class="blockquote"><table class="blockquote" cellspacing="0" border="0" summary="Block quote" width="100%" cellpadding="0"><tbody><tr><td valign="top" width="10%">&nbsp;</td><td valign="top" width="80%"><p>The notion of &ldquo;intricate and beautiful complexities&rdquo; is
almost an oxymoron.  Unix programmers vie with each other
for &ldquo;simple and beautiful&rdquo; honors &mdash; a&nbsp;point that's
implicit in these rules, but is well worth making overt.</p></td><td valign="top" width="10%">&nbsp;</td></tr><tr><td align="right" valign="top" colspan="2">--<span class="attribution">
<span class="author">Doug McIlroy</span>
<a class="indexterm" id="id2877951">
</a></span></td><td valign="top" width="10%">&nbsp;</td></tr></tbody></table></div><p><a id="id2877917">Even more often (at least in the commercial software world)
excessive complexity comes from project requirements that are based on
the marketing fad of the month rather than the reality of what
customers want or software can actually deliver. Many a good design
has been smothered under marketing's pile of &ldquo;checklist
features&rdquo; &mdash; features that, often, no customer will ever
use. And a vicious circle operates; the competition thinks it has to
compete with chrome by adding more chrome. Pretty soon, massive bloat
is the industry standard and everyone is using huge, buggy programs
not even their developers can love.</a></p><p><a id="id2877917">Either way, everybody loses in the end.</a></p><p><a id="id2877917">The only way to avoid these traps is to encourage a software
culture that knows that small is beautiful, that actively resists
bloat and complexity: an engineering tradition that puts a high
value on simple solutions, that looks for ways to break program systems up
into small cooperating pieces, and that reflexively fights attempts to
gussy up programs with a lot of chrome (or, even worse, to design
programs <span class="emphasis"><em>around</em></span> the chrome).</a></p><p><a id="id2877917">That would be a culture a lot like Unix's.</a></p></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2878022">Rule of Parsimony: Write a big program only when it is
clear by demonstration that nothing else will do.</a></h3></div></div><p><a id="id2878022">&lsquo;Big&rsquo; here has the sense both of large in volume of
code and of internal complexity.  Allowing programs to get large
hurts maintainability.  Because people are reluctant to throw
away the visible product of lots of work, large programs invite
overinvestment in approaches that are failed or suboptimal.</a></p><p><a id="id2878022">(We'll examine the issue of the right size of software in more
detail in </a><a href="http://www.faqs.org/docs/artu/complexitychapter.html" title="Chapter&nbsp;13.&nbsp;Complexity">Chapter&nbsp;13</a>.)</p></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2878054">Rule of Transparency: Design for visibility to make
inspection and debugging easier.</a></h3></div></div><p><a id="id2878054">Because debugging often occupies three-quarters or more of
development time, work done early to ease debugging can be a very
good investment. A particularly effective way to ease debugging is to
design for
<em>transparency</em></a><a class="indexterm" id="id2878070"> and
<em>discoverability</em></a><a class="indexterm" id="id2878084">.</a></p><p><a class="indexterm" id="id2878084">A software system is <span class="emphasis"><em>transparent</em></span> when you
can look at it and immediately understand what it is doing and how. It
is <span class="emphasis"><em>discoverable</em></span> when it has facilities for
monitoring and display of internal state so that your program not only
functions well but can be <span class="emphasis"><em>seen</em></span> to function
well.</a></p><p><a class="indexterm" id="id2878084">Designing for these qualities will have implications throughout
a project. At minimum, it implies that debugging options should not be
minimal afterthoughts. Rather, they should be designed in from the
beginning &mdash; from the point of view that the program should be
able to both demonstrate its own correctness and communicate to future
developers the original developer's mental model of the problem it
solves.</a></p><p><a class="indexterm" id="id2878084">For a program to demonstrate its own correctness, it needs to be
using input and output formats sufficiently simple so that the proper
relationship between valid input and correct output is easy to
check.</a></p><p><a class="indexterm" id="id2878084">The objective of designing for transparency and discoverability
should also encourage simple interfaces that can easily be manipulated
by other programs &mdash; in particular, test and monitoring harnesses
and debugging scripts.</a></p></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2878145">Rule of Robustness: Robustness is the child of&nbsp;transparency and simplicity.</a></h3></div></div><p><a id="id2878145">Software is said to be <em>robust</em> when
it performs well under unexpected conditions which stress the designer's
assumptions, as well as under normal conditions.</a></p><p><a id="id2878145">Most software is fragile and buggy because most programs are too
complicated for a human brain to understand all at once. When you
can't reason correctly about the guts of a program, you can't be sure
it's correct, and you can't fix it if it's broken.</a></p><p><a id="id2878145">It follows that the way to make robust programs is to make their
internals easy for human beings to reason about. There are two main
ways to do that:
transparency</a><a class="indexterm" id="id2878177"> and
simplicity.</a></p><div class="blockquote"><table class="blockquote" cellspacing="0" border="0" summary="Block quote" width="100%" cellpadding="0"><tbody><tr><td valign="top" width="10%">&nbsp;</td><td valign="top" width="80%"><p>For robustness, designing in tolerance for unusual or extremely
bulky inputs is also important.  Bearing in mind the Rule of
Composition helps; input generated by other programs is notorious for
stress-testing software (e.g.,&nbsp;the original Unix C compiler reportedly
needed small upgrades to cope well with Yacc output).  The forms
involved often seem useless to humans.  For example, accepting empty
lists/strings/etc., even in places where a human would seldom or never
supply an empty string, avoids having to special-case such situations when
generating the input mechanically.</p></td><td valign="top" width="10%">&nbsp;</td></tr><tr><td align="right" valign="top" colspan="2">--<span class="attribution">
<span class="author">Henry Spencer</span>
<a class="indexterm" id="id2878201">
</a></span></td><td valign="top" width="10%">&nbsp;</td></tr></tbody></table></div><p><a class="indexterm" id="id2878177">One very important tactic for being robust under odd inputs is
to avoid having special cases in your code.  Bugs often lurk in the
code for handling special cases, and in the interactions among parts
of the code intended to handle different special cases.</a></p><p><a class="indexterm" id="id2878177">We observed above that software is
<em>transparent</em> when you can look at it and
immediately see what is going on. It is <span class="emphasis"><em>simple</em></span>
when what is going on is uncomplicated enough for a human brain to
reason about all the potential cases without strain.  The more
your programs have both of these qualities, the more robust they will
be.</a></p><p><a class="indexterm" id="id2878177">Modularity (simple parts, clean interfaces) is a way to organize
programs to make them simpler. There are other ways to fight for
simplicity. Here's another one.</a></p></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2878263">Rule of Representation: Fold knowledge into data, 
so&nbsp;program logic can be stupid and robust.</a></h3></div></div><p><a id="id2878263">Even the simplest procedural logic is hard for humans to verify,
but quite complex data structures are fairly easy to model and reason
about. To see this, compare the expressiveness and explanatory power
of a diagram of (say) a fifty-node pointer tree with a flowchart of a
fifty-line program.  Or, compare an array initializer expressing a conversion
table with an equivalent switch statement. The difference in
transparency</a><a class="indexterm" id="id2878281"> and
clarity is dramatic. See Rob Pike's </a><a href="http://www.faqs.org/docs/artu/ch01s06.html#rule5">Rule 5</a>.</p><p>Data is more tractable than program logic. It follows that where
you see a choice between complexity in data structures and
complexity in code, choose the former. More: in evolving a design,
you should actively seek ways to shift complexity from code to
data.</p><p>The Unix community did not originate this insight, but a lot of
Unix code displays its influence.  The
C<a class="indexterm" id="id2878312"> language's facility at
manipulating pointers, in particular, has encouraged the use of
dynamically-modified reference structures at all levels of coding from
the kernel upward. Simple pointer chases in such structures frequently
do duties that implementations in other languages would instead have
to embody in more elaborate procedures.</a></p><p><a class="indexterm" id="id2878312">(We also cover these techniques in </a><a href="http://www.faqs.org/docs/artu/generationchapter.html" title="Chapter&nbsp;9.&nbsp;Generation">Chapter&nbsp;9</a>.)</p></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2878339">Rule of Least Surprise: In interface design, always do
the&nbsp;least surprising thing.</a></h3></div></div><p><a id="id2878339">(This is also widely known as the Principle of Least
Astonishment.)</a></p><p><a id="id2878339">The easiest programs to use are those that demand the least new
learning from the user &mdash; or, to put it another way, the easiest
programs to use are those that most effectively connect to the user's
pre-existing knowledge.</a></p><p><a class="indexterm" id="id2878358">Therefore, avoid gratuitous novelty and excessive cleverness in
interface design.  If you're writing a calculator program,
&lsquo;+&rsquo; should always mean addition! When designing an
interface, model it on the interfaces of functionally similar or
analogous programs with which your users are likely to be
familiar.</a></p><p><a class="indexterm" id="id2878358">Pay attention to your expected audience.  They may be end
users, they may be other programmers, or they may be system
administrators.  What is least surprising can differ among these
groups.</a></p><p><a class="indexterm" id="id2878358">Pay attention to tradition. The Unix world has rather well-developed
conventions about things like the format of configuration and
run-control files, command-line switches, and the like. These
traditions exist for a good reason: to tame the learning curve.
Learn and use them.</a></p><p><a class="indexterm" id="id2878358">(We'll cover many of these traditions in </a><a href="http://www.faqs.org/docs/artu/textualitychapter.html" title="Chapter&nbsp;5.&nbsp;Textuality">Chapter&nbsp;5</a> and <a href="http://www.faqs.org/docs/artu/configurationchapter.html" title="Chapter&nbsp;10.&nbsp;Configuration">Chapter&nbsp;10</a>.)</p><div class="blockquote"><table class="blockquote" cellspacing="0" border="0" summary="Block quote" width="100%" cellpadding="0"><tbody><tr><td valign="top" width="10%">&nbsp;</td><td valign="top" width="80%"><p>The flip side of the Rule of Least Surprise is to avoid
making things superficially similar but really a little bit different.
This is extremely treacherous because the seeming familiarity raises false
expectations.  It's often better to make things distinctly different than
to make them <span class="emphasis"><em>almost</em></span> the same.</p></td><td valign="top" width="10%">&nbsp;</td></tr><tr><td align="right" valign="top" colspan="2">--<span class="attribution">
<span class="author">Henry Spencer</span>
<a class="indexterm" id="id2878424">
</a></span></td><td valign="top" width="10%">&nbsp;</td></tr></tbody></table></div></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2878450">Rule of Silence: When a program has nothing surprising
to say, it should say nothing.</a></h3></div></div><p><a id="id2878450">One of Unix's oldest and most persistent design rules is that when a
program has nothing interesting or surprising to say, it should
<span class="emphasis"><em>shut up</em></span>.  Well-behaved Unix programs do their jobs
unobtrusively, with a minimum of fuss and bother.  Silence is
golden.</a></p><p><a id="id2878450">This &ldquo;silence is golden&rdquo; rule evolved originally
because Unix predates video displays.  On the slow printing terminals
of 1969, each line of unnecessary output was a serious drain on the
user's time.  That constraint is gone, but excellent reasons for
terseness remain.</a></p><div class="blockquote"><table class="blockquote" cellspacing="0" border="0" summary="Block quote" width="100%" cellpadding="0"><tbody><tr><td valign="top" width="10%">&nbsp;</td><td valign="top" width="80%"><p>I think that the terseness of Unix programs is a central feature
of the style.  When your program's output becomes another's input, it 
should be easy to pick out the needed bits.  And for people it is
a human-factors necessity &mdash; important information should not
be mixed in with verbosity about internal program behavior.  If all
displayed information is important, important information is easy to
find.</p></td><td valign="top" width="10%">&nbsp;</td></tr><tr><td align="right" valign="top" colspan="2">--<span class="attribution">
<span class="author">Ken Arnold</span>
<a class="indexterm" id="id2878493">
</a></span></td><td valign="top" width="10%">&nbsp;</td></tr></tbody></table></div><p><a id="id2878450">Well-designed programs treat the user's attention and
concentration as a precious and limited resource, only to be claimed
when necessary.</a></p><p><a id="id2878450">(We'll discuss the Rule of Silence and the reasons for it in
more detail at the end of </a><a href="http://www.faqs.org/docs/artu/interfacechapter.html" title="Chapter&nbsp;11.&nbsp;Interfaces">Chapter&nbsp;11</a>.)</p></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2878538">Rule of Repair: Repair what you can &mdash; but when you
must fail, fail noisily and as soon as possible.</a></h3></div></div><p><a id="id2878538">Software should be
transparent</a><a class="indexterm" id="id2878548"> in the way that it fails, as well
as in normal operation.  It's best when software can cope with
unexpected conditions by adapting to them, but the worst kinds of bugs
are those in which the repair doesn't succeed and the problem quietly
causes corruption that doesn't show up until much later.</a></p><p><a class="indexterm" id="id2878548">Therefore, write your software to cope with incorrect inputs and
its own execution errors as gracefully as possible.  But when it
cannot, make it fail in a way that makes diagnosis of the problem as
easy as possible.</a></p><p><a class="indexterm" id="id2878548">Consider also Postel's Prescription:<sup>[</sup></a><sup><a href="http://www.faqs.org/docs/artu/ch01s06.html#ftn.id2878578" id="id2878578">10</a>]</sup>
&ldquo;Be liberal in what you accept, and conservative in what you
send&rdquo;. Postel was speaking of network service programs, but the
underlying idea is more general.  Well-designed programs cooperate
with other programs by making as much sense as they can from
ill-formed inputs; they either fail noisily or pass strictly clean and
correct data to the next program in the chain.</p><p>However, heed also this warning:</p><div class="blockquote"><table class="blockquote" cellspacing="0" border="0" summary="Block quote" width="100%" cellpadding="0"><tbody><tr><td valign="top" width="10%">&nbsp;</td><td valign="top" width="80%"><p>The original HTML documents recommended &ldquo;be generous in
what you accept&rdquo;, and it has bedeviled us ever since because
each browser accepts a different superset of the specifications.  It
is the <span class="emphasis"><em>specifications</em></span> that should be generous,
not their interpretation.</p></td><td valign="top" width="10%">&nbsp;</td></tr><tr><td align="right" valign="top" colspan="2">--<span class="attribution">
<span class="author">Doug McIlroy</span>
<a class="indexterm" id="id2878625">
</a></span></td><td valign="top" width="10%">&nbsp;</td></tr></tbody></table></div><p>McIlroy adjures us to <span class="emphasis"><em>design</em></span> for
generosity rather than compensating for inadequate standards with 
permissive implementations.  Otherwise, as he rightly points
out, it's all too easy to end up in tag soup.</p></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2878666">Rule of Economy: Programmer time is expensive; conserve it in 
preference to machine time.</a></h3></div></div><p><a id="id2878666">In the early minicomputer days of Unix, this was still a fairly
radical idea (machines were a great deal slower and more expensive
then). Nowadays, with every development shop and most users (apart
from the few modeling nuclear explosions or doing 3D movie
animation) awash in cheap machine cycles, it may seem too obvious
to need saying.</a></p><p><a id="id2878666">Somehow, though, practice doesn't seem to have quite caught up
with reality. If we took this maxim really seriously throughout
software development, most applications would be written in
higher-level languages like Perl, Tcl, Python, Java,
Lisp</a><a class="indexterm" id="id2878691"> and
even shell &mdash; languages that ease the programmer's burden by
doing their own memory management (see [</a><a href="http://www.faqs.org/docs/artu/apb.html#Ravenbrook" title="[Ravenbrook]">Ravenbrook</a>]).</p><p>And indeed this is happening within the Unix world, though
outside it most applications shops still seem stuck with the
old-school Unix strategy of coding in C<a class="indexterm" id="id2878714"> (or&nbsp;C++</a><a class="indexterm" id="id2878722">). Later in this book
we'll discuss this strategy and its tradeoffs in detail.</a></p><p><a class="indexterm" id="id2878722">One other obvious way to conserve programmer time is to teach
machines how to do more of the low-level work of programming. This
leads to...</a></p></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="id2878742">Rule of Generation: Avoid hand-hacking; write programs to write
programs when you can.</a></h3></div></div><p><a id="id2878742">Human beings are notoriously bad at sweating the details.
Accordingly, any kind of hand-hacking of programs is a rich source of
delays and errors. The simpler and more abstracted your program
specification can be, the more likely it is that the human designer
will have gotten it right. Generated code (at
<span class="emphasis"><em>every</em></span> level) is almost always cheaper and more
reliable than hand-hacked.</a></p><p><a id="id2878742">We all know this is true (it's why we have compilers and
interpreters, after all) but we often don't think about the
implications. High-level-language code that's repetitive and
mind-numbing for humans to write is just as productive a target for a
code generator as machine code. It pays to use code generators when
they can raise the level of abstraction &mdash; that is, when the
specification language for the generator is simpler than the generated
code, and the code doesn't have to be hand-hacked afterwards.</a></p><p><a id="id2878742">In the Unix tradition, code generators are heavily used to
automate error-prone detail work. Parser/lexer generators are the
classic examples; makefile generators and GUI interface builders are
newer ones.</a></p><p><a id="id2878742">(We cover these techniques in </a><a href="http://www.faqs.org/docs/artu/generationchapter.html" title="Chapter&nbsp;9.&nbsp;Generation">Chapter&nbsp;9</a>.)</p></div><div class="sect2"><div class="titlepage"><div><h3 class="title"><a id="rule_of_optimization">Rule of Optimization:
Prototype before polishing. Get it working before you optimize
it.</a></h3></div></div><p><a class="indexterm" id="id2878810">The most basic argument for prototyping first is Kernighan &amp;
Plauger's;</a><a class="indexterm" id="id2878826"> &ldquo;90% of the functionality delivered now
is better than 100% of it delivered never&rdquo;. Prototyping first
may help keep you from investing far too much time for marginal
gains.</a></p><p><a class="indexterm" id="id2878844">For slightly different reasons, Donald
Knuth</a><a class="indexterm" id="id2878856">
(author of <em>The Art Of Computer Programming</em>, one
of the field's few true classics) popularized the observation that
&ldquo;Premature optimization is the root of all
evil&rdquo;.<sup>[</sup></a><sup><a href="http://www.faqs.org/docs/artu/ch01s06.html#ftn.id2878872" id="id2878872">11</a>]</sup>
And he was right.</p><p>Rushing to optimize before the bottlenecks are known may be the
only error to have ruined more designs than feature creep. From
tortured code to incomprehensible data layouts, the results of
obsessing about speed or memory or disk usage at the expense of
transparency and simplicity are everywhere. They spawn innumerable
bugs and cost millions of man-hours &mdash; often, just to get marginal
gains in the use of some resource much less expensive than
debugging time.</p><p>Disturbingly often, premature local optimization actually
hinders global optimization (and hence reduces overall performance).
A prematurely optimized portion of a&nbsp;design frequently interferes with
changes that would have much higher payoffs across the whole design,
so you end up with both inferior performance and excessively complex
code.</p><p>In the Unix world there is a long-established and very explicit
tradition (exemplified by Rob Pike's<a class="indexterm" id="id2878916"> comments above and Ken
Thompson's</a><a class="indexterm" id="id2878924">
maxim about brute force) that says: <span class="emphasis"><em>Prototype, then
polish. Get it working before you optimize it</em></span>. Or: Make it
work first, then make it work fast. &lsquo;Extreme programming' guru
Kent Beck</a><a class="indexterm" id="id2878940">,
operating in a different culture, has usefully amplified this to:
&ldquo;Make it run, then make it right, then make it
fast&rdquo;.</a></p><p><a class="indexterm" id="id2878940">The thrust of all these quotes is the same: get your design
right with an un-optimized, slow, memory-intensive implementation
before you try to tune. Then, tune systematically, looking for the
places where you can buy big performance wins with the smallest
possible increases in local complexity.</a></p><div class="blockquote"><table class="blockquote" cellspacing="0" border="0" summary="Block quote" width="100%" cellpadding="0"><tbody><tr><td valign="top" width="10%">&nbsp;</td><td valign="top" width="80%"><p>Prototyping is important 