Â
This post is a video on Cairngorm with UM Extensions and cairngenum. It explains some of the subtle differences between cairngorm, and cairngormUM, and what the extensions allow you to do that cairngorm doesnt allow very easily. The Video is listed at the bottom of the post

• CairngormUM
  • Prerequisites:
    • Cairngorm
    • Cairngen
    • know what “ant” is
    • have “ant” up and running on your computer
    • link to brief setup of ANT
      • http://www.axelscript.com/2008/10/07/publishing-air-apps-with-ant-and-ftp/
  • Files and links:
    • http://www.axelscript.com/2008/10/13/cairngen-with-cairngorm-with-um-extensions/
    • http://www.axelscript.com/wp-content/Examples/CairngenUM/cairngenum.zip
    • http://www.returnundefined.com
    • http://code.google.com/p/flexcairngorm/
    • http://code.google.com/p/cairngen/
  • Main differences:
    • the ability to add CallBacks()
  • Project
    • create a blank project
      • paste cairngenum into root project folder
      • change project.properties to match current project
      • open cairngenum/Build.xml in ant editor (should open by default in ant editor)
      • in “outline” view right click “main” > run as > ant build
      • in your console you’ll see if build is successful or if it failed, and why it failed
    • create a mock up xml file that we are going to use to hold some dummy xml to act as our information we retrieve from the service
      • create the file under your src directory “/src/assets/data/users.xml” and format it like the following:

      <root>
<users>
<user name="Axel"/>
<user name="Ben"/>
<user name="Ryan"/>
<user name="Tom"/>
<user name="David"/>
</users>
</root>

      • we will now create the sequence that retrieves this information from the file and return it back into our code for us to manipulate.
    • create a sequence
      • a sequence is an event, command, and adding the command to the controller, and Optionally could be creating the delegate as well, in cairngenum the delegate must be created with the create-delegate target in the build.xml file.
      • with build.xml open in outline view right click “create-sequence” > run as > ant build
        • when you do this you will be prompted for an event stub name
          • type “UserRead” click OK
        • now you will be prompted for the event constant name
          • type “USER_READ_EVENT” click OK
        • now you will be prompted for the event type constant
          • type “UserReadEvent” click OK
        • now you will be prompted for the delegate name
          • type “UsersDelegate” click OK

the message in the console should look something like this

Buildfile: E:\fb3Workspace\TestUMCG\cairngenum\build.xml
log:
create-sequence:
[echo] @Invoking Cairngenum on [TestUMCG] --> Generating file(s): UserReadCommand.as and UserReadEvent.as, using UsersDelegate.as
internal-create-custom-event-class:
[copy] Copying 1 file to E:\fb3Workspace\TestUMCG\src\com\axelscript\tempCairngenUM\events
create-command:
[copy] Copying 1 file to E:\fb3Workspace\TestUMCG\src\com\axelscript\tempCairngenUM\commands
[copy] Copying 1 file to E:\fb3Workspace\TestUMCG\test\com\axelscript\tempCairngenUM\commands
internal-register-sequence:
BUILD SUCCESSFUL
Total time: 3 minutes 34 seconds

• now you need to create the delegate class that talks to the service that will retrieve the data or execute the function you need to do.
  • with build.xml open, in outline view right click “create-delegate”
    • now you will be prompted for the stub name of the delegate
      • type “Users” click OK

the message in the console should look something like this
Buildfile: E:\fb3Workspace\TestUMCG\cairngenum\build.xml
create-delegate:
[echo] @Invoking Cairngenum on [TestUMCG] --> Generating file(s): UsersDelegate.as
[copy] Copying 1 file to E:\fb3Workspace\TestUMCG\src\com\axelscript\tempCairngenUM\business
BUILD SUCCESSFUL
Total time: 39 seconds

• Now open business/Services.xml and add the following code

<?xml version="1.0" encoding="utf-8"?>
<service:ServiceLocator xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:service="com.universalmind.cairngorm.business.*">

<mx:Script>
<![CDATA[
public static var USERS_SERVICE:String = 'usersService';
]]>
</mx:Script>

<mx:HTTPService
id="usersService"
resultFormat="e4x"
url="assets/data/users.xml"
/>
</service:ServiceLocator>

• This is where there are some slight differences in Cairngorm vs. CairngormUM because the UM version lets its base class handle the service and the responder, where as you used to have to rewrite the two variables every time.
• You now need to adjust the Constructor Function in the the UsersDelegate so it looks like this
  • super( handlers, Services.USER_SERVICE );
• You need to add a function to your delegate class that actually connects to the service, and returns the data back to the command.
  public function readUsers():void
{
var token:AsyncToken = service.send();
token.addResponder( this.responder );
}
• now you need to adjust your UserReadCommand to call the delegates function “readUsers()”
  override public function execute( event:CairngormEvent ):void
  {
  super.execute( event );

  var evt:UsersReadEvent = event as UsersReadEvent;
  var delegate:UsersDelegate = new UsersDelegate( new Callbacks( handleDelegateResult, handleDelegateFault ) );

  delegate.readUsers();
// insert delegate method call here
}

• Finally you need to dispatch the event in this case we’ll do it on the initialize event of the main application file
  • TestUMCG.mxml

  <mx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import com.universalmind.cairngorm.events.Callbacks;
import com.domain.project.events.UsersReadEvent;
private function handleInitialize():void
{
new UsersReadEvent( new Callbacks(usersReadResult,usersReadFault) ).dispatch();
}

  private function usersReadResult( event:ResultEvent ):void
  {
  trace(event);
  }

  private function usersReadFault( event:FaultEvent ):void
  {
  trace(event);
  }

  ]]>
</mx:Script>

The Video

(it takes a minute to load)

To use email with ant you need the following 3 jar files installed.

• ant-javamail.jar
• activation.jar
• mail.jar

After you download the files you need to put them into your ant directory under your eclipse install “/plugins/org.apache.ant_******/ folder. If you watch the video, I explain how to find the ant folder if you don’t know where it is. For me it is “C:\Program Files\Adobe\Flex Builder 3\plugins\org.apache.ant_1.7.0.v200706080842\lib”. That is where all the ant jar files are held. You need to put the jar’s you downloaded into that folder, and then in eclipse you need to do the following.

1. Window > Preferences > (on left tree) Ant > Runtime
2. Once you’ve clicked on “Runtime” you’ll see a tree in the right side and the first entry should say “Ant Home Entries(Default) you need to click that, and then all of the buttons on the right will become enabled to click on
3. click on “Add External JARs
4. browse to your ant directory where all the jars are (for me its C:\Program Files\Adobe\Flex Builder 3\plugins\org.apache.ant_1.7.0.v200706080842\lib)
5. highlight your jar files that you downloaded and click ok (ant-javamail.jar,activation.jar,mail.jar)
6. click apply
7. restart flex builder or eclipse (whichever you are using)

Now we are finally ready to get into the ANT part…

Start by going into whatever flex project you want (or creating one) and then create two files under the root.

project.properties
##### EMAIL PROPERTIES #####
email.server = smtp.gmail.com
email.ssl = true
email.user = someemail@gmail.com
email.from = someemail@gmail.com
email.password = myReallyStrongPassword
email.to = someemail@gmail.com
email.port = 465

##### ZIP PROPERTIES #####
zip.destinationFile = E:/fb3Workspace/TempPublish/${zip.filename}.zip
zip.filename = src-code
zip.dir = E:/fb3Workspace/TempPublish/src


Build.xml
<project name="Publishing your project via Email with ANT">

<target name="zip-project">
<zip destfile="${zip.destinationFile}" duplicate="preserve">
<zipfileset dir="${zip.dir}" />
</zip>
</target>
</project>

Please see the video for more detail.

Pushing your project via Email with ANT (takes a little bit to load)

NOTE:Please note that the zip format allows multiple files of the same fully-qualified name to exist within a single archive. This has been documented as causing various problems for unsuspecting users. If you wish to avoid this behavior you must set the duplicate attribute to a value other than its default, “add”. (zip tag documentation)

Links:

• zip tag documentation

The Problem

When you create an air app and host it on a server somewhere, you often times have updates, and you need to publish a new .air file to the server so people that continue to download your app, get the newest, healthiest version. The problem with that is that after bug fix (which may take all of 2 minutes), you need to connect to your ftp site, or ssh, or email the new file to yourself, remote desktop into the server, and check your email and put the new file into it’s correct path on the server.

The Solution

Create an ANT Script that logs into you ftp site, and uploads the new files, and it goes from a some what menacing task, to being a delightful 2 or 3 click deployment. There are some things you have to do to eclipse to get the ftp tag to work right in ANT… They are listed below in the steps to take to get ANT up and going in eclipse or flexbuilder.

ftp.username = username
ftp.password = password
ftp.dir = dirToUploadFilesTo
ftp.server = myDomain.com
ftp.localDir = E:/ClickStats_Basketball_1_0/update

<target name="ftp-push-to-server">
<echo>Pushing files to ftp site: ${ftp.server}</echo>
<ftp
server = "${ftp.server}"
userid = "${ftp.username}"
password = "${ftp.password}"
action = "put"
remotedir = "${ftp.dir}"
verbose = "true"
>
<fileset id="ftp.upload.fileset" dir="${ftp.localDir}" />
</ftp>
</target>

The Video

Prerequisite: /using-the-air-update-framework

Your going to need to do a few things to make sure ant is working:

1. follow the steps on adobe’s site
2. once ant is installed (how to is in the previous link) you then need to make sure you have at least java 6 installed
3. now in eclipse or flexbuilder open your prefrences > (in tree on left go to) Java > Installed JREs > click “Add” > Browse for “JRE home directory” > “C:\Program Files\Java\1.6.x” (or something like that) > it should find a bunch of system libs > then click “OK”
4. WHILE STILL IN THE PREFERENCES WINDOW > verify new JRE is checked Preferences > Java > Installed JREs (should have jre1.6.xxx checked, INSTEAD OF Flex builder 3
5. Preferences > Java > Compiler > (in first drop down) Compiler compliance level: select “6.0″ instead of “5″
6. NET Commons Jar file: commons-net-1.4.1.jar
7. Getting FTP to work with Eclipse: getting-ftp-to-work-with-ant-in-eclipse
8. ANT Commons Jar file: ant-commons-net.jar
9. That should be all you have to do to get ANT up and running.

Links:

• Some Noteworthy negatives about deployment using ant: ant-sucks-for-ftp-deployment
• Book: Ant In Action By Steve Loughran
• Adobe: AIR Update Framework

Here are some links that you may need to follow along with the video.

• Download Air Update Framework
  • you will need the update framework
  • as well as the sample files

Here is the video.

Video on using the air update framework

Here is the zip of the Project – SOURCE

The Problem

When you embed a lot of fonts you immediately hurt your compile times. In the video I go about showing you how just embedding a few fonts can’t hurt your compile times, I have about 8 fonts embedded and 2 of them with bold font embeddings as well. This slowed down my compile time to 8 seconds, with barely any mxml, it’s all css and embedding fonts that caused the issue. This post goes to show you how to create a separate project to hold your css and how to include it as runtime css in your original project.

A (possible) Solution

The solution is to create a separate project to hold you css and embedded assets, the reason for this is most the time in your development cycle once you are done setting up the style it just sets there… and then you work on the logic of the application…

So what you do is create a separate project put your css and the embedded assets in the seperate project, and set its output folder to be the actual project’s html-template folder, then you right-click the css file and make sure “Compile CSS to SWF” is checked. This tells flexbuilder to compile a swf just for the css file… NOTE: you may have to make a change to the css file to get it to output the swf.

Once the file is a swf, and the output folder is your destination project you simply use StyleManager.loadStyleDeclarations(‘somecss.swf’); to load your css on the “initialize” event of the main application mxml file.

To also help improve compile times you can try using unicode ranges for you font as well, and only embedding what you need Using unicode ranges for fonts

Please see the video for more details

 Here is the zip of the Project - SOURCE

THE VIDEO

(be patient, it takes a minute to load)