一个基于sqlite3的air应用demo

jushi1988

浏览: 66350 次
性别:
来自: 黑龙江

最近访客更多访客>>

ttcool

wangchun123

zjy_369

NuHo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Flex

AIR 网络应用企业应用应用服务器互联网

在Demo开始之前，先找了找AIR的资料，如下：

一、定义
RIA是Rich Internet Applications的缩写，翻译成中文为丰富互联网应用程序。丰富互联网应用程序是将桌面应用程序的交互的用户体验与传统的Web应用的部署灵活性结合起来的网络应用程序。
RIA 是集桌面应用程序的最佳用户界面功能与Web应用程序的普遍采用和快速、低成本布署以及互动多媒体通信的实时快捷于一体的新一代网络应用程序。RIA中的 Rich Client（丰富客户端）提供可承载已编译客户端应用程序（以文件形式，用HTTP传递）的运行环境，客户端应用程序使用异步客户/服务器架构连接现有的后端应用服务器，这是一种安全、可升级、具有良好适应性的新的面向服务模型，这种模型由采用的Web服务所驱动。结合了声音、视频和实时对话的综合通信技术使RIA具有前所未有的网上用户体验。

二、技术特性
1、RIA （WebTop）具有的桌面应用程序的特点包括：
（1）在消息确认和格式编排方面提供互动用户界面；
（2）在无刷新页面之下提供快捷的界面响应时间；
（3）提供通用的用户界面特性如拖放式（drag and drop）及在线和离线操作能力。
2、RIA（WebTop）具有的Web应用程序的特点包括：
（1）用户友好性和交互性：传统网络程序的开发是基于页面的、服务器端数据传递的模式，把网络程序的表示层建立于HTML页面之上，而HTML是适合于文本的，传统的基于页面的系统已经渐渐不能满足网络浏览者的更高的、全方位的体验要求。RIA应用程序展现给用户的界面是像安装在本地桌面系统上的GUI程序界面，它有很多的复杂界面交互元素如树、菜单、网格等，用户的友好性和交互性大大增强。
（2）跨平台兼容性：WebTop客户端支持flash 的浏览器，解析表示层服务器发来的Flash内容。Flash客户端是Internet历史上最普及的软件，它在98％的浏览器上运行。目前主流操作系统Windows、Linux、苹果的OS 10 上的浏览器 IE、Firefox、Netscape、 Opera 都支持 Flash 插件。甚至还可以在一些性能良好的网络终端设备，如：PDA、智能手机、机顶盒等上使用。
（3）一次加载，多次使用：目前的浏览器都用一种缓存机制，即将曾经访问过的网络资源放到硬盘上的缓存文件夹里。在用户下次访问这些网络资源时，浏览器只是向服务器寻问这些资源是否被修改，如果服务器回答没有被修改，那么浏览器会使用本地缓存的文件。在浏览器提供这种技术的背景下， WebTop的平台的前端一旦加载过一次，以后将不用从网络上下载。既降低了网络流量，又减轻了服务器的负担。
（4）客户端数据缓存功能：RIA技术是面向交互的，交互密集的应用意味着虽然用户向网络后台发送的请求的次数很多，但是所需要的数据量却相对较少。传统的网页技术只能将所需处理的数据分散的分布在每个页面中，随着页面的跳转，依次从后台将数据从服务器端取回。在这种情况下，用户即使完成一组简单的功能操作，浏览器端同常也需要向服务器发送多次数据请求，即增加了服务器的负载，又降低了用户的操作效率。WebTop 平台基于RIA技术所赋予的强大客户端处理能力，可以缓存大量的客户端数据，提供了一定程度的离线操作功能。这样，在提高了用户交互效率的同时，还能较大程度的降低服务器的负载。
（5）高效的网络数据信息传输：客户端与服务器端主要采取XML数据和 WebServices两种方式交互，在这两种方式下，客户端和服务器端仅仅传递必要的数据信息，这与传统HTML网页的交互数据和显示信息混在一起传输的方式相比他大大降低了数据通讯量，降低了对网络带宽的要求基于RIA技术的WebTop应用对于多次请求的处理情况能够有更平均更稳定的性能表现，而传统的HTML应用在业务复杂度提高时表现出极大的限制。
（6）多个应用同时工作：利用WebTopp平台，我们可以像在PC的桌面上一样，打开几个应用程序同时工作而互不干扰，也可以在不同的应用之间进行一些互操作。而在目前基于传统网页技术的应用程序中，如果存在多个应用，则几乎不可能做到这一点。
（7）快速的开发和部署：WebTop平台提供了一套API，利用这些API可以快速开发基于WebTop的网络应用。并且通过配置文件就可以将这些应用部署到WebTop平台中，是非常灵活的开发方式。
（8）高度的个性化可配置性：传统的基于web的应用只能在显示风格上略作配置。然而WebTop 平台可以最大限度的给予用户个性化的定制空间，用户不仅可以定义显示风格、还可以定义平台上应用的种类、个数、大小。
（9）具有通信包括实时互动的声音和图像的特点，充分利用了被广泛采纳的互联网标准。

三、应用价值
对于企业来说，选择RIA的好处在于：
1、RIA可以继续使用现有的应用程序模型（包括J2EE和.NET），因而无需大规模替换现有的Web应用程序。通过Rich Client技术，可以轻松构建更为直观、易于使用、反应更迅速并且可以脱机使用的应用程序。
2、RIA可以帮助企业提供多元化的重要业务效益，包括产品提高销量、提高品牌忠诚度、延长网站逗留时间、较频繁的重复访问、减少带宽成本、减少支持以及增强客户关系等，具体表现如下：
（1）在线上更密切的接触、引导和聆听顾客，有如亲身和顾客打交道一般；以提高忠诚度、改善服务、加深顾客关系、突出公司形象或引导产品开发。
（2）利用声音、图像、文本和图形来创造引人入胜的网站，以制造线索、增加销量、简化通信和创造一个值得多次访问的独特在线体验。
（3）将一般网上复杂的过程如注册、配置或采购加以简化，以提高线索量、销量、预定、逗留在网站的时间和重复访问次数。
（4）将信息以清楚、创新、直觉和有效的方式向雇员、管理层和伙伴表达，以提高生产率、信息共享、决策和竞争优势。
（5）为基础网络服务提供一个吸引人兼高度互动的表达层，容许用户在线和离线操作。
（6）减少高通信量网站因高度页面刷新率的带宽成本。
（7）通过互联网渠道显著提高产品和服务销量。
（8）利用比其它网络科技较低的成本建设一个吸引人和高度互动的网站或应用。

二、开始代码工作：

因为就是一个CURD的demo，所有做的有点粗糙，一个mxml搞定。如下：

1.初始化部分主要是连接数据库，通过myTestdb.db创建。

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12" 
layout="absolute" width="650" height="650" creationComplete="init();initApp();" 
viewSourceURL="srcview/index.html">
<mx:Script>

<![CDATA[
		import mx.core.Window;
		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
		import mx.managers.PopUpManager;
		
		private var con:SQLConnection;
		private var createStmt:SQLStatement;
		private function init():void
		{
 			var file:File = File.applicationStorageDirectory.resolvePath("myTestdb.db");
                                    //先通过应用程序的存储路径找到myTestdb.db 如果没有自动创建一个同名的db文件
 			con = new SQLConnection();
 			var stmt:SQLStatement = new SQLStatement();
 
 			try
 		{
 		 	con.open(file);
  			stmt.sqlConnection = con;   			
  			createStmt = new SQLStatement();
  			createStmt.sqlConnection = con; 
  			var sql:String = "CREATE TABLE IF NOT EXISTS emp (" +  
    						 "empId INTEGER PRIMARY KEY AUTOINCREMENT, " +
    						 "firstName TEXT, " +//文本字符串格式
    						 "lastName TEXT, " + 
 							 "salary NUMERIC CHECK (salary > 0)"+")";
    
 			createStmt.text = sql;
 			createStmt.execute();
 			
 			}
 			catch(error:SQLError)
 			{
 			 Alert.show(error.message);
  			 Alert.show(error.details);
 			}
		}

</mx:Script>

2.查询列表

[Bindable]
		private var list:ArrayCollection;			
		private function initApp():void
		{
			list = new ArrayCollection();
			var stmt:SQLStatement = new SQLStatement();
 			stmt.sqlConnection = con; 
 			stmt.text = "select empId,firstName,lastName,salary from emp order by empId desc";
 			stmt.execute();
	
			var result:SQLResult = stmt.getResult();
  			if(result.data!=null)
 			{
  				var numResults:int =result.data.length;
  				var output:String="";  
 				for (var i:int = 0; i < numResults; i++) 
     			{ 
         			var row:Object = result.data[i]; 
         			list.addItem({empId:row.empId,firstName:row.firstName,
                                                          lastName:row.lastName,salary:row.salary});
     			}
     			this.lemp.text = "查询的结果如下：";
  			}
		}

3. 更新用户

//更新
		public function updateEmp():void
		{
			var stmt:SQLStatement = new SQLStatement();
 			stmt.sqlConnection = con;
 			var sql:String = "update emp set firstName=:firstName,lastName=:lastName,salary=:salary where empId=:empId";
 			var firstname:String = this.showdata.selectedItem.firstName;
 			var empid:String = this.showdata.selectedItem.empId;
 			var lastname:String = this.showdata.selectedItem.lastName;
 			var salary:String = this.showdata.selectedItem.salary;
 	
 			stmt.parameters[":firstName"]=firstname;
 			stmt.parameters[":lastName"]=lastname;
 			stmt.parameters[":salary"]=salary;
 			stmt.parameters[":empId"]=empid;
 			stmt.text = sql;
 			stmt.execute();
 			initApp();//刷新数据
 			var result:SQLResult = stmt.getResult();
 			var count:Number = result.rowsAffected;
 			Alert.show("成功修改了："+count+" 行..");
		}

4. 增加用户

//增加
		private function addUser():void
		{
		    //adduserwin = new addUserWin();
		    //adduserwin = addUserWin(PopUpManager.createPopUp(this,addUserWin,false,null));
		    //PopUpManager.centerPopUp(adduserwin);
		   this.form.visible = true;
		   this.afirstName.setFocus();
		}
		
		private function addConfirm():void
		{
			var stmt:SQLStatement = new SQLStatement();
 			stmt.sqlConnection = con;
 			var firstName:String = this.afirstName.text;
			var lastName:String = this.alastName.text;
			var salary:Number = Number(this.asalary.text);
			if(firstName ==''|| lastName ==''|| salary.toString() =='')
			{
				Alert.show("请填写完整信息！！","注意");
				return;
			}
			var sql:String = "INSERT INTO emp(firstName,lastName,salary) VALUES (@firstName, @lastName, @salary)";
			stmt.text = sql;
  			stmt.parameters["@firstName"]=firstName;
  			stmt.parameters["@lastName"]=lastName;
  			stmt.parameters["@salary"]=salary;
  			stmt.execute();
  			initApp();
  			
  			var result:SQLResult = stmt.getResult();
    		var count:Number = result.rowsAffected;
    		this.afirstName.text = '';
			this.alastName.text = '';
			this.asalary.text = '';
			this.afirstName.setFocus();
    		Alert.show("添加员工:"+firstName+lastName+"成功!!影响："+count+"行..","提示");		
		}

5. 清空

private function release():void
		{
			this.form.visible = false;
			this.afirstName.text = '';
			this.alastName.text = '';
			this.asalary.text = '';
			this.afirstName.setFocus();
		}

6.搜索功能

//搜索
		private var responder:Responder;
		private function search():void
		{
			list = new ArrayCollection();
			var search:String = this.soInput.text;
			var stmt:SQLStatement = new SQLStatement();
 			stmt.sqlConnection = con;
 			var sql:String = "select empId,firstName,lastName,salary from emp where lastName like :str";
 			stmt.text = sql;
 			stmt.parameters[":str"]= "%"+search+"%";
 			stmt.execute();
 			
 			var result:SQLResult = stmt.getResult();
 			if(result.data!=null)
 			{
  				var numResults:int =result.data.length;
  				var output:String="";
 				for (var i:int = 0; i < numResults; i++) 
     			{ 
         			var row:Object = result.data[i];
         			list.addItem({empId:row.empId,firstName:row.firstName,lastName:row.
                                                        lastName,salary:row.salary});
     			}
     			this.lemp.text = "查询的结果如下：";
  			}else
  			{
  				Alert.show("抱歉！没有搜索到您想要的结果!!","提示");
  				return;
  			}
		}

第二部分： UI界面设计

做的粗糙，但是基本的样子是初来了。代码如下：

<mx:Button click="initApp()" label="查询所有员工" x="212" y="136" fontSize="12"/>
	<mx:Button click="del()" label="删除员工" x="361" y="42" fontSize="12"/>
	<mx:TextInput id="empid" width="100" x="242" y="44" backgroundColor="#EAE5E5"/>
	<mx:Label text="请输入员工编号:" x="126" y="43" fontSize="13" color="#EE4E16" fontWeight="bold"/>		

	<mx:HRule id="hr" width="100%"/>
	<mx:DataGrid id="showdata" dataProvider="{list}" x="113" y="212" textAlign="center" editable="true" color="#894803" fontSize="12" alternatingItemColors="[#C7C0C0, #FFFFFF]">
		<mx:columns>
			<mx:DataGridColumn dataField="empId" headerText="员工编号" width="80" editable="false"/>
			<mx:DataGridColumn dataField="firstName" headerText="员工姓氏" editable="true" width="80"/>
			<mx:DataGridColumn dataField="lastName" headerText="员工名字" editable="true" width="80"/>
			<mx:DataGridColumn dataField="salary" headerText="员工工资" editable="true" width="100"/>
			<mx:DataGridColumn headerText="操作" width="80">
				<mx:itemRenderer>
					<mx:Component>
						<mx:LinkButton label="更新" click="outerDocument.updateEmp()" fontSize="11"/>
					</mx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
	<mx:Label x="242" y="178" id="lemp" name="lemp" text="员工列表" width="150" fontSize="15" color="#6E3002" fontWeight="bold" textAlign="center"/>
	<mx:Button x="335" y="134" label="增加员工" fontSize="12" click="addUser();"/>
	<mx:HRule width="100%" horizontalCenter="0" verticalCenter="-152"/>
	<mx:Form id="form" name="form" visible="false" fontSize="13" horizontalCenter="0" backgroundColor="#E6E2E2" verticalCenter="214">
		<mx:FormItem label="员工姓氏：" borderColor="#AEBFCA" borderStyle="none" borderThickness="1">
			<mx:TextInput id="afirstName" name="afirstName" width="160" color="#000000"/>
		</mx:FormItem>
		<mx:FormItem label="员工名字：" borderColor="#AEBFCA" borderStyle="none" borderThickness="1">
			<mx:TextInput  id="alastName" name="alastName" width="160" displayAsPassword="false" borderColor="#B7BABC"/>
		</mx:FormItem>
		<mx:FormItem label="员工工资：" borderColor="#AEBFCA" borderStyle="none" borderThickness="1">
			<mx:TextInput  id="asalary" name="asalary" width="160" displayAsPassword="false" borderColor="#B7BABC"/>
		</mx:FormItem>
		<mx:HBox width="225">
			<mx:Spacer width="50"/>
			<mx:Button label="确定"  fontWeight="normal" click="addConfirm();"/>
			<mx:Spacer width="15"/>
			<mx:Button label="取消"  click="release()" fontWeight="normal"/>
		</mx:HBox>
	</mx:Form>
	<mx:Label x="127" y="87" text="搜索员工名字：" width="110" height="21" fontSize="13" color="#F80718" fontWeight="bold"/>
	<mx:TextInput x="244" y="88" width="218" id="soInput" backgroundColor="#ECEBEB"/>
	<mx:Button x="470" y="88" label="GO" cornerRadius="10" color="#AD6A0A" fontSize="12" click="search();"/>