Things I Code

6Feb/120

Launching the Control Panel/System Preferences using AIR

The AIR3 NativeProcess class allows you to run and monitor any arbitrary executable from your application.  A recent cross-platform application I was working on had the requirement to allow the user to adjust the system date/time by bringing up the appropriate Control Panel/System Preferences panel.

After a little investigation into how the Windows Control Panel and Mac OS System Preference panels work, i created the following code snippet to allow the launching of the System Date & Time settings on both Windows and Mac.

var startupInfo : NativeProcessStartupInfo =
	new NativeProcessStartupInfo();

if (Capabilities.os.toLowerCase().indexOf("win") != -1) {
	startupInfo.executable =
		new File('C:\\WINDOWS\\SYSTEM32\\CMD.EXE');
	startupInfo.arguments =
		new <String>['/c', 'C:\\WINDOWS\\SYSTEM32\\TIMEDATE.CPL'];
}
else if (Capabilities.os.toLowerCase().indexOf("mac") != -1) {
	startupInfo.executable =
		new File('/usr/bin/open');
	startupInfo.arguments =
		new <String>['/System/Library/PreferencePanes/DateAndTime.prefPane'];
}

np = new NativeProcess();
np.start(startupInfo);

This code determines what operating system the application is running, and then

  • On Windows, launches the Control Panel app (a .cpl file) using CMD.EXE.
  • On Mac, launches the System Preferences panel (a .prefPane application) using the open command

The exact same pattern can then be used to open any Control Panel/System Preferences panel.

 

 

30Sep/110

Embedding fonts in Flash

Something that has caused me trouble time and time again is embedding fonts within AIR Actionscript apps.  While your app may display custom fonts fine in your local simulator, once you get it onto a device you may find that no text is displayed, or is not displayed with expected font.

As this has caught me out again, I'm documenting the process as much for my own benefit as any one else who comes across problem.

My platform is Flash Builder 4.5 on Mac OS X Lion.

Initially I tried embedding the font using the [Embed(...)] ActionScript syntax, however I could never get it to work reliably, so instead I've taken to packaging the Font as a SWC in Flash Pro and then linking my Flash Builder project against the SWC.

There's a great article on ADC covering how to embed fonts into Flash Pro CS4, and for the most part the process is exactly the same in CS5.5.

Embedding Fonts by Peter deHaan
http://www.adobe.com/devnet/flash/quickstart/embedding_fonts.html

 

However, once i'd added the font to the Library and set the Symbol and Linkage properties there was a bit of trial and error to get the Font into my Flash Builder project.  Here's the next set of steps I needed:

1. Export the SWC from Flash Pro

Set the Flash Project to Publish as a SWC and set the Output file to a location in your Flash Builder project.

 

2. Reference the SWC in Flash Builder 

In your Flash Builder project, add the SWC to the ActionScript Build Path > Library path properties page.

 

3. Register the Font in your Application

In your app's start up, you need to register your imported font with Flash.

Font.registerFont(classname);

Where classname is the Class Linkage property set in Flash Professional.  If you included a package name in your classname (i.e. package.classname) then don't forget add an import for it as well.

 

4. Set yourself up a default TextFormat

As i found i was creating many TextField objects with identical defaulTextFormat properties, I create a static TextFormat object that defined a common style for me.

var defaultTextFormat : TextFormat = new TextFormat("fontname", fontsize, color);

The Gotcha when creating a TextFormat is to ensure that the fontname value is the actual font name stored in the underlying Font.  This isn't necessarily the name that is displayed to you in Flash Pro, or even shown by Font Book (in Mac OSX) by default.

The value needed is the Full name as shown in the Font properties.

As an example, to use Arial Black Regular, you'd have to use the font name "Arial Black" - which is what you'd expect.

 



var arialBlackTextFormat : TextFormat = new TextFormat("Arial Black", 16, 0x000000);

However, with other fonts, this might not be the same.  For example to use the Coolvetica Regular, you have to use the font name "CoolveticaRg-Regular"

 



var coolveticaTextFormat : TextFormat = new TextFormat("CoolveticaRg-Regular", 16, 0x000000);

Using the wrong font name has been the cause of many hours of angst for me.

 

5. Create your TextField

Finally, you're ready to create and use your TextField.  Ensure you set it up with the correct embedFonts and defaultTextFormat properties.

var label : TextField = new TextField();
label.embedFonts = true;
label.defaultTextFormat = yourTextFormatObject;

If the Flash gods are smiling on you, you should find your fonts embedding correctly across platforms and devices.

 

 

27Sep/115

Building AirDBC

If you'd like to see the pieces that make up AirDBC, this guide will show you how to get started.

I would first like to thank Sean Fujiwara for the excellent tutorial he did on building an AIR3 native extension http://blog.magicalhobo.com/2011/09/12/air-3-native-extension-imageprocessor/.  His example got me further along the road of realising AirDBC than would have been possible otherwise.

You'll also notice that the AirDBC steps are very similar.

Requirements

  • Visual C++ 2010 Express
  • AIR3 SDK for Windows from Adobe Labs
  • Flash Builder 4 (any OS)
  • .NET 4.0 Framework

My build platform in a Mac, but I am using a Windows XP Parallels VM to do the Window specific features.  To actually complete the build I required both the Windows and Mac downloads of the AIR3 SDK.  If you're working entirely within Windows, then obviously you won't need the Mac stuff.

Flex 4.5.1 + AIR 3.0

As this is early days for Native Extensions, to build the Demo app requires that you overlay the AIR3 SDK over an existing Flex 4.51 SDK.  Do this on the Platform that you have Flash Builder running on.

Follow the instructions on this Forums posting

http://forums.adobe.com/message/3908256#3908256

The demo app is built with the SDK with the name "Flex 4.5.1 + AIR 3.0" - if you make your's different, you'll just need to update the Flex Builder projects later on.  Ensure you add your newly created SDK into Flash Builder.

The Code

All the code is on GitHub.  Pull it all from my repository https://github.com/philhaeusler/AirDBC

There are two placeholder files in the Native Extension that are copyright by Adobe. Once you get the project locally, you have to replace these placeholder files from the AIR3 SDK.

You can run the windows batch file AirDBC/AirDBCExtension/setup.bat which will copy the files from the AIR SDK. This script does the following:

  • Copy the file AIR_SDK/include/FlashRuntimeExtensions.h to AirDBC/AirDBCExtension/AirDBCExtension/FlashRuntimeExtensions.h
  • Copy the file AIR_SDK/lib/win/FlashRuntimeExtensions.lib to AirDBC/AirDBCExtension/AirDBCExtension/FlashRuntimeExtensions.lib

Once you've done that you should be ready to start building.

Building the Native Extension DLL for Windows

Open the Visual C++ 2010 Express project AirDBC/AirDBCExtension/AirDBCExtension.sln

Build the DLL (F7)

You should now find the file AirDBC/AirDBCExtension/Debug/AirDBCExtension.dll built successfully

Building the Flash Native Extension

Using Flash Builder import the AirDBC/AirDBC project.  This can be on Windows or Mac

Ensure the Project Properties > Flex Library Compiler > SDK is set to your freshly built "Flex 4.5.1 + AIR 3.0"  SDK

Build the SWC

Now outside of Flash Builder open the AirDBC.swc with a .zip editor, and extract library.swf to the same folder as the AirDBC.swc

From the command line, build the Native Extension by running AirDBC/AirDBC/bin/package.bat (windows) or AirDBC/AirDBC/bin/package.sh (mac)

You should now find the file AirDBC/AirDBC/bin/AirDBC.ane built successfully

Building the Demo App

Import the AirDBC/AirDBCDemo project into Flash Builder. This can be on Windows or Mac.

Again ensure the Project Properties > Flex Library Compiler > SDK is set to your freshly built "Flex 4.5.1 + AIR 3.0"  SDK

Build the SWF

From the command line, now build the native installer.  This step can only be done on Windows.  Run AirDBC/AirDBCDemo/bin-debug/package.bat.

You should now find the AirDBC/AirDBCDemo/bin-debug/InstallAirDBCDemo.exe

Run the installer and start the app.  Click to Run the sample query.  4 records are returned.  Feel free to modify the underlying demo.mdb database in Access and then querying it using the Demo app.

You're done!

24Sep/110

Introducing AirDBC

 

AirDBC allows AIR3 apps running on Windows to access any ODBC data source.

I'm working towards an initial release of the SWC along with an app to demo the functionality. I think it might be kind of useful so it'll all be going up on Github.

So what can you do with it? Well here's a screenshot of the AIR demo app querying an Access database. Hopefully it will give you the idea.

AirDBC is a Native Extension for AIR3, coded in Visual C++ and uses of the .NET Framework 4.0 for Data Access.   I initially see it providing me the ability to deliver rich user-interfaces to existing Access driven desktop applications.  It would then further allow migration of those Access DBs into SQLLite, and beyond that opening them up to web/cloud based options.

But beyond access, i see a huge potential in being able to deliver standalone desktop apps that connect directly to any database without the need to proxy through a web service.  It really will simplify bringing line of business applications into organisations.

I hope that opens up a whole new raft of opportunities to AIR applications and, more importantly, for AIR developers.