If you’d like to also prevent hot linking then you might like to first have a read of Marcel Eichner’s post on preventing hot linking which this post is based on.

Then you can use a slightly modified version of that code which includes the proxy_pass directive in both of the location sections.

server {
    server_name yourdomain.com www.yourdomain.com;
    location ~* (\.jpg|\.png|\.gif)$ {
        valid_referers none blocked yourdomain.com www.yourdomain.com ~\.google\. ~\.yahoo\. ~\.bing\. ~\.facebook\. ~\.fbcdn\.;
        if ($invalid_referer) {
            return 403;
        }
        proxy_pass http://127.0.0.1:8123;
    }
    location / {
        proxy_pass http://127.0.0.1:8123;
    }
}

Some notes about this code:

In the valid_referers line, ‘blocked’ allows Referers that have been blocked by a firewall, ‘none’ allows requests with no Referer.

This is then followed by a list of domains and domain patterns that are also allowed. Google, Bing, etc are allowed for their image bots to access your site.

1. Dynamically call object methods

Javascript objects can contain functions as object members. Object members can be referenced using square bracket [] notation. Combining these ideas together we can dynamically call object methods:

var foo = {
	one: function() { console.log("one") },
	two: function() { console.log("two") }
};
 
var ok = true;
var result = foo[ok ? "one" : "two"]();
 
console.log( result ); // Prints "one"

2. Multi line strings

You can create multi-line strings in JavaScript by terminating lines that should be continued with a backslash:

var s = "Goodbye \
cruel \
world";
 
console.log( s === "Goodbye cruel world" ); // true

3. Recursion in anonymous functions

JavaScript allows functions to be created that have no names. These are called anonymous functions. A recursive function is one that calls itself, but how does a function call itself if it has no name?

First let’s consider a small program that applies a factorial function to numbers in an array.

// Our recursive factorial function
var factorial = function(n) {
    return n<=1 ? 1 : n * factorial(n-1);
};
 
// Function that applies a function to each element of the array
var applyTo = function(array,fn) {
	var i=0, len=0;
	for (i=0, len=array.length; i<len; i++) {
		array[i] = fn( array[i] );
	}
	return array;
};
 
// Test our function
var result = applyTo( [2,4,6], factorial );
 
console.log( result ); // Prints [2, 24, 720]

Rather that defining the factorial function separately, we can define it inline as a parameter to the applyTo() function call.

var result = applyTo([2,4,6], 
                     function(n) {
                         return n<=1 ? 1 : n * ???WhatGoesHere???(n-1);
                     }
                 );

Previously, JavaScript allowed us to replace the ???WhatGoesHere??? part with arguments.callee, which was a reference to the current function.

var result = applyTo([2,4,6], 
                     function(n) {
                         return n<=1 ? 1 : n * arguments.callee(n-1);
                     }
                 );

This method still works in modern browsers but has been deprecated, so remember what it means but don’t use it.

The new method allows us to name our inline functions.

var result = applyTo([2,4,6], 
                     function fact(n) {
                         return n<=1 ? 1 : n * fact(n-1);
                     }
                 );

4. Short cuts with ‘or’ and ‘and’ operators

When you or together several variables in a statement, JavaScript will return first ‘truthy’ value it finds (see previous post about truthy values). This is useful when you want to use a default value if an existing variable is undefined.

// Create an empty person object with no properties
var person = {};
 
// person.firstName is undefined, so it returns 'unknown'
var name = person.firstName || 'unknown';
 
// Prints 'unknown'
console.log(name);

In contrast, the and operator returns the last element, but only if all of the expressions are truthy, else it returns undefined.

var o = {};
o.x = 1;
o.y = 2;
o.z = 3;
 
var n = o.x && o.y && o.z;
 
// Prints 3
console.log(n);

5. A note about ‘undefined’

It turns out that undefined is not a JavaScript keyword, instead undefined is a global variable, which in browsers is defined as window.undefined.

It is not uncommon to see code that tests if a variable is undefined like this:

if (someObject.x === undefined) {
    // do something
}

Which is the same as writing

if (someObject.x === window.undefined) {
    // do something
}

If by some chance your window.undefined variable is modified then checks for undefined like this will fail. No conscientious developer would ever do this intentionally, but it may happen by accident causing hard to find bugs, like this:

var o = {};
window[o.name] = 'unknown'; // BLAM!, window.undefined is now a string

A better way to test for undefined is to use the typeof operator. Typeof an undefined variable will always return the string ‘undefined’.

// Good way to test for undefined
if (typeof someObject.x === 'undefined') {
    // do something
}

6. Return statement

The return statement needs it’s value to be on the same line as the return keyword. This may cause problem depending on your coding style. For example

// This is ok
return x;
 
// This returns undefined
return
    x;
 
// This is ok
return {
    result:'success'
}
 
// This returns undefined
return
{
    result:'success'
}

This behaviour is due to JavaScript’s automatic semicolon insertion.

7. Length of a function

JavaScript functions have a length property that provides a count of the number of arguments the function expects.

function foo(a,b,c) {
}
 
console.log( foo.length ); // Prints 3

8. The plus operator

The plus operator can be used to easily convert anything into a number by simply prefixing the value with “+”.

console.log( +"0xFF" );  // 255
console.log( +"010" );   // 10 
console.log( +null );    // 0
console.log( +true );    // 1
console.log( +false );   // 0

This is actually a just a nice shortcut for using the Number() function.

9. Object property names can be any string

JavaScript object members can have any string as their name.

var o = {
    "What the!": 'a',
    "<a href='#'>Hash</a>": 'b',
    "*****": 'c'
};
 
for (var key in o) {
    console.log( key );
}

Which prints:

What the!
<a href='#'>Hash</a>
*****

10. The ‘debugger’ statement

In the past we were limited to using alert() statements to debug our JavaScript. After that we were rescued with the much more sane console.log(). Things have come a long way and we now have solid line debugging available in modern browsers.

However, there is one addition to our debugging arsenal which I’ve found particularly invaluable when debugging JavaScript in Internet Explorer; the debugger statement.

When you add the debugger statement to your code the browser will stop execution and open the debugging environment ready for you to continue stepping through your code.

This is moderately useful on Chrome, Firefox and Safari but I have found essential for debugging IE.

Note that within IE, this statement only works in IE7 and above and you need to first start the debug mode.

OK, so that’s 10 features, but just one more thing to wrap up which is not really a JavaScript feature.

JavaScript Coding Coventions

If you’re not following a JavaScript coding convention then here are a couple to get you started:

• Douglas Crockford’s JavaScript Coding Conventions
• Google’s JavaScript Style Guide

JavaScript provides a feature called Automatic Semicolon Insertion (ASI). For the most part there are rarely problems in omitting semicolons, but there are a few cases where semicolons are required to prevent syntax errors or resolve code ambiguities.

A site that triggered a lot of chatter was aresemicolonsnecessaryinjavascript.com which boldly states ‘NO’. The author is really trying to explain we should not just include semicolons everywhere due a fear that our code might break in some environments or parsers (such as JavaScript minifiers). Others are also continuing the same point that we should better understand why semicolons in JavaScript are optional.

Douglas Crockford, a leading expert in JavaScript recommends using semicolons at the end of every simple statement and his ubiqitious JavaScript code quality tool, JSLint, by default expects semicolons to be inserted. A poll on Stack Overflow strongly recommends using semicolons everywhere.

Lastly, I found Armin Ronacher’s post on dealing with JavaScript’s automatic semicolon insertion to be most useful. In particular his summary where he writes:

Are Semicolons Necessary in Javascript? Despite popular belief the answer is "sometimes" and not "no". But to save yourself time and troubles, just place them all the time. Not only will it save yourself some headaches, your code will also look more consistent. Because there will be situations where a semicolon becomes necessary to resolve ambiguities.

So what will I be doing? My vote goes to following Douglas Crockford’s JavaScript coding guidelines for now and I’ll be happily including semicolons in my code.

If you are interested, there are also a couple of discussions on Reddit regarding these couple of posts; Dealing with JavaScript’s automatic semicolon insertion and Are semicolons necessary in JavaScript?.

name = "Spock";
function greeting() {
	return "Hello " + name;
}

A better approach is to place all of your code within a namespace; an object that contains all of your code and helps to prevent name clashes with JavaScript code written by others.

The simplest method of creating a namespace is to use an object literal.

var foo = {};
foo.name = "Spock";
foo.greeting = function() {
	return "Hello " + foo.name;
}

This can also be specified using a different syntax.

var foo = {
 
	name: "Spock",
 
	greeting: function() {
		return "Hello " + foo.name;
	}
 
};

This approach is better that having outright global variables, but it exposes everything within the namespace as global. In other words both foo.name and foo.greeting are available everywhere.

Another problem with this approach is that greeting needs to refer to ‘foo.name’ rather than just ‘name’.

Another method of creating a namespace is through the use of a self executing function.

var foo = (function(){
 
	// Create a private variable
	var name = "Spock";
 
	// Create a private function
	var greeting = function() {
		return "Hello " + name;
	};
 
	// Return an object that exposes our greeting function publicly
	return {
		greeting: greeting
	};
 
})();

Here, when the function is executed it creates a private variable and a private inner function. The inner function can refer to the private variable directly. The main function then returns an object literal containing a reference to the greeting private function – this then exposes the greeting function as a public function so we can call it via the foo namespace.

console.log(foo.greeting() === "Hello Spock"); // true

This post was inspired by a good post from David B. Calhoun about spotting outdated JavaScript.

1. Download gae-sessions

Download the gae-sessions code from https://github.com/dound/gae-sessions/

2. Create your app directory

Create a directory for your application. I’ll be using gaesessiontest/

3. Copy gaesessions to your app

From the gae-sessions download file, copy the gaesessions/ directory to your app directory.

4. Create your app.yaml file

Within your app directory create an app.yaml file with the contents:

application: gaesessiontest
version: 1
runtime: python
api_version: 1
 
handlers:
- url: /.*
  script: main.py

5. Create your appengine_config.py file

Within your app directory create an appengine_config.py file with the contents:

from gaesessions import SessionMiddleware
def webapp_add_wsgi_middleware(app):
    app = SessionMiddleware(app, cookie_key="You must change this")
    return app

6. Change the cookie_key

Change the cookie_key value to a secret combination of characters.

7. Create your main.py file

Within your app directory create a main.py file with the contents:

import os
 
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
from google.appengine.ext.webapp import template
 
from gaesessions import get_current_session
 
class MainPage(webapp.RequestHandler):
    def get(self):
 
        # Get the current session        
        session = get_current_session()
 
        # Get the value of the counter,
        # defaulting to 0 if not present
        counter = session.get('counter', 0)
 
        # Increment the counter
        session['counter'] =  counter + 1 
 
        context = {
             "counter": counter 
        }
 
        path = os.path.join(os.path.dirname(__file__), 'index.html')
        self.response.out.write(template.render(path, context))
 
application = webapp.WSGIApplication(
                                     [('/', MainPage)],
                                     debug=True)
 
def main():
    run_wsgi_app(application)
 
if __name__ == "__main__":
    main()

8. Create your index.html file

Within your app directory create an index.html file with the contents:

<!DOCTYPE html>
<html lang="en">
<head>
<title>GAE Sessions</title>
</head>
<body>
Counter = {{ counter}}
</body>
</html>

9. Run your application

My GAE installation is located in /opt/google_appengine/ so I start the application with the command:

/opt/google_appengine/dev_appserver.py gaesessiontest

10. View your app

Open your browser and go to http://localhost:8080/. You should see a counter that increments each time you refresh the page.

1. There is only one number type in JavaScript

All JavaScript numbers are internally represented as 64 bit floating point values. There is no separate integer type.

a = 1;
b = 1.0;
console.log(a === b); // true

We need to take care with floating point arithmetic as it may not always produce the exact answer you were expecting. For example:

var a = 0.1;
var b = 0.2;
var c = a + b;
 
console.log(c === 0.3); // false
console.log(c === 0.30000000000000004); // true

2. Blocks in JavaScript do not create a new scope

In some languages (like Java) new variables created within blocks such as if, while and for only exist within that block. JavaScript does not have a block scope.

var s = "foo";
if (true) {
	// This overwrites the value in s
	var s = "bar";
}
console.log(s === "bar") // true;

3. You can create anonymous self executing functions

An anonymous self executing function is just a function that has no name and is executed immediately. It can be useful to induce a block scope and can be useful when dealing with closures within loops.

var s = "foo";
if (true) {
	(function() {
		// This does not overwrite the value in s
		var s = "bar";
	})();
}
console.log(s == "foo") // true;

If you haven’t seen a function like this before, it’s built up like this:

// 1. Create the anonymous function
function() {
    // Do something
}
 
// 2. Wrap it in parentheses
(function() {
    // Do something
})
 
// 3. Put () on the end to execute it, just like any normal function call.
(function() {
    // Do something
})();

Not very pretty but is an important concept.

4. You can throw objects for exceptions

If you need to throw an exception, rather than just throwing a message string, throw an object that contains a name and a message.

if (!accountFound) {
	throw {
		name: 'AccountFetchFailed',
		message: 'Sorry, there was a problem fetching the account details'
	}
}

When catching the error you can then test which kind of exception occurred and react accordingly.

5. JavaScript’s try catch has a finally clause

A finally clause in a JavaScript exception will always execute, whether or not an exception was caught. The finally clause will still execute even if there is an error or a break in program flow within the catch clause (such as by a return or break statement).

function testTryCatch(hasError) {
	try {
		console.log("In the try clause");
		console.log("Has Error: " + hasError);
		if (hasError) {
			console.log("Throwing an exception");
			throw "Oops!";
		}			
	}
	catch(e) {
		console.log("In the catch clause: " + e);
		// This return only occurs *after* the finally clause has executed
		return;
	}
	finally {
		console.log("In the finally clause");
	}
}

Testing with no error:

testTryCatch(false);
 
// Output:
//   In the try clause
//   Has Error: false
//   In the finally clause

Testing with an error:

testTryCatch(true);
 
// Output:
//   In the try clause
//   Has Error: true
//   Throwing an exception
//   In the catch clause: Oops!
//   In the finally clause

6. You can explicitly set an array’s length property

Increasing the length causes any missing elements to have an undefined value. Reducing the length deletes elements beyond that length.

var arr = ["one", "two", "three", "four", "five"];
console.log( arr ); // ["one", "two", "three", "four", "five"]
console.log( arr.length ); // 5
 
arr.length = 8;
console.log( arr ); // ["one", "two", "three", "four", "five", undefined, undefined, undefined]
console.log( arr.length ); // 8
 
arr.length = 3;
console.log( arr ); // ["one", "two", "three"]
console.log( arr.length ); // 3

7. There are two equality operators in JavaScript

Javascript has two equality operators; the regular equality operator == and the strict equality operator ===. These have corresponding inequality operators != and !==.

The regular equality operators == and != attempt to convert the operand types when they are not the same type. For example:

( null == false      ); // false
( 0 == false         ); // true
( "" == false        ); // true
( false == false     ); // true
( NaN == false       ); // false
( undefined == false ); // false

The strict equality operators === and !== does not attempt to convert the operand types. If the types are different then they are not the same. For example:

( null === false      ); // false
( 0 === false         ); // false
( "" === false        ); // false
( false === false     ); // true
( NaN === false       ); // false
( undefined === false ); // false

You should generally use the strict equality operator.

For more info see the Comparison operators docs.

8. Falsy, Truthy and boolean values

As you saw in the previous feature, within JavaScript there are several non boolean values that evaluate to false or true. This seems to have led to the terms falsy and truthy.

Falsy values are

• 0
• NaN (not a number)
• ” (empty string)
• false
• null
• undefined

Everything else, including numbers, non empty strings, boolean true, arrays, objects and functions are truthy.

If you have a situation where you must have a real boolean true or false value then you can convert the value using a double negative operator !!.

function makeBool(thing) {
	return !!thing;
}
 
// These are all true
console.log( makeBool(99) );
console.log( makeBool("hello") );
console.log( makeBool(true) );
console.log( makeBool(Number.POSITIVE_INFINITY) );
console.log( makeBool(Number.NEGATIVE_INFINITY) );
console.log( makeBool([]) );
console.log( makeBool({}) );
console.log( makeBool(function(){}) );
 
// These are all false
console.log( makeBool(null) );
console.log( makeBool(0) );
console.log( makeBool("") );
console.log( makeBool(false) );
console.log( makeBool(NaN) );
console.log( makeBool(undefined) );

More details about Falsy and Truthy

9. Parentheses are optional when creating new objects

The parenthesis are optional when creating new objects that require no initial parameters.

function User() {
}
 
var u = new User;

10. Hidden JavaScript features

I started compiling this list as a few interesting things I found as I was reading through JavaScript: The Good Parts and doing a bit of research.

Along the way I found a great set of hidden JavaScript features on Stack Overflow. So check out the list for more interesting JavaScript features.

First, start with a simple HTML form:

<form action="" method="post" class="login">
<ul>
	<li>
		<div class="title">Login</div>
	</li>
	<li>
		<label for="username">Username</label>
		<input id="username" type="text">
	</li>
	<li>
		<label for="password">Password</label>
		<input id="password" type="password">
	</li>
	<li>
		<button type="submit">Login</button>
	</li>
</ul>
</form>

Next let’s start styling up the form.

/* Create a bordered box for the form */
form.login {
	background-color:#eee;
	width:300px;
	padding:10px 20px;
	border:5px solid #ddd;
}
 
/* Set the font for all of the elements */
form.login,
form.login input,
form.login button {
	font-family: Helvetica, Arial;
	font-size:18px;
}
 
/* Make our title a bit bigger */
form.login div.title {
	font-size:24px;
	font-weight:bold;
	margin-bottom:10px;
}
 
/* Remove the bullets and padding from our list */
form.login ul {
	list-style-type:none;
	padding:0;
	margin:0;
}
 
/* Give our input fields a fixed width and a bit of padding */
form.login input {
	width:280px;
	padding:5px;
	margin-bottom:10px;
}

For the next step we want to have our labels displayed over the top of our input fields. So a bit of extra CSS to do that.

/* Make each field container relative.
This lets us position the label absolutely inside it. */
form.login ul li {
	position:relative;
}
 
/* Position the labels inside our input fields. */
form.login label {
	position:absolute;
	top:8px;
	left:9px;
	color:#aaa;
}

Lastly we need to have the labels disappear when we start editing a text field and reappear again if we leave the text field without entering a value.

We will use the jQuery focus() function to handle entering a text field and the blur() function to handle when leaving a field. We’ll also hide the labels for fields that have a pre-populated value.

$(document).ready(function(){
 
	// Find each of our input fields
	var fields = $("form.login input");
 
	// If a field gets focus then hide the label
	// (which is the previous element in the DOM).
	fields.focus(function(){
		$(this).prev().hide();
	});
 
	// If a field loses focus and nothing has
	// been entered in the field then show the label.
	fields.blur(function(){
		if (!this.value) {
			$(this).prev().show();
		}
	});
 
	// If the form is pre-populated with some values
	// then immediately hide the corresponding labels. 
	fields.each(function(){
		if (this.value) {
			$(this).prev().hide();
		}
	});
 
});

However jQuery supports function chaining, so perhaps a nicer way to write this may be:

$(document).ready(function(){
 
	$("form.login input")
		.each(function(){
			if (this.value) {
				$(this).prev().hide();
			}
		})
		.focus(function(){
			$(this).prev().hide();
		})
		.blur(function(){
			if (!this.value) {
				$(this).prev().show();
			}
		});
});

EDIT:

Dan G. Switzer, II provided a slightly more succinct version of the jQuery code:

$(document).ready(function(){
 
	$("form.login input")
		.bind("focus.labelFx", function(){
			$(this).prev().hide();
		})
		.bind("blur.labelFx", function(){
			$(this).prev()[!this.value ? "show" : "hide"]();
		})
		.trigger("blur.labelFx");
 
});

PART 1 – Prepare the server

Update the server

> sudo apt-get update
> sudo apt-get upgrade

Install Apache and mod_wsgi

> sudo apt-get install apache2 libapache2-mod-wsgi

Install setup tools and pip

> sudo apt-get install python-setuptools
> sudo apt-get install python-pip

Install Django

> sudo pip install django

Create a folder for storing our sites

I’ll be placing our sites in the /srv/www directory. The /srv directory should already exist so we just need to create the /www directory

> sudo mkdir /srv/www

PART 2 – Add host entries for testing

We will set up two domains for testing the configuration
- one for testing that WSGI is working, and
- one for testing that Django is working.

My test virtual machine’s IP address is 172.16.52.130 so I’ll set up the following in my local hosts file (not on the server)

> sudo nano /etc/hosts

And add the following

172.16.52.130    djangoserver
172.16.52.130    wsgi.djangoserver
172.16.52.130    hello.djangoserver

PART 3 – Test WSGI is working

Create our wsgi test site content

> sudo mkdir /srv/www/wsgi
> sudo nano /srv/www/wsgi/app.wsgi

And add the content

def application(environ, start_response):
    status = '200 OK'
    output = 'Hello World!'
 
    response_headers = [('Content-type', 'text/plain'),
                        ('Content-Length', str(len(output)))]
    start_response(status, response_headers)
 
    return [output]

Create a new apache site

> sudo nano /etc/apache2/sites-available/wsgi

And add the content

<VirtualHost *:80>
 
    ServerName wsgi.djangoserver
    DocumentRoot /srv/www/wsgi
 
    <Directory /srv/www/wsgi>
        Order allow,deny
        Allow from all
    </Directory>
 
    WSGIScriptAlias / /srv/www/wsgi/app.wsgi
 
</VirtualHost>

And activate the site

> sudo a2ensite wsgi
> sudo /etc/init.d/apache2 reload

Then open your web browser and browse to

http://wsgi.djangoserver

You should see a ‘Hello World!’ message

PART 4 – Test Django is working

Create a new Django site

> cd /srv/www
> sudo django-admin.py startproject hello

Create a wsgi file for the site

> sudo mkdir /srv/www/hello/apache
> sudo nano /srv/www/hello/apache/django.wsgi

And add the content

import os
import sys
 
path = '/srv/www'
if path not in sys.path:
    sys.path.insert(0, '/srv/www')
 
os.environ['DJANGO_SETTINGS_MODULE'] = 'hello.settings'
 
import django.core.handlers.wsgi
application = django.core.handlers.wsgi.WSGIHandler()

Create a new apache site

> sudo nano /etc/apache2/sites-available/hello

And add the content

<VirtualHost *:80>
 
    ServerName hello.djangoserver
    DocumentRoot /srv/www/hello
 
    <Directory /srv/www/hello>
        Order allow,deny
        Allow from all
    </Directory>
 
    WSGIDaemonProcess hello.djangoserver processes=2 threads=15 display-name=%{GROUP}
    WSGIProcessGroup hello.djangoserver
 
    WSGIScriptAlias / /srv/www/hello/apache/django.wsgi
 
</VirtualHost>

And activate the site

> sudo a2ensite hello
> sudo /etc/init.d/apache2 reload

Then open your web browser and browse to

http://hello.djangoserver

You should see the Django default installation message.

Notes

NOTE 1 – Running in daemon mode

Our test Django site is configured to run in daemon mode – because of these two lines:

WSGIDaemonProcess hello.djangoserver processes=2 threads=15 display-name=%{GROUP}
WSGIProcessGroup hello.djangoserver

So if we modify the code then rather than restarting apache we can just touch the wsgi file and the changes will be picked up:

> sudo touch /srv/www/hello/apache/django.wsgi

NOTE 2 – Specify the application module name

It appears to be a good idea to specify the application module when specifying the DJANGO_SETTINGS_MODULE. So rather than writing this:

os.environ['DJANGO_SETTINGS_MODULE'] = 'settings'

We should write this:

os.environ['DJANGO_SETTINGS_MODULE'] = 'hello.settings'

Useful Commands

Error log file

If you get errors, check the apache log file

> tail /var/log/apache2/error.log

Test using development mode

If your app does not seem to be working using wsgi, then check if it is working via the development server.

> cd /srv/www/hello
> python manage.py runserver 0:8080

The in your web browser go to

http://hello.djangoserver:8080

References

An improved WSGI script for use with Django.
http://blog.dscpl.com.au/2010/03/improved-wsgi-script-for-use-with.html

Modwsgi – Integration With Django
http://code.google.com/p/modwsgi/wiki/IntegrationWithDjango

How do I stop getting ImportError: Could not import settings ‘mofin.settings’ when using django with wsgi?
http://stackoverflow.com/questions/1411417/how-do-i-stop-getting-importerror-could-not-import-settings-mofin-settings-whe

Configuration problems with django and mod_wsgi
http://stackoverflow.com/questions/2587251/configuration-problems-with-django-and-mod-wsgi

Download the Flex SDK

http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

I downloaded the file flex_sdk_4.1.0.16076.zip

Unzip and install Flex

Unzip, move to /opt/ and create a link named flex to it


unzip flex_sdk_4.1.0.16076.zip -d flex_sdk_4.1.0.16076
sudo mv flex_sdk_4.1.0.16076 /opt/
ln -s /opt/flex_sdk_4.1.0.16076 /opt/flex


Optionally you can add the Flex bin directory to your path. There are a few ways to do this but I like to add the path to my environment file


sudo nano /etc/environment


Add :/opt/flex/bin to the end of the path. The reload the environment.


source /etc/environment


Download the Flash player with debugger

http://www.adobe.com/support/flashplayer/downloads.html

I downloaded the player content debugger flashplayer_10_plugin_debug.tar.gz

Unzip this file to get the libflashplayer.so file.

Rename the libflashplayer.so file in your /usr/lib/flashplugin-installer/ directory, the copy the new libflashplayer.so to this location.

Create and compile a Flex app

Create any simple Flex app that uses the trace() function. I used this one from the online Flex 4 docs – file name hello.mxml:


<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">

<s:VGroup id="myVGroup">
<s:TextInput id="myText"
text="Hello World!" />
<s:Button id="mybutton"
label="Say Hello"
click="writeToLog();"/>
</s:VGroup>
</s:Application>


Compile this with the –debug option


mxmlc --show-actionscript-warnings=true --strict=true --debug=true hello.mxml


This creates a hello.swf file

Running and debugging

Open a terminal window and run the Flex debugger


fdb


Within fdb start a debug session with the run command


(fdb) run


Open hello.swf in your browser.

You should see a dialog window ‘Where is the debugger or host application running?’

* Choose localhost
* Tick don’t show this dialog at launch
* Click Connect

Go back to the terminal window and type ‘continue’


(fdb) continue


Your should be able to use your flex app and see your debug trace statements in the terminal window.

If you take too long between running the debug process and connecting via the browser then the session will automatically end, so you might need to try again.

From the HTML 5 specs we get the following.

DO THIS

To add the attributes, you can do this:

<input type="checkbox" checked="checked">
<input disabled="disabled">
<option selected="selected">

Or use an empt string:

<input type="checkbox" checked="">
<input disabled="">
<option selected="">

/Edit 19 July 2011/ Attributes without a value are also valid:

<input type="checkbox" checked>
<input disabled>
<option selected>

/Edit 19 July 2011/ And the double quotes are optional:

<input type=checkbox checked=checked>
<input disabled=disabled>
<option selected=selected>

To not apply the attribute, just leave them off:

<input type="checkbox">
<input>
<option>

DON’T DO THIS

/Edit 19 July 2011/

Leaving the attributes without a value is invalid:

<input type="checkbox" checked>
<input disabled>
<option selected>

Using true/false values is invalid:

<input type="checkbox" checked="true">
<input disabled="false">
<option selected="true">