《Foundation Flex for Designers》 《FLEX设计师基础》 中文 目录

第一章  介绍 Flex 和 Flex Builder 3. . . . . . . . . . . . . . . . . . . . . 3
第二章 FLEX样式设计入门 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
第三章 FLEX设计入门 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
第四章 利用Fireworks进行FLEX设计 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
第五章 运用Photoshop、Illustrator进行FLEX设计 . . . . . . . . . . . . . . . . . . . 91
第六章 Flex 与 Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
第七章 Flex中的ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
第八章 Flex 图片. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
第九章 Flex 视频. . . . . . . . . . . . . . . . 177
第十章 FLEX图表设计 . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
第十一章 FLEX表单设计
第十二章 认识Flex与 AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

第一章  介绍 Flex 和 Flex Builder 3. . . . . . . . . . . . . . . . . . . . . 3

关于富互联网应用(RIA) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
创建你的第一个项目 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
熟悉FLEX3中的各个面板 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
认识Flex各个组件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Flex的布局 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
显示内容 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
设计一个RSS阅读器 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
格式化feed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
本章总结. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

第二章 FLEX样式设计 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

在FLEX应用样式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Flex 样式工具的运用(下载) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
介绍按钮样式工具的使用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
介绍CSS样式工具的使用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
面板风格、文字样式和文本框的样式工具 . . . . . . . . . . . . . . . . . . . . . . . . . 32
整合一组样式 . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
将风格加入到FLEX项目中 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
一个巧妙的设计方式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
本章总结 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

第三章 FLEX设计入门 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

例子：设计一个个人主页 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
 -设计操作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
 -设计基础页面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
 -创建"States panel" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
 -设计项目样式. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
本章总结 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

第四章 利用Fireworks进行FLEX设计 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

在Fireworks中创建FLEX布局 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
在Fireworks进行设计 . . . . . . . . . . . . . . . . . . . . . . . . . 73
在Fireworks中设计FLEX组件样本 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Fireworks中的对齐和剪切功能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
修改图片 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
使布局加入到FLEX项目中 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
本章总结 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

第五章 运用Photoshop、Illustrator进行FLEX设计 . . . . . . . . . . . . . . . . . . . 91

了解一个按钮的8中状态 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
在Photoshop中创建风格 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
连接 Photoshop 风格 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
关于“Scale 9”切片工具 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
使用CSS设计模式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
在AI中创建SWF文件并引用到FLEX . . . . . . . . . . . . . . . . . . . . . 104
到处AI样式到FLEX builder . . . . . . . . . . . . . . . . . . . . . . . . . 110
本章总结 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

第六章 Flex 与 Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
设置Flash 和 Flex的整合 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
在FLASH中创建FLEX风格 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
设计动画 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
从FLASH到FLEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
在FLEX中导入FLASH动画 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
在FLASH制作FLEX组件 . . . . . . . . . . . . . . . . . . . . . . . . . . 129
本章总结 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

第七章 Flex中的ActionScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
概述 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
什么是面向对象编程? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
什么是ActionScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
什么是MXML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
一些关键的ActionScript概念 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
理解 “packages”的意义 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
类和对象 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

第八章 Flex图库案例. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153

基本操作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
构建缩略图面板 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
图片布局. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
图形调整 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
repeaters. . . . . . . . . . . . . . . . . . . . . . . 166
创建浏览面板. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
连接缩略图和浏览面板. . . . . . . . . . . . . . . . . . . . . . . . . 170
加入一些声音 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
项目收尾 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
本章总结 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

第九章 Flex 视频案例. . . . . . . . . . . . . . . . 177

在Flex运用拖拽 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
LIST控件的拖拽. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
手动新增拖放支持 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
视屏播放设计 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
加入拖拽功能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
本章总结 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

第十章 FLEX图表设计 . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

导入项目到FLEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
了解ActionScript涉及内容 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
构建布局. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
添加"DataGrid" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
创建一个柱形图 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
通过CSS设计图标外观 . . . . . . . . . . . . . . . 206
创建线图与动画. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
创建一个饼图 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
增加二组数据 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
本章总结 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

第十一章 FLEX表单设计案例

注册页设计 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
入门 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
添加折叠面板组件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
添加面板 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
添加内容 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
添加组合框 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
验证 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
密码管理. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
利用FLEX设计工具设计折叠面板 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
本章总结 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

第十二章 认识Flex与 AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
创建一个AIR项目 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
建立媒体中心布局 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
 ActionScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
FileSystemTree功能 . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
添加其他部分 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
添加CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
导出AIR包. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
控制应用程序窗口 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
去除默认面板 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
重新创建功能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
添加拖拽功能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
本章总结 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Chapter 1 Introducing Flex and Flex Builder 3. . . . . . . . . . . . . . . . . . . . . 3
Chapter 2 Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Chapter 3 Working with States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Chapter 4 Flex and Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Chapter 5 Flex with Photoshop and Illustrator . . . . . . . . . . . . . . . . . . . 91
Chapter 6 Flex Builder and Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Chapter 7 ActionScript in Flex. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Chapter 8 Flex Photo Gallery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Chapter 9 Flex Video Gallery with Drag-and-Drop. . . . . . . . . . . . . . . . 177
Chapter 10 Exploring Flex Charting . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Chapter 11 Creating Forms: The “Will Flex for Food”
Registration Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Chapter 12 Flex and AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

Chapter 1 Introducing Flex and Flex Builder 3. . . . . . . . . . . . . . . . . . . . . 3
Rich Internet applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Creating your first project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
The Flex Builder 3 interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
A first look at Flex components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Flex fluid layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Displaying content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Pulling in web feeds to Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Sources of feeds and limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Formatting the feed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Chapter 2 Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Using styling in Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
The Flex Style Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Playing with button styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
CSS in the Style Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Styling panels, text areas, and text inputs . . . . . . . . . . . . . . . . . . . . . . . . . 32
Styling the whole application at once . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Getting the style back into our applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
A more subtle design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Chapter 3 Working with States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Building a personal website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Setting up the project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Building the base state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Creating a new state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Styling the project. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Chapter 4 Flex and Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Creating a Flex layout in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Importing and manipulating images in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . 73
Organizing Flex Components in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Using Fireworks to align and refine a layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Modifying the images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Bringing the layout into Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Chapter 5 Flex with Photoshop and Illustrator . . . . . . . . . . . . . . . . . . . 91
Anatomy of a button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Building skins in Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Connecting Photoshop skins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Scale 9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Using the CSS Design view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Skinning Flex components in Illustrator using SWF files . . . . . . . . . . . . . . . . . . . . . 104
Importing the Illustrator skins into Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . 110
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Chapter 6 Flex Builder and Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Setting up to integrate Flash and Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Creating Flex skins in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Adding animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Bringing in a texture for a Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Going from Flash to Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Importing Flash animations into Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Integrating Flash and Flex in a deeper way . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Chapter 7 ActionScript in Flex. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
What is object-oriented programming? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
What is ActionScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
What is MXML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Some key ActionScript concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Understanding packages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Classes and objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Access modifiers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Variables arrays and collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Accessing external data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
E4X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
SWFLoader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
ActionScript and MXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Importing ActionScript classes into Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Maintaining your code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Controlling flow with events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Binding data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Chapter 8 Flex Photo Gallery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Starting off . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Building the Thumbnails panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
The Tile component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Proper alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Bringing in the XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Getting the computer to do the work: repeaters. . . . . . . . . . . . . . . . . . . . . . . 166
Creating the View panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Connecting the Thumbnails and View panels. . . . . . . . . . . . . . . . . . . . . . . . . 170
Adding some sizzle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Finishing touches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Chapter 9 Flex Video Gallery with Drag-and-Drop. . . . . . . . . . . . . . . . 177
Drag-and-drop in Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Drag-and-drop with List controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Manually adding drag-and-drop support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Altering the file to work with video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Writing the drag-and-drop functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Chapter 10 Exploring Flex Charting . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Importing a project into Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
A look at the ActionScript involved . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Building the layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Adding the DataGrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Creating a column chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Controlling the visual appearance of a chart through CSS . . . . . . . . . . . . . . . 206
Creating a line chart with animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Creating a pie chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Adding a second set of data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

Chapter 11 Creating Forms: The “Will Flex for Food”
Registration Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Adding the Accordion component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Adding panes to the Accordion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Adding content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Adding combo boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Working with validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Passwords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Filling the Final Thoughts pane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Styling your Accordion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Chapter 12 Flex and AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Creating a new AIR application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Building the Media Center layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
The ActionScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Connecting FileSystemTree to functions . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Adding the remaining components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Adding CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Exporting an AIR package. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Controlling the application window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Getting rid of the box. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Re-creating the functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Adding the drag functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261