Scroll Through Tabs in Flex with Mouse Wheel

I blogged the other day about an Office 2007 feature for the tabs that are apart of the ribbon in that you can use your scroll wheel to change the selected tab. I thought this was actually pretty cool.

I decided to implement it in Flex because I figure it would be extremely easy... and it was! Took about 15 minutes total. However, it seems it is having issue when playing without a breakpoint in the code. Just playing through normally, when I scroll up or down, it actually seems to skip a tab when going through them. Yet, if I put a breakpoint at the beginning of the event handler and play through it that way, it goes to the next tab as it should.

Here is a demo of what I have done. Source is included...

http://www.kylehayes.info/tabby/TabThumbWheel.html

Transfer and Flex: Part 1

I started a project a couple of months ago that has and is going to continually have a very complex and growing architecture. The technology stack in place is Flex 3, Cairngorm 2.2, ColdFusion 8, ColdSpring, Transfer, and SQL Server 2005. This is my first Flex application that will be using Transfer to handle the database abstraction layer. Normally, I would use Brian Rinadi's Illudium PU-36 CFCGenerator to handle the initial generation of all my CFCs and from there would either modify the XSLT files or simply append to the generated CFCs as I saw fit.

The problem with this type of approach lies namely in the early stages of application design and development (especially since I traditionally don't go through a line of specs working on a solo project) when the database is going through many changes. Each time you make a change to the database, you either have to regenerate your files which will overwrite any changes you made, or you have to manually hand-code the database changes. On top of this, it doesn't take care of any of your table relationships as per a 3rd normal form database structure. You then have to design your own home-brew setup of such a system if you require it, or simply provide functions that return the structs/VOs to Flex as you need them by manually building up the hierarchical tree of the model.

For this project, I knew from the beginning that the database schema was going to be pretty complex and that it was also going to be going through changes as I developed and tried things out. I knew that I wanted to get Transfer to work with Flex. I had tried this once in the past and failed because I was designing Flex applications differently at that time. I now know better to design with a service layer in mind.

Although, it is not that easy either. There are actually quite a few steps involved when using Transfer to interact with your database and to return the right kind of objects back to Flex. Also, let me state, that I am talking about this in terms of using the AMF protocol with RemoteObjects between ColdFusion and Flex so that datatypes are appropriately and quickly translated.

This post will first introduce the Transfer ORM framework and why it is not a basic task to integrate it into your ColdFusion / Flex application. In the next part of this article, I will discuss the technical details of getting this all to work.

Transfer ORM framework

Visit project website

ORM, or Object-Relational Mapping, in simplistic terms is abstracting a representation of your data inside a database as objects in your application. An ORM framework does all of this abstraction semi-automatically by means of introspection to your database and generating the necessary files, or by a configuration file that describes the datatypes and the relationships of the tables to each other. Transfer falls into the latter category.

While some say that a fault of Transfer (esp when compared to a competing framework, Reactor) is that you have to write the table structure and it's relationships manually in an XML file. Whereas Reactor is a framework that reads the database metadata. At first, I thought this same thing and after working with Transfer later, have found it much better to be in control and to define the relationships myself. With this method I really feel like I have a much better understanding of what Transfer is creating when it generates it's objects. Plus when debugging your code it is easier to see what columns/fields are causing issues in your relationships.

The benefits of using Transfer over generating the CFCs yourself using tools like Brian Rinaldi's Illudium PU-36 CFCGenerator is that once you have defined your XML file, the actual creation of the CFCs is completely automatic. To give you an example, let's say you have a table in your database called Employee that has the following fields: employeeId, firstName, lastName, email. Once you have instantiated the TransferFactory, you simply call the object the you would any other VO, only you haven't previously written it:

<cfset firstName = variables.Transfer.get('employee', 1).getFirstName() />

Transfer.get() retrieves a specific Transfer object (which is defined in your Transfer XML) with a Primary Key ID of "1". Then it simply calls the generated "getFirstName()" method on that object and returns it to you. That's it! It is really simple.

This is hardly even skimming the surface of what Transfer does for you. Let's say that an employee can have multiple phone numbers on file that you store in a separate table called EmployeePhone. This is of course a One-to-Many relationship. Once you have simply defined this relationship in your Transfer XML you would then access the phone numbers this way:

<cfset emp = variables.Transfer.get('employee', 1) />
<cfset empPhoneArray = emp.getPhoneArray() />

From there you can simply loop through that array which in turn provides different EmployeePhone Transfer objects. You can configure in your XML whether that relationship will return an array or query. Notice that I mentioned it would return an array of Transfer Objects. This is where it gets tricky. The default return type of any relational object is typed as a Transfer Object. This is instantiated from the generic Transfer Object interface in the framework and is what all the relational object inherit from. However, you can change this by applying a decorator to any of your objects which will change the type of the object to the decorator path. The decorator will also allow you to add methods as well as change existing ones that the Transfer Object defines.

As you can see, Transfer can be very very powerful in your applications. It doesn't require very much setup time and configuration. As with most advanced concepts like this, it takes practice to really understand the underlying methodologies and to use them wisely in your application. Also, do not think that Transfer is simply a glorified code generator. Mark Mandel has spent a lot of time utilizing ColdFusion's unique strengths to truly make this a fast and effecient framework to keep your application at top speed.

That's it for now. Next time I will actually get more technical about the configuration file and start discussing how to prepare your CFC middle-tier for Flex consumption.

Related reading:

Why Flex and AIR?

My first 30onair video:

Remotely Connect Your Flex/AIR App Without Services-Config

Many developers have the question of how to define the infamous connections to the various AMF gateways to which they need to communicate through to their server-side code. The process, while usually handled through the famed services-config.xml file, can actually be handled directly in your ActionScript very easily.

The examples below are showing connecting to a AMFPHP endpoint as opposed to a ColdFusion one, only because that is what I have been learning and working on recently. For ColdFusion, simply replace the latter part of the string with /flex2gateway/

First, define a new string in your model that references the URI to which you are going to connect with your RemoteObjects:

var endpointUri:String = "http://mysite.com:8000/amfphp/gateway.php";

Then, simply define a new ChannelSet, and Channel to add to the ChannelSet that references your URI:

var cs:ChannelSet = new ChannelSet();      
var customChannel:Channel = new AMFChannel("my-amfphp", endpointUri);
cs.addChannel(customChannel);

Finally, define your RemoteObject to access this ChannelSet that you just created and set the destination to the name you gave your AMFChannel:

<mx:RemoteObject id="employeeService" channelSet="{cs}" destination="my-amfphp" source="com.yourcompany.app.employee.EmployeeService"
      showBusyCursor="true" />

It is as simple as that! Be sure to take out the services-config declaration in your compiler arguments to test this out appropriately.

AIR Does NOT Require Certificate for Full API

After Ted posted his AIR entry on his blog and talked about the various great things about the runtime, he also mentioned that it is important to purchase a signed certificate from companies such as Thawte in order to get the "greatly expanded APIs", I immediately pinged Ryan to confirm this since Ted was not immediately available.

Shocked, Ryan went to check and reported back that it was not the case. Since then, I noticed that the misinformation has been removed from Ted's blog.

The actual question I posed to Ryan was if he thought the $300 certificate cost from Thawte would discourage the development of open source and free applications. He didn't think so due to the ability to self-sign your own applications, however, at the cost of them being labeled as "UNVERIFIED" when the user installs them. Is there a way around this? Such as a certificate for open source applications to encourage this ever-increasingly popular movement?

Adobe Flex 3 and AIR SDK Are Here!

W00T!!!!!!!

I am so happy that the final releases of the long awaited Adobe Flex 3 (and builder) and AIR SDK are here. And they have a couple of other cool bits and pieces about them to go with this major update to the famed leading RIA platform.

First of all, as you can see at the store, the upgrade price is only $99! Also, if you have a keen eye, you will notice that it is no longer a separate license for PC and Mac...they come together now!

This is huge news and is truly making Flex be even more affordable and better than ever. One thing to note, is that the $99 upgrade is for Flex Builder 3.0 standard. Chock up an additional $200 and you've got the Pro version which includes advanced charting components and testing tools.

Keep in mind that the Flex framework is still free and open source. The prices above are for the Flex Builder 3.0 IDE products.

Be sure to thank the Flex team for all their hard work!

Yahoo! Flex Skin Buggy

Lately I have been using the Yahoo! Flex skin in a few of my interfaces as it greatly improves the overall standard look of the Flex widgets. It's very easy to implement (thanks to Adobe for creating a simple workflow for this). Recently, however, I have noticed a couple of bugs in the skin that are worth bringing up and should definitely be fixed. Suffice it to say that I am not sure if they are Adobe's fault or Yahoo!'s fault.

As you can see there is an issue on the bottom where a partial row of the datagrid is showing and the other part of it is hidden. It's the hidden part that is causing the skin to appear invisible. Note that, as soon as I scroll the datagrid it goes away. However, if I move my mouse over that row it comes back. Same goes for the [+] button. You can see that it's bounds are causing an anomaly on the control bar.

Like I said, I am not sure if this is an Adobe issue or a Yahoo! issue, but it is annoying enough that I might be swapping the skin out. I don't want to, but I may have to.

AMF3 is now Open Source

It's much easier to link directly to Adobe's press-release: http://labs.adobe.com/technologies/blazeds/

This is in regards to Ted's mention of changes coming to AMF soon. These are excellent changes and updates. It will be great for Adobe and for the Flex community.

Concurrent with this prerelease of BlazeDS, Adobe is publishing the AMF binary data protocol specification, on which the BlazeDS remoting implementation is based, and is committed to partnering with the community to make this protocol available for every major server platform. The source code will be available for download early 2008. Please read the FAQ for further details on BlazeDS and Adobe's open source plans.

TinyMe AIR App - TinyURL.com Generator

The other day I attended an internal Flex user group meeting at Boeing. The noticed that throughout the meeting, the host was pasting TinyURLs into the chat window for the attendees to click on to various websites that were being discussed.

This instantly gave me an idea of an AIR app that would allow a user to drag and drop a URL from their browser onto the AIR application and have it retrieve a TinyURL. My main goal of this application, besides it usefulness, was to really show the rapid application development capabilities of Adobe Flex + AIR in creating a desktop application. As soon as I got home from work that day, I began working on it.

With about an hour development that day, and total of 1 hour of development the next day (Thanksgiving) I had a fully working AIR application that did exactly what I needed it to do. I am already finding it quite useful to use and am sure you will to. You may use the installer below if you would like to download and install the Adobe AIR Framework and TinyMe together:

Flash badge has been removed due to the new release of AIR Beta 3.

If the installer does not work, you may download Adobe AIR Beta 2. Once you have installed Adobe AIR Beta 2, you may download and install TinyMe.

UPDATE: Firefox 2 Mac does not work at this time with TinyMe. The issue with Firefox 2 on the Mac has been fixed.

SmackTV Apollo App

Early this morning I quickly whipped up an Apollo application that conveniently shows the Jellyfish.com SmackTV show. I have also added a single feature that allows you to compact the window to only show the countdown of the current product and not see the chat (great for when you have many windows open and still want to keep your eye on the continuously dropping price). Download the AIR file by clicking the download link below.

For those of you not familiar with Jellyfish.com, it is a relatively new Web 2.0'esqe shopping and price comparison site. However, unlike other price comparison websites, Jellyfish actually kicks back about half of their referral bonus to you in the form of a refund.

The best part of the site is the reverse-auction style SmackTV (a 'smack' is a group of jellyfish) where a product is listed on the page starting at the retail price from some store. Immediately it begins dropping in price and all the users who are participating purchase the product (if they want to) at as low of price as they can. The catch is, you don't know how many they have left!!! So the auction can end at any time. The amount of money discounted comes to you in the form of refund in your Jellyfish.com account.

The site is completely valid and I have yet to get any junk mail from them or anything. I myself have made purchases not only through the store but through SmackTV and have received valid checks and to this date totaling $258.96!!!

It really is a very cool site so check it out!!

Share Apollo Applications

I apologize for yet another link and not posting something little more useful like another Captivate tutorial but this site is really cool.

The site is called ApolloHunter.com and it is a place to share the communities applications that are built on the Adobe Apollo runtime. Nice and simple design make this site worth checking out and using for inspiration on your next big (or small) Apollo application.

It also features a quick link to download the runtime for Apollo as well as small screenshots of each of the applications. It also has a DIGG button at the top left, so let's make this site known and continue to boost the popularity of Apollo!

More Entries