Skip to content

Instantly share code, notes, and snippets.

@donayama

donayama/app.js

Created October 31, 2010 05:58
Show Gist options
  • Save donayama/656197 to your computer and use it in GitHub Desktop.
Save donayama/656197 to your computer and use it in GitHub Desktop.
Download ZIP
Titanium Mobile iPadSample
Raw
app.js
// -------------------------
// TabGroup＆Tabの定義と表示
// -------------------------
//
// ※余談ですが、SplitViewをコンテナとしてTabGroupを持つ事が出来ません。
// そういう構成を組みたい場合はwin3.jsサンプルのようにViewを分割し、
// 左側のViewにTabGroupをセットするようなやり方になります。
//
var tabGroup = Ti.UI.createTabGroup();
tabGroup.addTab(Ti.UI.createTab({
icon: 'KS_nav_views.png',
title: 'メニュー',
window: Ti.UI.createWindow({
backgroundColor:'#fff',
navBarHidden:true,
url: './win1.js'
})
}));
tabGroup.addTab(Ti.UI.createTab({
icon: 'KS_nav_ui.png',
title: '店舗検索(仮)',
window: Ti.UI.createWindow({
backgroundColor:'#fff',
navBarHidden:true,
url: './win2.js'
})
}));
tabGroup.addTab(Ti.UI.createTab({
icon: 'KS_nav_ui.png',
title: 'Twitter',
window: Ti.UI.createWindow({
backgroundColor:'#fff',
navBarHidden:true,
url: './win3.js'
})
}));
tabGroup.open();
Raw
db.js
// dbがわり
var nowkcal = {
sandwich : 0,
bread : 0,
topping : 0,
dressing : 0
};
var nowprice = {
sandwich : 0,
sandwich1: 0,
sandwich2: 0,
topping : 0
};
var db = {};
db.table = {};
db.table.sandwich = [
{title: 'えびアボカド', leftImage: 'menu01.png', kcal:292, bread:2, dressing:3, yen:450, kcal2: 584, yen2: 810, hasChild: true},
{title: 'BLT', leftImage: 'menu02.png', kcal:314, bread:3, dressing:4, yen: 370, yen2: 660, kcal2:628, hasChild: true},
{title: 'チーズローストチキン', leftImage: 'menu03.png', kcal:329, bread:3, dressieng: -1, yen: 450, yen2:810, kcal2: 658, hasChild: true},
{title: 'サブウェイクラブ', leftImage: 'menu04.png', kcal:301, bread:0, dressing:0, yen: 490, yen2:880, kcal2: 602, hasChild: true},
{title: 'ベジーデライト', leftImage: 'menu05.png', kcal:218, bread:0, dressing:0, yen:290, yen2:520, kcal2:436, hasChild: true},
{title: 'たまご', leftImage: 'menu06.png', kcal: 300, bread:1, dressing:0, yen:350, yen2:630, kcal2:600, hasChild: true},
{title: 'ケイジャンチキン', leftImage: 'menu07.png', kcal:313, bread:0, dressing:2, yen:370, yen2:660, kcal2:626, hasChild: true},
{title: 'アボカドベジー', leftImage: 'menu08.png', kcal:277, bread:3, dressing:3, yen:370, yen2:660, kcal2:554, hasChild: true},
{title: 'ハム', leftImage: 'menu09.png', kcal:264, bread:0, dressing:0, yen:390, yen2:700, kcal2:528, hasChild: true},
{title: 'ターキーブレスト', leftImage: 'menu10.png', kcal:268, bread:0, dressing:0, yen:390, yen2:700, kcal2: 536, hasChild: true},
{title: 'ハーブドッグ', leftImage: 'menu11.png', kcal: 349, bread: 3, dressing: 0, yen: 390, yen2:700, kcal2: 698, hasChild: true},
{title: 'ローストチキン', leftImage: 'menu12.png', kcal:289, bread: 0, dressing:-1, yen:420, yen2:750, kcal2:578, hasChild: true},
{title: 'ツナ', leftImage: 'menu13.png', kcal: 333, bread:2, dressing:0, yen:420, yen2:750, kcal2:666, hasChild: true},
{title: '炭火てり焼きチキン', leftImage: 'menu14.png', kcal: 387, bread:0, dressing:-1, yen:450, yen2:450, kcal2:774, hasChild: true},
{title: 'ローストビーフ', leftImage: 'menu15.png', kcal:308, bread:0, dressing:5, yen:490, yen2:880, kcal2:616, hasChild: true}
];
db.table.size = [
{title: 'レギュラー', hasChild: true},
{title: 'フットロング', hasChild: true}
];
db.table.bread = [
{title: 'ウィート', kcal: 0, hasChild: true},
{title: 'ホワイト', kcal: 3, hasChild: true},
{title: 'セサミ', kcal:19, hasChild: true},
{title: 'ハニーオーツ', kcal:10, hasChild: true}
];
db.table.topping = [
{title: 'スライスチーズ' , kcal: 49, yen:30, qty: 0},
{title: 'クリームチーズ' , kcal: 64, yen:60, qty: 0},
{title: 'ベーコン（２枚）', kcal: 38, yen:60, qty: 0},
{title: 'ツナ' , kcal: 57, yen:70, qty: 0},
{title: 'タマゴ' , kcal: 41, yen:60, qty: 0},
{title: 'アボカド' , kcal: 63, yen:90, qty: 0},
{title: 'えび（５尾）' , kcal: 15, yen:90, qty: 0},
{title: 'ダブルミート' , kcal: 0 , yen:200, qty: 0}
];
db.table.dressing = [
{title: 'オイル＆ビネガー', kcal: 24},
{title: 'バジルマヨネーズ', kcal: 57},
{title: 'チリトマトソース', kcal: 7},
{title: 'わさび醤油ドレッシング', kcal: 20},
{title: 'シーザードレッシング', kcal: 40},
{title: 'ホースラディッシュ', kcal: 27}
];
Raw
win1.js
//--------------------
// SpilitWindowの定義
//--------------------
// SplitWindowはmasterViewとdetailViewを指定するファクトリメソッドで生成しなければなりません。
// そのため、事前にそれぞれに相当するWindow/Viewを生成しておく必要があります。
// 無名関数で返す事もできなくもありませんが、SplitWindow内Viewへのアクセスのためにscopeを開いておいたほうが何かと便利ではないかと。
// ここでは階層ナビゲーションできるNavigationGroupとして左右のウィンドウを定義し、それをSplitWindowに引き渡しています。ナビゲーションが不要なら通常のWindowなどで問題ありません。
// あと気にする必要があるのは、splitView.visibleイベントでdetailView側のleftNavButtonの制御を行うことぐらいでしょうか。
// 商品検索を構成するウィンドウを定義
// (構成する各種オブジェクトをMainWindowsオブジェクトにネストさせることで名前空間の汚染範囲を抑えようとしています)
// 左側：マスタウィンドウ
// 右側：詳細ウィンドウ
MainWindows = {};
MainWindows.masterWindow = Ti.UI.createWindow({
title:'サンドウィッチ',
backgroundColor:'#fff',
barColor: '#060',
width: 320
});
MainWindows.detailWindow = Ti.UI.createWindow({
title:'代金・カロリー計算 (参考値)',
backgroundColor:'#fff',
barColor: '#060'
});
// それぞれ階層ナビゲーションをするためにNavigationGroupを構成する
MainWindows.masterNav = Ti.UI.iPhone.createNavigationGroup({
window:MainWindows.masterWindow
});
MainWindows.detailNav = Ti.UI.iPhone.createNavigationGroup({
window:MainWindows.detailWindow
});
// スプリットビューを割当、イベントリスナの割当
MainWindows.splitView = Titanium.UI.iPad.createSplitWindow({
masterView:MainWindows.masterNav,
detailView:MainWindows.detailNav
});
MainWindows.splitView.addEventListener('visible', function(e){
// 左側のナビゲーションボタンを表示する（タテ方向）
if (e.view == 'detail'){
e.button.title = "メニュー";
MainWindows.detailWindow.leftNavButton = e.button;
}
// 左側のナビゲーションボタンを隠す（ヨコ方向）
else if (e.view == 'master'){
MainWindows.detailWindow.leftNavButton = null;
}
});
// 詳細ウィンドウ
Ti.include('./db.js');
MainWindows.detailTableView = {};
MainWindows.detailTableView.tableView = Ti.UI.createTableView({style: Ti.UI.iPhone.TableViewStyle.GROUPED});
MainWindows.detailTableView.rows = {};
MainWindows.detailTableView.rows.sandwich = Ti.UI.createTableViewRow({header: 'サンドイッチ', title: ''});
MainWindows.detailTableView.rows.sandwichsize = Ti.UI.createTableViewRow({title: ''});
MainWindows.detailTableView.rows.bread = Ti.UI.createTableViewRow({title: ''});
MainWindows.detailTableView.rows.topping = Ti.UI.createTableViewRow({header: 'トッピング', title: ''});
MainWindows.detailTableView.rows.dressing = Ti.UI.createTableViewRow({header: 'ドレッシング', title: ''});
MainWindows.detailTableView.rows.price = Ti.UI.createTableViewRow({header: '代金', title: ''});
MainWindows.detailTableView.rows.kcal = Ti.UI.createTableViewRow({header: 'カロリー', title: ''});
MainWindows.detailTableView.clear= function(){
MainWindows.detailTableView.rows.sandwich.title = '';
MainWindows.detailTableView.rows.sandwichsize.title = '';
MainWindows.detailTableView.rows.bread.title = '';
MainWindows.detailTableView.rows.topping.title = '';
MainWindows.detailTableView.rows.dressing.title = '';
MainWindows.detailTableView.rows.price.title = '';
MainWindows.detailTableView.rows.kcal.title = '';
};
MainWindows.detailTableView.init = function(){
MainWindows.detailTableView.tableView.appendRow(MainWindows.detailTableView.rows.sandwich);
MainWindows.detailTableView.tableView.appendRow(MainWindows.detailTableView.rows.sandwichsize);
MainWindows.detailTableView.tableView.appendRow(MainWindows.detailTableView.rows.bread);
MainWindows.detailTableView.tableView.appendRow(MainWindows.detailTableView.rows.topping);
MainWindows.detailTableView.tableView.appendRow(MainWindows.detailTableView.rows.dressing);
MainWindows.detailTableView.tableView.appendRow(MainWindows.detailTableView.rows.price);
MainWindows.detailTableView.tableView.appendRow(MainWindows.detailTableView.rows.kcal);
MainWindows.detailWindow.add(MainWindows.detailTableView.tableView);
};
MainWindows.detailTableView.init();
//
// マスタナビゲーション用TableView
//
MainWindows.goNextTreeView = function(title, nextTreeViewData){
var nextWin = Ti.UI.createWindow({title: title, barColor: '#060'});
var nextTreeView = Ti.UI.createTableView({data: nextTreeViewData.data});
if(nextTreeViewData.click){
nextTreeView.addEventListener('click', nextTreeViewData.click);
}
nextWin.add(nextTreeView);
MainWindows.masterNav.add(nextWin);
MainWindows.masterNav.open(nextWin);
};
MainWindows.tvSandwich = {
data: db.table.sandwich
};
MainWindows.tvSandwichSize = {
data: db.table.size
};
MainWindows.tvBread = {
data: db.table.bread
};
MainWindows.tvTopping = {
data: (function(){
var rows = [];
var tpData = db.table.topping;
for(var i = 0; i < tpData.length; i++){
(function(i){
var row = Ti.UI.createTableViewRow();
var rowView = Ti.UI.createView();
var rowTitle = tpData[i].title;
var rowValue = Ti.UI.createTextField({
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
value: '0',
enabled: false,
editable:false,
left:250,
width:60
});
rowView.add(Ti.UI.createLabel({
text: rowTitle,
left:8,
width:240
}));
rowView.add(rowValue);
rowView.addEventListener('click', function(e){
// PopOverの作成
var popTableView = Ti.UI.createTableView({
data : [
{title: '0'},
{title: '1'},
{title: '2'}
]
});
var popOver = Ti.UI.iPad.createPopover({
title: rowTitle,
barColor: '#060',
width: 240,
height:140
});
popTableView.addEventListener('click', function(e){
rowValue.value = e.index;
tpData[i].qty = e.index;
popOver.hide();
popTableView = null;
popOver = null;
});
popOver.add(popTableView);
popOver.show({view: rowValue, animate: true});
});
row.add(rowView);
rows.push(row);
})(i);
}
rows.push((function(){
var row = Ti.UI.createTableViewRow();
row.add(Ti.UI.createButton({title:'決定'}));
row.addEventListener('click', function(e){
nowprice.topping = 0;
nowkcal.topping = 0;
var title = '';
for(var j = 0; j < tpData.length; j++){
nowprice.topping += tpData[j].yen * tpData[j].qty;
nowkcal.topping += tpData[j].kcal * tpData[j].qty;
if(tpData[j].qty > 0){
if(title.length > 0){
title += ', ';
}
title += tpData[j].title + ' x ' + tpData[j].qty;
}
}
if(title.length == 0){
title = 'なし';
}
MainWindows.detailTableView.rows.topping.title = title;
MainWindows.goNextTreeView('ドレッシング', MainWindows.tvDressing);
});
return row;
})());
return rows;
})()
};
MainWindows.tvDressing = {
data: db.table.dressing
};
//
// ナビゲーション
//
MainWindows.tvSandwich.click = function(e){
MainWindows.detailTableView.rows.sandwich.title = e.row.title;
nowprice.sandwich = 0;
nowprice.sandwich1 = e.rowData.yen;
nowprice.sandwich2 = e.rowData.yen2;
nowkcal.sandwich = e.rowData.kcal;
MainWindows.goNextTreeView('パンの種類', MainWindows.tvBread);
};
MainWindows.tvBread.click = function(e){
MainWindows.detailTableView.rows.bread.title = e.row.title;
nowkcal.bread = e.rowData.kcal;
MainWindows.goNextTreeView('パンのサイズ', MainWindows.tvSandwichSize);
};
MainWindows.tvSandwichSize.click = function(e){
nowprice.sandwich = nowprice.sandwich1;
if(e.index == 1){
nowprice.sandwich = nowprice.sandwich2;
nowkcal.sandwich *= 2;
nowkcal.bread *= 2;
}
MainWindows.detailTableView.rows.sandwichsize.title = e.row.title;
MainWindows.goNextTreeView('トッピング', MainWindows.tvTopping);
};
MainWindows.tvDressing.click = function(e){
MainWindows.detailTableView.rows.dressing.title = e.row.title;
nowkcal.dressing = e.rowData.kcal;
var price = nowprice.sandwich + nowprice.topping;
var kcal = nowkcal.sandwich + nowkcal.bread + nowkcal.topping + nowkcal.dressing;
MainWindows.detailTableView.rows.price.title = price + '円';
MainWindows.detailTableView.rows.kcal.title = kcal + 'kcal';
};
MainWindows.masterWindow.add((function(nextTreeViewData){
var nextTreeView = Ti.UI.createTableView({data: nextTreeViewData.data});
if(nextTreeViewData.click){
nextTreeView.addEventListener('click', nextTreeViewData.click);
}
return nextTreeView;
})(MainWindows.tvSandwich));
// クリアボタン
MainWindows.detailWindow.rightNavButton = (function(){
var button = Titanium.UI.createButton({
title:'クリア'
});
button.addEventListener('click', function(){
MainWindows.detailTableView.clear();
});
return button;
})();
MainWindows.open = function(){
Ti.UI.currentWindow.add(MainWindows.splitView);
MainWindows.splitView.open();
};
MainWindows.open();
Raw
win2.js
// ちょっと手抜きしてしまいました(^^;;
Ti.UI.currentWindow.add(Ti.UI.createWebView({
url: 'http://www.subway.co.jp/shops/index.html'
}));
Raw
win3.js
// 左右を二つのViewで５０％ずつ分割する（方向転換時に幅の補正を行う）
var topwin = Ti.UI.currentWindow;
var leftwin = Ti.UI.createView({
left:0,
top:0,
width: '50%'
});
var rightwin = Ti.UI.createView({
right:0,
top:0,
width: '50%'
});
topwin.add(leftwin);
topwin.add(rightwin);
Ti.Gesture.addEventListener('orientationchange', function(e){
leftwin.width = '50%';
rightwin.width = '50%';
});
// tweetをゲットする（KSから大部分引用）
function getTweets(targetWin, param){
var data = [];
var xhr = Ti.Network.createHTTPClient();
xhr.timeout = 1000000;
xhr.open("GET","http://api.twitter.com/1/statuses/user_timeline.json?screen_name=" + param);
xhr.onload = function(){
try{
var tweets = eval('('+this.responseText+')');
if(tweets.results){
tweets = tweets.results;
}
for (var c = 0; c < tweets.length; c++){
var tweet = tweets[c].text;
var user = tweets[c].user.screen_name;
var status_id = tweets[c].id;
var avatar = tweets[c].user.profile_image_url;
var bgcolor = (c % 2) == 0 ? '#fff' : '#eee';
var row = Ti.UI.createTableViewRow({
hasChild:true,
height:'auto',
backgroundColor:bgcolor
});
var post_view = Ti.UI.createView({
height:'auto',
layout:'vertical',
left:5,
top:5,
bottom:5,
right:5
});
var av = Ti.UI.createImageView({
image:avatar,
left:0,
top:0,
height:48,
width:48
});
post_view.add(av);
var user_label = Ti.UI.createLabel({
text:user,
left:54,
width:120,
top:-48,
bottom:2,
height:16,
textAlign:'left',
color:'#444444',
font:{fontFamily:'Trebuchet MS',fontSize:14,fontWeight:'bold'}
});
post_view.add(user_label);
var tweet_text = Ti.UI.createLabel({
text:tweet,
left:54,
top:0,
bottom:2,
height:'auto',
width:236,
textAlign:'left',
font:{fontSize:14}
});
post_view.add(tweet_text);
row.add(post_view);
row.className = 'item' + c;
// クリックされたらモーダルでWebViewを表示する
(function(arg1, arg2){
row.addEventListener('click', function(e){
var url = 'http://twitter.com/#!/' + arg1 + '/status/' + arg2;
var webWin = Titanium.UI.createWindow({
title: 'Status',
barColor:'#060',
height:480,
width:480,
rightNavButton : (function(){
var button = Ti.UI.createButton({
title: '閉じる'
});
button.addEventListener('click', function(e){
webWin.close();
});
return button;
})()
});
webWin.add(Ti.UI.createWebView({url: url}));
webWin.open({
modal:true,
modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_FLIP_HORIZONTAL,
modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET
});
});
})(user,status_id);
data[c] = row;
}
// Create the tableView and add it to the window.
var toolbar = Ti.UI.createToolbar({
top:0,
barColor: '#060',
items:[
Titanium.UI.createButton({
systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
}),
Ti.UI.createLabel({
text: '@' + param,
color: '#fff'
}),
Titanium.UI.createButton({
systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
})
]});
var tableview = Titanium.UI.createTableView({top:44, data:data,minRowHeight:58});
targetWin.add(toolbar);
targetWin.add(tableview);
}
catch(E){
alert(E);
}
};
// Get the data
xhr.send();
}
// Get the tweets for 'twitter_name'
getTweets(leftwin, 'subwayjp');
getTweets(rightwin, 'utsubway');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment