PDA

View Full Version : AdvancedComboBoxExample server-side



b573803@bofthew.com
2 Sep 2010, 9:54 AM
Hi all,

I'm tryng to use the AdvancedComboBoxExample with a servlet


public class CercaServlet extends HttpServlet{


/**
*
*/
private static final long serialVersionUID = -7886826866322670249L;

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

DAO dao;
String sortida = "";

try {
dao = new DAO();
sortida = dao.search(request.getParameter("query"));
System.out.println( "Sortida:" + sortida);
} catch (Exception e) {
throw new ServletException(e);
}

// Send JSON to client
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
out.println(sortida);
}

}If I debug this, 'sortida= {"topics":[{"author":"jordi","post_text":"post_text_test","topic_id":"topic_id_test","topic_title":"Cerca_test"}]}'

but, in the view (is the same that is the sencha examples, http://www.sencha.com/examples/#advancedcombobox , with a different 'url' this is pointing to my servlet), don't shows nothing, only the wait icon.

What is wrong in this code?

Thanks a lot!!

Sorry, my english is very bad!!=;

sven
2 Sep 2010, 10:18 AM
Can you try to add a LoadException event listener to your loader and see if there is any exception?

b573803@bofthew.com
3 Sep 2010, 5:45 AM
Hi Sven,

I add a LoadException event listener to my loader,



loader.addListener(Loader.LoadException, new Listener<LoadEvent>() {
public void handleEvent(LoadEvent be) {
System.out.println( "Exception: " + be.exception.toString());
}
});
but, no Exception is throws from servlet...
What can I do?

Thanks!

sven
3 Sep 2010, 5:53 AM
It is hard to say without having all your code needed. Can you put together some small testcase that implements EntryPoint and contains everything needed to reproduce this?

b573803@bofthew.com
3 Sep 2010, 9:23 AM
Hi Sven,

this is a small testcase:

Client-Side (EntryPoint + TestComboSearch class)



package simpple.test.TestCombo_Project.client;

import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;


/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Application
implements EntryPoint
{

/**
* This is the entry point method.
*/
public void onModuleLoad()
{
// final Label label = new Label ( "gwt-maven-plugin Archetype :: Project org.codehaus.mojo.gwt-maven-plugin" );
ContentPanel searchPanel = new ContentPanel();
searchPanel.add(new TestComboSearch());

RootPanel.get().add( searchPanel );
}
}






package simpple.test.TestCombo_Project.client;

import java.util.Date;


import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.DataField;
import com.extjs.gxt.ui.client.data.JsonPagingLoadResultReader;
import com.extjs.gxt.ui.client.data.LoadEvent;
import com.extjs.gxt.ui.client.data.Loader;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.ModelType;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.extjs.gxt.ui.client.data.PagingLoader;
import com.extjs.gxt.ui.client.data.ScriptTagProxy;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.Element;

public class TestComboSearch extends LayoutContainer {


@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
String url = GWT.getModuleBaseURL() + "cerca";
// String url = "http://www.extjs.com/forum/topics-remote.php";
ScriptTagProxy<PagingLoadResult<ModelData>> proxy = new ScriptTagProxy<PagingLoadResult<ModelData>>(url);

ModelType type = new ModelType();
type.setRoot("topics");
type.setTotalName("totalCount");
type.addField("title", "topic_title");
type.addField("topicId", "topic_id");
type.addField("author", "author");
type.addField("excerpt", "post_text");

DataField date = new DataField("lastPost", "post_time");
date.setType(Date.class);
date.setFormat("timestamp");
type.addField(date);

JsonPagingLoadResultReader<PagingLoadResult<ModelData>> reader = new JsonPagingLoadResultReader<PagingLoadResult<ModelData>>(
type);

PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy, reader);

loader.addListener(Loader.BeforeLoad, new Listener<LoadEvent>() {
public void handleEvent(LoadEvent be) {
be.<ModelData> getConfig().set("start", be.<ModelData> getConfig().get("offset"));
}
});

loader.addListener(Loader.LoadException, new Listener<LoadEvent>() {
public void handleEvent(LoadEvent be) {
System.out.println( "Exception: " + be.exception.toString());
}
});

ListStore<ModelData> store = new ListStore<ModelData>(loader);

ComboBox<ModelData> combo = new ComboBox<ModelData>();
combo.setWidth(580);
combo.setDisplayField("title");
combo.setItemSelector("div.search-item");
combo.setTemplate(getTemplate());
combo.setStore(store);
combo.setHideTrigger(true);
combo.setPageSize(10);

VerticalPanel vp = new VerticalPanel();
vp.setSpacing(10);

vp.addText("<span class='text'><b>Combo with Templates and Ajax</b><br>This is a more advanced example that shows how you can combine paging, XTemplate and a remote data store to create a 'live search' feature.</span>");
vp.add(combo);

add(vp);
}

private native String getTemplate() /*-{
return [
'<tpl for="."><div class="search-item">',
'<h3><span>{lastPost:date("MM/dd/y")}<br />by {author}</span>{title}</h3>',
'{excerpt}',
'</div></tpl>'
].join("");
}-*/;
}

Server-Side (CercaServlet class + DAO class)





package simpple.test.TestCombo_Project.server.controller;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import simpple.test.TestCombo_Project.server.model.DAO;

public class CercaServlet extends HttpServlet{


/**
*
*/
private static final long serialVersionUID = -7886826866322670249L;

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

DAO dao;
String sortida = "";

try {
dao = new DAO();
sortida = dao.search(request.getParameter("query"));
System.out.println( "Sortida:" + sortida);
} catch (Exception e) {
throw new ServletException(e);
}

// Send JSON to client
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
out.println(sortida);

}

}




package simpple.test.TestCombo_Project.server.model;

import org.json.JSONObject;


public class DAO {



/**
* THIS IS A DUMMIE FUNCTION ONLY FOR TEST!!!!!!!!!!
* @param text
* Text a cercar
* @return
* @throws Exception
*/
public String search(String text) throws Exception{
JSONObject jsonArray = new JSONObject();
JSONObject jsonObject;

jsonObject = new JSONObject();
jsonObject.put("topic_title", "Cerca_test");
jsonObject.put("topic_id", "topic_id_test");
jsonObject.put("author", "jordi");
jsonObject.put("post_text", "post_text_test");

// jsonArray.put("totalCount", 1);
jsonArray.append("topics", jsonObject);


return jsonArray.toString();

}

}


Application.gwt.xml



<!DOCTYPE module PUBLIC "//gwt-module/" "http://google-web-toolkit.googlecode.com/svn/tags/1.6.2/distro-source/core/src/gwt-module.dtd">
<module>

<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>

<!-- inherit css based theme -->
<inherits name='com.google.gwt.user.theme.standard.Standard'/>

<!-- Specify the app entry point class. -->
<entry-point class='org.simpple.test.TestCombo_Project.client.Application'/>

<!-- Specify the application specific style sheet. -->
<stylesheet src='Application.css' />

<servlet path="/cerca" class="simpple.test.TestCombo_Project.server.controller.CercaServlet" />

<inherits name="com.extjs.gxt.ui.GXT" />

</module>


I think that's all you need...


Thanks.

BrendanC
10 Sep 2010, 12:49 PM
You need to wrap your raw JSON with the transid of the HttpServletRequest in your servlet code.


DAO dao;
String sortida = "";
String transId = request.getParameter("callback"); //get the transid of the request

try {
dao = new DAO();
sortida = dao.search(request.getParameter("query"));
sortida = transId + "(" + sortida + ");"; //wrap the json data with the transId method that the ScriptTagProxy will use
System.out.println( "Sortida:" + sortida);
} catch (Exception e) {
throw new ServletException(e);
}

// Send JSON to client
response.setContentType("text/javascript; charset=UTF-8"); //set content type to javascript not html
PrintWriter out = response.getWriter();
out.println(sortida);

b573803@bofthew.com
13 Sep 2010, 8:01 AM
Thanks BrendanC,

it works!!