从模型设计当中可以看到,我们将使用一个tabgroup组合四个tab,每一个tab实现一个功能。每一个tab都有相应的一个window,有了这个window,我们就可以放置我们需要的组件了。
PS.由于这个项目是我最早学titanium就开始做的,并没有考虑更多架构的事情,主要是实现功能为主。所以在以后的开发中会发现很多问题,这应该是在做项目之前就应该杜绝的。代码管理得非常混乱,重复。
推荐阅读:官网titanium最佳实践一文。https://wiki.appcelerator.org/display/guides/Mobile+Best+Practices
app.js
tabgroup
-->firstTab—>firstWin—>yao/yao_search.js
-->secondTab—>secondWin—>yao/yao_category.js
-->thirdTab—>thirdWin—>yao/yao_company.js
-->fourdTab—>fourdWin—>yao/yao_shopMap.js
源代码:
/**
*实现功能--创建APP主页面 --使用一个tabgroup作为程序的导航,首页面将载入药品查询功能,另外还有药品分类、药品厂商、药品排行功能,点击不同的tab可以切换不同的功能
*
* 实现步骤:
* 1-创建tabgroup组件
* 2-分别创建4个tab,其下各自有相应的window,最后添加tab到tabgroup
* 3-在程序运行后打开tabgroup组件
*
* */
//创建tabgroup
var tabGroup = Titanium.UI.createTabGroup();
/*第一个tab--开始*/
//创建药品搜索窗口
var firstWin = Titanium.UI.createWindow({
title:'药品查询',
url:'yao/yao_search.js',
});
//创建药品搜索标签
var firstTab = Titanium.UI.createTab({
title:'药品查询',
window:firstWin,
});
/*第一个tab--结束*/
/*第二个tab--开始*/
//创建药品分类窗口
var secondWin = Titanium.UI.createWindow({
title:'药品分类',
url:'yao/yao_category.js',
});
//创建药品分类标签
var secondTab = Titanium.UI.createTab({
title:'药品分类',
window:secondWin
});
/*第二个tab--结束*/
/*第三个tab--开始*/
//创建适应症窗口
var thirdWin = Titanium.UI.createWindow({
title:'药品厂商',
url:'yao/yao_company.js',
});
//创建适应症标签
var thirdTab = Titanium.UI.createTab({
title:'药品厂商',
window:thirdWin
});
/*第三个tab--结束*/
/*第四个tab--开始*/
//创建用药指南窗口
var fourWin = Titanium.UI.createWindow({
title:'附近药店',
url:'yao/yao_shopMap.js',
});
//创建用药指南标签
var fourdTab = Titanium.UI.createTab({
title:'附近药店',
window:fourWin
});
/*第四个tab--结束*/
//在tabGroup打开标签组
tabGroup.addTab(firstTab);
tabGroup.addTab(secondTab);
tabGroup.addTab(thirdTab);
tabGroup.addTab(fourdTab);
//打开tabgroup
tabGroup.open();