J I A N G S UU 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 ----});这是为了防止文档在完全加载(就绪)之前运行jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。
下面是两个具体的例子:试图隐藏一个不存在的元素获得未完全加载的图像的大小2.2jQuery 选择器学习jQuery 选择器是如何准确地选取希望应用效果的元素。
jQuery 元素选择器和属性选择器允许通过标签名、属性名或内容对HTML 元素进行选择。
选择器允许对HTML 元素组或单个元素进行操作。
1)jQuery 元素选择器jQuery 使用CSS 选择器来选取HTML 元素。
例:$("p") 选取<p> 元素。
$("p.intro") 选取所有class="intro" 的<p> 元素。
$("p#demo") 选取所有id="demo" 的<p> 元素。
2)jQuery 属性选择器jQuery 使用XPath 表达式来选择带有给定属性的元素。
例:$("[href]") 选取所有带有href 属性的元素。
$("[href='#']") 选取所有带有href 值等于"#" 的元素。
$("[href!='#']") 选取所有带有href 值不等于"#" 的元素。
$("[href$='.jpg']") 选取所有href 值以".jpg" 结尾的元素。
3)jQuery CSS 选择器jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
2.3jQuery 事件1)jQuery 事件函数jQuery 事件处理方法是jQuery 中的核心函数。
事件处理程序指的是当HTML 中发生某些事件时所调用的方法。
术语由事件“触发”(或“激发”)经常会被使用。
通常会把jQuery 代码放到<head>部分的事件处理方法中:例:<html><head><scripttype="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){$("p").hide();});});</script></head>2)单独文件中的函数如果网站包含许多页面,并且您希望您的jQuery 函数易于维护,那么请把您的jQuery 函数放到独立的.js 文件中。
当我们在教程中演示jQuery 时,会将函数直接添加到<head> 部分中。
不过,把它们放到一个单独的文件中会更好,就像这样(通过src 属性来引用文件):例:<head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="my_jquery_functions.js"></script></head>3、Jquery mobile案例开发用户界面登录主代码:<!DOCTYPE html><html><head><meta name="viewport" content="initial-scale=1, width=device-width"/> <title>Welcome</title><script type="text/javascript" src="cordova.js"></script><link rel="stylesheet" href="js/jquery.mobile-1.4.4.min.css"/><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><script tyoe="text/javascript" src="js/jquery.mobile-1.4.4.min.js"></script></head><body><div data-role="page" id="homePage"><div data-role="header" date-theme='b'><a href="index.html" data-icon="home">Home</a><h1>Welcome</h1><a href="contact.html" data-icon="info">Contact</a></div><div data-role="content"><div data-role="fieldcontain"><label for="name">Name:</label><input type="text" name="name" id="name" value="" /><label for="password">Password:</label><input type="text" name="password" id="password" value="" /></div><button class="ui-btn" id="submit_button">Login</button> </div><script>$("#homePage").on("pagecreate", function(){$("#submit_button").on("tap",function(){var a1=$("input[name='name']");var a2=$("input[name='password']");=a1.val();localStorage.password=a2.val();alert("Username:"+a1.val()+"\nPassword:"+a2.val());window.location.href='success.html';});});</script></body></html>跳转代码:<body><div data-role="page" id="userPage"><div data-role="header" data-theme='b'><h1>Detail</h1><a href="index.html" class="ui-btn-left" data-icon="back">back</a></div><div data-role="footer" data-theme='b' data-position="fixed" data-id="footernav" ><h3>Copyright Megacorp© 2015</h3></div></body><script>document.write("<p>Name:"++"</p>");document.write("<p>Password:"+localStorage.password+"</p>");</script>仿真效果:二、Android用户界面技术1、Android基本UI组件1)Activity(活动)Activity是为用户操作而展示的可视化用户界面。