ExtDirect: DirectGNGine Example

Get some idea about ExtDirect: A Magic

DirectJNgine (or DJN, for short) is a Java implementation of the Ext Direct API. This API allows applications using ExtJs to call Java methods from Javascript almost transparently, making things that used to be more or less cumbersome or time consuming much easier. We should follow following 8 steps to implement DJN:

1)      Download DJN Library Files: Download DirectJNGine.jar and add it to your classpath. If we want to use client side parameter checking debug-time support, we will need to add javascript files like djn-remote-call-support.js and ejn-assert.js.

2)      Configure DJN servlet in Web.xml:  Make entries for DJN servlet in WEB.xml as given below:

<!-- DirectJNgine servlet -->

<servlet>

                           <servlet-name>DjnServlet</servlet-name>

                           <servlet-class>com.softwarementors.extjs.djn.servlet.DirectJNgineServlet</servlet-class>

                           <init-param>

<param-name>providersUrl</param-name>

                                           <param-value>djn/directprovider</param-value>

                           </init-param>

<!-- more parameters... -->

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>DjnServlet</servlet-name>

<url-pattern>/djn/directprovider/*</url-pattern>

</servlet-mapping>

3)      Create server side Action class and Direct Methods:  Create a class on server side that will have methods to be called directly on Client side as follows:

public class TestAction {

  @DirectMethod

  public String doEcho( String value ) {

                  return value;

  }

  @DirectMethod

  public double multiply( String num ) {

                  double num_ = Double.parseDouble(num);

                  return num_ * 8.0;

  }

}

Here, the class ‘TestAction’ is the Action class that will be exposed to client side and it must be defined in Web.xml file. The two methods in this class i.e. doEcho() and multiply() are the methods that can be directly called from client side.

4)      Tell DJN where to look for server methods: Here, the Action classes will be made exposed to client side by defining it in WEB.xml as follows:

<init-param>

                 <param-name>demo.classes</param-name>

                 <param-value>

com.softwarementors.extjs.djn.demo.TestAction                               

<!—More action classes will be defined here-->

                 </param-value>

            </init-param>

Remember, here demo is the api definition for ExtDirect examples, if we were configuring the test api, the parameter to configure would have been tests.classes. In later steps, we will learn how to define demo api definition in WEB.xml.

5)      Tell DJN where to look for Api definitions: In point (4), ‘demo’ is the Api definition for ExtDirect examples and in an application there may be more than one such api definition and DJN will find information about these api definition from WEB.xml where these are defined as follows:

<init-param>

                 <param-name>apis</param-name>

                 <param-value>demo</param-value>

                 <!—more api can be defined here-->

</init-param>

6)      Register exposed methods in Api.js: Generally we define the structure of our exposed server side methods in Api.js file. Normally, this file is generated automatically by DJN, so we don’t need to generate it manually. We should define our method in Api.js as follows:

                          

         Ext.app.REMOTING_API = {

               url : Ext.app.PROVIDER_BASE_URL,

               type : "remoting",

               actions : {

                      TestAction: [ {

                                      name : ‘doEcho’,

                                      len : 1,

                                      formHandler : false

                      } ]

                 }

         };

7)      Tell DJN where to find Api.js file: We tell DJN the path of Api.js file in WEB.xml as follows:

         <init-param>

              <param-name>demo.apiFile</param-name>

              <param-value>demo/Api.js</param-value>

         </init-param>

8)      Call exposed server side method directly from Javascript: We can now directly call the exposed method doEcho()  of class TestAction.java from Javascript directly as follows:

               TestAction.doEcho(text.getValue(), function(result, e)

               {

                     var  t = e.getTransaction();

                     out.append(String.format('<p><b>Successful call to {0}.{1} with ' + 'response:</b><xmp>{2}</xmp></p>',

                     t.action, t.method, Ext.encode(result)));

                     out.el.scrollTo('t', 100000, true);

               });

Note we are passing here a second parameter, a javascript function that will be called with the data returned by the server. We need to use a function to handle the result because remote calls are asynchronous, as it would not be a good idea to block the program waiting for the result. The function receives the call result in the result parameter, and additional data in the e event, including the transaction, which holds the invoked action and method names among other things. 


Get some idea about ExtDirect: A Magic