Creating AIR Native Extensions For Android.

Before Starting:

Project: Grid Dashboard for Samsung Engineering

Detail: To get the userInfo from the Server, it had to done that get the data from the JAVA(Android) side, and let it serve for the Flex side.

Most of details for making the ANE, I obtain the info from this website : http://www.adobe.com/devnet/air/articles/ane-android-devices.html [1]

Which is pretty detailed article for creating AIR Native Extension for Android in Mac(It also includes a sample-project which is very useful for understanding it).

=======================================Split Line======================================

QQ截图20131209104902

 

Tools you are going to need:

  • Adobe® Air® SDK 3.9
  • Adobe® Flash Builder® 4.7 (FLEX SDK 4.11)
  • Eclipse Indigo

What is Air Native Extension (ANE)?

An ANE is a combination of ActionScript and Native code, allowing developers to extend Air runtime capabilities in areas where the core runtime doesn’t cover, normally related to device-specific capabilities.

As probably you already know, Air applications run in a protected environment (sandbox), and because of that such application doesn’t have full access to the system resources. The native extension interface allows native code to run still keeping the Air security model.

The document Developing ACTIONSCRIPT® Extensions for ADOBE® AIR® available on the Adobe website provides further explanation on ANEs.

An ANE can be used is different projects, or be specific for one particular application. In this tutorial you will learn how to create the ANE file in a way you can use it on any application.

Creating the ActionScript library

Our first step is to create an ActionScript library that interfaces with the native code.

To create the project on Flash Builder 4.7:

Project initialization
  • Open Flash Builder 4.7 and choose File > New > ActionScript Library Project.
  • For the project name, type ANESample.  (In general, you can use any name you like.)  Use the default location unless you have a good reason to change it.
  • Since you have installed AIR SDK 3.6 in Flash Builder’s Eclipse plugin folder, the project creation dialog box will display “This project will use AIR SDK 3.6” (see Figure 1). If it does not, then review the installation procedure above.
  • Select Include Adobe AIR Libraries, and then click Next.

Figure 1. Setting up a new ActionScript library project

==========================================================================================

PS. For this part, I actually Failed, Cuz my AIR SDK was Version 3.3, It couldn’t Import the ExtensionContext from “flash.external.ExtensionContext”

If you have AIR SDK higher than it, won’t be any problem.

Way to Upgrade the AIR SDK :

  1. Download the newest version for the Air SDK.
  2. Read instructions from http://helpx.adobe.com/flash-builder/kb/overlay-air-sdk-flash-builder.html
  3. Done.

==========================================================================================

 

  • In the next dialog box you should see “AIR SDK 3.6” under Build Path Libraries on the Library Path tab, with the location of AIRSDK according to the SDK installation instructions above.
  • Click Finish to complete the project initialization.
  • You will see the new project in the Package Explorer area to the left. Click the reveal triangle to see the initial components of the project.
  • Right-click the project name in the Package Explorer and select Properties.
    • Select ActionScript Library Compiler on the left to see the compiler settings, which should have the following options selected: Include Adobe AIR Libraries, Use Version Specified By The AIR SDK, Enable Strict Type Checking, and Enable Warnings.
    • Type “-locale en_US -swf-version 19” as an additional compiler argument.  If we don’t add “-swf-version 19” option, there may occur error showing message “Invalid swc file. The extension NameSpace requires the SWF version to be 19 or lower.” when we make ane file with adt.
    • Click OK.

    Add the source-code

    The following is source-code that attached by myself

    image

    So the SampleASExtension is the class file which will handle running the java code.

    <boundService, getVersion, showHansomeBoy> and so on are the functions can be called from FLEX later.

    In the constructor function- SampleASExtension, it will create the ExtensionContext and it will be used from the FLEX part.

    Detailed Info. can be found from the [1]

    U can build it now.

    Developing the native project
    Project initialization
    • Open Eclipse and choose File > New > Other > Android Application Project.
    • Click Next.
    • Type <Project_Name> as the application name and project name.  (I used SECL_ANDROID_ANE)
    • The package name should be defined (I used secl.android.ane.).
    • Click Next several times through all the remaining dialog boxes, and then click Finish.
    • Next, right-click the project name and select Properties.
    • In the Properties dialog box, select Java Build Path.You need to link the <FlashRuntimeExtensions> library into your native code.
    • Select the Libraries Tab and click Add External Jars.
    • Browse to the Flash Builder 4.7 installation folder and down through Eclipse > plugins > com.adobe.flash.compiler_4.7.x.xxxxxx > AIRSDK > lib > android, select FlashRuntimeExtensions.jar, and then click OK. Then you can import <com.adobe.fre.FREExtension> to develope the extension function for actionscript.
    • There are two classes very important here. One is ANESample and the other is ANESampleContext. You may find that others like boundService.java getLanguage.java, are already shown when we create the as library.

    image

    We don’t have to change anything in ANESample. What we need to do is adding functions in the ANESampleContext like this.

    image

    This is simplest function – showHandsomeBoy which will return a String from java side, and Toast in the android screen.

    image

    So, here we don’t need to add any activity for the android since we won’t be using it.

    But we may need to add permissions in the AndroidMainfest.xml. I’m not pretty sure for this part since when we creating the flex mobile project, it will also add the permissions for the application.

    Build it!

    At this point Eclipse should not be presenting any errors and you should be able to build the project without a problem.
    To generate the library that you will package with your native extension file, follow these steps:

    • Create a folder in the project and name it “Release”.
    • Right-click the project and select Export.
    • Select Java > JAR file, and then click Next.
    • Leave the default settings.  Under Select The Export Destination (SECL_ANDROID_ANE\Release\), select the root of the project as the folder and specify ANESample.jar as the name . You will use this path to retrieve the library when you package the extension.
    • Click Finish.
    Packaging the ANE file

    Now that you have both the ActionScript code and the native Java code built, you are ready to package the resulting libraries into a native extension ANE file that can be linked into an ActionScript application.

    My teacher(GD.Kim) made a ANT.BuildScript for building the ANE in PC side for (FLEX->Windows DLL), So I changed it a bit to build ane for myself which was pretty easy.

    • I placed the build.xml under ANESAMPLE Project like this. (Also we need to create a folder named “release in here.”)

    image

    • Also we need a decrpitor.xml here to make the ANE File.

    image

    Important parts here are the as you can see: <id> for Actionscript library package name, <initializer> and <finalizer> for package names in JAR file.

    Then build it by ANT.Build. (Ofcourse we need to change the arguments in the build.xml to fit your situation)

    Then Wallah, we can find ane file in the release folder.

    image

    Using the native extension in an AIR application

    This section covers the process of developing and linking an application that will use the ANE file you just created.  You will create a Flex application so that you can set up a user interface with a minimum of code.

    Project initialization
    • Choose File > New > Flex mobile project from the Flash Builder menu bar.
    • Type the project name ANESampleTest (I used “CK_FlexMobile”).
    • Click Next.
    • Deselect Apple iOS if it is checked and make sure that only the Google Android box is checked.
    • Under Application Template select View-Based Application.
    • Click Next twice.
    • In the Build Paths dialog box, you can see the path to the Flex SDK you configured in the Library Path section.
    • Select the Native Extensions section, click Add ANE, and then browse to the “ANESample\release” folder that you set up when packaging the ANE.
    • Select <SampleASExtension.ane>, ensure that Update AIR Application Descriptor is selected, and then click OK.
    • In the current release of Flash Builder 4.7, you will notice that there is red “X” next to the <SampleASExtension.ane> and showing “This ANE does not support Desktop platform.” as follow. This error doesn’t matter for this project anyway, so just let it go.

    image

    • Click Finish to complete the project initialization.

    You should see a few new files in the Package Explorer under the src directory:

    • default/ANESampleTest.mxml The main stub; mostly empty for this sample application.
    • views/ANESampleTestHomeView.mxml  This is where you’ll put your application code.
    • ANESampleTest-app.xml  The application descriptor file. You’ll need to make a few edits to it later.

    Here we need to change the ANESampleTestHomeView.mxml by adding buttons or textBox like this.

    image

    And add the functions in Script Area:

    image

    It’s pretty Simple. Just like that.

    image

    Build it, and run on the Device.

    Then Bamm!

    Works Like A Charm!

    ====================================Appendix====================================

    Install the apk file to the Android Emulator:

    adb file is at the platform-tools folder of Android SDK directory.

    adb install [apk file name]

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s