《Foundation flex for designers》第一章译稿放出(附PDF)
各位AIRIA的朋友，你们好，怀着对Adobe这一系列特别是Flex的喜爱，不才申请了一项“协同翻译计划”，希望以自己绵薄之力为Flex的推广，作一点贡献，详情参见：http://bbs.airia.cn/UIdesign/thread-10176-1-1.aspx
个人觉得，《Foundation flex for designers》是一本UI设计类的入门好书，但如我这样E文怎么好的学习者，读起来速度很慢，而且容易急躁，影响学习效果，如果能比较流畅地翻译出来，一来可以在以后的温习中方便查阅，二来可以帮助需要看懂这本书的朋友争取点时间，算得上是一件利人利己的好事。
目前Flex的中文资料非常匮乏，坛子里几位前辈翻译的cookbook等，给我们竖立了好榜样，我觉得无论是出于锻炼自己的目的，还是为Flex推广作贡献的目的，都可以利用空闲的时间来做一做相关的事情。
话不多说了，这是我利用周六的时间匆匆忙忙赶出的稿子，加上E文本身不是很灵光，所以效果可能连差强人意都达不到，只希望能抛砖引玉，让更多的高手加入进来，期待你的加盟。
页面贴出来的是没有格式并没有带图的版本，因为内容比较多，请原谅不能细调，但文字内容都在这里，有兴趣的朋友下载pdf版本，方便阅读，有问题请留言、站内或者邮件联系。
内容截图：
临时目录
第一章 Flex 与Flex Builder 3 介绍 2
1.1 富互联网应用 3
1.2 创建你的第一个项目 3
1.3 Flex Builder 3界面 5
1.4 Flex Builder 3组件 7
1.5 Flex动态布局 10
1.6 显示内容 11
1.7 导入网页内容到Flex中 14
1.8 消息源和局限性 18
1.9 格式化消息内容(Feed) 18
1.10 小结 20
第一章
FLEX与FLEX BUILDER 3介绍
---------------------------------------------------------------------
本章我们将要涉及的内容：
Flex Builder界面
使用布局组件
使用控制组件
动态样式布局
本章将会使用到的文件：
完整示例压缩文件: Chapter1-completedExample.zip、Chapter1Code.rtf
我们先从整体知识开始了解，然后深入我们的学习。Flex 是现在所说的Adobe Flash平台的一部分。我们通过大量的Flash网页应用已经了解到什么是动态交互工具，Flash平台就是这一系列工具组成的大家族。其中包括手机和PDA上的移动应用技术-Flash Lite，高度交互页面的主导者—Flash，专注于富互联网应用的Flex，以及专注桌面应用的AIR。每一种工具都有其侧重的方面和不同的应用环境，但是它们全都是用相同的技术引擎，特别是相同的编程语言-ActionScript。
这些工具组合在一起可以让你创建交互性页面和程序应用，这些程序运行在手机、web服务器或你的电脑桌面上，并且无需页面重新加载就可以保持高度一致的交互性。
1.1 富互联网应用
在不同的应用环境下，Flex的目的都是创建富互联网应用，也可称之为富多媒体页面应用，这些应用类似于传统网页但是比之更具功能性。举个例子来说，一个或许是基于Flash或HTML上的以展现你可以购买的手机列表的页面，我们称其为网站最为贴切。一个允许你通过价格和功能组织这个列表并且让你订购你想要的物品的网页则是对富互联网应用最好描述。
诚然，Flash允许你创建页面应用，但是它将涉及很多从零开始的创建工作，花费很长的时间和巨大的经费。Flex的预建对象(prebuilt objects)可以修改使用或直接使用，以使复杂程序运行更快更简单。预建对象是Flex框架的一部分，是一些让开发更加简单的代码库和应用服务的集合，这些服务包括数据绑定、拖拽管理和可视化效果等等。
使用预建对象在许多项目中影响很大，一个团队可以创建它们并且在生产过程中发挥作用。
1.2 创建你的第一个项目
我们将要创建的第一个项目是一个简单网页内容阅读器(web feed reader)，给你一个Flex工作流程的初步概念。如果你还不熟悉什么是网页内容阅读器,就要了解到它是一个可以阅读并呈现网页内容如你站点上的博客(blog)的程序。网页内容(web feed)本质上是包含你正在浏览的博客内容的XML文件，你可以看看已经完成的网页内容阅读器示例，见：
http://lordalex.org/flex4designers/atomreader/AtomReader2.html
一旦你安装完并打开Flex，你应该能看到各种各样的面板(panel),最突出的是Flex开始页，如图1-1所示。
Flex开始页面让你可以快速得到帮助手册和Flex Builder 3自带的示例文件。它们是很有作用的，我们将在第二章使用到。而现在，让我们创建一个新项目来看看开发模式界面。
当你要新建一个项目时，会发现比起大部分编程语言来有更多的选择，这就是你对Flex可能是非常强大工具的初步印象。
图1-1 Flex开始页面
1. Select File New Flex Project创建新项目，如图1-2所示：
图1-2 创建新项目
2. 新Flex项目对话框(如图1-3所示)容许你为项目命名并定义任意你选择使用的服务端(Server)。在我们的例子中，我们将使用XML，这样并不需要特殊的服务端定义。将项目命名为： atomReader。
图1-3 新Flex项目窗口
在这个对话框中(见图1-4)，你还可以设置项目类型为页面应用程序(默认)或者桌面应用（AIR）程序。
3. 注意项目的位置，这个位置是所有项目相关文件创建的地方，并且之后在你往文件夹下添加额外文件时非常重要。点击Finish完成项目创建。
图1-4 注意项目位置
1.3 Flex Builder 3界面
让我们纵观一下Flex builder 3 跟以往使用的工具的异同点（见图1-5），Flex界面对那些使用Dreamweaver(比如具有从设计到代码查看的转换功能)工作和使用Flash(比如具有左侧组件列表)工作的人来说或多或少有些似曾相识。但操作界面刚开始还是会让人感到有些陌生，比如Flex属性框(properties)，就与其他的编程语言明显不同。可能大部分设计者会想知道：“我的绘制工具在哪里？”答案就是：“没有了。”不过不用担心—Flex与其他专注图形绘制的软件衔接得很友好，我们将会在第四章看到Flex如何与Fireworks协同工作，也会在第五章看到它如何跟Photoshop还有Illustrator协作的。
图1-5 Flex设计视图模式
界面第一个重要部分是导航面板(navigator panel)，位于屏幕的左上方。注意我们的项目跟一些Flex Builder自动为我们创建的文件夹就在这个面板里。现在最主要的文件是atomReader.mxml，这个文件含有我们项目的主体布局和设计信息，我们可以把它看做HTML项目里的index.html文件。你的主要使用区域是包含MXML 编辑器(见图1-6)的界面中心部分。这个区域在你选择源文件(source)标签时展示MXML文件的代码界面，在你选择设计(design)标签时展示MXML文件的绘制界面。在绘制视图模式，你可以拖拽组件，让我们现在就来尝试一下。
图1-6 MXML编辑器
1.4 Flex Builder 3组件
Flex中的设计更多地使用预建组件，在这些组件基础上修改或定制要比每次都从零开始设计好得多。这也是为什么Flex通常能让你比使用其他语言更快速地创建成熟应用。它也给你一些工具来定制视觉化效果、动作和组件交互以创建有新意有个性的界面。这些组件可以在组件面板(component panel)找到(见图1-7)。你需要注意的第一件事是它们的数量比较多，这是因为在创建应用的时候它们可以做很多繁重的工作，并且能覆盖大部分程序的需要，比如按钮、控制导航以及垂直菜单系统。
图1-7 组件面板
我们需要的第一个组件是面板组件(panel component)，你可以在布局类(layout)文件夹下找到它，拖放面板组件到MXML编辑器中，它就会自动摆放如图1-8所示。
图1-8 MXML编辑器中的面板组件界面
这是一个了解MXML的精准性以及拖拽一个组件到MXML编辑面板过程的好机会，在MXML编辑器中有两种方式观察程序的布局。图1-8展示了设计视图模式下的面板组件。
如果你切换到源文件(source)视图模式(见图1-9),你就可以看到程序创建组件使用的后台代码了。
图1-9 从设计模式到源文件模式的切换
你可以在图1-10中看到代码，代码的结构类似于XML，因为MXML本身是基于XML语言的，并且你要使用MXML代码来为你的程序布置用户界面。第一行是使用的XML版本信息，第二行定义“application”，我们要在这个“application”标签内放置我们的组件。你可以看到“application”标签内我们在设计视图模式放置的面板组件。“Panel”标签以<mx:Panel …>开始，包含了一些组件属性，并以</mx:Panel>结束。到现在为止，这个标签里的属性只包含默认大小与我们创建这个组件时的所处位置数据。你可能也注意到界面在我们转换到源文件视图模式时发生了变化，这是因为源文件视图模式下工作与设计视图模式下工作有很大的不同，我们不再看到组件面板，原因是在源文件视图模式下，你可以直接使用MXML标签编写组件代码，类似的，属性面板也会消失因为我们可以在标签内直接编写组件属性，这种工作方式对开发者来说更人性化。MXML标签使用数量庞大的ActionScript脚本让组件合理化功能化。这些都发生在底层，因此我们没有必要担心ActionScript方面的事情，我们仅仅需要担心设置问题。
图1-10 面板组件的MXML源代码
跳回到设计视图模式，我们可以重新看到组件的界面，在右侧，你也将看到属性面板(见图1-11)，属性面板容许你控制组件的属性，如大小、名称、颜色和布局等，我们将会在接下来的章节中学习如何使用这些属性来控制组件的可视化与其他效果。而现在，让我们给这个面板一个ID叫“mainPanel”，以容许我们在之后调用它。还有标题(title)，如果说ID类似于Flash的实例名，那么Title就类似标签(label)。我们在标题栏键入”Easy Atom Reader”(见图1-12)。
图1-11 组件的属性面板 图1-12 面板组件的ID与Title
1.5 Flex动态布局
我们要进一步处理面板组件(panel)。Flex擅长于让设计流畅，比如我想要当浏览器的大小发生改变时，正文也发生改变以利用可用的空间。那么，你可以通过设置你的面板组件与边界的距离而不是长度和宽度来控制大小。
滚动屏幕浏览属性面板，你将发现布局(layout)选项(见图1-13)。
图1-13 属性面板中的布局选项
面板组件有四个系列布局处理方案，每一种方案都可以设置锚定(anchor)、不锚定(unanchored)与中央(center)三种方式。通过设定它们为锚定，则组件将会保持一定的比例直到被设置了到程序边界的像素值或者组件被嵌套。设置布局处理方案为锚定的也会在组件布局属性中产生一个字段以让你设置你想要的组件到程序边界的锚定像素值。设置好四个布局处理方案为锚定并且设置每一个锚定值为20像素(px)(见图1-14)，则会得到20像素宽度的隔离区域。
图1-14 提交这些布局设置
点选菜单上的”Run”按钮(你可以点击绿色的，play按钮)以测试程序布局，将会在你的默认浏览器中打开你的项目。
改变浏览器的大小以测试动态设计是如何工作的。
（译者注：在Flex Builder 3.0.2中使用的方式是图形的，操作类似）
1.6 显示内容
面板组件(panel)的白色区域是内容区，因此接下来我们需要放置我们想要的内容进去，因为RSS消息是文本型(text)的，我们需要放置一个文本区，你可以在组件面板的控制类(controls)文件夹下找到TextArea组件，并把它拖拽放置到面板组件的白色区域，放置到内容区域后，它就可以随着面板组件而调整(见图1-15)，移动TextArea组件到面板组件的左上角，并拖住其右下角拉伸直到填满整个面板组件的白色区域为止，如图1-16所示。
图1-15 面板组件上的TextArea组件
图1-16 使用TextArea组件填满整个面板组件内容区
给TextArea组件一个显示ID(注意图1-16中属性面板的ID字段)。在属性面板的Text字段内，设置其内容为{feed.lastResult}（见图1-16中的Text字段位置），很快我们就会设置好消息来源(feed)，这个text将会让一部分消息放入到文本区中。设置文本区的布局处理方案为锚定，如图1-17所示，这将使得文本区域填满整个面板组件内容区而不用理会浏览器窗口的大小。
图1-17 TextArea的布局容器
接下来让我们放置一个控制条(ControlBar)布局组件到面板组件的底部，如之前所做的一般拖拽组件(如图1-18所示)，你可以通过改变布局属性来改变控制条的高度，50是一个比较好的高度值。在一个面板组件中，内容可以基于用户交互发生改变，控制条让你在组建面板上保持一些元素，通常是一些按钮和其他控制内容的组件。
在控制条上，通过从组件面板控制类文件夹中拖拽放置一个TextInput组件---见下节中的图1-19。这个区域将保存我们想要引入的网页内容URL，如你马上要看到的。
图1-18 增加一个控制条组件
1.7 导入网页内容到Flex中
现在我们要导入并在我们的Flex程序中显示网页内容—我们所说的内容是指你所见的博客和新闻页面等等，我们将使用一个Atom Feed,定位到http://www.lordalex.org/atom.xml，作为默认的消息来源显示。Atom是Blogger.com使用的格式，它与其他格式共存，如RSS1.1和RSS2.0。这些格式仅仅是展现包含网页内容文本的XML方式不同。因为每一种格式采用不同的XML结构，所以需要不同的处理方式，这就要求大量的ActionScript脚本。为了保持这次练习侧重于设计者(designer)处理程序组件布局，我们决定只采用一种格式。
放置网页内容的URL到TextInput组件的text属性中，我们可以在运行时改变引入的网页内容，我们也需要为这个组件限定一个ID以方便我们今后维护这个代码。
给TextInput一个ID为urlFeed,并键入http://www.lordalex.org/atom.xml作为文本内容，这个TextInput将调整它自身的大小以适应文本内容，或者你也可以拉伸它为你选择的大小(见图1-19)。
图1-19 TextArea组件
现在我们需要一个按钮触发这些事情，按钮组件在组件面板的控制类文件夹内第一个位置。
如前番一样操作，在控制条的TextInput旁边放置按钮，如图1-20所示。
将按钮标签(label)设置为“LoadFeed”。尽管它不是必需一个ID，但是最好还是为每一个组件设定唯一的ID，所以键入“loadButton”作为其ID。
告诉我们当按钮被点击时应该怎么做的按钮属性被称为Onclick，键入“feed.send()”作为它的值(注意这在图1-20所示的属性面板中)，这样做会发送inputText的URL作为我们的消息来源，以容许我们改变URL指向网页内的任意点。
现在我们仅仅需要创建消息来源(feed)，通常情况下这个操作需要一点点编码，但是我们将最简单直接地使用HttpService标签调用消息来源(feed)。
图1-20 按钮组件
我们转换到源文件视图模式，因为你需要写入一些代码，花一点时间看看图1-21中的代码，然后将你的项目编写成一样的。
图1-21 MXML源代码
你可以看到我们的每一个组件都以类似XML标签的形式呈现。这些标签包含我们在设计视图模式所做的一切设置，并且它们的每一个属性同样都可以在这里修改。我们要在第三行前加入一行代码，见图1-22。
图1-22 HTTPService标签
让我们将这一行拆分来看以了解它的工作方式，首先，我们定义了一个HTTPService并设定了它的id--feed，注意这就是我们在别的组件中调用消息来源(feed)所用的名字。比如TextInput就有{feed.lastResult}的属性内容并且我们的按钮也有feed.send()属性内容。接下来的代码片段中，url=”{urlFeed.text}”，通知HTTPService去寻找我们inputText组件(我们称之为urlFeed)定位的消息来源位置。代码的最后一部分，resultFormat=”e4x”，定义了引入的消息格式，这是个更偏向于开发者(developer)的主题，但是ECMAScript for XML(E4X)对设计者来说也是非常有用的，可以使用更直接的方式引入XML数据。这个result=”{onResult(event)}”定义了何时消息来源会被调用。
传统的做法，导入XML数据包含一系列复杂的循环以组织数据。使用E4X方法，你可以利用名称和数据在XML文件中的位置得到信息。举例而言，如果你想得到第三个位置的标题(title)，你可以用xmlData[3].title得到，这是一个比以往都要简单的处理方式。
将这一行代码添加到源文件中。
让我们看一看至今为止创建的成果，点选“RunRun atomReader”，如图1-23所示。
图1-23 点选Run菜单的Run atomReader
你可以在www.friendsofed.com下载本书的所有源代码，并在其中找到这个项目的相关文件。
项目的输出界面如图1-24所示。
图1-24 文本未预处理的Atom Reader
1.8 消息源和局限性
因为这个Atom Reader直接寻找创建这个特定博客的XML文件，要打开不同的博客你将需要直接指定其XML文件，大多数时候就像增加一个“/atom.xml”到URL上一样简单，比如用“http://www.myBlog.com”，你就只需键入“http://www.myBlog.com/atom.xml”。
有一些情况下这个程序不能正常工作，如果博客使用了不同的格式，如之前提到的RSS2.0，它将不会显示，它也可能在人为将博客放置atom.xml的位置改变成非默认值以防止外部读取时不能工作。还有一个重要的原因使得程序不能正常工作：对Flex与Flash技术，要接收来自不同站点的消息，这些站点必须有crossdomain.xml文件，这是一个保存在服务器端的小文件，但是它负责给Flex或Flash授权容许接入。这样做是为了安全考虑而且大部分博客网站都有这个文件。排除这些因素能让这个阅读器更健壮，但是同时需要大量的ActionScript脚本，为了不使这个章节走向编码练习，我们决定即便有时不能正常工作，也要保持技术上的简单性。
1.9 格式化消息内容(Feed)
你可能会注意到文本看来有些杂乱，那是因为仅仅加载了XML文件的缘故。这也是在没有任何格式化处理或者组织的情况下，XML文件本身的样子。组织一个XML文件比较有名的方式如语法分析和将XML的各部分放入变量中。要分析和格式处理XML，我们需要了解XML的本质并通过ActionScript操作XML。这又有些进入开发者的领域了，因此我们使用现成的代码，它被包含在可从www.friendsofed.com下载到的源代码包中Chapter1文件夹内，这个文件名字为“RSSFormattingCode.txt”。尽管这些代码通常由你的开发者创建，但还是建议你通读一遍，特别是如果你不是单纯的设计者还要做一些编码的情况下。
从text文件中复制代码到你的项目中的源文件，在我们刚刚加上的HTTPService那一行之上。如图1-25所示，任何你放置到MXML中的脚本都在<mx:script></mx:script>标签内。
完整脚本可以在这本书的附带源代码压缩包内的Chapter1Code.rtf 文件中找到。概括而言，这些代码所做的工作就是把从消息源(Feed)得到的信息抽取成需要的一片一片(特别是标题和摘要)，再使用文本变量将它们串在一起，同时增加一些文本格式。
让我们更进一步，整个ActionScript都包含在<mx:Script>标签内，这有助于保持代码的可组织性并与MXML分离开。我们创建一个命名为“xmlData”的数组(array)，用来保存所有的实体，然后创建一个for循环将标题和每一部分的摘要放入命名为currTitle和currSummary的变量中。接着将这两个变量内容用文本串起来并放入命名为currPost的变量中。当我们将其串起来时，我们要增加<strong>标签到标题的周围让它显示成粗体，并且\n\n标签让我们将标题与摘要分开。然后要做的是将刚串起来的部分衔接到先前已完成操作的部分之后，最后一步是将这一列长文本以HTML文本格式传入到我们的显示文本区。
图1-25 进行格式化处理的脚本
我们可以看到创建的函数在这里是“onResult”，我们会在第七章研究ActionScript3.0函数。现在则需要知道这个函数如何工作。我们在HTTPService中调用这个函数，因此我们的HTTPService现在看起来如图1-26所示
图1-26 更改后的HTTPService
现在将这个改变应用到HTTPService标签上。
再一次运行项目，我们的RSS输出现在看起来如图1-27所示。通过这种方式，我们创建了第一个Flex应用程序，使用了分析XML的语法的代码，项目将包含的预建组件组织在一起并让它们相互协作。先保留这个文件，到下一章我们会学习使用Cascading Style Sheets（CSS）来定制我们的Atom Reader视觉效果。
图1-27 浏览器中格式化后的Atom Reader
1.10 小结
通过这个例子，你已经开始了解如何创建Flex应用程序，并且对Flex Builder用户界面也更为熟悉。你已经掌握了创建Flex应用程序的技巧，考虑使用已有的组件而不是从头开始创建。可以在两个不同的视图模式下进行布局设置：设计视图模式和源文件视图模式。后者以可直接修改的代码展示MXML，而前者通过可视化界面展示MXML。发生在某一个视图模式下的任何改变都会影响到另一个视图模式。你也看到使用Flex工作时设计者与开发者的关系。在下一章节，我们要开始使用CSS控制我们应用程序的视觉效果。
《Foundation flex for designers》第一章.part1.rar (您是游客您没有权限下载)
《Foundation flex for designers》第一章.part2.rar (您是游客您没有权限下载)