文档章节

如何创建HTML5与原生UI组件混合的移动应用程序

迷途d书童
 迷途d书童
发布于 2012/05/11 18:32
字数 1379
阅读 3662
收藏 40

本文将介绍如何使用Trigger.io创建原生的顶部栏、标签栏、以及HTML/CSS/JavaScript的混合型移动应用程序。

以后我们将添加更多的原生UI组件到Trigger.io,但现在你只需要使用web技术就可以在IOS和Android上创建漂亮而流畅的移动应用。

这是一个简单的菜谱应用程序的屏幕截图,我们使用Trigger.io提供的原生UI组件,我们将向你展示该应用程序是如何构建的:

  • 配置Trigger.io,并添加顶部栏和标签栏到应用程序中
  • 给原生控件添加样式
  • 用JavaScript给控件添加监听器

你可以从github中获取项目的源代码:https://github.com/trigger-corp/forge-template-list-and-detail

第一步:创建App并添加顶部栏

你需要使用Trigger.io生成App的基本框架,然后使用web技术来获取原生的UI组件。因此,在开始之前,你需要先进行注册签约。这里有完整的文档教你如何设置Trigger.io,一旦你完成设置只需要运行:

forge create

这时会提示你给app命名,命令完成后会自动生成app的项目文件夹。

让我们开始给app添加一个顶部栏,之后在Android模拟器上运行测试。

将src/config.json文件的代码替换成以下代码:

{
    "author": "amir@trigger.io",
    "config_version": "2",
    "description": "View ingredients for your favorite recipes",
    "modules": {
        "is": true,
        "logging": {
            "level": "INFO"
        },
        "prefs": true,
        "request": {
            "permissions": []
        },
        "tools": true,
        "topbar": true
    },
    "name": "Recipe list",
    "platform_version": "v1.3",
    "version": "0.1"
}

在模块配置中设置顶部栏可用:“topbar”: true。

然后修改一下index.html

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<div class="content">
			Hello world!
		</div>
	</body>
</html>

现在你可以使用forge命令运行并测试app了:

forge build

forge run android --android.sdk ~/Desktop/android-sdk-macosx

第二步:配置标签栏

在app的底部添加标签栏也很容易,你只需要在src/config.json(模块配置)中加上“tabbar”: true,如下:

{
    "author": "amir@trigger.io",
    "config_version": "2",
    "description": "View ingredients for your favorite recipes",
    "modules": {
        "is": true,
        "logging": {
            "level": "INFO"
        },
        "prefs": true,
        "request": {
            "permissions": []
        },
        "tools": true,
        "topbar": true,
        "tabbar": true
        },
    "name": "Recipe list",
    "platform_version": "v1.3",
    "version": "0.1"
}

但是,在运行之前,我们还需要添加一些按钮和侦听器。这样,当点击每个选项卡时,我们就可以执行JavaScript来处理页面的切换。

让我们添加一个JavaScript文件,命名为src/js/main.js:

// A helper function so that when we change tab the web view scrolls to the top of the new page
var scrollTop = function () {
	setTimeout(function () {
		document.body.scrollTop = 0;
	}, 0);
}

// This is the method we are going to call when a tab button is pressed
var updateRecipes = function (search) {
	scrollTop();
	// For now just pop up a message with the tab which was pressed
	alert(search);
}

// Set a better title for the topbar
forge.topbar.setTitle("Recipe shopping list");

// Add our 3 tab buttons to the tabbar and add press listeners
var starterButton = forge.tabbar.addButton({
	text: "Starters",
	icon: "img/tomato.png",
	index: 0
}, function (button) {
	button.onPressed.addListener(function () {
		updateRecipes("starter");
	});
	// This is the default button, activate it immediately
	button.setActive();
	updateRecipes("starter");
});

var mainButton = forge.tabbar.addButton({
	text: "Mains",
	icon: "img/pizza.png",
	index: 1
}, function (button) {
	button.onPressed.addListener(function () {
		updateRecipes("main");
	});
});
var dessertButton = forge.tabbar.addButton({
	text: "Desserts",
	icon: "img/strawberry.png",
	index: 2
}, function (button) {
	button.onPressed.addListener(function () {
		updateRecipes("dessert");
	});
});

这里我们调用了forge.topbbar.setTitle,该API会改变顶部的标题,然后用forge.tabbar.addButton来添加标签栏的按钮,以及该按钮的监听器。

我们修改src/index.html这个文件:

<!DOCTYPE html>
<html>
	<head>
		<script src="js/main.js"></script>
	</head>
	<body>
		<div class="content">
			Hello world!
		</div>
	</body>
</html>

src/js/main.js文件里面引用了一些图片,这些图片你可以从代码示例中获取,并放在src/img目录里。

这次我们在IOS里面运行测试:

 

第三步:创建列表视图

OK,现在我们需要创建菜谱列表,并让它们点击后可跳转。

我们将使用轻量级的zepto.js库,以帮助我们处理DOM操作。我们已经发表了一篇关于如何使用zepto.js和backbone.js快速创建HTML5的移动应用程序的博客。因此,我们就不在这对做介绍了。接下来在菜谱列表中使用HTML/CSS/JavaScript。

首先,让我们将菜谱数据导入到zepto.js库。你可以下载zepto.js和data.js从Github上的例子,并把它们放在你的src/js目录里。

然后我们更新src/js/的main.js中的updateRecipe功能 - 这是当标签栏按钮被按下时调用的:

var updateRecipes = function (search) {
	scrollTop();
	$('.content').html('<ul class="list"></ul>');
	$.each(data[search], function (i, recipe) {
		var el = $('<li><img src="'+recipe.thumb+'">'+recipe.title+'</li>');
		el.on('click', function () {
			scrollTop();
			$('.content').html('<div class="recipe"><h3>'+recipe.title+'</h3><img src="'+recipe.img+'"><ul class="ingredients"></ul><p><a href="#" onclick="forge.tabs.open(\''+recipe.source+'\')">View full recipe</a></p></div>');
			$.each(recipe.ingredients, function (i, ingredient) {
				$('.ingredients').append('<li>'+ingredient+'</li>');
			});
			forge.tabbar.setInactive();
		});
		$('.list').append(el);
	});
}

现在完成应用程序,我们只需要在src/index.html添加一些简单的样式并导入JavaScript文件:

<!DOCTYPE html>
<html>
	<head>
		<style>
			body, html, li, ul {
				padding: 0;
				margin: 0;
			}
			body {
				font-size: 1.2em;
			}
			.recipe {
				text-align: center;
			}
			.recipe img {
				max-width: 80%;
			}
			.recipe li {
				display: block;
				font-size: 0.9em;
				padding: 2px;
			}
			.list {
				margin: 0;
				padding: 0;
			}
			.list li {
				display: block;
				border-bottom: 1px solid #aaa;
				padding: 0;
				margin: 0;
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.list li img {
				height: 50px;
				width: 50px;
				padding: 2px 7px 2px 2px;
				vertical-align: middle
			}
		</style>
		<script src="js/zepto.js"></script>
		<script src="js/data.js"></script>
		<script src="js/main.js"></script>
	</head>
	<body>
		<div class="content">
		</div>
	</body>
</html>

完成

现在,你运行应用程序就会看起来跟本篇文章的顶部截图一样了。除此之外,你也可以尝试调用以下API来探索顶部栏和标签栏的不同造型:

因此,你也可以使用Trigger.io中的原生UI组件创建出丰富的混合应用程序!

如果你遇到什么问题,你可以查看常见问题,也可以在StackOverflow社区提问 或者 联系support@trigger.io

 

原文链接开源中国原创翻译

© 著作权归作者所有

共有 人打赏支持
迷途d书童

迷途d书童

粉丝 1020
博文 144
码字总数 14138
作品 0
深圳
高级程序员
加载中

评论(7)

tsl0922
tsl0922
很好!
黑传说
黑传说
感觉这个维护难度太大,html5部分要看支持情况,使用系统原生控件,又要对各个系统进行适配,实在不是好主意啊。
yejiang
yejiang
Rexsee也是同样支持HTML5和原生UI布局的
Raymin
Raymin
应用泛滥,要装一大堆软件,还不如网页版。
迷途d书童
迷途d书童

引用来自“xesam”的评论

又来?这个貌似很不靠谱的样子,跟Titanium有何区别?

呵呵,只是介绍下有Trigger.io这个东东
xesam
xesam
又来?这个貌似很不靠谱的样子,跟Titanium有何区别?
x
xuetu
博主很强大呀,看来你很擅长手机方面的开发,希望能够指点超级菜鸟,先谢谢了
HTML5来了,7个混合式移动开发框架

Posted 周二, 12/30/2014 - 12:18 by admin 在这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关...

程序袁_绪龙
2015/01/29
0
0
HTML5来了,7个混合式移动开发框架

在这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识,懂一些CSS和JavaScript就够了。如果你...

数通畅联
2015/01/04
0
0
Amaze UI让HTML5 Web应用接近原生体验

近日,第四届HTML5峰会在北京国际会议中心拉开序幕,云适配携其“HTML5跨屏前端框架Amaze UI”高调亮相,并在大会上了做了《组件化-Web前端开发的未来趋势》的重要演讲。 组件化是Web开发的未...

妹子有爱
2015/08/10
0
0
针对开发者的20+款移动开发框架

本文收集了20款针对开发者的移动开发框架,以帮助他们为移动爱好者开发出新颖、有用、有趣味的应用。 1.Fries Fries是一款稳定的HTML-CSS-JS框架,用于在实际项目和原型设计中创造类似于And...

liuher
2014/07/26
0
0
面向移动设备的HTML5开发框架梳理

很久以前整理了篇将手机网站做成手机应用的JS框架。时隔一年多,很多新的技术已经出现,下面再来总结下还有哪些框架是适合面向手机设备的开发的。 1、jQuery Mobile jQuery Mobile 是 jQuery...

凯文加内特
2015/01/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

这些Spring中的设计模式,你都知道吗?

设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆。 Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行...

Java填坑之路
33分钟前
1
0
Spring Aop原理之Advisor过滤

在上文(Spring Aop之Advisor解析)中我们讲到,Spring Aop对目标bean的代理主要分为三个步骤:获取所有的Advisor,过滤当前bean可应用的Advisor和使用Advisor为当前bean生成代理对象,并且上文...

爱宝贝丶
44分钟前
0
0
JMockit学习教程

1 JMockit中文网 我觉得如果仅仅是开发自测的话,把JMockit中文网认真看一遍,就可以在项目中使用JMockit了。 http://jmockit.cn/index.htm 2 JMockit中文教程 官方文档中文版。对于不喜欢看...

SuperHeroes
55分钟前
0
0
Linux服务器几乎从不采用Arch Linux?

我们见得多的Linux服务器系统一般都是什么Ubuntu Server啊,什么Cent OS啊,什么Fedora啊,或者企业采用的Red Hat啊,为什么几乎没有Arch Linux呢?下面我将从若干个方面指出Arch Linux在服务...

linux-tao
今天
0
0
js 函数柯里化 闭包

参考 https://mp.weixin.qq.com/s/GEHL3jarDdAAcr5tQGjmDg 一个统计求和的函数 需要知道整个数组的信息,然后遍历求值 function countMoney() { let money = 0 // 温馨提示:arguments...

阿豪boy
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部