*

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

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


スポンサードリンク



本格的にTitanium Mobile CLIを利用してBDDを行いたいと思います。
まずは、計算機アプリを作成したいと思います。本エントリはこのアプリのGUI部分の説明になります。

なお、Titanium mobileのAlloyアプリにおけるUIコンポーネントのレイアウトについては
Titanium MobileのAlloyにおけるUIコンポーネントの配置【前編】
Titanium MobileのAlloyにおけるUIコンポーネントの配置【後編】
をご覧ください。

Titanum mobile CLI、TiShadow、Jasmine、スクリプトはJavaScriptではなくCoffeeScriptで行きたいと思います。まあ、今回はほとんど関係ないですけど。

なお、windowsにログインしているユーザはtestで、Titanum Studioのワークスペースは
C:\Users\test\Documents\Titanium_Studio_Workspaceとしており、
CLIでも同じ場所を利用するとの前提となります。以降ではパスの表記を短くするために、
%tiWorkspace%はC:\Users\test\Documents\Titanium_Studio_Workspaceを意味すると読み替えてください。

と前置きが長くなりましたが、今回の作業の手順は

  1. プロジェクトの作成
  2. GUIの初期表示部分の実装

 

となります。

1.プロジェクトの作成

プロジェクトの作成

コマンドプロンプトを起動後に、%tiWorkspace%に移動し、以下のコマンドを実行します。

Alloyフレームワークの適用とjmkの生成と編集

./calcSample/app/alloy.jmkを以下の内容に変更

index.jsのリネームと編集

index.jsをindex.coffeeをリネームし、以下の内容に変更します。
;が無くなっただけです。

2.GUIの初期表示部分の実装

テキストエディタを起動し./calcSample/appviews/view/index.xmlを開き、
以下の内容に変更します。
(編集するエディタは特に何でもよいです。)

ベタベタ、ゴリゴリなtssになってますが・・・
テキストエディタで./calcSample/appviews/styles/index.tssを開き、以下の内容に変更します。

 

実行時の画面イメージは以下のようになります。

計算機

一番上にあるテキストボックスはreadonlyにして、ソフトウェアキーボードが出てこないようにしてます。
残りのボタンは見た目通りで、結構手を抜いた計算機です。
とまたまたぜんぜんBDDではないのですが、今後これを使ってTitanium MobileでBDDして行こうと思います。

Titanium Mobile応用【計算機アプリBDD編その2】 に続く


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

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

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

記事を読む

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

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

記事を読む

Titanium Mobile入門【導入編】

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

記事を読む

no image

MacでSublime Text 2を利用してCoffeeScriptを書く環境の構築

以前のWindows環境では、TitaniumもTitanium StudioではなくCLI環境を利

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

Titanium Mobile入門【TiShadow活用編】

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

記事を読む

Titanium Mobile入門【TiShadow導入編】

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

記事を読む

no image

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

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

記事を読む

Titanium Mobile入門【導入編 on Mac】

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

記事を読む

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 ↑