Your SlideShare is downloading. ×
0
D3_Tuto_GD
D3_Tuto_GD
D3_Tuto_GD
D3_Tuto_GD
D3_Tuto_GD
D3_Tuto_GD
D3_Tuto_GD
D3_Tuto_GD
D3_Tuto_GD
D3_Tuto_GD
D3_Tuto_GD
D3_Tuto_GD
D3_Tuto_GD
D3_Tuto_GD
D3_Tuto_GD
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

D3_Tuto_GD

151

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
151
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×