在查看教程和示例 Flex 项目时，他们似乎主要关注表单元素和数据网格，而不是以更直观的方式提供内容。这就是我即将进行的项目所需要的。因此，我在舒适度方面存在差距，希望经验丰富的 Flex 开发人员能够帮助我克服这一差距。
我的项目是一个协作索引工具，它使用带有四个独立面板的用户界面来显示客户的产品和服务。
- 左上角面板将包含垂直滚动的类别列表。
- 左下角面板将包含基于所选类别的子类别的滚轮效果。
- 右上方面板将包含详细信息 - 所选类别标题和描述。下面是所选子类别的标题和描述。
- 右下面板将包含属于该子类别的服务和产品项目的列表。列表中每个项目的下方将是一个链接组手风琴，其中包含每个项目的更多信息的 url 链接。
将有一个 XML 文件，其中包含驱动此协作索引的完整数据树。
此外，根据所选类别，某些布局部分的背景会出现颜色差异。
因此，看来我需要创建一些自定义组件，也许采用一些现有组件，并重新设计所有内容，使其具有与客户品牌同义的外观和感觉。
虽然我有很多问题，但解决第一部分似乎是合乎逻辑的，在本部分中想到的第一个问题是：在左上角面板中，类别列表是否应该是重新设计皮肤的标准 Flex 按钮？或者它们应该是以某种方式引入 Flex 的对象实例。
然后在第二部分中，我看到了一个以非常适合本部分的方式显示图像的组件。但是，此处显示的项目只是视觉上的圆角块，其中包含子类别名称。所以，我不确定该组件是否有效。
While reviewing the tutorials and example Flex projects, they seem to focus mainly on form elements and data grids, rather than delivering content in a more visual way. Which is what I will need for this upcoming project. As a result, I have a gap in my comfort level that I'm hoping that a seasoned Flex developer can help me hurtle.
The project that I have is a collaboration index tool to display customers products and services using an user interface with four separate panels.
- the top-left panel will contain a list of categories in a vertical scroll.
- The bottom left panel will contain a wheel effect of sub-categories, based on the category chosen.
- The top right panel will contain the detail information - The selected Category Title and Description. And below that, the selected sub-category title and description.
- The bottom right panel will contain a list of the service and product items that belong to the sub-category. Below each item in the list will be a link-group accordion with url links for more information in each.
There will be an XML file containing the complete data tree driving this collaboration index.
Additionally, depending on the category chosen, color variances will occur in the background of the some of layout sections.
So, It appears that I will need to create a few custom components, maybe adopt a few existing components, and re-skin everything so that it carries a synonymous look and feel to the client's branding.
Although I have a bunch of questions, tackling the first section seems logical, and the first question that comes to mind in this section is: in the top left panel, should the list of categories be standard Flex buttons that are re-skinned? or should they be object instances somehow brought in to Flex.
Then in the second section, I was had seen a component that displayed images in a way that was perfect for this section. But, the items show here would be just visual, rounded corner blocks with subcategory names in them. So, I'm not sure if that component will work or not.
发布评论
评论（3）
AS3 与 AS2 有很大不同。我相信您现在已经注意到了，但值得一提的是，以防万一您还没有注意到。
Flex 组件基本上只是 Flash 对象的包。因此，您可以仅使用 Sprites 和/或 TextFields 自行编写每个 Flex 组件。这包括皮肤。皮肤几乎只是一个通过自定义绘图附加到对象上的形状。
按钮只是图像+文本字段+皮肤的组合，为您管理所有事件和皮肤转换。
我提到这一点的原因是没有正确的方法来做你想做的事。如果您使用的是 List 控件，您可能应该编写一个实现 IListItemRenderer 的组件。 Button 可以，因此您可以简单地覆盖 Button，没有问题。您可以使用带有标签+图标的按钮。或者只是图标。或者只是一个标签。您还可以定义标签相对于图标的位置（labelPosition="above|below|left|right"）。有很多内置的灵活性。
AS3 is very different from AS2. I'm sure you've noticed by now, but it's worth mentioning in case you hadn't.
Flex Components are basically just a package of Flash objects. So you can, sort of, write every Flex component on your own using just Sprites and/or TextFields. This includes skins. A skin is pretty much just a Shape attached to an object with custom drawing.
A button is just a combination of image+textField+skin, with all the events and skin transitions managed for you.
The reason I mention this is that there is no right way to do what you want. If you're using the List control, you should probably write a component that implements IListItemRenderer. Button does, so you can simply override the Button, no problems. You can have buttons with a label + icon. Or just icon. Or just a label. You can also define where the label is positioned relative to the icon (labelPosition="above|below|left|right"). There is a lot of built-in flexibility.
感谢您提及 FlexSpaces。请注意，它最终被移植到 Flex 4，包括今年早些时候首次转换为 Spark 控件。仍然要做：使用 Spring ActionScript 添加依赖注入，删除 Cairngorm 2.x 的使用。
Thanks for the mention of FlexSpaces. Note that it was finally ported to Flex 4 including a first pass conversion to spark controls earlier this year. Still to do: add dependency injection with Spring ActionScript, remove use of Cairngorm 2.x.
在过去的 6 个月里，我一直在大力开发 Flex 4，必须说它会让您的工作变得非常轻松。
我会这样做：
1) 查看 FlexSpaces 以获得最佳的 Flex 3 项目架构。它是 Flex 中功能齐全的 CMS，具有类别、标签、搜索、文件系统、协作等。
2) 下载 Flex 4 SDK 并安装它。没有必要再使用 Flex 3，如果您刚刚开始，一定要使用 Flex 4。如果您需要自定义组件，Spark（新的组件架构）有一个非常简单的方法来实现它们（这里有一篇很酷的博客文章）构建 Spark 中的评级组件向您展示了如何操作）。 Flex 4 向后兼容 Flex 3 组件，因此您可以根据需要使用在互联网上找到的项目/组件，没问题。
3）对于左上角的类别列表，如果类别没有嵌套，我将使用
spark.components.List，（这是一个 使用更复杂的项目渲染器）。然后只需扩展spark.components.supportClasses.ItemRenderer，它的作用就像皮肤一样。如果类别是嵌套的，则只需使用mx.controls.Tree。查看 FlexSpaces 项目（它们展示了如何在树中使用 XML/ArrayCollections，您的“以某种方式将对象实例引入 Flex”问题）。4) 对于滚轮效果，到目前为止我唯一不喜欢 Spark 的是它很难为布局设置动画。但人们开始制作 3D 布局，请查看 这是 Ryan Campbell 的 Flex 4 的 5 种 3D 布局。如果您想要非常轻松的动画布局，还有 OpenFlux。 Flex 效果一般来说相当笨重，所以我最终只使用 Tweener 或 TweenMax 来制作动画。
5) 至于重新设计，如果您想让它看起来干净漂亮，尝试使用 Flex 3 架构重新设计将是一项艰巨的任务，并且尝试在下一个项目中重用该代码将是疯狂的。对于 Spark 来说，这很简单，而且 100% mxml。只需从 SDK 复制整个 SparkSkins 文件夹并开始更改内容，就可以开始了。
但是，是的，FlexSpaces 项目是您所谈论的一个非常可靠的例子。完全开源。
干杯
I have been developing Flex 4 quite heavily the past 6 months and must say it would make your job very easy.
Here's what I would do:
1) Check out FlexSpaces for the best Flex 3 project architecture. It's a fully featured CMS in Flex with categories, tags, searching, filesystem, collaboration, etc.
2) Download the Flex 4 SDK and install that. There's no need to use Flex 3 anymore, if you're just getting started, DEFINITELY go with Flex 4. If you need custom components, Spark (the new component architecture) has a very simple way of doing them (here's a cool blog post building a Rating Component in Spark that shows you how do it). Flex 4 is backward compatible with Flex 3 components, so you can use projects/components you find on the internet if you want to, no problem.
3) For the top-left category list, if the categories aren't nested, I would use the
spark.components.List, (here's one using more complex item renderers). Then just extend thespark.components.supportClasses.ItemRenderer, which acts just like a Skin. If categories are nested, just use themx.controls.Tree. Check out that FlexSpaces project for that (they show how to use XML/ArrayCollections in the tree, your "object instances brought into flex somehow" question).4) For the wheel effect, the only thing I don't like about Spark so far is that it's difficult to animate layouts. But people are starting to make 3D layouts, check out Here's 5 3D Layouts for Flex 4 by Ryan Campbell. There's also OpenFlux if you want very easily animated layouts. Flex effects in general are quite clunky, so I end up just using Tweener or TweenMax for animations.
5) As for reskinning, trying to reskin using the Flex 3 architecture would be a monumental task, if you wanted to make it look clean and nice, and it would be insane trying to reuse that code in the next project. For Spark, it's a snap, and it's 100% mxml. Just copy the whole sparkSkins folder from the SDK and start changing things, and you're good to go.
But yeah, that FlexSpaces project is a very solid example for what you're talking about. Totally open source.
Cheers