Terry.Li-彬

虚其心，可解天下之问；专其心，可治天下之学；静其心，可悟天下之理；恒其心，可成天下之业。
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  143 随笔 :: 344 文章 :: 130 评论 :: 0 Trackbacks
DWR 入門與應用（二）
假設您要從資料庫中查詢出一些字串，然後填寫到表單的下拉選單中。

例如一個示意的Java程式如下： 
1

            2

            3

            4

            5

            6

            7

            8

            
package onlyfun.caterpillar;

             

            public class Option {

            public String[] getOptions() {

            // 實際上這些字串是從資料庫中查到的啦…

            return new String[] {"良葛格", "毛美眉", "米小狗"}; 

            }

            }


傳回的字串陣列，您要填寫到下拉選單中，當然，首先我們要在dwr.xml中開發這個物件… 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            
<?xml version="1.0" encoding="UTF-8"?>

            <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

            

            <dwr>

            <allow>

            <create creator="new" javascript="OPT">

            <param name="class" value="onlyfun.caterpillar.Option"/>

            </create>  

            </allow>

            </dwr>


這是我們的網頁… 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

            13

            14

            15

            
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

            <html>

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=BIG5">

            <script src="option.js" type="text/javascript"></script>

            <script src="dwr/interface/OPT.js" type="text/javascript"></script>

            <script src="dwr/engine.js" type="text/javascript"></script>

            <script src="dwr/util.js" type="text/javascript"></script>

             

            </head>

             

            <body>

            選項: <select id="opts"></select>

            </body>

            </html>


傳回的字串陣列會填入opts這個select中，我們的option.js如下… 
1

            2

            3

            4

            5

            6

            7

            8

            
window.onload = function() {

            OPT.getOptions(populate);  

            };

             

            function populate(list){

            DWRUtil.removeAllOptions("opts");

            DWRUtil.addOptions("opts", list);

            }


夠簡單了…不需要解釋了…

看一下結果… 


好啦！我知道有人在說了，這個程式有夠無聊…Dead

改一下！就是個不錯的範例了，例如連動方塊，唔！在Ajax in action中叫啥？Dynamic double combo？…

假設一個會去從資料庫中查詢資料的Java程式示意如下： 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

            13

            14

            15

            16

            17

            18

            19

            20

            21

            22

            23

            24

            25

            26

            27

            28

            29

            30

            
package onlyfun.caterpillar;

             

            import java.util.Map;

            import java.util.TreeMap;

             

            public class Bike {

              private Map<String, String[]> bikes;

              

              public Bike() {

                bikes = new TreeMap<String, String[]>();

                bikes.put("2000", new String[] {"2000 T1", "2000 T2", "2000 T3"});

                bikes.put("2001", new String[] {"2001 A1", "2001 A2"});

                bikes.put("2002", new String[] {"2002 BW1", "2002 BW2", "2002 BW"});

                bikes.put("2003", new String[] {"2003 S320"});

                bikes.put("2004", new String[] {"2004 TA1", "2004 TA2", "2004 TA3"});

              }

              

              public String[] getYears() {

                String[] keys = new String[bikes.size()];

                int i = 0;

                for(String key : bikes.keySet()) {

                  keys[i++] = key;

                }

                return keys; 

              }

              

              public String[] getBikes(String year) {

                return bikes.get(year);

              }

            }


getYears()跟getBkies()分別表示產品的年份跟型號，這邊用Map模擬，實際上資料是來自資料庫的查詢。

一樣的，在dwr.xml中設定： 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            
<?xml version="1.0" encoding="UTF-8"?>

            <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

            

            <dwr>

            <allow>

            <create creator="new" javascript="Bike" scope="application">

            <param name="class" value="onlyfun.caterpillar.Bike"/>

            </create>

            </allow>

            </dwr>


我們會有個腳踏車年份與型號查詢頁面： 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

            13

            14

            15

            
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

            <html>

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=BIG5">

            <title>Insert title here</title>

            <script type='text/javascript' src='dwr/interface/Bike.js'></script>

            <script type='text/javascript' src='dwr/engine.js'></script>

            <script type='text/javascript' src='dwr/util.js'></script>

            <script type='text/javascript' src='bike.js'></script>

            </head>

            <body onload="refreshYearList();">

              年份：<select id="years" onchange="refreshBikeList();"></select><br/><br/>

              型號：<select id="bikes"></select><br/>

            </body>

            </html>


注意，在選完第一個年份後，會觸發onchange事件，接著第二個下拉選單會自動填上對應年份的型號，而不是按鈕按下，再去取得第二個下拉選單，然後refresh...blah...blah...

bike.js如下… 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

            13

            14

            15

            16

            17

            18

            19

            
function refreshYearList() {

            Bike.getYears(populateYearList);

            }

             

            function populateYearList(list){

            DWRUtil.removeAllOptions("years");

            DWRUtil.addOptions("years", list);

            refreshBikeList();

            }

             

            function refreshBikeList() {

            var year = $("years").value;

            Bike.getBikes(year, populateBikeList);

            }

             

            function populateBikeList(list){

            DWRUtil.removeAllOptions("bikes");

            DWRUtil.addOptions("bikes", list);

            }


一樣很簡單…

看個無聊的畫面…XD



posted on 2008-04-04 11:35 礼物 阅读(318) 评论(0)  编辑  收藏 所属分类: Dwr

只有注册用户登录后才能发表评论。
网站导航: