Update: Barcode Module For Appcelerator Titanium

Update: Barcode Module For Appcelerator Titanium:

Update

Few months ago we developed and released the first version of our barcode module for Appcelerator Titanium. Since then we received a lot of great feedback and therefore wanted to adapt this blog post and the plugin to support the currently available Appcelerator Titanium 1.5 SDK.

Appcelerator Titanium Mobile

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. Blackberry support is on its way. 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 months 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. We first released a version which needed to be built together with the whole Titanium Mobile SDK and also required patching some build scripts and application templates. Fortunately, the guys at Appcelerator did a great job improving their build process so it was possible for us to create a standalone version of our plugin which no longer needs to be build inside of the Titanium Mobile source tree. If you are interested in building your own pluins for Appcelerator Titanium, have a look at the Android Module Developer Guide.

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. 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 use our module, you need to check if all dependencies are already installed:

• Android SDK with Google APIs and SDK version 4 installed
• Appcelerator Titanium Developer
• Java JDK
• Apache ANT

Make sure you’ve installed at least the Android 1.6 SDK and the matching Google APIs. You can check which SDKs are installed by running the “android” application located in the tools folder of your Android SDK.

Building The Module

Note: Building the module yourself is not necessary. If you only want to use it for your projects, you can download it from the download section of our Github repository.
If you want to build the barcode module from source, you need to clone our git repository and build it with ant:

# clone the repository
    git clone https://github.com/mwaylabs/titanium-barcode.git
    cd titanium-barcode
    # run ant to build the module
    ant clean && ant

If the build fails, make sure the entries in the buld.properies file point to the right path. On the developer’s machine, the Android SDK is located in /opt/android-sdk:

titanium.platform=/Library/Application Support/Titanium/mobilesdk/osx/1.5.1/android
android.platform=/opt/android-sdk/platforms/android-4
google.apis=/opt/android-sdk/add-ons/addon_google_apis_google_inc_4

The newly created *.jar and *.zip files can be found in the dist directory. The module you need is called com.mwaysolutions.barcode-android-$VERSION.zip.

Use the plugin

To use the plugin, you need to copy the com.mwaysolutions.barcode-android-$VERSION.zip to your project directory and reference it in the tiapp.xml file located the same directory:

...
  
    
      com.mwaysolutions.barcode
    
  

If the scanner isn’t centered in high-resolution screens, you also need to add an additional entry to your tiapp.xml which sets the supports-screens tag of the android manifest correcty:

...
  
        
          
        
  

A complete tiapp.xml file could look like this:

com.mwaysolutions.barcodeexample
Barcode Example
1.0
M-WAY GmbH
http://www.mwaysolutions.com
Example applicatiton
2011 by pfleidi
default_app_logo.png
  false
  false
  default
  false
  false
  false
  true
  a31aa681-860e-4923-abe7-b5d92718b640
  
    
      Ti.UI.PORTRAIT
    
    
      Ti.UI.PORTRAIT
      Ti.UI.UPSIDE_PORTRAIT
      Ti.UI.LANDSCAPE_LEFT
      Ti.UI.LANDSCAPE_RIGHT
    
  
  
    
      
    
  
  
    
      com.mwaysolutions.barcode
    
  

After you referenced the module and added the entry for the android manifest, you can load the plugin by using require(‘com.mwaysolutions.barcode’). The module has a single method which is called scan(callbacks). In this case, callbacks is a JavaScript object with three properties: success, error and cancel. These three properties should point to callback functions which are called when a scan succeeded, an error occurred or when the scan was canceled.

Example Application

In addition to the module itself, we also created an example application which is using it. To use it, you just need to download the example code from Github or clone the repository and build it with the Titanium Developer application.

After starting Titanium Developer, you need to click “Import Project”, browse the directory of the downloaded application and select it.


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 load the module with require(‘com.mwaysolutions.barcode’) and call “.scan()” on the returned object reference. You need to pass in a JSON-Object with the three callback functions success, error and cancel to the scan() method. 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.

Titanium.UI.setBackgroundColor('#000');

// open a single window
var window = Ti.UI.createWindow({
    backgroundColor:'white'
  });

var label = Ti.UI.createLabel();
window.add(label);
window.open();

// create an instance of the module
var titaniumBarcode = require('com.mwaysolutions.barcode');

// call scan method
titaniumBarcode.scan({
    success:function(data) {
      if(data && data.barcode) {
        var label = Titanium.UI.createLabel({
            text:'Barcode: ' + data.barcode,
            textAlign:'center',
            width:'auto'
          });

        window.add(label);
      } else {
        alert(JSON.stringify(data));
      }
    },

    error:function(err) { 
      alert("Error!! " + err); 
    },

    cancel:function() { 
      alert("cancel"); 
    }
  });