Part I.
(Recommended) Hello, I promised for this entry the first thing you need to know is on a format for data exchange called JSON 
, does not enter into details or discussions if it is better that the xml, maybe that is an entry for my blog, to understand how this data format and how to work with java and there is an API that lets you convert a java object to a JSON object and the link is as follows: http://blog.pontt.com/json -con-java/introduccion-java-y-json-primera-parte-con-ejemplo / an example and understand the API release we will see the JSON format to receive our GWT-EXT grid.
{"totalCount": N, "data":
[{"attribute1" = value1 {
,..},{},{},......, "atributoN" = valueN .. }]}
The collaboration diagram shows the Java classes necessary to fill a grid with data. This general format that receives a GWT-Ext grid to work, of course there are more features but that we will see later. 
Once we have defined what we will remember how to do was set the project.
Paso 1. Create a converter class that is our object model or Json's with the help of gson (API) to create a package that called json in org.aplication.json and other org.aplication.datagrid
Create a Bean called DataGridUsuario within org . aplication.datagrid
-------------------------------------------- ----------
org.aplication.datagrid package;
import java.util.List;
org.aplication.client.modelo.Usuario import; / **
* * @ author
mew
* / public class
DataGridUsuario {private String
totalCount;
private List data;
public List getData () {
return data;}
public void setData (List
data) {
this.data = data;}
getTotalCount public String () {return totalCount
} public void
setTotalCount (String totalCount) {
this.totalCount = totalCount;
}}
----------------------------------------- Create
------------ JsonUsuario class, we must add the library of gson the project.
------------------------------------------------ -----
org.aplication.json package;
com.google.gson.Gson
import, import
org.aplication.datagrid.DataGridUsuario;
org.aplication.server.servicio.GWTServiceUserImpl import;
/**
*
* @author mew
*/
public class JsonUsuario {
public String getJsonDataGridUsuarios(){
String jsonOutput ="";
if(GWTServiceUserImpl.usuarios!=null){
DataGridUsuario dataGridUsuario = new DataGridUsuario();
dataGridUsuario.setTotalCount(GWTServiceUserImpl.usuarios.size()+"");
dataGridUsuario.setData(GWTServiceUserImpl.usuarios);
Gson gson = new Gson();
jsonOutput = gson.toJson(dataGridUsuario);
}
return jsonOutput;
}
}
---------------------------------------------------------------
Step 2. Create a jsp that will serve as a kind of Web Service from nuetra application and the client (Grid).
by name will have: ----------------------------------------
dataJson.jsp ---------------------------
----------------
--------------------------------------------------
The project should be up here like this:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="org.aplication.json.JsonUsuario" %>
<% JsonUsuario jsonUsuario = new JsonUsuario(); out.clear(); out.print(jsonUsuario.getJsonDataGridUsuarios()); %>
Example: User 1:
User N. ................. 
Json To check that the WebService is responding well and will prove it before calling the grid: 
http://localhost:41846/WebGwtRcp/dataJson.jsp ------------ ------------------------------------------- {"totalCount": " 5 "," data ":[{" name ":" pruena "," name ":" dsfsf "," age ": 10," cve ": 1}, {" name ":" pruena "," name " "dsfsf", "age": 10, "cve": 2}, {"name": "pruena", "name": "dsfsf", "age": 10, "cve": 3}, {" name ":" Nancy "," name ":" Mondragon "," age ": 25," cve ": 4}, {" name ":" Pedro "," name ":" Perez "," age ": 12 "cve": 5}]} -------------------------------------------------
--------------------- Step 4.
Create the GUI for the grid and event management for data grid, as we can see maybe we do not want to show the user cve, you may only want the name, cve! = Password for this example is cve sequence but perhaps in an application form may be more in the pk of a table in the database.
Step 5. CREATION OF THE GRID OF GWT-EXT
Well we have to replace the code of these classes with the following code posteriromente explain how each class occupies the grid. org.aplication.client in this package replace MainEntryPoint class with the following code: ------------------------------------- ---------------------------
org.aplication.client package; import com.google.gwt.core.client.EntryPoint ;
com.google.gwt.user.client.ui.Button import;
com.google.gwt.user.client.ui.RootPanel import, import
com.google.gwt.user.client.ui.Widget;
com.google.gwt.user.client.ui.ClickListener import, import
org.aplication.client.view.GuiUsuario;
com.gwtext.client.widgets.Window import, import
com.gwtext.client.data .* ;
com.gwtext.client.widgets.Panel import, import
com.gwtext.client.widgets.grid.ColumnConfig;
com.gwtext.client.widgets.grid.ColumnModel import;
import com.gwtext.client.widgets.grid.GridPanel;
/**
* Main entry point.
*
* @author isaac
*/
public class MainEntryPoint implements EntryPoint {
private Panel formPanel;
private static GridPanel grid;
private static Store store;
private static ColumnModel columnModel;
private static HttpProxy dataProxy;
private static RecordDef recordDef;
private static JsonReader reader;
/**
* Creates a new instance of MainEntryPoint
*/
public MainEntryPoint() {
}
/**
* The entry point method, called automatically by loading a module
* that declares an implementing class as an entry-point
*/
public void onModuleLoad() {
final Button button = new Button("New User");
button.addClickListener(new ClickListener() {
public void onClick(Widget w) {
GuiUsuario guiUsuario = new GuiUsuario();
Window winUsu = guiUsuario.getWindow();
winUsu.show();
}
});
RootPanel.get().add(getFormPanel());
RootPanel.get().add(button);
}
public Panel getFormPanel() {
formPanel = new Panel();
formPanel.setId("idGrid");
formPanel.setFrame(false);
formPanel.setBorder(false);
formPanel.setTitle("Usuario");
dataProxy = new HttpProxy("dataJson.jsp");
recordDef = new RecordDef(new FieldDef[]{
new StringFieldDef("nombre", "nombre"),
new StringFieldDef("apellido", "apellido"),
new StringFieldDef("edad", "edad"),
new IntegerFieldDef("cve", "cve")
});
reader = new JsonReader(recordDef);
reader.setRoot ("data");
reader.setTotalProperty ("totalCount");
store = new Store (dataProxy, reader, true);
store.load ();
ColumnModel
columnModel = new (new ColumnConfig [ ] {new ColumnConfig
("name", "name", 100, true), new
ColumnConfig ("name", "name", 75, true)
});
GridPanel
grid = new ();
grid . setStore (store);
grid.setColumnModel (columnModel)
grid.setWidth (375);
grid.setHeight (350);
grid.setTitle ("Json Grid");
grid.setFrame (True);
grid.stripeRows(true);
grid.setIconCls("grid-icon");
//grid.reconfigure(store, columnModel);
formPanel.add(grid);
return formPanel;
}
public static void reloadDatosGrid(){
reader = new JsonReader(recordDef);
reader.setRoot("data");
reader.setTotalProperty("totalCount");
store = new Store(dataProxy, reader, true);
store.load();
grid.reconfigure(store,columnModel);
}
}
----------------------------------------------------
En el paquete GuiUsuario class org.aplication.client.view stream replaces the following:
------------------------------
---------------------- / * * To change this
template, choose Tools com.gwtext.client.widgets.Window;
com.gwtext.client.widgets.event.ButtonListenerAdapter import, import
com.gwtext.client.widgets.form.FormPanel;
org.aplication.client.servicio.GWTServiceUser import, import
org.aplication.client.servicio.GWTServiceUserAsync;
/ **
* * @ author Isaac
* / public class
GuiUsuario {private User user;
private Window window;
formPanel private FormPanel;
private TextField name;
private TextField name;
private TextField age
GWTServiceUserAsync private static service;
public
FormPanel getFormPanel () {
FormPanel formPanel = new ();
formPanel.setFrame (true);
formPanel.setTitle ("User") name = new TextField
("Name", "name", 230);
name = new TextField ("Name", "name", 230);
age = new TextField ("age" and "age", 230);
formPanel.add (name);
formPanel.add (last)
formPanel.add (age);
formPanel
return;}
public getUsuario User () {
return user;}
GetWindow public Window () {
window = new Window ();
window.setTitle ("Layout Window");
window.setClosable (true);
window.setWidth (600);
window.setHeight (350);
window.setPlain (true);
window.setCloseAction (Window.HIDE)
window.add (getFormPanel ());
buttonNewUser
Button = new Button ("New User");
buttonNewUser.addListener (new ButtonListenerAdapter () {
@ Override public void onClick (Button button, EventObject e) {
User u = new User ();
u.setEdad (Integer.parseInt (edad.getText ()));
u.setNombre (nombre.getText ());
u.setApellido (apellido.getText ());
insertaUsuario (u);
}}
)
window.setButtonAlign (Position.CENTER)
window.addButton (buttonNewUser)
return window;
} public void
setUsuario ( User user) {
this.usuario = user;
} public void
insertaUsuario (User user) {
// Create an asynchronous callback to handle the result.
final AsyncCallback callback = new AsyncCallback() {
public void onSuccess(Object result) {
String respuesta = (String) result;
MessageBox.alert(respuesta);
MainEntryPoint.reloadDatosGrid();
}
public void onFailure(Throwable caught) {
MessageBox.alert("Error " + caught);
}
};
getService().nuevoUsuario(usuario, callback);
}
public static GWTServiceUserAsync getService () {
service = (GWTServiceUserAsync) GWT.create (GWTServiceUser.class) ServiceDefTarget
endpoint = (ServiceDefTarget) service;
moduleRelativeURL = GWT.getModuleBaseURL String () + "service / gwtserviceuser"
endpoint.setServiceEntryPoint ( moduleRelativeURL)
return service;
}} ---------------------------------
-----------------------------------
final step run the project. ---------------------------------------------
We can see that the first Once you call the class MainEntryPoint a request to our webservice (http://localhost:41846/WebGwtRcp/dataJson.jsp?_dc=1267849099045) and has a parameter that was concatenated by new HttpProxy (dataJson.jsp " ) is that whoever makes the request to our jsp, but as our list (List
public static users) GWTServiceUserImpl this class to null does not respond to anything.
When we click on new user appears in our private GUI that creates the users fill the fields to give the user click the button again, we note that appears a sign that says that the user has created the from behind can see that the grid already has the data inserted.
Answer 3. I do not care who knows, during the operation. Dedicated to my little princess, please forgive me for being a monster, it was not my intention to hurt you, I love you.
0 comments:
Post a Comment