*

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入門【導入編 on Mac】

いよいよTitanium Mobile入門【導入編 on Mac】です。 Titanium Mob

記事を読む

no image

Titanium Mobile入門【TiShadow活用編】

「Titanium Mobile入門【TiShadow導入編】」ではTiShadowの導入と接続用の

記事を読む

no image

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

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

記事を読む

Titanium Mobile入門【導入編】

スマホでアプリを開発すべくTitanium Studioの動作環境を作成し、Default Allo

記事を読む

Titanium Mobile入門【CLI激闘編】

Titanium Studioの環境できたので、次はCLI!、と思いCLIでビルドするとうまくいかな

記事を読む

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

「TitaniumのTableViewを試してみる【何故か前編】」では、予想に反してiOSシュミレー

記事を読む

no image

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

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

記事を読む

Titanium Mobile入門【TiShadow導入編】

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

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 ↑