← Back to branch summary

~testplan-team/testplan/source-collection

« back to all changes in this revision

Viewing changes to htmlunit-2.6/src/test/resources/DWR/2.0.5/simpletext/index.html

  • Committer: edA-qa mort-ora-y
  • Date: 2010-04-07 10:54:57 UTC
  • Revision ID: eda-qa@disemia.com-20100407105457-g46bvbsrjqtjujab
updating hmltunit src

Show diffs side-by-side

added added

removed removed

Lines of Context:
htmlunit-2.6/src/test/resources/DWR/2.0.5/simpletext/index.html
 
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
2
<html xmlns="http://www.w3.org/1999/xhtml">
 
3
<head>
 
4
  <title>Simple Text Generation Demo</title>
 
5
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
 
6
  <script type='text/javascript' src='../tabs/tabs.js'> </script>
 
7
  <script type='text/javascript' src='../dwr/engine.js'> </script>
 
8
  <script type='text/javascript' src='../dwr/util.js'> </script>
 
9
  <script type='text/javascript' src='../dwr/interface/Demo.js'> </script>
 
10
  <script type="text/javascript" src='index.js'> </script>
 
11
  <link rel="stylesheet" type="text/css" href="../tabs/tabs.css" />
 
12
  <link rel="stylesheet" type="text/css" href="../generic.css" />
 
13
</head>
 
14
<body onload="dwr.util.useLoadingMessage();Tabs.init('tabList', 'tabContents');">
 
15
<div id="page-title">[
 
16
  <a href="http://getahead.org/dwr/">DWR Website</a> |
 
17
  <a href="..">Web Application Index</a>
 
18
]</div>
 
19
 
 
20
<h1>Dynamically Updating Text</h1>
 
21
 
 
22
<p>This is a simple demonstration of how to dynamically update a web-page with
 
23
text fetched from a web server.</p>
 
24
 
 
25
<ul id="tabList">
 
26
  <li><a href="#" tabId="demoDiv">Demo</a></li>
 
27
  <li><a href="#" tabId="explainDiv">How it works</a></li>
 
28
  <li><a href="#" tabId="sourceDiv">Source</a></li>
 
29
</ul>
 
30
 
 
31
<div id="tabContents">
 
32
 
 
33
  <div id="demoDiv">
 
34
 
 
35
    <p>
 
36
      Name:
 
37
      <input type="text" id="demoName" value="Joe"/>
 
38
      <input value="Send" type="button" onclick="update()"/>
 
39
      <br/>
 
40
      Reply: <span id="demoReply" style="background:#eeffdd; padding-left:4px; padding-right:4px;"></span>
 
41
    </p>
 
42
 
 
43
  </div>
 
44
 
 
45
  <div id="explainDiv">
 
46
    <p>When you click on the "Send" button the browser calls the onclick event,
 
47
    which calls the <code>update()</code> function:</p>
 
48
    
 
49
<pre>
 
50
function update() {
 
51
  var name = dwr.util.getValue("demoName");
 
52
  Demo.sayHello(name, loadinfo);
 
53
}
 
54
</pre>
 
55
 
 
56
    <p><code>dwr.util.getValue()</code> is a utility to get the value of any
 
57
    element, in this case an input field, but it could be a div or a select
 
58
    box.</p>
 
59
 
 
60
    <p>DWR is asynchronous due to the way Javascript works so it won't halt the web
 
61
    browser while we are waiting for the background HTTP request to return.
 
62
    So the parameter <code>loadinfo</code> names a function to be called when the
 
63
    call has returned.</p>
 
64
    
 
65
    <p>On the server, DWR calls the <code>Demo.sayHello()</code> Java method:</p>
 
66
    
 
67
<pre>
 
68
public String sayHello(String name) {
 
69
    return "Hello, " + name;
 
70
}
 
71
</pre>
 
72
    
 
73
    <p>When this method returns, DWR calls <code>loadinfo()</code> function which
 
74
    moves the text to the reply span:</p>
 
75
    
 
76
<pre>
 
77
function loadinfo(data) {
 
78
  dwr.util.setValue("demoReply", data);
 
79
}
 
80
</pre>
 
81
 
 
82
    <p><code>dwr.util.setValue()</code> is a utility that takes the data you pass in
 
83
    the second parameter and works out how to fit it to go into the HTML element
 
84
    specified by id in the first parameter. This function is one of several neat
 
85
    Javascript utilities that make working with DWR much easier.</p>
 
86
 
 
87
    <p>We could simplify things by writing the 2 Javascript functions together like
 
88
    this:</p>
 
89
 
 
90
<pre>
 
91
function update() {
 
92
  var name = dwr.util.getValue("demoName");
 
93
  Demo.sayHello(name, function(data) {
 
94
    dwr.util.setValue("demoReply", data);
 
95
  });
 
96
}
 
97
</pre>
 
98
    
 
99
    <p>And that's it. In effect we have written much less than 10 lines of code to
 
100
    get data from the server, and display it in the browser.</p>
 
101
    
 
102
  </div>
 
103
 
 
104
  <div id="sourceDiv">
 
105
 
 
106
<h2>HTML source:</h2>
 
107
<pre>
 
108
&lt;p&gt;
 
109
  Name:
 
110
  &lt;input type="text" id="demoName"/&gt;
 
111
  &lt;input value="Send" type="button" onclick="update()"/&gt;
 
112
  &lt;br/&gt;
 
113
  Reply: &lt;span id="demoReply"&gt;&lt;/span&gt;
 
114
&lt;/p&gt;
 
115
</pre>
 
116
 
 
117
<h2>Javascript source:</h2>
 
118
<pre>
 
119
function update() {
 
120
  var name = dwr.util.getValue("demoName");
 
121
  Demo.sayHello(name, function(data) {
 
122
    dwr.util.setValue("demoReply", data);
 
123
  });
 
124
}
 
125
</pre>
 
126
 
 
127
<h2>Java source:</h2>
 
128
<pre>
 
129
package org.getahead.dwrdemo.simpletext;
 
130
 
 
131
public class Demo {
 
132
    public String sayHello(String name) {
 
133
        return "Hello, " + name;
 
134
    }
 
135
}
 
136
</pre>
 
137
 
 
138
<h2>dwr.xml</h2>
 
139
<pre>
 
140
&lt;?xml version="1.0" encoding="UTF-8"?&gt;
 
141
&lt;!DOCTYPE dwr PUBLIC
 
142
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
 
143
    "http://getahead.org/dwr/dwr20.dtd"&gt;
 
144
 
 
145
&lt;dwr&gt;
 
146
  &lt;allow&gt;
 
147
    &lt;create creator="new" javascript="Demo"&gt;
 
148
      &lt;param name="class" value="org.getahead.dwrdemo.simpletext.Demo"/&gt;
 
149
    &lt;/create&gt;
 
150
  &lt;/allow&gt;
 
151
&lt;/dwr&gt;
 
152
</pre>
 
153
 
 
154
  </div>
 
155
 
 
156
</div>
 
157
 
 
158
</body>
 
159
</html>