Saturday, November 26, 2011

Creating a Flex AIR text editor: Part 47

In this tutorial we will work on the SnippetWindow class. We will add the ability to add new snippets and add new categories, as well as drag and drop the items in the tree.

We're only going to work in the SnippetWindow.mxml file in this tutorial.

Firstly find the doApply() function. Remove the line that turns the window invisible and leave it like that:

private function doApply():void{
dispatchEvent( new Event( Event.CHANGE ) );
}

Now go to the tree object and set its dragEnabled and dropEnabled properties to true, as well as the dragDrop property to doApply():

<mx:Tree id="snippetManageTree" dataProvider="{treeData}" width="490" height="300" showRoot="false" labelField="@label" dragEnabled="true" dropEnabled="true" dragDrop="doApply();" />

This is why we've removed the line that closes the window - because the function is called everytime the user drops something, and that is definitely not supposed to close the window.

We're going to create 2 functions called addSnippet and addCategory. The first function has 2 parameters - the name of the snippet and its contents, while the second only has 1 parameter - the name of the category.

Update the contents of the window to set the click properties of the Add snippet and Add category buttons - call addSnippet and addCategory functions respectively, pass text input values as parameters. Also set the other buttons disabled for now.

<s:VGroup paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5">
<s:Label text="Snippet creation and management: " />
<s:TextInput id="newNameInput" text="New snippet name" width="490" />
<s:TextArea id="newTextInput" width="490" height="200" text="Snippet text" />
<s:HGroup>
<s:Button label="Add snippet" click="addSnippet(newNameInput.text, newTextInput.text);" />
<s:Button label="Save changes" enabled="false" />
<s:Button label="Delete snippet"  enabled="false" />
</s:HGroup>

<s:Label text="" />

<s:Label text="Category creation and management: " />
<s:TextInput id="newCategoryInput" text="New category name" width="490" />
<s:HGroup>
<s:Button label="Add category" click="addCategory(newCategoryInput.text);"/>
<s:Button label="Save changes" enabled="false"/>
<s:Button label="Delete category with its contents" enabled="false"/>
</s:HGroup>

<s:Label text="" />

<mx:Tree id="snippetManageTree" dataProvider="{treeData}" width="490" height="300" showRoot="false" labelField="@label" dragEnabled="true" dropEnabled="true" dragDrop="doApply();" />
</s:VGroup>

The addSnippet function creates a new XML node similarly to the way we create it in the main file, and we append this node to treeData.

private function addSnippet(name:String, text:String):void{
var newNode:XML = <snippet/>;
newNode.@label = name;
newNode.@snippetText = text;
newNode.@isBranch = false;
treeData[0].appendChild(newNode);
}

Pretty much the same for addCategory, except that it doesn't have snippetText attribute and its isBranch attribute is set to true:

private function addCategory(name:String):void{
var newNode:XML = <category/>;
newNode.@label = name;
newNode.@isBranch = true;
treeData[0].appendChild(newNode);
}

Full code of SnippetWindow.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Window xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx"
title="Snippet management" type="utility" width="500" height="700"
creationComplete="init();" showStatusBar="false" alwaysInFront="true" resizable="false">

<fx:Script>
<![CDATA[
import flash.events.Event;

[Bindable]
private var treeData:XMLList;

private function init():void{
this.addEventListener(Event.CLOSING, onClose);
}

private function onClose(evt:Event):void {
this.visible = false;
evt.preventDefault();
}

public function setValues(xmlData:XMLList, createNewOnStart:Boolean = false, newText:String = ""):void {
treeData = xmlData;
newTextInput.text = newText;
newNameInput.text = "New snippet name here";
if (newText=="") {
newTextInput.text = "New snippet text here";
}
}

private function doApply():void{
dispatchEvent( new Event( Event.CHANGE ) );
}

private function addSnippet(name:String, text:String):void{
var newNode:XML = <snippet/>;
newNode.@label = name;
newNode.@snippetText = text;
newNode.@isBranch = false;
treeData[0].appendChild(newNode);
}

private function addCategory(name:String):void{
var newNode:XML = <category/>;
newNode.@label = name;
newNode.@isBranch = true;
treeData[0].appendChild(newNode);
}
]]>
</fx:Script>

<s:VGroup paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5">
<s:Label text="Snippet creation and management: " />
<s:TextInput id="newNameInput" text="New snippet name" width="490" />
<s:TextArea id="newTextInput" width="490" height="200" text="Snippet text" />
<s:HGroup>
<s:Button label="Add snippet" click="addSnippet(newNameInput.text, newTextInput.text);" />
<s:Button label="Save changes" enabled="false" />
<s:Button label="Delete snippet"  enabled="false" />
</s:HGroup>

<s:Label text="" />

<s:Label text="Category creation and management: " />
<s:TextInput id="newCategoryInput" text="New category name" width="490" />
<s:HGroup>
<s:Button label="Add category" click="addCategory(newCategoryInput.text);"/>
<s:Button label="Save changes" enabled="false"/>
<s:Button label="Delete category with its contents" enabled="false"/>
</s:HGroup>

<s:Label text="" />

<mx:Tree id="snippetManageTree" dataProvider="{treeData}" width="490" height="300" showRoot="false" labelField="@label" dragEnabled="true" dropEnabled="true" dragDrop="doApply();" />
</s:VGroup>

</mx:Window>

We can now create snippets and categories in real time, we can move them around in real time, but none of this is saved to the database yet.

Thanks for reading!

No comments:

Post a Comment