*

TitaniumのTableViewを試してみる【何故か前編】

公開日: : 最終更新日:2014/05/12 Titanium , , ,


スポンサードリンク



Mac miniの環境が完成したので、新たなTitaniumを利用したBDDシリーズを開始する予定です。

具体的には簡単なToDoアプリを考えているのですが、実現するためには情報を列挙する仕組みが必要となります。

本エントリーでは、「Titanium Mobile応用【ToDoアプリBDD編】 」の前準備として
TableViewの使い方の確認を行います。

Titanium では情報を列挙するための仕組みとして TableView と ListView の2種類が用意されています。
ListView は Titanium 3.2.0 で機能の実装が完了する予定(alloy側が完成していないようです)だそうです。
でも開発終わってないコンポーネントが実際に使えてしまうのはどうかと・・・

なお、参考にさせていただいたのは
Titaniumの公式ドキュメント
「小さな Titanium Mobile の読み物」です。

前置きが長くなりましたが、今回の作業手順としては以下のようになります。

  1. プロジェクトの作成と設定変更
  2. index.jsをindex.coffeeに変更
  3. TableViewを使って試行錯誤

 

1 プロジェクトの作成と設定変更

プロジェクトの作成

ターミナルを起動しTitaniumのワークスペースフォルダに移動した後、以下のコマンドを実行してプロジェクトを作成します。

設定変更

作成したプロジェクトにalloyフレームワークを適用し、コントローラとテストをCoffeeScriptで記載できる設定を行います。

作成したフォルダに移動します。

alloyフレームワークでTableViewを利用しますので、alloyを適用します。

次にコントローラとテストをCoffeeScriptで書く為の設定を行うためにjmkの生成を行います。

生成されたjmkファイル(./app/alloy.jmk)を以下の内容に変更します。

 

以上でプロジェクトの作成と設定変更は完了です。

2 index.jsをindex.coffeeに変更

生成されたindex.jsファイル(./app/index.js)をindex.coffeeにリネームし以下の内容に変更します。

とりあえずきちんと動作するか確認のために実行してみます。

androidのエミュレータで実行するにはターミナルから以下のコマンドを実行します。

iPhoneのシュミレータで実行するにはターミナルから以下のコマンドを実行します。

両方ともうまく動作しませんね。
プロジェクト直下にspec_coffeeフォルダが無いと言われます。今回は関係ないですがフォルダを作成してください。

再度実行すると両方ともうまく動作するはずです。

3 TableViewを使って試行錯誤

TableViewでどんなことができるかをサクッと確認するつもりだけだったのですが・・・

基本的なTableViewの利用方法

まずはシンプルな利用例から行きたいと思います。

index.xmlを以下の内容に書き換えました。

index.coffeeを以下の内容に書き換えました。

Androidエミュレータでの実行画面は以下の通りです。
スクリーンショット 2013-11-19 14.53.52
うんうん、予想通りです。

iOSシュミレータの実行画面は以下の通りです。
スクリーンショット 2013-11-19 15.27.33
なんでやねん!、ステータスバーと1つ目のテーブルセクションのヘッダーが被ってるよ・・・
よく見るとシュミレータの外観もなんか違うような・・・

現在調査中です。と言うことで「TitaniumのTableViewを試してみる【何故か後編】」に続く。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Titanium Mobile応用【JasmineとTiShadowでBDD編:対象アプリ説明】

本格的にTitanium Mobile CLIを利用してBDDを行いたいと思います。 まずは、計算

記事を読む

no image

Titanium mobileでiPhoneのNavigationBarを利用する。

Titanium mobileで基本的な画面遷移を試そうと思い、画面遷移のイベントを仕込むボタンをど

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:15桁入力処理】

前回の続きで、「BDD編その3」です。 「BDD編その1」 「BDD編その2」をまずはご参照くだ

記事を読む

Titanium MobileのAlloyにおけるUIコンポーネントの配置【後編】

Titanium MobileのAlloyにおけるUIコンポーネントの配置【前編】 に引き続き T

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:最大桁入力と閾値テスト】

前回の続きで、「BDD編その4」 「BDD編その1」と 「BDD編その2」 「BDD編その3」

記事を読む

no image

Titanium Mobile応用【JasmineとTiShadowでBDD編:テストが時々失敗する理由】

前回の最後に残った問題点の解決方法が分かりましたので 「BDD編その5」として記載させていただきま

記事を読む

Titanium MobileのAlloyにおけるUIコンポーネントの配置【前編】

Titanium MobileでAlloyフレームワークを利用する時に避けて通れないのがUIコンポー

記事を読む

Titanium Mobile入門【TiShadow導入編】

Androidだと格段に作業が早くなる。 複数のエミューレータで同時にテストを実行できる

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:数値ボタンの1回押し処理】

前回の続きで、「BDD編その2」です。 BDD編その1をまずはご参照ください。 今後のBDD

記事を読む

no image

Titanium mobileでAndroidのActionBarを利用する。

Titanium mobileで基本的な画面遷移を試そうと思い、画面遷移のイベントを仕込むボタンをど

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑