博文

深入探究JFreeChart(2008-12-24 11:53:00)

摘要:1   简介

JFreeChart 是 SourceForge.net 上的一个开源项目,它的源码和 API 都可以免费获得。 JFreeChart 的功能非常强大,可以实现饼图 ( 二维和三维 ) ,   柱状图   ( 水平 , 垂直 ), 线图 , 点图 , 时序图 , 甘特图 ,   股票行情图 , 混和图 ,   温度计图 ,   刻度图等常用商用图表,    图形可以导出成 PNG 和 JPEG 格式,同时还可以与 PDF 和 EXCEL 关联,支持对图形的放大、缩小,支持常见图形的 3D 显示。
2 图形 对象的处理
2 .1 JFreeChart对象

JFreeChart 可以生成很多图形对象,它的工厂类提供了 33 个工厂方法用于生成不同的图形对象(具体的工厂方法可以参见 JFreeChart 的 API 手册或者源码中的 ChartFactory 类 )。               JFreechart 对图形对象的抽象具体化。图形对象( JFreeChart ),由 Title( 主标题 ) , SubTitle (子标题 ) , Plot (图形的绘制结构)等几个主要对象组成。各个组成部分如下图所示:

这是一个 JFreeChart 对象,上面的“ chart 标题”是 Title 对象,中间区域是 Plot 对象(包括绘图区域和坐标轴区域),下面的区域是 LegendTitle 对象,是一种 SubTitle 对象。

每个 JFreeChart 对象只能有 1 个 Title 对象, 1 个 Plot 对象,可以有多个 SubTitle 对象。 JFreeChart 对象可以进行的操作有:背景的设置(背景颜色、背景图片、透明度等)、边框的设置(是否可见、笔画、 Paint 等)、渲染方式的设置、标题对象的设置、子标题对象的增删查操作。(本文中的所有操作都不提供代码级的介绍,可参见 API......

阅读全文(4350) | 评论:0

iFRAME解决cookie跨域问题(2008-12-23 15:53:00)

摘要:A页面的域名 a.com B页面的域名b.com,现A中iframe嵌了个B页面,此时B中的cookie就会失效。

解决办法之一  :
1、增加P3P.xml文件
     在B的网站服务器上存放P3P.xml文件,文件内容为
<META xmlns="http://www.w3.org/2002/01/P3Pv1">   <POLICY-REFERENCES>   <POLICY-REF about="/w3c/P3P.xml">   <COOKIE-INCLUDE name="*" value="*" domain="*" path="*"/>   </POLICY-REF>   </POLICY-REFERENCES>   </META>   2、在web.xml中增加个fliter,保证每次应答的时候浏览器头文件中都设置了p3p的头信息。
((HttpServletResponse)response).setHeader("P3P", "CP=\"NOI ADM DEV PSAi COM NAV OUR OTR STP IND DEM\"  policyref=\"http://www.udooo.com/w3c/P3P.xml\""); 
......

阅读全文(4786) | 评论:0

js、java处理json数据方法之一(2008-11-24 11:11:00)

摘要:一:js处理json数据 处理办法之一是把本机json数据或远程返回json数据用eval函数,使之变成DOM对象。 例如: var people = { "programmers": [{ "firstName": "Elliotte", "lastName":"Harold","email": "elharo@macfaq.com" }],
"authors": [{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" }],
  "musicians": [{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
  { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }]
  };  var obj = eval('(' + str + ')');      alert(obj.programmers); 二:Java处理json数据   var url = "parseJson.do?people=" + escape(people.toJSONString());    java 文件

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import net.sf.js......

阅读全文(5828) | 评论:0

在线编辑器(2008-11-11 18:25:00)

摘要:你要的是所见即所得HTML编辑器,简单来说需要几个基本步骤:

1,需要一个可以编辑同时又可显效果的编辑框。textarea不行,它只能用来输入纯文本,不能显示颜色、斜体之类的文字样式,就像记事本。
你可以使用iframe来实现,修改iframe的designMode属性使其可以被编辑。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<script>myEditer.document.designMode = 'on';</script>

这样你就可以在这个iframe区域里写字了。

2,选中要添加样式的文字。通常我们用WORD编辑一段文字的样式时,一般是先打字,再编辑样式。所以你需要一个选中要处理文本的方法。JS的selection.createRange()可以选中文本,返回一个对象,你可以通过访问该对象的text属性得到被选中的文本。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
alert(sel.text);
}
</script>

3,改变被选中文本的样式。selection.createRange()选中文本,返回一个对象,该对象有一个方法execCommand(),可以用来改变被选中文本的样式。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="butto......

阅读全文(1893) | 评论:0

DWRUtil.addOptions() 方法详解(2008-11-03 17:01:00)

摘要: 创建列表 DWR通常需要填充一个列表框,主要是addOptions和removeAllOptions方法。如果当你更新时需要维护列表,通常需要如下代码: var sel = DWRUtil.getValue(id);
DWRUtil.removeAllOptions(id);
DWRUtil.addOptions(id, ...);
DWRUtil.setValue(id, sel); DWRUtil.addOptions(selectid,array) 数组的每一个元素的字符串表示值和文本,值和文本属性是一样的。 DWRUtil.addOptions( "demo1", ['Africa', 'America', 'Asia', 'Australasia', 'Europe' ]) DWRUtil.addOptions(selectid, data, prop) 数组的每一个元素是一个对象,prop表示值和文本对应的属性名称,这里值和文本属性是一样的。 DWRUtil.addOptions( "demo1",[
{ name:'Africa', population:'800m' },
{ name:'America', population:'900m' },
{ name:'Asia', population:'3000m' },
{ name:'Australasia', population:'31m' },
{ name:'Europe', population:'700m' }
],"name") DWRUtil.addOptions(selectid, array, valueprop, textprop) 数组的每一个元素是一个对象,其valueprop和textprop属性表示值和文本对应的属性名称。 DWRUtil.addOptions( "demo1",[
{ name:'Africa', id:'AF' },
{ name:'America', id:'AM' },
{ name:'Asia', id:'AS' },
{ name:'Australasia', id:'A......

阅读全文(7241) | 评论:2

Ext基础(2008-10-18 13:04:00)

摘要: 8.1. Ext.get   ext里用来获得Element的一个函数,用途还算比较广,可以通过不少途径获得咱们需要的Element,而这个Element包括很多有趣的功能。 Element跟document.getElementById("myDiv")得到的dom对象是不一样的,虽然你还可以使用老方式获得指定id的元素,但那样就失去了ext提供的各种常用操作,动画啦,定位啦,css啦,事件啦,拖拽啦。其实也不用担心,即便使用了Ext.get()获得了myDiv,还是可以直接访问document.getElementById()应该得到的部分,而且挺简单的,Ext.get().dom就可以了。 下面让偶们来看看这些基本的功能会是咋样呢? 先获得一个Elementvar myDiv = Ext.get('myDiv'); 这里我们传入的是一个id,你可以在html里看到<div id="myDiv"></div>,然后我们用Ext.get('myDiv')从html里取得这个div,然后封装成Element对象,现在这个对象就已经放到缓存中了,以后再用的时候就更快撒。 最吸引眼球的是动画效果,所以我们先动两下。myDiv.hightlight(); 红色高亮,然后渐退。myDiv.addClass('red'); 添加自定义CSS类,css里有.red {background: red;}的定义,这样myDiv的背景直接变成了红色。myDiv.center(); myDiv移动的窗口中间,包括垂直和竖直居中。myDiv.setOpacity(.25); 使myDiv半透明 再看看怎么才好渐变动画myDiv.setWidth(100); 这样可以直接设置myDiv的宽度,是没有渐变动画的。myDiv.setWidth(100, true); 这样就打开了动画开关,如此简单就可以看到myDiv在动咯。 咱们还可以控制动画的动作,如下myDiv.setWidth(100, { duration: 2, callback: this.highlight, scope: this }); duration是间隔,数字越大移动越慢,ca......

阅读全文(3577) | 评论:0

Ext树的构造(2008-10-18 12:40:00)

摘要: 3.1. 真的,我是为了树,才开始学ext的。   之前使用过xtree和dojo中的tree,感觉都是怪怪的,界面简陋,功能也不好上手,待看到ext里的树形真是眼前一亮,在此之前,动态增添,修改删除节点,拖拽和右键菜单,我一直认为是不可能实现的任务,而在ext上却轻松实现了,而且界面和动画效果相当完美。真是让人爱不释手啊。 树形是非常典型的一种数据结构,多级菜单,部门组织结构,省市县三级这种金字塔结构都可以用树形表示,要表示一个老爸有一帮孩子的情况真是非树形莫属啊,做好了这部分,绝对是个亮点。 3.2. 传统是先做出一棵树来。   树形世界的万物之初是一个TreePanel。var tree = new Ext.tree.TreePanel('tree'); 这里的参数'tree',表示渲染的dom的id。html写着个<div id="tree"></div>做呼应呢,最后这棵树就出现在这个div的位置上。 现在我们获得了树形面板,既然是树就必须有一个根,有了根才能在上边加枝子,放叶子,最后装饰的像一棵树似的。嗯,所以根是必要的,我们就研究研究这个根是怎么咕哝出来的。var root = new Ext.tree.TreeNode({text:'偶是根'}); 看到了吧,它自己都说它自己是根了,所以它就肯定是根没错。再看下面。tree.setRootNode(root); tree.render(); 首先,我们把这个根root,放到tree里,用了setRootNode()方法,就是告诉tree,这是一个根,你可得把它放好啊。 立刻对tree进行渲染,让它出现在id="tree"的地方,这个id可是在上面指定的,如果有疑问,请翻回去继续研究,我们就不等你,继续了。 当当,我非常荣幸的向您宣布,咱们的第一棵树出来了。这是它的照片。   靠,这是树吗? 嗯,现在的确不太像树,因为它只有一个根。 靠,我们要的是树,你就搞出一个根来,有鸟用啊。 嗯,理论上等它自己发芽长成树,可能性是比较小,不如咱们偷偷插上几个枝子,说不定看起来就更像树了。 注意 虽然只有一个根,不过也算是棵树,1.x的例子在lingo-sample/1......

阅读全文(6777) | 评论:0

Ext各种表格制作(2008-10-17 21:55:00)

摘要:无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能咱们就不提了。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里实现了。 呵呵~不过ext也不是万能的,与fins的ecside比较,ext不能锁定列(土豆说1.x里支持锁定列,但是2.0里没有了,因为影响效率。),也没有默认的统计功能,也不支持excel,pdf等导出数据。另外fins说,通过测试ecside的效率明显优于ext呢。:) 2.2. 让我们搞一个grid出来耍耍吧。   光说不练不是我们的传统,让我们基于examples里的例子,来自己搞一个grid看看效果,同时也可以知道一个grid到底需要配置些什么东西。 首先我们知道表格肯定是二维的,横着叫行,竖着叫列。跟设计数据库,新建表一样,我们要先设置这个表有几列,每列叫啥名字,啥类型,咋显示,这个表格的骨架也就出来了。 ext里,这个列的定义,叫做ColumnModel,简称cm的就是它,它作为整个表格的列模型,是要首先建立起来的。 这里我们建立一个三列的表格,第一列叫编号(code),第二列叫名称(name),第三列叫描述(descn)。var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); 看到了吧?非常简单的定义了三列,每列的header表示这列的名称,dataIndex是跟后面的东西对应的,咱们暂且不提。现在只要知道有了三列就可以了。 有了表格的骨架,现在我们要向里边添加数据了。这个数据当然也是二维了,为了简便,我们学习examples里的......

阅读全文(14529) | 评论:0

log4j--新的日志操作方法(2008-10-15 09:38:00)

摘要:  1.1准备工作
  一、Tomcat已正确配置与使用。
  二、软件下载:log4j------http://www.apache.org/dist/jakarta/log4j/jakarta-log4j-1.2.8.zip
  
  1.2. Log4j简介
  在强调可重用组件开发的今天,除了自己从头到尾开发一个可重用的日志操作类外,Apache为我们提供了一个强有力的日志操作包-Log4j。
  Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台、文件、GUI组件、甚至是套接口服务器、NT的事件记录器、UNIX Syslog守护进程等;我们也可以控制每一条日志的输出格式;通过定义每一条日志信息的级别,我们能够更加细致地控制日志的生成过程。最令人感兴趣的就是,这些可以通过一个配置文件来灵活地进行配置,而不需要修改应用的代码。
  此外,通过Log4j其他语言接口,您可以在C、C++、.Net、PL/SQL程序中使用Log4j,其语法和用法与在Java程序中一样,使得多语言分布式系统得到一个统一一致的日志组件模块。而且,通过使用各种第三方扩展,您可以很方便地将Log4j集成到J2EE、JINI甚至是SNMP应用中。本文介绍的Log4j版本是1.2.8,怎样通过一个配置文件来灵活地进行配置,主要的应用平台是Tomcat4.
网管u家u.bitscn@com
  
  1.3、Log4j的配置
  首先到jakarta下载一个log4j的组件。把jakarta-log4j-1.2.8\dist\lib下的log4j-1.2.8.jar文件copy到classpath指定的目录下!可以是Tomcat的common\lib目录下,也可以是你需要用到log4j的application下的lib目录。
  1.4在Application目录下的web.xml文件加入以后代码
  <servlet>
  <servlet-name>log4j</servlet-name>
  <servlet-class>com.apache.jakarta.log4j.Log4jInit&l......

阅读全文(2125) | 评论:0

应用Ext做个简单的表格(2008-10-14 23:19:00)

摘要:          Ext是js界面编程的一个封装包,它包含了大部分的UI组件。今天就来应用Ext.grid.GridPanel组件创建个简单的表格。  大致步骤分成以下几步: 1、创建表格数据源,可以是外部读入的数据,也可以是数组定义的。 var  myData=[
  ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
  ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
  ['Google',71.72,0.02,0.03,'10/1 12:00am'],
  ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
  ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
 ];   再用Ext.data.ArrayReader创建列格式  var myReader = new Ext.data.ArrayReader({}, [
  {name: 'company'},
  {name: 'price', type: 'float'},
  {name: 'change', type: 'float'},
  {name: 'pctChange', type: 'float'},
  {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
 ]); 2、创建表格体 var grid = new Ext.grid.GridPanel({
  store: new Ext.data.Store({
   data: myData,
   re......

阅读全文(2563) | 评论:0