Flex美化应用.ppt

第18章Flex美化应用 第17章中详细介绍了使用CSS美化界面的用法 本章将为读者介绍更多的美化应用 如自定义字体 自定义光标等 18 1自定义字体 在开发Flex应用程序时 字体是最基础的内容之一 Flex4 0支持有限的系统字体 用户若要使用其他系统字体 需要导入字体 另外 用户也可对字体的大小 颜色等常用属性进行更改 以满足特殊的需要 18 1 1自定义字体概述 字体文件的格式为 ttf 但同是TTF格式的字体文件也分为系统字体和非系统字体 Flex4 0现只能使用系统字体 对于非系统字体 只能采用图片形式 Flex4 0可以支持系统字体 但并非全部的系统字体都可直接使用 Flex4 0由于是英文版本 所以对中文字体的支持并不好 经测试 只有少量的中文字体可在Flex中使用 18 1 2使用Flex支持的系统字体 Flex4 0中支持的西文系统字体包括Arial TimesNewRoman CourierNew Georgia Verdana等 Flex4 0中支持的中文系统字体包括宋体 华文楷体 华文细黑 华文仿宋 华文中宋 18 1 3使用Flex不支持的系统字体 若用户需要使用特殊的系统字体 如nina fences等 可先引用TTF文件 src表示字体文件的路径 一般放于工程目录下 fontFamily表示用户自定义该种字体的名称 18 2自定义提示文本 提示文本是指鼠标移动到该组件上时弹出的说明文本 大部分组件都有toolTip属性 用以定义提示的文本内容 按下Ctrl F11快捷键编译运行程序 18 3自定义光标 Flex4 0中提供的光标很少 只有普通箭头 忙时光标等少数几种 用户可以使用CursorManager类自定义光标 CursorManager类为光标的管理类 包含于 mx managers 中 18 4自定义AIR程序窗口外观 AIR应用程序作为桌面应用程序与一般的Flex程序略有不同 AIR应用程序中每一个MXML文件都有一个与之同名的XML文件 AIR工程中每创建一个MXML文件 都会自动生成一个同名的XML文件 此XML文件记录了MXML文件生成应用程序时的外观及相关参数 其中 标签与AIR外观有比较大的关联 当然 用户也可自定义窗体的样式 包括 最小化 最大化 关闭 按钮等 18 5苹果风格界面实例 苹果风格以简洁大方而深受广大用户喜爱 本小节将以实例介绍如何制作苹果风格的组件界面 涉及的技术主要是使用CSS美化界面 18 5 1组件设计 组件设计是指讲实例中需要用到的组件摆放到应用程序中 本实例中的组件应用苹果风格的界面 方法是采用CSS样式定制组件外观 18 5 2CSS美化组件界面 使用CSS美化组件界面的步骤如下 1 新建名为 OSX css 的文件 2 编写CSS样式 在 OSX css 文件中编写不同组件的样式 从18 5 3节开始将要编写不同组件的样式了 18 5 3ApplicationControlBar组件样式 ApplicationControlBar组件是应用程序控制条 常用于作为菜单的容器 18 5 4Application组件样式 Application组件是最外层的组件 即为应用程序组件 为Application组件定义CSS也就是为应用程序定制整体风格 18 5 5MenuBar组件样式 MenuBar组件是菜单组件 18 5 6Panel组件样式 Panel组件是一种窗体容器 其他组件常放置于Panel组件上 18 5 7自定义 panelTitle 样式 panelTitle 样式用以定制Panel组件上的标题样式 18 5 8TextInput组件样式 TextInput组件输入框组件 以下代码定义了TextInput组件的字体大小 背景颜色 18 5 9Button组件样式 Button组件是按钮组件 以下代码定义了Button组件的圆角度 高亮度 阴影效果 字体大小 按钮颜色等 18 5 10自定义 blueButton 样式 blueButton 样式定义了蓝色的按钮样式 18 5 11Accordion组件样式 Accordion组件是一种导航组件 18 5 12NumericStepper组件样式 NumericStepper组件是数字微调器组件 18 5 13CheckBox组件样式 CheckBox组件是多选框组件 以下代码定义了CheckBox组件的高亮度 颜色 透明度 边框样式 字体大小等 18 5 14RadioButton组件样式 RadioButton组件是单选项组件 18 5 15ComboBox组件样式 ComboBox组件是下拉框组件 18 5 16TabNavigator组件样式 TabNavigator组件是导航组件的容器 18 5 17自定义 selectedTab 样式 selectedTab 样式用以定义TabNavigator组件上的标签被选择后的样式 18 5 18Tab组件样式 许多导航组件中包含Tab组件 如TabNavigator组件 18 5 19List组件样式 List组件是一种窗体容器 其他组件常放置于List组件上 18 5 20DataGrid组件样式 DataGrid组件是表格组件 以表格形式显示数据 18 5 21DateChooser组件样式 DateChooser组件是日历组件 18 6Vista风格界面实例 Vista风格以美观 晶莹剔透而深受广大用户喜爱 本小节将以实例介绍如何制作Vista风格的组件界面 涉及的技术主要包括使用CSS美化界面 使用图片更改组件等 18 6 1组件设计 本实例中的组件应用Vista风格的界面 方法是采用CSS样式定制界面 在应用CSS样式前用户需要设计组件 即将可视组件和非可视组件放置于MXML程序中 18 6 2CSS美化组件界面 使用CSS美化组件界面的步骤如下 1 新建名为 style css 的文件 2 编写CSS样式 在 style css 文件中编写不同组件的样式 18 6 3全局样式global global 样式用于定义应用程序全局性的样式 如背景大小 主题颜色等 18 6 4AccordionHeader组件样式 AccordionHeader 样式用于定义Accordion组合标题的样式 18 6 5Application组件样式 Application组件是最外层组件 即应用程序组件 18 6 6Button组件样式 Button组件是按钮组件 18 6 7ButtonBar组件样式 ButtonBar组件是一种按钮控制条 上面有若干个按钮 18 6 8ColorPicker组件样式 ColorPicker组件是颜色选择器组件 18 6 9ComboBox组件样式 ComboBox组件是下拉框组件 18 6 10DataGrid组件样式 DataGrid组件以表格形式显示数据 18 6 11DateChooser组件样式 DateChooser组件是日历组件 18 6 12ProgressBar组件样式 ProgressBar组件是进度条组件 18 6 13Image组件样式 Image组件是图片组件 18 6 14MenuBar组件样式 MenuBar组件是菜单组件 18 6 15RadioButton组件样式 RadioButton组件是单选项组件 18 6 16CheckBox组件样式 CheckBox组件是多选项组件 18 6 17HSlider组件样式 HSlider组件是横向滑动条组件 18 6 18TitleWindow组件样式 TitleWindow组件是一种窗体组件 18 6 19调用自定义窗体 使用PopUpManager类的createPopUp 方法可调用自定义窗体 PopUpManager类包含于 mx managers PopUpManager 中 使用createPopUp 方法创建的窗体可自由拖动 18 6 20调用 style c