Vic on Flex

BlazeDS Getting Started App Revisited

2009-02-11T23:25:00.002-07:00

As some of you may or may not have noticed, I don't get a chance to blog much these days... managing a fair sized team of developers and maintaining our streak of successful projects tends to keep me very busy. But in recent weeks I've started doing some BlazeDS project work again, and I find that to get my head back "in the game" I like to have a project I can pull up and jump right into, so to speak.

If you've been following my blog you'll know that although I'm a huge Flex guy, Java tends to be something I perceive more as a necessity in getting the job done. I've never been a full time hard core Java developer (my brother takes the honors in that category) and so, most of my posts regarding Java or Hibernate are through the eyes of someone who HAS to know enough to be dangerous.

Now I know that anyone could probably do this, but I figured I'd just put it out there, and maybe save someone the trouble... I've put together a little zip file that contains a Tomcat 5.5.x web app, which consists of a Flex project and a Java project, both of which can be opened in Eclipse. Basically the 2 apps work together to demonstrate:

using JNDI to declare database and SMTP services
launching HSQLDB in memory inside the web app (gets tiring installing mysql just to play around - I borrowed this from the BlazeDS turnkey solution and tweaked it a bit)
using a .property file to store configuration values and then retrieving those from Java
doing a very simple "is flex talking to blaze" function
doing a quick "is blaze talking to the db" function
doing a quick "send email from Flex thru Java to me" function
uploading files from Flex to Java and from html to Java
the minimum number of jar files needed to pull this off (updated to Blaze 3.2.x)

For me personally these are all really nice to have right at my fingertips. There's additional notes in the zip in the index.htm. Enjoy. You can find the zip file here: http://www.crazedcoders.com/demos/blazeMsg.zip

Keep in mind you may need to adjust your paths in your Flex, as chances are your Tomcat install won't be in the same location as I have it on my Mac.

Flexbuilder Debug Mode Dog Slow on Mac using Firefox

2008-08-28T13:45:00.003-06:00

Quick find today.

Little while back debugging in FB 3.0.x became a brutal exercise in futility. Finally reached a point where I couldn't debug at all. At the time I was running FF2.x. Initially upgraded to FB3 with no change, well no change, except that suddenly I wasn't entering debug mode (bug: had GreaseMonkey Add-On installed - removing it fixed that). Once I was entering Debug again, it would grind my Mac to a halt. Switched to Safari and it worked perfectly. Figured out that Piclense / CoolIris addon for Firefox was in fact the culprit. I uninstalled that add-on and suddenly Debug mode was working just fine again. Lesson learned: If debugging against Firefox, be wary what add-ons you have installed. Hopefully this little lesson will help others.

Why no Sandbox Violation running from Bin?

2008-08-13T15:04:00.003-06:00

Ever noticed that once you copy your html/swf files from the bin folder in your flex project to another file location, or just move the bin folder itself, your flex application no longer happily makes the remote data calls that only worked a minute ago in Flexbuilder? Well we ran into an interesting issue, when trying to push custom HTTP headers to a server. It worked fine while debugging in flexbuilder, and even double clicking on the html file in the bin folder worked. Yet the minute I moved the bin folder to say "program files\my proggy", the application would give a nasty error like this:

Error #2170: Security sandbox violation: file:///program files/my proggy/APITest.swf cannot send HTTP headers to http://myservice/DIRTNAPPY/.

I did some research, and there's actually tons of information out there that deals with this issue. First and foremost this article http://www.adobetutorialz.com/articles/1785/1/Local-Sandboxes does a very good job of explaining exactly what is happening behind the scenes.

Essentially Flexbuilder tells Flash that it should trust the bin folder... if you do a search on your development machine for the file flexbuilder_plugin.cfg, you should find it in a folder called FlashPlayerTrust in roughly the same area you normally find SharedObject files. If you open this file in a text editor, you should see pretty much every path to every bin folder for every flex project you have ever worked on. And suddenly everything gets so much clearer.

So I created a new file and placed it next to this flexbuilder_plugin.cfg file, and called it MyProggy.cfg. Flash is configured to read in all files in this folder and parse all paths out of it, and any applications run from these paths will be considered "localTrusted" and will act as they would when run from Flexbuilder. Inside this text file I put one line: "c:\program files\my proggy" and saved it. I then had to restart Firefox for the change to take effect. I also had added a text label to my application and bound the text property to {Security.sandboxType}.

Launching the app again from c:\program files\my proggy now showed the app running in localTrusted mode, and sure enough all my data calls worked just fine. Keep in mind, that all this only works when you intend to host your application on users machines, rather than on a webserver. It's simple enough to add the necessary text file when your application is being installed.

I should add that as a back up plan, you might want to consider trapping the Sandbox Error and then communicating to the user that they'll need to right click on the application, select Settings / click Advanced / then click on Global Security Settings Panel and add the appropriate path to the list of "always trust files in these locations". (still easier than making them go and create this text file themselves and saving it to the right location).

mx.controls.Text: preventing scroll on select

2008-08-08T18:01:00.002-06:00

A minor annoyance in Flex that I've lived with for many moons now is that even though I will provide enough vertical space to show all the text or htmlText in a Text Control, when a user attempts to select the text, often times, the text will scroll up, hiding the first line. The easiest fix is to set selectable='false', and in most cases this will do the trick. There are times however, when a client will demand that text remain selectable. And that same client will be the first to complain about the apparently unnecessary scrolling of text.

I played around with this, but seriously, the mx.controls.Text class really doesn't give one much to work with. On browsing through the sdk source, I discovered I'd probably have better luck working with the wrapped UITextField. In the end I tapped into the scroll event and the alwaysShowSelection attribute of the UITextField to get me where I needed to go.

It's been a long week so I'm just going to post up a link to the solution here, and the source code here.

Dogtagit Flex 3 Project

2008-07-10T10:59:00.005-06:00

I've been working closely with Threecast on a project for some time now, and they've made a demo site available for me to showcase. It's hosted on port 8888, so you're best off to try this at home. The application is built on SqlServer, .Net, Weborb and Flex 3 using Cairngorm. Feel free to have a look around, and play with it. This version has the login disabled and the data is reset on a regular basis - it's primarily just for preview purposes. You can view the site here:

http://demo.dogtagit.com:8888/beta/main.html

And if you want to sign up and try it out for yourself, you can go to their home page www.dogtagit.com here and sign up.

Sometimes cornerRadius just isn't enough

2008-05-30T11:34:00.004-06:00

Two tips for coders new to Flex... if you want to have rounded corners in mx.containers like VBox, HBox, Canvas, etc, set the borderStyle to solid and the borderThickness to 0, and then set your cornerRadius to whatever you want. If the borderStyle is left at none (default), the cornerRadius attribute seems broken and ineffective.

The second tip, if you want rounded corners at the top and bottom of your Panel, there's a property called roundedBottomCorners which defaults to false. When set to true, you will see rounding both top and bottom.

Here's an example http://www.crazedcoders.com/demos/rounded/

I should point out that this has been blogged previously here.

Invalid Embed directive in stylesheet

2008-04-11T10:49:00.002-06:00

On a few occasions now, for no really apparent reason, suddenly our Problem Pane will be spammed with tons of messages all sort of looking like this:

Invalid Embed directive in stylesheet - can't resolve source 'Embed(source = "/assets/common.swf", symbol = "AccordionHeader_disabledOverSkin")'.

In the past, sometimes it would only happen on a mac, other times windows machines. I've tried deleting my bin folder, cleaning the project, recompiling the swf's, moving the swf's around, changing the syntax in the css ever so slightly. I've googled this on many occasions and found no clear answer. Today I decided that I needed to know what caused this and if in fact I figured it out, to share it with you.

What ended up being the root cause of our problem is that in several places in the application we were referencing image assets directly in our assets folder, i.e. /assets/delete.png, which is often the case when our designers aren't keeping up with asset creation and developers just throw some image up as a placeholder for the time being. Now it just so happened that ONE of these references was incorrect and its Embed pointed to a file that did not exist. I discovered this when I commented out our style css references in the application, and saw the error only then. It was this broken reference that caused the above error. I fixed the reference to point to the right file, did a Project clean, and all the Invalid Embed Directive errors went away.

I should note that we had over 100 references to symbols in our css, and by default Flexbuilder only shows the first 100 errors. Unluckily the "unable to resolve 'assets/deleted.png' for transcoding in ...." was error number 138 and did not show up in the list. I had to change my preferences to show all 138 errors.

So the lesson learned is that when you get spammed with this error, it could well be that only one Embed tag somewhere in your app is actually broken, and that your css and swf is probably just fine.

Working With BlazeDS Beta 1

2008-02-17T16:28:00.010-07:00

Last week we successfully ported an AIR application from amfphp to BlazeDS. The code for this application was almost completely generated by a new generator we're working on (coming soon!). With the announcement of BlazeDS, we kinda shelved our php generator and redirected our efforts in doing the same thing for BlazeDS. In the process, we put together our own version of the blazeds.war file that ships with BlazeDS beta 1, which we use as the starting point for all our BlazeDS projects. Here's a list of the changes we've made:

Modified the context.xml found in the META-INF folder - the packaged one was producing Valve Errors
Added the missing my-streaming-amf channel to services-config.xml, which I found in the BlazeDS samples war's config file
Incorporated the latest Flex 3 Compiler Module files to allow server-side compilation of mxml files
Created a very simple java class and a corresponding destination which will verify Blaze backend functionality
Created a very simple Flex application that calls the above java class function test(string)
Added 2 jars to WEB-INF, one is crazedTemplate.jar, which our new codegenerator (coming soon) uses, the other is sharpertools.jar, which the jar requires.

You can choose to go ahead and just use the application as is. It's only been tested on Tomcat / Win / OSX 10.5.2. If you don't intend on using our generator (coming soon!) to generate your java and AS3 Classes then you can go ahead and delete the 2 jars mentioned above. I really like this separation of compiler and essentially what was FDS. When FDS was originally released, it did both runtime compiles as well as Remoting, Messaging, Proxy and Managed Data Services. In our case, we never deployed anything that required runtime compilation AND furthermore, with each subsequent Flex release (2.01, Hotfix 1, 2 and 3), converting FDS projects that were set to compile on the server wasn't trivial. So we stopped using it. If I was super Java savvy I might have been able to figure out what parts I could yank out of my FDS application, but generally it seemed better to just leave it alone.

Now, with Blaze and the compiler war being separate, I've gone through the web.xml in this project and put comments to show which pieces are required by the compiler module and which pieces are required by Blaze. To get this back to being a pure Blaze non-Flex 3 Compiler Module, you'd just need to remove the appropriately marked sections from the web.xml and then remove all folders and files from WEB-INF/flex with the exception of:

services-config.xml
remoting-config.xml
proxy-config.xml
messaging-config.xml

Some of our clients have asked what the differences exactly are between BlazeDS and LCDS (prev. known as FDS). If you do enough research on the web, you can find several answers. From what I've seen, here's some differences I've found so far:

BlazeDS does not support the RTMP Channel typically used by LCDS for data push (RTMP typically means firewall port challenges all around anyway!)
BlazeDS does support AMF Streaming which offers data push like RTMP, however not nearly as scalable (100's vs 10000's of concurrent users)
BlazeDS does support proxy so you can bypass the all too familiar sandbox issues when accessing remote data where no crossdomain.xml is present
BlazeDS does not come packaged with the Compiler Module
BlazeDS does not have managed dataservices. This means that you don't need the fds.swc (DataService & [Managed]) in your flex projects.. you will use either Consumer, Producer or RemoteObject Classes
BlazeDS does support AMF3, RemoteClasses & Messaging with a "lite" version of push via amf streaming

To download the blazeBlank application click here. (as new builds of Flex 3 and BlazeDS are released I'll try to keep this application updated). This application currently uses Flex 3 Beta 3 and BlazeDS Beta 1. Be sure to visit the url /{context}/TestApp/Main.mxml to ensure that the application is working properly. (i.e. http://localhost:8600/blazeBlank/TestApp/Main.mxml)

Flex 3 (Beta 3) Badge.swf don't like spaces!

2008-01-18T01:02:00.001-07:00

We just recently were challenged with trying to update to the latest Flex beta, and there have been a few changes to the way the seamless install badge.swf works. For one thing, this program now goes out and talks to an air.swf hosted by Adobe. The second, and far more annoying "feature" was that if you had an AIR file name like "Sample Application.air" and tried to publish that using the sample batch.swf provided in the SDK, the AIR Installer would fail, choking on the space.

I've hacked the badge.fla file using regex to put replace spaces with %20, and this seems to have fixed the problem for now. I also downloaded a copy of the air.swf from the Adobe site, threw it in the same folder as my badge.swf and changed the code to use that one instead.

You can get the whole bag of goodies here. I've included all the source and a ready to use badge.swf, as well as a working sample.

amfphp/flex/cairngorm Codegen - Source Available on Google Code

2008-01-05T04:34:00.000-07:00

I've had quite a few people ask if they could get their hands on the php source for the code generator tool I published back in October here. My intention has always been to eventually get this out to the community, however the last couple months have been just crazy, with one release after another getting pushed out the door. So much demand for AIR and Flex applications, so little time...

Anyway, we finally had some time to get this thing cleaned up and out on Google code... you can find the source files at http://code.google.com/p/flexamfphpcairngormgenerator/source

DataServiceTransaction & LCDS

2007-12-13T16:25:00.000-07:00

Just a quick blog note on something that I've now wasted a good day on twice, only because I never blogged it last time. The challenge is say you need to make changes to data in a database, maybe across multiple tables, and using DataServices just doesn't make sense. For example, cloning x number of records. It's easy enough to create your Java remote objects and call them from Flex, but then in an FDS/LCDS implementation how do you push those changes out to Flex clients?

There's some documentation on this, scattered vaguely across the web, and there's a good chance that perhaps this has already been blogged - but I just couldn't find it. The trick is that there are 2 sides to this story, one, you must perform your operations on the database directly, and then two, you must INFORM FDS that changes have occurred. So say I want to create a new Author record, this is what that might look like:

public void createAuthor(){  
  DataServiceTransaction dtx = DataServiceTransaction.begin(false);
                //create record and save:
  Author auth = new Author();
  auth.setFirstName("Ernest");
  auth.setLastName("Hemingway");
  AuthorDAO dao = new AuthorDAO();  
  dao.create(auth);
                //let LCDS know:
  dtx.createItem("author", auth);
  dtx.commit();
 }

So I just do my regular db insert, then I use a DataServiceTransaction to let FDS know that I've created an Item. Alternatively, I could use this approach:

public void createFDSItem(){
  DataServiceTransaction dtx = DataServiceTransaction.begin(false);
  Author auth = new Author();
  auth.setFirstName("victor");
  auth.setLastName("javarubba");
  AuthorDAO dao = new AuthorDAO();
  dao.create(auth);
  dtx.refreshFill("author", null);
  dtx.commit();
 }

This approach might be a bit of overkill and might be better suited when doing mass updates across many records. I did a little bit of testing and it seemed that for the most part calling CreateItem() was faster that the refreshFill() in pushing the new record to the Flex Client.

What cost me so much grief is that I was falsely led down the garden path to believe that calling dtx.createItem("author", auth) would not only inform FDS but also actually create the item. This is not the case. There! Officially blogged!

Losing the RollOverColor in TileList

2007-11-13T13:26:00.000-07:00

In one of our projects we have a custom effect that plays over each tile as a user mouses over the items in a tilelist. Not getting too much into details, I basically overlay a canvas that appears and disappears as the mouse moves over the tile, giving the illusion that each tile sort of explodes. So the one thing I don't need is the rollOverColor effect, which defaults to a nasty baby blue. Usually I just set the rollOverColor to the same color as the background but that's not working so well on this project, since the background can be an assortment of wallpapers.

Unfortunately there doesn't seem to be any way to disable the rollOverColor, and maybe someone can shed some light on an easier solution. I ended up extending TileList with my own mxml component and overriding the drawitem function, as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
 <![CDATA[
 import mx.controls.listClasses.IListItemRenderer;
      
    protected override function drawItem(item:IListItemRenderer,
                      selected:Boolean = false,
                      highlighted:Boolean = false,
                      caret:Boolean = false,
                      transition:Boolean = false):void{
                                 
           super.drawItem(item,false,false,caret,transition)      
          }
 ]]>
 </mx:Script>
</mx:TileList>

As you can see, I override the selected and highlighted parameters with false, thereby eliminating the selected and roll over effect. Seems to work quite well. I now use this mxml component instead of TileList throughout my applications.

Where or where has my intellisense gone?

2007-11-09T01:03:00.001-07:00

I'm working on a flex 3 app using the latest flexbuilder 3 beta, both the plugin and standalone versions. For some reason, in some mxml files my intellisense just seems to not work at all. While in other mxml files the intellisense works fine. Turns out that in this latest beta release, Flexbuilder gets cranky if you use double quotations in Metadata Event tags:

[Event("forward", type="mx.events.Event")] will kill your intellisense and your control clicks. You will feel very lonely.

[Event('forward', type='mx.events.Event')] will make everything right again, blue coding skies ahead.

On a side note, the single quote is actually only necessary on the type attribute, intellisense seems to work fine if you use double quotes on the Event name itself.

Hopefully this will be fixed in the next release.

Using floating IFrames in Flex 3 Beta: wmode buh-bye?

2007-11-01T10:26:00.000-06:00

Just a quick one today... we're porting some work to Flex 3 where we do the floating Iframe thing, and noticed some strange behaviour changes. In Firefox, the floating Iframe would briefly flash into view and then disappear, while in IE the Iframe would appear, however if we clicked into the IFrame embedded html page and then clicked outside it somewhere on the flex app, the IFrame would disappear from view.

Took a little bit of sniffing around but in the end the culprit was the html-template\index.template.html file. For some reason, and it might well be a very good reason, the property wmode is no longer included in the flash player tags ("wmode", "opaque" in AC_FL_RunContent() && wmode="opaque" in <EMBED>) in FlexBuilder 3. Once we added those back in, the floating IFrame started working again.

Not another Flex, AmfPHP, Cairngorm CodeGen! MAKE IT STOP!

2007-10-25T16:56:00.000-06:00

Haven't blogged in quite some time and this is a project that's been half done for far too long. Like everyone else we decided to build our own code generator, just something fairly straightforward that would generate all the DAO code, the Cairngorm code, and a nice little interface to test all the main CRUD and DAD functions we have come to know and love. Lately we've been busy souping up the generated UI, not so much in terms of style... beauty does not live here... functionality however does.

You can get all the gory details by clicking on this link:

http://www.crazedcoders.com/php/codegen.php

We built this code to use AMFPHP, Cairngorm, PHP and Flex 2.01. We've put in place validators, datepickers, checkboxes and textinputs on our forms and generated full Command/Event/Model/Controller classes. We've implemented binding on the generated view form fields. Our code generator will detect relationships between tables and render comboboxes accordingly, for example, if there's a foreign key on a customer table linked to a country table, the customer view will have a combobox linked to the model.countries collection. But I must stop, I'm getting too technical...

Basically, if the generator runs successfully, you're a few clicks away from being able to manage the data in your database from Flex. The generated code is zipped up for you to download. Inside the zip you will find a complete and ready to import Flexbuilder Project and the php packages ready to copy into your amfphp services folder. Further details can be found by clicking on the link.

Flash.media.Sound & Memory Issues in Flex

2007-05-30T00:39:00.000-06:00

Taking a short break from my module woes, I've been working with audio in Flex. In my app I was building a preview intro scan of my listed mp3's. What I noticed is that as the list of mp3's got longer, the memory that my browser was eating up got larger. I haven't really found any articles addressing best practices regarding handling audio in Flex, however I would venture a guess that this has been addressed many times in the past by Flash Developers.

I'm pretty tired so I'll keep this simple. Best way I have found to ensure that an audio stream is destroyed and the memory returned when you stop it:


      private var mySound:Sound = new Sound();
      private var audio:SoundChannel = new SoundChannel();

      private function startPlaying():void{
        mySound = new Sound(new URLRequest("music/sample.mp3"));
        mySound.addEventListener(Event.COMPLETE, completeSound);
        audio = mySound.play();
      }
              
      private function stopPlaying():void{
        audio.stop();
        mySound.removeEventListener(Event.COMPLETE,completeSound);
        mySound = null;
      }

Trick is to declare the variables outside the function, ensure you configure a sound channel (audio) for your sound, and make sure you that you can reference both from the stop function. Then you need to stop the audio, remove any event listeners, and set sound to null. I found it's also a good idea to do your URLRequest inline, as it seems to get destroyed at the same time as mySound.

Short, simple.

Can Cairngorm and Modules play nice? Sample App

2007-05-12T23:36:00.001-06:00

First I'd like to say thanks to those of you that commented on my previous blog entry. I was inspired to go back and take another look at ApplicationDomain. To be honest, I can't get it to work for me. So I'm just going to put up my prototype application with source code and let you play with it. There is a shell application and 3 very simple modules. The challenge is to have a controller in the shell and still have the modules all work independently of each other. The sample app as it sits on the server works because it's essentially Cairngorm free. Good luck!

Source can be found here. Demo can be viewed here.

Can Cairngorm and Modules play nice?

2007-05-12T14:18:00.000-06:00

Let me say, first off, that my wife gave birth to a beautiful baby girl on Wednesday morning, and they are doing just fine. I've been relocated to the spare bedroom so that I can actually function during the day, however I'm missing about 30 hours of sleep this week that I'll never get back. Having said that, I am blogging today because even though I've sort of fixed my latest issues, I'm not entirely sure I've used the best approach.

This is really a sequel to my previous blog... I am still fighting with getting modules to load properly and independently of each other and the shell flex application. Here's the deal...

I have one complex flex module that is built on the Cairngorm 2.2 framework. In itself, the module works fine, and after the progress from the other day, loading multiple instances of the module into a simple shell works fine too. However, when I tried loading multiple instances of the module into the actual application, things died. Why? Because the shell is built on the Cairngorm framework as well. The minute I add in the <services:AppController id="appController"> line to my shell app, subsequent instances of the module don't load properly. I determined that the shell needed to use a different controller than the module, but that wasn't enough (though still necessary). There were funky things happening again when events were triggered - weird casting errors, events firing across multiple module instances, shared models, etc.

A couple of observations:
CairngormEventDispatcher basically returns a singleton. If the shell app gets an instance of this class, then any Modules that load will use the same instance. So, adding the appcontroller to the application will in fact get an instance of the dispatcher. Running through the debugger, I noticed that as I loaded each new instance of the same module, event listeners were added to the singleton's eventDispatcher. So, say your module was listening for the ContactEvent.LOAD_CONTACT event. If you loaded 3 instances of that module, your controller would execute 3 commands, once for each module.

When an event is received by a command, and you try to cast that event back to its origin, i.e. ContactEvent(event), it will only work in the module that actually originated the event. The other modules will throw the following exception:
" cannot convert com.crazedCoders.moduleTest.event::ContactEvent@4b23281 to com.crazedCoders.moduleTest.event.ContactEvent." Trying to test for it, i.e. if(event is ContactEvent) doesn't work since the event is in fact a ContactEvent. Very frustrating.

If you do not use any Caingorm in your shell application, you will not run into these issues, so for some that might be the quick solution. Sadly I was not afforded that luxury, so I had to find another way.

Since I was trying to treat each Module as an autonomous mini-application, I decided that I needed a CairngormEventDispatcher specifically for each Module and the Application. I created a Factory Class that would do just that. Here's the code:

package com.adobe.cairngorm.control{
  import mx.modules.ModuleManager;
  public class CairngormEventDispatcherFactory
  {
  private static var instances : Array = new Array;
  public static function getDispatcher(obj:Object) : CairngormEventDispatcher
  {
  // in order for each module developed using cairngorm to be able
  // to work independently of the shell and other modules,
  // we need to create a hash map of cairngormeventdispatchers
  // that are keyed on module instance or application.
  // This prevents cross module listening for events,
  // which is beneficial especially when loading multiple instances
  // of the same module
  var ed:Object = ModuleManager.getAssociatedFactory(obj);
  var parent:String = "application";
  if(ed != null){
    trace(ed.name); 
    parent = ed.name;
  }
  if(instances[parent] == null){
    var cgDispatcher:CairngormEventDispatcher = new CairngormEventDispatcher();
    instances[parent] = cgDispatcher;
    return cgDispatcher;
  }
  else{
    return instances[parent];
  }
 }
}
}

It took me a while, but eventually I stumbled upon ModuleManager.getAssociatedFactory(object). This function *seems* to be able to figure out within the context of which Module (if any) the object was instantiated. If an object belongs to the shell, it returns null, if not, then it returns a ton of information, including a name property that contains a unique name i.e. instance77 for the loaded module. I create a new instance of the CairngormEventDispatcher for each instance and stuff it in the static associative array, then I replace the usual CairngormEventDispatcher.getInstance().dispatchEvent(...) with
CairngormEventDispatcherFactory.getDispatcher(this).dispatchEvent(...));
Now the application shell and each module gets it's own singleton, and the overlap seems to be taken care of.

Again, I welcome any feedback. I'm not particularily fond of this solution, and I hope someone out there can offer a better one.

Loading Multiple Independent Instances of a Module

2007-05-07T22:01:00.000-06:00

So, it's Monday night... my wife's contractions are 13 minutes apart, and it seems I have nothing better to do than blog. Of course, this is more akin to the calm before the storm that will be the next 24 hours and probably the next six months. Eventually I will once again emerge from the dark precipice that lies ominously before me. But on to modules.

I love Cairngorm... I just upgraded all my projects 2.2 and it was painless, nothing like child labor, I'm told. I am working on a project where we have to build all these pretty much independent modules, and in these modules we stick to Cairngorm as well.

The first problem we ran into occurred when attempting to load 2 instances of the same module. ModuleManager, as it turns out, keys modules by url. So if you try to load the same module twice, you're just getting a reference to the same one. There is no way around this (or so I thought) This has a number of repercussions:

Only one ServiceLocator instance can be instantiated - this wonderful little Error message pops up the minute you load a second instance of the module. Quick workaround is to declare the system locator code much like you do model:
private var dataServices:ServiceLocator = ServiceLocator.getInstance();
and abstain from using the mxml format:
<business:Services id="dataServices" />
All your module instances will share the same model... so if you say do a search, get a searchresult back and stick that in your model, all your modules will display the same search results, which defeats the purpose of having separate file/image search browsers (for example).

Here's a couple other funky things I tried:

Created 2 modules pretty much identical, Mod1.swf and Mod 2.swf. I loaded them up and they both worked fine and independently
Created a copy of Mod1.swf and called it Mod1a.swf. I loaded them up and they both worked fine.
Tried loading two Mod1.swf and suddenly no independence, plus the ServiceLocator error.

I tried wiring up my own ModuleManager, but after a good couple hours I gave up... I was getting all sorts of weird behaviour. I figured out that everything is based around the url that you pass to ModuleManager or ModuleLoader. I was pretty much ready to give up when I had this really silly notion, I did this:

private var count:int;
private var spaces:String = "";
private function LoadModule():void{
  for (var x:int; x < count; x++) spaces += " ";
  var info:IModuleInfo = ModuleManager.getModule("mod1.swf" + spaces);
  info.addEventListener(ModuleEvent.READY, done);
  info.load();
  count ++;
}
private function done(event:ModuleEvent):void{
  var visual:DisplayObject = event.module.factory.create() as DisplayObject;
  tabber.addChild(visual);
}

Much to my surprise, this hack worked. The modules loaded successfully and ran independently. Of course, I probably need to test this some more, but I figured I'd blog it quick before the trauma of childbirth hopefully graces me with some convenient and kind short term memory loss.

Mapping VO's from Flex to PHP using AMFPHP

2007-04-27T00:33:00.000-06:00

I sometimes wonder why it is that I never seem to blog till shortly after the midnight hour... oh well... life just gets too crazy when the sun is up. So as it happens, one of my minions spent the better part of today putting together php classes, using a nifty code generator found called DAO Generator by the guys over at Titantic Linux. It seems to do a pretty decent job of generating the sql necessary to create the db table, and then builds three additional files, the VO, a datasource file, and then finally a DAO file that has a ton of functions in it. (and I mean a ton!)

Going to take a moment here to give credit where credit is due... Michael Ramirez's tutorial on Using Amfphp 1.9 with the Adobe Flex 2 SDK is what really got us started in the right direction, it's pretty detailed and yet easy to follow. We quickly were able to get our AMFPHP up and running with the tutorial files as outlined by Michael. Tickled pink by the code generator we figured we could easily start building our own php gateway. But enough background... on to the thick of things.

Passing VO's from PHP seems to be very well covered in numerous articles on the web, and it involves mainly adding a var $_explicitType="tutorials.Person" to the php VO, with a value that corresponds to the [RemoteClass(alias="tutorials.Person")] in the Flex VO. Pretty straightforward and foolproof. But no one seems to spend any time talking about going back the other way.

Generally when a VO is passed from Flex to AMFPHP, it is treated as an Associative Array. In Michael's examples, he treats the ValueObject that is passed back to Save function as just that $valueObject["lastName"]. But we were pretty keen on using the generated code, which actually uses the syntax $valueObject->getLastName(). And this of course, failed, because the $valueObject being passed to PHP from Flex was not in fact being mapped back to the right VO, or any php VO for that matter.

Turns out, after much googling, that only under certain conditions will AMFPHP successfully map an incoming Flex VO to the corresponding PHP VO. In the globals.php, found at the root of the AMFPHP folder structure, you'll find the following line:

$voPath = "services/vo/";

Meanwhile we had been placing our VO in the same folder as our Datasource and DAO files, something like com/crazedCoders/testapp, and this was off the services/ folder, not the services/vo folder. In fact we didn't even have a /vo folder. I found this little tidbit of information: "As for incoming class mapping, remember that if amfphp doesn't find the class to be mapped in the services/vo folder, it will simply deserialize the object as though it were untyped, that is, as an associative array. " in this blog.

It took a little bit of playing around but ultimately, without making any changes to the core AMFPHP files, I was able to get the reverse mapping working successfully. This is what that looked like:

//file: src/tutorials/Person.as
package tutorials{   
[RemoteClass(alias="tutorials.Person")]   
[Bindable]  
public class Person    {       
   public var firstName:String;       
   public var lastName:String;       
   public var phone:String;       
   public var email:String;   
}}

and then in php:

<?php
//file: services/vo/tutorials/Person.php
class Person { 
  var $firstName; 
  var $lastName; 
  var $phone; 
  var $email;   
// explicit actionscript package 
  var $_explicitType = "tutorials.Person";}
  function formatLastName(){
      $lastName = strtolower($lastName); }
?>

To test the mapping I added the following function to a PersonService.php file:

//file: services/tutorials/PersonService.php
  function modify($person){ 
    //this will call a function on person and return it 
    $person->formatLastName();
    return $person;  
}

Only if the valueobject was mapped correctly would it be able to call the function on the PHP VO. In Flex I just created a Person object, passed it in to the remoteobject call, and observed the formatting of the last name on the Person object that was returned.

Again, I hope this will save others the time that it took me to figure this out. Enjoy!

SizeableTitleWindow & Custom Skins

2007-04-25T16:26:00.001-06:00

Most of you are probably familiar with the SizeableTitleWindow.as that the CF code generator for Flexbuilder spits out, along with a plethora of other useful tidbits of code. In fact that was the only reason I initially installed Coldfusion and the tools - I saw a modal resizable window in Flex and absolutely had to have it!

That was like 8 months ago. Recently I started working a lot more closely with skinning and runtime loading of css. I created some really funky UI's using run time style sheets that I found at http://www.scalenine.com, in particular I like using the Obsidian Theme Skin. However, this skin, like many others, replaces the skins for the Panel control - which, though very cool, breaks the resize function of the SizeableTitleWindow.

In simple terms, an event listener attached to the MouseOver event checks the coordinates of the mouse and if the coordinates fall within the right range, a cursor image is assigned. When the user clicks the mouse, the mouse down event checks which cursor is active and acts accordingly. The only problem is that all the coordinate calculations are based on event.localX and event.localY and those relate to event.target. However when using skins, the event.target isn't the SizeableTitleWindow but rather the skin, so it throws everything off. The result? The east and south cursors don't appear and even when they do, the drag functionality is buggy at best.

I fixed the problem by replacing all localX and localY with event.currentTarget.mouseX and event.currentTarget.mouseY. Also I no longer check to see if event.target is SizeableTitleWindow, and that seems to have fixed it.

You can find this code in action here and the source here. Enjoy.

Flex Modules, Compile and Run Time CSS

2007-04-20T18:19:00.000-06:00

I've recently become involved in building a very module based Flex app, where the question of css and css inheritance came up, particularly with respect to how Flex handles run time loading of style sheets when they are loaded within not only the shell application but also the therein loaded modules.

Essentially, there are 3 rules that prevail:

The most recent style to be loaded always wins.
Run time overrides compile time styles
StyleManager is a global Manager
Style inheritance is granular to the attribute level
Compile time css will only compile styles found in Application

Let me explain further, and to do so I'm just going to use our trusty <mx:Button>

The most recent style loaded always wins
Say you load a runtime style sheet with the following:

Button {
fillColors: #ff0000, #ff0000, #ffffff, #eeeeee; /*red */
letterSpacing:3;
}

Then in a (rather large) module you load another runtime style sheet with this:
Button {
fillColors: #006600, #009900, #ffffff, #eeeeee; /*green*/
letterSpacing:1;
}

You'll notice that the first color style is applied right away, to any buttons in the shell application. However, when the second module finishes loading, all Buttons will change from Green to Red, and spacing will be reduced to 1. To make it even more interesting, you could add an additional module of roughly the same size as the first and have it load its own style sheet. Then the end result is pretty much random, whichever module takes the longest to load wins, the shell run time style never to be heard from again.

Run time overrides compile time styles
In your shell application you add the following:
<style>
Button{
fillColors: #9900ff, #9900ff, #ffffff, #eeeeee;
letterSpacing:1;
}
</style>

Once your app loads the run time css, this will be overwritten. Now if you have a huge run time css swf with massive fonts or images embedded in, there's a chance you might even see your original color first and then have it overwritten later. This can cause for some funky effects in your app, in which case you might want to attach an eventListener to StyleEvent.COMPLETE, and hide your interface until that event has triggered using a ViewState or the like.

StyleManager is a global Manager
It that does not distinguish between <Applications> and <Modules>. Say you create a custom style class called .myDogAteMyHomeworkButton for Buttons in your module. You then place a corresponding style entry in your compile time or run time styles for this module. Now someone else happens, just happens to use the same exact style class in their module. Or the shell application developers happens to do so. Well again, the last one loaded wins. Your custom style class is never safe. But then again neither are their's. The best thing you can do is be very very unique in your style class naming conventions, and hope for the best.

Style inheritance is granular to the attribute level
Getting back to our original example, you'll notice the style attribute letterSpacing was defined explicitly in both style sheets. Because inheritance is on the attribute level, if you do not specify an attribute in say your run time style sheet for your application, then that attribute can be set in compile time style tags and it will override the default values. What's the lesson to be learned here? If you want to make sure that your runtime css has the final word, then get detailed and explicitly list every style attribute and its value, even if the default will suffice.

Compile time css will only compile styles found in Application
Ever seen this warning "The type selector 'HDividedBox' was not processed, because the type was not used in the application."? Until the dawn of Modules, this was a message I generally ignored. Made sense to me, if I didn't have an HDividedBox anywhere in my application, why include the style? But what would happen to modules that perhaps do use the HDividedBox control but rely solely on the shell application styles for their look and feel? The application doesn't know at runtime that one or more of its modules will need this style defined, so therefore it just ignores it. End result, your HDividedBox in your module will not be styled properly. The solution? Use run time stylesheets. (and that's how this all began!)

A closer Look at IFrames and ExternalInterface in Flex

2007-04-10T00:32:00.000-06:00

Well I've been super busy as usual, working on some pretty cool stuff, still managing to only put food on the table but also sticking to my guns and doing only Flex projects. Of course, my blogging has suffered dearly.

In one of my current projects, I am faced with the challenge of somehow embedding IFrames inside my flex app, however without having any control over the html wrapper that my Flex app will sit in. Sure I could 'advise' users on adding the appropriate javascript functions and the hidden div element at the bottom of the body, as we've seen in other Flex Iframe examples out there. But I figured there had to be a way to do this without needing to rely on this external dependency.

As it turns out I can do inline Javascript function calls within my ExternalInterface.call, an example of this would be:

ExternalInterface.call("function(){return window.location.href;}");

which is a simple little function to quickly get the address of the current page. Another handy example is this one:

ExternalInterface.call("function(){document.location.href=document.location;}");

This is a quick way for a user to 'logout' of the flex application, it simply reloads the web page. So as you can see, we can do a great deal without ever needing to touch the html wrapper. So why not do the same thing with Iframe support? Here's what I came up with:

ExternalInterface.call("function(){" +
          "var tempIFrame=document.createElement('div');" +
         "tempIFrame.setAttribute('id','vyFrame');" +
         "tempIFrame.style.position='absolute';" +
         "document.body.appendChild(tempIFrame);" +
         "tempIFrame.style.backgroundColor='transparent';" +
         "tempIFrame.style.border=0;" +
         "tempIFrame.style.visibility='hidden';}");

I am going to try and create a div element in memory and append it to the DOM. It's best to run this code during the application preinitialize() event. However, before I move on to explain the rest I just want to mention that I did run into some issues here with IE6. As you'll notice I appendChild and then I set the styles. Turns out that if I manipulate a new element too much prior to adding it to the DOM, it just gets all flaky and will not work. Believe me, this was not an easy bug to track down!

Now, we need to change the remaining externalInterface calls as well... things like move, hide, show and source. Building on the example at deitte.com that first got me started ages ago, I changed all the calls as they are found in his IFrame.mxml component:

ExternalInterface.call("moveIFrame",globalPt.x ,
globalPt.y, this.width, this.height);
Becomes:

ExternalInterface.call("function(){" +
     "var frameRef=document.getElementById('vyFrame');" +
     "frameRef.style.left=" + globalPt.x + ";"+
     "frameRef.style.top=" + globalPt.y + ";" +
     "var iFrameRef=document.getElementById('vyIFrame');" +
     "iFrameRef.width=" + this.width + ";" +
    "iFrameRef.height=" + this.height + ";}");

ExternalInterface.call("loadIFrame", source);
Becomes:

ExternalInterface.call("function(){vyFrame.innerHTML='" +
     "<iframe id=\"vyIFrame\" src=\"" +  source +
     "\" frameborder=\"0\"></iframe>';}");

ExternalInterface.call("showIFrame");
Becomes:

ExternalInterface.call("function(){" +
     "document.getElementById('vyFrame').style.visibility='visible';}");

ExternalInterface.call("hideIFrame");
Becomes:

ExternalInterface.call("function(){" +
    "document.getElementById('vyFrame').style.visibility='hidden';}");

After a bit of testing I did manage to get this to work, sort of. I ended up spending some time playing with the compiler options in Flexbuilder. I found that if I turned off history management, my Iframes wouldn't appear. However removing the script reference to history.js seemed to have no real effect. For those of you that are not Flash-savvy :) it turned out that the only things to really watch out for, and again I am at the mercy of the users who embed my flex app into their html pages, is that the AC_FL_RunContent() has a final parameter setting of "wmode", "opaque" and the object embed tag also contains wmode="opaque". If this setting is not there or set incorrectly the Iframe will appear behind your flash player.

Export Data from Flex App using Coldfusion

2007-02-15T15:15:00.000-07:00

It's been a while since I blogged, just so amazingly busy these days that I barely have time to breathe, let alone blog. I'm currently up to my neck in building a flex app that uses Coldfusion 7.02 and DB2 v8/9 on the back end. I've never used Coldfusion before so it's been one hell of a time. I managed to figure something out today that I think is definitely worth sharing. In the app I was required to find a way for users to 'export' or 'save' their work to their drive, in a format they could easily open directly. That eliminated shared objects and I wasn't allowed to use a third party tool like swfStudio to build a helper app and use Localconnection to get the job done (can't wait for Apollo!)

I don't have much time so I'm going to just paste code and explain a bit.

Step 1. Enable session management in the CF app. Create an Application.cfm file in the root of your CF application, put this in it:

<CFAPPLICATION NAME="Name" SESSIONMANAGEMENT="Yes">

Step 2. Create a CFC that takes whatever data you wish to save and sticks it in a session variable, return a boolean to let Flex now this worked(Export.cfc):

<cfcomponent>
 <cffunction name="toXml" access="remote" returntype="boolean" output="true"> 
  <cfargument name="data" type="string" required="yes" default="" />
  <cfset session.exportData = #arguments.data#>
  <cflog text="data to be exported: #session.exportData#"/> 
  <cfreturn true>
 </cffunction>
</cfcomponent>

Step 3. Create a CFM file in the application root that will grab the session variable and output it to http, while flagging it as an attachment (this causes nice save as popup to appear). In my example I'm creating an xml file and I ran into issues with whitespace, hence the cfsetting.. this fixed the problem for me (getFile.cfm)

<cfsetting enablecfoutputonly="true" showdebugoutput="No">
<cfheader name="Content-Disposition"
value="attachment; filename=export.xml"/>
<cfcontent type="xml/text" reset="true"/>
<cfscript>
 WriteOutput(session.exportData);
</cfscript>
<cfexit />

Step 4. In flex declare the remote object that will call the cfc:

 <mx:RemoteObject 
      id="exportManager" 
      destination="ColdFusion" 
      source="com.sample.utils.Export" 
      showBusyCursor="true">
     <mx:method name="toXml" result="login_result(event)" fault="serverFault(event)" />
  </mx:RemoteObject>

Step 5. Add your code to call it and handle the result. The result, on success, will make an httpservice call to the CFM you created:

private function test():void{
   exportManager.toXml("" +
        "" +
        "The application has successfully exported this file" +
        "Eventually the actual data will be passed into this function" +
        "");
}
private function login_result(event:ResultEvent):void{
   if(event.result == "true"){
        var request:URLRequest = new URLRequest("getFile.cfm");
        flash.net.navigateToURL(request, "_self");
   }
}

Conclusion. Basically that's it. I had issues with the session not persisting from setting the variable to getting it, but adding the application.cfm fixed that. I can now push any xml data to the browser for saving. There's lots of other possibilities here as well, such as exporting to Excel or Word, but there's other articles out there that you can google which explain how to do those specific tasks in Coldfusion. Hope this helps!

Setting up Db2 v9 as a Coldfusion Datasource

2006-12-31T02:02:00.000-07:00

In the last few weeks I've had the opportunity to get to know Coldfusion just a little bit better. One of the first challenges I faced is getting CF talking to Db2, so I could take advantage of the CF Extensions for Flexbuilder and that funky Wizard. To be precise I used ColdFusion MX 7.02 and DB2 Community Express Edition v9.1

This doesn't just apply to Flex, but maybe others might find this useful. Keep in mind I have only tested this in Windows:

Install the db2 client or get access to a machine that does. I installed db2 in the default folder on my dev machine to get this working.
Copy C:\Program Files\IBM\SQLLIB\java\db2java.zip to C:\CFusionMX7\lib. Important: Make sure db2jdbc.dll is in the path somewhere or copy it to same folder!
Restart Coldfusion MX. Login to CF Admin. Go to Datasources.
Add new Datasource:

driver type Other
CF DataSource Name: [sourcename]
JDBC url: jdbc:db2:[dbname]
Driver Class: COM.ibm.db2.jdbc.app.DB2Driver
Driver Name: DB2Driver
username: [name]
password: [password]
[Submit]

Couple things to note. Out of the blue the other day suddenly I started getting this db2jdbc not found in java path error... I figure something I installed hooped my system path. Instead of messing around with why, I figured out that just copying the dll into my CF lib folder fixed the problem. The ...app.DB2Driver is specific to Windows OS I believe. The username and password are usually a Windows account... probably best to use the account that has admin rights to db2 at least until you get it working.

I also did spend a good chunk of time trying to get the built in driver to talk to db2... I personally had no luck whatsoever, and I have read in other places that the drivers generally are only backwards compatible... the driver that ships with CF is definitely not v9, I think it might be v7... not sure though. I did test the backward compatibility claim by using the v9.1 jdbc driver against a db2 v8.x datasource and it worked fine.

DoubleClickEnabled & other little Flex tips

2006-12-31T01:37:00.000-07:00

Want to code against double clicks in Flex? Don't forget to set this property to true!

Adding child objects to a canvas or some other container and need to keep the scroll moving down so users can see the new objects? Put this in a function:
canvas.verticalScrollPosition = canvas.maxVerticalScrollPosition + 45;
And remember to CallLater, this gives Flex a chance to lay the new object out and get you the right maxVerticalScrollPosition!

Are those child objects some kind of data entry control? Attach an event listener to the event
FocusEvent.FOCUS_IN for the object and point it to a function that does this:
private function test(event:FocusEvent):void{
canvas.verticalScrollPosition = event.currentTarget.y - canvas.height + 45;
}

Having issues with the custom Item Renderer in your TileList not updating when the underlying data changes? Make sure you're not using an ArrayCollection, it doesn't quite work every time.

Pulling data from a .Net webservice and having to parse out the date from the xml with your own Date Utility? Just remember that in AS3 months, hours, minutes and seconds are 0 based... in other words, October is month 09, not 10. That took me a while to clue in to.

Want to display hierarchical data relationships in a tree view? Stick the child objects in an arraycollection and assign it to a property called children in the parent object. This can be repeated down the chain as often as you like but remember it can get a bit slow quickly. Then point the Tree dataProvider property at the topmost object of the hierarchy.

Sometimes building a Flex front end on a .Net webservice back end can get complicated, especially when the developer (me) doesn't have access to the webservice. If the .Net webservice is designed right, simply taking the resulting xml of the webservice calls and using HttpService calls to load the xml works. When it comes time to use the webservice directly, simply replace the HttpService calls with WebService calls. Works like a charm!

Here's something silly. I stuck aTabNavigator in my view, and tried to capture the click event on the tabs. I tried pretty much every event I could find but not a single one would trigger when clicking on the tab. I replaced the tabNavigator with a TabBar and a ViewStack, and then was able to trap the tabIndexChange event to get the desired result.

Not my usual blog style but things are pretty busy these days. I hope to blog more again in the new year.

Autosizing Datagrid with Horizontal Scrolling

2006-12-07T14:32:00.001-07:00

Today I was tasked with creating a spreadsheet like datagrid, one with more columns than what the available real estate would be able to show. The datagrid was to always use the maximum screen space available so that for those users with huge budgets and subsequently huge monitors would not need to scroll. For all other, more mortal users, the datagrid should simply scroll off to the right, with a nice horizontal scroll bar.

I figured this would be easy. Turns out it's a bit tricky. If I set the maxWidth of my datagrid to something smaller than the sum of my column widths, the desired behaviour would occur. I'd get a nice horizontal scroll bar and the columns would span out to the right. The problem with maxWidth is that it does not accept percentage values. So if I want the datagrid to use up 100% of the width of the parent container, I can't use maxWidth.

I tried sticking the datagrid in a canvas, thinking i'd be able to use the scrolling of the canvas to quasi hover/move over the datagrid rendered in its entirety underneath, but the vertical scrolling didn't really work out well. Perhaps someone else might have more luck with this approach. I kinda wanted to get back to using the scrollbars in the datagrid, as it seemed that this HAD to be possible!

I figured the solution had to lie in maxWidth. I put the datagrid inside a canvas and made the canvas size percentage based. I then, in a resize() function triggered by creationComplete of the app, assigned the value of the width of the canvas to the maxWidth property of my datagrid. This seemed to work. I also tried to have the resize event of the app call this function instead but I'd get null errors. Turned out I needed to assign the event listener on creationComplete.

Everything looked good, the datagrid was resizing with the canvas. At certain times however the datagrid seemed to lag behind and not fill the canvas properly. Using callLater fixed this. Here's the Demo. Right click on the demo to get the source.

Many-to-Many using FDS & Hibernate

2006-12-05T14:57:00.000-07:00

Douglas McCarroll recently sent me an email asking if I'd had any luck getting Hibernate, Hibernate Tools for Eclipse and FDS to work with many to many relationships. I quickly threw together an example that I had built for a client a couple weeks ago, but in that particular case it wasn't a true many-to-many... I had a student, course and registration table but my registration table had it's own unique ID so really, it was just a combination of 2 one-to-many relationships. For most situations this would probably work however, as he pointed out, some clients might already have a db in place and would be unwilling to make a change just to accommodate the poor starving flex programmer.

Now back in the summer I did attempt to get a true many-to-many relationship to work using Hibernate Tools. What I didn't realize at the time is that the tools didn't yet support this feature. Then i saw this link and decided to give it another go.

I will be using mysql for this example. It is based loosely off the crm db that ships with FDS. Here's the scripts for the 3 tables in play:

CREATE TABLE  `crm`.`employee` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `First_Name` varchar(45) NOT NULL default '',
  `Last_Name` varchar(45) NOT NULL default '',
  `Email` varchar(45) NOT NULL default '',
  `Phone` varchar(45) NOT NULL default '',
  `Title` varchar(45) NOT NULL default '',
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE  `crm`.`event` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `name` varchar(200) NOT NULL default '',
  `eventDate` datetime NOT NULL default '0000-00-00 00:00:00',
  `eventTime` varchar(45) NOT NULL default '',
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE  `crm`.`eventemployee` (
  `eventID` int(10) unsigned NOT NULL default '0',
  `employeeID` int(10) unsigned NOT NULL default '0',
  PRIMARY KEY  (`eventID`,`employeeID`),
  KEY `FK_eventemployee_1` (`employeeID`),
  CONSTRAINT `FK_eventemployee_1` FOREIGN KEY (`employeeID`) REFERENCES `employee` (`id`),
  CONSTRAINT `FK_eventemployee_2` FOREIGN KEY (`eventID`) REFERENCES `event` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

As you can see I have 3 tables, an Employee table, an Event table and an EventEmployee table. The EventEmployee table only has 2 fields, each a foreign key to the corresponding table.

The next step was to ensure I had the right version of the Hibernate Tools installed in Eclipse (3.2.0.beta7 or greater). I'm not going to spend any time on explaining how to configure the Hibernate Tools.. needless to say I got the Tool configured to reverse-engineer my db and it created these .hbm.xml files:

<?xml version="1.0"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<!-- Generated Dec 5, 2006 1:55:21 PM by Hibernate Tools 3.2.0.beta8 -->
<hibernate-mapping>
    <class name="samples.crm.Employee" table="employee" catalog="crm">
        <comment></comment>
        <id name="id" type="java.lang.Integer">
            <column name="id" />
            <generator class="native" />
        </id>
        <property name="firstName" type="string">
            <column name="First_Name" length="45" not-null="true">
                <comment></comment>
            </column>
        </property>
        <property name="lastName" type="string">
            <column name="Last_Name" length="45" not-null="true">
                <comment></comment>
            </column>
        </property>
        <property name="email" type="string">
            <column name="Email" length="45" not-null="true">
                <comment></comment>
            </column>
        </property>
        <property name="phone" type="string">
            <column name="Phone" length="45" not-null="true">
                <comment></comment>
            </column>
        </property>
        <property name="title" type="string">
            <column name="Title" length="45" not-null="true">
                <comment></comment>
            </column>
        </property>
        <set name="events" inverse="true" table="eventemployee">
            <key>
                <column name="employeeID" not-null="true">
                    <comment></comment>
                </column>
            </key>
            <many-to-many entity-name="samples.crm.Event">
                <column name="eventID" not-null="true">
                    <comment></comment>
                </column>
            </many-to-many>
        </set>
    </class>  
</hibernate-mapping>

<?xml version="1.0"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<!-- Generated Dec 5, 2006 1:55:21 PM by Hibernate Tools 3.2.0.beta8 -->
<hibernate-mapping>
    <class name="samples.crm.Event" table="event" catalog="crm">
        <comment></comment>
        <id name="id" type="java.lang.Integer">
            <column name="id" />
            <generator class="native" />
        </id>
        <property name="name" type="string">
            <column name="name" length="200" not-null="true">
                <comment></comment>
            </column>
        </property>
        <property name="eventDate" type="timestamp">
            <column name="eventDate" length="19" not-null="true">
                <comment></comment>
            </column>
        </property>
        <property name="eventTime" type="string">
            <column name="eventTime" length="45" not-null="true">
                <comment></comment>
            </column>
        </property>
        <set name="employees" inverse="true" table="eventemployee">
            <key>
                <column name="eventID" not-null="true">
                    <comment></comment>
                </column>
            </key>
            <many-to-many entity-name="samples.crm.Employee">
                <column name="employeeID" not-null="true">
                    <comment></comment>
                </column>
            </many-to-many>
        </set>
    </class>
</hibernate-mapping>

I also configured the Tools to create my domain code. What I found encouraging is that it only created the Employee.java and the Event.java classes, no EventEmployee.java class. Things were looking up! Ok, now it was time to configure the corresponding destinations in my data-management-config.xml file. I took a bit of an educated guess here, since the fds documentation surrounding the metadata tags is pretty weak... lucky for me I got it first try - I guess I spend way too much time here :)

<destination id="crm.employee.hibernate">
        <adapter ref="java-dao" />
        <properties>
            <use-transactions>true</use-transactions>
            <source>flex.data.assemblers.HibernateAssembler</source>
            <scope>application</scope>
            <metadata>
                <identity property="id"/>
                 <many-to-many property="events" 
                 destination="crm.event.hibernate" lazy="false" /> 
            </metadata>
            <network>
                <session-timeout>20</session-timeout>
                <paging enabled="false" pageSize="10" />
                <throttle-inbound policy="ERROR" max-frequency="500"/>
                <throttle-outbound policy="REPLACE" max-frequency="500"/>
            </network>
            <server>
                <hibernate-entity>samples.crm.Employee</hibernate-entity>
                <fill-configuration>
                    <use-query-cache>false</use-query-cache>
                    <allow-hql-queries>true</allow-hql-queries>
                </fill-configuration>
            </server>
        </properties>
    </destination>

   <destination id="crm.event.hibernate">
        <adapter ref="java-dao" />
        <properties>
            <use-transactions>true</use-transactions>
            <source>flex.data.assemblers.HibernateAssembler</source>
            <scope>application</scope>
            <metadata>
                <identity property="id"/>
                <many-to-many property="employees" 
                 destination="crm.employee.hibernate" lazy="false" />  
            </metadata>
            <network>
                <session-timeout>20</session-timeout>
                <paging enabled="false" pageSize="10" />
                <throttle-inbound policy="ERROR" max-frequency="500"/>
                <throttle-outbound policy="REPLACE" max-frequency="500"/>
            </network>
            <server>
                <hibernate-entity>samples.crm.Event</hibernate-entity>
                <fill-configuration>
                    <use-query-cache>false</use-query-cache>
                    <allow-hql-queries>true</allow-hql-queries>
                </fill-configuration>
            </server>
        </properties>
    </destination>

Finally in my flex application I built my correponding .as classes:

package samples.crm
{
 import mx.collections.ArrayCollection; 
 [Managed]
 [RemoteClass(alias="samples.crm.Event")]
 public class Event{
  public function Event() {}  
  public var id:int;
  public var name:String;
  public var eventDate:Date;
  public var eventTime:String;  
  public var employees:ArrayCollection;
 }
}

package samples.crm
{
 import mx.collections.ArrayCollection; 
 [Managed]
 [RemoteClass(alias="samples.crm.Employee")]
 public class Employee {
  public function Employee() {}  
  public var id:int;
  public var firstName:String;
  public var lastName:String;
  public var title:String;
  public var phone:String;
  public var email:String;  
  public var events:ArrayCollection;
 }
}

Then I just created a quick application with 2 datagrids: one id="dg" with a dataProvider="{employees}" and the other id="childDg" with a dataProvider="{dg.selectedItem.events}" - by setting lazy to false on my many-to-many relationship in the destination, it's guaranteed that the child records will load automatically. You could also turn this around... create a datagrid that points to {events} and have the other point to {dg.selectedItem.employees}. By the time you get to this point you can do pretty much anything anyway. The real trick was getting here!

How to keep db connections alive in FDS/Hibernate

2006-11-28T07:50:00.000-07:00

Struggled with a good title on that one. Anyway... here's the deal. I noticed a while back that if i left my fds server running over night, and in the morning tried to open the sample CRM application, well, it would fail. Fail so badly in fact I'd have to restart or redeploy to get it working again. I'd get an error in the fds log that looked something like this
SEVERE: Communications link failure due to underlying exception:
** BEGIN NESTED EXCEPTION **
java.net.SocketException
MESSAGE: Software caused connection abort: socket write error
Communications link failure due to underlying exception:
...
So yesterday I decided to see if I could fix this. It turned out to be a very very long day. Here are the lessons I learned.

Lesson 1: By default, mySQL terminates db connections after 8 hours of inactivity
Here are the default mySQL settings:

#The number of seconds the server waits for activity on a connection before closing it
wait_timeout=28800
#The number of seconds the server waits for activity on an interactive connection before closing it.
interactive_timeout=28800

For the remainder of my testing I changed these values to 300 in the my.ini file so that my connections would close after only 5 minutes of activity. A much shorter timeframe for testing! So the initial problem is that once mySql closes down the connection, Hibernate does not natively manage this connection and reopen it. If you connect directly with a jdbc connection you may run into the same issue. The trick is to use some kind of connection pool manager to keep the connections alive... the question remains, how can we achieve this?

Lesson 2: Using App Server JNDI datasources gives you connection pooling
In jrun or jboss, it is possible to create jndi datasources. These will then be managed by the application server. I created a jndi datasource for the crm database that comes with FDS which I recreated a while back in mySQL. Creating this datasource involved adding the following configuration to my jrun-resources.xml in the \fds2\JRun4\servers\default\SERVER-INF folder:

<data-source>
    <dbname>crm</dbname>
    <driver>com.mysql.jdbc.Driver</driver>
    <url>jdbc:mysql://127.0.0.1:3306/crm</url>
    <username>username</username>
    <password>password</password>
    <encrypted>false</encrypted>
    <encryption-class>jrun.security.JRunCrypterForTwofish</encryption-class>
    <native-results>true</native-results>
    <remove-on-exceptions>true</remove-on-exceptions>
    <pool-statements>true</pool-statements>
    <initial-connections>1</initial-connections>
    <connection-timeout>1200</connection-timeout>
    <pool-retry>30</pool-retry>
    <transaction-timeout>20</transaction-timeout>
    <cache-enabled>false</cache-enabled>
    <cache-size>5</cache-size>
    <cache-refresh-interval>30</cache-refresh-interval>
    <jndi-name>crm</jndi-name>
    <poolname>Pool</poolname>
    <minimum-size>0</minimum-size>
    <maximum-size>2147483647</maximum-size>
    <user-timeout>20</user-timeout>
    <skimmer-frequency>420</skimmer-frequency>
    <shrink-by>5</shrink-by>
    <maximum-soft>true</maximum-soft>
    <debugging>false</debugging>
    <disable-pooling>false</disable-pooling>
    <description />
    <isolation-level>READ_COMMITTED</isolation-level>
</data-source>

The key thing to note here is the jndi-name I've given this datasource. In Jboss I added a file called mysql-ds.xml to my deploy folder which looks like this:

<datasources> 
    <local-tx-datasource> 
        <jndi-name>crm</jndi-name> 
        <connection-url>jdbc:mysql://localhost:3306/crm</connection-url> 
        <driver-class>com.mysql.jdbc.Driver</driver-class> 
        <user-name>user</user-name> 
        <password>password</password>
        <min-pool-size>5</min-pool-size>
        <max-pool-size>20</max-pool-size>
        <idle-timeout-minutes>4</idle-timeout-minutes>        
    </local-tx-datasource>
</datasources>

I've kept the jndi names the same in both jrun and jboss so that it's easy for me to deploy my apps from one to the other. I ran some tests after I did this. Hibernate - still using it's own connection - would still fail permanently after the connection timed out. Yet the crm app that was configured to use jdbc/jndi directly (ConnectionHelper.java):

javax.naming.Context context = new javax.naming.InitialContext();
return ((DataSource) context.lookup("java:crm")).getConnection();

would fail once and then reconnect successfully. It looked like I was on the right track, now it was time to reconfigure Hibernate.

Lesson 3: Hibernate is not recommended for connection pooling
I had to configure Hibernate to take advantage of my jndi datasources. Here's what the hibernate.cfg.xml looks like for both jrun and jboss:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE hibernate-configuration PUBLIC
"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
    <session-factory>
        <property name="connection.datasource">java:crm</property>
        <property name="hibernate.dialect">org.hibernate.dialect.MySQLDialect</property>
[...]
    </session-factory>
</hibernate-configuration>

I saved my changes, restarted the server, ran my app, waited for the timeout, ran the app again, and even though it hiccupped on the first try, the connection was reestablished on the second try. But why this initial hiccup? Shouldn't there be some way to configure it so that even this initial error can be avoided? I still had much work to do!

Lesson 4: Make sure to have the latest mysql jdbc drivers installed
It turns out that Jboss jndi datasources can be configured to actively ping db connections and keep them alive. Yet I kept getting errors after configuring my datasource to do this 'pinging', and it turned out I was running older jdbc drivers. I upgraded to the latest ones and the errors went away. Here's the jboss datasource file with the ping features enabled:

<datasources> 
    <local-tx-datasource> 
        <jndi-name>crm</jndi-name> 
        <connection-url>jdbc:mysql://localhost:3306/crm</connection-url> 
        <driver-class>com.mysql.jdbc.Driver</driver-class> 
        <user-name>user</user-name> 
        <password>password</password>
        <min-pool-size>5</min-pool-size>
        <max-pool-size>20</max-pool-size>
        <idle-timeout-minutes>4</idle-timeout-minutes> 
        <exception-sorter-class-name>
          com.mysql.jdbc.integration.jboss.ExtendedMysqlExceptionSorter
        </exception-sorter-class-name>
        <valid-connection-checker-class-name>
          com.mysql.jdbc.integration.jboss.MysqlValidConnectionChecker
        </valid-connection-checker-class-name>    
    </local-tx-datasource>
</datasources>

Since my production environment is Jboss, and it had already been a long day, I decided to not worry about figuring out how to do the same in JRun. If anyone out there knows this, please leave a comment!

Lesson 5: Hibernate must be told that it's connection is now being managed
At this point i was able to retrieve data without error, despite connection time outs. When I went to update a record, however, I got a cool new error:
java.sql.SQLException: You cannot commit during a managed transaction!
So, I did some digging and changed my hibernate.cfg.xml to this:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE hibernate-configuration PUBLIC
"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
    <session-factory>
        <property name="connection.datasource">java:crm</property>
        <property name="hibernate.dialect">org.hibernate.dialect.MySQLDialect</property>
   <property name="transaction.factory_class">
       org.hibernate.transaction.JTATransactionFactory
   </property>
   <property name="transaction.manager_lookup_class">
       org.hibernate.transaction.JBossTransactionManagerLookup
   </property>
[...]
    </session-factory>
</hibernate-configuration>

As you can see this is specific to Jboss. There are several other TransactionManagerLookups available that you can read about here

Summary
I spent alot of time on this yesterday, so this blog might seem a bit scarce and a bit rushed. Basically all the configuration files are here for you to use and customize. If you have questions, please ask. Again, this is blogged here for my benefit as well as yours. I would not want to have to redo this from scratch 6 months from now!

Installing FDS with JBoss and IIS

2006-11-23T15:54:00.000-07:00

Here's the initial steps.

Download Jboss and run locally on my dev box. Install Flex Data Services. Unzip the FDS Admin, Flex and Samples files into folders of the same name with a .war extension, and drop these into the C:\Java\Jboss4\server\default\deploy folder - I find unzipping them first let's me work on the files more easily.

Configure mySql support. Drop a copy of the mysql-connector.jar in the C:\Java\Jboss4\server\default\lib folder. Create a datasource xml file called mysql-ds.xml in the C:\Java\Jboss4\server\default\deploy folder, looks like this:

<datasources> 
   <local-tx-datasource> 
      <jndi-name>crm</jndi-name> 
      <connection-url>jdbc:mysql://localhost:3306/crm</connection-url>
      <driver-class>com.mysql.jdbc.Driver</driver-class> 
      <user-name>user</user-name>
      <password>password</password>
   </local-tx-datasource> 
</datasources>

Test the sample apps locally. This included Hibernate apps and all the sample apps. Also, a little flex app I wrote that uses remote calls and javamail to send email notifications.

Once I was confident that Jboss was running all the flex apps flawlessly, the next challenge was figuring out how to get jboss to run as a windows service. I downloaded the zip from this website, ensured that my JAVA_HOME and JBOSS_HOME system variables were set properly, namely without a trailing backslash, then ran "install default" from a command line. It successfully created a JBoss service, which worked great. I was now ready to move my stuff to my IIS Server.

I basically zipped up the jboss and javaservice folders and ftp'ed them up to the server. While it was uploading I installed the Java SDK, mySql, mySqltools and FDS on the server, in the same folders as on my local dev box. I setup my system variables JAVA_HOME and JBOSS_HOME, copied my data over to the mySQL data folder on the server. When the upload was done I unzipped my jboss and javaservice folders into my java folder, again keeping it exactly like my local install configuration. I ran jboss manually and tested all the sample apps. Then I installed it as a service, ran it and tested again.

The next test was hitting the sample applications from the web, outside my firewall. I could get the apps to launch however I was not getting any kind of connection... probably because my ISP blocks most ports by default (/sigh), including the default rtmp ports defined in the services-config.xml. So I went into the configuration files and added my-http to all the channels as the failover second channel. I restarted jboss just to be safe ( I find that hotdeployment on jboss seems to randomly end in out of memory errors!) and the apps did start working.

Now all the samples apps are setup by default to compile on the server - but my goal was to host the flex apps in IIS and not the app server. To test this, I had written another flex application that was set to compile locally in Flexbuilder. The advantage of this approach was that technically the swf files generated should be hostable on any webserver. On my local machine the app ran fine, but copying it up to the server gave me a channel connect error. The culprit here was the services-config.xml. By default the port used by any flex app is the same port the app is being served up on uri="http://{server.name}:{server.port}/{/{context.root}/messagebroker/http". On my machine IIS is running on 80, and jboss is configured to listen on 8800. I hardcoded the config by replacing {server.port} with 8800, recompiled my app and then uploaded it to my IIS folder. And that did the trick!

Getting Effects to play when transitioning back

2006-11-21T08:22:00.000-07:00

Simple little task. Click a button [State:Login], have it fade out, change viewstate, have new panel fade in [State:Register]. Works like a charm. Now, click button on panel, have panel fade out, change viewstate, have button fade back in. Also do the same thing with the WipeUp and WipeDown effect.

Problem. Transitions to the Register state work fine, but transitions back to the original Login State don't. The panel just disappears, no fade, and then the button [State:Login] fades back in nicely. It appears that the controls in the Register State are removed by default before any effects can play visually on them. Using a Sequence and setting the duration of the Panel fade to 10 seconds proves that the effect does play, since it delays the fade in of the button [State:Login], however the control is no longer visible because we're no longer in the Register State.

I realize this is probably confusing... but those of you that have come across this same problem will recognize it. I poured over the LiveDocs but it took just alot of troubleshooting different ideas before I got it working. I've posted a working demo in my Flex Projects column to the right. As usual, right click on the demo to get at the source.

The deal with embedded fonts, buttons and Rotate

2006-11-19T00:58:00.000-07:00

Tonight I struggled with a problem I've faced before, only last time I didn't blog or write down my solution anywhere. I'm on a quest to create a vertical Accordion. Now the fastest way to do this would be to simply apply a rotate effect to it. Here's the code:

private function setAccordion():void{
 var rot:Rotate = new Rotate();
 rot.angleTo = 270;
 rot.duration = 1;
 rot.originX = acc.width/2;  //need it to rotate around it's center
 rot.originY = acc.height/2;  //    -- " --
 rot.target = acc;  //acc is my Accordion control
 rot.play();
}

I figured this part out a while ago. Without the originX and originY properties set, your control can disappear completely, especially if it's x and y are set to 0. I am currently calling this function from Initialize and have not encountered any issues. What I was having a problem with is that my Accordion header text would disappear during the rotation. Now I know that if I embed a font:

<mx:Style>
@font-face {
 src:url("lucidaGrande.swf"); 
 fontFamily: "Lucida Grande";
} 
Application{
        fontFamily: "Lucida Grande"; 
}
</mx:Style>

then the text of my controls should remain intact thoughout the rotation. But this didn't work. I could clearly see that the font in my Accordion Header was not the embedded font, nor was it the default system font. I dropped a button on my application and saw the same behaviour. It wasn't till I added a label that I saw the embedded font appear.

I tried quite a few things... but in the end it turned out that the above Styles only applied to controls that display text with a default fontWeight of Normal. This would explain why the AccordionHeader, which I believe extends Button, and the Button controls didn't render the embedded font. I modified my css:

<mx:Style>
@font-face {
 src:url("lucidaGrande.swf"); 
 fontFamily: "Lucida Grande";
 fontWeight: bold;
} 
@font-face {
 src:url("lucidaGrande.swf"); 
 fontFamily: "Lucida Grande";
 fontWeight: normal;
}  javascript:void(0)
Publish
Application{
    fontFamily: "Lucida Grande";
}
</mx:Style>

and everything worked just beautifully. Of course, now I need to figure out how to rotate the canvas' within the Accordion back to their original position. And figure out how to keep the Accordion in the same place, and why there's a vertical scroll bar now... ack. It never ends...

On a side note, I also stumbled upon a property called
rotation. This is a nice shortcut alternative to the rotate.play, however without the benefit of being able to set originX and originY.

Flex to .Net via Flex Data Services - Part Two

2006-11-17T11:11:00.001-07:00

In part two of this series I will focus on creating java classes that consume .net webservices. Again, I just want to warn the java savvy folks out there that some of the things I cover are just common sense, and that this is geared more towards folks who have never touched java.

To complete this exercise you will need to download and install the following:

The Java JDK

Apache Axis 1.4

Apache Ant

Create a working directory. In this directory create a batch file called run.bat and paste the following text in and save (be sure to remove any linebreaks from the last 3 lines).


set AXIS_HOME=C:\Java\axis-1_4
set ANT_HOME=C:\Java\ant
set JAVA_HOME=C:\java\jdk1.5.0_09\
path = %path%;c:\java\ant\bin;c\java\jkd1.5.0_09\bin;
set CLASSPATH=.;%AXIS_HOME%\lib\axis.jar;%AXIS_HOME%\lib\commons-discovery-0.2.jar;%AXIS_HOME%\lib\commons-logging-1.0.4.jar;%AXIS_HOME%\lib\jaxrpc.jar;%AXIS_HOME%\lib\saaj.jar;%AXIS_HOME%\lib\wsdl4j-1.5.1.jar

This batch file will need to be run each time you open a command prompt. Alternatively, if you are going to be doing this alot, you can add these variables and paths to your Environment Variables.

Next you will need to create another file called build.xml in the same folder, with the following text:


<?xml version="1.0"?>
<!-- Build file for our first application -->
<project name="Ant test project" default="build" basedir=".">
<target name="build" >
 <javac srcdir="." destdir="." debug="true" includes="**/*.java"/>
</target>
</project>

I'm not going to spend a great deal of time explaining the structure of this file or on how Ant works... my brother, a java guru, was kind enough to help out with this. Because I'm not using any Java IDE yet, I have to use Ant to compile my classes for me. This is the simplest build file I could muster, and it basically tells Ant to compile all my java source code into .class files, and put them in the same folder.

Finally we're ready to start playing with the webservice. Open a command prompt window and navigate to your working folder. You will need to have completed and successfully tested thet .net Webservice in Part One before you can continue here. Type in:
java org.apache.axis.wsdl.WSDL2Java http://localhost/WebService1/Service1.asmx?WSDL
and hit enter. You might see some warnings but no errors. Please ensure the URL of the webservice coincides with your own configuration!

If the command worked... you should now see a new folder structure in your working folder, called org/tempuri. Using Explorer, take a look inside the folder and you will see a bunch of .java files. These build the core classes for accessing your .net webservice. The next step is to build a java console application that will use these classes to call a webservice method. Create a text file in the org\tempuri\ folder called GetEmployees.java and paste in the following code:

package org.tempuri;
import java.util.*;
public class GetEmployees{
     public static void main(String [] args){
           try{ 
        Employee[] employees;
 Service1Locator sloc = new Service1Locator();
  Service1Soap sport = sloc.getService1Soap();
 employees = sport.getEmployees();
 System.out.println("Number of Records: " + employees.length);
 List list = Arrays.asList(employees);   
 for (int i=0; i<employees.length; i++ ){
  System.out.println(employees[i].getLastName());
 }
          }
          catch(Exception e){
               System.out.println(e.getMessage());}
   }
}

Save this file, then go back to your command prompt window and type in Ant, hit Enter. Hopefully you will see the words "BUILD SUCCESSFUL". Finally let's test out our little java application. Type in java org.tempuri.GetEmployees. You should see a list of lastnames. If so, then you have successfully completed part 2.

I would like to mention that even doing this a 3rd time myself I still encountered a multitude of errors. If you do have problems, just post it here and I'll help as best I can.

Flex to .Net via Flex Data Services - Part One

2006-11-17T08:02:00.001-07:00

This article, promised a long time ago, half done, has been lying in my documents folder for some time now, just collecting dust. I decided to get back at it and get this badboy blogged. Because of time constraints I'm just going to briefly skim over this first part. Those of you that are familiar with .Net webservices should find most of the code self explanatory.

A few things worthy of mention. I had a heck of time getting the .net webservice to work properly with Java Axis - it took a lot of tweaking the method attributes before it worked. My primary goal was to make sure my webservice was not passing back simply a collection of generic Objects, but rather a collection of say Employee Objects. Employee objects would also then be recognized as such by the Java client, which makes coding on the Java side somewhat easier.

You can find the code HERE. It's a zip file containing the webservice I will be using thoughout this series of articles. I've kept most of the default namespaces and left the code fairly simple. For this project I am using the Employees table in the Northwind databaes and am connecting using a trusted connection.

Please download the code and get the webservice up and running. In the next part I'll show you how to consume the webservice using a Java client.

DataGrid Search with Highlighted Matches

2006-11-13T16:17:00.001-07:00

Today's challenge: Give the user the ability to search a Datagrid and then simply highlight the matching rows in the Datagrid. The first problem was figuring out how to programmatically highlight specific rows in a datagrid, and after some googling I stumbled upon Mike Nimer's blog entry CustomRowColorDataGrid Component. He has basically extended the DataGrid to allow for a way to manipulate row appearance based on data, and he's taken it one step further than other examples by externalizing the function from the custom class. Very cool.

The second part is homegrown. I basically have a Hits Array and I use a cursor to search the DataProvider for matches. Any matched record is added to my Hits array. Then when the CustomRowColorDataGrid calls my rowColorFunction, it checks to see whether the item of the current row is contained within my Hits Array, and passes back the highlighted color.

Here's a link to the sample code. Right click the app to get the source!

Sizing Blues - Using Canvas to keep it under Control

2006-11-09T16:11:00.001-07:00

I find a spend a great deal of time trying to get all the components of my application to play nice with one another. But every now and then, I'll get that nasty vertical or horizontal scroll bar on my application, when I'm quite sure that I've been using percentages for widths and heights throughout.

So then the search begins, from the top layer, the application, I start to give different background colors to different containers, and each time I color a container I assign it a fixed size. Step by step, layer by layer, I will eventually find the component that isn't playing along. Most of the time it's either some form controls where the sum of their sizes is causing the percentage amounts to be ignored, or it's an image that's too big.

One of the more common pitfalls is adding a form container to an HBox or VBox. In this case, if the controls are too wide or too tall, the form will simply push out the rest of the containers in the app. Of course I could constrain the size of the form or the container of the form, however then I risk losing the cool auto-grow features of flex. Yet if the screen size is too small, I'd like the scrollbars to be restricted to the container closest to the source of the error.

What seems to work best, I find, is wrapping controls that risk causing this distortion inside a Canvas control. So, in other words, instead of:
<mx:HBox width="100%"><mx:Form width="100%'>...
I would suggest using:
<mx:HBox width="100%"><mx:Canvas width="100%"><mx:Form width="100%">...
The Canvas will popup scroll bars and contain the distortion, but will also autogrow with the app.

You can find an example of a little app I wrote that demonstrates this concept here. Right click on the app to get the source code.

Channel.Connect.Failed in locally compiled FB App

2006-11-08T15:22:00.000-07:00

Just a quick post today. Recently I've had to switch over to building FDS Flex Projects in Flexbuilder that are set to "compile application locally in Flexbuilder". This is just in case the next update to Flex only covers Flex and not FDS - upgrading my fds projects will be so much easier.

Now for the most part things work fine but the other day a fellow coder asked for my help getting a remote object call (<mx:RemoteObject>) working. The call worked fine if he opened the .mxml file but would fail if he opened either the .html wrapper or the .swf directly. Since the only real difference between those two scenarios is where the compilation occurs, I figured it had to be a compile line argument missing from the Flexbuilder project configuration.

In case anyone else runs into this, just make sure your compiler arguments include the -context-root /contextroot parameter... for example this would be -context-root /flex in http://localhost:8700/flex/myApp/main.html

More information about this can be found in the docs here.

ListCollectionView: Different perspectives on data

2006-11-07T07:23:00.001-07:00

In a recent project one of the challenges was to display data to the user in a variety of different ways with little overhead. In the .net world we used DataViews to create multiple perspectives on the same DataSet. This included sorting and filtering the data without needing multiple copies of the data in memory. When I first started snooping around in Flex I figured there had to be a way to get the same functionality, and soon I found the ListCollectionView.

As a side note, I'll soon start putting running samples up here with source code, just been too lazy to ftp them up to my server. Anyway let's dig in to the code. First we have a handy dandy xml data file:

<?xml version="1.0" encoding="UTF-8"?>
<items>
 <item name="Item 1" quantity="2" price="20.00" size="small"
  rebate="yes" discontinued="yes" />
 <item name="Item 2" quantity="4" price="10.00" size="medium"
  rebate="no" discontinued="yes" />
 <item name="Item 3" quantity="4" price="25.00" size="small"
  rebate="no" discontinued="no"/>
 <item name="Item 4" quantity="1" price="5.00" size="extra-large"
  rebate="no" discontinued="yes" />
 <item name="Item 5" quantity="3" price="30.00" size="small"
  rebate="yes" discontinued="yes" />
 <item name="Item 6" quantity="4" price="17.00" size="medium"
  rebate="no" discontinued="yes" />
 <item name="Item 7" quantity="1" price="12.00" size="extra-large"
  rebate="yes" discontinued="no"/>
 <item name="Item 8" quantity="4" price="22.00" size="extra-large"
  rebate="yes" discontinued="yes" />
</items>

Then we have to load the xml into an arraycollection, however several of the boolean properties will need to be reworked during the data load. Here's what that looks like:

<mx:HTTPService id="itemConn" url="items.xml"
 useProxy="false" result="resultItemHandler(event)"/>
...

private function resultItemHandler(event:ResultEvent):void {
 var source:ArrayCollection =
         itemConn.lastResult.items.item as ArrayCollection;
 var cursor:IViewCursor = source.createCursor();
 var result:ArrayCollection = new ArrayCollection();
 while (!cursor.afterLast){
  var currentObj:Object = cursor.current;
  var cv:String = currentObj["rebate"];
  cv = cv.toUpperCase();
  var newValue:Boolean = false;
  if (cv == "YES" ){
    newValue = true;}
  currentObj["rebate"] = newValue;
  cv = currentObj["discontinued"];
  cv = cv.toUpperCase();
  newValue = false;
  if (cv == "YES" ){
   newValue = true;}
  currentObj["discontinued"] = newValue;
  result.addItem(currentObj);
  cursor.moveNext();
}
itemsIS = result;
}

So now we have an ArrayCollection of itemsIS, let's add a DataGrid and set the dataprovider to this collection:

<mx:DataGrid id="itemDG" dataProvider="{itemsIS}"
 editable="false" width="100%" height="100%"/>

The next step requires a filtered view that will only show discontinued items, so we're going to add a LinkButton

<mx:LinkButton label="Discontinued" click="handleDisc()"/>

and then add the following code to our script section:

[Bindable]
private var itemsDiscontinued:ListCollectionView;
public function handleDisc():void{
itemsDiscontinued = new ListCollectionView(itemsIS);
itemsDiscontinued.filterFunction =
     function ( item:Object):Boolean {return item.discontinued};
itemsDiscontinued.refresh();
itemDG.dataProvider = itemsDiscontinued;}

In this function we are creating a ListCollectionView that wraps our itemsIS collection. Then we create and set the filter function inline, and call a refresh(). Then we set the dataProvider of the datagrid to our ListCollectionView. You could add any number of "views" on the data in this way, and then let the user switch quickly between them.
Here's the code in action

Flash 8, Flex 2, LocalConnection

2006-11-02T00:04:00.000-07:00

Well today wasn't fun. I'm not huge into graphics or Flash for that matter. Sure I've done the occasional Flash movie but generally I stay away from things that are not code heavy. The challenge today was to create a clickable imagemap. Now from what I've been able to gather there's really no simple way to insert an Image in Flex and then draw different clickable regions on it. A good example of this would be a clickable interactive map, something we see very often. This little tutorial is directed at those of you that are as flash clueless as I am.

Ok let's get to it. The quickest way to do this is to create a clickable button in Flash 8 and then add some code to it:

1. Create a new Flash Document.
2. Choose File > Import to Library. This will import an image that will become a button. Locate the image and click Open. The image will be saved in the Library.
3. Find the image in the right Column list. Select the image with the Arrow tool. Drag it to your stage.
4. Right click on image, Choose Convert to Symbol from the popup menu. Name the symbol "button", choose Button from the Behavior list and click OK.
5. Right click on the image. Choose Actions from the pop-up menu.
6. This opens up the action pane. Now this next step is important, MAKE SURE you have Script Assist ON!
7. Paste in this code:

   outgoing_lc  = new LocalConnection();
   outgoing_lc.send("lc_name", "helloFlex")
   delete outgoing_lc;

8. If Script Assist is on you should see it wrap the code into a nice on (release) {}function.
9. File Export - Export Movie .. at bottom of properties dialog box make sure you change it to Access Network Only (this is default for Flex apps and both swf's must be the same or you get a nasty error). Call it test.swf.

That pretty much sums up the Flash part of this little exercise. Once you have your test.swf file, drag that into your Flex project. Then embed it in your mxml application as so:

<mx:SWFLoader source="test.swf" x="10" y="10"/>

Then in the script section add the following code:

private var fromSWF:LocalConnection;   
private function initApp() : void{
 fromSWF = new LocalConnection();
 fromSWF.client = this;
 fromSWF.connect("lc_name");}   
public function helloFlex() : void{
 mx.controls.Alert.show("hello from flash");}

Save and Run. It should work. There's a few far more complex examples of this out there on the web like http://weblogs.macromedia.com/pent/archives/flex_2/index.cfm - scan down the page for "Using ActionScript 2 SWFs with Flex 2", which ultimately helped me figure this out. Again I like to break it down to its simplest form, and build everything else up from there.

My Max Experience in a Nutshell

2006-10-26T18:35:00.000-06:00

Overall it was a worthwhile trip. I had a chance to put faces to a lot of the names I've come across in my Flex related web travels, forums and blogs. I was lucky enough to talk Cairngorm with Stephen Brewster, Flex Data Services with Jeff Vroom, ArrayCollections with Matt Chotin, Flex Builder with Mike Morearty, Flex Compiler with Roger Gonsalez. And many more. I was invited by the Adobe flex team to share my experiences and opinions with Flex 2.0

I got wowed by Alex Uhlman's cinematic effects seminar... truly cool stuff. I got a glimpse into the up and coming ModuleManager, now in 2.01 beta, while attending Roger Gonzales' seminar. I met several bigtime Flexcoder forum posters, and chatted on several occasions with Dimitri, getting his take on some of my application architectures. I got to meet the entire Flex team while scarfing down free cookies and I got to talk Framework with the Adobe Consulting guys out of Scotland (Iteration Two folks).

The venue itself was OK. The Venetian is just too big. There were folks staying at the Imperial Palace that could make it from their room to the conference faster than I could from my room at the Venetian. Plus they use this sickly sweet smelling air freshener that starts to permeate through all your clothing and doesn't get any better. The food at the conference was OK as well, however the stupid xylophone they started banging away on at 7:35am to let people know breakfast was ending at 8:00 is something I could have done without. Plus closing it down at 8am was particularly cruel, considering the open bar function at the Palms on Wednesday night. I think that the Palms venue was enjoyed by many but I'm getting old, so the music inside was too loud to talk and the temperature outside dropped quickly.

The content of the sessions and the people that we came to hear speak are what made this conference worthwhile. The vastness of the conference center, the long escalators, the bizarre schedules, the extremely brief exposure to food and drinks during the day, the questionnable venues were all a huge overkill. My advice for next year? Drop the blue man group 15 minute show and take that money to subsidize the ticket price of bringing my wife to the Palms.

My 2 cents.

Using FDS with Java 5

2006-10-19T23:45:00.000-06:00

I found this little tidbit of information tucked away in my documents folder and I figured I might as well share it.

While attending the flex data services course, we were told that both Flex Builder and FDS2 are 100% compatible with Java 5, even though they both ship with the 1.4.xx JRE. Now I'm still looking to wildly expand my Java knowledge, and every book out there is Java 1.5, not to mention certain tools like the Hibernate code generators for Eclipse, optimize their code for Java 5... so I went home that night and decided I was going to make it happen.

First off, I like my Java folder to be close at hand, so I installed the Java 5 jdk first, disabling the automatic installation of the JRE, because the install seemingly won't let me change the install folder of the JRE. Then I installed the JRE seperately. In the end they were located in C:\Java\JDK.. and C:\Java\JRE... respectively.

Then moving on to Flex Data Services (integrated with JRUN edition). In FDS2 I opened the jvm.config file in C:\fds2\jrun4\bin and changed the line java.home=C:/fds2/UninstallerData/jre to java.home=C:/Java/jdk1.5.0_07. I also moved the JRE in uninstallerdata to my desktop to make sure it wasn't being used. I then started FDS2 and it started up fine. (NOTE: originally I pointed it to the JRE, but loading my test .JSP page would fail because it couldn't find com/sun/tools/javac/Main).

Incidentally I also added the JAVA_HOME environment variable to my XP machine and pointed it to the JDK. This takes care of Flex Builder and the Flex SDK as well. (I tested this further in fds and it appears that the jvm.config setting overrides the java_home variable - so if you want to use the java_home for fds2, blank out the value in the jvm.config).

Finally, when you start up the Adobe Flex 2 Command Prompt, it tells you what version of Java it's using. I haven't had any issues at all since upgrading to Java 5. Looks like the instructor was right after all.

Asynchronicity Blues - managing multiple dataservice calls

2006-10-19T23:13:00.000-06:00

A while ago I once again came up face to face with the mean and hungry asynchronicity beast that lives within Flex. All I was trying to do was create and save a Contact record programmaticly. The problem was, however, that a Contact has references to ContactType, Country and Division. Simplified, I was trying do the following:

countryService.fill(countries);
contactTypeService.fill(contactTypes);
divisionService.fill(divisions);
contact.country = countries.getItemAt(0); //default
contact.contactType = contactTypes.getItemAt(0); //default
contact.division = divisions.getItemAt(0); //default
contactService.createItem(contact);

Of course, most of the time this would fail because the collections would not yet be filled, being asynchronous in nature. So I had to find a workaround. I created a dataTasks collection and then added a dataTask prior to each fill to the collection. On the result event of each fill I would find my dataTask and remove it from the collection. I added an EventListener to the CHANGE event of my dataTasks collection and when the collection length was back to 0, I would remove the EventListener and create my Contact. This worked fine, however it required alot more coding. Here's what it looked like:

//prior to fill
if(contactTypes.length == 0){
dataTask = new DataTask("ContactTypes",false);
model.dataTasks.addItem(dataTask);}
contactTypeService.fill(contactTypes, "flex:hql", "from ContactType");
//onResult Event
if(dataTask){ 
model.dataTasks.removeItemAt(model.dataTasks.getItemIndex(dataTask));
dataTask = null;}
//add Eventlistener to dataTasks 
model.dataTasks.addEventListener(CollectionEvent.COLLECTION_CHANGE,completeContact);
...
private function completeContact(evt:CollectionEvent = null):void{
if(model.dataTasks.length == 0) {
model.dataTasks.removeEventListener
(CollectionEvent.COLLECTION_CHANGE,completeContact);
var contact:Contact = new Contact();
...

Again, I posted on Flexcoders as to whether or not this was the BEST way to do this, and again Mr. Vroom responded. He wrote that even though the calls on the client are made ASYNCHRONOUSLY, the server handles the requests in SYNCHRONOUS order. In other words I only have to listen for the result event of the LAST fill called. When that result is returned to the client, barring any faults from the previous fills, we can assume that all collections have been filled. Yay! Less Code!

Passing Objects on a dataservice fill()

2006-10-18T13:18:00.000-06:00

A couple of weeks ago I ran into an interesting issue regarding the passing of a value object as one of the elements in my FillParameters array. Something like this:

dataservice.fill(employees, CompanyVO)

The fill worked fine everytime, however, if I went and added a new employee using:

dataservice.createItem(employee);dataservice.commit();

the collection on my client would not update to show the new employee. Sure I could add the employee by doing an employees.add(employee), and yes, my collection would be updated. However, another employees collection on another client viewing the same records would not.

I turned up the logging level to debug and watched how Flex Data Services was handling the request. It seemed, after a bit of extensive testing, that it did not recognize the CompanyVO object as being the same one across multiple calls. The debugger would even state that no client collections existed with this fill configuration, and therefore none would receive a refresh.

I thought perhaps my CompanyVO.as was perhaps not mapping thru to my CompanyVO.class, so I put my own toString() method in with a quick little output line. Sure enough, FDS was recognizing the object passed as a CompanyVO.class object.

Eventually I gave up. I had played with my java class, trying to override various methods, implementing icomparable, etc. Nothing.

Then Jeff Vroom posted a suggestion on flexcoders. To override the (built-in) in uid property on the Object. First I added some code to have uid equal the companyid, saved my flex project and ran it again:

Company.as
public var uid:String = "";
...
company.uid = company.companyid;

No luck. Then I added the uid property to my java class as well:

private String uid;
public void setUid(String uid)
{ this.uid = uid;}
public String getUid()
{ return this.uid;}

Restarted FDS and ran my flex project again. Problem solved. Here's the steps to reproduce this problem using the crm sample that comes with FDS(as posted by me in the Adobe FDS Forum):

1) in companyapp.mxml, change the fill line in the companyChange function to read:
dsEmployee.fill(employees, company) //change from companyId int to company VO

2) in the crm sample application, addEmployee function, replace this line:
employees.addItem(employee);
with this:
dsEmployee.createItem(employee);
(you don't have to do this if you keep 2 instances of the app running)

3) in the crm.samples.EmployeeAssembler fill method, change the fill by commenting out everything after the line that says return dao.GetEmployees(); and replace them with these lines:
Company cp = (Company) fillParameters.get(0);
return dao.findEmployeesByCompany(cp.getCompanyId());

4) in the crm.samples.EmployeeAssembler createItem method, replace the second dtx.refreshFill with the following line:
dtx.refreshFill("crm.employee", Arrays.asList( new Object[] {newEmployee.getCompany()}));

Blog Facelift

2006-10-04T00:06:00.000-06:00

As much as like a black background with neon writing, I was getting headaches reading my own material. So I upgraded to the new blogger beta and replaced my template with something a little more conventional. Enjoy.

asp.net C# data webservice for Flex

2006-10-02T15:37:00.000-06:00

This is kinda the next evolutionary step from my previous blog. In this example I demonstrate how to get an array of records from .net to flex. Again, I have simplified this for the purpose of this blog. In the asp.net webservice, I would normally retrieve records from the database and then iterate thru the dataset to build my array, while here in this example I have just populated the array manually.

C# Webservice:

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Diagnostics;
using System.Web;
using System.Web.Services;
using System.Xml.Serialization;

namespace Director
{
 public class MemberService : System.Web.Services.WebService
 {
  public MemberService() { InitializeComponent(); }
  private IContainer components = null;    
  private void InitializeComponent() {}
  protected override void Dispose( bool disposing )  {
   if(disposing && components != null) {
    components.Dispose();}
   base.Dispose(disposing); 
  }
  
  [WebMethod]
  [XmlInclude(typeof(Member))]
  public Member[] getMembers()
  {
   ArrayList al = new ArrayList();
   Member mem = new Member(0,"bob","bsmith","password1",
     "bob@abc.com","Initiate",false,DateTime.Now);   
   al.Add(mem);
   Member mem1 = new Member(0,"jim","jsmith","password2",
     "jim@abc.com","Member",false,DateTime.Now);   
   al.Add(mem1);
   Member mem2 = new Member(0,"ed","esmith","password3",
     "ed@abc.com","Officer",false,DateTime.Now);   
   al.Add(mem2);
   Member mem3 = new Member(0,"neil","nsmith","password4",
     "neil@abc.com","Guest",false,DateTime.Now);   
   al.Add(mem3);
   Member[] outArray = (Member[])al.ToArray(typeof(Member));
   return outArray;
  }
 }

 [Serializable]
 public class Member
 {
  public int memberid;
  public String name;
  public string username;
  public string password;
  public string email;
  public string comments;
  public bool disabled;
  public DateTime created;

  public Member(int _memberid, string _name, 
string _username, string _password, 
string _email, string _comments,
   bool _disabled, DateTime _created)
  {
   memberid = _memberid;
   name = _name;
   username = _username;
   password = _password;
   email  = _email;
   comments = _comments;
   disabled = _disabled;
   created = _created;
  }
  public Member(){}
 }
}

In Flex, the Member.as file:

package com.abc.ws
{
 [Managed]
 [RemoteClass(alias="com.abc.ws.Member")]
 public class Member
 {
  public var memberid:int;
  public var name:String;
  public var username:String;
  public var email:String;
  public var password:String;
  public var comments:String;
  public var disabled:Boolean;
  public var created:Date;
  
  public function Member(obj:Object = null)
  {
      if (obj != null)
      {
          this.memberid = obj.memberid;
          this.name = obj.name;
          this.comments = obj.comments;
          this.username = obj.username;
          this.email = obj.email;
          this.disabled = obj.disabled;
          this.created = obj.created;
          this.password = obj.password;
      }   
  }  
 }
}

In Flex, the application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import com.abc.ws.Member;
   import mx.collections.ArrayCollection;

   [Bindable]
   private var myMembers:ArrayCollection;
   
   private function resultHandler(event:ResultEvent):void   {
          myMembers = event.result as ArrayCollection;
          for (var i:int=0; i<myMembers.length; i++)          {
              var currentMember:Member = new Member();
              currentMember = new Member(myMembers.getItemAt(i));
              myMembers.setItemAt(currentMember, i);
          }
   } 
  ]]>
 </mx:Script> 
 <mx:WebService id="myService"
  wsdl="http://localhost/Director/MemberService.asmx?wsdl"
  load="myService.getMembers()"
  showBusyCursor="true"
  result="resultHandler(event)"/>

 <mx:DataGrid dataProvider="{myMembers}"/>  
</mx:Application>

asp.net c# webservice consumed by flex

2006-10-02T15:13:00.000-06:00

Someone on the flexcoders asked to be provided with a simple example of flex consuming an asp.net webservice. I know this might be VERY simple, but it proves functionality.

ASP.NET Webservice in C#

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Diagnostics;
using System.Web;
using System.Web.Services;

namespace Director
{
 public class Hello : System.Web.Services.WebService
 {
  public Hello()
  {   InitializeComponent();  }

  #region Component Designer generated code
  
  private IContainer components = null;    
  private void InitializeComponent() {  }

  protected override void Dispose( bool disposing )  {
   if(disposing && components != null)
   {
    components.Dispose();
   }
   base.Dispose(disposing);  
  }
  #endregion

  [WebMethod]
  public string HelloWorld(string variable)  {
   return "Hello " + variable;
  }
 }
}

Flex Application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:WebService id="myService"
  wsdl="http://localhost/Director/Hello.asmx?WSDL"
  load="myService.HelloWorld('Peter')"
  showBusyCursor="true"/>
 
 <mx:Label text="{myService.HelloWorld.lastResult}"/>
</mx:Application>

If you're accessing a webservice on another machine or domain, don't forget the crossdomain.xml file in the IIS root:

<?xml version="1.0"?>
<!-- http://www.foo.com/crossdomain.xml -->
<cross-domain-policy>
    <allow-access-from domain="*"/>
</cross-domain-policy>

Flex Custom Combobox Component

2006-10-02T12:24:00.000-06:00

We needed a country combobox that used an array collection as its dataprovider, however would accept a text value (i.e. "Canada") and select the right item based on the text. We extended the combobox control and embedded our countries array collection inside the control for the purpose of this blog entry. Ultimately we will be using an array collection returned by a dataservice.

Several challenges:

searching a specific property of all objects in the arraycollection
binding the selectedText property of our control to a function
setting the default value of the combobox to nothing

I asked around and it was recommended that I loop through the underlying array of the arraycollection. That sounded very microsoft like and I figured there had to be a better way. It was also suggested I add a dummy record to my countries collection with a "Select Country" string and make that element 0. Again, though this would work, it seemed very ms-ugly.

I struggled with this for quite some time but finally got it working. This custom combobox exposes a property called selectedText. I use ChangeWatcher to keep an eye on the property and trigger a function (setCountry) when it changes. I use a sort on the array collection and the use a cursor on the sort to do my searching... much nicer than a nasty loop. I discovered the handy little "prompt" property which I set to "Select Country".

I'll spare you the gory details of my adventure. Here's the final product:

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initApp()"
xmlns:util="com.atrexis.util.*" change="selectedText=this.text">
 <mx:ArrayCollection id="countries">
            <mx:Object code="BDA" description="Bermuda"/>
            <mx:Object code="CAN" description="Canada"/>
            <mx:Object code="USA" description="United States"/>
            <mx:Object code="UK" description="United Kingdom"/>          
    </mx:ArrayCollection>
 <mx:Script>
 <![CDATA[
  import mx.events.FlexEvent;
  import mx.binding.utils.ChangeWatcher;
  import mx.collections.*
  import mx.collections.ArrayCollection;
 
  [Bindable]
  public var selectedText:String;
  private var countryCursor:IViewCursor;
   
  private function initApp():void{  
   mx.binding.utils.ChangeWatcher.watch(this,"selectedText",setCountry);
   var sort :Sort = new Sort();
   sort.fields = [ new SortField( "description", false ) ];
   countries.sort = sort;
   countries.refresh();
   countryCursor = countries.createCursor();
   dataProvider=countries;
   labelField="description";
   setCountry();
   prompt = "Select Country";
  } 
  
  private function setCountry(event:Event = null):void{      
   if (selectedText != null && selectedText != "") {
    countryCursor.findFirst({description:selectedText});
    this.selectedItem=countryCursor.current;
   }
  }  
  ]]>
 </mx:Script>
</mx:ComboBox>

Things to watch out for:

the function called by changewatcher must take an event argument
remember to update the selectedText property on Change event of combobox

Simplified Binding Example for Flex 2

2006-09-29T22:12:00.000-06:00

Finally figured out a way to get my code to render properly in my blog. There seems to be some confusion on how to communicate between components. This example kinda covers most of the basics.

Child Component:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Metadata>
   [Event(name="childEvent", type="flash.events.Event")]
</mx:Metadata>
<mx:Script>
   <![CDATA[
       [Bindable]
       public var testLabelText:String;     
       private function clickHandler():void        {
           var eventObj:Event = new
               Event("childEvent");
           dispatchEvent(eventObj);        }
   ]]>
</mx:Script>
<mx:Binding source="test.text" destination="testLabelText" />
   <mx:TextInput id="test" text="{testLabelText}"/>
   <mx:Button x="167" y="0" label="Button" click="clickHandler()"/>  
</mx:Canvas>

Parent Application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">  
   <ns1:Child x="388" y="105" id="childLabel" testLabelText="{parentLabel.text}"
       childEvent="status.text='child button clicked'"/>
   <mx:TextInput x="388" y="131" text="{childLabel.testLabelText}" id="parentLabel"/>
   <mx:Label x="388" y="161" id="status"/>  
</mx:Application>

FDS2: default refreshFill() behaviour

2006-09-28T18:32:00.001-06:00

To test this I used the CRM sample that ships with FDS.

Problem: An arraycollection that had previously been fill()'ed using query parameters would not update if CreateItem() was called. If no query parameters were used it worked fine. UpdateItem() and DeleteItem() worked fine as well.

Solution: If you DO NOT implement your own refreshFill() in your custom Assembler class, then the default behavior of refreshFill() might be the cause of the problem.

The refreshFill() method proactively queries on whether or not data needs to be pushed out to clients. It checks to see if the newly created record would fall within the query parameters of the LAST Fill() requested.

Example: Let's say you retrieve all Roles for System ID 12 - this creates a unique fill situation for your flex app/session. DataService1.fill(roles, "12")
Let's say Jim, another user, is currently viewing all Roles for System ID 8 - he too has his own unique fill situation. DataService1.fill(roles,"8")

Now you go and add a new Role for System ID 8. Here's what happens:
FDS recognizes the fact that you are not currently looking at a list that would include this record... so you get no update (DO_NOT_EXECUTE_FILL)
FDS also 'knows' that Jim is looking at a list that should be updated, so it pushes out an update to him, EXECUTE_FILL

This keeps updates pushed out to a minimum I guess.

To test: in CRM project modify the CompanyAssembler by commenting out the RefreshFill() method completely. Run CompanyApp.mxml in debug mode with a breakpoint in companyResultHandler(). Change industry to filter by health care, add a new record with a different industry. When breakpoint kicks in, check the companies arraycollection... you should NOT see your recently added company.

Creating & Using localized flex libraries with Flexbuilder

2006-09-27T01:40:00.000-06:00

Part One - Create SWC Library

1. Create a stand alone folder called Resources in your flexbuilder projects folder. Subsequently create subfolders in Resources for each locale (i.e. en_US, fr_FR). Here you will store your resource files: en_US\Main.properties, fr_FR\Main.properties, etc.
2. Start Flexbuilder. Create a flex library project called testlib. Add a source path (Project>>> Properties >>> Flex Library Build Path >>> Source Path >>> Add Folder) ${DOCUMENTS}\Resources\{locale}
3. Add a new folder to project called locale and link it (File >> New >>> Folder. At bottom click Advanced >> check "Link to Folder in the file System") to ${DOCUMENTS}\Resources
4. Create a class (code below) and then make sure it's checked in Project>>> Properties >>> Flex Library Build Path >>> Classes.
5. Create two folders under the bin folder called en_US and fr_FR
6. Change the compile arguments (Project >>> Properties >>> Flex Library Compiler >>> Additional Compiler Arguments.) to -locale fr_FR -include-resource-bundles Main
7. Hit OK then copy the compiled swc file to the fr_FR subfolder
8. Change the compile arguments to -locale en_US -include-resource-bundles Main
9. Hit OK then copied the compiled swc file to the en_US subfolder
=====================================
package com.abc.shared
{
import mx.resources.ResourceBundle;
[Bindable]
public class Company
{
public var NAME_MONKEY:String;
[ResourceBundle('Main')]
private static var bundle:ResourceBundle;
public function Company(){
NAME_MONKEY = bundle.getString("monkey");
}
}
}
=======================================
en_US\Main.properties contains:
monkey=Billy
=======================================
fr_FR\Main.properties contains:
monkey=Pierre
=======================================
Part Two - Add Library to Simple Flex App
1. Created a new Basic flex application
2. Added ${DOCUMENTS}\testlib\bin\{locale}\testlib.swc to the projects Library Path
3. Added some code to my application.mxml file (highlights below)
4. Compiled and ran it (default would be en_US)
5. Changed the project compiler argument to -locale fr_FR
6. Compiled and ran it again
7. In each case the application displayed the correct string
=======================================
import com.abc.shared.Company;
[Bindable]
private var company:Company = new Company();
...
mx:Label text="{company.NAME_MONKEY}"
=======================================
Part Three - add Library to a localized Flex App
1. In this case the application and the library projects both point to the same resource folder. I basically repeated steps 2 and 3 of part 1 for my Basic Flex App Project, using the same folders and files.
2. I then added another string to the Main.properties file(s), namely hello=Bonjour and hello=Good Day
3. In my application I put up two labels, one pulling directly from the resource file, the other referencing the class in the swc library and displaying company.NAME_MONKEY.
4. I added the path ${DOCUMENTS}\testlib\bin\en_US\testlib.swc to project library path of the project as I did in step 2 of part 2. (notice i did not use {locale}.
5. When i ran the app i was surprised to discover that even if I ran it with the compile argument of -local fr_FR it still pulled the correct string out of the properties file (pierre), even tho i was pointing only to the en_US version of the swc!
=======================================
mx:Label text="@Resource(key='hello', bundle='Main')"
mx:Label text="{company.NAME_MONKEY}"
=======================================
Conclusion
After spending a good chunk of time I finally got Flexbuilder to play along. Here's some things to watch out for.
1. If you change the output path of the flex library to bin/en_US instead of to bin and then manually copying it to en_US, that works. If however you then change it for the fr_FR version, Flexbuilder will nuke the previous bin/en_US folder and the files within
2. If you create your Main.properties and locale folders directly in the project, you get a duplicate symbol error. By placing the files outside the project and then adding a source path reference this problem goes away. However, Flexbuilder does not handle {locale} on the fly, so you will needed a linked folder to access the files during development.
3. Occasionally you might get another error stating it can't load or find main_properties. I find going into project properties and 'altering' the compiler arguements forces a recompile and makes this error go away.
4. As per my previous blog, if you plan on using foreign characters, make sure the text encoding of the resource files is set to UTF-8.

That concludes my locale adventure thru the world of flexbuilder.

ResourceBundle files in localized Flex apps

2006-09-26T17:29:00.000-06:00

Problem: You are creating a flex app in flexbuilder that will be available in two languages, English and French.

You create the following:
\locale\en_US\Flexapp.properties
\locale\fr_FR\Flexapp.properties

You throw a string in each:
after=after
after=après

You compile the application and it defaults to english and comes up fine
You change the compiler arguments in project properties to -locale fr_FR and run it and instead of an è you get either a blank or a square

Solution: The text encoding type of the Flexapp.properties file in flexbuilder defaults to ISO-8859-I. Cut out all the text in the file, save it. Go to the properites of the file and change the encoding to UTF-8. Then paste your text back in and save. Now when you compile and run the letters should come up fine.

Default generator class in Hibernate Code Generator

2006-09-26T12:03:00.000-06:00

I am using mysql, hibernate tools and eclipse 3.2.

I am generating all my java and xml code using the wizard.

The default class generator is "assigned".. for mysql and flex data services, this doesn't work so well... we need "native"

.. one way to work around this is to create a reveng.xml file where you explicitely list each table and then add a primary_key attribute that specifies the generator class. The other way is to manually edit all the hbm.xml files after each run of the wizard. Both not great.

Instead... change the default class generator for your project.

Here's how:

Add the hibernate-tools.jar to your eclipse java project.

Create the following class in your java project (i used the default package):

import org.hibernate.cfg.reveng.*;
public class MyRevEngStrategy extends DefaultReverseEngineeringStrategy {
public String getTableIdentifierStrategyName(org.hibernate.cfg.reveng.TableIdentifier t) {return "native"; }
}

in your Hibernate Code Generator, modify the reveng.strategy.
in the popup textbox type in MyRevEngStrategy, it should find it.

Close and run. Worked for me.

Flex to .Net via Flex Data Services - it is Possible!

2006-09-06T00:55:00.000-06:00

When I first looked at Flex Data Services, I was a little disappointed to find that there was no built-in way to interface with .Net. Sure you can consume webservices directly from a Flex application however, you don't get the added conflict resolution, data push to client, etc stuff that comes with FDS. After toying around for a while I figured it had to be possible to access webservices through FDS, and eventually I did get it working.

Now there's no way I can cover all this in one blog entry. So I am going to try and split it up nicely:

Part one will only deal with coding the webservice in .Net in such a way that makes it interop-friendly. I will build a service that provides the basic CRUD and list functionality for a contacts table hosted in SQL server.

Part two will cover Apache Axis and the wsdl2java tool, and we will look at what code gets generated and hurdles other .Net folks might run into. Once we have our basic java console application up and running, and successfully consuming the .Net webservice, we'll move on to part 3.

In part three I will build a custom Assembler (extending the flex.data.assemblers.AbstractAssembler class. Then we'll create a destination for our new .Net webservice Assembler class.

In the fourth and final part of the series, I will build a Flex application with full list, modify, delete and add functionality, and takes advantage of the data management features of Flex Data Services 2.

Why Hibernate with Flex Data Services 2?

2006-09-06T00:24:00.000-06:00

FDS 2 does not come without a learning curve, especially for those of us new to the Java world. I've been trying to find a way to speed things up, and at first I kind of ignored the whole Hibernate side of the equation. But eventually I got curious and I have to say, after tinkering around extensively... I'm pretty excited.

Hibernate has some pretty cool plugin tools for Eclipse/Flexbuilder . With these tools you can reverse-engineer all your hibernate xml mapping files and even the java object classes. What that means is that you can just focus on getting your db design done, and the tools will do the rest. Flex Data Services comes with the HibernateAssembler class, and with it they've done all the java coding for you. At least enough to get you started. What's even better is that in the fds2\resources\camples\assemblers, Adobe has thrown in the source code, so down the line you can modify and enhance it as needed.

In the end, all you need is a database with an Employee table, the hibernate.cfg.xml, the samples/crm/Employee.java and the samples/crm/Employee.hbm.xml files for the HibernateAssembler to work. Create the destinations in your data-management-config.xml and away you go - no Java required!

Pointing Hibernate to MySql

2006-09-06T00:13:00.000-06:00

Continuing on from my last post, we'll now try getting the crm sampel working with MySQL and Hibernate. Again, I'm going to try and keep this simple. Here's the steps.

1. Recreate the db in mysql. If you look in samples\web-inf\db\crm you will find a file called crm.script which has the sql statements you will need.

2. Make sure you have the mysql-jdbc-connector libraries. Put the .jar file in the samples\web-inf\lib folder.

3. Edit the HsqlServlet.java file in samples\web-inf\src\samples\crm as follows:

change the connection.driver_class to com.mysql.jdbc.Driver
change the connection.url to jdbc:mysql://127.0.0.1:3306/crm (assuming defaults)
change the connection.username and connection.password
change the dialect to org.hibernate.dialect.MySQLDialect
comment out the hbm2ddl.auto line

4. Compile the HsqlServlet.java file into samples\web-inf\classes.

5. Run FDS. Keep an eye out on the console for any errors.

6. Open the companyapp.mxml in a browser.

Flex Data Services - CRM Sample using Hibernate

2006-09-05T23:47:00.000-06:00

I've played around a great deal with the sample applications that shipped with Flex Data Services. In particular I was intrigued in getting the CRM example to work with Hibernate. I'm not going to get too deep into the particulars. Here's just a good overview of what needed to be done or what purpose was served, by file.

samples\web-inf\web.xml
In this file there's a section of code that needs to be uncommented. This enables a servlet that runs when jrun boots up, which creates a file called hibernate.cfg.xml and puts it in the samples\web-inf\classes\samples folder.

samples\web-inf\classes\samples\hibernate.cfg.xml
Once you uncomment the web.xml and start up FDS once, this file should exist. In here you will see some basic configuration stuff that basically creates a jdbc connection to an hsqldb database (a java sql engine that runs within the context of the app server). Also you will not two mapping files, explained next.

samples\web-inf\classes\samples\crm\employee.hbm.xml
samples\web-inf\classes\samples\crm\company.hbm.xml
These two files serve to map sql tables & columns to java classes and properties, found in samples.crm.Employee and samples.crm.Company, respectively. You can find the source code for these files (if you're new to the java world like me) in samples\web-inf\src\(...)

samples\web-inf\flex\data-management-config.xml
In this file there are 2 sections that need to be uncommented out. You can leave the other destinations in place and just uncomment the destinations crm.employee.hibernate and crm.company.hibernate. Once you've saved these changes it's a good idea to restart FDS.

samples\dataservice\crm\companyapp.mxml
First go ahead and launch this in a browser, make sure FDS is running. The default address would be http://localhost:8700/samples/dataservice/crm/companyapp.mxml and make sure everything is still working fine. At this point the application is still using the custom company and employee assembler classes, not hibernate. If everything works fine, go ahead and edit the file. You'll need to find all the comments that pertain to Hibernate and then comment out the line preceding it, while uncommenting the line the line that follows, as per the comment instructions. Save your changes.

Now go ahead and reload the companyapp.mxml page in the browser. Keep the FDS console open and if everything went well, you can watch as hibernate generates and logs query statements.

My first blog

2006-08-31T23:29:00.000-06:00

I've spent an entire month now immersing myself in the world of java, app servers, flex, actionscript, webservices. Coming from the rather simple .net world, it's been quite a month. I still think I'm only scratching the surface, and even then, a year from now, I'll probably be no more than a quarter of an inch deeper than I am today.

I don't know if anyone will ever read this stuff. I am going to use this blog to record my notes, for my own reference and hopefully to help others. I am building a huge app in flex, after a year of architecting the whole thing in .net. I was gonna use it all, MSMQ, .Net Remoting, Winforms, Webservices, SQL Server... it was complicated and beautiful. And now, scrapped. The unbearable reality is that if the app was to look good, third party tools would be required, and after years of dealing with Infragistics... well.

Of course my transformation has not gone without some clinging to what I know best. My first project will be to build a flex Assembler class that will use WSDL generated java classes using the Axis tools to allow data managed access via Flex Data Services 2 to any webservice I want, in this case a C# Asp.net webservice running on IIS.

More to come...