基于Extjs的相册系统设计

基于Extjs的相册系统设计

一、系统结构
系统结构分为四大部分：
1、 图片管理器（PhotoManage），图片分类管理、图片目录管理、图片上传控件。
2、 图片浏览器（PhotoSee），类似于ACDSee，键盘的四个方向键分别控制上一页、下一页、放大和缩小。可以对每幅图片添加备注，显示图片的Exif信息，对图片进行评论等。
3、 图片搜索引擎（PhotoSearch），可以对图片备注、图片标题、图片的Exif信息进行搜索。
4、 后台管理器（Web Management），对用户帐号、密码等进行管理。

二、系统设计
重点说一下图片上传控件、图片浏览器和图片搜索的实现。
1、图片上传控件。图片上传控件采用JavaApplet编写，以JNLP的方式发布。首先用JavaApplet编写一个图片浏览器（如图1）方便挑选要上存的图片。使用FTP方式上传，FTP服务器端使用Apache 的开源项目FTPServer，上传的时候先生成图片的缩略图，图片名随机生成。图片上传到FTP服务器后还要将图片的信息（如路径、名称、Exif信息等）提交服务器，最后要使JavaApplet浏览本地的图片文件就要使用数字签名。



图1
2、图片浏览器是基于Extjs编写的，浏览器的窗口采用左右布局，左边是图片的信息，导航栏等，右边是图片浏览区。图片的显示采用Ajax技术，实现不刷屏显示图片，每显示一幅图片都执行一次CreatPhoto()函数。



function CreatPhoto(){ // 创建IMG，每开一幅图运行一次

oldImg = objDivImg.firstChild; //<old img>
objDivImg.removeChild(oldImg); // 删除旧的IMG

objDivImg.style.visibility = "hidden";
objImg = document.createElement("img");

objImg.onload = function(){
originalWidth = objImg.width ;
originalHeight = objImg.height;

if (isFitScreen){
creatFitScreen();
}else{
creatOriginalScreen();
}

onGetRemark(gAlbumInfo[photoIndex][2]);

objDivImg.style.visibility = "visible";

};

if (Ext.isIE){ // 设置图片移动 设置position : absolute ; 才可以移动
objImg.setAttribute("className","ImgMain");
}else{
objImg.setAttribute("class","ImgMain");
}

objDivImg.appendChild(objImg); // 创建新的IMG

objImg.src = COMMON_PICS_DIR + gAlbumInfo[photoIndex][1] + '/' + gAlbumInfo[photoIndex][0];

}