Joe Lennon

I’ve been experimenting with Google App Engine a bit recently and although it’s not without its problems, it fits really well with a couple of small projects I’m working on at the moment. Up until now, I’ve been mainly working with TextMate and the Google App Engine launcher, which is fine, but hardly an ideal development environment. That’s where Aptana Pydev comes in.

Pydev is an Eclipse/Aptana plugin for developing Python applications. It has great support for Django and other Python frameworks, and is a great all-round Python development tool. The feature that caught my eye the most was built-in support for Google App Engine development, but I ran into a few problems when I tried to get up and running with it on my Mac. In this post, I will walk through how I got it all working in the end.

There are several options for downloading Pydev. Eclipse developers can download it as a plugin, or if you don’t use Eclipse, Pydev comes bundled in Aptana Studio (an Eclipse-based IDE that is geared towards Web development). In this post I will cover the Aptana method, but it should be simple to extract the relevant parts if you are going down the plugin path.

Head to the Aptana Studio 3 download page (product in beta at time of writing) and download the disk image to your Mac. When you mount this image and open it, you should see a Finder window like the one in Figure 1.

Figure 1. Aptana Studio disk image

Follow the simple instructions and drag the Aptana Studio 3 folder into the Applications directory shortcut. This will install Aptana in your Applications directory. You will see the files being copied from the image as shown in Figure 2.

Figure 2. Copying files

When this is completed, you can open the Aptana Studio 3 folder in your Applications directory and launch Aptana by opening the AptanaStudio3.app file, as seen in Figure 3.

Figure 3. Finding AptanaStudio3.app

When you first launch Aptana Studio, you will see a blank workspace, as shown in Figure 4.

Figure 4. Blank Aptana Studio Workspace

Now it’s time for the fun stuff. First, you need to create a new project. Press [Cmd] + N to open the New Project wizard. In the list of Wizards, you should see a folder named “Pydev”. Expand this folder and you will find an option “Pydev Google App Engine Project”, as shown in Figure 5.

Figure 5. New Project Wizard

Make sure you’ve selected the correct option, and hit the Next > button to continue. On the next screen, you will need to enter details about the project, including the name of the project, the type of project (Python, Jython or Iron Python), the grammar version to use and the interpreter. Before you fill out this form, you’ll notice that there’s a link “Please configure an interpreter” in the related preferences before proceeding. This is shown in Figure 6.

Figure 6. PyDev Project Wizard

Click on this link and the main Aptana Preferences window will open, and you will be brought straight to the “Interpreter – Python” page of the Pydev preferences section. On the right-hand-side, there’s a list (currently empty) of Python interpreters, with two enabled buttons to the right of the list, New and Auto Config, as can be seen in Figure 7.

Warning: Don’t use Auto Config, on my system it found Python 2.6, and for Google App Engine development you’ll want to use Python 2.5.

Figure 7. PyDev Python Interpreter Preferences

Click the “New” button and Aptana will open the Select interpreter dialog. Enter the following values into the relevant fields:

• Interpreter Name: Python 2.5
• Interpreter Executable: /System/Library/Frameworks/Python.framework/Versions/2.5/bin/python2.5

If you prefer, browse to the location of the executable and select it. The dialog should look like Figure 8.

Figure 8. Select interpretor

Press the OK button to add this interpreter. Aptana will do some preparation, and before long you’ll be presented with another dialog that needs your attention. This one looks like the screen grab in Figure 9.

Figure 9. Adding folders to the SYSTEM pythonpath

In my case I simply accepted the default selections and pressed OK, but if you need to, you can select the other options. When you press OK, you should be back in the Aptana Preferences window, which should now look more like Figure 10.

Figure 10. Updated PyDev Preferences

You can now close this screen by pressing OK in the bottom right of the window. After you do this, Aptana will go off and do some work, and you’ll see a window like the one shown in Figure 11. This might take a minute or two to complete so be patient.

Figure 12. Aptana background work

When this progress window closes, you’ll be back at the Pydev Project setup screen. Enter whatever project name you like, I’ve called mine “game-planner” which is the same as the application ID for my Google App Engine application. Make sure “Python” is selected as the Project Type, and change the Grammar Version to 2.5. If you only set up the Python 2.5 interpreter, you can leave the Intepreter set to “Default”, or alternatively you can change this to “Python 2.5″ if you are unsure. The completed project screen should look something like Figure 13.

Figure 13. Project dialog, filled out

Press the Next > button to move on to the next step of the Project Wizard. This step asks you to select the Google App Engine Directory. It is shown in Figure 14.

Figure 14. Google App Engine Directory

You can use the Browse button, but unless you downloaded the zip archive of the App Engine Python SDK, you will not be able to find the directory in Finder. This is because the SDK package that comes in the form of the “Google App Engine Launcher” is wrapped up in a .app archive, which can’t be explored in Finder. See Figure 15 for an example of this.

Figure 15. Cannot browse GoogleAppEngineLauncher.app

The location it is looking for is the location where the Google App Engine files dev_appserver.py, appcfg.py, the lib directory and so on are located. If you are using the launcher version of the SDK, this is usually in the following location:

/Applications/GoogleAppEngineLauncher.app/Contents/Resources/GoogleAppEngine-default.bundle/Contents/Resources/google_appengine

If you paste this into the Google App Engine Directory field, however, you’ll notice that it results in an error. This error is shown in Figure 16.

Figure 16. Error finding django lib directory

The reason for this error is relatively straightforward – Google App Engine doesn’t have a directory named django at that path. Apparently this issue will be fixed in the next release of Pydev. However, as seen in Figure 17, there are two other directories that are very similar, django_0_96 and django_1_2.

Figure 17. django directories that are available

To solve the problem, we can simply create a symbolic link named django, which will point to the django_0_96 directory. To do this, open Terminal (Applications > Utilities > Terminal) and issue the following commands:

$ cd /Applications/GoogleAppEngineLauncher.app/Contents/Resources/GoogleAppEngine-default.bundle/Contents/Resources/google_appengine/lib/
$ ln -s django_0_96 django

If you issue the ls command after doing this, you should see that there is now what looks like a django directory. This is a soft link to the django_0_96 directory, and if any changes are made in django_0_96, they will automatically be reflected in the django directory. Sample Terminal output is shown in Figure 18.

Figure 18. Mac OS X Terminal Output

Next, go back to Aptana and enter the directory path again (cut it and re-paste it back) to refresh the wizard. This time, you should see a much friendlier result, like the one shown in Figure 19.

Figure 19. No errors this time around

Click Finish and the project will be created. You might be asked to switch to the Pydev perspective, as shown in Figure 20. It’s up to you whether you do this, I personally checked the Remember my decision field and pressed the Yes button.

Figure 20. Pydev Perspective

You should now be in your Pydev Google App Engine project. From here you can create, run and debug your Google App Engine applications. The default Pydev workspace is shown in Figure 21.

Figure 21. Pydev Eclipse Perspective

If you have any questions about this post, or have comments, suggestions or improvements, please leave a comment. Thanks for reading!

This post is designed to be a no-frills introduction to using HTML5 local storage. It assumes that you are using the latest version of Mozilla Firefox and the Firebug plug-in.

1. Checking for browser support

Open the Firebug console and enter the following command:

'localStorage' in window;

You should see the following output:

>>> 'localStorage' in window;
true

2. Storing data

HTML5 local storage stores data in named key/value pairs. The key must be a String, and the value can be any JavaScript data type, although it will be stored as a String. To store data, you use localStorage.setItem:

localStorage.setItem("name", "Joe");

Alternatively, you can use the square bracket syntax to store data:

localStorage["age"] = 25;

Or, you can use dot notation if you prefer:

localStorage.location = "Ireland";

If the key you use already exists, the existing key/value pair will be overwritten without warning.

3. Retrieving data

To retrieve data you can use getItem:

localStorage.getItem("name");

Output:

>>> localStorage.getItem("name");
"Joe"

Alternatively, you can also use square bracket syntax:

localStorage["age"];

Output:

>>> localStorage["age"];
"25"

Or, you can use dot notation:

localStorage.location;

Output:
>>> localStorage.location;
"Ireland"

4. Removing data

There are two ways to remove data in local storage. Firstly, you can delete a single key:

localStorage.removeItem("age");

Alternatively, you can clear all local storage data as follows:

localStorage.clear();

5. Finding data

You can get the number of key/value pairs stored in local storage using the length property:

localStorage.length;

To get the name of a key at a particular index, you can use the key method:

localStorage.key(0);

You can combine the two to iterate over the local storage data as follows:

for(var i=0, len=localStorage.length; i<len; i++) {
    var key = localStorage.key(i);
    var value = localStorage[key];
    console.log(key + " => " + value);
}

6. Events

You can keep track of changes to local storage using event handling. The “storage” event is fired any time data changes in local storage. This event is fired by the window object. For example (Note: this won’t work in IE):

window.addEventListener("storage", function(e) {
    console.log("Local storage was modified");
}, false);

The above will log a message to the Firebug console any time that the local storage data is modified (when adding, removing or replacing keys, clearing a non-empty storage, etc). At the time of writing, Firefox 3.6 did not include support for the storage event object properties key, oldValue, newValue and url.

7. Summary

So there you have it, a quick introduction to using HTML local storage. If you have any questions, leave a comment.

I’m currently working on a Web application project that is primarily coded in JavaScript. As part of the project however, I needed to use a Flex component for part of the application. I would also need a series of components (search boxes, trees and grids) to interact with this component. At first, it seemed to make sense to do all of this in Flex. However, when it comes to client-side development, we’re primarily a JavaScript shop, and would prefer to keep the amount of Flex we write to a minimum. Also, from a styling perspective, our existing JavaScript components would fit in better with our overall application, so it made much more sense for us to use them rather than Flex’s trees, grids and so on. Of course, this raised a problem – how do we communicate between JavaScript and Flex?

Fortunately, this is actually very straightforward. To prove the concept, I decided to write up a basic application that would allow you to pass messages between Flex and JavaScript components and output them on the screen. Here is a screenshot of this application in action (click for a larger image):

Sample Project in action

So on the left hand side of the application, there is a standard HTML input field, button element and a read-only textarea element. The input field will allow the user to write a message to be passed to the Flex application, which gets sent when the user clicks the “Send to Flex” button. The textarea field will be updated with any messages that are sent to JavaScript by Flex. On the right-hand-side, you have the same thing, but this time it will allow you to enter a message to send to JavaScript from Flex, and has an area where messages sent by JavaScript to Flex will be shown.

Let’s walk through how I did this. It’s worth pointing out at this point that I used Flash Builder 4 and the Flex 4 SDK to create this application. If you have a different setup, you may need to change your code to suit your version.

In Flash Builder, create a new Flex Project, and call it TestJSFlex. Let’s start off with the Flex application interface. You can use the Design view if you wish, but for a simple application like this, it’s fairly straightforward to create everything in code. Just before the closing </s:Application> tag in your source code, add the following three lines of code:

<s:TextInput x="2" y="2" width="310" id="flexInput"/>
<s:Button x="320" y="3" width="100" label="Send to JS" />
<s:TextArea x="2" y="32" width="416" height="200" id="flexMessages" editable="false"/>

While you’re at it, add the following attributes to your opening <s:Application> element:

width="440" height="255"

That’s our Flex application user interface done. Pretty simple, huh? Next, let’s change the HTML template that Flash Builder produces to add some basic HTML elements for the JavaScript side of our application to use. In “Package Explorer” (usually at the top left hand side of Flash Builder), your project folder should contain a few subfolders: src, Flex 4.0, bin-debug, html-template and libs. Expand the html-template folder and you should see a file named index.template.html. Right-click this file, and from the context menu select “Open With -> Text Editor”. The file should now open in a new editor tab in the main part of the IDE. In this file, locate the following section of HTML code:

<div id="flashContent">
    <p>
        To view this page ensure that Adobe Flash Player version
        ${version_major}.${version_minor}.${version_revision} or greater is installed.
    </p>
    <script type="text/javascript">
        var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
        document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
              + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
    </script>
</div>

This is basically the element where the Flex application will appear on the HTML page. We’re going to wrap it in a <div> container and add a section before it with a HTML form:

<div id="container">
    <h1>Flex and JavaScript</h1>
    <div class="section">
        <h2>JavaScript:</h2>
        <input type="text" id="js_value" />
        <input type="button" id="js_button" value="Send to Flex" />
        <br />
        <textarea id="js_messages" readonly></textarea>
    </div>
    <div class="section clearfix">
        <h2>Flex:</h2>
        <div id="flashContent">
            <p>
                To view this page ensure that Adobe Flash Player version
                ${version_major}.${version_minor}.${version_revision} or greater is installed.
            </p>
            <script type="text/javascript">
                var pageHost = ((document.location.protocol == "https:") ? "https://" :    "http://");
                document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
                     + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
           </script>
       </div>
    </div>
</div>

In the code above, we have added a few HTML form elements: a text field with the ID js_value, a button with the ID js_button and a read-only textarea with the ID js_messages. To make the whole thing look right, we’re going to add some CSS properties which will define the layout and size of the elements. In index.template.html, locate the CSS section of the code near the top of the file, which by default should contain:

<style type="text/css" media="screen">
    html, body { height:100%; }
    body { margin:0; padding:0; overflow:auto; text-align:center; background-color: ${bgcolor}; }
    #container { width: 900px; margin: 0px auto; text-align: left; }
    #flashContent { display:none; }
</style>

Modify this so that it contains:

<style type="text/css" media="screen">
    html, body { height:100%; }
    body { margin:0; padding:0; overflow:auto; text-align:center; background-color: ${bgcolor}; }
    #container { width: 900px; margin: 0px auto; text-align: left; }
    #flashContent { display:none; }
    h1, h2 { font-family: Helvetica, Arial, sans-serif; }
    h2 { margin-top: 0px; }
    .section { width: 450px; float: left; }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    #js_value { width: 310px; }
    #js_button { width: 100px; }
    #js_messages { width: 416px; height: 195px; margin-top: 8px; }
</style>

The CSS properties should be fairly self-explanatory. Basically, we have a container div 900 pixels wide, with two 450px sections inside it that appear side by side (using the float property), with a clearfix put in place so everything looks right in older browsers (just a note – I haven’t checked if this looks OK in anything other than Firefox 3.6, so don’t flame me if it doesn’t). Finally, we add some widths and heights to the form fields so they match up nicely with the Flex components.

That’s the UI section of the application taken care of. Next, let’s actually make Flex and JavaScript talk to each other. First, let’s get Flex talking to JavaScript. In the TestJSFlex.mxml file, just above where you entered the <s:TextInput> and other components a while back, add the following code:

<fx:Script>
    <![CDATA[
        public function sendToJS():void {
            ExternalInterface.call("receiveFromFlex", flexInput.text);
        }
    ]]>
</fx:Script>

This script block simply defines a single function named sendToJS. This function uses the ExternalInterface.call function to call a JavaScript function. The first parameter here is the name of the JavaScript function you want to call, in our case receiveFromFlex, and this is followed by any parameters you want to pass to JavaScript. Here, we have simply passed the current value of the text property of our text box with the id flexInput. Next, find the following line of code near the bottom of TestJSFlex.mxml:

<s:Button x="320" y="3" width="100" label="Send to JS" />

Let’s add a click event handler to this button, which will call the sendToJS function any time a user presses the button:

<s:Button x="320" y="3" width="100" label="Send to JS" click="sendToJS()" />

That’s everything that we need to do on the Flex side to call a JavaScript function. Of course, this is pretty much useless unless we actually declare the JavaScript function it is trying to call, so let’s hop over to index.template.html and create that now. Just before the closing </head> tag in this file, add the following code:

<script type="text/javascript">
    function receiveFromFlex(str) {
        var msgs = document.getElementById("js_messages");
        msgs.value += 'Flex says: '+str+'\n';
    }
</script>

This function simply accepts a string value as a parameter, and appends it (followed by a new line) to the element with the ID js_messages (the textarea element). Save all your files and run the application by pressing the green Play/Run button in the Flash Builder toolbar. At this point, you should be able to enter a message in the input box on the right hand side (the Flex side) and hit “Send to JS”. This message should then appear on the left hand side. That was pretty easy, huh? Ok, now all that’s left for us to do is implement the reverse scenario – sending messages from JavaScript to Flex.

In the previous section, you created a <script> block in the index.template.html file. Inside this block, just below the receiveFromFlex function, add the following code:

function sendToFlex() {
    var flexApp = document.getElementById("${application}");
    flexApp.sendToFlex(document.getElementById("js_value").value);
}

window.onload = function() {
    var btn = document.getElementById("js_button");
    btn.onclick = sendToFlex;
}

The first function, sendToFlex, gets a handle to the Flex application object using document.getElementById. You’ll notice that the ${application} template variable is used. This is recommended so that if you change the name of your Flex application, you won’t need to change the value in your template file. The function then calls the sendToFlex function in the Flex application object. Finally, we attach this function as an event handler to the HTML button element with the ID js_button. That’s it on the JavaScript side of things. Save index.template.html and jump back to TestJSFlex.mxml. Now, let’s add the code necessary to handle this on the Flex side of things. Inside the <fx:Script> block, below the sendToJS function, add the following two functions:

public function initApp():void {
    ExternalInterface.addCallback("sendToFlex", receiveFromJS);
}

public function receiveFromJS(str:String):void {
    flexMessages.text += 'JS says: '+str+'\n';
}

The first function, initApp, uses the ExternalInterface.addCallback function to map a JavaScript function to a Flex function. Here, we tell the sendToFlex JavaScript function callback to execute the Flex function named receiveFromJS. This function accepts a String parameter and appends it to the <s:TextArea> element followed by a newline. The final piece of the puzzle is to wire up the initApp function to be called when the Flex application has finished loading. In your <s:Application> element, add the attribute

creationComplete="initApp()"

and you’re done! You can now run the application and enter messages in the HTML input field, which will appear in the Flex message box when you hit “Send to Flex”. Easy as pie! For reference purposes, here are the full listings for the two source files we’ve worked with in this post.

TestJSFlex.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx" width="440" height="255"
           creationComplete="initApp()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            public function sendToJS():void {
                ExternalInterface.call("receiveFromFlex", flexInput.text);
            }

            public function initApp():void {
                ExternalInterface.addCallback("sendToFlex", receiveFromJS);
            }

            public function receiveFromJS(str:String):void {
                flexMessages.text += 'JS says: '+str+'\n';
            }
        ]]>
    </fx:Script>
    <s:TextInput x="2" y="2" width="310" id="flexInput"/>
    <s:Button x="320" y="3" width="100" label="Send to JS" click="sendToJS()" />
    <s:TextArea x="2" y="32" width="416" height="200" id="flexMessages" editable="false"/>
</s:Application>

index.template.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <!--
    Smart developers always View Source.

    This application was built using Adobe Flex, an open source framework
    for building rich Internet applications that get delivered via the
    Flash Player or to desktops via Adobe AIR.

    Learn more about Flex at http://flex.org
    // -->
    <head>
        <title>${title}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and
             the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as
             the percentage of the height of its parent container, which has to be set explicitly.  Initially,
             don't display flashContent div so it won't show if JavaScript disabled.
        -->
        <style type="text/css" media="screen">
            html, body { height:100%; }
            body { margin:0; padding:0; overflow:auto; text-align:center; background-color: ${bgcolor}; }
            #container { width: 900px; margin: 0px auto; text-align: left; }
            #flashContent { display:none; }
            h1, h2 { font-family: Helvetica, Arial, sans-serif; }
            h2 { margin-top: 0px; }
            .section { width: 450px; float: left; }
            .clearfix:after {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            #js_value { width: 310px; }
            #js_button { width: 100px; }
            #js_messages { width: 416px; height: 195px; margin-top: 8px; }
        </style>

        <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
        <!-- BEGIN Browser History required section ${useBrowserHistory}>
        <link rel="stylesheet" type="text/css" href="history/history.css" />
        <script type="text/javascript" src="history/history.js"></script>
        <!${useBrowserHistory} END Browser History required section -->

        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->
            var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "${expressInstallSwf}";
            var flashvars = {};
            var params = {};
            params.quality = "high";
            params.bgcolor = "${bgcolor}";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "${application}";
            attributes.name = "${application}";
            attributes.align = "middle";
            swfobject.embedSWF(
                "${swf}.swf", "flashContent",
                "${width}", "${height}",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
            <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
            swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>

        <script type="text/javascript">
            function receiveFromFlex(str) {
                var msgs = document.getElementById("js_messages");
                msgs.value += 'Flex says: '+str+'\n';
            }

            function sendToFlex() {
                var flexApp = document.getElementById("${application}");
                flexApp.sendToFlex(document.getElementById("js_value").value);
            }

            window.onload = function() {
                var btn = document.getElementById("js_button");
                btn.onclick = sendToFlex;
            }
        </script>
    </head>
    <body>
        <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough
              JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
              when JavaScript is disabled.
        -->
        <div id="container">
            <h1>Flex and JavaScript</h1>
            <div class="section">
                <h2>JavaScript:</h2>
                <input type="text" id="js_value" />
                <input type="button" id="js_button" value="Send to Flex" />
                <br />
                <textarea id="js_messages" readonly></textarea>
            </div>
            <div class="section clearfix">
                <h2>Flex:</h2>
                <div id="flashContent">
                    <p>
                        To view this page ensure that Adobe Flash Player version
                        ${version_major}.${version_minor}.${version_revision} or greater is installed.
                    </p>
                    <script type="text/javascript">
                        var pageHost = ((document.location.protocol == "https:") ? "https://" :    "http://");
                        document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
                                + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
                    </script>
                </div>
            </div>
        </div>

        <noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="${width}" height="${height}" id="${application}">
                <param name="movie" value="${swf}.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="${bgcolor}" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="${swf}.swf" width="${width}" height="${height}">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="${bgcolor}" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                    <p>
                        Either scripts and active content are not permitted to run or Adobe Flash Player version
                        ${version_major}.${version_minor}.${version_revision} or greater is not installed.
                    </p>
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </noscript>
    </body>
</html>

If you’d prefer to just take the sample Flex project, you can download a zip file of it below:

TestJSFlex.zip (2,286 KB)

When developing Web applications using Oracle XE and the embedded PL/SQL gateway, you may find that debugging is a pain due to the lack of log files (like you’d normally find in Apache folders in a full Oracle application server install). Well, the good news is, that you can configure errors to be reported directly in the browser, so that rather than getting very unhelpful 404 and other HTTP error messages, you get a full debug trace of the error that occurred. Full credit for this find goes to Dietmar Aust, who has a great blog on Oracle XE and Application Express. See his original post for even more insight into this.

To switch on error reporting and the printing of debug messages to the browser, simply issue the following commands. Of course, be sure to replace “embosa” on line 3 with your own DAD name. Also, be sure to turn this back off again in a production environment, this should only be used for development and testing purposes.

begin
dbms_epg.set_global_attribute('log-level', 3);
dbms_epg.set_dad_attribute('embosa', 'error-style', 'DebugStyle');
end;
/

To test, simply go to a URL that doesn’t exist, and you should see a useful error message instead of a unhelpful “Not Found” message. See the screenshot below for an example of what this error message looks like.

Useful PL/SQL error message

In case you haven’t heard by now, CouchDB 1.0 was released earlier this month. One of the questions I’ve been asked most about CouchDB is how can one go about installing it on Windows. Up until recently, there were a few hacked installers available, each of which would install CouchDB and its dependencies, but these far from perfect, with most of CouchDB’s test suite failing when run under this setup. Thankfully, there is now an official Windows binary available which will have you up and running with CouchDB in no time.

Step 1: Grab the binary from http://www.couch.io/get
Step 2: Unzip to your hard drive (I unzipped to C:\ and renamed the extracted folder to couchdb).
Step 3: Go into the bin directory and run couchdb.bat. This will launch the Erlang command line and run CouchDB. You should see a DOS window with the message “CouchDB 1.0.0 – prepare to relax…”.
Step 4: Open your browser and point it to http://127.0.0.1:5984/_utils/ to launch Futon
Step 5: From the navigation bar on the right hand side, click on “Test Suite” and at the top of the test suite’s page, click the “Run All” button to start the tests. Leave your browser do its thing (it’ll lock up while it’s performing the tests) and all going well, each of 66 tests should return with a success message.
Step 6: Click on “Overview” at the top right of the browser and start creating CouchDB databases!

Enjoy.