Tuesday, October 11, 2011

Creating a Flex AIR text editor: Part 1

In this tutorial series I will guide you through the creation of a text editor program in Flex AIR.

The program I am making is called Kirpad (reference to notepad), which in the end will be a free program with several features. This tutorial series is a step-by-step guide, where I explain how I created the program.

This will be like an open-source text editor with code explanation.

For the development of this application, I am using FlashDevelop and I code in Flex on the Adobe AIR platform.

Create a new Flex 4 AIR project, and let's get started.

The first thing I am going to do is set certain properties of the WindowedApplication tags. Specifically, I am going to set a listener for the creationComplete event and direct it to an init() function, set the title property to "Kirpad" and the showStatusBar property to "false". The status bar will only get in the way, so I decided to get rid of it.

<s:WindowedApplication 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="init();" title="Kirpad" showStatusBar="false">

<fx:Script>
<![CDATA[
private function init():void {}
]]>
</fx:Script>

Now I am going to add a native menu for the application. The data for the menu items will be stored in an XML object in the Declarations tags. For now, I will just populate my menu with 2 items - File and Settings, and each of these items will have one subitem - Open and Word wrap.

I am going to create a hotkey for the Open item, by setting its 'key' property to 'o' and 'controlKey' property to 'true'. This means that the hotkey is Ctrl+O. We don't need a hotkey for the Word wrap item, but I will set its 'type' property to 'check'. This will make it a toggleable button.

<fx:Declarations>
<fx:XML id="windowMenu">
<root>
<menuitem label="File">
<menuitem label="Open" key="o" controlKey="true" />
</menuitem>
<menuitem label="Settings">
<menuitem label="Word wrap" type="check" />
</menuitem>
</root>
</fx:XML>
</fx:Declarations>

Now I can create a FlexNativeMenu object and apply it to the menu property of the root application tags:

<s:menu>
<mx:FlexNativeMenu dataProvider="{windowMenu}" showRoot="false" labelField="@label" keyEquivalentField="@key" />
</s:menu>

As you can see, I set its dataProvider to the windowMenu XML object I just created. The showRoot property should be set to false, labelField to @label and keyEquivalentField to @key. This will ensure that the labels and the hotkeys are read from the correct properties.

Now I am going to create the main element for any text editor program - the text area. Set its width and height to 100%, make the border invisible:

<s:TextArea id="textArea" width="100%" height="100%" borderVisible="false" />

Here's the full code so far:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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="init();" title="Kirpad" showStatusBar="false">
   
<s:menu>
<mx:FlexNativeMenu dataProvider="{windowMenu}" showRoot="false" labelField="@label" keyEquivalentField="@key" />
</s:menu>

<fx:Script>
<![CDATA[
private function init():void {}
]]>
</fx:Script>

<fx:Declarations>
<fx:XML id="windowMenu">
<root>
<menuitem label="File">
<menuitem label="Open" key="o" controlKey="true" />
</menuitem>
<menuitem label="Settings">
<menuitem label="Word wrap" type="check"/>
</menuitem>
</root>
</fx:XML>
</fx:Declarations>

<s:TextArea id="textArea" width="100%" height="100%" borderVisible="false"/>

</s:WindowedApplication>

The application now consists of a menu bar (that does nothing yet!) and a text area (that you can write stuff into!).

We will continue in the next part!

Thanks for reading!

No comments:

Post a Comment