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