Titanium画面遷移のしかた

Tiを利用した画面遷移の基礎的なものを作成してみました。
TiのWindowを利用すると画面遷移が行え親から子を作るようなイメージになります。
イメージをまとめるため簡素なものを作成してみました。

ちょこっとメモをかねて作成

	index	index2	index3
xml	<Alloy>   <Window class="container">     <Label text="index2を開く" onClick="openIndex2">   </Window> </Alloy>	<Alloy>   <Window class="container">     <Label text="index2を閉じる" onClick="closeIndex2" />     <Label text="index3を開く" onClick="openIndex3" />   </Window> </Alloy>	<Alloy>   <Window class="container">     <Label id="param1" top="30" />     <Label text="argsをチェックする"  top="30" onClick="argsCheck" />     <Label text="index3を閉じる" onClick="closeIndex3" />     <Label text="index2と3を閉じる" onClick="closeIndex2and3" />   </Window> </Alloy>
tss	".container" : {   backgroundColor:'#0ff',   top: 30,   layout: 'vertical', }	".container" : {   backgroundColor:'#f00',   top: 30,   layout: 'vertical', }	".container" : {   backgroundColor:'#ff0',   top: 30,   layout: 'vertical', }
js	function openIndex2() {   var index2 = Alloy.createController('index2').getView();   index2.open(); } $.index.open();	var args = arguments[0] || {}; function closeIndex2() {   $.index2.close(); } function openIndex3() {   var index3 = Alloy.createController('index3',{window : $.index2, text : "index2の中身を入れることができる."}).getView();    index3.open(); }	var args = arguments[0] || {}; function argsCheck() {   alert("このメソッドでもargsを参照できる：" + args.text) } function closeIndex3() {   $.index3.close(); } function closeIndex2and3() {   $.index3.close();   args.window.close(); } // 引数を受け取る. $.param1.text = args.text;

少し書き方を横着しましたgitとかに上げれればよいのですが現在勉強中。

こちらのソースを実行すると画像のようになるのですが、indexはそのままindex2をopenしているだけです。
Alloyから生成するためには「Alloy.createController」こちらを利用します。
さらに注意点としてopenするときはviewである必要があるので「getView()」メソッドが必要です。

index2のところで、自分をcloseする際には「$.index2.close();」と非常にシンプルになります。
ここはおまじないでよい気がしてきました。

openIndex3の点が面白いと思えるところです。
Alloy.createControllerをする際に引数を渡すことができます。
この引数がindex3のargsに格納され利用できるのですが。

index3内の「$.param1.text = args.text;」これは理解が行いやすいのですが。
あえてalertとcloseIndex2and3をつけた部分です。

clickイベントを実行した際にもargsが生成した際に利用したインスタンスが利用可能な点です。
これにより、alertで前のwindowであるindex2のデータを見ることができます。

closeIndex2and3についても、自信と、index2を同時にcloseすることができるのです。
基本的な点かもしれないですが意外と知らないなと思いフムフムなっとく

現状ものを作るよりも、知る方が多いので苦労します。

Titanium Sqlite対応

TitaniumでDB(sqlite)対応方法です。

Alloyを用いるとmodelと呼ばれる仕組みがあるので、楽にできます.


まずはプロジェクトから右クリックで「New」→「Alloy Model」を選択。


続いて、実際のテーブルにあたるスキーマーを定義そうすると下のような「models」ディレクトリにファイルが出来上がる


とりあえずこれでDBを利用できる状態になる。

exports.definition = {
 config: {
  columns: {
      "name": "text",
      "kana": "text"
  },
  adapter: {
   type: "sql",
   collection_name: "test",
   idAttribute: "name"
  }
 },
 extendModel: function(Model) {
  _.extend(Model.prototype, {
   // extended functions and properties go here
  });

  return Model;
 },
 extendCollection: function(Collection) {
  _.extend(Collection.prototype, {
   // extended functions and properties go here
  });

  return Collection;
 }
};

１行だけ基本のソースから追加しています「idAttribute: "name"」この部分ですが
この行を加えるとPKになるようになっています。
どうやら初期状態では、columnsで定義された項目意外に「id」と呼ばれるPKが自動付与されるみたいです。
外部連携をする場合はPKがあらかじめ決まっている可能性が高いので「idAttribute」は覚えておいた方がよいです。
また、バリデータもこちらに記載できます。　簡単なバリデータであればよいのですが
複雑なものをどのように書くかわかりきっていないのでとりあえず今は放置

とりあえず、Insert,SELECT,DELETE,UPDATEを行います。

INSERT

var testModel = Alloy.createModel("test");
testModel.set({"name" : "弦也", "kana" : "ゲンヤ"});
if (testModel.isValid()) {
   testModel.save();
} else {
   alert("登録に失敗しました.");
}

これで登録ができます。
isValidはバリデーションなので初期ではただtrueが返却されるだけです。

少し応用しJSONのデータを組み合わせます。

var xhr1 = Ti.Network.createHTTPClient({
    onload: function() {
        var json = JSON.parse(this.responseText);
 var count = 0;
 for (var i in json) {
  count++;
  var testModel = Alloy.createModel("test");
  testModel.set(json[i]);
  testModel.save();
 }
    }
});
xhr1.open("GET", "http://localhost/test.json");
xhr1.send();

こういった感じが実用例かと思います。

SELECT

var testModel = Alloy.createCollection("test");
testModel.fetch();
testModel.map(function(test){
    Ti.API.info("name:" + test.get("name") + " kana:" + test.get("kana"));
});

INSERTと異なり、「Alloy.createCollection」を利用している点が注意です。
fetchでデータを取得していますがこれはすべて取得になります。
当然条件を指定したいので次のように記述

var testModel = Alloy.createCollection("test");
testModel.fetch(query : { statement: 'SELECT * FROM test WHERE name = ?', params: ['弦也'] }});
testModel.map(function(test){
    Ti.API.info("name:" + test.get("name") + " kana:" + test.get("kana"));
});

PDOなどでよく見る形式になりました。
このfetchはいろいろな形式で記載できそうなのですがまだ模索中とりあえずこれで対応できるのでよしとしています。

DELETE

var testModel = Alloy.createCollection('test');
testModel.fetch(query : { statement: 'SELECT * FROM test WHERE name = ?', params: ['弦也'] }});
while(testModel.length > 0) testModel.at(0).destroy();

少し面倒だがこのような書き方が一般的みたいです。
while文を利用するのが一番行数が少ない書き方みたいですが
その他何種類かあるのでそちらも随時試してまとめ中。

UPDATE

var testModel = Alloy.createModel("test");
testModel.set({"name" : "弦也", "kana" : "ゲンヤ"});
if (testModel.isValid()) {
   testModel.save();
} else {
   alert("更新に失敗しました.");
}

どうやら、INSERT OR UPDATEと呼ばれることを内部処理されているらしく、PKが合えば更新する使用みたいです。
これが「idAttribute」を利用している理由です。
自動で割り当てられたIDも便利ですがこれでは都合が悪いときがあるので臨機応変に対応です。
UPDATEについては、まだ調べきれていないので自信がないですがこれで動くと思います。

以上AlloyでModelsを利用するです。
もう少し応用編も今後作ってみたいと思います。

TitaniumでJsonファイルを取得する

Titaniumシリーズ Webサーバに置いてあるJsonを取得するサンプルです。
今回は自分のlocalhost内に置きます。


とりあえずjsonファイルを用意.

data.json

[{"id":7,"en_name":"fukushima","ja_name":"\u798f\u5cf6\u770c"},
{"id":8,"en_name":"ibaraki","ja_name":"\u8328\u57ce\u770c"},
{"id":9,"en_name":"tochigi","ja_name":"\u6803\u6728\u770c"},
{"id":10,"en_name":"gunma","ja_name":"\u7fa4\u99ac\u770c"},
{"id":11,"en_name":"saitama","ja_name":"\u57fc\u7389\u770c"},
{"id":12,"en_name":"chiba","ja_name":"\u5343\u8449\u770c"},
{"id":13,"en_name":"tokyo","ja_name":"\u6771\u4eac\u90fd"},
{"id":14,"en_name":"kanagawa","ja_name":"\u795e\u5948\u5ddd\u770c"}]

続いて実際の読み取りプログラム

var url = "http://localhost/data.json";

var xhr = Ti.Network.createHTTPClient({
    onload: function() {
  var json = JSON.parse(this.responseText);
  for (var i in json) {
   Ti.API.info(json[i]);
  }
 }
});
xhr.open("GET", url);
xhr.send();

これでできます。
意外とあっけないですが１点注意点として遅延読み取りなので
ほかのプログラムがxhr.send()の後に走ります
こちらが覚えておかないと大変です。

次いでにPOSTのサンプル

var url = "http://localhost/data.json"; 
var postData = {
 title: 'data1'
};
var xhr = Ti.Network.createHTTPClient({
    onload: function() {
  var json = JSON.parse(this.responseText);
  for (var i in json) {
   Ti.API.info(json[i]);
  }
 }
});
xhr.open('POST','http://www.myblog.com/post.php');
xhr.send(postData);

基礎的な点だが重要
JSだからJSON.parseを利用できるのが非常に便利です。

Titanium mobileで日付のフォーマット

Titaniumの日付フォーマットを調べてみました。
momentと呼ばれるライブラリを利用しているのでよく利用する。
今月末、来月末などの標準的な内容をコンソールログに出力してみました。

// ライブラリを呼び出し.
var moment = require("alloy/moment");

// 標準出力.
Ti.API.info(moment());

// 今の日付をformat化して.
Ti.API.info(moment().format("YYYY/MM/DD HH:mm:ss"));

// １ヶ月後.
Ti.API.info(moment().add('months', 1).format("YYYY/MM/DD HH:mm:ss"));

// 今月の月初.
Ti.API.info(moment().format("YYYY/MM/01 00:00:00"));

// 今月末.
Ti.API.info(moment().endOf('month').format("YYYY/MM/DD HH:mm:ss"));

// 来月末.
Ti.API.info(moment().add('months', 1).endOf('month').format("YYYY/MM/DD HH:mm:ss"));

// 前月末.
Ti.API.info(moment().add('months', -1).endOf('month').format("YYYY/MM/DD HH:mm:ss"));

こちらの内容で出力結果が以下になります。

[INFO] :   2014/06/15 15:58:19
[INFO] :   2014/07/15 15:58:19
[INFO] :   2014/06/01 00:00:00
[INFO] :   2014/06/30 23:59:59
[INFO] :   2014/07/31 23:59:59
[INFO] :   2014/05/31 23:59:59

日付を利用したかったのでまとめましたが思っている以上に少ない・・・

Titanium mobile Alloy ボタンを配置する

少しずつやっているので順次メモを記載

JS部分はとりあえず置いておいてGUI面を現在模索中第１段として
ボタンの配置をいろいろしてみました。



サンプルで作り上げたのがこちら画面全体配置、最小サイズ、任意のサイズ１列での分割です。

index.xml

<Alloy>
 <Window class="container">
   <Button id="button1" backgroundColor="red" onClick="doClick" title="フルサイズ" top="10" />
          <Button id="button2" backgroundColor="green" onClick="doClick" title="最小サイズ" top="100"  />
          <Button id="button3" backgroundColor="blue" onClick="doClick" title="サイズ固定" top="150" />
          
          <ButtonBar id="bb1" backgroundColor="#369" top="300" >
           <Labels>
                <Label>One</Label>
                <Label>Two</Label>
                <Label>Three</Label>
            </Labels>
          </ButtonBar>
          <ButtonBar id="bb2" backgroundColor="#369" top="360" >
           <Labels>
                <Label>Single</Label>
                <Label>Duo</Label>
                <Label>Triple</Label>
                <Label>Quad</Label>
            </Labels>
          </ButtonBar>
 </Window>
</Alloy>

index.tss

".container": {
 backgroundColor : "white",
},

"#button1": {
 backgroundColor : "green",
 width : Ti.UI.FILL,
 height : "50dp"
 
},

"#button2": {
 backgroundColor : "blue",
 width: "150dp",
 width : Ti.UI.SIZE,
 height : "50dp"
},

"#button3": {
 backgroundColor : "red",
 width : "150dp",
 height : "50dp"
 
},

"#bb1": {
 backgroundColor : "#369",
 width : Ti.UI.FILL,
 height : "50dp"
 
},

"#bb2": {
 backgroundColor : "#369",
 width : Ti.UI.FILL,
 height : "20dp"
 
}

index.xmlに配置情報、index.tssにデザイン情報を記載、雑なボタンですがAlloyを利用したボタンの初歩かと思います。
Ti.UI.FILLはフルサイズとTi.UI.SIZEは最小サイズ、ButtonBarは任意の件数のボタンを配置できます。
この内容はAndroid iOS両方とも使えるのでUIの共通化が便利です。
次もレイアウト中心になるかと