Flex4 use TextLayout textFlow control image and text(with undo and redo)

Nov 30th, 2010 | Posted by Michael

Following example show how use  flowComposer.addController control image and text,and interactionManager ( with undo and redo)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   creationComplete="hg_creationCompleteHandler(event)" viewSourceURL="srcview/index.html">

	<fx:Script>
		<![CDATA[
			import flashx.textLayout.container.ContainerController;
			import flashx.textLayout.conversion.TextConverter;
			import flashx.textLayout.edit.EditManager;
			import flashx.textLayout.elements.TextFlow;
			import flashx.undo.UndoManager;

			import mx.events.FlexEvent;

			import spark.components.RichText;
			private var sections:XML=<sections><section x="10" y="20" w="600" h="280"/><section x="315" y="290" w="300" h="140"/><section x="15" y="425" w="600" h="300"/></sections>;
			private var textFlow:TextFlow;

			protected function hg_creationCompleteHandler(event:FlexEvent):void
			{
				XML.ignoreWhitespace=false;
				textFlow=TextConverter.importToFlow(taXML, TextConverter.TEXT_LAYOUT_FORMAT);
				for each (var section:XML in sections.*)
				{
					var temp:RichText=new RichText();
					temp.x=section.@x;
					temp.y=section.@y;
					temp.width=section.@w;
					temp.height=section.@h;
					this.bc.addElement(temp);
					textFlow.flowComposer.addController(new ContainerController(temp, section.@w, section.@h));
					textFlow.paddingLeft=5;
					textFlow.paddingRight=5;
					textFlow.paddingTop=5;
					textFlow.paddingBottom=5;

				}

				textFlow.interactionManager=new EditManager(new UndoManager());
				textFlow.flowComposer.updateAllControllers();
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:XML id="taXML"
				xmlns=""
				source="assets/mytext.xml"/>

	</fx:Declarations>
	<s:BorderContainer id="bc"
					   height="700"
					   horizontalCenter="0"
					   verticalCenter="0">
		<mx:Image source="images/dolphin.png"
				  y="300"
				  width="300"
				  x="15"/>
	</s:BorderContainer>
	<s:Label horizontalCenter="0"
			 verticalCenter="310"
			 text="Try Entry Or Delete , Use CTRL+X(cut)  CTRL+Z(undo)  CTRL+Y(redo)"/>
</s:Application>

Demo and Source

Originally posted 2010-07-21 08:41:22.

  1. Medical Jobs
    Jul 28th, 2010 at 03:40
    Reply | Quote | #1

    I’ve recently started a blog, the information you provide on this site has helped me tremendously. Thank you for all of your time & work.

  2. school grants
    Jul 28th, 2010 at 04:43
    Reply | Quote | #2

    My cousin recommended this blog and she was totally right keep up the fantastic work!

*

Popular Arichives