Appcelerator Titanium App using Hyperloop JS

Appcelerator Titanium App using Hyperloop JS

There are very simple steps to setup hyperloop in your system.

There are two way to setup hyperloop in your system.

1: User specific and local to user directory access.

2: Global and accessible to all user through environment variable.(will require admin access)
(Search for "Global and accessible to all user" to reach there.)

1: User specific:

1: Clone the hyperloop JS directory onto your system from link: https://github.com/ashishnigam/hyperloop

2: goto the cloned directory and go into the hyperloop bin directory.

3: use the hyperloop command and install any dependency which is missing and pointed by hyperloop.

Command Example:

./hyperloop compile --platform=ios --src="/Users/ashish.nigam/GitHub/Appcelerator/hyperloop/examples/ios/helloworld/app.hjs" --dest="/Users/ashish.nigam/GitHub/Appcelerator/hyperloop/examples/ios/helloworld /build"

4: It will ask you for number dependency like:

• colors
• underscore
• uglify-js
• node-appc
• ejs
• node-uuid
• wrench
• async
• semver
• byline
• stream-buffers

5: you have to install them as well before you can run hyperloop compiler, which can be done using following command.

1. sudo npm install colors
2. sudo npm install underscore
3. sudo npm install uglify-js
4. sudo npm install node-appc
5. sudo npm install ejs
6. sudo npm install node-uuid
7. sudo npm install wrench
8. sudo npm install async
9. sudo npm install semver
10. sudo npm install byline
11. sudo npm install stream-buffers

6: you can also make a piped call to execute one after another or write a script to make it automated.

7: Once installed then you can go to example directory to see the possible examples of hyperJS and test any for iOS or Windows environment.

Global and accessible to all user

1: Simple use the command in terminal and will install all the dependencies and setup hyperloop environment.

sudo npm install -g git://github.com/appcelerator/hyperloop.git

Then all set now you can use the below mentioned command.

Final Command to use for application build and testing:

hyperloop package --platform=ios --src=/Users/ashish.nigam/GitHub/Appcelerator/hyperloop/examples/ios/physics --dest=/Users/ashish.nigam/GitHub/Appcelerator/hyperloop/examples/ios/physics/build/physics --name=physics --appid=com.physics --launch --jsengine=jsc --clean --debug --hl-small 

It will create a build iOS project and launch the app in simulator.

In the Above command "/Users/ashish.nigam/GitHub/Appcelerator/hyperloop/examples/ios/physics" is the path of my hyperloop JS file.

You can find couple of example in the example directory with in cloned directory.

Sample app.hjs file code:

/**

 * simple example showing off the new iOS7 physics capabilities

 */

@import('Foundation');

@import('UIKit');

@class('DynamicBehaviorDelegate',NSObject,[],[

{

name: 'tapped',

returnType:'void',

arguments: [{name:'gesture',type:'UITapGestureRecognizer *'}],

action: tapped

}

]);

String.prototype.toUTF8 = function() {

return NSString.stringWithUTF8String('' + this);

};

var win = UIApplication.sharedApplication().keyWindow;

win.backgroundColor = UIColor.redColor();

var view = new UIView();

view.frame = win.frame;

win.addSubview(view);

var label = new UILabel();

label.textColor = UIColor.darkTextColor();

label.frame = CGRectMake(20, 20, 280, 50);

label.font = UIFont.systemFontOfSize(18);

label.textAlignment = NSTextAlignmentCenter;

label.text = 'Click to drop...'.toUTF8();

label.lineBreakMode = NSLineBreakByTruncatingTail;

label.numberOfLinesMode = 2;

view.addSubview(label);

var delegate = new DynamicBehaviorDelegate();

var gesture = UITapGestureRecognizer.alloc().initWithTarget(delegate,NSSelectorFromString('tapped:'));

view.addGestureRecognizer(gesture);

var animator = UIDynamicAnimator.alloc().initWithReferenceView(view);

var gravityBehavior = UIGravityBehavior.alloc().initWithItems(null);

var collisionBehavior = UICollisionBehavior.alloc().initWithItems(null);

collisionBehavior.translatesReferenceBoundsIntoBoundary = true;

var itemBehavior = UIDynamicItemBehavior.alloc().initWithItems(null);

itemBehavior.elasticity = 0.6;

itemBehavior.friction = 0.5;

itemBehavior.resistance = 0.5;

animator.addBehavior(gravityBehavior);

animator.addBehavior(collisionBehavior);

animator.addBehavior(itemBehavior);

function tapped(params) {

var num = Math.floor(Math.random()*10) % 10 + 1;

var filename = "m"+num;

var image = UIImage.imageNamed(filename);

var imageView = UIImageView.alloc().initWithImage(image);

view.addSubview(imageView);

var tappedPos = gesture.locationInView(params.gesture.view);

imageView.center = tappedPos;

gravityBehavior.addItem(imageView);

collisionBehavior.addItem(imageView);

itemBehavior.addItem(imageView);

if (label.alpha > 0) {

UIView.beginAnimations(null,null);

UIView.setAnimationDuration(2);

label.alpha = 0.0;

UIView.commitAnimations();

}

}

Hyperloop JS apps are much performance oriented than Titanium SDK App, but in current scenario you need to understand Native Language Concept to get benefits out of it.

Feel Free to ask any query related to Hyperloop JS and in case you find some bug then report in GitHub(https://github.com/appcelerator/hyperloop/issues).