【Flex CookBook】TEXT组件添加到一个定制的TreeItemRenderer

TEXT组件添加到一个定制的TreeItemRenderer

Tagged with

Components , MXML , Flex and other technologies , mx.controls.Text mx.controls.Tree TreeItemRenderer

问题摘要

如果每一个renderer的大小都一样，创建一个定制的TreeItemRenderer非常简单。如果每一个renderer的大小都有所不同的话那么情况就有点复杂了，一个很好的例子就是将TEXT控件添加到renderer里面去，如果你的text里的字符数量不一样的话，那么这个TREE控件显示就会不正常。

解决摘要

.本指南将会一步一步的指导你如何去实践这样的一个TreeItemRenderer

解释

我最近要完成一个显示图标和标签的TreeItemRenderer，在这个过程中发现，MacMartine的例子对我实现这样的一个功能非常有帮助，就在前不久我又不得不将这样一个工作扩展为TreeItemRenderer显示文本控件，要在标签上显示一段可变长度的文本，开始的时候还以为这很简单，但到后来我才意识到这是挺有挑战性的，我最初的策略是从头开始实现一个TreeItemRenderer，不去扩展现有的TreeItemRenderer。我这样做是因为我相信通过使用MXML我很快就能够完成这项工作，问题是我发现缺省的TreeItemRenderer实现通过一个MX内部属性isopening()和方法dispatchTreeEvent()，因此没有核心类的支持，我最好还是扩展现有的TreeItemRenderer

我返回到了我修改过的MacMartine的版本，应该修改现有的uD方法，并且实现一个m方法，在uD方法里，我只需要将Text控件放置在标签Label控件的下面，而m方法我需要使r变得更高来适应Text组件的高度变化，问题是Text组件的呈现方法非常复杂而且看起来不连贯普，如果设置宽度和高度属性的顺序不正确，组件了显示就不正确，通过几个小时的错误和纠正以后，我基本上实现了所需要的功能，下面就是我的步骤：

1).在measure()方法里，我将Text组建的宽度设置为itemrenderer宽度，然后我去读取Text组件根据内容计算的measuredHeight属性，然后将它加到renderer的宽度属性

2)在updateDisplayList方法中，在定位我所有的组件之后，我显示的将Text组件的measuredHeight属性设置好，看起来不是很必要，但是如果不这样做那么根本就不会获得显示。

，你的文本就被正确显示，TreeItemRenderer也能够正确的伸缩，如果你的renderer有不同的大小那么还有一件事情，就是设置Tree控件的variableRowHeight属性为true

另外，如果你的Tree组件也需要重新设置大小，为了使文本控件显示正确，还有一件事情，当显式的设置文本控件的宽和高属性的时候，组建并不会去调用measure()方法，因此组建的带笑傲就不能正确地显示，要纠正这一点我们必须将文本组件的explicitWidth和explicitHeight设置为NaN，因此监听TREE控件的ResizeEvents，当事件触发的时候，我们就显式地去完成这项工作，这样文本控件就能够正确地显示。

我的博客上附有这样的问题的一个完整例子。

screenshot.jpg

源文档

<http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=7764>

Adding mx.controls.Text component to a custom TreeItemRenderer

Tagged with

Components , MXML , Flex and other technologies , mx.controls.Text mx.controls.Tree TreeItemRenderer

Problem Summary

Creating a custom TreeItemRenderer is simple if every renderer will be the same size. It gets more complicated when the renderers need to be different sizes. A good example of this is adding the mx.controls.Text component to the TreeItemRenderer. If you have differing amounts of text in each item, it will not display properly.

Solution Summary

This cookbook entry will walk through the steps of implementing a TreeItemRenderer with a variable size Text component.

Explanation

I recently had to build a custom TreeItemRenderer which displayed an icon and a label. I found Mac Martine's example to be quite helpful in implementing it successfully. More recently I needed to extend this work to add a mx.controls.Text component to the renderer, to display a variable length description under the label. I initially believed that this would be a simple task, but it turns out to be quite a challenge.

My first strategy to accomplish this was to implement a new TreeItemRenderer from scratch without extending mx.controls.treeClasses.TreeItemRenderer. I wanted to do this because I believed I could very quickly lay it out in MXML. The problem is, that the default TreeItemRenderer implements the expand/collapse controls for the item and does so by accessing a property (isOpening) and method (dispatchTreeEvent) which are both scoped mx_internal. So without some extra gymnastics, I am better off extending the default TreeItemRenderer.

I reverted back to my modified implementation of Mac Martine's custom renderer. I had to modify the existing updateDisplayList() method override and implement the measure() method override. In updateDisplayList(), I basically just need to position the Text component under the existing Label component. In measure(), I need to make the renderer taller to accomodate the height of the additional Text component. The problem is that the Text component renderering code is complex and a seemingly inconsistent in how it behaves. If you don't set the width and height properties in just the right order, it won't render correctly. After several hours of trial and error, I was able to get it to behave properly. Here is basically what I did.

1) In measure(), I set the width property of the Text component to the width of the item renderer less the x position of the label. Then I read the measuredHeight property of the Text component which is calculated based on the length of the text/htmlText property of the component and the explicit width of the component, and I add that to the measuredHeight of my renderer.

2) In updateDisplayList, after positioning all of my components, I explicitly set the height of the Text component to the measuredHeight property of the Text component. This seems like an odd thing to have to do, but if I don't do it, the text doesn't display at all.

If you do these things, your Text will display and your renderer will be sized properly. There is one other important thing to do if your renderers are going to be different sizes, which is to set the variableRowHeight property on the Tree to true.

Additionally, if your Tree component will need to be resizable, there is something else that needs to be done to get the Text component to resize correctly. When the width and height of a Text component are both explicitly set, the component doesn't call measure() anymore, so it won't resize. To fix this, we need to set the explicitWidth & explicitHeight on the Text component to NaN. So we add a listener to the parent Tree to listen for ResizeEvents, and when they occur, set the explicitHeight and explicitWidth to NaN. This will then cause Text component to resize properly.

My blog has links to the example application (with source).

screenshot.jpg