"Voice Notes": Record Voice Notes and Persist them in SQLite with AIR 2

As you probably already know, the Flash Player 10.1 and AIR 2 betas are now available on Adobe Labs. I’ve been playing with the Microphone API in AIR 2 while working on the booth here at Devoxx, and built this small sample application that allows you to record voice notes and store them in the embedded SQLite database so that you can replay them later.

No rocket science here (and no designer involved), just one more microphone API sample. You can install the application here (AIR 2 required):

Installation Instructions

  1. Download the AIR 2.0 beta runtime here.
  2. Download voicenotes.air here.
  3. Double-click voicenotes.air in Explorer or Finder to start the installation process.

View Source (right click) is enabled.

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

New Version of Salesbuilder with Ribbit Integration: Source Code Available

Many people have asked for the source code of the new version of Salesbuilder that includes Ribbit (phone service) integration, an offline calendar (using the ILog component), and the KapIT visualizer component.

You can now download the source code here.

As a reminder, you can watch a screencast showing the key features of the application here (go full screen for a better viewing experience. Also make sure HD is on).

You must create a Ribbit developer account (free) to be able to use the phone service. Once you have a Ribbit account, click the Options menu item in Salesbuilder and enter your Ribbit user id and password.

You will also need to install the ILog swc if you want to compile the application.

Externalizing Service Configuration using BlazeDS and LCDS

A typical source of confusion when developers start working with RemoteObject or other BlazeDS/LCDS related classes is where and most importantly *when* the configuration of your services is being read.

The question often arises after an application stops working when you move it to another server. This is one of the most frequently asked questions related to BlazeDS and LCDS, so I figured I would answer it here. There is nothing really new in this post, but hopefully this will be a good point of reference.

When you create a new BlazeDS or LCDS project in Flex Builder, you are typically told to select J2EE as the “Application Server Type” and then check “use remote object access service”. This adds a compiler argument pointing to the location of your services-config.xml. If you check the Flex Compiler properties of your Flex Builder project, you’ll see something like this:

-services “c:\blazeds\tomcat\webapps\samples\WEB-INF\flex\services-config.xml”

When you then compile your application, the required values of services-config.xml are baked into the SWF. In other words, services-config.xml is read at compile time and not at runtime as you may have thought intuitively. To abstract things a little bit, you can use tokens such as {server.name}, {server.port}, and {context.root} in services-config.xml. However, {context.root} is still substituted at compile time, while {server.name} and {server.port} are replaced at runtime using the server name and port number of the server the SWF was loaded from (which is why you can’t use these tokens for AIR applications).

[Read more...]

Sample application using the Swiz Framework and BlazeDS

There have been a lot of discussions around Flex Frameworks lately. Tony Hillerson has an interesting series here: 1 2 3 4 5 6

A relative newcomer on the list is Swiz, the work of Chris Scott. I figured I would give it a try, and create a Swiz version of the inSync application that I often use to try out and demonstrate different features and techniques in Flex and Adobe AIR. This is not an endorsement of Swiz over other frameworks. I simply wanted to share the sample application I built as part of my own research as a (neutral like a Swiss) Evangelist.

View the source code.

[Read more...]

New Spring/BlazeDS Integration Test Drive

UPDATE: I posted a new version of the Test Drive for the M2 build of the Spring / BlazeDS integration project here. Please use that version.

SpringSource recently announced the Spring / BlazeDS Integration project. You can read more about the project and download the bits at http://www.springsource.org/spring-flex.

To help developers get started with the integration, I put together a new “Spring / BlazeDS Test Drive”. This Test Drive consists of a minimal version of Tomcat with BlazeDS and the “Spring / BlazeDS integration” preconfigured and ready to use. It also includes a series of samples running “out-of-the-box” that should allow you to get up and running integrating Flex (and Adobe AIR) with Spring in minutes.

Installation Instructions:

  1. Download the Spring / Flex TestDrive here: http://coenraets.org/downloads/spring-flex-testdrive.zip
  2. Unzip it in your root directory
  3. Navigate to /spring-flex-testdrive/tomcat/bin and start Tomcat (for instance: catalina run)
  4. Open a browser and access http://localhost:8080
  5. Follow the instructions

As always, I’d would love to hear your feedback and your ideas to improve this Test Drive.

Christophe

Using the SQLite Database Access API in AIR… Part 2: Using the DAO Pattern

The first version of our contact management application introduced us to the database access API in AIR. However, the lack of “application partitioning” or “separation of concerns” in that first implementation represented a poor architecture with no potential for reusability.

In this second version, we use the Data Access Object pattern to improve the overall architecture of our application. A Data Access Object typically encapsulates the data access logic for one entity (in this case: Contact).

An interface (named IContactDAO) defines the “contract”:

package
{
	import flash.utils.ByteArray;
	import mx.collections.ArrayCollection;

	public interface IContactDAO
	{
		function findAll():ArrayCollection;

		function insert(contact:Object):void;

		function update(contact:Object):void;

		function updatePicture(contactId:int, jpeg:ByteArray):void;

		function deleteItem(contact:Object):void;
	}
}

The ContactDAO class implements that interface and provides one specific implementation of the contract (persisting data to the embedded SQLite database).

Benefits:

  • The View doesn’t know anything about your data access logic: You can reuse the same view (ContactForm) with a different way to access your data. You would just create another class implementing IContactDAO and pass an instance of that class to ContactForm. Notice that the dao property of ContactForm is of the IContactDAO data type (the interface). This allows us to pass an instance of any class implementing the IContactDAO interface to ContactForm.
  • The DAO doesn’t know anything about the view: You can reuse the same data access logic from within different views.

Install inSync Local DAO Edition:

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.


Click here to download the source code. You can also right-click the app and select View Source to view the source code and download the application.

Limitation:

There is still a lot of SQL code to write. There are a few options to overcome that limitation:

  • You could create a mini DAO framework where a base DAO class would take care of all the boilerplate code to set up and execute SQL statements. (See the BaseDAO class in Salesbuilder for an example).
  • You could use an ORM framework where SQL statements are automatically generated.

In part 3, we’ll look at a version of inSync built with an annotation-based ORM framework.

Using the SQLite Database Access API in AIR… Part 1

In my MAX session called “Liberate your Data with AIR”, I presented different approaches to access local data using the SQLite database access API in AIR.

The list of approaches included:

  1. “SQL in View”
  2. Data Access Object (DAO) pattern
  3. Using an Object Relational Mapping (ORM) framework

I demonstrated a version of inSync (a simple contact management application) built with each of these approaches. I’m dedicating one blog post to each approach. This first post is focused on the “SQL in View” approach. To spice things up just a little bit, inSync also demosntrates how to take a picture of a contact using your webcam and store it in the SQLite database as a blob.

Install inSync Local SQL Edition:

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.


NOTE: this application uses the same skin and overall context as a sample I posted previously to illustrate offline data synchronization using LCDS, but the implementation is entirely different: No LCDS here… just local data access.

Click here to download the source code. You can also right-click the app and select View Source to view the source code and download the application.

Using the “SQL in View” approach, you embed SQL statements as needed in View components. In this example the ContactForm component has create, update, and delete methods with the appropriate embedded SQL statements to insert, update, and delete a contact in the database. This approach works for quick prototyping, but is generally a bad practice. When you mix view logic and data access logic in the same component, neither the view logic, nor the data access logic is reusable: you can’t reuse the view with a different way to access your data, and you can’t reuse your data access logic with a different view.

I provide this approach here as a quick way to get acquainted with the database access API in AIR. For real life implementations, a more partitioned approach such as the DAO pattern or an ORM framework is of course highly recommended. Stay tuned for an example of approaches 2 and 3.

My MAX LCDS/BlazeDS Sessions Materials Available

Many of you have asked me for the materials I used in my LCDS/BlazeDS hands-on sessions at MAX.

Here are the links:

If you didn’t have a chance to attend, you should be able to use this as a BlazeDS/LCDS tutorial as well.

It was great to see all of you at MAX. I hope to see you next year in Los Angeles.

Christophe

Salesbuilder 1.5 with new AIR 1.5 Database Encryption

As you probably already know, AIR 1.5 is now available. New features include database encryption, Flash Player 10 support, and an updated version of WebKit.

I updated my Salesbuilder sample application to leverage the AIR 1.5 capabilities. Salesbuilder 1.5 leverages the new database encryption feature to allow you to secure your local database.

The first time you start Salesbuilder, the application will generate the encrypted database on your local file system. Salesbuilder implements the key generation approach described in the section Using encryption with SQL databases in the manual Developing Adobe AIR Applications. The encryption key is based on a password provided by you and a SALT generated by the system.

You can install the new version and download the source code here.

A basic script explaining how to use the application is available here.