Appcelerator Titanium Module for iOS Using Hyperloop JS

Appcelerator Titanium Module for iOS Using Hyperloop JS 

Hyperloop JS provided a unique solution for Module development and good part is these modules are compatible with current Titanium SDK. So module build using hyperjs will work as a native module.

To use Hyperloop code in a Ti.Current SDK such as 3.x.x, you should follow these steps below. NOTE: this will only work for iOS since other platforms use V8 which won't be supported in Ti.Next.

First, create a module.

Inside the newly created module directory, create a directory named js. This is where we'll place our Hyperloop HJS files.

Let's do something simple. Create a file in the js directory named app.hjs with the following code:

Hyperloop module directory structure after build, we just need .zip file to use in Titanium App as Module.

 Hyperloop module directory structure, These are required directories and files.Rest can be deleted from the normal module directory structure.

@import("Foundation");
@import("UIKit");

/*
 Utility.
 */
String.prototype.toUTF8 = function() {
    return NSString.stringWithUTF8String('' + this);
};

/** 
 * because Ti.Next and Ti.Current have different threading architectures,
 * you can use the module.dispatch async to bridge the differences when doing
 * UI work or anything that requires you to use the main UI thread.  If you're 
 * using Titanium APIs, this isn't necessary since those APIs always work on the
 * right thread. However, if you want to use native APIs directly, you must wrap
 * your calls in the dispatch async.  This method is safe to use on both
 * Ti.Next and Ti.Current.  On Ti.Next, this simply executes the function as-is
 * when called since Ti.Next is already on the UI thread.  However, in Ti.Current,
 * this will execute the function on the main UI thread.
 */
module.dispatch_async(function(){
    var win = UIApplication.sharedApplication().keyWindow,
        label = new UILabel();
    label.textColor = UIColor.darkTextColor();
    label.frame = CGRectMake(20, 20, 280, 230);
    label.font = UIFont.systemFontOfSize(24);
    label.textAlignment = NSTextAlignmentCenter;
    label.lineBreakMode = NSLineBreakByWordWrapping;
    label.numberOfLines = 0;
    label.text = 'Hello world'.toUTF8();
    win.addSubview(label);
});

exports.foo = function(){
    return 'bar';
};

NOTE: Hyperloop compiled Ti.Current modules will use it's own Objective-C source code as part of packaging. Any code located in your Classes directory will not be used or compiled. You can safely ignore code in this file.

Now, compile your module using Hyperloop. For example, if my module was created in my directory located at ~/Documents/Appcelerator_Studio_Workspace/hyperloop_test_module, the command would be:


hyperloop package module --platform=ios --src=~/Documents/Appcelerator_Studio_Workspace/hyperloop_test_module --dest=build



After running the command, you should have your module zip distribution in the build directory.



Example Command i used on my system:
hyperloop package module --platform=ios --src=/Users/ashish.nigam/Documents/Titanium_Studio_Workspace/hjsmodule2/ --dest=/Users/ashish.nigam/Documents/Titanium_Studio_Workspace/hjsmodule2/hyperloopbuild



terminal output:

[INFO]  Compiling 822 source files

[INFO]  Generated universal library file at /Users/ashish.nigam/Documents/Titanium_Studio_Workspace/hjsmodule2/hyperloopbuild/libhjsmodule2.a

[INFO]  Compiling 6 source files

[INFO]  Creating module zip distribution

[INFO]  Created module distribution: /Users/ashish.nigam/Documents/Titanium_Studio_Workspace/hjsmodule2/hyperloopbuild/com.mhjs.module-iphone-1.0.zip


Deploy this file into your app using normal iOS module deployment instructions.


To load your Hyperloop code, just require the module as normal, substituting the module id for theYOUR_MODULE_ID string below.


var keyWindow = Ti.UI.createWindow({backgroundColor:"white"});
keyWindow.open();
var module = require("YOUR_MODULE_ID");
alert(module.foo());
Issues listed in: https://github.com/appcelerator/hyperloop/wiki/Using-Hyperloop-code-in-Ti.Current-SDK




feel free to ask any query related to module development, either Hyperloop JS module or Native Module.