Using Hyperloop in Appcelerator Titanium to Call Native UI Controls from JavaScript

Desired outcome

Invoke a native iOS UIButton (or Android Button) directly from Alloy/JavaScript code using the Hyperloop feature, without writing a separate native module.

Prerequisites

• Titanium SDK version 7.5.0 or newer installed via the Titanium CLI.
• Node.js (10 or later) and npm available.
• For iOS: macOS with Xcode command-line tools; for Android: Android SDK and JDK.
• Basic familiarity with creating a Titanium Alloy project.

Focused procedure

1. Create a new Alloy project (run in a terminal):

   ti create --name HyperloopDemo --id com.example.hyperloopdemo --alloy
   cd HyperloopDemo

2. Install the Hyperloop plugin (requires internet access):

   ti hyperloop install

   Verify installation with ti info; look for "Hyperloop" in the plugins list.
3. Add a Hyperloop call to the controller. Open app/controllers/index.js and replace its contents with:

   // iOS example - creates a UIButton and adds it to the window
   if (OS_IOS) {
       var UIButton = require('ti.uikit').UIButton;
       var btn = UIButton.alloc().init();
       btn.setTitle('Hello Hyperloop');
       btn.setFrame({ x: 50, y: 100, width: 200, height: 44 });
       btn.addEventListener('touchUpInside', function() {
           alert('Button tapped');
       });
       $.index.add(btn);
   } else {
       // Android example - creates a native Button via Hyperloop
       var AndroidWidget = require('ti.android');
       var Button = AndroidWidget.widget.Button;
       var btn = Button.alloc().init($.index);
       btn.setText('Hello Hyperloop');
       btn.setLayoutParams({ width: Ti.UI.FILL, height: Ti.UI.WRAP_CONTENT });
       btn.setOnClickListener(function() {
           alert('Button tapped');
       });
       $.index.add(btn);
   }
   

4. Build and run the application on a simulator/emulator or device:

   ti build -p ios   # or -p android
   

   The CLI will invoke Hyperloop during the compile step; you should see the native button appear on the screen.

Expected checks

• After ti hyperloop install, the output of ti info includes a line similar to "Hyperloop plugin: installed".
• During the build, the console shows messages like "[Hyperloop] Processing..." and "[Hyperloop] Generated source files".
• In the generated build folder (build/iphone or build/android) you will find a subdirectory named "hyperloop" containing the generated Objective-C/Swift or Java/Kotlin source files.
• Running the app displays a button labeled "Hello Hyperloop" that responds to taps with an alert.

Recovery options

If the button does not appear or the build fails:

• Re-run ti hyperloop install to ensure the plugin is correctly linked.
• Clean the project before rebuilding: ti clean.
• Check the Hyperloop logs in the build output for marshalling errors; verify that the data types used (e.g., strings, numbers) are supported.
• If using a private framework, confirm that it is allowed by App Store/Play Store policies; otherwise replace with a public API.

Note: Hyperloop adds build-time overhead and increases the final binary size because the full native runtime is linked. Debugging stack traces may point to generated native code; consider enabling source maps or adding try/catch blocks around Hyperloop calls for easier troubleshooting.