Sunday, December 31, 2006

Setting up Db2 v9 as a Coldfusion Datasource

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:

  1. 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.
  2. 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!
  3. Restart Coldfusion MX. Login to CF Admin. Go to Datasources.
  4. 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

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.

Thursday, December 07, 2006

Autosizing Datagrid with Horizontal Scrolling

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.

Tuesday, December 05, 2006

Many-to-Many using FDS & Hibernate

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!

Tuesday, November 28, 2006

How to keep db connections alive in FDS/Hibernate

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!

Thursday, November 23, 2006

Installing FDS with JBoss and IIS

Here's the initial steps.


  1. 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.

  2. 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>

  3. 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!

Tuesday, November 21, 2006

Getting Effects to play when transitioning back

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.

Sunday, November 19, 2006

The deal with embedded fonts, buttons and Rotate

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.

Friday, November 17, 2006

Flex to .Net via Flex Data Services - Part Two

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:


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

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.

Monday, November 13, 2006

DataGrid Search with Highlighted Matches

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!

Thursday, November 09, 2006

Sizing Blues - Using Canvas to keep it under Control

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.

Wednesday, November 08, 2006

Channel.Connect.Failed in locally compiled FB App

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.

Tuesday, November 07, 2006

ListCollectionView: Different perspectives on data

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

Thursday, November 02, 2006

Flash 8, Flex 2, LocalConnection

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.

Thursday, October 26, 2006

My Max Experience in a Nutshell

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.

Thursday, October 19, 2006

Using FDS with Java 5

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

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!

Wednesday, October 18, 2006

Passing Objects on a dataservice fill()

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()}));

Wednesday, October 04, 2006

Blog Facelift

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.

Monday, October 02, 2006

asp.net C# data webservice for Flex

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

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

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

Friday, September 29, 2006

Simplified Binding Example for Flex 2

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>

Thursday, September 28, 2006

FDS2: default refreshFill() behaviour

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.

Wednesday, September 27, 2006

Creating & Using localized flex libraries with Flexbuilder

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.

Tuesday, September 26, 2006

ResourceBundle files in localized Flex apps

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

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.

Wednesday, September 06, 2006

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

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?

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

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.

Tuesday, September 05, 2006

Flex Data Services - CRM Sample using Hibernate

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.

Thursday, August 31, 2006

My first blog

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...