初學DWR3.0

 

Getting Started with DWR

There are 2 ways to get started with DWR, the easy way is to download the WAR file and have a look around, however this does not help you see how easily DWR integrates with your current web application, so the following 3 simple steps are recommended:

1. Install the DWR JAR file

Download the dwr.jar file. Place it in the WEB-INF/lib directory of your webapp. You'll probably have a set of jar files in there already. From version 2.0, DWR also requires commons-logging.

2. Edit the config files

The following lines need to be added to WEB-INF/web.xml. The <servlet> section needs to go with the other <servlet> sections, and likewise with the <servlet-mapping> section.

<servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <display-name>DWR Servlet</display-name>
  <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
  <init-param>
     <param-name>debug</param-name>
     <param-value>true</param-value>
  </init-param>
</servlet>

<servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

If you are using DWR 1.x then the servlet-class line should contain the following: uk.ltd.getahead.dwr.DWRServlet.

The 1.x version will still work with 2.x, but the new one is preferred.

Then create a dwr.xml file that lives in WEB-INF alongside web.xml. A simple way to start is with something like this:

<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
    "http://getahead.org/dwr/dwr20.dtd">

<dwr>
  <allow>
    <create creator="new" javascript="JDate">
      <param name="class" value="java.util.Date"/>
    </create>
    <create creator="new" javascript="Demo">
      <param name="class" value="your.java.Bean"/>
    </create>
  </allow>
</dwr>

Obviously, if you are using version 1.x the opening line will have 1.0 in place of 2.0 and 10 in place of 20.

The DWR config file defines what classes DWR can create and remote for use by Javascript. In the example above we are defining 2 classes that are remoted and giving the classes names in Javascript.

The new creator that we used above uses the public no-args constructor that all JavaBeans must have. It is also worth remembering that DWR has a few restrictions:

• Avoid reserved JavaScript words; Methods named after reserved words are automatically excluded. Most JavaScript reserved words are also Java reserved words, so you won't be having a method called "try()" anyway. However the most common gotcha is "delete()", which has special meaning from JavaScript but not Java.
• Overloaded methods can be involved in a bit of a lottery as to which gets called, so avoid overloaded methods.

3. Go to the following URL

http://localhost:8080/[YOUR-WEBAPP]/dwr/

You should see a page showing you the classes that you've selected in step 2. Having followed a link you should see an index of all the methods all ready for calling. These pages are dynamically generated examples of what you can do using DWR.

Kick the tyres and have a look around.

How to make use of this from your web application

We have a whole section on writing Javascript with DWR, and there are a number of examples in the sidebar that demonstrate how to dynamically alter the text in web pages, update lists, manipulate forms and do live table editing. Each has a description of how it works.

Another way to get started is to look at the source from the pages that you just viewed:

• Go to http://localhost:8080/[YOUR-WEBAPP]/dwr/ and click on you class
• View source and find the line that executes the method that you are interested in.
• Paste the text into an HTML or JSP page in your web-app.
• Include links to the javascript files that make the magic happen:

<script src='/[YOUR-WEBAPP]/dwr/interface/[YOUR-SCRIPT].js'></script>
<script src='/[YOUR-WEBAPP]/dwr/engine.js'></script>

You can omit the /[YOUR-WEBAPP]/ section and use relative paths in your web pages if you wish.

 

Writing JavaScript with DWR

DWR generates Javascript code that is similar to the Java code that exported using dwr.xml.

The biggest challenge in creating a remote interface to match some Java code across Ajax is the (usually) asynchronous nature of Ajax, compared to the synchronous nature of a normal Java call.

DWR solves this problem by introducing a callback function that is called when the data is returned from the server.

There are 2 recommended ways to make a call using DWR. Either using by appending a callback function to the parameter list or by appending a call meta data object.

It is also possible to put the callback function at the start of the parameter list, however this option is not advised because there are some issues when dealing with automatic http objects (see "Alternative Method"). This method mostly remains for backwards compatibility.

Simple Callback Functions

Suppose we have a Java method that looks like this:

public class Remote {
    public String getData(int index) { ... }
}

We can use this from Javascript as follows:

<script type="text/javascript"
    src="[WEBAPP]/dwr/interface/Remote.js"> </script>
<script type="text/javascript"
    src="[WEBAPP]/dwr/engine.js"> </script>
...

function handleGetData(str) {
  alert(str);
}

Remote.getData(42, handleGetData);

'42' is just the parameter to the getData() Java function - see above.

Alternatively you can use the all-in-one-line version:

Remote.getData(42, function(str) { alert(str); });

Call Meta-Data Objects

The alternative syntax is to make use of a call meta-data object that specifies the callback function and (optionally) other options. The example above would become:

Remote.getData(42, {
  callback:function(str) { alert(str); }
});

This method has some advantages: Depending on your style it may be easier to read, but more importantly it allows you to specify extra call options.

 

轉自：http://directwebremoting.org/dwr/introduction/getting-started.html

http://directwebremoting.org/dwr/introduction/scripting-dwr.html