图形布局-Layout 之js设计实现-kindeditor 在SSH框架中的使用。-电子时钟

当前位置: 编程技术>WEB前端

本页文章导读:

▪图形布局-Layout 之js设计实现前言定位browser 的 chart, VML,SVG, HTML5 Canvas使用的方式各不一样。如果使用现有的js library (各种实现js 图表的library汇总与比较) ，调用的API方式也肯定不同。举个例子: draw2d 使用addF.........

▪kindeditor 在SSH框架中的使用。 1.使用环境 struts2.16+spring2.5+hibernate3+JSON 2.action 文件上传action- FileUploadAction package com.hcsoft.editor; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; imp.........

▪电子时钟显示一个电子时钟： 2013-2-18 11:15:21 HTML代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>电子时钟</title> <script type=.........

[1]图形布局-Layout 之js设计实现

来源: 互联网发布时间: 2013-11-06

前言

定位browser 的 chart, VML,SVG, HTML5 Canvas使用的方式各不一样。

如果使用现有的js library (各种实现js 图表的library汇总与比较) ，调用的API方式也肯定不同。

举个例子: draw2d 使用addFigure 和 setPosition 都可以设置图的位置。

混在特定技术或是特定library 里去layout ，很明显不是一个明智之举。

切分开来， layout 的功能对于任何的图形绘制都适用。就是本章所讨论的了。

实现思想

其实实现思想很简单，维护一个JS 的object(Graph)。在这个Object 里记录节点，边的信息；

节点包含有如下信息：

id -- 表示符

x -- 横坐标

y -- 纵坐标

shape -- 绘制的图

这样的话，在绘制一个图节点之前，先要在这个Graph 维护这个图节点的一些信息。

Graph 示例

var Graph = function() {
	this.nodeSet = {};
	this.nodes = [];
	this.edges = [];
	this.adjacency = {};

	this.nextNodeId = 0;
	this.nextEdgeId = 0;
	this.eventListeners = [];
};

var Node = function(id, data) {
	this.id = id;
	this.data = typeof(data) !== 'undefined' ? data : {};
};

var Edge = function(id, source, target, data) {
	this.id = id;
	this.source = source;
	this.target = target;
	this.data = typeof(data) !== 'undefined' ? data : {};
};

Graph.prototype.addNode = function(node) {
	if (typeof(this.nodeSet[node.id]) === 'undefined') {
		this.nodes.push(node);
	}

	this.nodeSet[node.id] = node;

	this.notify();
	return node;
};

Graph.prototype.addEdge = function(edge) {
	var exists = false;
	this.edges.forEach(function(e) {
		if (edge.id === e.id) { exists = true; }
	});

	if (!exists) {
		this.edges.push(edge);
	}

	if (typeof(this.adjacency[edge.source.id]) === 'undefined') {
		this.adjacency[edge.source.id] = {};
	}
	if (typeof(this.adjacency[edge.source.id][edge.target.id]) === 'undefined') {
		this.adjacency[edge.source.id][edge.target.id] = [];
	}

	exists = false;
	this.adjacency[edge.source.id][edge.target.id].forEach(function(e) {
			if (edge.id === e.id) { exists = true; }
	});

	if (!exists) {
		this.adjacency[edge.source.id][edge.target.id].push(edge);
	}

	this.notify();
	return edge;
};

Graph.prototype.newNode = function(data) {
	var node = new Node(this.nextNodeId++, data);
	this.addNode(node);
	return node;
};

Graph.prototype.newEdge = function(source, target, data) {
	var edge = new Edge(this.nextEdgeId++, source, target, data);
	this.addEdge(edge);
	return edge;
};

// find the edges from node1 to node2
Graph.prototype.getEdges = function(node1, node2) {
	if (typeof(this.adjacency[node1.id]) !== 'undefined'
		&& typeof(this.adjacency[node1.id][node2.id]) !== 'undefined') {
		return this.adjacency[node1.id][node2.id];
	}

	return [];
};

// remove a node and it's associated edges from the graph
Graph.prototype.removeNode = function(node) {
	if (typeof(this.nodeSet[node.id]) !== 'undefined') {
		delete this.nodeSet[node.id];
	}

	for (var i = this.nodes.length - 1; i >= 0; i--) {
		if (this.nodes[i].id === node.id) {
			this.nodes.splice(i, 1);
		}
	}

	this.detachNode(node);

};

// removes edges associated with a given node
Graph.prototype.detachNode = function(node) {
	var tmpEdges = this.edges.slice();
	tmpEdges.forEach(function(e) {
		if (e.source.id === node.id || e.target.id === node.id) {
			this.removeEdge(e);
		}
	}, this);

	this.notify();
};

// remove a node and it's associated edges from the graph
Graph.prototype.removeEdge = function(edge) {
	for (var i = this.edges.length - 1; i >= 0; i--) {
		if (this.edges[i].id === edge.id) {
			this.edges.splice(i, 1);
		}
	}

	for (var x in this.adjacency) {
		for (var y in this.adjacency[x]) {
			var edges = this.adjacency[x][y];

			for (var j=edges.length - 1; j>=0; j--) {
				if (this.adjacency[x][y][j].id === edge.id) {
					this.adjacency[x][y].splice(j, 1);
				}
			}
		}
	}

	this.notify();
};

/* Merge a list of nodes and edges into the current graph. eg.
var o = {
	nodes: [
		{id: 123, data: {type: 'user', userid: 123, displayname: 'aaa'}},
		{id: 234, data: {type: 'user', userid: 234, displayname: 'bbb'}}
	],
	edges: [
		{from: 0, to: 1, type: 'submitted_design', directed: true, data: {weight: }}
	]
}
*/
Graph.prototype.merge = function(data) {
	var nodes = [];
	data.nodes.forEach(function(n) {
		nodes.push(this.addNode(new Node(n.id, n.data)));
	}, this);

	data.edges.forEach(function(e) {
		var from = nodes[e.from];
		var to = nodes[e.to];

		var id = (e.directed)
			? (id = e.type + "-" + from.id + "-" + to.id)
			: (from.id < to.id) // normalise id for non-directed edges
				? e.type + "-" + from.id + "-" + to.id
				: e.type + "-" + to.id + "-" + from.id;

		var edge = this.addEdge(new Edge(id, from, to, e.data));
		edge.data.type = e.type;
	}, this);
};

Graph.prototype.filterNodes = function(fn) {
	var tmpNodes = this.nodes.slice();
	tmpNodes.forEach(function(n) {
		if (!fn(n)) {
			this.removeNode(n);
		}
	}, this);
};

Graph.prototype.filterEdges = function(fn) {
	var tmpEdges = this.edges.slice();
	tmpEdges.forEach(function(e) {
		if (!fn(e)) {
			this.removeEdge(e);
		}
	}, this);
};


Graph.prototype.addGraphListener = function(obj) {
	this.eventListeners.push(obj);
};

Graph.prototype.notify = function() {
	this.eventListeners.forEach(function(obj){
		obj.graphChanged();
	});
};

作者：luqin1988 发表于2013-2-18 11:09:49 原文链接

阅读：44 评论：0 查看评论

[2]kindeditor 在SSH框架中的使用。

来源: 互联网发布时间: 2013-11-06

1.使用环境

struts2.16+spring2.5+hibernate3+JSON

2.action

文件上传action- FileUploadAction

package com.hcsoft.editor;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.Random;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.hcsoft.action.BaseAction;

@SuppressWarnings("serial")
public class FileUploadAction extends BaseAction{
	
	public String execute() throws Exception {
		//请求
		HttpServletRequest request = contextPvd.getRequest();
		
		//文件保存目录路径
		String savePath = contextPvd.getAppRealPath("/") + "editor/attached/";

		//文件保存目录URL
		String saveUrl  = request.getContextPath() + "/editor/attached/";

		//定义允许上传的文件扩展名
		HashMap<String, String> extMap = new HashMap<String, String>();
		extMap.put("image", "gif,jpg,jpeg,png,bmp");
		extMap.put("flash", "swf,flv");
		extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
		extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");

		//最大文件大小
		long maxSize = 1000000;

		if(!ServletFileUpload.isMultipartContent(request)){
			return error("请选择文件。");
		}
		//检查目录
		File uploadDir = new File(savePath);
		if(!uploadDir.isDirectory()){
			return error("上传目录不存在。");
		}
		//检查目录写权限
		if(!uploadDir.canWrite()){
			return error("上传目录没有写权限。");
		}

		String dirName = dir;
		if (dirName == null) {
			dirName = "image";
		}
		if(!extMap.containsKey(dirName)){
			return error("目录名不正确。");
		}
		//创建文件夹
		savePath += dirName + "/";
		saveUrl += dirName + "/";
		File saveDirFile = new File(savePath);
		if (!saveDirFile.exists()) {
			saveDirFile.mkdirs();
		}
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
		String ymd = sdf.format(new Date());
		savePath += ymd + "/";
		saveUrl += ymd + "/";
		File dirFile = new File(savePath);
		if (!dirFile.exists()) {
			dirFile.mkdirs();
		}
		
		if(imgFile != null && !imgFile.toString().equals("")){
			long fileSize = imgFile.length();
			if(fileSize > maxSize){
				return error("上传文件大小超过限制。");
			}
			//检查扩展名
			String fileExt = imgFileFileName.substring(imgFileFileName.lastIndexOf(".") + 1).toLowerCase();
			if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){
				return error("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。");
			}

			SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
			String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
			
			File uploadedFile = new File(savePath, newFileName);
			//获取文件输出流
			FileOutputStream fos = new FileOutputStream(uploadedFile);
			//获取内存中当前文件输入流
			InputStream in = new FileInputStream(imgFile);
			byte[] buffer = new byte[1024];
			try {
				int num = 0;
				while ((num = in.read(buffer)) > 0) {
					fos.write(buffer, 0, num);
				}
			} catch (Exception e) {
				log.error("kindEditor上传文件出错了！");
				return error("上传的文件不存在!");
			} finally {
				in.close();
				fos.close();
			}
			setError(0);
			setUrl(/blog_article/saveUrl   newFileName/index.html);
		}else{
			return error("上传的文件不存在!");
		}
		return SUCCESS;
	}
	
	private String error(String message){
		setMessage(message);
		setError(1);
		return SUCCESS;
	}

	
	/**
	 * 成功返回0，失败返回1
	 */
	public int error;
	
	/**
	 * 成功时返回上传的文件地址
	 */
	public String url;
	
	/**
	 * 失败时返回的提示信息
	 */
	public String message;
	/**
	 * 上传的文件类型
	 */
	public String dir;
	
	public File imgFile;
	private String imgFileFileName;
	
	
	public int getError() {
		return error;
	}

	public void setError(int error) {
		this.error = error;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(/blog_article/String url/index.html) {
		this.url = url;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public String getDir() {
		return dir;
	}

	public void setDir(String dir) {
		this.dir = dir;
	}

	public File getImgFile() {
		return imgFile;
	}

	public void setImgFile(File imgFile) {
		this.imgFile = imgFile;
	}

	public String getImgFileFileName() {
		return imgFileFileName;
	}

	public void setImgFileFileName(String imgFileFileName) {
		this.imgFileFileName = imgFileFileName;
	}
	
}

文件管理action-FileManageAction

package com.hcsoft.editor;

import java.io.File;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.Comparator;
import java.util.Hashtable;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import com.hcsoft.action.BaseAction;

@SuppressWarnings({"serial", "unchecked", "rawtypes" })
public class FileManageAction extends BaseAction {

	public String execute() throws Exception {
		// 请求
		HttpServletRequest request = contextPvd.getRequest();

		// 根目录路径，可以指定绝对路径，比如 /var/www/attached/
		String rootPath = contextPvd.getAppRealPath("/") + "editor/attached/";
		// 根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
		String rootUrl = request.getContextPath() + "/editor/attached/";
		// 图片扩展名
		String[] fileTypes = new String[] { "gif", "jpg", "jpeg", "png", "bmp" };

		String dirName = request.getParameter("dir");
		if (dirName != null) {
			if (!Arrays.<String> asList(
					new String[] { "image", "flash", "media", "file" })
					.contains(dirName)) {
				log.error("Invalid Directory name.");
			}
			rootPath += dirName + "/";
			rootUrl += dirName + "/";
			File saveDirFile = new File(rootPath);
			if (!saveDirFile.exists()) {
				saveDirFile.mkdirs();
			}
		}
		// 根据path参数，设置各路径和URL
		String currentPath = rootPath + path;
		String currentUrl = rootUrl + path;
		String currentDirPath = path;
		String moveupDirPath = "";
		if (!"".equals(path)) {
			String str = currentDirPath.substring(0,
					currentDirPath.length() - 1);
			moveupDirPath = str.lastIndexOf("/") >= 0 ? str.substring(0,
					str.lastIndexOf("/") + 1) : "";
		}

		// 排序形式，name or size or type
		String order = request.getParameter("order") != null ? request
				.getParameter("order").toLowerCase() : "name";

		// 不允许使用..移动到上一级目录
		if (path.indexOf("..") >= 0) {
			log.error("Access is not allowed.");
		}
		// 最后一个字符不是/
		if (!"".equals(path) && !path.endsWith("/")) {
			log.error("Parameter is not valid.");
		}
		// 目录不存在或不是目录
		File currentPathFile = new File(currentPath);
		if (!currentPathFile.isDirectory()) {
			log.error("Directory does not exist.");
		}

		// 遍历目录取的文件信息
		List<Hashtable> fileList = new ArrayList<Hashtable>();
		if (currentPathFile.listFiles() != null) {
			for (File file : currentPathFile.listFiles()) {
				Hashtable<String, Object> hash = new Hashtable<String, Object>();
				String fileName = file.getName();
				if (file.isDirectory()) {
					hash.put("is_dir", true);
					hash.put("has_file", (file.listFiles() != null));
					hash.put("filesize", 0L);
					hash.put("is_photo", false);
					hash.put("filetype", "");
				} else if (file.isFile()) {
					String fileExt = fileName.substring(
							fileName.lastIndexOf(".") + 1).toLowerCase();
					hash.put("is_dir", false);
					hash.put("has_file", false);
					hash.put("filesize", file.length());
					hash.put("is_photo", Arrays.<String> asList(fileTypes)
							.contains(fileExt));
					hash.put("filetype", fileExt);
				}
				hash.put("filename", fileName);
				hash.put("datetime",
						new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file
								.lastModified()));
				fileList.add(hash);
			}
		}

		if ("size".equals(order)) {
			Collections.sort(fileList, new SizeComparator());
		} else if ("type".equals(order)) {
			Collections.sort(fileList, new TypeComparator());
		} else {
			Collections.sort(fileList, new NameComparator());
		}

		this.setMoveup_dir_path(moveupDirPath);
		this.setCurrent_dir_path(currentDirPath);
		this.setCurrent_url(/blog_article/currentUrl/index.html);
		this.setTotal_count(fileList.size());
		this.setFile_list(fileList);

		return SUCCESS;
	}

	public class NameComparator implements Comparator {
		public int compare(Object a, Object b) {
			Hashtable hashA = (Hashtable) a;
			Hashtable hashB = (Hashtable) b;
			if (((Boolean) hashA.get("is_dir"))
					&& !((Boolean) hashB.get("is_dir"))) {
				return -1;

[3]电子时钟

来源: 互联网发布时间: 2013-11-06

显示一个电子时钟：

2013-2-18 11:15:21

HTML代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
    <head>
        <title>电子时钟</title>
        <script type="text/javascript" src=/blog_article/"jquery/jquery.js"></script>/index.html
    </head>
    <body>
        <center>
            <h1></h1>
        </center>
        <script type="text/javascript">
            function getTime(){
                jQuery.ajax({
                    type: "post",
                    url: "time.php",
                    success:function(req){
                        $("h1").html(req);
                    }
                });
            }
            setInterval("getTime()",1000);
        </script>
    </body>
</html>

PHP代码：

<?php
    echo date("Y-m-d H:i:s");
?>

作者：liushuwei0224 发表于2013-2-18 10:55:49 原文链接

阅读：14 评论：0 查看评论