• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
D3_Tuto_GD
 

D3_Tuto_GD

on

  • 320 views

 

Statistics

Views

Total Views
320
Views on SlideShare
320
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    D3_Tuto_GD D3_Tuto_GD Presentation Transcript

    • D3 Web Application: Tutorial Gilles Dodinet g.dodinet@karmicsoft.com D3 developer workshop, Luxembourg, 2008, May, 5-6
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Expected result D3 developer workshop 13
    • 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
    • D3 developer workshop 15