I am sure all the Flex/Air developers might have to use text area most of the times when you are building an application. Text area control with dynamic height seems not be an issue in normal cases but if the height needs to calculated based on text in the control then we need to think. I had the same requirement. Of course no SCROLLS.
I extended mx.controls.TextArea and here is what I did quickly.
This worked for me.Maybe there is a better way to do this. Let me know if you have tried this in a different way
I know that this talk had started long ago and Adobe Evangelists had already mentioned about Flex 4 beta in detail through blogs and other technical articles but I would like to once again make my view on what all I came to know when I started playing with Flex 4 and also after reading many articles on the same. So letz get going…first of all Flex 4 has many changes and also enhancements which will make life of designers/developers working on Flex a bit more easier not to mention that it also means that there is quite a bit for Developers and Designers to understand before they start actual use of Flex 4, this is because there are some things that are deprecated and some of them which are enhanced.Some of the highlighted features in Flex 4 and some useful links:
The component architecture in Flex 4 has been revived. Spark architecture is added on top of the already existing Halo architecture. With introduction of Spark architecture flex 4 will enable the use of new skin classes that will be solely responsible for the appearance of that component. This will result in new component lifecycle.
In spark architecture the skin is the child of a component and it has its own lifecycle. Same as in Halo architecture where createChildren(), updateDisplayList(), commitProperties, measure are called in its component lifecycle, the Spark architecture introduce new methods in order to manage the skins and parts of a component which will be called in the lifecycle .The interoperability between both these architectures results in all Halo components can be used in Gumbo containers and vice-versa. This revival in architecture has been made in order to achieve easy and powerful visual customization and also to make the components easy and straight forward to extend.
FXG is the xml based graphics interchange format for flash platform. The usage of FXG enables the Flex 4 to use the declarative graphics. Flash Catalyst can be used to create the FXG graphics compatible for Flex 4.
For more information – http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification
Graphics in MXML:
By the introduction of FXG, Flex 4 will have a graphics tag library which includes graphics, text primitives and transformation capabilities which will enable graphical representation to be written in MXML tags.
In Flex 4, the namespace has been updated to new MXML 2009 as xmlns:fx=”http://ns.adobe.com/mxml/2009″. Here you might have noticed that new MXML is prefixed as “fx” this is used for new language entities.
Flex 4 come along with both Flex 3 and Flex 4 components which follow two architectures – Halo and Spark respectively. As a result both type of components use their own. Flex 3(Halo) components will have a namespace of xmlns:mx=”library://ns.adobe.com/flex/halo” and Flex 4(Spark) will have xmlns:s=”library://ns.adobe.com/flex/spark”.
So ideally your application tag in the main MXML of the application will look like this:
For more information – http://opensource.adobe.com/wiki/display/flexsdk/MXML+2009
Enhancement in State usage:
In this version of Flex SDK there has been enhanced form of state usage where you will not be required to write all the state handlings inside the states tag as earlier. The new implementation of States will reduce the complexity of state usage. There are new properties like excludeIn and includeIn and the role of addChild and removeChild has been deprecated and much more…
For more information – http://opensource.adobe.com/wiki/display/flexsdk/Enhanced+States+Syntax
New Components and enhancements:
There are new components which are based on the spark architecture like spinner which will be a solution to making numericstepper to be a spinner with additional textInput. Slider, NumericStepper, TextArea, TextInput etc are all such new enhanced components.
For more information: http://opensource.adobe.com/wiki/display/flexsdk/Spark+Slider
Group Containers are one of the newly introduced Containers to flex framework. Group is a light weight container which only contains visual elements. In flash builder by default the MXML component will have Group as its parent container unlike the canvas which was in Flex Builder 3.
For more information: http://opensource.adobe.com/wiki/display/flexsdk/Spark+Group
Advanced use of Text:
Flex 4 will leverage the use the new text feature available in flash player 10. Thanks to the new Text Layout framework used in Adobe flash player 10 which will give significant control over text elements with so many new features.
The list do not stop here, there are still some features that are left out in this post which also I have to look into. But seeing the above feature gives me a good feeling of the new things that as a flex developers I will be working on. As always framework enhancement of any technology will ultimately result in making developer’s lifes a little easier, also to understand and use of these enhancements or new features to make your client happy.
Are you thinking what this class does… ?
Well, in one of our project we had to develop a feature where we have a text area with text which has varying fontStyles, fontSize and fontWeight. Now the interesting part is to get these font styles on selection of a particular range of text from the Text control. I accidently stumbled upon TextRange class which proved to be a solution to my problem…..Just to test it I registered the mouseUp event on the text control and made the selectable property to true. As soon as I finish selecting a text, mouseup event handler should be called and in this handler function I wrote:
// txt is the id of the text control
var mySelectedTextRange:TextRange = new TextRange(txt, true);
So, by writing this I would be able to get the selected text as well as the fontfamily of the selected text in the Flex Builder console.
TextRange will take the following parameters – TextRange(owner:UIComponent, modifiesSelection:Boolean = false, beginIndex:int = -1, endIndex:int = -1).