Flex Pasta

Text Layout Features in Flex 4

While still a work in progress, a new set of features will exist for text layout in Flex 4/Flash 10.  The package name for the text layout library is flashx.*, which is a shift from traditional Flex packages, but it looks like it will be open source.  Here is a demo with a simple slider that changes the width of the first column and the text automatically lays itself out across multiple components.  While I couldn’t get it to work yet(still beta), the final product will allow html formatting(actually a limited number of html tags).  For applications that are heavy on content related material, it will be huge that text can be strung across multiple components from one string variable.  The string will automatically re-size and position itself dynamically.  Now while I am not doing these features justice, here is a small example of the layout.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” xmlns:ns=”library://ns.adobe.com/flex/spark”
creationComplete=”cc()” xmlns:container=”flashx.textLayout.container.*”>
<mx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.container.ContainerController;
private var tf:flashx.textLayout.elements.TextFlow;
private var c1:ContainerController;
private var c2:ContainerController;
private var c3:ContainerController;
private function cc():void
{
var markup:String = “<TextFlow xmlns=’http://ns.adobe.com/textLayout/2008′><p><span>Hello, World</span></p></TextFlow>”;

tf = TextConverter.importToFlow( mk, TextConverter.TEXT_LAYOUT_FORMAT );
c1 = new ContainerController( container1 );
c2 = new ContainerController( container2 );
c3 = new ContainerController( container3 );
tf.flowComposer.addController(c1);
tf.flowComposer.addController(c2);
tf.flowComposer.addController(c3);
updateContainer();
}
private function updateContainer():void
{
c1.setCompositionSize(container1.width, container1.height);
c2.setCompositionSize(container2.width, container2.height);
c3.setCompositionSize(container2.width, container3.height);
tf.flowComposer.updateAllControllers();
}
[Bindable] private var widthValue:Number = 100;
]]>
</mx:Script>
<mx:XML id=”mk”>
<TextFlow xmlns=’http://ns.adobe.com/textLayout/2008′>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eros nisl, vulputate non eleifend vitae, luctus a nulla. Proin eget leo odio, condimentum placerat sem. Vestibulum faucibus libero tincidunt massa molestie fermentum. Donec turpis metus, vehicula malesuada dictum in, posuere quis tortor. Morbi convallis, dui eu aliquet dignissim, orci purus cursus dolor, in rhoncus nisl sapien vitae nisi. Donec eget dolor eu felis molestie placerat. Duis massa elit, rutrum quis varius ut, pharetra sit amet leo. Suspendisse euismod posuere nibh eu ultrices. Aliquam id tortor mi, at placerat nisl. Proin faucibus risus non erat luctus tristique. Sed placerat quam tincidunt quam varius tristique. Nunc blandit iaculis sapien, et sodales lorem euismod vitae. Praesent congue nibh in arcu egestas ac rhoncus ligula semper. Vestibulum ac laoreet quam.

Suspendisse turpis felis, scelerisque id tincidunt vitae, gravida a enim. Curabitur leo tortor, ornare hendrerit scelerisque nec, venenatis id odio. Cras tincidunt faucibus facilisis. Nullam eleifend, purus dictum suscipit dignissim, dui dolor suscipit ante, quis posuere leo dui nec metus. In hac habitasse platea dictumst. Praesent quis nulla risus. Sed fringilla rutrum turpis, vitae blandit nisi blandit ac. Phasellus magna tortor, sagittis sed bibendum nec, porta ut arcu. Aliquam scelerisque, metus et pharetra dignissim, massa eros imperdiet leo, eget interdum dolor nisl non lectus. Ut bibendum, turpis gravida mattis dapibus, lacus odio consequat lorem, non mattis lacus massa at justo.

Etiam erat nunc, porta et interdum id, venenatis vel est. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac orci erat. Nam pulvinar lacus et magna dapibus ultricies. Maecenas ac risus eros, et porttitor mi. Suspendisse vel lacus est. Donec laoreet nisi ut orci commodo a auctor mi posuere. Proin libero felis, scelerisque et suscipit ac, pharetra quis nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ullamcorper, felis nec porttitor dictum, metus justo rhoncus massa, nec commodo mauris nisl in dolor. Nunc semper sagittis nisl pulvinar ullamcorper. Quisque consectetur lorem vel nunc volutpat eu viverra leo pharetra. Cras sit amet porttitor ante. Morbi a scelerisque orci. In a erat a turpis viverra tristique. Vivamus vehicula dui eget est adipiscing ultrices. Nam aliquam, tellus nec dictum porttitor, lectus urna iaculis leo, in accumsan velit tellus in orci. Etiam lacus augue, imperdiet at iaculis nec, congue sed orci.
Suspendisse a massa lorem. Suspendisse potenti. Mauris dignissim, est eu dapibus viverra, felis nisl commodo nisl, eget fringilla odio lorem eu arcu. Maecenas tincidunt ante ut lorem viverra accumsan. Curabitur fringilla libero in mauris tempor tincidunt. Integer vestibulum interdum ultricies. In tempor, risus convallis gravida semper, libero nunc vehicula est, id imperdiet purus ante non nibh. Duis tempus velit quis felis tempor nec consectetur orci tempus. Aenean et dapibus ligula. Vivamus volutpat justo laoreet metus ornare quis bibendum ipsum adipiscing. In euismod, mauris a eleifend consectetur, nunc lorem pellentesque quam, non feugiat velit lorem non ante. Maecenas quis ipsum nunc. Ut eu imperdiet quam. Vestibulum molestie imperdiet dui ac sollicitudin. Vivamus eu dolor leo. Curabitur eros magna, ultricies ut egestas sed, faucibus sed mauris. </TextFlow>
</mx:XML>
<mx:HBox width=”100%” height=”75%” horizontalAlign=”center” id=”hbox”>
<mx:Spacer width=”50″/>
<mx:UIComponent id=”container1″ height=”100%” width=”{widthValue}”/>
<mx:UIComponent id=”container2″ height=”100%” width=”33%”/>
<ns:RichEditableText id=”container3″ height=”100%” width=”33%”/>
</mx:HBox>

<mx:Form width=”100%”>
<mx:FormItem label=”Column 1 size”>
<mx:HSlider id=”hs1″ thumbDrag=”widthValue = event.value; updateContainer()”  value=”100″ minimum=”50″ maximum=”500″/>
</mx:FormItem>
<mx:FormItem label=”Effect”>
<mx:Button click=”rotate.play([container1,container2,container3])” label=”Lame Star Wars Effect”/>
</mx:FormItem>
</mx:Form>
<ns:Rotate3D angleXFrom=”0″ angleXTo=”-30″ angleZFrom=”0″ angleZTo=”-1″ id=”rotate”/>
</mx:Application>