JsJava in 2.1 comes into being.It mainly add some components such as album,selector and so on.
It also add some document opertions mainly about document setting,form operations,file upload
and window dimension calculation.It also fixed some bugs.
I now introduce the main contents of JsJava2.1.
JsJava2.1 implements photo album display component,which uses iterator design mode.You can
add lots of specially good effect.Unluckily some of the effects can only be used in IE browser.
But the mechanism allows you to add standard effects.e.g as follows:
<![CDATA[
<script src="jsjava-core.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()" >
]]>
The display:
JsJava2.1 implements HTML selector component,with which you can opertion the HTML
select container easily.
<![CDATA[
<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>
]]>
The display:
JsJava2.1 implements border component,which is similar to Java Swing border.
<![CDATA[
<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>
]]>
The display:
JsJava2.1 implements some useful conversion.For example,you can convert
an arabic number to a chinese lowercase or uppercase number:
<![CDATA[
<script src="jsjava-core.js"></script>
<script>
document.write(ChinaConvertUtils.numberToChinese("123.35",true)+"<br>");
document.write(ChinaConvertUtils.numberToChinese("3/5",false));
</script>
]]>
The display:
JsJava2.1 implements some operations about file upload,such as pre-count the image dimension or
the size.e.g as follows:
<![CDATA[
<script src="jsjava.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()">
]]>
JsJava2.1 implements some form operations,such as obtaining checked values of a group of checkboxes.
<![CDATA[
<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>
]]>
JsJava2.1 implements some calculation operations on mouse position,which takes
scroll bar into account.Otherwise,it offers methods to put a HTML area in a suitable
position according to the mouse event.
<![CDATA[
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>
]]>
The display:
JsJava2.1 implements some useful operation about browser window,such as maximizing a window,
showing a window with the specified alignment on the desktop.
<![CDATA[
<script src="jsjava-core.js"></script>
<script>
var win=window.open("about:blank");
WindowUtils.showInPosition(win,WindowUtils.TOP_RIGHT);
</script>
]]>
The new window shows in the top-right cornor of the screen.
JsJava2.1 implements some global methods which are not ecapsulated in classes.In Jsjava2.1,it offers
object and dom expression calculation.
<![CDATA[
<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>
]]>
The display:
manager:John
tel:010-62316787
JsJava2.1 also fixed some bugs posted by JsJava developers.Here not listed in detail.
JsJava2.1 passed IE5,IE6 and Fifefox2.0 test.It had no test on IE7.0,Opera,Maxthon,MinIE and
other browsers.
With JsJava2.1,you'll become a page solution superior!