Your SlideShare is downloading. ×
0
D3 Web Application: Tutorial

       Gilles Dodinet
 g.dodinet@karmicsoft.com



 D3 developer workshop, Luxembourg, 2008,...
Technologies
• Used in D3
   –   Hibernate 3.x – Object Relational Mapping 
   –   Spring 2.x – Configuration and componen...
Goal of this tutorial
• Modify a  D3 view and add a new client 
  action
• The action will call an « Echo » (Model 
  2) c...
Roadmap
• Add a new button in the « Job » view
• Create a server controller 
• Test the controller
• Declare the controlle...
Task 1: Add a new button
• Open the « jobs » view
   – remoting/jobs-content.jsp
• Open the grid creation script
   – stat...
Task 2: create an « Echo » controller
 • Create a new package named
      org.decisiondeck.web.tutorial.controller
 • In t...
Task 4: test the controller
• Create a new JUnit (4.x) TestCase
• Create a new test
• Create a Mock ServletRequest and 
  ...
Task 4: source
request = createMock(HttpServletRequest.class);
expect(request.getParameter("message")).
                  ...
Task 5: declare the controller
• Open the following Spring configuration file:
   – WEB-INF/remoting-servlet.xml
• Add a c...
Task 6: create a JSP view
• This view only contains a JSON 
  formatted string
  {
      echo: ‘${msg}’
  }

• Point your ...
Task 7: implement the client action
• Now you can replace the stub handler with 
  the real implementation – an Ajax reque...
Task 7bis: refine the client action
• You could also prompt the user for the 
  input string
 Ext.MessageBox.prompt(
     ...
Expected result




D3 developer workshop   13
A step further: homework
• Call the webservice you (eventually) 
  developed earlier
• Several possibilities
  – Manual co...
D3 developer workshop   15
Upcoming SlideShare
Loading in...5
×

D3 Web Application: Tutorial

1,851

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,851
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "D3 Web Application: Tutorial"

  1. 1. D3 Web Application: Tutorial Gilles Dodinet g.dodinet@karmicsoft.com D3 developer workshop, Luxembourg, 2008, May, 5-6
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13. Expected result D3 developer workshop 13
  14. 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. 15. D3 developer workshop 15
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×