Talk In Code

Yesterday I talked about creating some simple Flex elements in your application. Today I will introduce a new element called Script.

The Script element, if you haven’t already guessed is used to run your application function and should be contained within the Application element. You can either put script inline like this.

<mx:Script>
// some code here
</mx:Script>

Or you can use the source attribute and link it with an external ActionScript source file.

<mx:Script source="myactionscriptfile.as">
</mx:Script>

The simplest thing you can do is use the function trace(). This is a debugging function that will output information into the debugging Window in your Flex IDE. To print out a message when your application is first run do the following.

<mx:Script>
trace('Flex program running.');
</mx:Script>

To capture a mouse click on a Button element you need to use the attribute click, the value of which can be either come code or a callback to a function. To use inline code using the following, which will print out a trace.

<mx:Button id="abutton" label="A button" click="trace('Button clicked');" />

To use a callback function do the following.

<mx:Button id="abutton" label="A button" click="clicked();" />

In your script section you can now add the function that you want, and perhaps do more than just a simple trace() call. The following script will send a trace message to your output and then open a browser window to the talk in code page. If you embed this application within a web page then the current browser window will redirect to the URL.

<mx:Script>
public function clicked():void
{
 trace('Button clicked');
 navigateToURL(new URLRequest('http://www.talkincode.com'));
}
</mx:Script>

To create a function you need to use the following syntax:

scope function functionName():return type
{
}

The scope is how the application will see the function. For a function like this that is outside the scope of a class (which is another topic) it should have public scope. The return type is the type of value that is returned by the function, and if no value is to be returned then void is used. If the function adds two numbers together and returns the result then the return type would be Number.

Following on from my previous blog post about installing Flex on Windows I thought I would go through how to create an interface using mxml. When you create a Flex 3 project the first file you are given is called Main.mxml, which has the following content.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
</mx:Application>

This file is used to compile and run your Flex project and is the central starting point for all the rest of the compile process. This file controls your interface of your program. At first this file might look daunting, but there are lots of elements to select from and if you know CSS then you should be somewhat familiar with how elements are coloured, padded and positioned.

When you compile your application it will create a swf file in the folder called bin. You can compile and run this file from FlashDevelop, but if you want to just compile it you can navigate to this folder and run the swf file separately.

I will now go through some of the elements that you are likely to need to create a simple interface. It is best to get used to the look and feel of your applications before you get into coding so this post will go over simple interface design and the actual actions will be covered in subsequent posts.

Application

The application element must be the root element of your mxml document. It is basically a container for all the other elements of your application.

Label

The label element is used to add some text to your interface and has the following syntax.
<mx:Label text="A label with some text." />
This will produce the following output.

Button

The button is exactly what it sounds like, it just adds a button to your interface. The following creates a button called "abutton" with the text "A button", but which has no action.
<mx:Button id="abutton" label="A button" />
This creates the following element.

Image

Again, the image element is exactly what it sounds like, it adds an image to your application. Here is the syntax.
<mx:Image source="image.jpg" />
This produces the following output with a simple gradient image.

However, one thing to note is that the source of the image is relative to the path of the swf file in the bin directory. Remember that if you move your swf file you will need to move these files along with it. This took me a while to figure out.

Panel

The panel element is used to contain other elements and create sections in your interface. It is an example of a layout container, which is useful if you want to create a left and right hand panel with different elements in each.
The following example creates a single panel, the full width of the application window, that contains the label, button and image elements that have been previously discussed in this post.
<mx:Panel title="Some example elements" width="100%">
 <mx:Label text="A label with some text." />
 <mx:Button id="abutton" label="A button" />
 <mx:Image source="logo.jpg" />
</mx:Panel>
This produces the following output.

The panel element comes with a fancy set of borders and a header element, if you want to get rid of these then use the following attributes for your panel.

<mx:Panel width="100%"
headerHeight="0"
highlightAlphas="[0, 0]"
borderThicknessTop="0"
borderThicknessLeft="0"
borderThicknessRight="0"
borderThicknessBottom="0"
backgroundAlpha="0"
dropShadowEnabled="false"
cornerRadius="0">
</mx:Panel>

With the addition of the other elements, as in the previous example, this panel now looks like this.

Canvas

The canvas element is like the panel element in that it allows you to add other elements to it and is a layout container. The major difference arises when the elements are rendered. The panel element will stop child elements from overlapping, whereas the canvas element doesn’t care and will overlap elements unless you specify x and y coordinates. The following example shows a canvas element that contains a image and a button, both of which are positioned absolutely.

<mx:Canvas width="50%" height="50%" autoLayout="false">
<mx:Image x="0" y="0" source="logo.jpg" />
<mx:Button x="0" y="100" id="abutton" label="A button" />
</mx:Canvas>

This generates the following output.

Spacer

The spacer element is used to provide some space between two elements. It is a blank element that should not contain any children and should be used only to add padding between elements. It has the following syntax, in this case the spacer will create a space of 10 pixels in height.
<mx:Spacer height="10" />

There are plenty of other elements to chose from, and this is only a very brief overview of some of the simpler ones. If you want to know more than check out the Flex 3 API Documentation which has more information on all of the elements discussed here, as well as information on many more which can’t all be covered here. However, it should be noted that not all of the things discussed on in the API are interface elements. There are things like the Date object which exists simply to provide a wrapper for date functions and form part of your application script, which I will do an introduction to in my next post.

If you want to give your users a little snippet of code it is nice to give them the option of selecting the entire block of code without having to highlight the text manually. This can be done with a simple JavaScript button.

Take the following form:

<form name="aForm">
<textarea name="aTextarea" cols="50" rows="20">
Copy this text onto your own website.
</textarea>
</form>


To enable the selection functionality you just need to add in an input button. The click event of this button will be to run a JavaScript bookmarklet that focuses on the textarea in question (in this case it is called aTextarea) and selects the text.

<form name="aForm">
<textarea name="aTextarea" cols="50" rows="20">
Copy this text onto your own website.
</textarea>
<br />
<input type="button" value="Highlight All" onclick="javascript:this.form.aTextarea.focus();this.form.aTextarea.select();" />
</form>


The user can then copy the text as they normally would.

This is a simple trick that will allow users to select the contents of a text area. First we need a text area.

<form><textarea name="textarea1" id="textarea1" rows="5" cols="40" wrap="off">This is some
long content.
This is some long content.
This is some long content.
This is some long content.
</textarea>
<br />
<input type="button" value="Select text" onclick="selectText('textarea1')">
</form>


This form also includes a button with an on click event that runs a function. This function takes a single parameter as the name of the element. It then sets the focus to this element and then selects all of the text therein.

function selectText(id){
 var id = document.getElementById(id);
 id.focus();
 id.select();
}


Why is this useful? Well lets say you had a form or a quiz that produced and answer, and you wanted people to post their answer on their blogs, which then linked back to your quiz. This would allow users to select the contents of a text area without having to select it themselves.