-vmargs -Xms256M -Xmx512M

Shortcut Example: "C:\Program Files\eclipse\eclipse.exe" -vmargs -Xms256M -Xmx512M

Alternatively, you can update your eclipse.ini file.

More information can be found on Ryan Phelan’s site.

These examples have been tested on a Windows XP PC with 2GB RAM.

The system cannot find the file specified.
svn: Can't create tunnel: The system cannot find the file specified.

Typically, you experience it when using a url with the following structure:

svn+ssh://myfancy.svnserver.com/repo

Thankfully there is a very simple fix. All you need to do is adjust one of the settings in the “Window->Preferences” menu.

Navigate the tree to “Team->SVN” and you will notice a section called “SVN Interface”. If the client is set to “JavaHL (JNI)” then change it to “SVNKit (Pure Java)”.

Thanks to Mark Phippard for this gem.

This article lists the steps to create a bare bones BlazeDS server configuration using the turnkey solution.

What You’ll Need

First I’ll assume you have already downloaded and installed the following:

• Eclipse
• Flex Builder (or Flex Builder plugin for Eclipse)
• BlazeDS turnkey

If you followed all of the instructions for installing and running the basic BlazeDS turnkey, then you currently have a tomcat server running a demo on localhost (port 8400). If successful, you should see the BlazeDS index page by clicking here. If you see an error at this point, then you can go and check your server logs and try to correct it. Do not proceed with this guide until you see the functioning index page.

Now you have successfully installed Tomcat and BlazeDS turnkey, you will need to turn it off as you won’t be using it from here. Yes that’s right, turn it off! Shutdown the tomcat server using any method you choose (i.e. ctrl-c, shutdown.bat, stop the service, catalina stop, etc.). This will free up port 8400 and allow you to run the server from Eclipse after we have configured it.

Setting up Tomcat in Eclipse

These are the steps for creating a connection to the tomcat server:

1. Start Eclipse and select the “Java EE” perspective
2. In the bottom panel, select the “Servers” tab
3. Right click on the panel and select “New->Server”
4. Select the server settings and point them to your newly installed tomcat server. The installation directory should be “<base turnkey installation dir>\tomcat” (in my case this is “C:\blazeds\tomcat”).
5. Click Finish

Once you have completed these steps, you should see a new server created in the “Servers” panel, plus a new tree entry in the Project Explorer (also called “Servers”). Your environment should look a bit like this.

Creating a Project

The next step is to create the server side project.

1. Create a new “Dynamic Web Project” with the following settings:
   • Project name: myBlazeProject
   • Target Runtime: “Apache Tomcat x.x” (this is the server you created in the last section)
   • Configuration: Default Configuration for Apache Tomcat x.x
2. Click “Finish”

After creating the project, your environment should look a little like this.

Creating the Bare Bones BlazeDS Configuration

Ok, we now have the server set up and a basic project. The next steps set up the BlazeDS libraries and configure the environment to auto-update the server when the project is built.

1. Overwrite the contents of your “WebContent” directory with the BlazeDS directory structure “<base turnkey installation dir>\tomcat\webapps\blazeds”.  The result should look a little like this.
2. Right click on your newly created “myBlazeProject” project and select “Properties”
3. Select “Java Build Path” from the list in the left hand panel.
4. Set the “Default output folder” to “myBlazeProject/WebContent/WEB-INF/classes”. This will cause your web server to automatically update every time you rebuild your project.

Create a Basic Remote Class

Great! We’re nearly there… now let’s create and configure a Java class so we can test our configuration.

1. In the “myBlazeProject/WebContent/WEB-INF/src” directory, create a new class called HelloWorld.java.

public class HelloWorld {
    public String sayHello(String name) {
        return "Hello, " + name;
    }
}

2. Configure BlazeDS to allow remoting requests to the HelloWorld class by adding a destination to the “remoting-config.xml” file found in the “myBlazeProject/WebContent/WEB-INF/flex” directory. Use the following destination configuration:

<destination id="HelloWorld">
    <properties>
        <source>HelloWorld</source>
    </properties>
</destination>

3. Start your application server by clicking on the green “play” button. Verify your web application is configured by going to the following URL (The url and port may vary depending on your application server configuration and what you named your project): http://localhost:8400/myBlazeProject/
   If your server is not configured to display directory contents, you might see a 404 error. This is OK, but failure to connect errors are not.

Create a Flex Project

Whether you use the Flex Builder 3 plugin for Eclipse or standalone Flex builder 3 installation is entirely up to you. It’s possible to manage your Flex and Java code in one IDE if you use the plugin, but you may prefer the standalone IDE instead.

These steps create the Flex project and link it to your server:

1. Create a new Flex Project
   • Project name: testHelloWorld
   • Application server type: J2EE
   • Use remote object access service: enabled (with “LiveCycle Data Services” selected)
2. Click “Next >”
3. Use these settings:
   • Root folder: point this to your “WebContent” directory in the Java project
   • Root URL: http://localhost:8400/myBlazeProject/
   • Context Root: /myBlazeProject
4. Click “Validate Configuration”
5. Click “Finish”

Create a Client Test Application

Finally, let’s update the Flex project to use our BlazeDS Server so we can test our remote object:

1. Update the testHelloWorld.mxml file with the following code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:RemoteObject id="ro" destination="HelloWorld"/>
    <mx:TextInput id="n" change="ro.sayHello(n.text)"/>
    <mx:Label text="{ro.sayHello.lastResult}"/>

</mx:Application>

2. Build and Run!

If all went well, then you should have a working Flex app that connects to your remote service and responds with “Hello, <your name>”.  Something like this.

Troubleshooting

If you for some reason your components don’t talk to each other after following all the steps, try cleaning the projects and restarting the server.

Server Side Debugging

Now that we have created the bare bones server in this manner, we can use the fantastic debug functionality provided by Eclipse in the Java server code as well as the Eclipse client code!

To use the Java debug mode, just add your breakpoints to your source files and make sure the server is running in debug mode. Then when your Flex apps call the remote objects, they will trigger the debug mode and Eclipse will automagically put you into Java debug mode.

Further Reading

This article was inspired by the excellent in depth articles provided by the following sources:

• Bare Bones BlazeDS Object Remoting – by Dustin Marx
• Building Web and Desktop Applications with BlazeDS and AMF – by James Ward and Shashank Tiwari

The Flex front end interfaces to the traditional HTML version via an API that Kato and I developed.  To see how the two tools interact, you can see the HTML version here. As I have been getting a lot of spam and attacks lately, I won’t be giving out the login details openly but you can leave a comment or contact me via the contact page and I’ll send you the details. If you would prefer to stay anonymous, live chat is also an option.

You can get hold of the latest version of the source code at SourceForge in the Zentrack SVN Repository.

To test the functionality I searched for “Clarisolve” in Google, which has a lot of freely visible text and did not display correctly before FP10. I then entered the search string “Clarisolve ClearCollect” and the results displayed from a specific page on the site. Clarisolve has an html shadow site so I checked to see if it was being picked up instead of the flash version. The results actually displayed both the html and SWF version.

At this time unfortunately I have not implemented deep linking on the Clarisolve site, so no matter what you choose in Google it will always go to the home page. Still this is better than a blank SWF that barely caches right?

The next step will be to determine how SEO works with Flash/Flex text has we don’t have the luxury of traditional html text to add “h” tags.

Part 1 – Creating a Shadow Site

Creating a beautiful web 2.0 website in Flash/Flex is very satisfying. I really enjoy the development time savings of Flex versus that of general HTML/javascript solutions and the crispness of the interfaces created. The pleasure of Flex development is something I can talk about for hours and I have even been known to evangelise in my local bar on a Friday night.

It’s not all roses though, as Flex solutions do come with one major flaw; They are not search engine friendly (for a number of reasons). Part 1 of this article explores a solution using a “Shadow Site“, which is a term I surfed across recently and feel it accurately describes the subject.

The Problem

You are probably already aware of the issues associated with SEO (Search Engine Optimisation) and Flex, but just in case this is a new concept for you I will briefly explain the issues that are Flex related:

Pure Flash/Flex sites are not crawled for search text

As your SWF is basically a compiled program that is executed through the Flash Player, for a search engine to be able to read any embedded content it would have to effectively decompile your SWF. This is a problem for a number of reasons:

• Google doesn’t do it (presently)
• developers may choose a Flash solution as a means of obfuscation (compared to alternative web 2.0 strategies) so don’t want their precious code available to the world
• the Flash Player/SWF standard is owned by Adobe and it is debatable whether it should be decompilable (see point above)
• decompilation would cause a large processing overhead for a search engine crawler

Pure Flex solutions are all inclusive within a single SWF structure

When you compile your Flex programs they ultimately produce a single SWF file (not including all of the associated html, javascript, shared resource files, etc.). This single file contains the whole program (and therefore navigation structure) so there is no need to leave the SWF just because you are moving to a different page, effectively making the whole URL structure irrelevant. Although this has a lot of advantages, it makes linking to a particular point in your application something you really have to think about. That particular problem is solved in Flex 3 with the improved “Deep Linking” functionality, but how does a search engine know about your deep links?

A Solution

What I have currently implemented as a solution on the Clarisolve project is a “shadow site”. Historically the term “HTML version” or “Text only” has been used, but in this case the symantics are slightly different because I don’t really want people to see underlying site, I only want the search engine to. In my implementation, the shadow site is basically a WordPress blog used as a content manager with all the relevant HTML articles stored in the associated MySQL database. WordPress 2.5.1 offers a number of interfaces with which to extract the pages and articles, so I can very easily use the same source text in my Flex application too. WordPress also has a great publishing element and user manager, so makes for a very rich content management system. You can of course use any CMS of your choice, but I chose WordPress.

The most important part to creating the shadow site is the javascript that queries the current version of Flash Player installed, then either displays the trailing HTML (derived from PHP) or redirects to the Flex version of the site. On redirect, the javascript also interprets the current URL parameters and rearranges them into a friendly format for “deep linking”.

The main reason for using WordPress is the great slug support, which is useful on Google as each page is separately displayed. Make sure that the “PermaLink” settings are not using the default format as historically search engines could not cope with GET notation very well.

Currently, this solution does need some polish as the way I have implemented it is fairly static, resulting in the RSS feed being broken. Solving the problem should be fairly simple by making the javascript text conditionally addable by a PHP function (based on the URL).

To see the shadow site you need to disable Flash in your browser. The easiest way I found to do this is to use Internet Explorer and go to the “Tools->Manage Add-ons->Enable or Disable Add-ons..” and disable the “Shockwave Flash Object”. At the time of writing, the HTML site is actually looking prettier than the Flex site but that will change in time

Hopefully that is all the information you’ll need to create your own shadow site.

The PHP/javascript for selecting whether to use the Flash or HTML looks like this:

<script src="/AC_OETags.js" language="Javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;
// -----------------------------------------------------------------------------
// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

// Check to see if a player with Flash Product Install is available and the version does not meet the requirements for playback
if ( hasProductInstall && !hasRequestedVersion ) {
	// MMdoctitle is the stored document.title value used by the installation process to close the window that started the process
	// This is necessary in order to close browser windows that are still utilizing the older version of the player after installation has completed
	// DO NOT MODIFY THE FOLLOWING FOUR LINES
	// Location visited after installation is complete if installation is required
	var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
	var MMredirectURL = window.location;
    document.title = document.title.slice(0, 47) + " - Flash Player Installation";
    var MMdoctitle = document.title;

	AC_FL_RunContent(
		"src", "playerProductInstall",
		"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
		"width", "100%",
		"height", "100%",
		"align", "middle",
		"id", "ClarisolveWebSite_v2",
		"quality", "high",
		"bgcolor", "#869ca7",
		"name", "ClarisolveWebSite_v2",
		"allowScriptAccess","sameDomain",
		"type", "application/x-shockwave-flash",
		"pluginspage", "http://www.adobe.com/go/getflashplayer"
	);
} else if (hasRequestedVersion) {
    var strReturn = "";
    var strHref = window.location.href;
    if ( strHref.indexOf("/") > -1 ){
        var aQueryString = strHref.split("/");
        for ( var iParam = aQueryString.length-1; iParam > aQueryString.length-3; iParam-- ){
		    if ( isNaN(aQueryString[iParam]) ) {
	            strReturn += "page=" + aQueryString[iParam];
				iParam = 2;
			} else {
	            strReturn += "archives=" + aQueryString[iParam] + "&";
			}
	    }
    }

    window.location = "/ClarisolveWebSite_v2.html#" + strReturn;
}
// -->
</script>
<noscript>
  	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="ClarisolveWebSite_v2" width="100%" height="100%"
			codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
			<param name="movie" value="ClarisolveWebSite_v2.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#869ca7" />
			<param name="allowScriptAccess" value="sameDomain" />
			<embed src="ClarisolveWebSite_v2.swf" quality="high" bgcolor="#869ca7"
				width="100%" height="100%" name="ClarisolveWebSite_v2" align="middle"
				play="true"
				loop="false"
				quality="high"
				allowScriptAccess="sameDomain"
				type="application/x-shockwave-flash"
				pluginspage="http://www.adobe.com/go/getflashplayer">
			</embed>
	</object>
</noscript>

<?php
define('WP_USE_THEMES', true);
require('./wordpress/wp-blog-header.php');
?>

Conclusion

SEO is quite a large subject, so I haven’t gone into the details of how to understand the inner workings of Google or the use of “<strong>” and “<h1>” tags. Instead I have concentrated on how to get your HTML recognised in a search engine and how to alter your URL to something more “Deep Link” friendly.

The next part of this article will be related to importing WordPress articles and deep linking.