020-TableView活用して具体的な画面イメージ作る

前回TableView使い始めて徐々に理解できるようになってきたので、もう少し具体的な画面を作ってみることにしました。

donayamaさんがまとめられているこちらのWikiの内容がすごく参考になったので基本これを活用してこんな感じで作ってみました。

ブロガーをクリックすると、記事一覧を表示するという感じにしようかと思っているのですが、clickイベントで記事一覧を表示させればOKって思ったのですが

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

とここで現在カベにぶちあたりました...

頭では結構簡単にできるかなぁーと思っていたのですが実際コード書き始めてみると、色々つまづく所はありますね。でもこうやって手を動かしてみることで、自分の理解の甘い所や課題が結構目に見えてわかるのは勉強になる。

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,
  data:blogger_list
});

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
  });

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

    var win = Titanium.UI.createWindow({

    });
    var tableview =Ti.UI.createTableView({
      //style:Titanium.UI.iPhone.TableViewStyle.GROUPED,
      headerTitle:'田舎社長',
      data:[{
	title:'Dynamic Scrolling',
	hasChild:false
      }]

    });
    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.include('blogger_list.js')でincludeしている中身

var blogger_list = [
  {name:'小林　晋也',hasChild:true, blog_title:'田舎社長のあしあと日記',description:'' ,data:'data/00.js'},
  {name:'横田　真俊',hasChild:true, blog_title:'毎日がアップデート',description:'' ,data:'data/01.js'},
  {name:'大橋　悦夫',hasChild:true, blog_title:'SOHO考流記',description:''},
  {name:'宮原　徹',hasChild:true, blog_title:'オープンでいこう',description:''},
  {name:'太木　裕子',hasChild:true, blog_title:'幸せはどこにある？',description:''},
  {name:'金山　めぐみ',hasChild:true, blog_title:'Megumilkめもりー',description:''},
  {name:'金澤　創平',hasChild:true, blog_title:'20歳からのキャリア考',description:''},
  {name:'上原　仁',hasChild:true, blog_title:'どこでもドアを創りたい',description:''},
  {name:'大谷　弘喜',hasChild:true, blog_title:'踊るプログラマ物語',description:''},
  {name:'美谷　広海',hasChild:true, blog_title:'世界を巡るFool on the web',description:'プランナー。ゲーム、モバイルを経て、Web2のサービスや事業企画を行う。国内案件だけではなく、海外案件にも多く携わる。'}
];