主页 » RIA文档中心 » RIA杂志速递

使用Adobe Flash Catalsyt和Flash Builder创建一个Spark主题的可缩放的窗口组件

Posted 七月 7th, 2009 by migsr

这是一篇关于如何创建Spark组件的文章，地址是：
http://www.themorphicgroup.com/blog/2009/06/26/creating-a-spark-resizable-title-window-with-adobe-catalyst-and-flash-builder/

你可能已经注意到了新的Spark组件并没有包含一个新的TitleWindow组件，那么在这篇文章中作者将讲述如何使用Flash Catalyst和Flash Builder创建一个可缩放的窗口组件（在另外的一篇文章中，作者讲述了如何开发一个带图标的Spark按钮组件）。在这个教程中作者将展示创建这个可缩放的窗口的过程，创建这个组件需要使用SkinnableContainer组件。你可以从这里查看这个代码的运行结果，如果你只是想看看代码是怎么实现的并作为参考，可以从这里下载源代码 。

在Flash Catalyst中创建UI元素

下面的图片显示了我如何在Flash Catalyst项目中创建和管理这个组件，在这个组件中，我需要一个背景，一个头部，一个关闭按钮，和一个用于缩放显示的按钮。我会在Library面板中修改它们的名字。因为Flash Catalyst没有真正的让你知道场景中的组件的类型，而这个面板将将帮助你为每个你创建的组件命名。

导入Catalyst组件到Flash Builder

当把Catalyst项目导入到Flash Builder，我为下面的组件做了一些更改：

TitleWindowBG.mxml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Group xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009">
  3.     <s:Rect height="100%" radiusY="10" width="100%" radiusX="10" alpha="0.75">
  4.         <s:fill>
  5.             <s:SolidColor color="#000000"/>
  6.         </s:fill>
  7.     </s:Rect>
  8. </s:Group>

这个组件我设置了宽度和高度都是100%。当前Catalyst只允许你使用特定的像素值来定义宽度和高度。

TitleWindowCloseButton.mxml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009">
  3.  <s:states>
  4.         <s:State name="up"/>
  5.         <s:State name="over"/>
  6.         <s:State name="down"/>
  7.         <s:State name="disabled"/>
  8.     </s:states>
  9.     <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
  10.     <s:Rect height="21" radiusY="5" width="21" radiusX="5">
  11.         <s:fill>
  12.             <s:LinearGradient rotation="90">
  13.                 <s:GradientEntry color="#7f0000" alpha="1.0" ratio="0"/>
  14.                 <s:GradientEntry color="#ff0000" alpha="1.0" ratio="1"/>
  15.             </s:LinearGradient>
  16.         </s:fill>
  17.     </s:Rect>
  18.     <s:RichText
  19.         id="labelElement"
  20.         x="7" y="6"
  21.         color="#ffffff"
  22.         text="(Label)"
  23.         fontSize="12" fontFamily="Arial" fontWeight="bold"
  24.         width="8" height="12"/>
  25. </s:Skin>

点击下面的地址，查看详细的教程：
http://www.themorphicgroup.com/blog/2009/06/26/creating-a-spark-resizable-title-window-with-adobe-catalyst-and-flash-builder/

riadevID: 
瑞研社区最新地址：http://www.riadev.com/flex-thread-123-1-1.html
您给予的分值: None 平均分: 1 (1 vote)

发表新评论

  • 网页地址和电子邮件地址将会被自动转换为链接。
  • 行和段被自动切分。
  • 您可以使用下面的标签来高亮显示您的评论内容: <code>, <blockcode>. 可以使用"[foo]".旁边显示标签样式 "<foo>" PHP代码可以用这样的区块来包含<?php ... ?> or <% ... %>

更多格式化选项信息

验证区域
系统验证：请回答下面的问题