40歳からのキャリアチェンジ

20代はエンジニア・PM、30代はWeb系エンジニア向けのキャリアアドバイザー。40代の今はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連あたり

021-ブロガー一覧からブログ記事に画面遷移するUI

昨日、書いたエントリ

「ブロガー情報を引き継ぎつつ、そのブログエントリの一覧を生成ってどうやるんだろう?」

という部分について、一旦Macから離れて、画面のイメージと書いたコードを印刷して対応関係を整理してみました。

WindowとかTabGroupとかの関係

donayamaさんがまとめてくれたtitanium-mobile-doc-jaのWikiにあったUIカタログ - Windowを改めて読み返している中で、以下の箇所でふと目が止まりました

モード
Windowには通常モードとフルスクリーンモードの二つがあります。

フルスクリーンモード下では、StatusBar・NavBar・ToolBar・ TabGroupといった部品をもつ事ができませんが、デバイスの表示領域一杯を使う事ができます。

一方、通常モードはStatusBarとNavBarが標準で表示されます。

TabGroupを配置する場合、Windowオブジェクト群はTabGroupの子オブジェクトとして配置されます。

モードに2つあるということ以前に、そもそもWindowsという大きな入れ物があって、その中にTabGroupなどの部品を持てるということについてなんとなく理解していたつもりになっていたことに気付かされました。

現在作成したUIの各部品の対応関係

昨日書いたソースでパーツを生成してる箇所だけ抜き出すとこんな感じになっていました。

// UIの先頭トップにあるラベル(青地で白抜きであすなろBLOGと書いてある箇所)
var headerRow = Titanium.UI.createTableViewRow({
  data:blogger_list
});  // 1
var clickLabel = Titanium.UI.createLabel({});  //2

// Tableの各行の生成箇所(執筆者のアイコン、タイトル、名前などを順番に生成)
for(var i=0; i<10;i++){
  var _row = Titanium.UI.createTableViewRow({});  //3
    var tableview =Ti.UI.createTableView({});  //4
    var photo = Ti.UI.createView({});  //5
    var user_name = Ti.UI.createLabel({});  //6
    var user_summary = Ti.UI.createLabel({});  //7
}

実際のUIはこんな感じになっています
iOSシミュレータ

UIとソースの対応関係はこういう感じです。

赤枠の部品に対してイベントを設定しているわけだから、その部品からブロガー一覧情報となるblogger_listを設定しなければいけないのに、dataプロパティを違う所に設定していました。

そのため、var _rowのTitanium.UI.createTableViewRow()のdataプロパティに対してblogger_listを設定することで意図したように動作しました!

var win = Ti.UI.currentWindow;
win.barColor = '#385292';
Titanium.include('blogger_list.js');

var row = [];
var headerRow = Titanium.UI.createTableViewRow({
  backgroundColor:'#576996',
  selectedBackgroundColor : '#385292',
  height:40
});

var clickLabel = Titanium.UI.createLabel({
   text:'あすなろBLOG',
   color:'#fff',
   textAlign:'center',
   font:{fontSize:14},
   width:'auto',
   height:'auto'

});
headerRow.className ='header';
headerRow.add(clickLabel);
row.push(headerRow);

for(var i=0; i<10;i++){
  var _row = Titanium.UI.createTableViewRow({
    selectedBackgroundColor :'#fff',
    height  : 80,
    hasDetail : true,
    // dataの指定位置がおかしかったのでこれで解決
    data:blogger_list,
    // 執筆者を特定するためのプロパティとして活用する
    blogger_id:i
  });

  _row.addEventListener('click',function(e){

     var blogger_id = e.rowData.blogger_id;
     var datapath = e.rowData.data[blogger_id].data;
     if(datapath){
       var win = Titanium.UI.createWindow({
	 url:datapath,
	 title:e.rowData.data[blogger_id].name + e.rowData.data[blogger_id].blog_title
       });
     }
     var tableview =Ti.UI.createTableView({
       headerTitle:e.rowData.data[blogger_id].name,
       hasChild:true,
       // ここで記事一覧生成?
       data:[{name:'dummy'}]
    });
    win.add(tableview);
    Titanium.UI.currentTab.open(win,{animated:true});
  });

  _row.className = 'datarow';

  //画像配置
  var photo = Ti.UI.createView({
    backgroundImage:'images/' + i + '.jpg',
    top:5,
    left:10,
    width:50,
    height:50
  });
  photo.rowNum = i;

  photo.addEventListener('click', function(e){
    // 上でセットしたrowNumにあたるe.source.rowNumでデータを特定する
  });
  _row.add(photo);

  //メインタイトル
  var user_name = Ti.UI.createLabel({
    color:'#576996',
    font:{fontSize:16,fontWeight:'bold', fontFamily:'Arial'},
    left:70,
    top:2,
    height:30,
    width:200,
    text:blogger_list[i].name
  });
  user_name.rowNum = i;
  user_name.addEventListener('click', function(e){
    //
  });
  _row.add(user_name);

  //説明文
  var user_summary = Ti.UI.createLabel({
    color:'#222222',
    font:{fontSize:12,fontWeight:'normal'},
    left:70,
    top:21,
    height:50,
    width:200,
    text:blogger_list[i].blog_title
  });
  user_summary.rowNum = i;
  user_summary.addEventListener('click', function(e){
    //


  });
  _row.add(user_summary);

  row.push(_row);
}  // for loop end


var tableview = Ti.UI.createTableView({
  data:row

});

win.add(tableview);

次回書きたい事

  • ブロガー選択→記事一覧生成→記事詳細の一連の画面遷移に関して
  • 毎回Titanium.UI....を書くのが面倒なので、Emacsyasnippet.el活用してどうにかしたい