Starting out with Flex, I used the command-line compiler of the open source Adobe Flex 3 SDK for compiling MXML and ActionScript source files into SWF files.

A full list of compiler options and default behaviours are available in the Flex 3 documentation, but following is a summary to get going, including some links on Flex components and styles.

An example of using the mxmlc.exe application compiler:

mxmlc -language+=MyLanguage -title "MyTitle" -localized-description "MyAmericanDescription" en-us -localized-description "MyBritishDescription" en-gb -creator "Me" -publisher "MyPublisher" filename.mxml

To set SWF file metadata, used by search engines, the settings in the flex-config.xml file can be set, or the command-line options in the example can be used.

Other compiler options include:

output filename

Sets the output path and filename for the compiled SWF file; Defaults to match the target filename (with an SWF file extension)

default-size width height

Sets the default application size in pixels

default-frame-rate int

Sets the application frame rate; Defaults to 24

debug=true|false

Generates a debug SWF file used that can be used by the command-line debugger, fdb.exe; Defaults to false to generate a smaller SWF file size; To debug Flex applications, the debug version of Flash player (comes with the SDK) must be used to run the Flex app

load-config filename

Configuration files can provide options to the command-line compiler and can be set with this option

generate-frame-loader=true|false

Generates an IFlexBootstrap-derived loader class

include-libraries library [...]

Links classes inside a SWC component file; To compile SWC files, use the compc.exe compiler; All SWC component files in the /libs, /libs/player and current directories are linked by default; See the Flex Component Explorer for details on built-in Flex components; Data components are not free, but there are some open source components (which I have not yet tested): CustomGrid and TreeGrid

includes class [...]

Links classes

defaults-css-files filename [, ...]

Inserts CSS files into the SWF file; See the Flex Style Explorer for more on Flex CSS

accessible=true|false

Enables the application to communicate with a screen reader; Defaults to false so it may be worth setting this to true; Flash player 9 uses Microsoft Active Accessibility and works with IE on Windows 2000 or later only.

help [-list [advanced]]

The help option, always good

For frequent compilation of more complex applications, use fcsh.exe, the Flex compiler shell.

DataTierGenerator is a .NET desktop app that generates a C# class, a C# data class and several SQL stored procs for every table in the database you specify. This takes a lot of the hassle out of creating a data layer for a multi-tier application – all you have to do is tweak the logic classes and T-SQL if required.

The generated code uses SharpCore Data Access and Utilities components, but can easily be changed to use your own classes, and I can see it being adaptable to work with Microsoft Enterprise Library Application Blocks. There is a DataTierGenerator that uses the MS Enterprise Library, but I have not tested it as yet.

Current version of the app is 4.3 with a Visual Studio 2005 source project, and it runs just fine with MS SQL Server 2005.

Inkscape is a great free and intuitive vector editor, but I could not find an easy way to apply brush effects when I first experimented with it (I have version 0.45). Here’s how.

• Start with the vector art
• Create the brush stroke
• Apply the brush

Create a new layer (Layer > Add Layer) and call it ‘Vectors’.

Select the pencil (F6) or pen tool (Shift + F6) and draw some lines, or import a vector file (File > Import).

Add a new layer and call it ‘Brush’.

Select the calligraphy tool (Ctrl + F6) and draw three lines with slightly different width and thinning settings, and stroke colours. To adjust the stroke colour, select the calligraphic line and open the Fill and Stroke dialog (Ctrl + Shift + F) and select the Stroke paint tab.

With the select tool (F1), select the three lines and group them (Ctrl + G). Any group of paths can be used as a brush.

Select the group on the Brush layer first and then hold down shift and select the lines on the Vectors layer. Select Effects > Generate from Path > Pattern along Path. Select ‘Single, stretched’ for Copies of the pattern, and Ribbon as Deformation type, and click OK.

To be able to implement most web page designs, a grid is required. With traditional HTML, tables were used, but markup with many nested layout tables is not good for accessibility, and cleaner code is easier to maintain. The following examples are XHTML and CSS valid (except for the minimum width IE workaround), accessible to screen readers, and have been tested in Internet Explorer 6 and 7, Firefox 2, Opera 9, Safari 2 and Camino 1.5.

• Set up the HTML document
• Three column layout
• Flexible columns
• Liquid middle column layout
• Nested grids

Create a new file and call it ‘web.htm’.

Edit the file by adding the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Title</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
		<meta name="description" content="Description" />
		<meta name="keywords" content="keyword, keyword, keyword" />
	</head>
	<style type="text/css">

	body
	{
		color: #000000;
		background-color: #ffffff;
		font-size: 90%;
		font-family: arial;
		margin: 0;
		padding: 0;
	}

	p
	{
		display: block;
		margin: 0;
		padding: 1em;
	}

	</style>
	<body>
		<div id="Wrapper">
			<p>
				Lorem ipsum dolor sit amet, consectetur
				adipisicing elit, sed do eiusmod tempor
				incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud
				exercitation ullamco laboris nisi ut aliquip ex
				ea commodo consequat. Duis aute irure dolor in
				reprehenderit in voluptate velit esse cillum
				dolore eu fugiat nulla pariatur. Excepteur sint
				occaecat cupidatat non proident, sunt in culpa
				qui officia deserunt mollit anim id est laborum.
			</p>
		</div>
	</body>
<html>

Notes

• Move the style definitions out of the markup code and header and into a separate style sheet file, for re-use on other pages and easy maintenance.

Create a new file and call it ‘threecolumn.htm’, and add the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Title</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
		<meta name="description" content="Description" />
		<meta name="keywords" content="keyword, keyword, keyword" />
	</head>
	<style type="text/css">

	body
	{
		color: #000000;
		background-color: #ffffff;
		font-size: 90%;
		font-family: arial;
		margin: 0;
		padding: 0;
	}

	p
	{
		display: block;
		margin: 0;
		padding: 1em;
	}

	</style>
	<body>
		<div style="width: 800px; margin: auto;">
			<div style="display: block;
				color: #ffffff; background-color: #483e37;">
				<p>Header</p>
			</div>
			<div style="display: block;">
				<!-- left -->
				<div style="display: block; width: 200px; float: left;
					color: #ffffff; background-color: #6f7c91;">
					<p>Left column</p>
				</div>
				<!-- middle -->
				<div style="display: block; width: 400px; float: left;
					color: #ffffff; background-color: #939dac;">
					<p>Middle column</p>
				</div>
				<!-- right -->
				<div style="display: block; width: 200px; float: right;
					color: #ffffff; background-color: #6f7c91;">
					<p>Right column</p>
				</div>
				<div style="clear: both;"></div>
			</div>
			<div style="display: block;
				color: #ffffff; background-color: #483e37;">
				<p>Footer</p>
			</div>
		</div>
	</body>
<html>

Notes

• To centre an element, add ‘auto’ as the margin style.
• If margin or padding style definitions cause issues, add an additional div element inside and apply the margin and padding to it. Nested div’s are not great for accessibility, but the design will work – just try to avoid too many nested DIVs.
• Although div’s are block-level elements, setting the display style to ‘block’ is required for the grid layout.

Create a new file and call it ‘flexible.htm’, and add the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Title</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
		<meta name="description" content="Description" />
		<meta name="keywords" content="keyword, keyword, keyword" />
	</head>
	<style type="text/css">

	body
	{
		color: #000000;
		background-color: #ffffff;
		font-size: 90%;
		font-family: arial;
		margin: 0;
		padding: 0;
	}

	p
	{
		display: block;
		margin: 0;
		padding: 1em;
	}

	#Wrapper
	{
		/* Designed for a max screen width of 1280 and min 1024,
		keeping browser margins and the right scroll bar in mind. */
		max-width: 1260px;
		min-width: 1004px;
		/* IE workaround */
		width: expression(
			(document.documentElement.offsetWidth) > 1259
			* (parseInt(document.body.currentStyle.fontSize)
			/ parseInt(document.body.currentStyle.fontSize))?  "1260px"
			: ((document.documentElement.offsetWidth) < 1005?
				"1004" : "100%")); 

		background-image: url('Images/SideBarBack.gif');
		background-position: top right;
		background-repeat: repeat-y;
	}

	</style>
	<body>
		<div id="Wrapper">
			<div style="display: block;
				color: #ffffff; background-color: #483e37;">
				<p>Header</p>
			</div>
			<div style="display: block;
				color: #ffffff; background-color: #939dac;">
				<!-- left -->
				<div style="display: block; width: 20%; float: left;
					color: #ffffff; background-color: #6f7c91;">
					<p>Left column</p>
				</div>
				<!-- middle -->
				<div style="display: block; float: left;
					color: #ffffff; background-color: #939dac;">
					<p>Middle column</p>
				</div>
				<!-- right -->
				<div style="display: block; width: 20%; float: right;
				color: #ffffff; background-color: #6f7c91;">
					<p>Right column</p>
				</div>
				<div style="clear: both;"></div>
			</div>
			<div style="display: block;
				color: #ffffff; background-color: #483e37;">
				<p>Footer</p>
			</div>
		</div>
	</body>
<html>

Notes

• For flexible layouts, setting a minimum width is recommended.

Create a new file and call it ‘liquidmiddle.htm’, and add the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Title</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
		<meta name="description" content="Description" />
		<meta name="keywords" content="keyword, keyword, keyword" />
	</head>
	<style type="text/css">

	body
	{
		color: #000000;
		background-color: #ffffff;
		font-size: 90%;
		font-family: arial;
		margin: 0;
		padding: 0;
	}

	p
	{
		display: block;
		margin: 0;
		padding: 1em;
	}

	#Wrapper
	{
		/* Designed for a max screen width of 1280 and min 1024,
		keeping browser margins and the right scroll bar in mind. */
		max-width: 1260px;
		min-width: 1004px;
		/* IE workaround */
		width: expression(
			(document.documentElement.offsetWidth) > 1259
			* (parseInt(document.body.currentStyle.fontSize)
			/ parseInt(document.body.currentStyle.fontSize))?  "1260px"
			: ((document.documentElement.offsetWidth) < 1005?
				"1004" : "100%")); 

		background-image: url('Images/SideBarBack.gif');
		background-position: top right;
		background-repeat: repeat-y;
	}

	</style>
	<body>
		<div id="Wrapper">
			<div style="display: block;
				color: #ffffff; background-color: #483e37;">
				<p>Header</p>
			</div>
			<div style="display: block;">
				<!-- left -->
				<div style="display: block; width: 200px; float: left;
					color: #ffffff; background-color: #6f7c91;">
					<p>Left column</p>
				</div>
				<!-- right -->
				<div style="display: block; width: 200px; float: right;
					color: #ffffff; background-color: #6f7c91;">
					<p>Right column</p>
				</div>
				<!-- middle -->
				<div style="display: block;
					margin-left: 200px; margin-right: 200px;
					color: #ffffff; background-color: #939dac;">
					<p>Middle column</p>
				</div>
				<div style="clear: both;"></div>
			</div>
			<div style="display: block;
				color: #ffffff; background-color: #483e37;">
				<p>Footer</p>
			</div>
		</div>
	</body>
<html>

These examples can be nested to create a complex grid layout. Create a new file and call it ‘grids.htm’, and add the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Title</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
		<meta name="description" content="Description" />
		<meta name="keywords" content="keyword, keyword, keyword" />
	</head>
	<style type="text/css">

	body
	{
		color: #000000;
		background-color: #ffffff;
		font-size: 90%;
		font-family: arial;
		margin: 0;
		padding: 0;
	}

	p
	{
		display: block;
		margin: 0;
		padding: 1em;
	}

	#Wrapper
	{
		/* Designed for a max screen width of 1280 and min 1024,
		keeping browser margins and the right scroll bar in mind. */
		max-width: 1260px;
		min-width: 1004px;
		/* IE workaround */
		width: expression(
			(document.documentElement.offsetWidth) > 1259
			* (parseInt(document.body.currentStyle.fontSize)
			/ parseInt(document.body.currentStyle.fontSize))?  "1260px"
			: ((document.documentElement.offsetWidth) < 1005?
				"1004" : "100%")); 

		background-image: url('Images/SideBarBack.gif');
		background-position: top right;
		background-repeat: repeat-y;
	}

	</style>
	<body>
		<div id="Wrapper">
			<div style="display: block;
				color: #ffffff; background-color: #483e37;">
				<p>Header</p>
			</div>
			<div style="display: block;
				color: #ffffff; background-color: #939dac;">
				<!-- left -->
				<div style="display: block; width: 20%; float: left;
					color: #ffffff; background-color: #6f7c91;">
					<p>Left column</p>
				</div>
				<!-- middle -->
				<div style="display: block; width: 59%; float: left;
					color: #ffffff; background-color: #6f7c91;">
					<div style="display: block;">
						<!-- left -->
						<div style="display: block; width: 100px;
							float: left; color: #ffffff;
							background-color: #939dac;">
							<p>Inner left</p>
						</div>
						<!-- right -->
						<div style="display: block; width: 100px;
							float: right; color: #ffffff;
							background-color: #939dac;">
							<p>Inner right</p>
						</div>
						<!-- middle -->
						<div style="display: block;
							margin-left: 100px;
							margin-right: 100px;
							color: #ffffff;
							background-color: #6f7c91;">
							<p>Middle column</p>
						</div>
						<div style="clear: both;"></div>
					</div>
				</div>
				<!-- right -->
				<div style="display: block; width: 20%; float: right;
					color: #ffffff; background-color: #6f7c91;">
					<p>Right column</p>
				</div>
				<div style="clear: both;"></div>
			</div>
			<div style="display: block;
				color: #ffffff; background-color: #483e37;">
				<p>Footer</p>
			</div>
		</div>
	</body>
<html>

Notes

• To nest a liquid middle layout inside a flexible layout, the middle column of the flexible layout must have an added width. When this width is a percentage, Internet Explorer may calculate the width to be too large causing the right column to drop down to the next line. Setting the middle column’s percentage lower can fix this.