J I A N G S U
U N I V E R S I T Y 通 信 综 合 课 程 设 计 报 告
2014年1月10日
学院名称： 计算机科学与通信工程学院 专业班级： 学生姓名： 学生学号： 指导教师：
目录
一、课程设学习内容 (1)
1、Android开发环境搭建 (1)
1.1Android开发准备工作 (1)
1.2安装JDK和配置Java开发环境 (1)
1.3 Eclipse的安装 (1)
1.4 SDK和ADT的安装和配置 (1)
1.5创建HelloWorld项目 (2)
1.6运行HelloWorld及模拟器的使用 (2)
2、jQuery Mobile简介 (2)
2.1jQuery 语法 (3)
2.2jQuery 选择器 (4)
2.3jQuery 事件 (4)
3、Jquery mobile案例开发 (5)
二、Android用户界面技术 (8)
1、Android基本UI组件 (8)
2、Activites (10)
3、UI设计工具droiddraw (10)
4、常用UI元素 (10)
5、UI布局 (12)
三、课程总结与个人学习心得 (14)
四、参考文献 (14)
一、课程设学习内容
1、Android开发环境搭建
1.1Android开发准备工作
配置Android开发环境之前，首先需要了解Android对操作系统的要求。它可以使用XP及以上版本、Mac OS、Linux等操作系统。Android开发所需软件包括：JDK、Eclipse、Android SDK、ADT。
1.2安装JDK和配置Java开发环境
1)登录http:，下载最新版JDK。
2)安装JDK，安装包中包含了JDK和JRE两部分，建议将它们安装在同一个
盘符下。双击安装程序，选择安装的目录，点击“下一步”，等待安装程序自动完成安装即可。
3)右键单击“我的电脑”，选择“属性”菜单项，选择“高级”选项卡，选择
“环境变量”，找到“Path”变量名（如果没有就新建一个名为“Path”的变量），点击“编辑”按钮，添加JDK安装目录中的“bin”文件夹路径。然后点击“确定”按钮完成。再找到“CLASSPATH”变量（如果没有，同样可以新建），输入JDK安装目录中“lib”以及“demo”的路径，单击“确定”
按钮完成。
4)安装配置完成之后，测试是否安装成功。点击开始→运行，输入“cmd”，打
开命令行模式。键入命令“java-version”，检测JDK是否安装成功。
1.3 Eclipse的安装
Eclipse的安装非常简单，直接将下载的压缩包解压即可。
1.4 SDK和ADT的安装和配置
Android SDK安装
1)解压缩下载好的SDK安装包到要安装SDK的路径，然后运行SDK Setup.exe。
2)点击“Install Selected”按钮，安装选中的软件包，在接下来出现的界面中依
次点击“Accept All”单选按钮和“Install Accepted”按钮，开始下载所选的安装包。下载完成之后，根据提示即可完成后续的安装操作。
1.5创建HelloWorld项目
1)打开Eclipse开发工具，新建一个项目，选择“Android Application Project”
子项。
2)在“Project name”文本框中输入“HelloWorld”，接下来默认设置，点击“Next”
按键，最后单击“Finish”按钮，完成Android项目的创建。
3)HelloWorld项目已经创建好，这个项目是由之前安装的ADT插件自动生成，
不用编写代码即可运行。
1.6运行HelloWorld及模拟器的使用
1)打开“Android SDK and A VD Manager”。
2)点击左边的“Virtual Device”选项，再点击右边的“New...”按钮，新建一
个A VD。
3)在“Name”标签处填写A VD的名字，在“Target”标签处选择API等级，
在“Size”标签处填写要创建的SD卡的大小，在“Skin”标签中设置模拟器的风格。保存设置。
4)选择设置好的虚拟器，单击“start”→单击“Launch”即可运行HelloWorld
项目，等待模拟器启动。
2、jQuery Mobile简介
jQuery Mobile是一个用来构建跨平台移动Web应用程序的新UI框架，具有使用简单的特点。在短短几分钟内，可以创建出能够在当今可用的近乎所有手机、平板电脑、台式机和电子阅读器设备上运行的优化移动应用程序（app）。通过一个jQuery Mobile代码库，我们几乎可以为所有消费者创建统一标准的体验。当Web设计人员或开发人员需要一个简单的框架来开发丰富的移动Web体验时，jQuery Mobile就成为理想之选。而且这个丰富的移动体验并不局限与Web。jQuery Mobile app也可以使用混合技术来编译，从而将它分发在开发者最喜欢的本地app商店。
jQuery Mobile的重要特性：
带有浏览器的所有设备都可以访问jQuery Mobile app，而且这些app在优化
之后可以在当今几乎所有可用的手机、平板电脑、台式机，以及电子阅读器设备上运行。
jQuery Mobile应用程序也可以利用我们在Web上已经相当习惯的及时部署能力。
一个jQuery Mobile代码库可以在所有可以支持的平台上呈现出一致性，而且无需进行自定义。与为每一个OS或客户端构建app相比，这是一种费用相当低廉的解决方案。
jQuery Mobile是一个简化的标记驱动的框架，Web设计人员和开发人员对这样的框架并不陌生。但是，开发者可以用100%的标记来构建jQuery Mobile app。
jQuery Mobile利用日渐增强的技术为所有的A级设备提供了非常丰富的用户体验，同时为较老的C级浏览器提供了非常实用的用户体验。
jQuery Mobile UI可以根据设备的不同尺寸进行呈现，其中包括电话、平板电脑、台式机或电视。
jQuery Mobile支持主题化的设计，这使得设计人员能够在全局快速地重新设计他们的UI。
所有的jQuery Mobile应用程序都是508兼容的。
2.1jQuery 语法
jQuery 语法是为HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义jQuery
选择符（selector）“查询”和“查找”HTML 元素
jQuery 的action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有class="test" 的所有元素
$("#test").hide() - 隐藏所有id="test" 的元素
1)文档就绪函数
所有jQuery 函数位于一个document ready 函数中：
$(document).ready(function(){
--- jQuery functions go here ----
