为 Cordova 应用程序开发 UI

improve this page | report issue

概述

设计并实现应用程序的 UI 是开发流程中的重要部分。通过结合使用 MobileFirst Eclipse 插件与 Thym 插件,可在开发 cordova 应用程序的过程中提供帮助。 从头开始为每个组件编写定制的 CSS 样式可以实现很高的定制程度,但这样做需要大量资源。 有时,使用现有 JavaScript UI 框架是更好的方法。 本主题描述如何使用 MobileFirst Studio 的 Eclipse 中提供的两个 UI 框架(jQuery Mobile 和一个所见即所得编辑器)来开发 MobileFirst 应用程序。

要使用 MobileFirst Eclipse 插件为 cordova 应用程序开发 UI,请执行以下操作:

  1. 下载 Eclipse。
  2. 从应用市场安装 Thym 插件。
  3. 从应用市场安装 MobileFirst 平台插件

所见即所得编辑器

MobileFirst 平台 eclipse 插件随附一个基本的所见即所得编辑器,为开发人员在开发移动窗口小部件时提供便利。 该编辑器提供基本的选用板,供用户拖放简单的按钮或文本框以及其他 HTML 窗口小部件。这是一种“移动应用程序快速开发”工具,用于支持用户快速开发基本的 cordova 应用程序。

所见即所得编辑器

jQuery Mobile

jQuery 是快速简洁的 JavaScript 框架,可简化快速 Web 开发工作的 HTML 文档流、事件处理、动画和 Ajax 交互。jQuery Mobile 是针对智能手机和平板电脑的 Web 框架,对触摸操作进行了优化。jQuery Mobile 需要运行 jQuery。

要将 jQuery Mobile 添加到应用程序,请执行以下操作:

  1. 通过单击文件 ->新建 -> 新建 Hybrid Mobile (Cordova) 应用程序项目,在 eclipse 中创建 Thym 项目。
  2. 下载 jQuery Mobile 包
  3. 将下载的 jQuery Mobile 包复制到混合应用程序的 www 目录中,如下图所示:www 目录
  4. 打开主 index.html,如截屏所示,并将 jQuery 引用(如代码片段中所示)添加到项目:添加 JQuery 引用

       <!DOCTYPE HTML>
       <html>
           	<head>
           		<meta charset="UTF-8">
           		<title>appName</title>
           		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
           		<!--
           			<link rel="shortcut icon" href="images/favicon.png">
           			<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
           		-->
           		<link href="jqueryMobile/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet">
           		<link href="jqueryMobile/demos/css/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet">
           		<link href="jqueryMobile/jquery.mobile-1.4.5.min.css" rel="stylesheet">
           		<link href="jqueryMobile/jquery.mobile.theme-1.4.5.css" rel="stylesheet">
           		<link href="jqueryMobile/jquery.mobile.theme-1.4.5.min.css" rel="stylesheet">
           		<link href="jqueryMobile/jquery.mobile.external-png-1.4.5.min.css" rel="stylesheet">
           		<link href="jqueryMobile/jquery.mobile.inline-png-1.4.5.css" rel="stylesheet">
           		<link href="jqueryMobile/demos/css/jquery.mobile.inline-svg-1.4.5.min.css" rel="stylesheet">
           		<link href="jqueryMobile/jquery.mobile-1.4.5.css" rel="stylesheet">
           		<link href="jqueryMobile/jquery.mobile.inline-png-1.4.5.min.css" rel="stylesheet">
           		<link href="jqueryMobile/jquery.mobile.external-png-1.4.5.css" rel="stylesheet">
           		<link href="jqueryMobile/demos/css/jquery.mobile.inline-png-1.4.5.min.css" rel="stylesheet">
           		<link href="jqueryMobile/demos/theme-classic.css" rel="stylesheet">
           		<link href="jqueryMobile/jquery.mobile.inline-svg-1.4.5.css" rel="stylesheet">
           		<link href="jqueryMobile/jquery.mobile.structure-1.4.5.css" rel="stylesheet">
           		<link href="jqueryMobile/demos/css/jquery.mobile-1.4.5.min.css" rel="stylesheet">
           		<link href="jqueryMobile/jquery.mobile.inline-svg-1.4.5.min.css" rel="stylesheet">
           		<link href="jqueryMobile/demos/css/jquery.mobile.theme-1.4.5.min.css" rel="stylesheet">
           		<link href="jqueryMobile/demos/css/jquery.mobile.external-png-1.4.5.min.css" rel="stylesheet">
           		<link rel="stylesheet" href="css/main.css">
           		<script>window.$ = window.jQuery = WLJQ;</script>
           		<script src="jqueryMobile/demos/jquery.js"></script>
           		<script src="jqueryMobile/demos/jquery.mobile-1.4.5.js"></script>
           	</head>
           	<body style="display: none;">
           		<div data-role="page" id="page">
           			<div data-role="content" style="padding: 15px">
           				<!--application UI goes here-->
           				Hello MobileFirst
           			</div>
           		</div>
           		<script src="js/initOptions.js"></script>
           		<script src="js/main.js"></script>
           		<script src="js/messages.js"></script>
           	</body>
       </html>
    
Last modified on November 17, 2017