| <?xml version="1.0" encoding="utf-8"?>
|
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
|
|
|
|
| <!-- Demonstrate some example controls. This example does not attempt to create a control for every property in the TextLayoutFramework -->
|
|
|
| <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
|
| height="570" label="Text Editor Example" backgroundColor="#FFFFFF"
|
| horizontalScrollPolicy="off" initialize="init()" verticalScrollPolicy="on">
|
| <mx:Script>
|
| <![CDATA[
|
|
|
| import com.adobe.linguistics.spelling.SpellUIForTLF;
|
| import com.adobe.linguistics.spelling.framework.SpellingService;
|
| import com.adobe.linguistics.spelling.ui.IHighlighter;
|
| import com.adobe.linguistics.spelling.ui.IWordProcessor;
|
| import com.adobe.linguistics.utils.Token;
|
|
|
| import flash.display.Sprite;
|
| import flash.system.Capabilities;
|
|
|
| import flashx.textLayout.container.ContainerController;
|
| import flashx.textLayout.conversion.TextConverter;
|
| import flashx.textLayout.edit.EditManager;
|
| import flashx.textLayout.edit.ElementRange;
|
| import flashx.textLayout.edit.IEditManager;
|
| import flashx.textLayout.edit.SelectionState;
|
| import flashx.textLayout.elements.Configuration;
|
| import flashx.textLayout.elements.TextFlow;
|
| import flashx.textLayout.events.SelectionEvent;
|
| import flashx.textLayout.events.StatusChangeEvent;
|
| import flashx.textLayout.formats.BlockProgression;
|
| import flashx.textLayout.formats.Direction;
|
| import flashx.textLayout.formats.ITextLayoutFormat;
|
| import flashx.textLayout.formats.TextAlign;
|
| import flashx.textLayout.formats.TextLayoutFormat;
|
| import flashx.textLayout.formats.VerticalAlign;
|
| import flashx.textLayout.tlf_internal;
|
| import flashx.undo.UndoManager;
|
|
|
| // the textFlow being worked on
|
| private var _textFlow:TextFlow = null;
|
| private var _myContainerController:MyContainerController=null;
|
| // container to hold the text
|
| private var _container:Sprite = null;
|
| // ///////////////////////////////////////
|
| // data providers for enumerated list boxes
|
| // ///////////////////////////////////////
|
| static private const textAlignData:Array = [
|
| { label:"Justify", data:TextAlign.JUSTIFY},
|
| { label:"Left", data:TextAlign.LEFT},
|
| { label:"Right", data:TextAlign.RIGHT},
|
| { label:"Center", data:TextAlign.CENTER},
|
| { label:"End", data:TextAlign.END},
|
| { label:"Start", data:TextAlign.START}
|
| ];
|
| static private const verticalAlignData:Array = [
|
| { label:"Bottom", data:VerticalAlign.BOTTOM },
|
| { label:"Justify", data:VerticalAlign.JUSTIFY },
|
| { label:"Middle", data:VerticalAlign.MIDDLE },
|
| { label:"Top", data:VerticalAlign.TOP }
|
| ];
|
|
|
| static private const blockProgressionData:Array = [
|
| { label:"TopToBottom", data:BlockProgression.TB },
|
| { label:"RightToleft", data:BlockProgression.RL }
|
| ];
|
|
|
| static private const directionData:Array = [
|
| { label:"LeftToRight", data:Direction.LTR },
|
| { label:"RightToleft", data:Direction.RTL }
|
| ];
|
|
|
| /**
|
| * initialization
|
| */
|
| private function init():void
|
| {
|
| // create a sprite to hold the TextLines
|
| _container = new Sprite();
|
| textArea.rawChildren.addChild(_container);
|
|
|
| fontFamily.dataProvider = populateFontFamily();
|
|
|
| versionInfo.text = "Vellum: 3.x" + (Configuration.tlf_internal::debugCodeEnabled ? " Debug" : " Release")
|
| + ", Flex: " + mx_internal::VERSION
|
| + ", Player: " + Capabilities.version;
|
| }
|
|
|
| /**
|
| * Create an array of available font families
|
| */
|
| static private function populateFontFamily():Array
|
| {
|
| // really this returns an array of fonts - would be nice to strip it down to just the families
|
| var fonts:Array = Font.enumerateFonts(true);
|
| var fontfamily:Array = new Array();
|
| fonts.sortOn("fontName", Array.CASEINSENSITIVE);
|
| for(var i:int = 0; i< fonts.length; i++)
|
| {
|
| // trace(fonts[i].fontName);
|
| fontfamily.push({label: fonts[i].fontName, data: fonts[i].fontName});
|
| }
|
| return fontfamily;
|
| }
|
|
|
| /** called to set the size of this panel */
|
| public function setSize(w:int,h:int):void
|
| {
|
| this.width = w;
|
| this.height = h;
|
| textArea.width = width;
|
| textArea.height = height > bottomTabs.height ? this.height-bottomTabs.height : 0;
|
| if (_textFlow)
|
| {
|
| _textFlow.flowComposer.getControllerAt(0).setCompositionSize(textArea.width,textArea.height);
|
| _textFlow.flowComposer.updateAllControllers();
|
| }
|
| }
|
|
|
| /** called when the bottom tabs finally gets sized. */
|
| private function bottomTabsResize():void
|
| {
|
| setSize(width,height);
|
| }
|
|
|
| /** The TextFlow to edit. */
|
| public function get textFlow():TextFlow
|
| { return _textFlow; }
|
|
|
| public function set textFlow(newFlow:TextFlow):void
|
| {
|
| // clear any old flow if present
|
| if (_textFlow)
|
| {
|
| _textFlow.flowComposer = null;
|
| _textFlow = null;
|
| }
|
| _textFlow = newFlow;
|
| if (_textFlow)
|
| {
|
| _myContainerController=new MyContainerController(_container,textArea.width,textArea.height);
|
| _textFlow.flowComposer.addController(_myContainerController);
|
|
|
| // setup event listeners for selection changed and ILG loaded
|
| _textFlow.addEventListener(SelectionEvent.SELECTION_CHANGE,selectionChangeListener,false,0,true);
|
| _textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGE,graphicStatusChangeEvent,false,0,true);
|
|
|
| // make _textFlow editable with undo
|
| _textFlow.interactionManager = new EditManager(new UndoManager());
|
| // initialize with a selection before the first character
|
| _textFlow.interactionManager.selectRange(0,0);
|
|
|
| // compose the new textFlow and give it focus
|
| _textFlow.flowComposer.updateAllControllers();
|
| _textFlow.interactionManager.setFocus();
|
| }
|
| }
|
|
|
| /** Receives an event any time an ILG with a computed size finishes loading. */
|
| private function graphicStatusChangeEvent(evt:StatusChangeEvent):void
|
| {
|
| // recompose if the evt is from an element in this textFlow
|
| if (_textFlow && evt.element.getTextFlow() == _textFlow)
|
| _textFlow.flowComposer.updateAllControllers();
|
| }
|
|
|
| /** Receives an event any time the selection is changed. Update the UI */
|
| private function selectionChangeListener(e:SelectionEvent):void
|
| {
|
| var selectionState:SelectionState = e.selectionState;
|
| var selectedElementRange:ElementRange = ElementRange.createElementRange(selectionState.textFlow, selectionState.absoluteStart, selectionState.absoluteEnd);
|
| // set display according to the values at the beginning of the selection range. For point selection/characterFormat use getCommonCharacterFormat as that tracks pending attributes waiting for the next character
|
| var characterFormat:ITextLayoutFormat = _textFlow.interactionManager.activePosition == _textFlow.interactionManager.anchorPosition ? _textFlow.interactionManager.getCommonCharacterFormat() : selectedElementRange.characterFormat;
|
| var paragraphFormat:ITextLayoutFormat = selectedElementRange.paragraphFormat;
|
| var containerFormat:ITextLayoutFormat = selectedElementRange.containerFormat;
|
|
|
| updateComboBox(fontFamily,characterFormat.fontFamily);
|
| fontSize.text = characterFormat.fontSize.toString();
|
| lineHeight.text = characterFormat.lineHeight.toString();
|
|
|
| updateComboBox(textAlign,paragraphFormat.textAlign);
|
| textIndent.text = paragraphFormat.textIndent.toString();
|
|
|
| columnCount.text = containerFormat.columnCount.toString();
|
| columnGap.text = containerFormat.columnGap.toString();
|
| updateComboBox(verticalAlign,containerFormat.verticalAlign);
|
|
|
| updateComboBox(blockProgression,_textFlow.computedFormat.blockProgression);
|
| updateComboBox(directionBox,_textFlow.computedFormat.direction);
|
| }
|
|
|
| /** Helper function to update a comboBox in the UI */
|
| private function updateComboBox(box:ComboBox,val:String):void
|
| {
|
| for (var i:int = 0; i < box.dataProvider.length; i++)
|
| {
|
| if (box.dataProvider[i].data == val)
|
| {
|
| box.selectedIndex = i;
|
| return;
|
| }
|
| }
|
| box.text = val;
|
| }
|
|
|
| /**
|
| * These functions are helpers for the various widgets to actually perform the operations on the TextFlow
|
| */
|
| private function changeFontFamily(newFontFamily:String):void
|
| {
|
| if (_textFlow && _textFlow.interactionManager is IEditManager)
|
| {
|
| var cf:TextLayoutFormat = new TextLayoutFormat();
|
| cf.fontFamily = newFontFamily;
|
| IEditManager(_textFlow.interactionManager).applyLeafFormat(cf);
|
| _textFlow.interactionManager.setFocus();
|
| }
|
| }
|
| private function changeFontSize(newFontSize:String):void
|
| {
|
| if (_textFlow && _textFlow.interactionManager is IEditManager)
|
| {
|
| var cf:TextLayoutFormat = new TextLayoutFormat();
|
| cf.fontSize = newFontSize;
|
| IEditManager(_textFlow.interactionManager).applyLeafFormat(cf);
|
| _textFlow.interactionManager.setFocus();
|
| }
|
| }
|
| private function changeLeading(newLeading:String):void
|
| {
|
| if (_textFlow && _textFlow.interactionManager is IEditManager)
|
| {
|
| var cf:TextLayoutFormat = new TextLayoutFormat();
|
| cf.lineHeight = newLeading;
|
| IEditManager(_textFlow.interactionManager).applyLeafFormat(cf);
|
| _textFlow.interactionManager.setFocus();
|
| }
|
| }
|
|
|
| private function changeTextAlign(newAlign:String):void
|
| {
|
| if (_textFlow && _textFlow.interactionManager is IEditManager)
|
| {
|
| var pf:TextLayoutFormat = new TextLayoutFormat();
|
| pf.textAlign = newAlign;
|
| IEditManager(_textFlow.interactionManager).applyParagraphFormat(pf);
|
| _textFlow.interactionManager.setFocus();
|
| }
|
| }
|
|
|
| private function changeTextIndent(newIndent:String):void
|
| {
|
| if (_textFlow && _textFlow.interactionManager is IEditManager)
|
| {
|
| var pf:TextLayoutFormat = new TextLayoutFormat();
|
| pf.textIndent = newIndent;
|
| IEditManager(_textFlow.interactionManager).applyParagraphFormat(pf);
|
| _textFlow.interactionManager.setFocus();
|
| }
|
| }
|
|
|
| private function changeColumnCount(newCount:String):void
|
| {
|
| if (_textFlow && _textFlow.interactionManager is IEditManager)
|
| {
|
| var cf:TextLayoutFormat = new TextLayoutFormat();
|
| cf.columnCount = newCount;
|
| IEditManager(_textFlow.interactionManager).applyContainerFormat(cf);
|
| _textFlow.interactionManager.setFocus();
|
| }
|
| }
|
|
|
| private function changeColumnGap(newGap:String):void
|
| {
|
| if (_textFlow && _textFlow.interactionManager is IEditManager)
|
| {
|
| var cf:TextLayoutFormat = new TextLayoutFormat();
|
| cf.columnGap = newGap;
|
| IEditManager(_textFlow.interactionManager).applyContainerFormat(cf);
|
| _textFlow.interactionManager.setFocus();
|
| }
|
| }
|
|
|
| private function changeVerticalAlign(newAlign:String):void
|
| {
|
| if (_textFlow && _textFlow.interactionManager is IEditManager)
|
| {
|
| var cf:TextLayoutFormat = new TextLayoutFormat();
|
| cf.verticalAlign = newAlign;
|
| IEditManager(_textFlow.interactionManager).applyContainerFormat(cf);
|
| _textFlow.interactionManager.setFocus();
|
| }
|
| }
|
|
|
| private function changeBlockProgression(newProgression:String):void
|
| {
|
| if (_textFlow && _textFlow.interactionManager is IEditManager)
|
| {
|
| var cf:TextLayoutFormat = new TextLayoutFormat();
|
| cf.blockProgression = newProgression;
|
| IEditManager(_textFlow.interactionManager).applyFormatToElement(_textFlow,cf);
|
| _textFlow.interactionManager.setFocus();
|
| }
|
| }
|
|
|
| /** Set direction on the rootElement. This effects both columnDirection and default reading order. */
|
| private function changeDirection(newDirection:String):void
|
| {
|
| if (_textFlow && _textFlow.interactionManager is IEditManager)
|
| {
|
| var pf:TextLayoutFormat = new TextLayoutFormat();
|
| pf.direction = newDirection;
|
| IEditManager(_textFlow.interactionManager).applyFormatToElement(_textFlow,pf);
|
| _textFlow.interactionManager.setFocus();
|
| }
|
| }
|
|
|
| protected function doSpell():void
|
| {
|
| if(spellLang.text)
|
| SpellUIForTLF.enableSpelling(_textFlow,spellLang.text );
|
| _myContainerController.language=spellLang.text;
|
| }
|
|
|
| protected function undoSpell():void
|
| {
|
| SpellUIForTLF.disableSpelling(_textFlow);
|
| _myContainerController.setFuncsNull();
|
| }
|
|
|
|
|
| ]]>
|
| </mx:Script>
|
| <!-- <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%"> -->
|
| <mx:TabNavigator id="bottomTabs" width="100%" creationPolicy="all" paddingLeft="4" paddingBottom="8" backgroundColor="#D9D9D9" color="#202020" horizontalScrollPolicy="on" verticalScrollPolicy="on" resize="bottomTabsResize()">
|
| <mx:HBox label="Text" backgroundColor="#D9D9D9" width="496" horizontalScrollPolicy="off" verticalScrollPolicy="off" >
|
| <mx:Label text="Font:"/>
|
| <mx:ComboBox id="fontFamily" editable="true" enter="changeFontFamily(fontFamily.text)" close="changeFontFamily(fontFamily.text)" width="200"/>
|
| <mx:Label text="Size:"/>
|
| <mx:TextInput id="fontSize" enter="changeFontSize(fontSize.text)" width="40"/>
|
| <mx:Label text="LineHeight:"/>
|
| <mx:TextInput id="lineHeight" enter="changeLeading(lineHeight.text)" width="40"/>
|
| </mx:HBox>
|
| <mx:HBox label="Para" backgroundColor="#D9D9D9" width="496">
|
| <mx:Label text="Alignment:"/>
|
| <mx:ComboBox id="textAlign" close="changeTextAlign(textAlign.selectedItem.data)" dataProvider="{textAlignData}"/>
|
| <mx:Label text="FirstLineIdent:"/>
|
| <mx:TextInput id="textIndent" enter="changeTextIndent(textIndent.text)" width="40"/>
|
| </mx:HBox>
|
| <mx:HBox label="Container" backgroundColor="#D9D9D9" width="496">
|
| <mx:Label text="Columns:"/>
|
| <mx:TextInput id="columnCount" toolTip="auto or a number" enter="changeColumnCount(columnCount.text)" width="40"/>
|
| <mx:Label text="Gap:"/>
|
| <mx:TextInput id="columnGap" toolTip="a number" enter="changeColumnGap(columnGap.text)" width="40"/>
|
| <mx:Label text="VerticalAlignment:"/>
|
| <mx:ComboBox id="verticalAlign" close="changeVerticalAlign(verticalAlign.selectedItem.data)" dataProvider="{verticalAlignData}"/>
|
| </mx:HBox>
|
| <mx:HBox label="Flow" backgroundColor="#D9D9D9" width="496">
|
| <mx:Label text="Progression:"/>
|
| <mx:ComboBox id="blockProgression" close="changeBlockProgression(blockProgression.selectedItem.data)" dataProvider="{blockProgressionData}"/>
|
| <mx:Label text="Direction:"/>
|
| <mx:ComboBox id="directionBox" close="changeDirection(directionBox.selectedItem.data)" dataProvider="{directionData}"/>
|
| </mx:HBox>
|
| <mx:HBox label="Version" backgroundColor="#D9D9D9" width="496">
|
| <mx:TextInput id="versionInfo" editable="false" width="100%"/>
|
| </mx:HBox>
|
| <mx:HBox label="Spelling" backgroundColor="#D9D9D9" width="496">
|
| <mx:TextInput text="en_US" id="spellLang" editable="true" width="20%"/>
|
| <mx:Button id="spellBut" label="Enable Spelling" click="doSpell()"/>
|
| <mx:Button id="unspellBut" label="Disable Spelling" click="undoSpell()"/>
|
| </mx:HBox>
|
| </mx:TabNavigator>
|
| <mx:Canvas id="textArea" width="520" height="400"/>
|
| <!-- </mx:VBox> -->
|
| </mx:VBox>
|
