Hyperloopモジュールを試す（2）動かしてみよう

11051 ワード
Android iOS JavaScript Titanium JavaScript テキストリンク

前回のセットアップ編に続き、今回は簡単な機能を追加してHyperloopモジュールを動かしてみます。

UIView

プロジェクトを作成した時点の雛形からapp/controllers/index.jsを編集します。

var UIView = require('UIKit/UIView');
var UIColor = require('UIKit/UIColor');

function addHyperLoopView(){
  var view = new UIView();
  view.backgroundColor = UIColor.redColor();
  $.index.add(view);
}

function doClick(e) {
  addHyperLoopView();
}

$.index.open();

ビルドしてボタンをクリックすると見事に画面が真っ赤っかになって何もできなくなります。成功です。ビルド時間もさほど変わりません。

View(Android)

左隅に赤い四角を表示。

function doClick(e){
  var View = require('android.view.View');
  var Color = require('android.graphics.Color');
  var Activity = require('android.app.Activity');
  var Gravity = require('android.view.Gravity');
  var FrameLayout = require('android.widget.FrameLayout');
  var LayoutParams = require('android.widget.FrameLayout.LayoutParams');
  var activity = new Activity(Ti.Android.currentActivity);
  var view = new View(activity);
  view.backgroundColor = "Red";
  view.width = 100;
  view.height = 100;
  var layoutParams = new LayoutParams(50, 50, Gravity.TOP);
  layoutParams.setMargins(10, 10, 0, 0);
  var main = new FrameLayout(activity);
  main.setLayoutParams(new LayoutParams(600, 600, Gravity.TOP));
  view.setLayoutParams(layoutParams);
  view.setBackgroundColor(Color.RED);
  main.addView(view);
  $.index.add(main);
}

Titaniumでそのままやった方がずっとマシでしたね。

ViewController

次にSocial.frameworkを使ってViewControllerを試してみます。Objective-Cであれば

[self presentViewController:vc animated:YES completion:nil];

みたいになるわけですが、よく考えたらTitaniumの場合はselfを触ることができません。ViewControllerを扱う時はviewを取り出してあげるといいでしょう。

var SLComposeViewController = require('Social/SLComposeViewController');
var SLServiceTypeTwitter = require('Social').SLServiceTypeTwitter;

function doClick(e) {
  if(SLComposeViewController.isAvailableForServiceType(SLServiceTypeTwitter)){
    var slc = SLComposeViewController.composeViewControllerForServiceType(SLServiceTypeTwitter);
    slc.setInitialText("Hyperloopで呟くよ！");
    $.index.add(slc.view); // <- ココ
  }else{
    alert("Twitterの設定がないよ");
  }
}

$.index.open();

試しに投稿してみました。

こんな風に、SDKの更新を待たずに新しい機能を使うことが容易になるのがお分かりいただけるかと思います。まあ、きっと場合によりますけど。

Hyperloopのサンプルプロジェクトには他にもListViewの実装なんかもあるので、スクロールする一覧の動作が遅いと悩んで（それをTitaniumのせいにして）いる人なんかは試してみるといいんじゃないでしょうか。