This document provides a tutorial for modifying a D3 web application view to add a new client action. It outlines 7 tasks: 1) Add a button to trigger the action, 2) Create an "Echo" controller, 3) Test the controller, 4) Declare the controller in Spring, 5) Create a JSP view, 6) Implement the client action using Ajax, and 7) Refine the client action code. The goal is to have the button click call the backend controller which will return a response to display to the user.

1. D3 Web Application: Tutorial
Gilles Dodinet
g.dodinet@karmicsoft.com
D3 developer workshop, Luxembourg, 2008, May, 5-6

2. Technologies
• Used in D3
– Hibernate 3.x – Object Relational Mapping
– Spring 2.x – Configuration and component wiring
– JAXRPC 1.1 – WS interaction
– JSP 2.0 – Server scripting
– Javascript 1.4 – Client scripting
– Ajax - Client-server interaction
– ExtJS 1.1– Client components
• Used in this tutorial
– Spring, JSP, Javascript, Ajax, ExtJS, JUnit
D3 developer workshop 2

3. Goal of this tutorial
• Modify a D3 view and add a new client
action
• The action will call an « Echo » (Model
2) controller through Ajax
D3 developer workshop 3

4. Roadmap
• Add a new button in the « Job » view
• Create a server controller
• Test the controller
• Declare the controller in the Spring
configuration
• Create a JSP view
• Implement the client action
D3 developer workshop 4

5. Task 1: Add a new button
• Open the « jobs » view
– remoting/jobs-content.jsp
• Open the grid creation script
– static/jobs.js
• In the script locate the toolbar creation funtion
– createToolbar
• Modify the toolbar and add a button that only
displays a simple alert for now
handler: function() { alert(‘CLICKED’); }
• Quickly test your view
D3 developer workshop 5

6. Task 2: create an « Echo » controller
• Create a new package named
org.decisiondeck.web.tutorial.controller
• In this package create a new class named
EchoController that implements
org.springframework.web.servlet.mvc.Controller
• Implement the method defined in the parent
interface handleRequest(..): ModelAndView
msg = request.getParameter("message");
return new ModelAndView("tutorial/echo", "msg", msg);
D3 developer workshop 6

7. Task 4: test the controller
• Create a new JUnit (4.x) TestCase
• Create a new test
• Create a Mock ServletRequest and
Mock ServletResponse
EasyMock.createMock(HttpServletRequest.class);
• Instantiate your controller
• Call the handleRequest method
• Verify your assertions
D3 developer workshop 7

8. Task 4: source
request = createMock(HttpServletRequest.class);
expect(request.getParameter("message")).
andReturn("My Message");
response = createMock(HttpServletResponse.class);
replay(request);
ModelAndView mv =
controller.handleRequest(request, response);
verify(request);
Assert.assertNotNull(mv.getModel ().get("msg"));
Assert.assertEquals("My Message", mv.getModel().get("msg"));
D3 developer workshop 8

9. Task 5: declare the controller
• Open the following Spring configuration file:
– WEB-INF/remoting-servlet.xml
• Add a controller to the list of configured
controllers
<bean name="echo"
class="org.decisiondeck.web.tutorial.controller.EchoController" /
>
• Declare a new url mapping
<prop key="/tutorial/echo.do">echo</prop>
D3 developer workshop 9

10. Task 6: create a JSP view
• This view only contains a JSON
formatted string
{
echo: ‘${msg}’
}
• Point your browser to:
http://localhost:8080/d3/tutorial/echo.do?message=testing
• You should see the following:
{ echo: 'testing' }
D3 developer workshop 10

11. Task 7: implement the client action
• Now you can replace the stub handler with
the real implementation – an Ajax request
Ext.Ajax.request({
url: ‘../tutorial/echo.do’,
success: function(response) {
var o = Ext.decode(response.responseText);
Ext.MessageBox.alert(‘success’, o.echo);
},
failure: function (response) {
Ext.MessageBox.alert(‘error’, ‘FAILED’);
},
params: {
message: ‘testing’
}
});
D3 developer workshop 11

12. Task 7bis: refine the client action
• You could also prompt the user for the
input string
Ext.MessageBox.prompt(
‘echoing…’,
‘What’s your pet name ?’,
function(btn, text) {
if ( btn == ‘ok’ ) {
doAjaxCall(text);
}
} );
D3 developer workshop 12

13. Expected result
D3 developer workshop 13

14. A step further: homework
• Call the webservice you (eventually)
developed earlier
• Several possibilities
– Manual coding (see ProblemSubmitter)
– Code generation (e.g. using Axis) based on
WSDL
• http://ws.apache.org/axis2
D3 developer workshop 14

15. D3 developer workshop 15