??xml version="1.0" encoding="utf-8" standalone="yes"?>中文在线а√天堂官网,av剧情在线观看,国产剧情一区二区在线观看http://www.aygfsteel.com/libin2722/category/43606.html虚其心,可解天下之问Q专其心Q可d下之学;静其心,可?zhn)天下之理Q恒其心Q可成天下之业?/description>zh-cnSat, 16 Jan 2010 06:27:50 GMTSat, 16 Jan 2010 06:27:50 GMT60Flex 开发入?/title><link>http://www.aygfsteel.com/libin2722/articles/309766.html</link><dc:creator>C物</dc:creator><author>C物</author><pubDate>Sat, 16 Jan 2010 03:51:00 GMT</pubDate><guid>http://www.aygfsteel.com/libin2722/articles/309766.html</guid><wfw:comment>http://www.aygfsteel.com/libin2722/comments/309766.html</wfw:comment><comments>http://www.aygfsteel.com/libin2722/articles/309766.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/libin2722/comments/commentRss/309766.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/libin2722/services/trackbacks/309766.html</trackback:ping><description><![CDATA[ <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr valign="top"> <td width="100%"> <h1>Flex 开发入?/h1> <img class="display-img" height="6" alt="" src="http://www.ibm.com/i/c.gif" width="1" /> </td> <td class="no-print" width="192"> <img height="18" alt="developerWorks" src="http://www.ibm.com/developerworks/i/dw.gif" width="192" /> </td> </tr> </tbody> </table> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr valign="top"> <td width="10"> <img height="1" alt="" src="http://www.ibm.com/i/c.gif" width="10" /> </td> <td width="100%"> <table class="no-print" cellspacing="0" cellpadding="0" width="160" align="right" border="0"> <tbody> <tr> <td width="10"> <img height="1" alt="" src="http://www.ibm.com/i/c.gif" width="10" /> </td> <td> <table cellspacing="0" cellpadding="0" width="150" border="0"> <tbody> <tr> <td class="v14-header-1-small">文档选项</td> </tr> </tbody> </table> <table class="v14-gray-table-border" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td class="no-padding" width="150"> <table cellspacing="0" cellpadding="0" width="143" border="0"> <script language="JavaScript" type="text/javascript"> <!-- document.write('<tr valign="top"><td width="8"><img src="http://www.ibm.com/i/c.gif" width="8" height="1" alt=""/></td><td width="16"><img alt="打印机的版面设|成横向打印模式" height="16" src="http://www.ibm.com/i/v14/icons/printer.gif" width="16" vspace="3" /></td><td width="122"><p><b><a class="smallplainlink" href="javascript:print()">打印本页</a></b></p></td></tr>'); //--> </script> <tbody> <tr valign="top"> <td width="8"> <img height="1" alt="" src="http://www.ibm.com/i/c.gif" width="8" /> </td> <td width="16"> <img height="16" alt="打印机的版面设|成横向打印模式" src="http://www.ibm.com/i/v14/icons/printer.gif" width="16" vspace="3" /> </td> <td width="122"> <p> <b> <a class="smallplainlink" href="javascript:print()">打印本页</a> </b> </p> </td> </tr> <noscript> </noscript> <form name="email" action="https://www.ibm.com/developerworks/secure/email-it.jsp"> <input type="hidden" value="本文介绍 Flex 开发的基础知识Q包括如何搭建开发环境,如何调试Q以?qing)如何徏立和部v单的 Flex 目。通过本文的学?fn),可以为(zhn)来深入地学?Flex 打下良好的基? name="body" /> <input type="hidden" value="Flex 开发入? name="subject" /> <input type="hidden" value="cn" name="lang" /> <script language="JavaScript" type="text/javascript"> <!-- document.write('<tr valign="top"><td width="8"><img src="http://www.ibm.com/i/c.gif" width="8" height="1" alt=""/></td><td width="16"><img src="http://www.ibm.com/i/v14/icons/em.gif" height="16" width="16" vspace="3" alt="此作为电(sh)子邮件发? /></td><td width="122"><p><a class="smallplainlink" href="javascript:document.email.submit();"><b>此作为电(sh)子邮件发?/b></a></p></td></tr>'); //--> </script> <tr valign="top"> <td width="8"> <img height="1" alt="" src="http://www.ibm.com/i/c.gif" width="8" /> </td> <td width="16"> <img height="16" alt="此作为电(sh)子邮件发? src="http://www.ibm.com/i/v14/icons/em.gif" width="16" vspace="3" /> </td> <td width="122"> <p> <a class="smallplainlink" href="javascript:document.email.submit();"> <b> <font color="#5c81a7" size="2">此作为电(sh)子邮件发?/font> </b> </a> </p> </td> </tr> <noscript> </noscript> </form> </tbody> </table> </td> </tr> </tbody> </table> <!--START RESERVED FOR FUTURE USE INCLUDE FILES--> <!-- this content will be automatically generated across all content areas --> <!--END RESERVED FOR FUTURE USE INCLUDE FILES--> <br /> </td> </tr> </tbody> </table> <p>U别Q?初</p> <p> <a > <font color="#5c81a7">??/font> </a>(<a href="mailto:qlcdl@cn.ibm.com?subject=Flex 开发入?><font color="#5c81a7">qlcdl@cn.ibm.com</font></a>), 软g工程? IBM 软g开发中?br /></p> <p>2009 q?1 ?07 ?/p> <blockquote>本文介绍 Flex 开发的基础知识Q包括如何搭建开发环境,如何调试Q以?qing)如何徏立和部v单的 Flex 目。通过本文的学?fn),可以为(zhn)来深入地学?Flex 打下良好的基?/blockquote> <!--START RESERVED FOR FUTURE USE INCLUDE FILES--> <!-- include java script once we verify teams wants to use this and it will work on dbcs and cyrillic characters --> <!--END RESERVED FOR FUTURE USE INCLUDE FILES--> <p> <a name="N1004B"> <span id="wmqeeuq" class="atitle">开始之?/span> </a> </p> <p>Flex 作ؓ(f)?Internet 应用QRIAQ时代的新技术代表,自从 2007 q?Adobe 公司其开源以来,Flex ׃前所未有的速度在成ѝ很多公司,包括 IBM 都纷U加入了 Flex 开发的阵营当中。很多开发h员也按捺不住 Flex 的“诱惑”而准备从?Flex 开发。本文主要讲q?Flex 开发的基础知识Q主要是关于开发环境的搭徏Q以?qing)介l简单的 Flex 目创徏、编码、调试以?qing)部|的q程?Flex ~程的基本知识。通过本文的学?fn),?zhn)将?x)学习(fn)如何搭?Flex 基本的开发环境以?qing)开发、调试和部v斚w的基知识。ؓ(f)(zhn)以后深入系l的学习(fn) Flex 打下良好的基?/p> <p>要学?fn)本文,?zhn)需要有一定的 Web ~程l验?Eclipse FireFox 使用l验?/p> <p> <a name="N10056"> <span id="wmqeeuq" class="smalltitle"> <strong> <font face="Arial">代码CZ和安装要?/font> </strong> </span> </a> </p> <p>本文所有示例均?Windows XP SP3 pȝ中测试完成。?zhn)需要一台能畅q行 Windows XP pȝ的机器,除此之外(zhn)还需要一些工h能试用本文中的代码。所有这些工具都可以免费下蝲Q参?<a ><font color="#5c81a7">参考资?/font></a>Q:(x)</p> <ul> <li>Java SDK 1.5 或更高版? </li> <li>Tomcat 6.0 或更高版? </li> <li>Eclipse 3.3 或更高版? </li> <li>Flex Builder 3.0 或更高版? </li> <li>FireFox2.0 或更高版?</li> </ul> <br /> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td> <img height="1" alt="" src="http://www.ibm.com/i/v14/rules/blue_rule.gif" width="100%" /> <br /> <img height="6" alt="" src="http://www.ibm.com/i/c.gif" width="8" border="0" /> </td> </tr> </tbody> </table> <table class="no-print" cellspacing="0" cellpadding="0" align="right"> <tbody> <tr align="right"> <td> <img height="4" alt="" src="http://www.ibm.com/i/c.gif" width="100%" /> <br /> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td valign="center"> <img height="16" alt="" src="http://www.ibm.com/i/v14/icons/u_bold.gif" width="16" border="0" /> <br /> </td> <td valign="top" align="right"> <a class="fbox" > <b> <font color="#5c81a7">回页?/font> </b> </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br /> <br /> <p> <a name="N10075"> <span id="wmqeeuq" class="atitle">安装配置开发环?/span> </a> </p> <p>接下来我们便q不?qing)待的开始吧Q首先搭建我们的开发环境,Z减少因ؓ(f)环境不一致而引L(fng)问题Q徏议读者用与本文相同的Y件版本:(x)</p> <ul> <li> <a > <font color="#5c81a7">下蝲</font> </a>q安?JDK( 本文使用版本?Sun JDK 6) Q? </li> <li> <a > <font color="#5c81a7">下蝲</font> </a>q解?Eclipse( 本文使用版本?Eclipse Ganymede J2EE 版本Q含 WTP 插g ); </li> <li> <a > <font color="#5c81a7">下蝲</font> </a>q安?Flex Builder Eclipse 插g?( 本文使用?Flex Builder 版本?3.0.1); </li> <li> <a > <font color="#5c81a7">下蝲</font> </a>q安?Tomcat( 本文使用版本?Tomcat6.0.18); </li> <li> <a > <font color="#5c81a7">下蝲</font> </a>q安?FireFox( ׃ Flex3.0 和一些插件的兼容性问题,本文使用 FireFox2.0.0.17) </li> </ul> <table cellspacing="0" cellpadding="0" width="40%" align="right" border="0"> <tbody> <tr> <td width="10"> <img height="1" alt="" src="http://www.ibm.com/i/c.gif" width="10" /> </td> <td> <table cellspacing="0" cellpadding="5" width="100%" border="1"> <tbody> <tr> <td bgcolor="#eeeeee"> <a name="N100A5"> <b>提C?/b> </a> <br /> <p>Flex Builder 提供两个版本Q一个是 All in one 的版本,另外一个是 Eclipse 的插件版QAll in one 的版本内|了一?Eclipse 的基本核心,插g不全。所以我们采用单独下?Eclipse 和安?Flex Builder 插g版的方式。另外在安装q程中不要安?FlashPlayer ?IE 或?FireFox 上。我们在接下来的步骤中将单独安装 debug 版本?Flash Player ?/p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p>大家知道 Flex 代码~译后是一?SWF 文gQ运行在 Flash Player 中,要想看到 SWF 文g在运行时输出的一些调试信息是比较困难的。所以在安装好基本的软g之后Q我们要安装一些便于我们调?Flex ?FireFox 插gQ?/p> <p> <a > <font color="#5c81a7">下蝲</font> </a>q安?debug 版本?FireFox Flash Player 插g ( 本文使用的版本ؓ(f) Flash Player10)</p> <p>打开 FireFoxQ到 FireFox ?<a ><font color="#5c81a7">扩展lg站点</font></a> 上搜索ƈ安装 HttpFoxQFlashTracerQCache Status 三个插gQ如?1 所C?/p> <br /> <a name="N100C1"> <b>?1Q开发调试需要的 FireFox 插g</b> </a> <br /> <img alt="?1Q开发调试需要的 FireFox 插g" src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image001.jpg" /> <br /> <table cellspacing="0" cellpadding="0" width="40%" align="right" border="0"> <tbody> <tr> <td width="10"> <img height="1" alt="" src="http://www.ibm.com/i/c.gif" width="10" /> </td> <td> <table cellspacing="0" cellpadding="5" width="100%" border="1"> <tbody> <tr> <td bgcolor="#eeeeee"> <a name="N100CE"> <b>提C?/b> </a> <br /> <p>?Debug 版本?Flash player ?FlashTracer 插g完成好之后,我们发现 FlashTracer q不能正常的昄?trace 语句输出的调试信息。ؓ(f)了其能够工作,q需要先点击?1 中的 FlashTracer 讄按钮来设|日志文件的输出路径。ƈ且输出的日志文g路径对于 Windows XP 来说必须?C:\Documents and Settings\Administrator\Application Data\Macromedia\Flash Player\Logs\flashlog.txt ?/p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p>在安装了 Debug 版本?Flash Player 之后QFlash Tracer 能显C?zhn)在程序中?trace() 语句输出的调试信息,HttpFox 插g不仅能查?HTTP 通信的过E和数据Q还能看到哪些内Ҏ(gu)?Cache 里面d的。另外,Cache Status 插g可以让我们方便的理~存。在 Flex 开发过E中Q往往需要先清除掉缓存中的内容,才能看到新改动的效果?/p> <p>接下来我们打开 Flex Builder, 在菜?b>Window>Preferences>Server>Runtime Environment</b>中设|我们的 Tomcat6 以及(qing)在菜?b>Window>Preferences>General>Web Browser</b>中设|浏览器为外部浏览器 FireFoxQ如?2 和图 3 所C:(x)</p> <br /> <a name="N100E5"> <b>?2Q配|?Tomcat</b> </a> <br /> <img alt="?2Q配|?Tomcat" src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image002.jpg" /> <br /> <br /> <a name="N100F2"> <b>?3Q设|默认浏览器</b> </a> <br /> <img alt="?3Q设|默认浏览器" src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image003.jpg" /> <br /> <p>到此为止Q我们的开发环境算是彻底搭建完毕,可以看出q个q程q不是特别单。别急,先苦后甜Q小憩一下,让我们来享受一?Flex 开发带来的乐趣吧!</p> <br /> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td> <img height="1" alt="" src="http://www.ibm.com/i/v14/rules/blue_rule.gif" width="100%" /> <br /> <img height="6" alt="" src="http://www.ibm.com/i/c.gif" width="8" border="0" /> </td> </tr> </tbody> </table> <table class="no-print" cellspacing="0" cellpadding="0" align="right"> <tbody> <tr align="right"> <td> <img height="4" alt="" src="http://www.ibm.com/i/c.gif" width="100%" /> <br /> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td valign="center"> <img height="16" alt="" src="http://www.ibm.com/i/v14/icons/u_bold.gif" width="16" border="0" /> <br /> </td> <td valign="top" align="right"> <a class="fbox" > <b> <font color="#5c81a7">回页?/font> </b> </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br /> <br /> <p> <a name="N10100"> <span id="wmqeeuq" class="atitle">Flex ?Hello World Q?/span> </a> </p> <p> <a name="N10105"> <span id="wmqeeuq" class="smalltitle"> <strong> <font face="Arial">创徏目</font> </strong> </span> </a> </p> <p>打开 Flex Builder, 如图 4 所C,新徏一?Flex 目Q?/p> <br /> <a name="N10110"> <b>?4Q新?Flex 目</b> </a> <br /> <img alt="?4Q新?Flex 目" src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image004.jpg" /> <br /> <p>在图 5 所C|页面中Q我们选择目cd?Web applicationQ关?AIR cd应用的基知识可参?developerWorks 上的另一文?a ><font color="#5c81a7">《?Adobe AIR ?Dojo 开发基?Ajax ?Mashup 应用?/font></a>?Application server type 我们?J2EE ZQƈ且不要钩?Use remote object access service, 关于q些高内容Q我们将在后l的文章中陆l讨论。最后我们?Eclipse Ganymede J2EE 版本内置?WTP(Web Tools Platform) 来创Z个后端?Java 前端使用 Flex ?RIA 目。在默认讄下,src ?Java 代码的源代码文g夏V?/p> <br /> <a name="N10124"> <b>?5Q设|?Flex 目</b> </a> <br /> <img alt="?5Q设|?Flex 目" src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image005.jpg" /> <br /> <p>在后l的讄面中,我们配置目q行时的 J2EE server 为我们在安装配置开发环境部分中配置?Tomcat6 如图 6 所C:(x)</p> <br /> <a name="N10134"> <b>?6Q配|运行时 J2EE Server</b> </a> <br /> <img alt="?6Q配|运行时 J2EE Server" src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image006.jpg" /> <br /> <p>点击 NextQ在下一个页面中一切都按照默认讄卛_。如?7 所C,Main source folder 是设|默认的 flex 代码 ( 包括 mxml ?Action script) 的源文g夹,Main application file 是项目默认的d用?Out folder URL 是项目运行在我们配置?Tomcat 上时?URL.</p> <br /> <a name="N10144"> <b>?7Q其他属性设|?/b> </a> <br /> <img alt="?7Q其他属性设|? src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image007.jpg" /> <br /> <p>一切完成之后,我们来看看项目的l成l构Q如?8 所C:(x)flex_src 中是默认?flex 源码位置Qflex_libs 则是存放 flex 其他W三方包的默认\径。类g web 应用?lib 文g夏V?src ?java 代码位置?WebContent 文g夹的l构和普通由 WTP 建立?Web Project 的结构完全相同。在默认的输\?bin-debug 文g夹中Q我们可以看?Flex builder 自动生成?FlexSample.mxml 文g已经被自动编译成 FlexSample.swf 文g?/p> <br /> <a name="N10154"> <b>?8QFlex 目l构</b> </a> <br /> <img alt="?8QFlex 目l构" src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image008.jpg" /> <br /> <p>接下来,我们在新创徏的项目上增加一点内容ƈ让它q行hQ双?FlexSample.mxml, 在其中添加一个最基本?Flex lg :Label, q且在该应用初始化的时候调?init() Ҏ(gu)。我们在 init() Ҏ(gu)中用 trace() 语句输出调试信息。代码如下清?1 所C:(x)</p> <br /> <a name="N10165"> <b>清单 1QFlexSample.mxml</b> </a> <br /> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td class="code-outline"> <pre class="displaycode"> <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()"> <mx:Script> <![CDATA[ private function init():void { var i:int = 0; i++; trace("i="+i); } ]]> </mx:Script> <mx:Label text="Hello World!" /> </mx:Application> </pre> </td> </tr> </tbody> </table> <br /> <p> <a name="N1016C"> <span id="wmqeeuq" class="smalltitle"> <strong> <font face="Arial">q行、调试以?qing)部|?/font> </strong> </span> </a> </p> <p>现在Q终于到了让我们的项目运行的时候了 ! 右键点击目 ->Run As->Run On Server 如图 9 所C:(x)接下来的几个面选择默认卛_Q这时大家我们可以看到项目会(x)被部|到我们配置?Tomcat6 上去。ƈ?Flex Builder ?x)自动打开一个我们刚才配|的外部 FireFox H口?/p> <br /> <a name="N10177"> <b>?9Q运行项?/b> </a> <br /> <img alt="?9Q运行项? src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image009.jpg" /> <br /> <p>但可能o(h)(zhn)遗憄?Flex Builder 自动打开?FireFox H口打开?URL: http://localhost:8080/FlexSample/ 却什么也没有。别着急,q剩下最后一步:(x)</p> <p>如图 10 所C:(x)右键点击我们要运行的 FlexSample.mxml > Run As > Flex Application</p> <br /> <a name="N1018A"> <b>?10Q运?mxml</b> </a> <br /> <img alt="?10Q运?mxml" src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image010.jpg" /> <br /> <p>如果不出意外的话Q?zhn)应该会(x)看C面的界面QFlash Tracer 插g输出了我们用 trace() 语句输出?debug 信息Q标{ Hello World Q也被显C到了界面上。同P打开 FireFox ?HttpFox 插gQ我们也可以看到在运行时 FlexSample.swf 被蝲入?/p> <br /> <a name="N1019A"> <b>?11Q运行后的界?/b> </a> <br /> <img alt="?11Q运行后的界? src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image011.jpg" /> <br /> <p>如果我们希望像调?Java 代码那样Q在q行时观察变量的值怎么办呢Q首先我们像?Java 代码中设|断点一L(fng)我们?Action Script 代码增加断点。如?12 所C:(x)</p> <br /> <a name="N101AA"> <b>?12Q在 Action Script 代码中设|断?/b> </a> <br /> <img alt="?12Q在 Action Script 代码中设|断? src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image012.jpg" /> <br /> <p>然后选择我们?FlexSample.mxml 右键选择调试q行。如?13 所C:(x)</p> <br /> <a name="N101BA"> <b>?13Q调试方式运?flex</b> </a> <br /> <img alt="?13Q调试方式运?flex" src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image013.jpg" /> <br /> <p>然后我们随提C切换到 Flex 的调试视图,׃(x)看到我们可以?Java 调试模式那样L的调?Flex 代码。如?14 所C:(x)</p> <br /> <a name="N101CA"> <b>?14QFlex Builder 调试视图</b> </a> <br /> <img alt="?14QFlex Builder 调试视图" src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image014.jpg" /> <br /> <p>利用 WTPQ我们可以将目 export 成一个标准的 war file. 导出的 war 文g攑ֈ Tomcat ?webapps 目录或者其?web 服务器的相应目录下就可以当作一个标准的 web 应用来部|运行?/p> <p>到此为止Q我们应该庆一下我们已l迈入了 Flex 的大门了Q我们已l编译出了我们自q swf 文gQƈ且运行在服务器上了。熟(zhn)了q个开发过E之后,让我们乘胜前q,l合一个小例子学习(fn)一?Flex 的编E基知识吧!</p> <br /> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td> <img height="1" alt="" src="http://www.ibm.com/i/v14/rules/blue_rule.gif" width="100%" /> <br /> <img height="6" alt="" src="http://www.ibm.com/i/c.gif" width="8" border="0" /> </td> </tr> </tbody> </table> <table class="no-print" cellspacing="0" cellpadding="0" align="right"> <tbody> <tr align="right"> <td> <img height="4" alt="" src="http://www.ibm.com/i/c.gif" width="100%" /> <br /> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td valign="center"> <img height="16" alt="" src="http://www.ibm.com/i/v14/icons/u_bold.gif" width="16" border="0" /> <br /> </td> <td valign="top" align="right"> <a class="fbox" > <b> <font color="#5c81a7">回页?/font> </b> </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br /> <br /> <p> <a name="N101DB"> <span id="wmqeeuq" class="atitle">Flex ~程基础</span> </a> </p> <p> <a name="N101E0"> <span id="wmqeeuq" class="smalltitle"> <strong> <font face="Arial">面向对象的编E?/font> </strong> </span> </a> </p> <p>在上?Hello World 的例子中我们可以看出Q就像在 HTML 中嵌?JavaScript 那样Q我们可以在 mxml 里面嵌入 Action Script 代码来实C务逻辑。没错!如果(zhn)把 Flex ?mxml ?Action Script 的关pȝ解ؓ(f) Html ?JavaScript 的关p,(zhn)会(x)忽然发现(zhn)对 Flex 变的如此熟?zhn)Q?/p> <p>Action Script 语言是面向对象的脚本语言Q它q编写方式都?JavaScript 非常的相伹{除了可以嵌套在 mxml 里面之外Q它q可以像 JavaScript 写在单独?.js 文g里面那样写在单独?.as 文g里面Q然后在 mxml 里面引入它?/p> <p>下面我们新徏一?Action Script 的类 J2eeServer.as 如清?2 所C:(x)</p> <br /> <a name="N101F2"> <b>清单 2QJ2eeServer.as</b> </a> <br /> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td class="code-outline"> <pre class="displaycode"> package com.ibm.flex { import flash.events.EventDispatcher; import mx.rpc.AsyncToken; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.rpc.http.HTTPService; public class J2eeServer extends EventDispatcher { public function J2eeServer() { } public function sendRequest(locale:String):void { var httpObject:HTTPService = new HTTPService(); httpObject.resultFormat = "text"; httpObject.url = "http://localhost:8080/FlexSample/SampleServlet?locale="+locale; var responder:mx.rpc.Responder = new mx.rpc.Responder(onSuccess, onFault); var call:AsyncToken = httpObject.send(); call.addResponder(responder); } private function onSuccess(event:ResultEvent):void { this.dispatchEvent(event); } private function onFault(event:FaultEvent):void { trace("communication failed!"); this.dispatchEvent(event); } } } </pre> </td> </tr> </tbody> </table> <br /> <p>在这个类定义里面Q熟(zhn)?Java 的开发h员可以看出其~码规范?Java 非常cM。在其中我们定义了一?sendRequest() Ҏ(gu)Q?使用 HTTPService 对象发v一?http ?get h , q且对于不同的返回结果我们定义了 onSuccess() ?onFault() 两个Ҏ(gu)d理。在q两个结果处理方法中Q我们将事g dispatch 出去?/p> <p> <a name="N101FC"> <span id="wmqeeuq" class="smalltitle"> <strong> <font face="Arial">?Servlet 集成</font> </strong> </span> </a> </p> <p>?J2eeServer.as 中,我们通过 Action Script 发出 http hQ现在我们定义一个服务器端的 servlet 来处理该h。如清单 3 所C:(x)</p> <br /> <a name="N10208"> <b>清单 3QSampleServlet.java</b> </a> <br /> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td class="code-outline"> <pre class="displaycode"> package com.ibm.sample; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class SampleServlet extends HttpServlet { private static final long serialVersionUID = 1L; public SampleServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String locale = request.getParameter("locale"); response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("The locale you selected is " + locale); } } </pre> </td> </tr> </tbody> </table> <br /> <p>和普?web 应用一样配|?web.xml, 如清?4</p> <br /> <a name="N10215"> <b>清单 4Qweb.xml</b> </a> <br /> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td class="code-outline"> <pre class="displaycode"> <?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <display-name>FlexSample</display-name> <servlet> <display-name>SampleServlet</display-name> <servlet-name>SampleServlet</servlet-name> <servlet-class>com.ibm.sample.SampleServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>SampleServlet</servlet-name> <url-pattern>/SampleServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>FlexSample.html</welcome-file> </welcome-file-list> </web-app> </pre> </td> </tr> </tbody> </table> <br /> <p> <a name="N1021C"> <span id="wmqeeuq" class="smalltitle"> <strong> <font face="Arial">事g驱动与数据绑?/font> </strong> </span> </a> </p> <p>?J2eeServer.as 中我们依E可以看出 Flex 事g驱动的媄子。的,Flex 的业务流E大多是靠事件来驱动的。某一个方法结束后Qdispatch 出去一个事件。事件的监听者监听到q个事g后就?x)采取相应的动作来处理事件。如清单 5 所C:(x)我们?init() Ҏ(gu)中进行了事gl定Q绑定了两个监听Ҏ(gu) successHandler () ?errorHandler () ?J2eeServer 上。当 J2eeServer 完成和服务器?servlet 通信 dispatch 出相应的事g后,两个监听Ҏ(gu)便会(x)监听到相应的事gq进行处理?/p> <p>Flex 的另外一个重要的特点是支持数据l定Q在另一文?a ><font color="#5c81a7">《?Eclipse ?JavaFX 开?Mashup 应用?/font></a>中我们曾介绍?JavaFx 的数据绑定特性,同样 Flex 也支持数据绑定。当数据源被l定到另外一个对象的某属性上Ӟ数据源的数据如果发生变化Q开发h员不需要写额外的代码该对象的属性值就可以相应的变化。如清单 5 中所C:(x)如果要进行数据绑定,则要先定义一个可l定的数据源Q例如我们在变量<code><span id="wmqeeuq" class="boldcode"><strong><font face="Lucida Console" size="2">private</font></strong></span></code><code></code><code><span id="wmqeeuq" class="boldcode"><strong><font face="Lucida Console" size="2">var</font></strong></span></code><code>serverResponse:String =</code><code><span id="wmqeeuq" class="boldcode"><strong><font face="Lucida Console" size="2">""</font></strong></span></code><code>;</code>的上面设|?[Bindable] 属性,表示其ؓ(f)可绑定变量。然后我们在 resultLable 中用花括号 {<code>serverResponse</code>} 变?code>serverResponse</code>l定?resultLable ?text 属性上?/p> <br /> <a name="N10258"> <b>清单 5QFlexSample.mxml</b> </a> <br /> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td class="code-outline"> <pre class="displaycode"> <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; import com.ibm.flex.J2eeServer; import mx.collections.ArrayCollection; private var jserver:J2eeServer = new J2eeServer(); //可绑定变? [Bindable] private var serverResponse:String = ""; //可绑定变? [Bindable] private var locales:ArrayCollection = new ArrayCollection( [ {label:"en_us", data:"en_us"}, {label:"zh_cn", data:"zh_cn"}]); private function init():void { //事gl定 jserver.addEventListener(ResultEvent.RESULT, successHandler); jserver.addEventListener(FaultEvent.FAULT, errorHandler); } private function localeComboxChangeHandler(event:Event):void { jserver.sendRequest(localeCombox.selectedItem.data); } private function successHandler(event:ResultEvent):void { serverResponse = event.result.toString(); trace(event.result); } private function errorHandler(event:FaultEvent):void { serverResponse = event.message.toString(); trace(event.message); } ]]> </mx:Script> <mx:VBox> <mx:Label text="Select your locale:" /> <mx:ComboBox id="localeCombox" width="160" dataProvider="{locales}" change="localeComboxChangeHandler(event)"/> <mx:Label id="resultLabel" text="The response from server is: {serverResponse}" /> </mx:VBox> </mx:Application> </pre> </td> </tr> </tbody> </table> <br /> <p>最l项目的文gl构如图 15 所C:(x)</p> <br /> <a name="N10264"> <b>?15Q项目文件结构图</b> </a> <br /> <img alt="?15Q项目文件结构图" src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image015.jpg" /> <br /> <p>q行目Q我们可以看到当我们改变下拉框的值的时候,?x)触?localeComboxChangeHandler() 函数调用 J2eeServer ?sendRequest() Ҏ(gu)选择?locale 值发送给服务器端?servletQƈ且在l果q回后,从服务器端得到?response 昄?resultLable 上。如?16 所C:(x)</p> <br /> <a name="N10274"> <b>?16Q项目运行结?/b> </a> <br /> <img alt="?16Q项目运行结? src="http://www.ibm.com/developerworks/cn/web/wa-lo-flexdev/image016.jpg" /> <br /> <br /> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td> <img height="1" alt="" src="http://www.ibm.com/i/v14/rules/blue_rule.gif" width="100%" /> <br /> <img height="6" alt="" src="http://www.ibm.com/i/c.gif" width="8" border="0" /> </td> </tr> </tbody> </table> <table class="no-print" cellspacing="0" cellpadding="0" align="right"> <tbody> <tr align="right"> <td> <img height="4" alt="" src="http://www.ibm.com/i/c.gif" width="100%" /> <br /> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td valign="center"> <img height="16" alt="" src="http://www.ibm.com/i/v14/icons/u_bold.gif" width="16" border="0" /> <br /> </td> <td valign="top" align="right"> <a class="fbox" > <b> <font color="#5c81a7">回页?/font> </b> </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br /> <br /> <p> <a name="N1027F"> <span id="wmqeeuq" class="atitle">l束?/span> </a> </p> <p>Flex 作ؓ(f) RIA 的新技术,对传l?web 开发技术有l承也有发展。这文作ؓ(f)入门文,主要作用是帮助大家掌?Flex 的开发环境、开发方式、开发调试部|的程以及(qing) Flex 的基本编E知识。但 Flex 除了国际化、Unit 试、Ant ~译{传l问题之外,作ؓ(f)新技?Flex q有很多不同以往的地方,比如模块开发,RSL(Runtime Shared Libraries), Shared object、和 JavaScript 交互以及(qing)它的 MVC 框架 cairngormQ远E调用和消息传递框?BlazeDS {。所有这些问题都是值得我们q行后箋讨论的?/p> <p> <a name="N10287"> <span id="wmqeeuq" class="smalltitle"> <strong> <font face="Arial">致谢</font> </strong> </span> </a> </p> <p>在本文完成之际,特别感谢 IBM 中国软g开发中?IM 开发团队我的同事们在工作和学习(fn)中给我的巨大帮助Q?/p> <br /> <br /> <p> <a name="resources"> <span id="wmqeeuq" class="atitle">参考资?</span> </a> </p> <b>学习(fn)</b> <br /> <ul> <li>?a ><font color="#5c81a7">Flex 3 Developer's Guide</font></a>”:(x)很好?Flex 基础知识入门材料?<br /><br /></li> <li>?a ><font color="#5c81a7">Flex Developer Center</font></a>”:(x)针对具体开发场景的大量CZ代码和文章?<br /><br /></li> <li>?a ><font color="#5c81a7">Flex Ant Tasks</font></a>”:(x)介绍了如何结?Ant 工具来编?Flex?<br /><br /></li> <li>?a ><font color="#5c81a7">Flex RSL</font></a>”:(x)对Flex RSL开发的各方面进行详l介l的官方文档?<br /><br /></li> <li>?a ><font color="#5c81a7">集成 Flex ?Ajax 应用E序</font></a>”(developerWorksQ?008 q?7 月)Q阅d本文后,(zhn)将能够利用通过 Flash 资源获得的丰富功能?br /><br /></li> <li>?a ><font color="#5c81a7">使用 Flex SDK 实现一?Facebook 相册</font></a>”(developerWorksQ?008 q?12 月)Q在本篇教程中,在 Adobe Flex 中开发一?Facebook 应用E序Q它可以以灯片的Ş式显C用L(fng) Facebook 相册?br /><br /></li> <li>?a ><font color="#5c81a7">Fluint 的官方站?/font></a>”:(x)Fluint ?Flex Unit Test 的框?Flex Unit 的升U版本?<br /><br /></li> <li>?a ><font color="#5c81a7">Cairngorm 框架?Adobe 官方站点</font></a>”:(x)Cairngorm ?Flex 开发最著名和最成熟的一?MVC 框架?<br /><br /></li> <li>?a ><font color="#5c81a7">BlazeDS 框架的开源站?/font></a>”:(x)BlazeDS ?Adobe 的一个开源项目。基于服务器?Java q程调用QremotingQ和 Web 消息传递(messagingQ技术,它能够得后台的 Java 应用E序和运行在览器上?Flex 应用E序?AIR 应用E序怺通信?<br /><br /></li> </ul> <br /> <b>获得产品和技?/b> <br /> <ul> <li> <a > <font color="#5c81a7">下蝲</font> </a>JRE ?JDK?<br /><br /></li> <li> <a > <font color="#5c81a7">下蝲</font> </a>Eclipss Ganymede?<br /><br /></li> <li> <a > <font color="#5c81a7">下蝲</font> </a>Flex Builder Eclipse 插g版?<br /><br /></li> <li> <a > <font color="#5c81a7">下蝲</font> </a>Tomcat 6?<br /><br /></li> <li> <a > <font color="#5c81a7">下蝲</font> </a>FireFox 2.0?<br /><br /></li> <li> <a > <font color="#5c81a7">下蝲</font> </a>BDebug 版本?FireFox Flash Player 插g?</li> </ul> <br /> <br /> <p> <a name="author"> <span id="wmqeeuq" class="atitle">关于作?/span> </a> </p> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td colspan="3"> <img height="5" alt="" src="http://www.ibm.com/i/c.gif" width="100%" /> </td> </tr> <tr valign="top" align="left"> <td> <p> </p> </td> <td> <img height="5" alt="" src="http://www.ibm.com/i/c.gif" width="4" /> </td> <td width="100%"> <p>刘庆Q目前在 IBM 软g开发中心(IBM CSDLQIM 开发团队担d发工E师Q拥?IBM DB2 DBA 专业认证Q他?J2EE ?Web 开发领域有着多年开发经验,喜欢x新技术。他毕业于中国科技大学Qƈ拥有士学位?/p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <img src ="http://www.aygfsteel.com/libin2722/aggbug/309766.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/libin2722/" target="_blank">C物</a> 2010-01-16 11:51 <a href="http://www.aygfsteel.com/libin2722/articles/309766.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss> <footer> <div class="friendship-link"> <a href="http://www.aygfsteel.com/" title="狠狠久久亚洲欧美专区_中文字幕亚洲综合久久202_国产精品亚洲第五区在线_日本免费网站视频">狠狠久久亚洲欧美专区_中文字幕亚洲综合久久202_国产精品亚洲第五区在线_日本免费网站视频</a> </div> </footer> վ֩ģ壺 <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">Դ</a>| <a href="http://" target="_blank">ˮ</a>| <a href="http://" target="_blank">ʹ</a>| <a href="http://" target="_blank">˳</a>| <a href="http://" target="_blank">̴</a>| <a href="http://" target="_blank">˹</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">ͺ</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">dz</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">Ǩ</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">ʡ</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">ֺ</a>| <a href="http://" target="_blank">Ͼ</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">ʡ</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">Ϫ</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">ֶ</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">Դ</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">ɽ</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">˫</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">ͨ</a>| <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body>