Posts Tagged eclipse

Convert Plain-Old Flex Project to Java Server Based Project

Ever start a project as a plain-old Flex project that doesn’t use a Java server and then later want to convert it? You’d think you could do this simply by examing the project’s server properties (Project -> Properties -> Flex Server) and adding a server…but no…you can’t…ehhh…not to fret, there’s still hope…don’t create a new project from scratch just yet and copy all your old projects files into your new project. We just need to modify a couple of the project’s .files and we’re good to go.

Modify the Project Property Files

Since we started our Flex project as a non-server based project, we’ll need to make some modifications to our .project, .actionScriptProperties, and .flexProperties files in order to convert the project to a server-based application. These files all exist under the root of the Flex Project’s directory — if you can’t see them, make sure you’re in either the Flex or Flex Debugging Perspective.

As a side note, under the covers we’re modifying the Flex Project’s Properties as if we right-clicked on the project and selected Properties.

NOTE: The following examples use a @@key@@ to indicate where you should substitute your own project, workspace, and server settings.

NOTE: This also assumes that you’re building your flex project to a directory in your Java project called flex — you don’t need to create it in WebContent on the Java side, as it’s generated by Flex Builder when you do a build or clean.

.actionScriptProperties

Open up .actionScriptProperties and locate the <compiler> node and add or change the following attributes to look like this:

  • outputFolderLocation=”DOCUMENTS/@@JavaProjectName@@/WebContent/flex”
  • rootURL=”http://@@Host@@:@@Port@@/@@JavaAppContext@@/flex”

Your .actionScriptProperties should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<actionScriptProperties
	mainApplicationPath="@@MyFlexApp@@.mxml"
	version="3">

<compiler
	additionalCompilerArguments="-locale en_US
	-use-network=false"
	copyDependentFiles="true"
	enableModuleDebug="true"
	generateAccessible="false"
	htmlExpressInstall="true"
	htmlGenerate="true"
	htmlHistoryManagement="true"
	htmlPlayerVersion="9.0.124"
	htmlPlayerVersionCheck="true"
	outputFolderLocation=
		"DOCUMENTS/@@JavaProjectName@@/WebContent/flex"
	outputFolderPath="bin-debug"
	rootURL="http://@@Host@@:@@Port@@/@@JavaAppContext@@/flex"
	sourceFolderPath="src"
	strict="true"
	useApolloConfig="false"
	verifyDigests="true"
	warn="true">

<compilerSourcePath/>
<libraryPath defaultLinkType="1">
<libraryPathEntry kind="4" path=""/>
<libraryPathEntry kind="1" linkType="1" path="libs"/>
</libraryPath>
<sourceAttachmentPath/>
</compiler>
<applications>
<application path="@@MyFlexApp@@.mxml"/>
</applications>
<modules/>
<buildCSSFiles/>
</actionScriptProperties>

.flexProperties

Open up .flexProperties and locate the <flexProperties> node and add or change the following attributes to look like this:

  • flexServerType=”2″
  • serverContextRoot=”/@@JavaAppContext@@”
  • serverRoot=”${DOCUMENTS}/@@JavaProjectName@@/WebContent”
  • serverRootURL=”http://@@Host@@:@@Port@@/@@JavaAppContext@@/”

Your .flexProperties should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<flexProperties
	flexServerType="2"
	serverContextRoot="/@@JavaAppContext@@"
	serverRoot="${DOCUMENTS}/@@JavaProjectName@@/WebContent"
	serverRootURL="http://@@Host@@:@@Port@@/@@JavaAppContext@@/"
	toolCompile="true"
	useServerFlexSDK="false"
	version="1"/>

.project

Open up .project and locate the <projectDescription> node and add the node <linkedResources> after the <natures> node inside <projectDescription> — simply copy and paste the <linkedResources> node from my code snippet below; your .project file should look like this:

NOTE: You need to put the full, absolute path on your machine to your Java Web Project in place of the @@FULL_PATH@@ key I subsituted down below for the path on my machine.

<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
	<name>EmployeeManagementConsole4</name>
	<comment></comment>
	<projects>
	</projects>
	<buildSpec>
		<buildCommand>
			<name>com.adobe.flexbuilder.project.flexbuilder</name>
			<arguments>
			</arguments>
		</buildCommand>
	</buildSpec>
	<natures>
		<nature>com.adobe.flexbuilder.project.flexnature</nature>
		<nature>com.adobe.flexbuilder.project.actionscriptnature</nature>
	</natures>
	<linkedResources>
		<link>
			<name>bin-debug</name>
			<type>2</type>
			<location>
		@@FULL_PATH@@/@@JavaProjectName@@/WebContent/flex
			</location>
		</link>
	</linkedResources>
</projectDescription>

Check Flex Project Properties

Just to make sure we did everything correctly, let’s check the project properties by right-click on our Flex Project and selecting Properties -> Flex Build Path. It should look like this:

NOTE: The screen shots have my actual project, workspace, and server settings — these should help solidify the entire tutorial. They are from Part 4 of my Stack Tutorial Series.

  • Main source folder: src
  • Output folder: ${DOCUMENTS}/@@JavaProjectName@@/WebContent/flex
  • Output folder URL: http://@@Host@@:@@Port@@/@@JavaAppContext@@/flex
Build Path Properties

Build Path Properties

Next let’s check the Flex Server Settings: Project Properties -> Flex Server:

  • Root folder: ${DOCUMENTS}/@@JavaProjectName@@/WebContent
  • Root URL: http://@@Host@@:@@Port@@/@@JavaAppContext@@/
  • Context root: /@@JavaAppContext@@
Server Properties

Server Properties

Finished!

Post to Twitter Tweet This Post

, , , ,

6 Comments

Dealing with @Embed Tags, Ant Builds, and Paths to Resources

There’s plenty of evidence on the blogs, Adobe bugs, and elsewhere, that there are issues dealing with the compiler locating resources at compile time.

You ask yourself, where do I put my assets, my images, my CSS files?

Using one notation, Flex Builder will find the resources but switching to Ant causes all hell to break loose.

Here’s a simple and fairly elegant way to deal with it.

There are two things you need to know to understand what’s going on.

  1. The forward slash(/) operator is used to indicate the root. But what is root? The Flex compiler considers the ‘main source folder’ to be the root. Hence when you say ‘/’, you are actually referring to the ‘Main source folder’ (which you can set in Project>Properties>Flex Build Path>Main source folder), which in most cases would be set as the ’src’ folder.
  2. How to traverse a path. Pretty simple. If you do something like [Embed(source="/../assets/images/icon.jpg")] and src is your main source folder, the compiler will start at src, go up one level, find the assets folder and voila!

Post to Twitter Tweet This Post

, , , , , ,

No Comments