<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:richTextEditor="ardisia.components.richTextEditor.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:pane="ardisia.components.pane.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import com.adobe.linguistics.spelling.SpellUI;
import mx.core.FlexGlobals;
import spark.components.RichEditableText;
import spark.events.IndexChangeEvent;
public function creationComplete():void
{
var module:DisplayObjectContainer = this;
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, function(event:IndexChangeEvent):void
{
if (demoAppWrapper.viewstack.selectedIndex == 0)
{
if (popupPanel)
popupPanel.visible = false;
}
else
{
if (popupPanel)
{
popupPanel.visible = true;
popupPanel.floatPane(DisplayObject(FlexGlobals.topLevelApplication), false, false, false, null, moduleFactory);
var pt:Point = textareaB.localToGlobal(new Point(textareaB.width + 20, 0));
popupPanel.move(pt.x, pt.y);
rteB.target = RichEditableText(textareaB.textDisplay);
if (textAreaTargetSelect)
textAreaTargetSelect.selectedIndex = 0;
}
}
});
SpellUI.enableSpelling(textareaA, 'en_US');
SpellUI.enableSpelling(textareaB, 'en_US');
SpellUI.enableSpelling(textareaC, 'en_US');
rteA.target = RichEditableText(textareaA.textDisplay);
}
protected function loadFonts():void
{
var arr:Array = Font.enumerateFonts(true);
arr.sortOn("fontName", Array.CASEINSENSITIVE);
var fonts:Array = [];
for each (var font:Font in arr)
{
fonts.push(font.fontName);
}
rteA.fontFamilies = fonts;
}
protected function spellCheckerHandler(event:Event):void
{
if (spellCheckingSelect.selected)
{
SpellUI.enableSpelling(textareaA, 'en_US');
SpellUI.enableSpelling(textareaB, 'en_US');
SpellUI.enableSpelling(textareaC, 'en_US');
}
else
{
SpellUI.disableSpelling(textareaA);
SpellUI.disableSpelling(textareaB);
SpellUI.disableSpelling(textareaC);
}
}
protected function removedFromStageHandler(event:Event):void
{
if (popupPanel)
popupPanel.closeFloatedPane(true);
}
]]>
</fx:Script>
<fx:Declarations>
<pane:Pane id="popupPanel"
title="Drag Me Around"
boundingMode="boundEntirePane"
displayCloseButton="false" displayMaximizedButton="false" displayMinimizedButton="false" canBeResized="false"
skinClass.stockholm="components.richTextEditor.themes.stockholm.skins.PaneSkin"
skinClass.london="components.richTextEditor.themes.london.skins.PaneSkin"
skinClass.spark="components.richTextEditor.themes.spark.skins.PaneSkin">
<richTextEditor:RichTextEditor id="rteB"
top="-1" right="-1" bottom="-1" left="-1"
top.london="5" right.london="0" bottom.london="0" left.london="0"
fontFamilies="{['OpenSans', 'Arial', 'Georgia', 'Times New Roman', 'Verdana', 'Tahoma']}"
enableKeyboardShortcuts="{shortcutsSelect.selected}"
target="{RichEditableText(textareaB.textDisplay)}"
skinClass="ardisia.components.richTextEditor.themes.spark.skins.RichTextEditorSkin"/>
</pane:Pane>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="RichTextEditor Description"
description="Text editor designed to manage the Text Layout Framework ('TLF') for RichEditableText based controls. Skinnable and designed to be highly customizable. All supported functions are routed through an EditManager so all functions can be undone/redone. Keyboard shortcuts that are supported out of the box: Undo = ctrl + z Redo = ctrl + y Italic = ctrl + i Underline = ctrl + u Bold = ctrl + b Text Align Left = ctrl + l Text Align Center = ctrl + e Text Align Right = ctrl + r Text Align Justify = ctrl + j Numerical List = ctrl + shift + 7 Disc List = ctrl + shift + 8."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:Form top="10" bottom="10" left="10">
<s:FormHeading label="Text Selection Color"/>
<s:FormItem label="Focused:">
<colorPicker:ColorPicker id="focusedColorSelect"
showColorSpacePicker="true"
enableOutsideHoverColorSelect="true"
selectedColor="{getStyle('focusedTextSelectionColor')}"/>
</s:FormItem>
<s:FormItem label="Inactive:">
<colorPicker:ColorPicker id="inactiveColorSelect"
showColorSpacePicker="true"
enableOutsideHoverColorSelect="true"
selectedColor="{getStyle('inactiveTextSelectionColor')}"/>
</s:FormItem>
<s:FormItem label="Unfocused:">
<colorPicker:ColorPicker id="unfocusedColorSelect"
showColorSpacePicker="true"
enableOutsideHoverColorSelect="true"
selectedColor="{getStyle('unfocusedTextSelectionColor')}"/>
</s:FormItem>
<separators:HSeparator width="100%"/>
<s:FormItem label="Enable Spell Checking:">
<s:CheckBox id="spellCheckingSelect"
selected="true"
change="spellCheckerHandler(event)"/>
</s:FormItem>
<s:FormItem label="Enable Keyboard Shortcuts:">
<s:CheckBox id="shortcutsSelect"
selected="true"/>
</s:FormItem>
</s:Form>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Basic Example</data:tabLabel>
<data:exampleDescription>RichTextEditor statically bound to a TextArea using the Text Layout Framework ('TLF'). Use the export buttons below to export the TextArea content as HTML or XML.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup gap="20">
<s:Form>
<s:FormItem label="Label:">
<s:Button label="Load Fonts"
click="loadFonts()"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Click to load all of your computer's fonts into the font selection ComboBox below."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="Border Visible:">
<s:CheckBox id="borderVisibleSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{borderVisibleSelect.selected}"
label="Border Color:">
<colorPicker:ColorPicker id="borderColorSelect"
selectedColor="{getStyle('borderColor')}"
showColorSpacePicker="true"
enableOutsideHoverColorSelect="true"/>
</s:FormItem>
<s:FormItem enabled="{borderVisibleSelect.selected}"
label="Border Alpha:">
<s:HSlider id="borderAlphaSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="1"/>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="Background Color:">
<colorPicker:ColorPicker id="backgroundColorSelect"
selectedColor.spark="#DEDEDE" selectedColor.stockholm="#E9E9E9" selectedColor.london="#E2E2E2"
showColorSpacePicker="true"
enableOutsideHoverColorSelect="true"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<s:HGroup horizontalCenter="0" verticalCenter="0"
verticalAlign="justify">
<s:VGroup gap="4" horizontalAlign="justify">
<s:TextArea id="textareaA"
height="200"
depth="1"
text="This sentence has some missspelled texxt."
focusedTextSelectionColor="{focusedColorSelect.selectedColor}"
inactiveTextSelectionColor="{inactiveColorSelect.selectedColor}"
unfocusedTextSelectionColor="{unfocusedColorSelect.selectedColor}"/>
<richTextEditor:RichTextEditor id="rteA"
fontFamilies="{['OpenSans', 'Arial', 'Georgia', 'Times New Roman', 'Verdana', 'Tahoma']}"
enableKeyboardShortcuts="{shortcutsSelect.selected}"
backgroundColor="{backgroundColorSelect.selectedColor}"
borderVisible="{borderVisibleSelect.selected}"
borderColor="{borderColorSelect.selectedColor}"
borderAlpha="{borderAlphaSelect.value}"/>
</s:VGroup>
<separators:VSeparator height="100%"/>
<s:VGroup>
<s:HGroup>
<s:Button label="Export To HTML"
click="markupTextA.text=String(rteA.exportAsHTML());"/>
<s:Button label="Export To XML"
click="markupTextA.text=String(rteA.exportAsXML());"/>
</s:HGroup>
<s:TextArea id="markupTextA"
width="200" height="100%"
editable="false"/>
</s:VGroup>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Floating Example</data:tabLabel>
<data:exampleDescription>RichTextEditor floated in a Pane and bound to a Spark TextArea supporting TLF. Illustrates that the editor does not need to be bound in the layout. Multiple targets are available for the RichTextEditor to illustrate that the managed RichEditableText control can be changed on the fly.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup gap="20">
<s:Form>
<s:FormItem label="Targeted TextArea:">
<s:DropDownList id="textAreaTargetSelect"
requireSelection="true"
selectedIndex="0"
change="if (textAreaTargetSelect.selectedIndex == 0) {
textareaB.enabled = true; textareaC.enabled = false;
rteB.target = RichEditableText(textareaB.textDisplay);
} else {
textareaB.enabled = false; textareaC.enabled = true;
rteB.target = RichEditableText(textareaC.textDisplay);
}">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>TextArea A</fx:String>
<fx:String>TextArea B</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Select which TextArea below the RichTextEditor is managing. Can be changed on the fly."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<s:VGroup top="20" bottom="20"
horizontalCenter="0"
gap="-1" horizontalAlign="justify">
<s:HGroup height="100%"
verticalAlign="justify">
<s:VGroup height="100%"
horizontalAlign="justify">
<s:Label text="TextArea A"
fontWeight="bold"/>
<s:TextArea id="textareaB"
text="This sentence has some missspelled texxt."
width="350" height="50%"
focusedTextSelectionColor="{focusedColorSelect.selectedColor}"
inactiveTextSelectionColor="{inactiveColorSelect.selectedColor}"
unfocusedTextSelectionColor="{unfocusedColorSelect.selectedColor}"/>
<s:Label text="TextArea B"
fontWeight="bold"/>
<s:TextArea id="textareaC"
text="This sentence has some missspelled texxt."
enabled="false"
width="350" height="50%"
focusedTextSelectionColor="{focusedColorSelect.selectedColor}"
inactiveTextSelectionColor="{inactiveColorSelect.selectedColor}"
unfocusedTextSelectionColor="{unfocusedColorSelect.selectedColor}"/>
</s:VGroup>
<separators:VSeparator height="100%"/>
<s:VGroup height="100%">
<s:HGroup>
<s:Button label="Export To HTML"
click="markupTextB.text=String(rteB.exportAsHTML());"/>
<s:Button label="Export To XML"
click="markupTextB.text=String(rteB.exportAsXML());"/>
</s:HGroup>
<s:TextArea id="markupTextB"
width="300" height="100%"
editable="false"/>
</s:VGroup>
</s:HGroup>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>