Using the Local Notification ANE

This component allows sending Local Notifications that will trigger on a later date. It lets you specify message text, buttons, sound to play, a date to trigger, the interval between notifications, and more…

Now I’m going to explain how to use my modified version of Local Notification ANE using Flash CS5.5/CS6 and Flash Builder 4.6. If you want to improve the ANE with your own source code see instructions in my previous post here. You will also find a list of the added features there.

Important!
The Android version doesn’t support custom icons and sounds.

Prerequisites

• AIR SDK version 3.3 or higher:
  http://www.adobe.com/devnet/air/air-sdk-download.html
• Java virtual machine from either the JRE or the JDK available at:
  http://www.oracle.com/technetwork/java/javase/downloads/index.html
• The LocalNotification ANE files. You can download using Git or as a Zip file from:
  https://github.com/juank-pa/JKLocalNotifications-ANE
  Once downloaded you’ll find the required ANE and SWC files inside the bin folder. You can also find samples in the samples folder.

Set up your path variables

I’m new to Mac so I don’t know a lot of stuff, hence I used absolute paths to reference AIR SDK tools. I didn’t had to do anything for JAVA on Mac. I don’t know if Macs come with JAVA pre-installed, or if the path is already configured for you when you install JAVA. For Windows you must add the following path variables:

1. Add a system’s path variable to point to AIR SDK command line tools. Open Windows Start Menu, type “path” and choose “edit environment variables for your account” (Windows 7). Choose “Path Variable” and click “Edit”. Type or paste in the path to your downloaded AIR SDK’s bin directory at the end of the current path. Use a semicolon (without any spaces) between any path’s that are already in the variable.
   For example: ;C:\AIR SDK 3.3\bin
2. Set up your system’s path variable to point to your JAVA command line tools in the same manner as the previous step. The ADT tool needs JAVA.
   For example: ;C:\Program Files\Java\jre7\bin

Overlay AIR SDK in Flash Professional/Flash Builder

Overlay AIR SDK 3.3 or later first. Without doing this, all editors use an old version of the SDK:

• Flash CS5.5: the following instructions are for AIR SDK 3.2. For AIR SDK 3.3 use 16 instead of 15 as Flash Player version.
  http://www.flashdeveloper.co/post/20583114199/air32-in-flash-cs-55
• Flash CS6.0: see how to target a new SDK here:
  http://www.leebrimelow.com/?p=3335
• Flash Builder on PC: simply copy the AIR SDK contents in the same folder as the corresponding Flex SDK version
  (e.g. C:Program Files\Adobe\Adobe Flash Builder\4.6\sdks\4.6.0)
• Flash Builder on Mac: gets a little bit more complex:
  http://helpx.adobe.com/x-productkb/multi/how-overlay-air-sdk-flex-sdk.html

Using the ANE on Flash Professional CS5.5/CS6

This is a simple iOS app with three buttons and a textfield. The first button will schedule a notification to trigger after 15 seconds. You can press this button an quit the application to see how the notification triggers. The second button simply cancels the previously scheduled notification and the third button clears the debug textfield and resets the application badge number to zero.

1. Create a new Flash document called sample.fla
2. Copy the LocalNotificationLib.ane file from /bin folder, and paste it next to your FLA file.
3. For Flash CS5.5 only, change the LocalNotificationLib.ane file extension to .swc.
4. Go to File > Actionscript Settings, and choose the Library Path tab.
5. Click the plus (+) button to add a new entry.
6. Import the ANE file:
   • On Flash CS5.5:
     1. Click the “Browse to SWC” button and browse to the LocalNotificationLib.swc file you renamed.
     2. While the imported SWC is selected press the “Set linkage options for a library” button (info icon).
     3. In “Link type” select “External”. Press OK twice.
   • On Flash CS 6.0 click “Browse To Native Extension (ANE) File” and Browse to the LocalNotificationLib.ane file you copied and press OK.
7. Go to File > Publish Settings:
   • On Flash CS5.5 change the Player to AIR for Android/iOS.
   • On Flash CS6 change the Player to AIR 3.3.0.xxxx or higher for Android/iOS.
8. On Flash CS6 only, go to File > Air for iOS Settings, then to the Deployment tab:
   1. Browse to your developer certificate .p12 file in the Certificate field.
   2. Type your certificate password and select the “Remember password for this session” option to avoid writing the password every time.
   3. Browse to your provisioning profile file in the Provisioning profile field.
   4. Write a valid App ID.
      You’ll find information on how to get all needed assets from Apple here.
9. Create three buttons in the Stage and give them instance names “button1”, “button2” and “button3”.
10. Create a TextField in the Stage and give it an instance name “notificationTF”.
11. In the Properties Panel, set the document Class to “FlaSample”.
12. Click the pencil icon to open “FlaSample”, erase all current code, and paste:

    package  {
      import flash.display.MovieClip;
      import flash.display.SimpleButton;
      import com.juankpro.ane.localnotif.NotificationManager;
      import flash.events.MouseEvent;
      import com.juankpro.ane.localnotif.Notification;
      import com.juankpro.ane.localnotif.NotificationEvent;
      import flash.text.TextField;
    
      public class FlaSample extends MovieClip {
        private var notificationManager:NotificationManager;
    
        public var button1:SimpleButton;
        public var button2:SimpleButton;
        public var button3:SimpleButton;
        public var notificationTF:TextField;
    
        private static const NOTIFICATION_CODE:String = "NOTIFICATION_CODE_001";
    
        public function FlaSample() {
          if(NotificationManager.isSupported) {
            notificationManager = new NotificationManager();
    
            notificationManager.addEventListener( NotificationEvent.NOTIFICATION_ACTION, notificationActionHandler);
            button1.addEventListener(MouseEvent.CLICK, buttonClickHandler);
            button2.addEventListener(MouseEvent.CLICK, buttonClickHandler);
            button3.addEventListener(MouseEvent.CLICK, buttonClickHandler);
          }
        }
    
        private function buttonClickHandler(event:MouseEvent):void {
          switch(event.target) {
          case button1:
            var notification:Notification = new Notification();
            notification.actionLabel = "OK";
            notification.body = "Body sample";
            notification.title = "Title";
            notification.fireDate = new Date((new Date()).time + (15 * 1000));
            notification.numberAnnotation = 1;
            notification.actionData = {sampleData:"Hello World!"}
    
            notificationManager.notifyUser(NOTIFICATION_CODE, notification);
            break;
          case button2:
            notificationManager.cancel(NOTIFICATION_CODE);
            break;
          case button3:
            notificationManager.applicationBadgeNumber = 0;
            notificationTF.text = "";
            break;
          }
        }
    
        private function notificationActionHandler(event:NotificationEvent):void {
          notificationTF.text = "Notification Code: " + event.notificationCode + "\nSample Data: {" + event.actionData.sampleData + "}\n\n";
        }
      }
    }
    

13. Press Ctrl+Enter to preview the app in Flash. You might get an error on CS5.5 do to the External library settings but this is normal.
14. Only on Flash CS 6.0 open File > Air for iOS Settings, press the Publish button, and you’re done!. This will create an IPA file next to the FLA file. For information on how to upload the IPA file to the device see here.
    If you are using Flash CS5.5 instead, follow to the next step.
15. Next to your FLA file, create a new text document called “sample-app.xml”.
16. Paste the following XML code inside it and save it:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<application xmlns="http://ns.adobe.com/air/application/3.3">
    <id>com.juank.Sample</id>
    <versionNumber>1.0</versionNumber>
    <filename>sample</filename>
    <description></description>
    <name>sample</name>
    <copyright></copyright>
    <initialWindow>
        <content>sample.swf</content>
        <systemChrome>standard</systemChrome>
        <transparent>false</transparent>
        <visible>true</visible>
        <fullScreen>false</fullScreen>
        <autoOrients>false</autoOrients>
        <aspectRatio>portrait</aspectRatio>
        <renderMode>auto</renderMode>
    </initialWindow>
    <customUpdateUI>false</customUpdateUI>
    <allowBrowserInvocation>false</allowBrowserInvocation>
    <icon></icon>
    <iPhone>
        <requestedDisplayResolution>standard</requestedDisplayResolution>
        <InfoAdditions><![CDATA[<key>UIDeviceFamily</key><array><string>1</string></array>]]></InfoAdditions>
    </iPhone>
    <android>
        <colorDepth>16bit</colorDepth>
        <manifestAdditions><![CDATA[
            <manifest android:installLocation="auto">
                <uses-permission android:name="android.permission.VIBRATE"/>
                <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
                <application>
                    <service android:name="com.juankpro.ane.localnotif.LocalNotificationIntentService"/>
                    <receiver android:name="com.juankpro.ane.localnotif.AlarmIntentService" />
                    <receiver android:name="com.juankpro.ane.localnotif.AlarmRestoreOnBoot" >
                        <intent-filter>
                            <action android:name="android.intent.action.BOOT_COMPLETED" />
                        </intent-filter>
                    </receiver>
                </application>
            </manifest>
        ]]></manifestAdditions>
    </android>
    <extensions>
        <extensionID>com.juankpro.ane.LocalNotification</extensionID>
    </extensions>
</application>

UPDATE:

I added a new permission and registered a new service in the application XML to allow recovering notifications on boot on Android.

• Replace the id tag content with you own Bundle Identifier. You’ll find information on how to get the app ID from Apple here.
• Open a command window “cmd.exe” on Windows or the Terminal on Mac and type:
  • Windows:

    adt -package -target ipa-ad-hoc -storetype pkcs12 -keystore  -provisioning-profile  sample.ipa sample-app.xml sample.swf -extdir
    

  • Mac:

    /Path_to_AIR_SDK_bin/adt" -package -target ipa-ad-hoc -storetype pkcs12 -keystore  -provisioning-profile  sample.ipa sample-app.xml sample.swf -extdir
    

  • Replace with your own certificate .p12 file path and with your own .provisioning profile file paths. You’ll find information on how to get all needed asets from Apple here

If everything worked well, hopefully, a sample.ipa/sample.apk file will appear next to your FLA file. For information on how to upload the IPA file to the device see (http://help.adobe.com/en_US/as3/iphone/WS144092a96ffef7cc-4ae52ec4126ab9d6ce6-8000.html)%5Bhere%5D.

Using the ANE on Flash Builder 4.6

This is a simple iOS app with three buttons and a TextArea. The first button will schedule a notification to trigger after 15 seconds. You can press this button an quit the application to see how the notification triggers. The second button simply cancels the previously scheduled notification and the third button clears the debug textfield and resets the application badge number to zero.

1. Create a new Flex Mobile Project with File > New > Flex Mobile Project
2. Set LocalNotificationTest as project name and choose a location for your project. Press Next.
3. For simplicity deselect Blackberry Tablet OS. Press Finish.
4. Copy the LocalNotificationLib.ane file from /bin folder, and paste it in your projects root folder.
5. Select Project > Properties
   1. At Flex Build Path section > Native Extension press the “Add ANE” button to select the copied LocalNotificationLib.ane file
   2. At Flex Build Packaging > Apple iOS:
      1. In the Digital Signature tab browse to select your certificate and provisioning profile. You’ll find information on how to get all needed assets from Apple here.
      2. In the Native Extensions tab select the checkbox next to the LocalNotificationLib.ane file in the table. If a warning appears press Yes.
6. Open the LocalNotificationTest-app.xml file and replace the id tag contents with your own Bundle Identifier. You’ll find information on how to get all needed assets from Apple here.
7. Open the “LocalNotificationTestHomeView.mxml” file, erase all current code and paste:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" creationComplete="view1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import com.juankpro.ane.localnotif.Notification;
            import com.juankpro.ane.localnotif.NotificationEvent;
            import com.juankpro.ane.localnotif.NotificationManager;

            import mx.events.FlexEvent;

            private static const NOTIFICATION_CODE:String = "NOTIFICATION_CODE_001";

            private var notificationManager:NotificationManager;

            protected function view1_creationCompleteHandler(event:FlexEvent):void
            {
                if(NotificationManager.isSupported)
                {
                    notificationManager = new NotificationManager();

                    notificationManager.addEventListener( NotificationEvent.NOTIFICATION_ACTION, notificationActionHandler);
                }
            }

            protected function button_clickHandler(event:MouseEvent):void
            {
                if(!notificationManager) return;

                switch(event.target)
                {
                    case button1:
                        var notification:Notification = new Notification();
                        notification.actionLabel = "OK";
                        notification.body = "Body sample";
                        notification.title = "Title";
                        notification.fireDate = new Date((new Date()).time + (15 * 1000));
                        notification.numberAnnotation = 1;
                        notification.actionData = {sampleData:"Hello World!"}

                        notificationManager.notifyUser(NOTIFICATION_CODE, notification);
                        break;
                    case button2:
                        notificationManager.cancel(NOTIFICATION_CODE);
                        break;
                    case button3:
                        notificationManager.applicationBadgeNumber = 0;
                        notificationTF.text = "";
                        break;
                }
            }

            private function notificationActionHandler(event:NotificationEvent):void
            {
                notificationTF.text = "Notification Code: " + event.notificationCode +
                    "nSample Data: {" + event.actionData.sampleData + "}nn";
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Button id="button1" x="55" y="10" width="211" label="Send" click="button_clickHandler(event)"/>
    <s:Button id="button2" x="55" y="61" width="211" label="Clear" click="button_clickHandler(event)"/>
    <s:Button id="button3" x="55" y="112" width="211" label="Reset" click="button_clickHandler(event)"/>
    <s:TextArea id="notificationTF" x="10" y="163" height="242"/>
</s:View>

1. You can Debug your project if you want (Optional). The first time you debug you might have to select “On desktop” as Launch method and select a target device on the dialog that shows.
2. To compile the iOS App select Project > Export Release Build and click Next
3. In the “Digital Signature” tab, fill the Password field with your certificate password.
4. Select “Final release” or “Ad hoc” as package type depending on your certificate type.
5. This will create an IPA in your projects root folder. For information on how to upload the IPA/APK file to the device see here.

How to use sample files

To use the sample files you’ll need to replace the App ID, certificate .p12 file and provisioning profile file paths with your own data and then build the IPA file using the method corresponding to the editor you use (Flash CS5.5, Flash CS6 or Flash Builder).

To compile on Flash CS5.5, I provide shell script files to compile the sample on Mac. You need to change the paths to certificates and provisioning profiles in theses files too.

Final words

Hope this tutorial and the ANE itself is useful. I’m planning to do more components.
If you’re interested in donating, do it here.

Thanks in advance!

• Flash/Flex
• iOS
• Other
• Tutorials