Tips of ACWS Framework-阿里云开发者社区

ACWS Framework - Tips

Note:

Important Level divides 5 layers, deep as 1 to 5.

DWR Part

The framework have been integrated DWR for communicate between JS and Java code, Here we needn’t talk because it so easy, have a short learning.

More info: http://directwebremoting.org/dwr/index.html

ExtJS Part

Base

1. Window

Code Exp:

---------------------------

var win;

//search win

win = _window("search_window");

win.addButton('Confirm',beginSearch);

win.addButton('Cancel',closeWin);

</div>

---------------------------

When need to show win, you have to set frame’s src to a html form or page, in other hand, you also can write this form or page in frame line directly.

Code Exp:

---------------------------

document.getElementById("embedHtm").src=”/projectweb/pages/artAdd.htm”;

//cancel action

win.addButton('Close',function(){

win.hide();mygrid.beginPageLoad();});

//show pop win

win.show();

---------------------------

2. Grid

Create grid in ACWS like this,

Code Exp:

---------------------------

//grid

grid = paggingGrid('t','gridbox',menugrid,mygrid,

'/acwsui/images/imgs/',false);

document.getElementById("gridbox").style.height = (top.window.document.body.clientHeight||window.document.body.clientHeight) - 26 - 24 - 21 - 20-110;

mygrid = grid.mygrid;

//Multi Select Mode

mygrid.enableMultiselect(false);

jsoa.PAGESIZE = 20;

jsoa.PAGEELEMENT = 10;

//load data

mygrid.beginPageLoad();

---------------------------

In html page should have the target div for bind JSON data from DWR, the whole format like this,

Code Exp:

---------------------------

<!—- class attribute is important -->

<table id="t" border=0 class="OnRowSelect=rowSelect"

style="display: none">

<thead>

<tr>

</td>

Name

</td>

</tr>

<!—class as to JSON data’s key -->

</tr>

</thead>

</table>

</div>

<!—- Bind data by DWR -->

<div id="gridbox_page" totalfun="ArtManage.getCountWithPara"

pagefun="ArtManage.getCurrentWithPara" parmarobj="jsoa"></div>

---------------------------

Above code show is a typical grid code template, if you want to add a tool bar, a bar above the grid for show function buttons like Search, Add, Edit, Import, Export even add a checkbox list if you want, code like this,

Code Exp:

-----------------------------

//set tool bar

var text = '<select name="YJ_ORDER" id="YJ_ORDER" onchange="addOrderFiled()"></select>';

buttonList = _changeHtmlButtonToExtToolbar("toolbar",text);

-----------------------------

As you see, the key is function from frame work called

“_changeHtmlButtonToExtToolbar.”, while in html page, you also should have the bar target for binding, code like this,

Code Exp:

-----------------------------

<input type=button buttonId="search" img="/projectweb/images/search.gif" value="Search"

style="display: none">

</div>

-----------------------------

3. Include html by iframe

Which common use in JS functions as set some element’s src attribute to a URL, and the URL is a html page, may be is form to accept users entering, upload or download, which can be used in pop window and main tab as to the form items is big enough or not.

Which can do call switch between itself and parent, detail way info please go ahead.

4. Parent & Child call switch

If a html page have been include by some frame, and show as pop window, so in this html page you can use this way

Code Exp:

-----------------------------

window.parent.win.hide();

window.parent.mygrid.beginPageLoad();

-----------------------------

To call which parent – pop window’s attribute, object or function, like this win object and mygrid object, hide and beginPageLoad function.

In other hand, in parent call child, you can use the frame’s id to get the include-page object, then call elements (function, attribute, object etc) directly, code like this,

Code Exp:

-----------------------------

embedHtm.winSave();

win.hide();

mygrid.beginPageLoad();

-----------------------------

Data Convert

1. changeFormToJSO

Change form items to JSON format data, which is frame work level embed JS function, use for get page form value and change into JSON format.

2.changeJSOToForm

Similar with changeFormToJSO.

3.getQueryString("pid")

This function can be used as get http request parameters by get way.

4.fillJSOInToSpan(jso,"textspan")

Fill JSON format data into html page’s span DOM tag, which often use in callback function.

Code Exp:

-----------------------------

ArtManage.getDetailInfo(appid,function(jso){

fillJSOInToSpan(jso,"textspan");

});

-----------------------------

Component

1. WdatePicker

Date picker component, which is an pop box for you choose date.

Code Exp:

type="text/javascript" ></script>

<input type="text" name="BTS_GH_JSSJ" id="BTS_GH_JSSJ" class="Wdate"

onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy 年 MM 月 '})"

style="background-color: white;" readonly />

-----------------------------

Other Skills

1. OnRowSelect=rowSelect|SplitAt=4

Code Exp:

-----------------------------

<table id="t" border=0 class="OnRowSelect=rowSelect|SplitAt=4"

style="display: block">

</tr>

-----------------------------

This setting can fixed the location of column in grid dragging process, beside set it, the code “id=prc” should be delete to avoid the columns width by percentage.

2._addExtButton('btnSearch','serbtn2','Search',beginSearch);

This can add a button and bind a callback function on it.

Code Exp:

-----------------------------

-----------------------------

3.window.top.PageBus

PageBus is a tool of ACWS framework, by with you can transfer the current page’s form elements include which values to any other page, in the page you can use this

Code Exp:

-----------------------------

//Set Form Data into bus

function publishMessage(){

window.top.PageBus.publish('com.pageBus', changeFormToJSO());

}

//get from bus

function init(){

window.top.PageBus.subscribe("com.pageBus", null, onMessage, null);

}

function onMessage(subj, msg, data){

document.forms[0].messageInfo.value = document.forms[0].messageInfo.value + "\r\n" +

"User Name is : " + msg.userName + "\r\n" +

"Password is : " + msg.password;

}

-----------------------------

In fact, PageBus is a top container to hold some variables then support handlers for user to operate those variables, which is a framework level layer container.

4.JS operate DOM timely (K5)

This is very very important point skill in JS & DOM tree operation.

Code Exp:

-----------------------------

HTML CODE

...

<tr>

<td>

<input type="checkbox" id="BTS_FZ_GYF" name="BTS_FZ_GYF" value="15117" > 电信

<input type="checkbox" id="BTS_FZ_GYF" name="BTS_FZ_GYF" value="15121" > 移动

<input type="checkbox" id="BTS_FZ_GYF" name="BTS_FZ_GYF" value="15125" > 联通

<input type="checkbox" id="BTS_FZ_GYF" name="BTS_FZ_GYF" value="15129" > 华数

</td>

</tr>

</table>

</div>

...

</body>

JS CODE

var win;

function init() {

//search win

win = _window("search_window");

win.addButton('Sure',beginSearch);

win.addButton('Cancel',closeWin);

}

//show search win

function showSearchDiv()

{

win.show();

//This call must be behind the show action!!

setSearchWinCK();

}

//Operate DOM in pop window

function setSearchWinCK(){

if(userFlag=="SUPER_ADMIN"){

//Node of BTS_FZ_GY

var sd = document.getElementsByName("BTS_FZ_GYF");

for (var j=0;j<sd.length;j++) {

sd[j].checked=true;

}

-----------------------------

As the above show, you must take a look at the function named “showSearchDiv”, the call order of the function, you must first pop up the window, then operate the DOM in this pop window, like check on the check box group, if not, you will find the operate has been done but the DOM status has not been change or some unreasonable status has been show, because the DOM in pop window wasn’t create finished, operate those DOM of course it will not be OK.

In a word, when you do some operate of DOM elements by JS, you must pay enough attention in call order, must in correct time.

So to ensure the DOM can be operate while the JS run asynchronous, the DWR framework support us an tool name “DWREngine”, you can do it like this,

Code Exp:

-----------------------------

DWREngine.setAsync(false);

win.show();

DWREngine.setAsync(true);

-----------------------------

This setting can make sure the pop win has been created.

In fact, the DWREngine has many using for you, such as beginBatch, setTimeout etc, if you want to know more please see DWR’s js-doc.

本文转自danni505 51CTO博客，原文链接：http://blog.51cto.com/danni505/274387 ，如需转载请自行联系原作者