Barcode Module For Appcelerator Titanium

Appcelerator Titanium Mobile is a platform which allows developing mobile applications using web technologies. The Applications are written in Javascript and can be compiled for multiple devices. At the moment Titanium supports the Apple iPhone and iPad as well as Android devices. We use it here at M-Way to develop cross platform apps for our customers.

Titanium provides a tool called Titanium Developer to build and deploy applications, and a set of SDKs which target different platforms. With this tool you are able to manage SDK versions, import/export projects and deploy them to different emulators or simulators and even real devices.

To get started, we recommend a look at the documents posted in the developer guides in the Titanium Developer Center and the mobile API guides.

Barcode Scanner

A few weeks ago we had to support barcode scanning for some titanium based projects here at M-Way Solutions. Because we only found a working module for the iPhone but didn’t find a suitable solution for android, we started to develop our own module.

The Android Module

To develop the Android module for Titanium mobile, we followed the instructions of the custom module tutorial written by the Titanium guys. Because the tutorial is really basic, we needed to try out a lot of solutions but managed, finally, to create a working module. It is available on our Github account and is licensed under the Apache 2 license. It uses the zebracrossing library for barcode processing and is loosely based on their barcode scanner for Android.

Prerequisites

Before you are able to build our module, you need to check if all dependencies are already installed:

Building The Module

The module itself depends on the sources of the Titanium Mobile SDK for Android and needs to be built together with the other modules. To do that, you need to clone our git repository, navigate to titanium_mobile/android and run the ANT script:

# clone our repo
git clone https://github.com/mwaylabs/titanium_mobile.git
cd titanium_mobile/android
# build the android modules
ant build

If the build fails, make sure the following properties of your build.xml are set correctly. In my case the Android SDK on my Macbook has been installed to /opt. So modify this path if your install path differs.

<property name="android.sdk" value="/opt/android-sdk" />
<property name="android.platform" value="${android.sdk}/platforms/android-4" />
<property name="google.apis" value="${android.sdk}/add-ons/addon_google_apis_google_inc_4 "/>

After the modules were compiled, the JARs are located in titanium_mobile/dist/android. Now you need to copy your original SDK folder to a new place in the same parent folder so Titanium Developer is able to find it. When this is done, you can copy all needed files to your new SDK. On OS X the SDK folder is located under /Library/Application\ Support/Titanium/mobilesdk/osx/{sdk-version}. In this case {sdk-version} is 1.4.1.1.

cd /Library/Application Support/Titanium/mobilesdk/osx
# create your own SDK
cp -a 1.4.1.1 1.4.1.1-barcode
cd titanium_mobile/
# Copy the zxing JAR into the SDK folder
cp -v android/modules/barcode/lib/zxing.jar /Library/Application\ Support/Titanium/mobilesdk/osx/1.4.1.1-barcode/android/
cd titanium_mobile/dist/android
# Copy all new compiled modules to your new SDK
cp -v modules/titanium-*.jar /Library/Application\ Support/Titanium/mobilesdk/osx/1.4.1.1-barcode/android/modules
# Overwrite the titanium.jar inside the SDK
cp -v modules/titanium.jar  /Library/Application\ Support/Titanium/mobilesdk/osx/1.4.1.1-barcode/android/titanium.jar
# Change to the support directory of the cloned repo
cd titanium_mobile/support
# Copy our patched build script
cp -v android/builder.py /Library/Application\ Support/Titanium/mobilesdk/osx/1.4.1.1-barcode/android/builder.py
# Copy the patched Android Manifest
cp -v android/templates/AndroidManifest.xml /Library/Application\ Support/Titanium/mobilesdk/osx/1.4.1.1-barcode/android/templates/AndroidManifest.xml

Use the plugin

The Titanium Mobile repository contains also an example application called “KitchenSink”. This app is also contained in our repository. It already includes a working example which uses the new barcode module.

After starting Titanium Developer, you need to add the new project. It is located in titanium_mobile/demos/KitchenSink. You need to browse this directory and select it.

Make sure you select the {sdk-version}-barcode SDK.

After this is done, all you need to do is to run the Android emulator.

Just show me some code!

The usage of our barcode API is simple: You call “Titanium.Barcode.scan()” and pass in a JSON-Object with the three callback functions success, error and cancel. If the scan works, success is called and the scanned barcode is passed as a parameter. Inside the callback functions you are now able to react to successful or canceled events and errors.

var win = Titanium.UI.currentWindow;
Titanium.Barcode.scan({
  success:function(data) {
    if(data && data.barcode) {
      var label = Titanium.UI.createLabel({
        text:'Barcode: ' + data.barcode,
        textAlign:'center',
        width:'auto'
      });
      win.add(label);
    } else {
      alert(JSON.stringify(data));
    }
  },
  error:function(err) {
    alert("Error!! " + err);
  },
  cancel:function() {
    alert("cancel");
  }
});

One thought on “Barcode Module For Appcelerator Titanium

  1. Pingback: Barcode Module For Appcelerator Titanium | Qualidade de SoftwareQualidade de Software

Leave a Reply

Your email address will not be published. Required fields are marked *