Talk In Code

Building your projects into directories is nice, but distributing these projects is difficult if you have to build the compressed files yourself. Phing has the ability to create zip and tar files using simple commands.

The most convenient way of using the tar and zip commands is by using a fileset. But rather than use the fileset that was used to copy the files into the build directory it is best to create a separate fileset that is used to compress the contents of the build directory.

<fileset dir="./" id="zipFiles">
<include name="myProject_build/**" />
</fileset>

To compress the files into a tar use the tar element. This accepts two parameters, the destination file (called destfile) and the compression to use (called compression). The compression attribute can take one of three values, these are gzip, bzip2 and none. Using none will not run any compression algorithms on the files. The following example will create a file called myProject.tar in the current directory, which contains all of the files and directories from the myProject_build directory.

<tar destfile="myProject.tar" compression="gzip">
<fileset refid="zipFiles" />
</tar>

To compress the files into a zip file you need to use the zip element. This works in exactly the same way as the tar element, except it doesn’t have a compression attribute.

<zip destfile="myProject.zip">
<fileset refid="zipFiles" />
</zip>

The tar element works very well and the file created was as expected, but I had a little bit of trouble with the zip element. I am using Windows XP to run phing and the file that was created was blocked by Windows for having odd content. After I figured out how to open it I realized that phing had used the full path to the build folder. So rather than the zip file containing a folder called myProject_build, it contained the following folder structure, with the correct files included in the end directory.

C:\dev\tests\phing\myProject_build

Has anyone else seen this? I would be grateful for any help on the subject.

You can also use the zip and tar elements without the fileset element by using the basedir attribute. By setting the basedir you are telling phing to use everything in that directory and every sub directory.

<tar destfile="phing.tar" basedir="." compression="gzip"/>

There is a warning on the phing website that states using basedir and fileset simultaneously can result in strange contents in the archive. So I would suggest using one or the other.

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.

Creating a simple highlight effect is quite easy when you use the JavaScript framework mootools.

The first thing to do is grab the mootools library from the site and link it in your web page. You can select different components with mootools, but if you grab the whole thing you can start to play with whatever you want. Put this line of code in the head section of your web page.
<script type="text/javascript" src="mootools.js"></script>

For this example I want the highlight to occur when the page has finished loading. So I use the window.addEvent function to add an action for the ‘domready’ event to the window object of the page. Like this.

window.addEvent('domready', function(){
  alert('dom ready');
}

The next step is to create the highlight. This is done by creating a Fx.Styles object and then chaining the colour change. First we change it to black, and then we use the chain command and add another colour change back to white. You can change this to any colour that you like. The duration is also set in the first section of the chain so that it immediately turns to black and then fades slowly to white. Place the following code in the head section underneath the mootools include.

<script type="text/javascript">
window.addEvent('domready', function(){
  var fx = new Fx.Styles($('test'),{duration:2000,wait:false});
  fx.start({
    'duration':0,
    'background-color':'#000'
  }).chain(function(){
    this.start({
    'background-color':'#fff'})
  });
});
</script>


The final step is to create the element that will be used by the script. You can use any element that is visible on the screen (even the body) but for this example we will use a paragraph.

<body>
<p id="test">wibble wibble</p>
</body>

This effect can be used on any web page where you want to draw the users attention to something. This might be an updated section of the page, or a text area on a form.

The reason I have used the Fx.Styles object is so that it is easy to extend the functionality of the highlight. If you also wanted to change the colour of the text along with the background you only have to add in the relevant styles.