Api

Client

To configure the remoting providers on the client side the program needs a configuration object with all the accessible methods from the server. A call to api.js will return such a configuration:

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

action must match the url-pattern value of the DispatcherSerlvet in web.xml.

The output of this call will be created on the fly. api.js returns the output on one line. If you need a more readable output for debugging change the call to api-debug.js:

<script type="text/javascript" src="action/api-debug.js"></script>

After the api configuration import add the object to Ext.Direct with the addProvider method.

  //Ext JS 3
  Ext.Direct.addProvider(Ext.app.REMOTING_API);
  
  //Ext JS 4.x and Sencha Touch 2
  Ext.direct.Manager.addProvider(Ext.app.REMOTING_API); 

After this statement the remote methods are accessible from JavaScript.

If there are remoting and polling methods in the configuration it's possible to add the providers in one call.

  //Ext JS 3
  Ext.Direct.addProvider(Ext.app.REMOTING_API, {
    id : 'messageProvider',
    type : 'polling',
    url : Ext.app.POLLING_URLS.message
  });
  
  //Ext JS 4.x and Sencha Touch 2
  Ext.direct.Manager.addProvider(Ext.app.REMOTING_API, {
    type: 'polling',
    url: Ext.app.POLLING_URLS.message
  });

###Parameters

api.js supports these query parameters:

apiNs	Namespace the remoting api variable will be created in	Defaults to Ext.app
actionNs	Namespace the action beans will be created in	Defaults to the browser global scope
remotingApiVar	Name of the remoting api variable	Defaults to REMOTING_API
pollingUrlsVar	Name of the variable which contains the polling URLs	Defaults to POLLING_URLS
group	Name of one or more api groups. Multiple groups separated with comma	Defaults to empty
fullRouterUrl	true or false. If true the URL property contains the full router URL	Defaults to false

####Example

<script type="text/javascript" src="action/api.js?apiNs=RemoteNs&actionNs=MyApp&remotingApiVar=REMOTEAPI&pollingUrlsVar=POLLURLS"></script>

The example above will create a RemoteNs.REMOTEAPI variable:

//Ext JS 3
Ext.Direct.addProvider(RemoteNs.REMOTEAPI);

//Ext JS 4.x and Sencha Touch 2 
Ext.direct.Manager.addProvider(RemoteNs.REMOTEAPI); 

Actions are part of the MyApp namespace:

  MyApp.testAction.doEcho('test', function(result, e){...});  

Polling URLs are part of the POLLURLS object:

//Ext JS 3
Ext.Direct.addProvider({
  type: 'polling',
  url: RemoteNs.POLLURLS.message
});

//Ext JS 4.x and Sencha Touch 2 
Ext.direct.Manager.addProvider({
  type: 'polling',
  url: RemoteNs.POLLURLS.message
});

###Group

If an application consists of multiple HTML pages and the JavaScript code does not need to access all server methods on every page, its possible to group the methods and expose only a subset of the server methods on a certain page.

####Example There are two server methods available and we only want to call the first method on one page and the second method on another page.

First thing to do is adding an attribute group to the @ExtDirectMethod annotation.

@Component
public class TestAction {
  @ExtDirectMethod(group = "group1")
  public long multiply(long num) {
    ...
  }

  @ExtDirectMethod(group = "group2")
  public String doEcho(String message) {
    ...
  }
}

A method can be part of more than one group. The group names have to be separated with a comma @ExtDirectMethod(group = "group3,group4,group5")

On the first HTML page we add this script tag. The api.js will only import the configuration for the multiply method.

<script type="text/javascript" src="action/api.js?group=group1"></script>

And on the second page we use this script tag. That call will only import the doEcho method.

<script type="text/javascript" src="action/api.js?group=group2"></script>

The query parameter group can request more than one group. The following example imports both methods into the code.

<script type="text/javascript" src="action/api.js?group=group1,group2"></script>