Flex手机项目 - 使用SQLite存储数据(附:电话簿实例)
作者:hangge | 2015-01-06 10:54
SQLite是一个实现了SQL(Structured Query Language,结构化查询语言)数据库引擎的软件库,允许在基于Flash/Flex的移动应用程序中储存并使用复杂的数据。由于AIR的跨平台特性,可以轻松的运行在android和ios系统下。
下面通过一个电话簿的例子,展示as对SQLite的各种操作,功能如下:
1,创建SQLite数据库directory.db,以及联系人表Users
2,加载联系人并显示在List上
3,可新增联系人
4,可修改联系人
5,可删除联系人
效果图如下:



代码结构如下:

代码如下:
--- 主应用文件 MaintainingDataApp.mxml ---
--- 数据库连接页面 MaintainingDataAppHome.mxml ---
--- 电话簿页面 UserView.mxml ---
--- List渲染器 UserItemRenderer.mxml ---
--- 联系人编辑页面 UpdateUserView.mxml ---
源码下载:
MaintainingDataApp.zip
下面通过一个电话簿的例子,展示as对SQLite的各种操作,功能如下:
1,创建SQLite数据库directory.db,以及联系人表Users
2,加载联系人并显示在List上
3,可新增联系人
4,可修改联系人
5,可删除联系人
效果图如下:



代码结构如下:

代码如下:
--- 主应用文件 MaintainingDataApp.mxml ---
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.MaintainingDataAppHome"
applicationDPI="240">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|View
{
backgroundColor:#999999;
color:#454545;
}
</fx:Style>
</s:ViewNavigatorApplication>
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="数据管理-电话簿">
<fx:Script>
<![CDATA[
import flash.data.SQLConnection;
import flash.data.SQLStatement;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;
import flash.filesystem.File;
import flash.net.URLLoader;
import flash.net.URLRequest;
import air.net.URLMonitor;
private var urlMonitor:URLMonitor;
private var urlLoader:URLLoader;
private var urlRequest:URLRequest;
private var sqlConnection:SQLConnection;
private var db:File;
/**
* 打开数据库
*/
private function openDb():void
{
db = File.applicationStorageDirectory.resolvePath("directory.db");
sqlConnection = new SQLConnection();
sqlConnection.addEventListener(SQLErrorEvent.ERROR, onSQLError);
//判断市数据库是否存在
if(db.exists)
{
sqlConnection.addEventListener(SQLEvent.OPEN, onOpenDb);
dbPath.text = db.nativePath;
} else {
sqlConnection.addEventListener(SQLEvent.OPEN, onCreateDb);
}
sqlConnection.openAsync(db);
}
/**
* 创建数据库成功
*/
private function onCreateDb(event:SQLEvent):void
{
dbStatus.text = "数据库创建成功...";
createUsersTable();
}
/**
* 连接数据库成功
*/
private function onOpenDb(e:SQLEvent):void
{
dbStatus.text = "数据库连接成功...";
if(SQLConnection(e.target).connected)
{
viewBtn.visible = true;
}
dbBtn.enabled = false;
}
/**
* SQL执行失败
*/
private function onSQLError(e:SQLErrorEvent):void
{
var err:String = "Error id:" + e.error.errorID
+ "\nDetails:" + e.error.details;
dbStatus.text = err + "Error";
dbBtn.enabled = false;
}
/**
* 创建用户表
*/
private function createUsersTable():void
{
var sqlText:String = "CREATE TABLE "
+ "Users(ID INTEGER PRIMARY KEY, "
+ "NAME TEXT, TELEPHONE TEXT)";
var createTableSQL:SQLStatement = new SQLStatement();
createTableSQL.addEventListener(SQLEvent.RESULT, onUsersTable);
createTableSQL.addEventListener(SQLErrorEvent.ERROR, onSQLError);
createTableSQL.sqlConnection = sqlConnection;
createTableSQL.text = sqlText;
createTableSQL.execute();
}
/**
* 用户表创建成功响应
*/
private function onUsersTable(e:SQLEvent):void
{
dbStatus.text = "数据表Users创建成功。";
dbBtn.setStyle('chromeColor', '#51B22F' );
}
/**
* 进入电话簿视图
*/
private function viewDirectory():void
{
navigator.pushView(views.UserView, sqlConnection);
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingRight="20"
paddingTop="20" paddingBottom="20"/>
</s:layout>
<s:VGroup width="100%">
<s:Label id="dbStatus" width="100%" height="25"
paddingLeft="5" fontSize="18" text="数据库状态"/>
<s:TextArea id="dbPath" width="100%" height="140"
fontSize="18" prompt="数据库路径"/>
</s:VGroup>
<s:HGroup width="100%" height="65" verticalAlign="middle">
<s:Button id="dbBtn" label="连接数据库" height="50" click="openDb()"/>
</s:HGroup>
<s:HGroup width="100%" height="50">
<s:Button id="viewBtn" height="50" visible="false"
label="查看电话簿" click="viewDirectory()"/>
</s:HGroup>
</s:View>
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="电话薄"
viewActivate="onViewActive()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var sqlConnection:SQLConnection;
/**
* 页面激活响应
*/
private function onViewActive():void
{
selectUsers();//加载用户列表
}
/**
* 加载用户列表
*/
private function selectUsers():void
{
sqlConnection = SQLConnection(data);
var sqlText:String = "SELECT * FROM Users";
var selectAllSQL:SQLStatement = new SQLStatement();
selectAllSQL.addEventListener(SQLEvent.RESULT, onSelectUsers);
selectAllSQL.addEventListener(SQLErrorEvent.ERROR, onSQLError);
selectAllSQL.sqlConnection = sqlConnection;
selectAllSQL.text = sqlText;
selectAllSQL.execute();
}
/**
* 用户列表加载成功
*/
private function onSelectUsers(e:SQLEvent):void
{
var selectUsersSQL:SQLStatement = SQLStatement(e.target);
var result:SQLResult = selectUsersSQL.getResult();
if(result.complete)
{
if(result.data)
{
usersList.dataProvider = new ArrayCollection(result.data);
}
}
}
/**
* 添加联系人
*/
private function addUser():void
{
var dataObj:Object =
{
sqlConnection:sqlConnection,
sqlType:"INSERT"
};
navigator.pushView(views.UpdateUserView, dataObj);
}
/**
* 修改联系人
*/
private function updateUser(i:int):void
{
var userObj:Object = usersList.dataProvider.getItemAt(i);
var dataObj:Object =
{
sqlConnection:sqlConnection,
id:userObj.ID,
name:userObj.NAME,
telephone:userObj.TELEPHONE,
sqlType:"UPDATE"
};
navigator.pushView(views.UpdateUserView, dataObj);
}
/**
* 删除联系人
*/
private function deleteUser(i:int):void
{
var userObj:Object = usersList.dataProvider.getItemAt(i);
var sqlText:String = "DELETE FROM Users WHERE ID = :Id";
var deleteUserSQL:SQLStatement = new SQLStatement();
deleteUserSQL.sqlConnection = sqlConnection;
deleteUserSQL.addEventListener(SQLEvent.RESULT, onDeleteUser);
deleteUserSQL.addEventListener(SQLErrorEvent.ERROR, onSQLError);
deleteUserSQL.text = sqlText;
deleteUserSQL.parameters[":Id"] = userObj.ID;
deleteUserSQL.execute();
}
/**
* 联系人删除响应
*/
private function onDeleteUser(e:SQLEvent):void
{
dbStatus.text = "数据删除成功";
selectUsers();
}
/**
* SQL执行失败响应
*/
private function onSQLError(e:SQLErrorEvent):void
{
dbStatus.text = e.error.errorID.toString();
}
/**
* 显示隐形底部菜单
*/
private function toggleMenu(toggle:Boolean):void
{
mx.core.FlexGlobals.topLevelApplication.viewMenuOpen = toggle;
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingRight="20"
paddingTop="10" paddingBottom="10">
</s:VerticalLayout>
</s:layout>
<s:Label id="dbStatus" width="100%" height="40"
color="#454545" text="加载联系人....." verticalAlign="middle"/>
<s:Label width="100%" height="50" fontSize="14"
text="SELECT * FROM Users" verticalAlign="middle"/>
<s:List id="usersList"
itemRenderer="views.components.renderers.UserItemRenderer"
click="toggleMenu(true)" width="100%" height="55%"
enabled="true" selectedIndex="0"/>
<s:HGroup width="100%" height="50" gap="16">
<s:Button click="addUser()" label="新增联系人"/>
</s:HGroup>
<s:viewMenuItems>
<s:ViewMenuItem label="修改" focusColor="#51B22F"
click="updateUser(usersList.selectedIndex)"/>
<s:ViewMenuItem label="取消" click="toggleMenu(false)"/>
<s:ViewMenuItem label="删除" focusColor="#CB0909"
click="deleteUser(usersList.selectedIndex)"/>
</s:viewMenuItems>
</s:View>
<?xml version="1.0" encoding="utf-8"?> <s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" labelField="NAME" messageField="TELEPHONE" alternatingItemColors="[0xCCCCCC, 0xEEEEEE]" selectionColor="#68bafa"> </s:IconItemRenderer>
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="电话薄"
viewActivate="onViewActive()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var sqlConnection:SQLConnection;
/**
* 页面激活响应
*/
private function onViewActive():void
{
selectUsers();//加载用户列表
}
/**
* 加载用户列表
*/
private function selectUsers():void
{
sqlConnection = SQLConnection(data);
var sqlText:String = "SELECT * FROM Users";
var selectAllSQL:SQLStatement = new SQLStatement();
selectAllSQL.addEventListener(SQLEvent.RESULT, onSelectUsers);
selectAllSQL.addEventListener(SQLErrorEvent.ERROR, onSQLError);
selectAllSQL.sqlConnection = sqlConnection;
selectAllSQL.text = sqlText;
selectAllSQL.execute();
}
/**
* 用户列表加载成功
*/
private function onSelectUsers(e:SQLEvent):void
{
var selectUsersSQL:SQLStatement = SQLStatement(e.target);
var result:SQLResult = selectUsersSQL.getResult();
if(result.complete)
{
if(result.data)
{
usersList.dataProvider = new ArrayCollection(result.data);
}
}
}
/**
* 添加联系人
*/
private function addUser():void
{
var dataObj:Object =
{
sqlConnection:sqlConnection,
sqlType:"INSERT"
};
navigator.pushView(views.UpdateUserView, dataObj);
}
/**
* 修改联系人
*/
private function updateUser(i:int):void
{
var userObj:Object = usersList.dataProvider.getItemAt(i);
var dataObj:Object =
{
sqlConnection:sqlConnection,
id:userObj.ID,
name:userObj.NAME,
telephone:userObj.TELEPHONE,
sqlType:"UPDATE"
};
navigator.pushView(views.UpdateUserView, dataObj);
}
/**
* 删除联系人
*/
private function deleteUser(i:int):void
{
var userObj:Object = usersList.dataProvider.getItemAt(i);
var sqlText:String = "DELETE FROM Users WHERE ID = :Id";
var deleteUserSQL:SQLStatement = new SQLStatement();
deleteUserSQL.sqlConnection = sqlConnection;
deleteUserSQL.addEventListener(SQLEvent.RESULT, onDeleteUser);
deleteUserSQL.addEventListener(SQLErrorEvent.ERROR, onSQLError);
deleteUserSQL.text = sqlText;
deleteUserSQL.parameters[":Id"] = userObj.ID;
deleteUserSQL.execute();
}
/**
* 联系人删除响应
*/
private function onDeleteUser(e:SQLEvent):void
{
dbStatus.text = "数据删除成功";
selectUsers();
}
/**
* SQL执行失败响应
*/
private function onSQLError(e:SQLErrorEvent):void
{
dbStatus.text = e.error.errorID.toString();
}
/**
* 显示隐形底部菜单
*/
private function toggleMenu(toggle:Boolean):void
{
mx.core.FlexGlobals.topLevelApplication.viewMenuOpen = toggle;
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingRight="20"
paddingTop="10" paddingBottom="10">
</s:VerticalLayout>
</s:layout>
<s:Label id="dbStatus" width="100%" height="40"
color="#454545" text="加载联系人....." verticalAlign="middle"/>
<s:Label width="100%" height="50" fontSize="14"
text="SELECT * FROM Users" verticalAlign="middle"/>
<s:List id="usersList"
itemRenderer="views.components.renderers.UserItemRenderer"
click="toggleMenu(true)" width="100%" height="55%"
enabled="true" selectedIndex="0"/>
<s:HGroup width="100%" height="50" gap="16">
<s:Button click="addUser()" label="新增联系人"/>
</s:HGroup>
<s:viewMenuItems>
<s:ViewMenuItem label="修改" focusColor="#51B22F"
click="updateUser(usersList.selectedIndex)"/>
<s:ViewMenuItem label="取消" click="toggleMenu(false)"/>
<s:ViewMenuItem label="删除" focusColor="#CB0909"
click="deleteUser(usersList.selectedIndex)"/>
</s:viewMenuItems>
</s:View>
源码下载:
全部评论(0)