Developing with Hyperloop and Titanium for iOS

What is Hyperloop? Where does it came from?
Most people know how to answer those questions. However, do they know how to develop iOS applications using Hyperloop and Titanium?

With the aim of spreading knowledge we decided to create two guides (iOS and Android) to complement the Appcelerator docs and give some examples on how you can apply Hyperloop in your projects.

Appcelerator Labs

As Hyperloop is still in Beta version you can find more documentation about it on Appcelerator Labs section.

Direct Link and what you can find there

Here is the direct link to the document.

There you can find:

  • Requirements;
  • Pre-release Installation;
  • Using the Hyperloop Examples project;
  • Using Hyperloop in your own project;
    • Configure the plugin;
    • Configure the module;
    • Configure for iOS;
  • Overview about the Hyperloop;
    • Instantiation;
    • Methods and Properties;
    • Named methods;
    • Constants, Enumerations and Functions;
    • Casting;
    • Blocks;
  • Creating your own classes;
  • Using Third-party libraries
    • CocoaPods;
    • Custom;
  • Using Swift;
  • Customizing your Xcode build;
  • Adding a third-party framework;
  • Resources.

We recommend you having a deeply understanding about what is written in that document before going ahead.

Straightforward Example

Using the Hyperloop examples project you can start playing around with Hyperloop.

This example will explain how to import the Spinkit library from CocoaPods and use it on your JS code using Hyperloop examples project.

1. Installing a beta SDK version

For this example we are using the version 5.4.0.v20160712013704.
In case you don’t have this version, just run the following code on your Terminal:

ti sdk install 5.4.0.v20160712013704

2. Edit your tiapp.xml file

You will have to declare the SDK version on your tiapp.xml as this is a beta version of the SDK

<sdk-version>5.4.0.v20160712013704</sdk-version>

3. Declaring your pod

Edit the Podfile located on the root of your project:

platform :ios, '7.0'
xcodeproj 'build/iphone/Hyperloop_Sample.xcodeproj'
target 'Hyperloop_Sample' do
pod 'JBChartView'
pod 'GLCalendarView', '~> 1.2'
pod 'Shimmer'
pod 'SpinKit', '~> 1.1'
end

4. Create a new JS file

In this example we have created a file located on app/controllers/ios/libraries called spinkitExample.js

// hyperloop code ... Go!
(function (container) {

var UIView = require('UIKit/UIView'),
SpinKitView = require('SpinKit/RTSpinKitView');

var spinner = SpinKitView.alloc().init();

var view = new UIView();
view.addSubview(spinner);

container.add(view);

})($.spinkit_container);

Note that we are also requiring a native iOS View using Hyperloop.

5. Create a new XML file

You should create the same file name under the same file structure for the XML file. app/views/ios/libraries/spinkitExample.xml

<Alloy>
	<Window id="win" title="Spinkit Example">

		<ScrollView>
			<View class="vbox" id="spinkit_container"></View>
		</ScrollView>

	</Window>
</Alloy>

6. Call your new JS file

The easiest way to call this new file is using the same structure Appcelerator is using to call other files.
We have edited the file index.xml located under views/ios/libraries folder.

<ListItem itemId="spinkitExample" title="SpinKit Example"/>

7. Run your app 🙂

After changing everything on the code it’s time to build and run the application.
If you are using Appcelerator Studio, just build as usual, but if you are not using it you can run through Terminal with the following command:

ti build

The final result is this:

 

You want to check the code out? Download it.

Comments

  1. nitrag

    Now, the question I have is, can you create hyperloop as if it’s a CommonJS module? Such that you can hold onto it?

    var hyperloopModule = require(“hyperloopModule”);
    var specialView = hyperloopModule.createSpecialView({args});
    $.win.add(specialView);
    specialView.spin();
    specialView.bounce();
    //etc….

    • xicovarisco

      No, because hyperloop modules are not compiled like CommonJS modules.
      It will be a separate file to integrate with the native module. We will create a blog post to explain a bit this 🙂

  2. Yozef

    I’ve implemented the hyperloop model as explained above, however, how can I access the other features of SpinKit for example:

    var tiView = Ti.UI.createView({borderColor: ‘green’, bottom: 20, right: 20, height: 100, width: 100});
    $.index.add(tiView);

    var SpinKitView = require(‘SpinKit/RTSpinKitView’);
    var spinner = SpinKitView.alloc().init();
    spinner.spinnerSize = 500; // nothing happens
    // spinner.sizeToFit(); // red screen
    //spinner.initWithStyle(SpinKitView.RTSpinKitViewStyleWave); // red screen
    tiView.add(spinner);
    $.index.add(tiView);

    • loop

      Hi Yozef.
      Thanks for reaching us out.
      There are some things you will have to change in your code:
      1) You can initialise the component as you are doing, but I would recommend you using the library that we have already sent to you – “HL_SpinKit.js”. With that you don’t need to use the “alloc()” statement, all you need to do is:
      “var spinner = SpinKit.createSpinner(style, color));”
      You have an example in the index.js file.

      2) You don’t set the spinner size with a method “spinnerSize”. You need to use the function “setSpinnerSize(size)”.

      3) If you use the lib we have sent (HL_SpinKit.js) you don’t need to use the function initWithStyle(), it’s already done for you.

      If you have other questions, please let me know.

Leave a Reply


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match