使用 Intel® XDK 的 HTML5 Web 应用
0/5 (0投票)
本文档旨在向新用户演示如何使用 HTML5、JavaScript 和 CSS3 创建原生 Web 应用程序。
Intel® Developer Zone 提供跨平台应用开发工具和操作指南、平台及技术信息、代码示例以及同行专业知识，以帮助开发人员进行创新并取得成功。加入我们的社区，可获取 Android、物联网、Intel® RealSense™ 技术 和 Windows 的相关内容，下载工具、访问开发套件、与志同道合的开发人员分享想法，并参与黑客松、竞赛、路演和本地活动。
引言
Intel® XDK 允许开发人员使用 Web 技术 HTML5、JavaScript 和 CSS3 为多个平台构建 Web 和混合应用。开发人员可以编写一个应用程序，该应用程序无需修改即可跨平台运行并在移动设备上运行。Intel® XDK 支持所有主要的面向平台——Microsoft Windows*、OS X* 和 Ubuntu* Linux*。该工具为开发人员提供了一个完整的开发工作流程，用于在基于目标平台的设备上开发、调试、测试和部署其应用程序。
Intel® XDK 是一个面向初学者和经验丰富的开发人员的绝佳工具，它提供了一个简化的工作流程，使开发人员能够轻松地为多个应用商店和各种设备设计、构建和部署 Web 和混合应用程序。开发人员可以从空白项目开始，也可以使用现有的演示或其他模板。编辑通过开源 HTML5 Brackets* 编辑器支持。HTML5 Brackets* 编辑器提供了许多便捷的功能，如自动完成，并为开发、调试、构建和测试应用程序提供了所有相关的开发生命周期工具。
本文档旨在向新用户演示如何使用 HTML5、JavaScript 和 CSS3 创建原生 Web 应用程序。它将概述如何安装 Intel® XDK、创建一个简单的登录表单项目、对其进行样式设置，并在模拟器上进行测试。
本文开发的 कोड 将在未来用于为在其他团队成员撰写的几篇文章中提及的餐厅应用提供基于 Web 的资源访问。
其中一些文章的参考资料是
Intel® XDK 安装
在 http://xdk-software.intel.com 下载并安装最新版本的 Intel® XDK。该工具免费提供。您需要创建一个 Intel® XDK 账户才能在真实设备上启动和测试您的应用程序。有关如何在真实设备上运行应用程序的教程，请访问 使用 Intel® XDK 入门。如果您使用 Intel® XDK 中的模拟器测试应用程序，则无需帐户。
创建空白项目
您可以使用模板、演示或空白项目来启动一个项目。该工具包含一个简化的工作流程，引导开发人员完成应用程序开发的开发、测试、调试和部署阶段。“开发”选项卡中的文本编辑器基于 Brackets* 编辑器，您可以在其中编辑您的应用程序。Intel® XDK 文档 提供了关于如何使用工作流程每个选项卡的详细说明。
使用 HTML5、JavaScript 和 CSS3 创建登录表单
现在您可以编辑 index.html 来创建登录表单。首先，您需要从一个打开的 form 元素标签开始。用户名和密码的 input 类型为 text，并带有 placeholder。Placeholder 描述了输入字段的预期值。
<form action="" method="post" name="login" class="little-chef-form">
<label>
<span>Username:</span>
<input type="text" name="username" placeholder="Username" id="username" />
</label>
<label>
<span>Password:</span>
<input type="password" name="password" placeholder="Password" />
</label>
</form>
下一个 input 类型是 button。一旦用户单击登录按钮，JavaScript validateForm() 将被调用以验证登录表单。您可以使用 HTML5 来验证登录表单，但最好使用 JavaScript，因为某些 HTML5 属性仅限于最新浏览器。
<label>
<span> </span>
<input type="button" class="button" value="Login" onclick="return validateForm()" />
</label>
以下是使用 JavaScript 验证表单的示例。JavaScript 文件必须以 .js 扩展名保存。
function validateForm() {
var formUsername = document.forms.login.username.value;
var formPassword = document.forms.login.password.value;
// Validate username and password
if (formUsername === null || formUsername === "") {
alert("Username must be filled out");
}
else if (formPassword === null || formPassword === "") {
alert("Password must be filled out");
}
else if (formUsername.length < MINLENGTH || formPassword.length < MINLENGTH) {
alert("The minimum length of username and password at least " + MINLENGTH);
}
else {
// Call api function to check whether the username and password exist in the server
return;
}
alert("Login failed!!!");
}
如果用户登录失败，则清除表单并给予用户多次尝试的机会。如果用户成功登录，则清除并禁用表单，如下所示。
function clearAndDisableForm(form) {
if (form == formType.LOGIN_FORM) {
// Clear the form
document.forms.login.username.value = '';
document.forms.login.password.value = '';
// Diabled the form
document.forms.login.username.disabled = true;
document.forms.login.password.disabled = true;
}
}
使用 script 标签和 source 属性从 index.html 链接到外部脚本文件 "js/Login.js"。
<script src="js/Login.js" type="text/javascript"></script>
下面是一个完整的 HTML5 登录表单示例
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Little Chef Login</title>
<script src="js/Login.js" type="text/javascript"></script>
</head>
<body>
<form action="" method="post" name="login" class="little-chef-frm">
<h1>Little Chef Log in
<span>Please login or sellect other options </span>
</h1>
<label>
<span>Username:</span>
<input type="text" name="username" placeholder="Username" id="username" autofocus required />
</label>
<label>
<span>Password:</span>
<input type="password" name="password" placeholder="Password" />
</label>
<label>
<span> </span>
<input type="button" class="button" value="Login" onclick="return validateForm()" />
</label>
<label>
<span> </span>
<input type="button" class="button" value="Reset Password" onclick="return resetPassword()" />
</label>
<label>
<span> </span>
<input type="button" class="button" value="Register New User" onclick="return registerNewUser()" />
</label>
</form>
<table id="myTable"></table>
</body>
</html>
要设置登录表单的外观，请使用 CSS3。插入样式表的常见方法是外部、内部和内联。外部样式表非常适合为许多网页设置样式。每个页面都必须在 head 部分内包含一个指向样式表的链接，使用 <link> 标签。
<head>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</head>
要在输入文本和输入密码字段周围添加 1 像素的浅灰色边框，请使用“border: 1px solid #CCC”。使用六位十六进制颜色值，您可以设置文本、背景和边框的颜色。默认值为 #000000。您还可以使用颜色名称，如 red、green 和 blue 等，或者使用 HTML 颜色选择器。使用像素指定字段宽度的一种方法是“line-height:15px”。它还指定了两个段落之间行的间距。使用“margin-bottom: 16px”可以更改字段的底部外边距。同样，margin-right 和 margin-top 将定义字段的右边距和上边距。
.little-chef-form input[type="text"], .little-chef-form input[type="password"], .little-chef-form select{
border: 1px solid #CCC;
color: #888;
background-color: #000000
line-height:15px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
}
下面的示例对按钮的外观进行了样式设置。它指定了背景颜色、按钮文本颜色和边框。要设置按钮形状的样式，请使用 border-radius。“padding: 4px 25px 4px 25px”将指定按钮的大小。
.little-chef-form .button {
background: #EEE;
border: 1px solid #DDD;
padding: 4px 25px 4px 25px;
color: #333;
border-radius: 4px;
}
在模拟器中测试
Emulate 选项卡用于在一系列虚拟移动设备上测试应用程序的功能和布局。默认是带有 Android 设备的基础上的 Motorola Droid 2。
成功创建登录表单并在模拟器上测试后，您可以尝试创建密码重置和新用户注册表单。
摘要
Intel® XDK 是一个集成的端到端 HTML 跨平台应用程序开发工具。顶部的各种选项卡可轻松引导开发人员完成各种开发任务。该工具使开发人员能够非常轻松地将应用程序开发并部署到一个或多个支持的应用商店。本文档还向新用户演示了如何使用 Intel® XDK 创建原生 Web 应用程序。