If you are using a swap sync, the best practice is to *not* replicate sequences, but to make sure that they are different on both sides, such that an insert on database A will never conflict with an insert on database B. There are three general ways to do this:

1. Use interleaving sequences. On database A, define the sequence as START WITH 1 INCREMENT BY 2. On database B, define the sequence as START WITH 2 INCREMENT BY 2. Thus, the two sequences will never have the same value.
2. Use different ranges. For example, database A would use a sequence of START WITH 1, while database B uses START WITH 100000000. This is not foolproof, as A can eventually catch up with B, although you can define A as MAXVALUE 99999999.
3. Use a common sequence. This relies on one or both of the databases using a function that makes a call to an external sequence

After reading this I decided to go by the first approach so I wrote a script to alter the sequences.

// Add the sequences you dont want affected here. The schema doesn't
// really matter.
$exclude = array(
    'client_code_seq',
    'jv_number_seq',
    'pv_number_seq',
);

for ($i = 1; $i < $argc; $i++)
{
    if(substr($argv[$i], 0, 2) == "--")
    {
        $parameter = substr($argv[$i], 2, strlen($argv[$i]) - 2);
        $i++;
        $$parameter = $argv[$i];
    }
    else
    {
        $tables[] = $argv[$i];
    }
}

$conn = pg_connect("host=$host port=5432 dbname=$db user=$user password=$password");

pg_query($conn,"BEGIN");
$sequences_result = pg_query($conn, "SELECT * FROM information_schema.sequences");
$sequences = array();
while($sequence = pg_fetch_assoc($sequences_result))
{
    if(array_search($sequence['sequence_name'], $exclude) !== false)
    {
        echo "Skipping " . $sequence['sequence_schema'] . '.' . $sequence['sequence_name'] . "\n";
        continue;
    }
    $sequence = $sequence['sequence_schema'] . '.' . $sequence['sequence_name'];
    $value = pg_query($conn, "SELECT last_value from $sequence");
    $value = pg_fetch_assoc($value);

    pg_query($conn, "ALTER SEQUENCE $sequence INCREMENT BY 2");

    if($value["last_value"] % 2 == 0 && $mode == 'odd')
    {
        pg_query($conn, "ALTER SEQUENCE $sequence RESTART WITH " . ($value['last_value'] + 1));
    }
    elseif(($value["last_value"] % 2 == 1 || $value["last_value"] == 1) && $mode == 'even')
    {
        pg_query($conn, "ALTER SEQUENCE $sequence RESTART WITH " . ($value['last_value'] + 1));
    }
}
pg_query($conn,"COMMIT");

This script takes five required parameters. The parameters are not validated so if it is wrongly specified the consequences are unknown. PLEASE BE CAREFUL! The parameters are:

1. The hostname
2. The username
3. The password
4. The database name
5. The mode of the change (even or odd)

An example usage could be

php update_sequences.php --host db1.accra.srv --user postgres --password somepass --db appcore --mode even

Hope that helps. Happy Programming!

Setting up External Tools

If you have read my previous post you would realize that it took advantage of the External Tools plugin which comes with GEdit. What makes this one even interesting is the fact that the new approach is going to take an external tools script (the build script) which ships with the GEdit External Tools plugin and modify a few lines here and there to get it to work. The build script is written for the make build system so we are just going to modify it to recognize the ant build system instead.

To get started you need to:

1. Open the External Tools plugin and find the build tool.
2. Locate and copy the script of the build tool. It should look something similar to this
   

   #!/bin/sh
   
   EHOME=`echo $HOME | sed "s/#/\#/"`
   DIR=$GEDIT_CURRENT_DOCUMENT_DIR
   while test "$DIR" != "/"; do
       for m in GNUmakefile makefile Makefile; do
           if [ -f "${DIR}/${m}" ]; then
               echo "Using ${m} from ${DIR}" | sed "s#$EHOME#~#" > /dev/stderr
               make -C "${DIR}"
               exit
           fi
       done
       DIR=`dirname "${DIR}"`
   done
   echo "No Makefile found!" > /dev/stderr
   

3. Create a new tool and call it Ant
4. Paste the script for the build tool into the empty space provided for the script of the Ant tool
5. Locate the line which contains:
   

   for m in GNUmakefile makefile Makefile; do
   

   (this should be the 6th line) and modify this line so it looks like

   for m in build.xml; do
   

6. Locate the line which says:
   

   make -C "${DIR}"
   

   and replace it so it says

   ant -buildfile "${DIR}/build.xml"
   

7. Finally locate the line which says
   

   echo "No Makefile found!" > /dev/stderr
   

   and modify it to look like

   echo "No build.xml file found!" > /dev/stderr
   

8. If you want a shortcut you can click on the shortcut button and select your favorite build shortcut.

I guess that does it for the Ant shell script. The next part would deal with incorporating the ant build system into your flex project. It is worth noting that this method used here could be used to build just about any program in any language which uses the ant build system.

Building your Code

To build your code you need a build.xml file which would describe how ant should build your code. This file is organized in such a way that it represents a series of tasks. A good description of how to write a build.xml file for a flex project could be found here on the Adobe Livedocs website.

I don’t really know how recent the technology I’m going to describe in this post is but it saved my life and I think its worth blogging about. (Afterall I haven’t written on this blog in a while). Embedded servers are light servers which sit right in the core of your application. The cool thing about these servers is the fact that they are part of your application. This means they have the opportunity (if given) to access all the variables in the very guts of your application. They are able to provide universal graphical user interfaces (web pages) which could easily be viewed accross several devices and platforms without much hassle. Through these interfaces, you can do anything from displaying status information, altering configurations or even issuing real-time commands to the application. The embedded web servers could also be used to add remote procedure call capabilities or other forms of API features to your application. This would make it easy for other developers to use services of your application without having to worry about low level networking protocols.

A Basic 404 Server

Lets take a quick look at one embedded web server class library for the Java platform. This class library comes with the com.sun.net.httpserver package. It’s currently my favourite embedded web server for Java software development. Its powerful enough to allow you to build any kind of web based control mechanism for your application and it is also very easy to develop with. Without talking much lets start coding.

import com.sun.net.httpserver.*;
import java.net.InetSocketAddress;
import java.io.IOException;

public class WebServer
{
    public static void main(String[] args)
    {
        HttpServer server;
        InetSocketAddress address = new InetSocketAddress(4500);
        try {
            server = HttpServer.create(address, 0);
            server.start();
        } catch(IOException ex) {
            System.err.println("Error");
        }
    }
}

The code above is a basic embedded webserver. After compiling it on your machine, you can access it through http://localhost:4500. It only displays a 404 Error Message because it has nothing to display. The code basically creates an instance of the HttpServer class by passing an object of the InetSocketAddress class to it. The InetSocketAddress object contains information about which hosts are allowed to access the web server. In this particular instance the object makes it possible for any host to access the web server on the 4500 port.

Serving Hello World

To serve content through your embedded web server, you need to create handlers. These handlers are implementations of the
HttpHandler interface from the class library. The interface expects your handler classes which implement it to have a handle method which takes up the job of serving your webpages and interpreting requests. The handle method is passed an object of the HttpExchange class and this object contains information about the request made to the server. It contains the request headers and it gives you the opportunity to set the response headers. It also gives you access to output and input streams for passing the information around. To add a handler to a server you need to add contexts to the server. These contexts represent the paths which need to be invoked in the URL to access the particular context handler. So to access the root or default page of your server you might want to define a context for the “/” path. The handler for this context would then handle the output. Lets take a look at an implementation of a handler.

import com.sun.net.httpserver.*;
import java.io.IOException;

class HomePageHandler implements HttpHandler {
    public void handle (HttpExchange exchange)
    {
        String response;

        // Set the response headers
        Headers responseHeaders = exchange.getResponseHeaders();
        responseHeaders.set("Content-Type", "text/html");

        // Set the text for the response
        response = "<html><head><title>Hello World</title>" +
                   "</head><body><h1>Hello World</h1></body></html>";

        // Send the response
        try {
            exchange.sendResponseHeaders(200, response.length());
            exchange.getResponseBody().write(response.getBytes());
        } catch (IOException ex) {

        }
    }
}

Now we need to define the context in our server.

import com.sun.net.httpserver.*;
import java.net.InetSocketAddress;
import java.io.IOException;

public class WebServer
{
    public static void main(String[] args)
    {
        HttpServer server;
        InetSocketAddress address = new InetSocketAddress(4500);
        try {
            server = HttpServer.create(address, 0);
            // Define the context
            server.createContext("/", new HomePageHandler());
            server.start();
        } catch(IOException ex) {
            System.err.println("Error");
        }
    }
}

After compiling this code and executing it, you would see the text Hello World written boldly in your browser when you access your local server.

Handling Form Data

When user input is required forms are used. There are mainly two ways of handling form data in web applications. With forms which use the GET method, the data is directly sent through the URL. With POST method forms the data is however sent through the body of the request. The code below shows how to access form data through both the POST and GET methods. Once compiled and executed, the code below would provide three contexts. The default context would present two forms, one using the GET method and the other for the POST method. The other contexts handle either the GET or POST forms.

import com.sun.net.httpserver.*;
import java.net.InetSocketAddress;
import java.io.IOException;

public class WebServer
{
    public static void main(String[] args)
    {
        HttpServer server;
        InetSocketAddress address = new InetSocketAddress(4500);
        try {
            server = HttpServer.create(address, 0);
            server.createContext("/", new HomePageHandler());
            server.createContext("/get", new GetRequestHandler());
            server.createContext("/post", new PostRequestHandler());
            server.start();
        } catch(IOException ex) {
	    System.err.println("Error");
	}
    }
}

import com.sun.net.httpserver.*;
import java.io.IOException;

class HomePageHandler implements HttpHandler {
    public void handle (HttpExchange exchange)
    {
        String response;
        Headers responseHeaders = exchange.getResponseHeaders();
        responseHeaders.set("Content-Type", "text/html");
        response = "<html><head><title>Hello World</title>" +
                   "</head><body>"+
                   "<h1>Get Form</h1>"+
                   "<form action='/get' method='GET'>"+
                   "Firstname "+
                   "<input type='text' name='firstname' /><br/>"+
                   "Lastname "+
                   "<input type='text' name='lastname' /><br/>"+
                   "<input type='submit' value='Submit' /><br/>"+
                   "</form>"+
                   "<h1>Post Form</h1>"+
                   "<form action='/post' method='POST'>"+
                   "Firstname "+
                   "<input type='text' name='firstname' /><br/>"+
                   "Lastname "+
                   "<input type='text' name='lastname' /><br/>"+
                   "<input type='submit' value='Submit' /><br/>"+
                   "</form>"+
                   "</body></html>";
        try {
            exchange.sendResponseHeaders(200, response.length());
            exchange.getResponseBody().write(response.getBytes());
        } catch (IOException ex) {

        }
    }
}

import com.sun.net.httpserver.*;
import java.io.IOException;
import java.net.URLDecoder;

class GetRequestHandler implements HttpHandler {
	public void handle (HttpExchange exchange)
	{
            String response = "";
            Headers responseHeaders = exchange.getResponseHeaders();
            responseHeaders.set("Content-Type", "text/plain");
            String[] variables = exchange.getRequestURI().getRawQuery().split("&");
             try {
                for(int i = 0; i < variables.length; i++)
            {
                String[] parts = variables[i].split("=");
                response += (parts[0] + " = " + URLDecoder.decode(parts[1], "utf8") + "\n");
            }
            exchange.sendResponseHeaders(200, response.length());
            exchange.getResponseBody().write(response.getBytes());
        } catch (IOException ex) {
            System.out.println(ex);
        }
    }
}

Conclusion?

I am very sure we have covered enough ground concerning this webserver. There is a lot more that could be done through it. I would advice going through the documentation for this class which could be found here http://java.sun.com/javase/6/docs/jre/api/net/httpserver/spec/com/sun/net/httpserver/package-summary.html.

Happy Programming!

Let’s start with this simple diagram drawn up in OpenOffice.org’s Draw package.

Assuming soft shadows are to be added to each of the rounded rectangles, fire up GIMP and draw a rounded rectangle (not necessarily up to the scale and size of what you have in your OOo drawing).

After the rectangle is drawn, add a little bit of Gaussian blur to it. This is what would actually give the soft shadow effect.

Next insert the shadow you created from GIMP into your drawing.

Send the shadow to the back of the drawing …

… and align it properly (as you like). And there you would have a beautiful soft shadow. You can use OOo to adjust the transparency of the shadow till you think its nice enough.

To make your diagram even nicer you can consider filling your rounded rectangle with a gradient.

You can also extend the effect to all the other elements in your diagram.

So there we have it. A few things you could do to this would be to:

1. Group all the elements so that when you resize or scale the group, the shadows and all their corresponding diagrams would also be resized.
2. Have a folder which contains already made shadows for the common drawing primitives that you use (e.g. circles, rectangles e.t.c). In the cases where your diagrams seem to be a bit more complicated, you can then go into gimp and create a specific shadow for your diagram.

Hope you enjoyed this one.

Happy Drawing.

Okay so without any more talking, this is how we are going to do it. We are going to use the Sound, Sprite and ExtenalInterface classes from ActionScript class library to implement a very simple flash object which has the capabilities to load MP3′s and play them. We would then use JavaScript as a medium to control the playback from this flash object by talking to it through the ExternalInterface class. In effect we are building a JavaScript wrapper around the ActionScript Sound class. I don’t really know if there are any security issues related to this but I would investigate.

Lets start coding. I am going to give you the full code for the ActionScript component then I would explain it later.

package
{
    import flash.media.Sound;
    import flash.media.SoundChannel;
    import flash.external.ExternalInterface;
    import flash.net.URLRequest;
    import flash.display.Sprite;

    public class JSMP3 extends Sprite
    {
        private var soundChannel:SoundChannel;
        private var sound:Sound;

        public function JSMP3():void
        {
            // Externalize our interface functions
            // for the load, play and stop
            ExternalInterface.addCallback("load",load);
            ExternalInterface.addCallback("play",play);
            ExternalInterface.addCallback("stop",stop);
        }

        private function load(url:String):void
        {
            // Create a new URLRequest for the mp3 file
            var urlRequest:URLRequest = new URLRequest(url);

            // Try to stop the sound channel if it already
            // playing any audio.
            try
            {
                soundChannel.stop();
            }
            catch(e:Error) {  }

            // Create a new sound object and load the
            // URL into the object
            sound = new Sound();
            sound.load(urlRequest);
        }

        private function play():void
        {
            // Play the sound
            soundChannel = sound.play();
        }

        private function stop():void
        {
            // Try to stop the sound if it is already playing.
            try
            {
                soundChannel.stop();
            }
            catch(e:Error)
            {

            }
        }
    }
}

You could copy this code into a text file and save it as JSMP3.as. To compile it you must have the Flex 3 SDK installed and from the command line you could execute mxmlc JSMP3.as. That should produce the JSMP3.swf file which would be used for the purpose of playing the MP3 files in your JavaScript program. Lets try to understand the code.

Looking at the source code you see that it is a really simple one. The main package, the imports and the class are all standard ActionScript stuff. The JSMP3 class extends the Sprite class from the flash.display package. Although we are not going to be using any Sprite features, this extension is still necessary because without that our MP3 player cannot be embedded into an HTML page. The constructor uses the ExternalInterface class to expose three methods to the JavaScript. These are the load, play and stop methods. The implementation for these methods are below the constructor and they expect their parameters to be passed from the JavaScripts that are going to be calling them. Well now that we are done with the ActionScript, lets look at the JavaScript / HTML code.

var JSMP3Player =
{
    player : function()
        {
            if (navigator.appName.indexOf("Microsoft") != -1)
            {
                return window["JSMP3"];
            }
            else
            {
                return document["JSMP3"];
            }
        },

    play : function(url)
        {
            this.player().load(url);
            this.player().play();
        },

    stop : function()
        {
            this.player().stop();
        }
}

This JavaScript wraps around the flash object that would be embedded into the HTML page. From the code you can tell that the flash object would have an id or a name JSMP3. The function for doing this wrapping was actually taken from the Flex 3 SDL Language Reference.

<html>
<head>
    <title>MP3 Player Test</title>
    <script type="text/javascript" src="JSMP3.js"></script>
</head>
<body>

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
             id="JSMP3" width="0" height="0"
             codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
        <param name="movie" value="JSMP3.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#869ca7" />
        <param name="allowScriptAccess" value="sameDomain" />
        <embed src="JSMP3.swf" quality="high" bgcolor="#869ca7"
             width="0" height="0" name="JSMP3" align="middle"
             play="true" loop="false" quality="high" allowScriptAccess="sameDomain"
             type="application/x-shockwave-flash"
             pluginspage="http://www.macromedia.com/go/getflashplayer">
        </embed>
    </object>

    <input type="button" onclick="JSMP3Player.play('obrafour_nkaseibo.mp3')" value="Play" />
    <input type="button" onClick="JSMP3Player.stop()" value="Stop" />

</body>
</html>

This code adds the flash object to the html page. The object is given a width and a height of 0 so we do not see it. The two input buttons for play and stop actually call the play and stop methods for our JavaScript wrapper which also calls the flash object to either load and play an MP3 file or stop the playback if any.

So there we have it. I have tried to keep it as simple as possible. Several things could be done to extend this player. For instance you could add methods to detect when the audio is buffering, you could add methods to enable the controlling of the volume as well as seek through the playback of the audio. I wish I could have given some form of demonstration. All the same I think the picture should be clear enough if your coding skills are on point (as far as the technologies utilized are concerned). I stand to be corrected if any errors are detected in this post.

Happy Programming.

Over the past few weeks I have been working on this project which in some ways uses MIDI. I have primarily been working in Linux  but I had plans of porting the finished application to windows. In order to convince myself after a while that my approach would work, I decided to try to compile the unfinished app in Windows.

My toolchain basically contains Autotools & GCC under linux. I however use Eclipse as my IDE and GDB for debugging. What I did was I set up MinGW under windows just so I could mimic the linux environment to some detail. I was able to get precompiled versions of most of the libraries I was using (GTKmm, SDL) except for portaudio and portmidi. So I had to get the sources and build them myself. Portaudio built straight out of the box without any problems but Portmidi sucked. I am pretty sure other people might have this same problem so I am writing just in case …

How do you do this?

Well I just want to assure you that we are not going to be writing any scripts so don’t worry about that. Before you start ensure that you have Eclipse and MinGW properly installed (such that you can actually compile your C programs in Eclipse with MinGW).

Download a copy of the PortMidi library from here http://portmedia.sourceforge.net/.  Extract the archive and move the porttime folder out of the portmidi folder. We are going to compile the porttime library separately. It would later be used as a dependency when compiling the port midi library itself. To prep the folder for compilation delete the source files that are not needed for the MS-Windows platform (I know this sounds harsh but that is exactly how I did it). These files are ptlinux.c, ptmacos_cf.c and ptmacos_mach.c. Okay now fire up the Eclipse ide. Create a new C shared library project. Call it porttime or whatever seems right but make sure that you do not use the default location. You should rather point it to the location of the altered porttime directory (d:\blog\porttime in my case).

Creating the C Project

When asked about the type of configuration on the next page, just choose release. Your project should now be ready. But you cant start compiling yet. There are still a few things you have to do. You now have to setup the compilation parameters. Right-click on the project in the project explorer and select the properties option.

When the properties dialog opens, edit the C/C++ Build>>Settings options. Now this is what you do:

1. Under the Tools Settings tab select the MinGW C Linker>>Libraries option and add the winmm library, by clicking on the icon with the in Libraries box. This window should look like this after that:
2. Still under the Mingw C Linker node, select the Shared Library Settings option. Make sure the shared checkbox is active. Set the Shared object name field to libporttime.dll, set the Import library name to libporttime.dll.a and set the DEF file name to libporttime.def. This should also look like so:
   

That should do it for the configuration of the porttime library. That was easy right? You can now go ahead and compile the library by clicking on the build icon (the one that looks like the hammer). We now have the porttime library built.

The main goal of all these activities was to compile the PortMidi library so now that we have porttime we can go ahead to compile the portmidi library. Its just as easy as building the porttime library. The only thing is this time you have to spend repeating the steps.

Hope You Liked This?

So that’s all. Hope I helped someone out there. Happy Programming.

I must admit here that one of the most annoying things for me when I was learning how to develop PHP/HTML applications was designing those HTML forms. Point blank, it sucks! It is very painful validating your data and doing all the other crap that comes along with that HTML chore. Don’t tell me about DreamWeaver and all those other WYSIWYG editors, they just don’t work for me.To solve my own problems, I decided to build a library to help me on the whole forms thing. This was actually inspired by the concept of the forms api in the Drupal content management system and the code igniter framework. I just didn’t use either because I wanted to be able to do something of my own so I could just extend it to do whatever I wanted without going through lenghty documentation. Trust me, the time invested is sometimes worth it. This forms library I am talking about has already been used in a couple of applications already (some by me and others by some very good developer friends of mine). This probably means that it has undergone some amount of testing already. I cannot stick my neck out that it is very secure and I can also not stick my neck out that it is very stable but one thing I can tell you is that it works.

Before we proceed to look at how the form library works and how it could be incorporated into an application, let’s spend some time to go through the features of the library. This library does the following things:

1. It automatically generates HTML scripts which represents your forms.
2. It validates you form data (on the server side).
3. It provides some form of framework on which complex forms could be built.
4. It also has some features which allow you to automatically dump the values collected from the form into a table in a MySQL database.

Creating your first form

Using this library is quite simple. All you really do is define your form and set a couple of callbacks to handle the data collected from the form. For a quick example lets build a small form which is used to collect data for an address book application. This form would later be configured to dump the data into the database. So here is the code (with the assumption that you have the fapi folder in the correct place):

require_once "fapi/fapi.php";

$form = new Form();

$firstname = new TextField("Firstname","firstname","The firstname of the person");
$form->add($firstname);

$lastname = new TextField("Lastname","lastname","The lastname of the person");
$form->add($lastname);

$email = new EmailField("Email","email","The primary email address of the person");
$form->add($email);

$phone = new TextField("Phone","phone_number","Phone number");
$form->add($phone);

$form->render();
?>

Putting this stub of php code anywhere in your application would cause it to render a form which looks like the form in the image below.

Well you would agree with me that this is ugly but with a bit of CSS styling it could go a long way. I took some time to write a stylesheet for the output. This CSS file is located at fapi/css/fapi.css. Include this stylesheet in your HTML header and you should have a form which looks like the one below.

You must have noticed that the input fields in the form extends accross the whole widht of the page. You could limit this by placing your form in a div, a table or any other HTML tag that would prevent its content from overflowing its boundaries.

Now let me explain the code. For this example we used the Form class, the TextField class and the EmailField class. The constructors of these classes (except that of the Form class) take a similar set of parameters. The first parameter is the label, the second parameter is the name of the field (which we would use for other purposes later) and the last parameter is a brief description you want to be displayed under the field when it is displayed. None of these are compulsory though so you could just instantiate the class without specifying any of the parameters. These type of fields are not the only types available in the library. You have similar stuff for radio buttons, check boxes, selection lists etc.

A More Advanced Form

Lets extend our form a bit. We are going to add a few more fields and containers. In this form we are going to have field sets (which are also containers just like forms) on our form and we are going to put the fields into the field set. The code for this form follows.

require_once "fapi/fapi.php";

//forms
$form = new Form();

//name
$name_fieldset = new FieldSet("Name");
$form->add($name_fieldset);

$firstname = new TextField("Firstname","firstname","The firstname of the person");
$name_fieldset->add($firstname);

$lastname = new TextField("Lastname","lastname","The lastname of the person");
$name_fieldset->add($lastname);

//internet
$internet_fieldset = new FieldSet("Internet");
$form->add($internet_fieldset);

$email = new EmailField("Email","email","The primary email address of the person");
$internet_fieldset->add($email);

$secondary_email = new EmailField("Second Email","secondary_email","The secondary email address of the person");
$internet_fieldset->add($secondary_email);

//phone
$phone_fieldset = new FieldSet("Phone");
$form->add($phone_fieldset);

$home_phone = new TextField("Home","home_phone_number","Home phone number");
$phone_fieldset->add($home_phone);

$work_phone = new TextField("Work","work_phone_number","Work phone number");
$phone_fieldset->add($work_phone);

$cell_phone = new TextField("Cell","cell_phone_number","Cell phone number");
$phone_fieldset->add($cell_phone);

$form->render();
?>

If you haven’t already noticed, you should see that this time the fieldset objects are added to the form and the textfield objects are added to the fieldsets. This causes the fieldsets to be rendered on the form and the textfields to be rendered within the fieldsets. This is what the code above would output.

An Even More Advanced Form

Let us step things up a bit higher. We are now going to create a form with tabs. For the tabs to switch we may have to include some javascripts. The needed scripts are the fapi/jscripts/jquery.js and the fapi/jscripts/fapi.js. I guess we are going to fire on all cylinders now. Lets see the code.

require_once "fapi/fapi.php";

//forms
$form = new Form();

//category
$category = new SelectionList("Group","group","Which group should this address be stored under");
$category->addOption("Friends");
$category->addOption("Family");
$category->addOption("Business");
$form->add($category);

//tabs
$tabs = new TabLayout();
$form->add($tabs);

$contact_tab = new Tab("Contact");
$tabs->add($contact_tab);

//name
$name_fieldset = new FieldSet("Name");
$contact_tab->add($name_fieldset);

$firstname = new TextField("Firstname","firstname","The firstname of the person");
$name_fieldset->add($firstname);

$lastname = new TextField("Lastname","lastname","The lastname of the person");
$name_fieldset->add($lastname);

//internet
$internet_fieldset = new FieldSet("Internet");
$contact_tab->add($internet_fieldset);

$email = new EmailField("Email","email","The primary email address of the person");
$internet_fieldset->add($email);

$secondary_email = new EmailField("Second Email","secondary_email","The secondary email address of the person");
$internet_fieldset->add($secondary_email);

//phone
$phone_fieldset = new FieldSet("Phone");
$contact_tab->add($phone_fieldset);

$home_phone = new TextField("Home","home_phone_number","Home phone number");
$phone_fieldset->add($home_phone);

$work_phone = new TextField("Work","work_phone_number","Work phone number");
$phone_fieldset->add($work_phone);

$cell_phone = new TextField("Cell","cell_phone_number","Cell phone number");
$phone_fieldset->add($cell_phone);

//address
$address_tab = new Tab("Address");
$tabs->add($address_tab);

$home_fs = new FieldSet("Home","The home address of the person");
$address_tab->add($home_fs);

$home_address = new TextArea("Address","home_address");
$home_fs->add($home_address);

$home_city = new TextField("City","home_city");
$home_fs->add($home_city);

$home_rsp = new TextField("Region, State or Provice","home_rsp");
$home_fs->add($home_rsp);

$home_country = new TextField("Country","home_country");
$home_fs->add($home_country);

$work_fs = new FieldSet("Work","The work address of the person");
$address_tab->add($work_fs);

$work_address = new TextArea("Address","work_address");
$work_fs->add($work_address);

$work_city = new TextField("City","work_city");
$work_fs->add($work_city);

$work_rsp = new TextField("Region, State or Provice","work_rsp");
$work_fs->add($work_rsp);

$work_country = new TextField("Country","work_country");
$work_fs->add($work_country);

//ims
$im_tab = new Tab("IMs");
$tabs->add($im_tab);

$im_google = new TextField("Google","im_google");
$im_tab->add($im_google);

$im_yahoo = new TextField("Yahoo!","im_yahoo");
$im_tab->add($im_yahoo);

$im_msn = new TextField("MSN","im_msn");
$im_tab->add($im_msn);

$im_aol = new TextField("AOL","im_aol");
$im_tab->add($im_aol);

$im_irc = new TextField("IRC","im_irc");
$im_tab->add($im_irc);

$form->render();

You can click here to have a look at this code in action http://fahodzi.paanoo.com/fapi_tutorial1.php

Elements, Fields and Containers

After we have done some forms lets see what more we can do. In case you haven’t noticed already, the whole library is orgarnized into fields and containers. There are actually three major abstract classes which serve as the foundation for the whole library. These are the Element, Field and Container classes. The Element class, which is the base class for most of the classes in the library is responsible for some html services. The Field class is a subclass of the Element class and it is responsible for producing and handling fields like (TextField, RadioButton, Checkboxes and the others). The container class is also a subclass of the element class. It is used for containing other elements. This means it can contain both fields and containers. Some of the contianers are the Form, the Tab, the Box and the Fieldset.

Validating the form data

There are several validations you can perform on your fields. First of all you can set some fields as required just by setting the reqired property of the field. This is done by calling the setter method as such:

$field->setRequired(true);

As soon as you call this method on any of the fields, it would be required for that field to contain data whenever the form is submitted. If there is no data a simple error message is displayed for the user to handle.

Apart from the required validation you can define custom validation functions which are called on your field whenever the data is submitted. The details of this can be figured out from the documentation. The TextField class has an inbuilt regular expression validation method which comes in handy when you want to do more complex validations.

Getting Using the Form Data

After you have collected your data you might want to perform some operations on the form data. In most cases you might want to save the data into a database. Every form has a property called the callback. The call back is a function which takes one parameter. The parameter of the callback function is passed the data that was captured in the form. Another thing that many people find cool about this form library is the automatic data insertion into the database. These are handled by the setDatabaseSchema(), setDatabaseTable() and setPrimaryKey() methods.

If you set the database schema and table and a connection exists to a database, the form class automatically dumps the form data into the table. The field names of your table must correspond with the field names of the fields in the form. If you set the primary key, the form is automatically filled with the form data on rendering so that when submitted, the data is rather updated instead of it being saved again.

Conclusions

There are so many things I had wanted to write about but time didn’t allow me to. I am pretty sure if you really want to use this library, you can go through the little documentation that comes with it and figure things out for your self. It is really not that difficult. All the same, I would like to comment a little about things I personally do not like about this library.

The paramount thing is the one that has to do with form data being saved automatically. This is really not very good and although I liked it initially really do not use it much these days. I rather extracted the code that does the magic and used it to implement some form of active record system and it is even much more simpler (I may write on that in my next post).

Another thing that I would really like to add in future is proper javascript support so that the forms could be submitted through AJAX. Now that would be cool. When I do that I do not want to break the library signatures so that it would be very portable to existing code. But for now this is all I have and unless I really feel the necessity to do that, I am really going to keep this one. Anyway I have added the whole library and a little documentation to this post. You can download it from here http://fahodzi.paanoo.com/fapi.tar.bz2 (please bear with me if you find any strange things in the documentation. I made the that one for a client) . Hope you enjoy it. Happy programming.

I realized I had been left behind. I personally decided to get into this but I couldn’t really get a suitable editor. The Flex Builder is expensive and most of the options out there are targeted more to Windows than to Linux. So I had to make do with what I had and I stuck to one of my personal favorites GEdit. I like to use GEdit a lot because for some reason the Oblivion colour scheme seems to be very friendly to my eyes. Well, this article is intended to help you configure GEdit so you could us it to write codes for flex or ActionScript.

Asumptions

1. I am assuming that you have installed a copy of the Flex SDK and it is accessible through your PATH.
2. I am assuming that you have some basic understanding of bash sell scripting.

Configuring Gedit

In GEdit locate Tools >> External Tools. On the dialog that opens select New Tool. Give the tool a name and go ahead to give it a shortcut (Try to figure those out). In the commands section paste the following:

#!/bin/bash
if (/opt/flex-3.2/bin/mxmlc "$GEDIT_CURRENT_DOCUMENT_PATH")
then
/opt/flex-3.2/bin/flashplayer "`echo $GEDIT_CURRENT_DOCUMENT_PATH | awk -F.mxml {'print $1'}`.swf"
fi

Be sure to replace /opt/flex-3.2 with the correct location of your flex SDK and you are good to go. Anytime you hit the shortcut for your external tool your flex compiler would be invoked.

For syntax hilighting you might want to use XML for the MXML files and JAVA for the ActionScript files.

Update

This post has been updated see http://fahodzi.wordpress.com/2010/08/24/getting-flex-ible-with-gedit-ant-style/ for updated post

I guess I have seen everything from unneccesary deadlines to poorly developped applications but one thing that I realized in general is that everybody is constantly in search of an easy way to finish something quickly and move on. It might be true that this is how everybody is working around the world (I mean with all the talk going on about rapid application development and all that), but I feel down here most people just have it wrong. We go around trying to find a way that works fast and better yet we end up working with something that is obviously not up to the task in any way. It might sound like I am just trying to air my frustrations on this blog but it is not so (although that is what blogs are for). The real truth is that it is difficult finding a relationship between what one is taught in school and what you meet in the real world. Things are much more different and I guess there are only two choices for me. Either I adapt to the industry or I try to influence it. The first option sounds like the best because the second one is very ambitious. However, the second one is worth giving a try. Well for now I think I just have to shut up and keep all my worries to myself.

Please not that blogs are for self expression. Not everything is written for people to read. But if you read through this and it didn’t make any sense then …

So we started digging on the Internet to find out what was actually wrong with the system. The first hint of our real problem was sensed when we saw a large number of newsgroup posts which described problems similar to what we were facing. Then we realized we were actually playing around with encoding problems. We figured out that saving the files we wanted to include with ANSI encoding saved the day.

The previous encoding format we were using was the UTF-8 format. This format is preceeded with a Byte Order Mark (BOM). This Byte Order Mark is obviously supposed to tell the reader of the format about the byte order of the file it is reading. When the PHP include function was called to include this file it also included the BOM characters which IE decided to display and mess up the template.