D3 Web Application: Tutorial

quaggafoulInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

108 εμφανίσεις

D
3
 Web Application: Tutorial

Gilles Dodinet
g.dodinet@karmicsoft.com
D3 developer workshop, Luxembourg, 2008, May, 5-6
D3 developer workshop
2
Technologies

Used in D
3

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
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
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
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
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
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
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
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
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
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
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
13
Expected result
D3 developer workshop
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
15