AIR-based Mortgage Calculator Desktop Widget (with ILOG Gauges)

Here is a simple example of using a chromeless, transparent window in AIR to build a widget-type application. I know: yet another mortgage application… but to make things more interesting, I used the cool ILOG Elixir gauges to display and enter the principal, monthly payment, rate, and term. No rocket science here, but a nice reminder of what you can do in less than a hundred lines of code.

Click the badge below to install the application:

Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed.

Instructions:

  • Move the needle with your mouse to specify the principal, monthly payment, rate, and term.
    If you change the principal, the monthly payment is automatically recalculated.
    If you change the monthly payment, the principal is automatically recalculated to show what that monthly payment can buy you.
  • You can move the widget by dragging the upper area of the top gauges border.
  • You can minimize the widget by double-clicking the upper area of the top gauges border.
  • You can close the widget by right-clicking the application in the task bar or in the dock.

View Source is enabled (right click the application to view and download the source code. You will need to add the ILOG Elixir SWCs to your build path to compile).

Here is also a live browser version… (the AIR version is a lot cooler).

View Source is enabled (right click the application to view and download the source code. You will need to add the ILOG Elixir SWCs to your build path to compile).

Building a Flex Application with the Parsley Framework

After my recent explorations of “Swiz”, and “Spring ActionScript” (1,2,3), I decided to take the new version of the Parsley framework for a test drive, and build the Parsley version of inSync: the simple Contact Management application I often use to try out and demonstrate different features and techniques in Flex and Adobe AIR.

Parsley is primarily a Dependency Injection framework. It also offers a very interesting messaging infrastructure. I won’t get into the details of dependency injection here: My previous Swiz and Spring ActionScript articles provide some background information, and there are also plenty of detailed resources out there.

If you just want to run the application and dive into the code, here are the links:

  • Click here to run the application.
  • Click here to view the source code.

Object Configuration

Parsley allows you to configure the core objects of your application (the objects other components depend on) in MXML (like Swiz), in XML (like Spring ActionScript), in ActionScript, or using any combination of these approaches. You can also extend the framework and create your own configuration mechanism.

For the inSync application, I used a simple MXML configuration (Config.mxml) defined as follows:

<?xml version="1.0" encoding="utf-8"?>
<Object xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:services="insync.parsley.services.*">

    <mx:RemoteObject
            id="contactRO"
            destination="contacts"
            endpoint="http://localhost:8400/samples/messagebroker/amf"
            showBusyCursor="true" />

    <services:ContactService />

</Object>

Note: In a real life application, you would not want to hardcode the endpoints of your services in your source code. You could use the XML configuration option to configure your endpoints in a more “externalized” fashion. More on this topic here.

Framework Initialization

You initialize the Parsley framework using the ContextBuilder class corresponding to the configuration approach you chose. Here is the main application file for the inSync application. Parsley is initialized in the preinitialize event of the application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:views="insync.parsley.views.*"
	paddingTop="0" paddingLeft="0" paddingRight="0" paddingBottom="0"
	preinitialize="FlexContextBuilder.build(Config)">

	<mx:Script>
		<![CDATA[
			import org.spicefactory.parsley.flex.FlexContextBuilder;
		]]>
	</mx:Script>

	<mx:Style source="styles.css" />

	<views:MainView />

</mx:Application>

[Read more...]