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).

Appcelerator Titanium Module Development for iOS

Next Blog Link: Extending Titanium Mobile App
  http://ashishnigamblog.blogspot.in/2013/01/extending-titanium-mobile-application.html

Module template Link:: https://docs.google.com/open?id=0B0PuCdyscdjPaTctT0V4LUtCSlE

How to use Module template for Titanium iOS Module Development.

Steps to use:

1: Download zip file from the above link, and unzip it.
2: It will generate a folder named template, and inside that folder there is a file "template.xcodeproj".
3: double click this file to open the project in Xcode.
4: Project contains various file, uses of these are mentioned with file names below.

File Names:
1:ComGlTemplateModuleAssets.h 
2:ComGlTemplateModuleAssets.m
These files are generated files and not meant to be edited.

1:ComGlTemplateModule.h 
2:ComGlTemplateModule.m
This is the module file which is always required for module development and can be single file only.

1:ComGlTemplateSampleProxy.h 
2:ComGlTemplateSampleProxy.m
Its Proxy class, Object of this class can be created in JS files of titanium app and Methods declared in this class can be called using dot notation, if the method signature is according to the Titanium standards. This class is basically created to show case all the LIFE CYCLE Methods of a Proxy Class Object Creation Process, which will be called one by one in a sequence.

1:ComGlTemplateSampleView.h 
2:ComGlTemplateSampleView.m
Its a View class, and It require a view proxy to be associated with it. view proxy can be made available using the naming convention.
So according to the naming convention its view proxy will be ComGlTemplateSampleViewProxy.h and ComGlTemplateSampleViewProxy.m class files.

1:ComGlTemplateSampleViewProxy.h 
2:ComGlTemplateSampleViewProxy.m
Its view proxy for Sample View class and When ever Titanium developer create the instance of the view the This proxy class instance will be created and methods exposed in the proxy will be available to the JS developer.

1:ComGlTemplateSampleDemoProxy.h 
2:ComGlTemplateSampleDemoProxy.m
This DemoProxy class methods are provided to explain certain features like how to fire event and callback methods. This class also explains some of the property change notification methods.

1:ComGlTemplateMethodsandParameterProxy.h 2:ComGlTemplateMethodsandParameterProxy.m
This class explains all the possible values of return type, which can be returned to the JS developer.
It also uses the standards for the methods used by titanium, and it must be followed.
Note: module.xcconfig file is written with some commented code to explain some of the findings and logical relationship between titanium and native platform.
In actual module development these commented things are to be used as required.

How to Build and Package the Module.
Refer the following link for this. https://wiki.appcelerator.org/display/guides/iOS+Module+Development+Guide

How to create the objects of deferent classes: Steps:

1: require the Module
example:
var template = require('com.gl.template'); Note: "com.gl.template" will be your module id.

Method Calling Example:
template.METHODofModuleClass();

2:create the object of proxy class before calling there methods. 

example:
var sampleProxyObject = template.createSample(); or
var sampleProxyObject = template.createSample({});

Note: "createSample()" here "Sample" is the name used while creating proxy class, i.e. ComGlTemplateSampleProxy.

Method Calling Example:
sampleProxyObject.METHODofSampleProxyClass();

How to Add Proxy class Object to Another View Object.
Not Possible to add and it does not have any impact actually when we think logically.

3:create the object of viewProxy class before calling there methods.

example:
var sampleProxyViewObject = template.createSampleView(); or
var sampleProxyViewObject = template.createSampleView({});

Note: "createSampleView()" here "SampleView" is the name used while creating viewProxy class and view class, 
i.e. ComGlTemplateSampleViewProxy and view as ComGlTemplateSampleView.

Method Calling Example:
sampleProxyViewObject.METHODofSampleViewProxyClass();
How to Add ViewProxy class Object to Another View Object.

taking consideration that "windowObject" is already created and trying to add viewProxy Object in that.

example: windowObject.add(sampleProxyViewObject); Some Important Points to remember.

Note: Always call the view methods from the methods exposed in the viewProxy on MainThread else it will crash the application.
Note: ViewProxy object can be added to the Other View In titanium App But A normal proxy Objet can not.
Note: A Method with prefix "set" will receive the parameter directly while methods without "set" prefix will receive parameter as an NSArray Objet, single or multiple parameter does not have any impact on this behavior.