JsJava发布2.1版本
【来源:JsJava的官方中文博客网站】2008年3月16日,JsJava团队发布了JsJava2.1版本,该版本在2.0的基础之上,增加了一些新的界面组件,并对DOM和事件方面进行进一步加强,而且增加了一系列的工具类,同时对原来版本中存在一些bug进行了修改,下面主要介绍一下2.1版的主要功能。
1,JsJava2.1实现了相册功能,并封装为一个JS组件。
这是为了满足目前对图片轮循的要求而封装的一个组件,完全面向对象风格,而且具有可插拔的优势,每张图片都可以自定义修饰方式,你自己可以增加新的效果修饰器。
<script>
<script src="jsjava-comp.js"></script>
<script>
var album=new PhotoAlbum("img");
album.setCustomRenderMethod("myrender");
album.addRender(new PhotoRevealTransRender("1.jpg",2,13,"The first render label!"));
album.addRender(new PhotoRevealTransRender("2.jpg",2,16,"The second render label!"));
PhotoAlbum.registry(album);
function go(){
album.display(1,3000);
}
function myrender(obj){
document.getElementById("label").innerHTML=obj;
}
</script>
<img id="img" src="2.jpg" style="filter:revealTrans(duration=2,transition=23)"><br>
<div id="label">Wel!</div>
<input type="button" value="run" onclick="go()" >
显示结果:(下图只是一张静态图片,看不到真正的效果,可以在自己的网站或者本机上测试一下,就知道实际的动态效果了,完全可以和各大网站的图片轮循效果相媲美,而且JS设计方面绝对超过那些大网站)
" border="0" />
2,JsJava2.1实现了HTML的selector组件。
我们知道我们在操作select对象时,许多情况下感觉很麻烦,尤其是对select通过Option对象动态增加删除的时候,感觉操作比较烦琐,例如一般OA系统中的用户选择界面,涉及到多个select框和这些框之间的数据转移,如果自己来处理,虽然不是很难,但是很麻烦,为了解决该问题,JsJava从2.1版本开始推出了HTML的Select组件。
<script src="jsjava-core.js"></script>
<script src="jsjava-comp.js"></script>
<script>
window.onload=function(){
var selector=new HTMLSelector(document.myForm,"mySelect",true,null);
var option=new Option("The old first label","a");
selector.addOption(option);
var option2=new Option("The old second label","b");
selector.addOption(option2);
var option3=new Option("The new first label","c");
selector.insertOption(0,option3);
};
</script>
<form name="myForm">
<select name="mySelect" multiple>
</select>
</form>
显示结果:
" border="0" />
3,JsJava2.1实现了类似Swing中边框的Border组件。
如下:
<style>
.borderClass{width:200};
.legendClass{font-size:12pt;};
</style>
<script src="jsjava-core.js"></script>
<script src="jsjava-comp.js"></script>
<script>
var tb=new TitledBorder("Welcome!","<div>Welcome to
Beijing!","borderClass","legendClass",TitledBorder.CENTER_ALIGNMENT);
var htmlStr=tb.toHTML();
document.write(htmlStr);
</script>
显示结果为:
" border="0" />
4,JsJava2.1实现了一些常用的转换功能。
目前实现了阿拉伯数字与中文大小写之间的转换。例如:
<script src="jsjava-core.js"></script>
<script>
document.write(ChinaConvertUtils.numberToChinese("123.35",true)+"<br>");
document.write(ChinaConvertUtils.numberToChinese("3/5",false));
</script>
显示结果为:
" border="0" />
5,JsJava2.1实现了对文件传的一些辅助操作。
例如上传图片或者其它文件以前,提前计算文件的大小和尺寸等,这在实际的编程中非常重要,例如一般上传图片都会限制大小和尺寸,如果等图片上传完了才由服务器逻辑做出判断(Java、PHP、.NET等后台计算这种问题的能力很强),那么对于大型图片来说,就太得不偿失了,所以现在许多人都开始接收,在上传图片之前通过JS来提前判断图片的大小和尺寸,JsJava从版本2.1开始,提供专门的UploadFile类来提供相关的支持。
<script src="jsjava-core.js"></script>
<script>
var uploadFile=new UploadFile();
function upload(){
var obj=document.getElementById("attachment");
uploadFile.setFile(obj.value);
var fileSize=uploadFile.getFileSize();
alert(fileSize);
}
</script>
<input id="attachment" type="file"><input type="button" value="upload" onclick="upload()">
6,JsJava2.1实现一些表单中的常用操作。
目前主要是实现了对checkbox和select的一些操作,例如计算checkbox组中被选中的值啊等等,这些操作虽然基本每个开发人员都会,但是由于每次都要编写类似的十几行代码,而且不同的程序员在代码质量和跨浏览器方面考虑的并不一样,所以JsJava提供专门的FormUtils类,对Form的一些常规操作给予支持。
<script src="jsjava-core.js"></script>
<script>
function check(){
var values=FormUtils.getSelectedValues(document.forms[0],"b");
alert(values);
}
</script>
<form>
<select name="b" multiple>
<option value="first">first</option>
<option value="second">second</option>
<option value="third">third</option>
</select>
<br>
<input type="button" value="click" onclick="check()"/>
</form>
7,JsJava2.1提供了一些与鼠标事件相关的操作。
例如鼠标点击的实际位置、将某个区域移动到鼠标点击的位置等等,看上去感觉比较简单,但是实际上由于鼠标点击的区域,很可能处于某个滚动的页面,而且外面可能还有IFrame等窗体,另外某些DIV等区域也可能存在滚动条,因此鼠标实际点击位置的计算,并非想象的那么容易,经历过类似编程的,应该清楚这些问题都是最让人头疼的问题之一。为了解决这些实际的编程问题,JsJava提供了一系列方法来支持,这些方法目前位于EventUtils类中。
frame.html:
-------------------------
<table width="100%" height="100%" border="1">
<tr>
<td height="120" bgcolor="pink" colspan="2"> </td>
</tr>
<tr>
<td width="120"> </td>
<td><iframe src="position.html" style="height:100%;width:100%"></iframe></td>
<tr>
</table>
position.html
-------------------------
<script src="jsjava-core.js"></script>
<script>
document.onclick=f;
function f(e){
if(!e){
e=window.event;
}
EventUtils.showFloatInPosition(e,document.getElementById("d"));
}
</script>
Click anywhere and the pink area will show in the click position
<div style="width:1000;height:600"> </div>
<div id="d" style="position:absolute;top:0;left:0;width:60;height:36;background-color:pink">
</div>
显示结果:
" border="0" />
8,JsJava2.1实现了对窗口的一些操作。
例如最大化某个窗口、将窗口移动到屏幕的某个位置等等,其中最大化和将窗体移动到屏幕中心位置,是比较常用的功能。
</script>
<script>
var win=window.open("about:blank");
WindowUtils.showInPosition(win,WindowUtils.TOP_RIGHT);
</script>
上述代码的意思是:将弹出的空白窗口移动到屏幕的右上角。
9,JsJava从2.1版本开始,逐渐增加一些顶级函数,以方便开发人员直接调用。
当然这样的函数不会设置太多,否则多少会破坏整体的面向对象原则,当然顶级函数实际上默认属于window对象。目前提供的顶级函数,是通过表达式计算值的功能,类似JSP中的EL功能,当然ASP、PHP等中也有类似的东东。举例如下:
<script src="jsjava-core.js"></script>
<script>
function User(){
this.getJob=function(){
return this.job;
};
this.setJob=function(job){
this.job=job;
};
}
function Job(){
this.info=new HashMap();
this.info.put("name","Software Engineer");
this.info.put("manager","John");
this.getSalary=function(){
return this.salary;
};
this.setSalary=function(salary){
this.salary=salary;
};
this.getInfo=function(){
return this.info;
};
}
var job=new Job();
job.setSalary("1000");
var user=new User();
user.setJob(job);
document.write("manager:"+$obj("user.job.info['manager']")+"<br>");
var map=new HashMap();
map.put("tel","010-62316787");
document.write("tel:"+$obj("map['tel']"));
</script>
显示结果:
manager:John
tel:010-62316787
除此之外,JsJava2.1解决了JsJava2.0中存在的一些bug,主要如下:
CursorUtils在单行文本输入框中使用没有效果的问题
在使用DecimalFormat格式化数字时,会包找不到方法的错误
使用字符串的toCharArray扩展方法,会出现变量未定义的错误
在使用ColorUtils的toHexValueWithRGB方法时,会出现找不到类的错误
使用ajax部分时如果没有定义返回方法将会报找不到对象的错误
其它一些小的bug
另外,JsJava2.1对一些函数的虽然和性能做了一定程度的优化,但是这次力度不大,不过这次的发布包对类库文件进行了空格压缩,文件体积小了,当然可读性就比较差了,不过大家可以直接下载源代码工程来阅读。
JsJava开发团队的宗旨就是,从Javascript实际开发过程中总结问题,从中提炼解决办法并形成类库解决方案,以类库和组件的形式免费赠与大家。
希望大家继续支持JsJava,欢迎您即时提出版本中存在问题,您也可以提出自己在实际开发过程中遇到的一些问题,当然也可以附上您的解决方案。
附:JsJava一些资源:
JsJava官方网站:http://www.
JsJava官方中文博客:http://cnblog.
JsJava团队Email:jsjava@
问题和解决方案可以Email:freeeob@或者公布到http://tracker.