<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="css/rss.xslt"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>WENSO</title><link>http://www.wenso.com/</link><description>专注于前端设计与开发</description><generator>RainbowSoft Studio Z-Blog 1.8 Walle Build 100427</generator><language>zh-CN</language><copyright>Copyright2007-2010 Wenso.Com. All Rights Reserved.var gaJsHost = ((&amp;quot;https:&amp;quot; == document.location.protocol) ? &amp;quot;https://ssl.&amp;quot; : &amp;quot;http://www.&amp;quot;);document.write(unescape(&amp;quot;%3Cscript src='&amp;quot; + gaJsHost + &amp;quot;google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E&amp;quot;));try {var pageTracker = _gat._getTracker(&amp;quot;UA-6588904-1&amp;quot;);pageTracker._trackPageview();} catch(err) {}</copyright><pubDate>Thu, 15 Dec 2011 10:15:38 +0800</pubDate><item><title>ie6border-bottom消失的问题解决</title><author>zy14200@hotmail.com (wenso)</author><link>http://www.wenso.com/post/281.html</link><pubDate>Thu, 15 Dec 2011 10:09:00 +0800</pubDate><guid>http://www.wenso.com/post/281.html</guid><description><![CDATA[<p>&nbsp;具体情况这样在一个div中放置了一个table，table设置了border样式，在ie6下table底下的border却是消失的，多么诡异的ie6，在排除各种可能与不可能后得到如下结论：</p><p>解决：给外层div设置宽度值，如width:100%;，border立刻显示。</p>]]></description><category>Study</category><comments>http://www.wenso.com/post/281.html#comment</comments><wfw:comment>http://www.wenso.com/</wfw:comment><wfw:commentRss>http://www.wenso.com/feed.asp?cmt=281</wfw:commentRss><trackback:ping>http://www.wenso.com/cmd.asp?act=tb&amp;id=281&amp;key=a8000ab3</trackback:ping></item><item><title>js分解url</title><author>zy14200@hotmail.com (wenso)</author><link>http://www.wenso.com/post/280.html</link><pubDate>Thu, 15 Dec 2011 08:53:49 +0800</pubDate><guid>http://www.wenso.com/post/280.html</guid><description><![CDATA[<p>&nbsp;我们可以用javascript获得其中的各个部分<br />1, window.location.href<br />全部URl字符串(在浏览器中就是完整的地址栏)<br />本例返回值: http://www.wenso.com:80/post/1212/help.html?id=1#go<br />2,window.location.protocol<br />URL 的协议部分<br />本例返回值:http:<br />3,window.location.host<br />URL 的主机部分<br />本例返回值:www.wenso.com<br />4,window.location.port<br />URL 的端口部分<br />假如采用默认的80端口(即使添加了:80)，那么返回值并不是默认的80而是空字符<br />本例返回值:&quot;&quot;<br />5,window.location.pathname<br />URL 的路径部分(就是文件地址)<br />本例返回值:/post/1212/help.html<br />6,window.location.search<br />查询(参数)部分<br />除了给动态语言赋值以外，我们同样可以给静态页面,并应用javascript来获得信任应的参数值<br />本例返回值:?id=1<br />7,window.location.hash<br />锚点<br />本例返回值:#go</p>]]></description><category>Study</category><comments>http://www.wenso.com/post/280.html#comment</comments><wfw:comment>http://www.wenso.com/</wfw:comment><wfw:commentRss>http://www.wenso.com/feed.asp?cmt=280</wfw:commentRss><trackback:ping>http://www.wenso.com/cmd.asp?act=tb&amp;id=280&amp;key=8e1f9158</trackback:ping></item><item><title>Dreamweaver提示The following translators were not loaded due to errors</title><author>zy14200@hotmail.com (wenso)</author><link>http://www.wenso.com/post/279.html</link><pubDate>Tue, 25 Oct 2011 19:33:05 +0800</pubDate><guid>http://www.wenso.com/post/279.html</guid><description><![CDATA[<p>&nbsp;新装的Dreamweaver5.5在保存的时候总提示The following translators were not loaded due to errors的一个错误提示，非常的讨厌，上网找了一下解决方案：<br /><span style="font-size: small; "><span class="Apple-style-span" style="color: rgb(55, 55, 55); font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; line-height: 24px; "><strong style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: inherit; font-size: 15px; font-style: inherit; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; outline-width: 0px; outline-style: initial; outline-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; "><span style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: inherit; font-style: inherit; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; outline-width: 0px; outline-style: initial; outline-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(255, 0, 0); ">win7</span></strong>&nbsp;: C:\Users\你的用户名\AppData\Roaming\Adobe\Dreamweaver CS5.5\【你使用的语言】\Configuration<br /><strong style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: inherit; font-size: 15px; font-style: inherit; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; outline-width: 0px; outline-style: initial; outline-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; "><span style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: inherit; font-style: inherit; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; outline-width: 0px; outline-style: initial; outline-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(255, 0, 0); ">XP</span></strong>&nbsp;：C:\Documents and Settings\你的用户名\Application Data\Adobe\Dreamweaver CS5.5\【你使用的语言】\Configuration</span></span></p><p>该路径下有一个WinFileCache-串号.dat的文件</p><p>&nbsp;</p>]]></description><category>Study</category><comments>http://www.wenso.com/post/279.html#comment</comments><wfw:comment>http://www.wenso.com/</wfw:comment><wfw:commentRss>http://www.wenso.com/feed.asp?cmt=279</wfw:commentRss><trackback:ping>http://www.wenso.com/cmd.asp?act=tb&amp;id=279&amp;key=fa7f7141</trackback:ping></item><item><title>MySQL免安装版的配置及MySQL相关命令</title><author>zy14200@hotmail.com (wenso)</author><link>http://www.wenso.com/post/278.html</link><pubDate>Thu, 29 Sep 2011 09:42:35 +0800</pubDate><guid>http://www.wenso.com/post/278.html</guid><description><![CDATA[<p><span style="font-size: larger; ">从使用Eclipse开始，接触到了很多开源开发的软件，真的很开放很好，虽然这些软件也有安装版，但我比较喜欢免安装版本的，今天先把MySQL免安装版的配置方法记录下来：</span></p><p><span style="font-size: larger; ">1、 &nbsp;到官方下载免安装版for win32；<br />2、 &nbsp;解压压缩包到D:mysql， 这个目录自己掌握，最好简单明了；<br />3、 &nbsp;将mysql根目录下的my-small.ini文件另存为my.ini，根据情况可以选择修改其它ini文件进行配置；<br />3、 &nbsp;</span><span style="font-size: larger; ">在my.ini的[mysqld]中追加一下内容<br />&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;character-set-server = utf8<br />&nbsp; &nbsp; &nbsp; &nbsp; #设置服务器端字符集mysql5.5以上就要用这个了<br />&nbsp; &nbsp; &nbsp; &nbsp; basedir=d:\\mysql<br />&nbsp; &nbsp; &nbsp; &nbsp; #指定安装目录<br />&nbsp; &nbsp; &nbsp; &nbsp; datadir=d:\\mysql\\data<br />&nbsp; &nbsp; &nbsp; &nbsp; #指定数据存放目录<br type="_moz" /></span></p><p><span style="font-size: larger; ">&nbsp; &nbsp; &nbsp; &nbsp; 额外可修改<br />&nbsp; &nbsp; &nbsp; &nbsp; default-storage-engine=MYISAM<br />&nbsp; &nbsp; &nbsp; &nbsp; #默认的储存引擎<br />&nbsp; &nbsp; &nbsp; &nbsp; max_allowed_packet=32M<br />&nbsp; &nbsp; &nbsp; &nbsp; #用来设置其通信缓冲区的最大长度<br />&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<span lang="EN-US" style="font-family: Calibri, sans-serif; ">sort_buffer_size = 4M&nbsp;<br /></span>&nbsp; &nbsp; &nbsp; &nbsp; #设置查询排序时所能使用的缓冲区大小，是每个连接独占的大小</span></p><p><span style="font-size: larger; ">4、 &nbsp;运行cmd命令打开命令窗口，安装服务<br />&nbsp; &nbsp; &nbsp; &nbsp; 执行&ldquo;D:\mysql\bin\mysqld&rdquo; --install Mysql --defaults-file=&quot;D:\mysql\my.ini&quot;</span></p><p><span style="font-size: larger; ">5、 &nbsp;显示安装成功后，启动服务<br />&nbsp; &nbsp; &nbsp; &nbsp; new start mysql</span></p><p><strong>相关命令：</strong></p><p><span style="font-size: larger; ">设置密码<br />刚安装好的mysql登录密码是空的，为了安全起见，我们可以设置一个密码<br />执行D:\mysql\bin\mysqladmin.exe -u root -p &quot;旧密码&quot; password &quot;新密码&quot;，旧密码为空时-p &quot;旧密码&quot;可以省略</span></p><p><span style="font-size: larger; ">mysql&gt; DESCRIBE 表名;<br />4、建立数据库：<br />mysql&gt; CREATE DATABASE 库名;<br />5、建立数据表：<br />mysql&gt; USE 库名;<br />mysql&gt; CREATE TABLE 表名 (字段名 VARCHAR(20), 字段名 CHAR(1));<br />6、删除数据库：<br />mysql&gt; DROP DATABASE 库名;<br />7、删除数据表：<br />mysql&gt; DROP TABLE 表名；<br />8、将表中记录清空：<br />mysql&gt; DELETE FROM 表名;<br />9、显示表中的记录：<br />mysql&gt; SELECT * FROM 表名;<br />10、往表中插入记录：<br />mysql&gt; INSERT INTO 表名 VALUES (&rdquo;hyq&rdquo;,&rdquo;M&rdquo;);<br />11、更新表中数据：<br />mysql-&gt; UPDATE 表名 SET 字段名1=&rsquo;a',字段名2=&rsquo;b&rsquo; WHERE 字段名3=&rsquo;c';<br />12、用文本方式将数据装入数据表中：<br />mysql&gt; LOAD DATA LOCAL INFILE &ldquo;D:/mysql.txt&rdquo; INTO TABLE 表名;<br />13、导入.sql文件命令：<br />mysql&gt; USE 数据库名;<br />mysql&gt; SOURCE d:/mysql.sql;<br />14、命令行修改root密码：<br />mysql&gt; UPDATE mysql.user SET password=PASSWORD(&rsquo;新密码&rsquo;) WHERE User=&rsquo;root&rsquo;;<br />mysql&gt; FLUSH PRIVILEGES;<br />15、显示use的数据库名：<br />mysql&gt; SELECT DATABASE();<br />16、显示当前的user：<br />mysql&gt; SELECT USER();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p><p><span style="font-size: larger; ">&nbsp;</span></p>]]></description><category>Study</category><comments>http://www.wenso.com/post/278.html#comment</comments><wfw:comment>http://www.wenso.com/</wfw:comment><wfw:commentRss>http://www.wenso.com/feed.asp?cmt=278</wfw:commentRss><trackback:ping>http://www.wenso.com/cmd.asp?act=tb&amp;id=278&amp;key=919b891d</trackback:ping></item><item><title>让UL完美居中</title><author>zy14200@hotmail.com (wenso)</author><link>http://www.wenso.com/post/277.html</link><pubDate>Mon, 26 Sep 2011 15:43:33 +0800</pubDate><guid>http://www.wenso.com/post/277.html</guid><description><![CDATA[<p>&nbsp;ul及li标签我们在写前端html页面的时候总是会用到，有时候我们需要一个横向菜单，不能定义宽度，里边的li还要自适应其中的文字内容（这是很苛刻的条件了），因为这时候的li有float:left属性，不好实现哦，这篇文章就是告诉大家如何做一个能自适应内容，不需要知道ul宽度，还能居中显示的菜单或者其它东西。</p><p>首先我们主要用的的是ul及li标签<br />&lt;ul&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .......<br />&nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;<br />&lt;/ul&gt;<br />和平时写的没什么差别，仔细看样式<br /><strong>ul{ position:relative; left:50%; float:left;} &nbsp; &nbsp; &nbsp; &nbsp;//左浮动，定位对齐到容器中间，这时候的菜单是偏右的；<br />ul li{ position:relative:right:50%; float:left;} &nbsp; &nbsp; &nbsp; &nbsp;//左浮动，让li浮动到一行，让li右侧相对ul偏移50%；<br />ul li{ padding:4px 12px;} &nbsp; &nbsp; &nbsp; &nbsp;//给li弄些间距；</strong><br />&nbsp;</p><p>完成了通过两个50%的偏移完成了ul列表相对父容器偏移的效果；</p>]]></description><category>Study</category><comments>http://www.wenso.com/post/277.html#comment</comments><wfw:comment>http://www.wenso.com/</wfw:comment><wfw:commentRss>http://www.wenso.com/feed.asp?cmt=277</wfw:commentRss><trackback:ping>http://www.wenso.com/cmd.asp?act=tb&amp;id=277&amp;key=1d1582a6</trackback:ping></item><item><title>Flex组件的生命周期[转]</title><author>zy14200@hotmail.com (wenso)</author><link>http://www.wenso.com/post/276.html</link><pubDate>Thu, 22 Sep 2011 15:09:36 +0800</pubDate><guid>http://www.wenso.com/post/276.html</guid><description><![CDATA[<p>&nbsp;<a name="major3" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: underline; "><span class="atitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(252, 249, 230); background-position: initial initial; background-repeat: initial initial; ">Flex 组件生命周期概述</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">首先，Flex 组建的生命周期是什么？它是指 Flex 框架如何同每一个 Flex 组件进行交互，通过什么方法来来控制 Flex 组件的产生、刷新和销毁，以及各个组件又是如何和外界进行通讯的。概括地说，Flex 组件的生命周期可以总结为两个模式、三个时期、四个方法、五个事件、七个阶段。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">同客观世界的物质一样，Flex 组件也有着从出生到销毁的三个时期：初生阶段、生长阶段、销毁阶段。每个阶段又会经历若干个重要步骤包括：构造、准备、装配、验证、提交、交互、拆卸和回 收。其中，有些步骤组件在一生中只会经历一次，有的则会伴随生命周期重复若干。这些步骤会通过四个重要方法负责实现。那么 Flex 组件如何通知 Flex Engineer 当前处于哪个步骤，又如何告诉变成开发人员当前的状态如何呢？他会通过派发五个不同的事件来进行内外交互；并通过验证 - 提交模式（invitation-validation pattern）来响应更新，从而实现了一个延迟渲染的松耦合的事件模型。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">为了能够更加容易理解一下的讲解，让我们来举例说明，我们来从 Flex 组件的基类 UIComponent 出发创建一个简单的图片查看器 ImageViewer（如下图 3 所示）, 然后以此为例分别讲解各个时期里，Flex 框架对该组建都做了什么。</p><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="fig3" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">图 3. 一个简单的 Flex 组件 ImageViewer</b></a><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><img alt="图 3. 一个简单的 Flex 组件 ImageViewer" width="252" height="221" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 720px; " src="http://www.ibm.com/developerworks/cn/web/1011_simq_flexlifecycle/image007.jpg" />&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="major4" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="atitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(252, 249, 230); background-position: initial initial; background-repeat: initial initial; ">出生时期</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">组件的出生阶段包括三个步骤：构造，配置，装配和初始化。（分别对应了 4 个 protected 方法，constructor、createChildren，commitProperties，measure 和 updatedisplayList）</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor4.1" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">构造函数（Constructor）</span></a></p><div class="ibm-container dw-container-sidebar ibm-alternate-two" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><div class="ibm-container-body" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">编程建议一：&nbsp;<em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">通常对组件本身（并不是组件子元素）的事件监听器会在构造函数里注册。</em>&nbsp;<em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我们通常也不再构造函数里添加子元素 , 在下面的篇章里会讲解我们为什么不这样做。</em></div></div><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">首先组件从构造函数（construct）开始出生。当您使用 new 操作符（如清单 1 所示）或者在 mxml 里声明一个组件的时候，构造函数就被调用了。通过调用构造函数，一个组件类的实例被创建在了内存里。但是仅此而已。因为他是组件生命周期的最早部分，此时 组件中的子元素还没有被创建，属性值也不明，所以，通常我们在这一阶段里所做的事情很少；但是他也是一个为组件添加时间监听器的好地方，因为一个组件的构 造函数会且只会被调用一次。</p><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing1" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 1. 构造函数被调用</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; "><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            private var myImageView : ImageViewer = new ImageViewer();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor4.2" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">配置阶段（get &amp; set）</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">初生阶段的第二个步骤是配置。在组件中定义的一些特性（properties）会在这个阶段通过 set 方法被赋值。但是请注意，此时组件的子元素仍然没有被创建，所以如果组件的某个属性的 set 方法里涉及到了对子元素或者其属性的操作的话，请格外留意。如清单 2 所示，假设我们把 ImageViewer组件放到一个 Panel 容器里 ()，此时代码的执行顺序如下：</p><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing2" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 2. 配置阶段的执行顺序</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; "><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &lt;mx:Panel width=&quot;100&quot;&gt;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &lt;sample:ImageViewer imageHeight=&quot;150&quot;/&gt;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &lt;/mx:Panel&gt;&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">输出顺序：</p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; ">Panel ： constructor&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            Panel.with ： setter&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            ImageViewer Calendar ： constructor&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            ImageViewer.imageHeight ：setter&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">所以 Adobe 建议开发人员在配置阶段只缓存特性值，而把业务逻辑推迟到到以后的验证阶段（参见清单 3）。这就是之前提到的验证 - 提交模式（invitation-validation pattern），关于这一概念我们会在下面的章节做详细说明。</p><div class="ibm-container dw-container-sidebar ibm-alternate-two" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><div class="ibm-container-body" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">编程建议二：&nbsp;<em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">使用组件的 set 方法是缓存特性值。将真正的业务逻辑推迟到提交阶段。</em></div></div><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing3" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 3. 例子 ImageViewer 的 set imageHeight() 方法</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; ">public function set imageHeight(value:Number): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; if (_imageHeight != value)&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _imageHeight = value;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imageHeightChanged = true ;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this .invalidateDisplayList()&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dispatchEvent( new Event( &quot;imageHeightChanged&quot; ));&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            }&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor4.3" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">装配阶段（addChild）</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">组件被构造以及赋值之后，并不会自动进入整个生命周期的循环，他必须经过装配时期，及组件自身装配到显示列表（Display List）上。组件只有通过 addChild 或者 addChildAt 方法被转配到 Display List 上，才会依次进入到以下的生命周期时期，否则得话，以后的步骤和方法都不会被调用。为此我们可以做这样一个实验。我们在组件代码里添加 trace（清单 4），然后再分别执行应用程序 Test1.mxml（清单 5）和 Test1.mxml（清单 6），再来 对两个输出。</p><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing4" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 4. 验证装配阶段 ImageViewer 组件的执行顺序</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; "><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            package dw.flex.sample&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; import mx.core.UIComponent;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; public class ImageViewer extends UIComponent&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; public function ImageViewer()&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; trace( &quot;constructor&quot; );&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; super();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; override protected function createChildren(): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; trace( &quot;createChildren&quot; );&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; super.createChildren()&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; override protected function commitProperties(): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; trace( &quot;commitProperties&quot; );&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; super.createChildren()&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; override protected function measure(): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; trace( &quot;measure&quot; );&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; super.createChildren()&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; override protected function updateDisplayList(w:Number, h:Number): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; trace( &quot;createChildren&quot; );&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; super.updateDisplayList(w,h)&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;}&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 5. 应用程序 Test1 及其输出</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">应用程序 Test1.mxml</p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; ">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &lt;mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; layout=&quot;vertical&quot;&gt;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; &lt;mx:Script&gt;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;![CDATA[&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; import dw.flex.sample.ImageViewer;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; private var myImageView : ImageViewer = new ImageViewer();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]]&gt;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; &lt;/mx:Script&gt;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &lt;/mx:Application&gt;&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">输出：</p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; ">constructor&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><div class="ibm-container dw-container-sidebar ibm-alternate-two" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><div class="ibm-container-body" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">编程建议三：</em>&nbsp;<em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">推迟组件的装配（使用 addChild 方法将组建添加到父节点上），除非您真的需要他。</em></div></div><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 6. 应用程序 Test2 及其输出</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">应用程序 Test2.mxml</p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; ">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &lt;mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; layout=&quot;vertical&quot;&gt;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; &lt;mx:Script&gt;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;![CDATA[&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; import dw.flex.sample.ImageViewer;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; private var myImageView : ImageViewer = new ImageViewer();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; override protected function createChildren(): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; super.createChildren();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	 addChild(myImageView);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]]&gt;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; &lt;/mx:Script&gt;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &lt;/mx:Application&gt;&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">输出：</p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; ">constructor&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            createChildren&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            commitProperties&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            measure&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            createChildren&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor4.4" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">初始化阶段（Initialization）</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">初始化阶段发生在装配之后，这个阶段包含了 3 个子阶段，派发 3 个事件。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">组件派发 Preinitialize 事件。这个阶段意味着组件已经被添加到了显示列表（DisplayList）上。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">调用 protected 方法 createChildren() 来生成子元素。在这个阶段里，您可以覆盖这个方法添加需要的子元素。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">派发 initialize 事件。这意味着组件及其所有的子元素都已经被创建、配置装备到了 DisplayList 上。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">进入第一次验证和提交阶段。Flex 框架会通过 layoutManager 引擎来依次调用组件的三个验证方法 invalidateProperties，invalidateSize() 和 invalidateDisplayList(). 以及其其分别对应的三个提交方法 CommitProperties(),measure() 和 updateDisplayList()。关于这三组方法究竟都是做什么的，我们会在以下的验证阶段详细介绍。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">最后配发 creationComplete 事件。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">至此，组件的初始化阶段完成，同时也意味着 Flex 组件的出生时期结束了。总结以上个步骤，我们用图 4 来标注组件出生时期的流程图。</p><div class="ibm-container dw-container-sidebar ibm-alternate-two" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><div class="ibm-container-body" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">编程提示四：</em>&nbsp;<em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">覆盖 createChildren 方法来添加子节点，此方法会且只会被执行一次。</em>&nbsp;<em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">尽量把创建动态形式和数据驱动（data-driven）形式的子元素推迟到 CommitProperties() 方法里添加或者执行。</em></div></div><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="fig4" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">图 4. 组件出生时前交互流程</b></a><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><img alt="图 4. 组件出生时前交互流程" width="553" height="278" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 720px; " src="http://www.ibm.com/developerworks/cn/web/1011_simq_flexlifecycle/image012.jpg" />&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="major5" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="atitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(252, 249, 230); background-position: initial initial; background-repeat: initial initial; ">生活时期</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">组件经过出生时期之后就进入了生活时期，这个时期意味着组件可以被看见，被操作，甚至被删除。并且作为一个成熟的个体，组件可以和外界进行交互，对更新请求进行响应。Flex 组件使用 Invalidation &ndash; Validation 模式来响应更新请求。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor5.1" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">验证 - 提交模式（Invalidation -Validation Pattern）</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Flex 的生命周期是建立的帧模型基础之上的，所以同样遵循着先执行脚本后渲染屏幕的规则。为了达到流畅的视觉体验，我们通常期望能够尽量减少代码执行的消耗，而 给画面渲染留下充足的时间，为了实现这点 Flex 使用了 Invalidation &ndash; Validation 模式，来实现资源的有效利用。</p><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="fig5" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">图 5. Invalidation-Validation 模式</b></a><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><img alt="图 5. Invalidation-Validation 模式" width="258" height="354" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 720px; " src="http://www.ibm.com/developerworks/cn/web/1011_simq_flexlifecycle/image015.jpg" />&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Invalidation &ndash; Validation 模式即验证提交 - 模式提供了一个低耦合的处理过程，将数据的改变（旧数据的实效）和数据的处理（对新数据的重新使用）区分开来，这样做的好处是：</p><ul style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 2em; line-height: 28px; list-style-type: disc; list-style-position: initial; list-style-image: initial; ">    <li style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 1.6em; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; list-style-position: initial; list-style-image: initial; ">只在有屏幕刷新需求的时候的时候进行相应数据操作和计算；</li>    <li style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 1.6em; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; list-style-position: initial; list-style-image: initial; ">并且避免了不必要的重复渲染。</li></ul><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">以清单 7 为例，通过 Invalidation &ndash; Validation 模式，第二行的代码的结果永远不会生效，即不会也从来没有显示到屏幕上。</p><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing5" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 7. 相同属性被多次赋值的例子</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; "><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            myImageView.height = 50;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            myImageView. height = 100;&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">那 Flex 框架是如何实现这一模式的呢？让我们来看一下 Flex 是如何将这一模式应用到组件上的。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">首先我们来看一下 Flex 可视化组件基类 UIComponent 是如和处理 set width（） 方法的。</p><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing6" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 8. UIComponent 的 set width （）方法</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; "><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            public function set width(value:Number):void {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            if(explicitWidth != value) {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            explicitWidth = value;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            invalidateSize();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">// 其他代码省略</em><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            }&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">从清单 8 我们可以看出，UIComponent 在首先会去判断属性赋值是否改变，从而避免重复赋值带来的消耗，然后调用 protected 方法 invalidateSize（）。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">invalidateSize（）是 UIComponent 提供的验证方法之一，它用来校验与组件尺寸大小相关的属性，当此方法被调用后，Flex 组件引擎 LayoutManager 会首先检查该属性的更新请求是否已经调用过 invalidateSize（）方法，如果调用过，说明此类型的更改请求已经记录在案，无需赘述。如果没有，则会将此次请求记录到 LayoutManager 校验队列上进行等待。那么对 width 属性值的更新什么时候生效呢？ LayoutManager 会在监听到下一次 RENDER 事件派发的时候，将组件推送到提交阶段。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">在提交阶段，LayoutManager 得到更新请求队列，调用 commitProperties（）方法使得属性 width 的最新值（假设记录在了 _width 私有变量上）得以生效。Flex 就是通过这种属性值延迟生效的方法来保证每次用于渲染画面的请求都是最新的，从而避免了不必要的资源浪费。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">因此，在我们的例子 ImageViewer 里，我们也使用了类似机制。（如清单 9 所示），只不过这里我们调用的是 invalidateProterties（）方法。与 invalidateSize（）类似，组件的 scale 属性值会在提交阶段通过调用&nbsp;<a name="OLE_LINK2" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; ">commitProperties（）方法生效。</a></p><p><a name="OLE_LINK2" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /></a><a name="listing7" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 9. ImageViewer 的 set scale 方法</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; ">public function set scale(value : Number): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            if (_scale != value) {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            _scale = value;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            scaleChanged = true ;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            invalidateProperties();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            dispatchEvent( new Event( &quot;scaleChanged&quot; ));&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            }&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor5.2" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">验证阶段（Invalidation）</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">验证阶段是组件在生活要经历的第一步，具体地说是响应更新请求的第一步。作为 invalidation-validation 循环的一份子他会在组件的生命周期中多次执行。Flex 组件基类 UIcomponent 提供了三种验证方法：invalidateProperties()、invalidateSize（）和 invalidateDisplayList() 来分别响应组件对值相关，布局相关和显示相关属性的更新请求。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">组件会通过两种方式进入到验证阶段：</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">第一种方式是在初始化阶段，通过父节点调用 childrenCreated() 方法，组件进入第一次 Invalidation &ndash; validation 循环。这一次，三种验证方法都会被自动调用以确保组件初始化成功。这类调用在组件的生命周期内只会经历一次。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">第二种方式是响应更新请求。组件的任何一方面特性发生更新请求后，都会进入到验证阶段。而此时，用户需要根据特性的不同类别来自行决定调用 哪种验证方法。还是以清单 9 为例，通过调用 invalidateProperties（）方法，确保了在接下来的提交阶段，更新会对值计算生效。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">在这个时期，我们通常不去做太多的事情，因为此时只是验证阶段，更新并不生效。我们所要做的只是记录此次更新，并且等待进入提交阶段。</p><div class="ibm-container dw-container-sidebar ibm-alternate-two" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><div class="ibm-container-body" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">编程提示五：</em>&nbsp;<em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">响应组件更新请求时，调用三种验证方（invalidateProperties()、invalidateSize（）、 invalidateDisplayList()），而不要显试调用提交方法（commitProperties（），measure（）和 updateDisplayList（））。Flex 框架会在最合适的时候自行调用提交方法。</em></div></div><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor5.3" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">提交阶段（Validation）</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">通过以上的介绍，我们已经很清楚组件更新会在提交阶段实际生效。和验证阶段的随时更新随时校验不同，Flex 框架为提交阶段设计了线性执行的顺序，将三个提交方法分为了三个阶段。顺序调用三个提交方法：commitProperties（），measure（） 和 updateDisplayList（）。这样做的目的和每个方法的功能有关。commitProperties（）方法主要负责属性值的计算和生效，因 此首先执行，因为这些自己算过的值可能用于布局，也可能用于显示。这里也可以用来移除不需要的子节点，但是您需要通过标志位来判断子节点是否存在。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">measure（）方法用于根据组件的内容大小计算组件尺寸。由于尺寸的计算是自下而上的，所组件子元素的大小改变都会隐试的触发此方法。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">UpdatedisplayList() 方法用来更新显示列表（Display List）的布局以及渲染。组件的布局是一个自上而下的过程，所以在这个方法里您需要对不仅仅是组件设置布局属性，而且也要对子元素进行相应的调整。这里 也是使用 Flash 绘图 API 的好地方。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">这里，我们所要做的就是覆盖（override）这几个方法，在正确的时间、正确的地方做正确的事。</p><div class="ibm-container dw-container-sidebar ibm-alternate-two" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><div class="ibm-container-body" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">编程提示六：</em>&nbsp;<em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">通过挑选并重写合适的提交方法，您可以把复杂的逻辑处理延迟到提交阶段通过设置标志位，可以进一步优化提交阶段的更新性能。</em></div></div><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor5.4" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">交互阶段（Interaction）</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">交互严格地说组件生命周期中的某种行为，他是促使组件更新，推动验证 - 提交循环的动力。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Flex 使用事件驱动的交互模式，来实现一种完全松耦合的体系结构。简单地说，任何组件如果想要告诉外界当前发生了什么事或者即将发什么事的话，他可以派发一个事 件，那么在该类事件可及范围内的任何组件都可以通过注册该事件的监听器的方式来对此类事件进行相应。关于 Flex 在事件机制处理方面信息的由于超出了本文的范围，这里不再多讲，感兴趣的读者可以关注后续教程《探索 Flex 的事件机制》，或者阅读资料部分的相应文档。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">一般来说，组件的交互行为有以下几种：</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户同组件的交互，比如说：输入数据，缩放大小等等。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">通过派发和响应事件。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">应用（Application）或者父节点（parent）与组件的交互。比如说 ItemRenderer 实例和宿主对象之间的 data 传递。（关于 ItemRenderer 机制和实践讲解，也会有后续教程加以探讨）</p><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="major6" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="atitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(252, 249, 230); background-position: initial initial; background-repeat: initial initial; ">销毁时期</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">任何事物都会有一个归宿，Flex 组件也不例外。当某个组件不再需要的时候，我们需要把他销毁。（这听起来有点残酷，但是我们不得不这么做）</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor6.1" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">拆卸阶段（removeChild）</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">销毁组件的一种方法是通过调用组件父亲节点（parent）的 removeChild（）方法，该方法会将他从显示列表（Display List）上拆卸掉，并且检查是否存在对此组件的引用，如果没有的话，组件会被标记为&ldquo;可以回收&rdquo;，这预示着组件进入到了回收阶段，并且可以被 AVM 垃圾回收。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor6.2" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">回收阶段（GC）</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">刚才我么提到了通过 removeChild（）方法将组建拆卸掉以后，组件可以被垃圾回收。这意味着该组件的实例会被从内存中完全删除掉，并且释放资源。但是请注意，垃圾回 收并不一定在此刻马上发生，AVM 有着自己的垃圾回收时间。因此这个打了标签的组件需要等待回收时刻的到来。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">拆卸阶段并不是组件销毁的必经阶段。当某个组件被拆卸掉之后，如果该组件包含了子组件，而他们都不存在外界引用的话，所有的元素都会被标记 为&ldquo;可以回收&rdquo;，也就是说该系统中的子组件并不需要进入到拆卸阶段，也可以在回收时刻到来的时候被 AVM 回收掉。那么开发人员所需要注意的就是，在这个时刻发生之前，将引用去除掉。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="major7" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="atitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(252, 249, 230); background-position: initial initial; background-repeat: initial initial; ">实际编程中的应用</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">到目前为止我们学习的多是 Flex 生命周期的理论。学习理论的最终目的就是知道编程实践，现在我们来看一下生命周期是如何在例子 ImageViewer 里是被贯彻执行的。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor7.1" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">关于 createChildren（）方法</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 10 显示了组件 ImageViewer 的 createChildren() 方法。正如大家注意的那样，在创建每一个子节点的时候，首先判断该节点是否存在是一个很好的习惯，这样可以防止子节点在某种情况下已被实例化。是的，这种 情况是可能发生的。以清单 11 里的 Table 类为例， Table 里的子节点 row 有一个 set（）方法，而我们从&ldquo;初生阶段&rdquo;里知道，装配阶段（set 方法调用）要早于初始化阶段，那么请大家思考一下清单 12 的执行结果会是如何。</p><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing8" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 10. ImageViewer 的 createChildren() 方法</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; "><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            override protected function createChildren(): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; super.createChildren();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; if (! this.border){&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	createBorder();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; if (!controlBar){&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; controlBar = new UIComponent();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; if (!zoomInButton){&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoomInButton = new Button();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoomInButton.label = &quot;+&quot; ;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoomInButton.addEventListener(MouseEvent.CLICK,&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoomInButtonClickHandler);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; controlBar.addChild(zoomInButton);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; if (!zoomOutButton){&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoomOutButton = new Button();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoomOutButton.label = &quot;-&quot; ;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoomOutButton.addEventListener(MouseEvent.CLICK,&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoomOutButtonClickHandler);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; controlBar.addChild(zoomOutButton);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">// added controlBar the last time</em><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; addChild(controlBar);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            }&nbsp;</td>        </tr>    </tbody></table><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing9" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 11. Table 类的例子</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; "><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            public class Table extends TableBase&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; private var _row : Row;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; public function getrow():Row&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return this._row;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; public function setrow(r : Row): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _row = r;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.invalidateDisplayList();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; public function Table()&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; super();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; override protected function createChildren(): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; super.createChildren();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (!_row){&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _row = new Row();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.addChild(_row);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            }&nbsp;</td>        </tr>    </tbody></table><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing10" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 12. Table 和 Row 的初始化顺序</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; "><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            var t : Table = new Table();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            t.row = new Row();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            addChild(t);&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我们也看到 controlBar 在该方法的末尾才被添加到 Display List 上，正如之前提到的那样，我们只在需要的时候装配他。同时，此时也是为子节点添加监听器的好地方。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor7.2" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">关于 commitProperties（）方法</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">下面我们来看一下 ImageViewer 组件在 commitProperties（）里都做了什么（如清单 13 所示）。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">CommitProperties（）是验证方法 invalidateProperties（）所对应的提交方法，也是初始化阶段会被调用的第一个提交方法。他的目的是使得任何通过 set 方法提交的数值更改生效。所以您可以看到在清单 9 的 set scale（）方法里，按照 invalidation-validation 模式，我们调用了 invalidateProperties（）方法从而将值的生效延迟到了 commitProperties（）里，并且为了做到 &ldquo;局部更新&rdquo;，我们使用了标志位 scaleChanged。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">另外，这里这里一个奇怪的地方，那就是为什么在 commitProperties（）会有添加子节点的操作呢？这也是我们要特意举例说明的一个地方。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">对于有些子节点，他的诞生可能是和某些属性值相关联的，也就是我们在编程提示四里提到的动态创建或者数据驱动的子节点。这些子节点，由于他 们并不是随着组件的产生而产生，而是要受属性值的变化而产生或者变化，甚至在某些情况下，根本就不需要存在。所以我们应该在值的提交阶段，也就是 commitProperties（）方法调用的时候，当新值真正生效的时候再去创建它。</p><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing11" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 13. ImageViewer 的 commitProperties（）方法</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; "><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            override protected function commitProperties(): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; super.commitProperties();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; if (sourceChanged){&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (! this.image){&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; image = new Image();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.addChild(image);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; image.source = this._source;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; } else {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; image.source = this._source;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; sourceChanged = false ;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; if (scaleChanged){&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; this.imageWidth = this.imageWidth * this.scale;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.imageHeight = this.imageHeight *+ this.scale;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scaleChanged = false ;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            }&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor7.3" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">关于 measure() 方法</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">measure（）方法是组件自动计算尺寸大小的地方，在例子 ImageViewer 的 measure（）方法里（如清单 14 所示），我们做的事很少。这是因为，我们 ImageViewer 被设计为：需要显式指定大小（当然这里只是为了举例方便，您可以根据需要，制作可以自动度量大小的组件）。即在应用时设置 width 和 height 值。如清单 15 所示：</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">在这种情况家，measure（）方法不会被调用。所以需要提请读者注意的就是，一旦您的组件在组装阶段被设置了 with 和 height 属性值，那么请不要期望在 measure 里会执行您的业务逻辑。</p><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing12" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 14. ImageViewer 的 measure() 方法</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; "><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            override protected function measure(): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; super.measure();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; measuredWidth = Math.max(image.width, controlBar.getExplicitOrMeasuredWidth()) ;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; measuredHeight = image.height + controlBar.getExplicitOrMeasuredHeight();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; measuredMinWidth = measuredWidth;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; measuredMinHeight = measuredHeight;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            }&nbsp;</td>        </tr>    </tbody></table><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing13" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 15. 使用 ImageViewer 的应用 Sample.mxml</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; "><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &lt;sample:ImageViewer width=&quot;400&quot; height=&quot;350&quot; imageWidth=&quot;150&quot; imageHeight=&quot;140&quot;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            source=&quot;product.jpg&quot; borderColor=&quot;0x000000&quot;/&gt;&nbsp;</td>        </tr>    </tbody></table><p>&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="minor7.4" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="smalltitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">关于 updateDisplayList （）方法</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">updateDisplayList（）方法用于对组件内容进行布局以及渲染，一切屏幕上可见的内容都需要在这里被处理，所以 updateDisplayList（）可以说是最繁忙的一个提交方法，他所包含的实现可以非常多。清单 16 中，我们省略了部分代码。只留下了需要讲解的部分。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">在 measure（）方法里我们可以获取 Flex 自动计算的尺寸（如果被调用的话），这些数据需要在 updateDisplayList() 方法里被应用处理，所以我们会大量使用 setActualSize（）方法，特别是子元素比较多的时候。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">作为提交方法，updateDisplayList（）的最重要的职责之一就相对应的 invalidateDisplayList（）方法的更新请求进行响应。比如说清单 16 里方法就对清单 17 里的 set imageWidth（）方法进行了相应。并且就像在 commitProperties（）部分里介绍的那样，这里同样使用了&ldquo;标志位&rdquo;方法来进行&ldquo;局部跟新&rdquo;。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">局部更新是普遍应用于提交方法里的一种技巧，因为我们知道这三个提交方法是公用的，任何更新的提交都会在这几个方法里被处理。而每次更新都可能只是局部的更改，所以是当地使用标志位方法进行局部更新可以有效地优化代码的执行。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">最后要提到的是，渲染屏幕的职责也决定了 updateDisplayList（）方法是调用 Flash Player 绘图 API 的好地方。所以我们在清单 16 中特意使用了 drawRect（）方法为图片家了一个边框。</p><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing14" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 16. ImageViewer 的 updateDisplayList () 方法。</b></a></p><table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; table-layout: fixed; ">    <tbody style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">        <tr style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">            <td class="code-outline" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font: normal normal normal 12px/1.5em Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; "><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            override protected function updateDisplayList(unscaledWidth:Number,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; unscaledHeight:Number): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; super.updateDisplayList(unscaledWidth, unscaledHeight);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;&nbsp;&nbsp;&nbsp; // 省略部分代码</em><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; zoomInButton.setActualSize(50, 20);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; zoomOutButton.setActualSize(50, 20);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; var tmpx : Number = 20;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; controlBar.setActualSize(tmpx, 20);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; controlBar.move(0, unscaledHeight-25);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; zoomInButton.move(tmpx, 0);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; tmpx +=60;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; zoomOutButton.move(tmpx, 0);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; if (imageHeightChanged ||imageWidthChanged){&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; image.width = this.imageWidth;<em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">//w;</em><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; image.height = this.imageHeight;<em style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">//h - 20;</em><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;	 var tempX : Number = x+ (w-imageWidth) * 0.5;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; var tempY : Number = y + (h-imageHeight) * 0.5;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; image.x = tempX;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;	 image.y = tempY;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; imageHeightChanged = false ;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; imageWidthChanged = false ;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp; var g:Graphics = graphics;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;	 g.clear();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;	 g.beginFill(0x6F7777);<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;	 g.drawRect(tempX-1, tempY-1, imageWidth+2, imageHeight+2);&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp;&nbsp;&nbsp;	 g.endFill();&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            &nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            <br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />            }&nbsp;</td>        </tr>    </tbody></table><p><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><a name="listing15" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><b style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">清单 17. ImageViewer 的 set imageWidth () 方法。</b></a><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />public function set imageWidth(value:Number): void&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />{&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />&nbsp;&nbsp;&nbsp;&nbsp; if (_imageWidth != value)&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />&nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _imageWidth = value;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imageWidthChanged = true ;&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.invalidateDisplayList()&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dispatchEvent( new Event( &quot;imageWidthChanged&quot; ));&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;<br style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " />}&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a name="major9" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(44, 98, 158); text-decoration: none; "><span class="atitle" style="word-wrap: break-word; word-break: break-all; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(252, 249, 230); background-position: initial initial; background-repeat: initial initial; ">结束语</span></a></p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">本文对 Flex 生命周期的各个阶段进行了分类和讲解，根据各个时期的特点提出了一些编程方面的提示，并且通过实例分析将这些编程提示应用到实践中，希望对您的 Flex 开发工作有所帮助。</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="color: rgb(68, 68, 68); word-wrap: break-word; word-break: break-all; margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">很不错的文章，转自<span class="Apple-style-span" style="color: rgb(0, 0, 0); "><a href="http://uh.9ria.com/space-27497.html">http://uh.9ria.com/space-27497.html</a></span></p><p>&nbsp;</p>]]></description><category>Study</category><comments>http://www.wenso.com/post/276.html#comment</comments><wfw:comment>http://www.wenso.com/</wfw:comment><wfw:commentRss>http://www.wenso.com/feed.asp?cmt=276</wfw:commentRss><trackback:ping>http://www.wenso.com/cmd.asp?act=tb&amp;id=276&amp;key=25472954</trackback:ping></item><item><title>C#，AS3，Android按钮事件监听对比</title><author>zy14200@hotmail.com (wenso)</author><link>http://www.wenso.com/post/275.html</link><pubDate>Tue, 20 Sep 2011 10:34:29 +0800</pubDate><guid>http://www.wenso.com/post/275.html</guid><description><![CDATA[<p><strong>&nbsp;C#</strong></p><p>this.myBtn.Click=new System.EventHandler(this.myBtn_Click);//绑定事件</p><p>private void myBtn_Click(object sender, System.EventArgs e)//事件方法<br />{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Console.WriteLine(&quot;我被点击了!!&quot;);<br />}<br />&nbsp;</p><p><strong>AS3</strong></p><p>myBtn.addEventListener(MouseEvent.Click,myBtn_Click);</p><p>private myBtn_Click(e:MouseEvent.):void{<br />&nbsp; &nbsp; &nbsp; &nbsp; trace(&quot;我被点击了!!&quot;);<br />}</p><p><strong>Android</strong></p><p>myBtn.setOnClickListener(myBtn_Click);</p><p>private OnClickListener myBtn_Click=new OnClickListener(){<br />&nbsp; &nbsp; &nbsp; &nbsp;@Override<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public void onClick(View v){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />)</p><p>怎么看还是AS3的监听器写法简洁明了，POP语言典范啊～</p>]]></description><category>Study</category><comments>http://www.wenso.com/post/275.html#comment</comments><wfw:comment>http://www.wenso.com/</wfw:comment><wfw:commentRss>http://www.wenso.com/feed.asp?cmt=275</wfw:commentRss><trackback:ping>http://www.wenso.com/cmd.asp?act=tb&amp;id=275&amp;key=9c282ddf</trackback:ping></item><item><title>Android模拟器快捷键</title><author>zy14200@hotmail.com (wenso)</author><link>http://www.wenso.com/post/274.html</link><pubDate>Mon, 19 Sep 2011 15:49:54 +0800</pubDate><guid>http://www.wenso.com/post/274.html</guid><description><![CDATA[<p>F1/PgUp     Menu key   菜单键<br />F2/PgDown   Star key 星号键<br />F3          Call key 发送拨号键<br />F4          End Call key 结束通话或者说红键<br />Home key Home键<br />ESC         Back Key 后退键<br />F7          Power button 电源键<br />F8          Disable/Enable all networking 禁止/启用所有网络<br />F9          Start tracing (only with -trace) 开始跟踪<br />F10         Stop tracing (only with -trace) 停止跟踪<br />Keypad 2468  Dpad arrows 方向键<br />Keypad 5    Dpad center 导航中建/OK键<br />Keypad 79   Rotate device skin 旋转设备外观<br />Keypad +    Volume Up key 音量增加键<br />Keypad -    Volume Down key 音量降低键<br />Keypad /    Decrease onion alpha 除法<br />Keypad *    Increase onion alpha 乘法<br />Ctrl-K      Switch between 'unicode' and 'raw' keyboard modes 切换unicode和原始键盘模式</p>]]></description><category>Study</category><comments>http://www.wenso.com/post/274.html#comment</comments><wfw:comment>http://www.wenso.com/</wfw:comment><wfw:commentRss>http://www.wenso.com/feed.asp?cmt=274</wfw:commentRss><trackback:ping>http://www.wenso.com/cmd.asp?act=tb&amp;id=274&amp;key=dbffc73b</trackback:ping></item><item><title>程序开发命名规范[转]</title><author>zy14200@hotmail.com (wenso)</author><link>http://www.wenso.com/post/273.html</link><pubDate>Fri, 02 Sep 2011 11:06:03 +0800</pubDate><guid>http://www.wenso.com/post/273.html</guid><description><![CDATA[<p><b>1．包的命名</b></p><p>Java包的名字都是由小写单词组成。每一名Java程序员都可以编写属于自己的Java包，为了保障每个Java包命名的惟一性，最新的Java编程规范要求程序员在自己定义的包的名称之前加上惟一的前缀。由于互联网上的域名是不会重复的，所以程序员一般采用自己在互联网上的域名作为自己程序包的惟一前缀。</p><p>例如：net.frontfree.javagroup。</p><p><b>2．类的命名</b></p><p>类的名字必须由大写字母开头，一个单词中的其他字母均为小写。如果类名称由多个单词组成，则建议将每个单词的首字母均用大写，例如TestPage。如果类名称中包含单词缩写，则建议将这个词的每个字母均用大写，如：XMLExample。由于类是设计用来代表对象的，所以建议在命名类时应尽量选择名词。</p><p><b>3．方法的命名</b></p><p>方法的名字的第1个单词应以小写字母开头，后面的单词则建议用大写字母开头。例如：sendMessge()。</p><p><b>4．常量的命名</b></p><p>常量的名字应该都使用大写字母，并且指出该常量完整含义。如果一个常量名称由多个单词组成，则建议用下划线来分割这些单词。例如：MAX_VALUE。</p><p><b>5．参数的命名</b></p><p>参数的命名规范和方法的命名规范相同，而且为了避免阅读程序时造成迷惑，请在尽量保证在参数名称为一个单词的情况下，参数的命名尽可能明确。</p><p><b>6．Javadoc注释</b></p><p>Java除了可以采用常见的注释方式之外，Java语言规范还定义了一种特殊的注释，也就是通常所说的Javadoc注释，它是用来记录代码中的API的。Javadoc注释是一种多行注释，以/**开头，而以*/结束，注释可以包含一些HTML标记符和专门的关键词。使用Javadoc注释的好处是编写的注释可以被自动转化为在线文档，省去了单独编写程序文档的麻烦。例如：</p><p>/**<br />*This is an example of<br />* Javadoc<br />*<br />*@author darchon<br />*@version 0.1, 10/11/2002<br />*/<br /><br />在每个程序的最开始部分，一般都用Javadoc注释进行程序的总体描述以及版权信息。在主程序中可以为每个类、接口、方法、变量添加Javadoc注释，每个注释的开头部分先用一句话概括该类、接口、方法、变量所完成的功能，这句话应单独占据一行以突出其概括作用，在这句话后面可以跟随更加详细的描述段落。</p><p>在描述性段落之后还可以跟随一些以Javadoc注释标签开头的特殊段落，例如上面例子中的@auther和@version，这些段落将在生成的文档中以特定方式显示。</p><p>虽然添加注释不会使一个设计低劣的程序变成好的程序，但是如果按照编程规范编写程序，并且为程序添加良好的注释，却可以帮助编写出设计优美、运行高效且易于理解的程序，尤其在多人合作完成同一项目时，编程规范非常重要。俗话说&quot;磨刀不误砍柴工&quot;，花费一点时间去适应一下Java编程规范是有好处的。<b><br /></b></p>]]></description><category>Study</category><comments>http://www.wenso.com/post/273.html#comment</comments><wfw:comment>http://www.wenso.com/</wfw:comment><wfw:commentRss>http://www.wenso.com/feed.asp?cmt=273</wfw:commentRss><trackback:ping>http://www.wenso.com/cmd.asp?act=tb&amp;id=273&amp;key=d659f8f0</trackback:ping></item><item><title>Android自定义按钮样式[转]</title><author>zy14200@hotmail.com (wenso)</author><link>http://www.wenso.com/post/272.html</link><pubDate>Wed, 31 Aug 2011 14:53:50 +0800</pubDate><guid>http://www.wenso.com/post/272.html</guid><description><![CDATA[<p><span class="Apple-style-span" style="color: rgb(103, 102, 21); font-family: Arial, Helvetica, simsun, u5b8bu4f53; font-size: 14px; line-height: 22px; background-color: rgb(249, 248, 247); "><div style="line-height: 22px; ">在Android开发应用中，默认的Button是由系统渲染和管理大小的。而我们看到的成功的移动应用，都是有着酷炫的外观和使用体验的。因此，我们在开发产品的时候，需要对默认按钮进行美化。在本篇里，笔者结合在应用开发中的经验，探讨一下自定义背景的按钮、自定义形状按钮的实现方法。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">首先看实现效果截图：<br />&nbsp;</div><div style="line-height: 22px; "><img alt="Android应用开发笔记(10)：制作自定义背景Button按钮、自定义形状Button的全攻略 - 心灵之窗 - 我的博客我做主" src="http://img768.ph.126.net/Nep5lnQYM2mRnjJyIEZTAQ==/1259600520781476640.jpg" style="line-height: 22px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 100%; margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 0px; " /></div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">自定义背景的按钮目前有2种方式实现，矢量和位图。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">1. 矢量图形绘制的方式&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">矢量图形绘制的方式实现简单，适合对于按钮形状和图案要求不高的场合。步骤&nbsp;如下：</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">(a) 使用xml定义一个圆角矩形，外围轮廓线实线、内填充渐变色，xml代码如下。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">//bg_alibuybutton_default.xml &nbsp;&nbsp;</div><div style="line-height: 22px; ">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt; &nbsp;</div><div style="line-height: 22px; ">&lt;layer-list xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &lt;item&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp;&lt;shape android:shape=&quot;rectangle&quot;&gt; &nbsp; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;solid android:color=&quot;#FFEC7600&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;corners &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;android:topLeftRadius=&quot;5dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;android:topRightRadius=&quot;5dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;android:bottomLeftRadius=&quot;5dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;android:bottomRightRadius=&quot;5dip&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp;&lt;/shape&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &lt;/item&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &lt;item android:top=&quot;1px&quot; android:bottom=&quot;1px&quot; android:left=&quot;1px&quot; android:right=&quot;1px&quot;&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &lt;shape&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;gradient &nbsp; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;android:startColor=&quot;#FFEC7600&quot; android:endColor=&quot;#FFFED69E&quot; &nbsp; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;android:type=&quot;linear&quot; android:angle=&quot;90&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;android:centerX=&quot;0.5&quot; android:centerY=&quot;0.5&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;corners &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;android:topLeftRadius=&quot;5dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;android:topRightRadius=&quot;5dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;android:bottomLeftRadius=&quot;5dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;android:bottomRightRadius=&quot;5dip&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp;&lt;/shape&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &lt;/item&gt; &nbsp; &nbsp;&nbsp;</div><div style="line-height: 22px; ">&lt;/layer-list&gt; &nbsp;</div><div style="line-height: 22px; ">//bg_alibuybutton_default.xml</div><div style="line-height: 22px; ">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;</div><div style="line-height: 22px; ">&lt;layer-list xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &lt;item&gt;</div><div style="line-height: 22px; ">&nbsp;&nbsp;&nbsp;<span style="line-height: 22px; white-space: pre; "> </span>&nbsp;&nbsp;&lt;shape android:shape=&quot;rectangle&quot;&gt;&nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;solid android:color=&quot;#FFEC7600&quot; /&gt;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;corners</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; ">   </span>android:topLeftRadius=&quot;5dip&quot;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:topRightRadius=&quot;5dip&quot;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:bottomLeftRadius=&quot;5dip&quot;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:bottomRightRadius=&quot;5dip&quot; /&gt;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp;&lt;/shape&gt;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &lt;/item&gt;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &lt;item android:top=&quot;1px&quot; android:bottom=&quot;1px&quot; android:left=&quot;1px&quot; android:right=&quot;1px&quot;&gt;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &lt;shape&gt;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;gradient&nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:startColor=&quot;#FFEC7600&quot; android:endColor=&quot;#FFFED69E&quot;&nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:type=&quot;linear&quot; android:angle=&quot;90&quot;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; ">   </span>android:centerX=&quot;0.5&quot; android:centerY=&quot;0.5&quot; /&gt;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; ">  </span>&lt;corners</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; ">   </span>android:topLeftRadius=&quot;5dip&quot;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:topRightRadius=&quot;5dip&quot;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:bottomLeftRadius=&quot;5dip&quot;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:bottomRightRadius=&quot;5dip&quot; /&gt;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp;&lt;/shape&gt;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &lt;/item&gt; &nbsp;</div><div style="line-height: 22px; ">&lt;/layer-list&gt;&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">同样定义bg_alibuybutton_pressed.xml和bg_alibuybutton_selected.xml，内容相同，就是渐变颜色不同，用于按钮按下后的背景变化效果。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">(b) 定义按钮按下后的效果变化描述文件drawable/bg_alibuybutton.xml，代码如下。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt; &nbsp;</div><div style="line-height: 22px; ">&lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;item android:state_pressed=&quot;true&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:drawable=&quot;@drawable/bg_alibuybutton_pressed&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;item android:state_focused=&quot;true&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:drawable=&quot;@drawable/bg_alibuybutton_selected&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;item android:drawable=&quot;@drawable/bg_alibuybutton_default&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&lt;/selector&gt; &nbsp;</div><div style="line-height: 22px; ">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</div><div style="line-height: 22px; ">&lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&lt;item android:state_pressed=&quot;true&quot;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; ">  </span>android:drawable=&quot;@drawable/bg_alibuybutton_pressed&quot; /&gt;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&lt;item android:state_focused=&quot;true&quot;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; ">  </span>android:drawable=&quot;@drawable/bg_alibuybutton_selected&quot; /&gt;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&lt;item android:drawable=&quot;@drawable/bg_alibuybutton_default&quot; /&gt;</div><div style="line-height: 22px; ">&lt;/selector&gt;&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">(c) 在你需要的界面定义文件中，如layout/main.xml中定义一个Button控件。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">&lt;Button &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:layout_width=&quot;120dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:layout_height=&quot;40dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:text=&quot;矢量背景按钮&quot; &nbsp; &nbsp; &nbsp; android:background=&quot;@drawable/bg_alibuybutton&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;Button</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:layout_width=&quot;120dip&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:layout_height=&quot;40dip&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:text=&quot;矢量背景按钮&quot; &nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:background=&quot;@drawable/bg_alibuybutton&quot; /&gt;&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">这样，自定义背景的按钮就可以使用了，在实现onClick方法后就可以响应操作。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">2. 9-patch图片背景方式&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">此种方法相对复杂繁琐，但可以制作出更多、更复杂样式的按钮图样。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">什么是9-patch格式呢？</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">9-patch格式，是在Android中特有的一种PNG图片格式，以&quot;***.9.png&quot;结尾。此种格式的图片定义了可以伸缩拉伸的区域和文字显示区域，这样，就可以在Android开发中对非矢量图进行拉伸而仍然保持美观。如果使用位图而没有经过9-patch处理的话，效果就会想第一张截图中的&ldquo;普通图片背景按钮&rdquo;那样被无情的拉伸，影响效果。Android中大量用了这种技术，默认的按钮的背景就是用了类似的方法实现的。我们看一下google官方的描述：</div><div style="line-height: 22px; "><img alt="Android应用开发笔记(10)：制作自定义背景Button按钮、自定义形状Button的全攻略 - 心灵之窗 - 我的博客我做主" src="http://img.ph.126.net/FHeGVAPWhTvLKLudbF0tgQ==/3296916402213391285.png" style="line-height: 22px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 100%; " /></div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">该格式相对于一般PNG图片来说，多了上下左右各一条1px的黑线。左、上黑线隔开了9个格子，当中一个格子(见上图Strechable Area区域)声明为可以进行拉伸。右、下两条黑线所定义的Paddingbox区域是在该图片当做背景时，能够在图片上填写文字的区域。每条黑线都是可以不连续的，这样就可以定义出很多自动拉伸的规格。Android sdk中提供了设置的工具，启动命令位于：$ANDROID_SDK/tools/draw9patch.bat，使用它对于原始PNG进行设置9-patch格式，非常方便，如下图。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; "><img alt="Android应用开发笔记(10)：制作自定义背景Button按钮、自定义形状Button的全攻略 - 心灵之窗 - 我的博客我做主" src="http://img768.ph.126.net/q7UoNFtFFYLz06jL60GsDQ==/1259600520781476663.jpg" style="line-height: 22px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 100%; " /><img alt="Android应用开发笔记(10)：制作自定义背景Button按钮、自定义形状Button的全攻略 - 心灵之窗 - 我的博客我做主" src="http://img242.ph.126.net/OpGIV-Ja41EUtyV9bpcpbQ==/1431863206529119085.jpg" style="line-height: 22px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 100%; " /></div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">draw9patch工具的右侧是能够看到各方向拉伸后的效果图，你所要做的就是在图上最外侧一圈1px宽的像素上涂黑线。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">注意，在draw9patch.bat第一次运行时，sdk2.2版本上会报错：java.lang.NoClassDefFoundError:org/jdesktop/swingworker/SwingWorker。需要下载swing-worker-1.1.jar ，放入$android_sdk/tools/lib路径下，成功运行。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">此种方法实现的步骤如下。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">(a) 使用draw9patch.bat作完图片后，得到两张按钮背景，分别是正常和按下状态下的，命名为bg_btn.9.png和bg_btn_2.9.png。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">(b) 编写图片使用描述文件bg_9patchbutton.xml。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">// in bg_9patchbutton.xml &nbsp;&nbsp;</div><div style="line-height: 22px; ">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt; &nbsp;</div><div style="line-height: 22px; ">&lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;item android:state_pressed=&quot;true&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:drawable=&quot;@drawable/bg_btn_2&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;item android:state_focused=&quot;true&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:drawable=&quot;@drawable/bg_btn_2&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;item android:drawable=&quot;@drawable/bg_btn&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&lt;/selector&gt; &nbsp;</div><div style="line-height: 22px; ">// in bg_9patchbutton.xml</div><div style="line-height: 22px; ">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</div><div style="line-height: 22px; ">&lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&lt;item android:state_pressed=&quot;true&quot;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; ">  </span>android:drawable=&quot;@drawable/bg_btn_2&quot; /&gt;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&lt;item android:state_focused=&quot;true&quot;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; ">  </span>android:drawable=&quot;@drawable/bg_btn_2&quot; /&gt;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&lt;item android:drawable=&quot;@drawable/bg_btn&quot; /&gt;</div><div style="line-height: 22px; ">&lt;/selector&gt;&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">(c) 在界面定义文件 layout/main.xml中添加Button、ImageButton按钮控件的定义。Button、ImageButton都是可以使用背景属性的。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">&lt;Button &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:layout_width=&quot;120dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:layout_height=&quot;40dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:text=&quot;9-patch图片背景按钮&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:background=&quot;@drawable/bg_9patchbutton&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&lt;Button &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:layout_width=&quot;200dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:layout_height=&quot;40dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:text=&quot;9-patch图片背景按钮&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:background=&quot;@drawable/bg_9patchbutton&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&lt;Button &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:layout_width=&quot;120dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:layout_height=&quot;80dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:text=&quot;9-patch图片背景按钮&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:background=&quot;@drawable/bg_9patchbutton&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&lt;ImageButton &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:layout_width=&quot;120dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:layout_height=&quot;40dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:src=&quot;@drawable/bg_9patchbutton&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:scaleType=&quot;fitXY&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;android:background=&quot;@android:color/transparent&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;Button</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:layout_width=&quot;120dip&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:layout_height=&quot;40dip&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:text=&quot;9-patch图片背景按钮&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:background=&quot;@drawable/bg_9patchbutton&quot; /&gt;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;Button</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:layout_width=&quot;200dip&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:layout_height=&quot;40dip&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:text=&quot;9-patch图片背景按钮&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:background=&quot;@drawable/bg_9patchbutton&quot; /&gt;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;Button</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:layout_width=&quot;120dip&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:layout_height=&quot;80dip&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:text=&quot;9-patch图片背景按钮&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:background=&quot;@drawable/bg_9patchbutton&quot; /&gt;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;ImageButton</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:layout_width=&quot;120dip&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:layout_height=&quot;40dip&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:src=&quot;@drawable/bg_9patchbutton&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:scaleType=&quot;fitXY&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:background=&quot;@android:color/transparent&quot; /&gt;&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">以上2种实现按钮的美化，都是标准的矩形按钮为基础。在一些应用中我们可以看到漂亮的自定义形状的异形按钮，这是怎么实现的呢？经过一番研究和实践，找出了一种方便的方法，就是使用ImageButton加上9-patch就可以实现漂亮的自动延伸效果。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">3. 自定义形状、颜色、图样的按钮的实现&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">步骤如下。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">(a) 设计一张自定义形状风格背景的图片，如下图。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">&nbsp;<img alt="Android应用开发笔记(10)：制作自定义背景Button按钮、自定义形状Button的全攻略 - 心灵之窗 - 我的博客我做主" src="http://img768.ph.126.net/78dhxRxiXBueiStGLZ9waQ==/1259600520781476665.jpg" style="line-height: 22px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 100%; " /></div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">(b) 未点击和按下后的状态各做一张，形成一套图片，如下图。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; "><img alt="Android应用开发笔记(10)：制作自定义背景Button按钮、自定义形状Button的全攻略 - 心灵之窗 - 我的博客我做主" src="http://img768.ph.126.net/tv_fDfi3PBDQqd5PfomZCg==/1259600520781476681.png" style="line-height: 22px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 100%; " /><img alt="Android应用开发笔记(10)：制作自定义背景Button按钮、自定义形状Button的全攻略 - 心灵之窗 - 我的博客我做主" src="http://img858.ph.126.net/T0a7HercT6jN-y7jqMpeNQ==/665125369968311409.png" style="line-height: 22px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 100%; " /></div><div style="line-height: 22px; ">&nbsp;forward.png &nbsp; &nbsp;forward2.png</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">(c) 创建和编写按钮不同状态的图片使用描述文件drawable/ib_forward.xml</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">// ib_forward.xml &nbsp;&nbsp;</div><div style="line-height: 22px; ">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt; &nbsp;</div><div style="line-height: 22px; ">&lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;item android:state_pressed=&quot;true&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:drawable=&quot;@drawable/forward2&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;item android:state_focused=&quot;true&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:drawable=&quot;@drawable/forward2&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;item android:drawable=&quot;@drawable/forward&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">&lt;/selector&gt; &nbsp;</div><div style="line-height: 22px; ">// ib_forward.xml</div><div style="line-height: 22px; ">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</div><div style="line-height: 22px; ">&lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&lt;item android:state_pressed=&quot;true&quot;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; ">  </span>android:drawable=&quot;@drawable/forward2&quot; /&gt;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&lt;item android:state_focused=&quot;true&quot;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; ">  </span>android:drawable=&quot;@drawable/forward2&quot; /&gt;</div><div style="line-height: 22px; "><span style="line-height: 22px; white-space: pre; "> </span>&lt;item android:drawable=&quot;@drawable/forward&quot; /&gt;</div><div style="line-height: 22px; ">&lt;/selector&gt;&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">(d) 在界面定义文件 layout/main.xml中添加ImageButton按钮控件的定义。</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">&nbsp;</div><div style="line-height: 22px; ">// in layout/main.xml &nbsp;&nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;ImageButton &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:layout_width=&quot;80dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:layout_height=&quot;40dip&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:src=&quot;@drawable/ib_forword&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:scaleType=&quot;fitXY&quot; &nbsp;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;android:background=&quot;@android:color/transparent&quot; /&gt; &nbsp;</div><div style="line-height: 22px; ">// in layout/main.xml</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;&lt;ImageButton</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:layout_width=&quot;80dip&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:layout_height=&quot;40dip&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:src=&quot;@drawable/ib_forword&quot;</div><div style="line-height: 22px; ">&nbsp;&nbsp; &nbsp;<span style="line-height: 22px; white-space: pre; "> </span>android:scaleType=&quot;fitXY&quot;</div></span><span class="Apple-style-span" style="color: rgb(103, 102, 21); font-family: Arial, Helvetica, simsun, u5b8bu4f53; font-size: 14px; line-height: 22px; background-color: rgb(249, 248, 247); ">&nbsp; &nbsp; &nbsp;android:background=&quot;@android:color/transparent&quot; /&gt;&nbsp;</span></p>]]></description><category>Study</category><comments>http://www.wenso.com/post/272.html#comment</comments><wfw:comment>http://www.wenso.com/</wfw:comment><wfw:commentRss>http://www.wenso.com/feed.asp?cmt=272</wfw:commentRss><trackback:ping>http://www.wenso.com/cmd.asp?act=tb&amp;id=272&amp;key=92f0f689</trackback:ping></item></channel></rss>

