Could anyone post a JSON populated tree example?

[keypoint]

I plan not to use Java on the server side, so my best bet is to go with JSON for communicating between server and client.
Darrell, do you have an example of a Tree that loads its data from a remotely loaded JSON string?
Thanks!
I've been trying myself but I get a cast exception from BaseListLoadResult (what JsonReader returns) to List and I don't know where to set the conversion type.

[darrellmeyer]

Can you post the code you are trying?

[keypoint]

Yup; it goes something like this:



// define the json structure
ModelType type = new ModelType();
type.root = "root";
type.addField("name");

RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, "http://localhost/pone/json.php");
HttpProxy proxy = new HttpProxy(builder);
TreeLoader loader = new BaseTreeLoader(proxy, new JsonReader(type));
Tree tree = new Tree();
TreeBinder binder = new TreeBinder(tree, new TreeStore(loader));
binder.setDisplayProperty("name");
binder.setAutoLoad(true);

west.add(tree);
loader.load();


I've also tried some generics use without luck. The json call succeeds: the exception is thrown out of HttpRequest's responseReceived method, when it attempts to call a callback. The json reader returns a BaseListLoaderResult (or something like that) and that is cast to List and fails.
Needles to say my generics knowledge is not that great so maybe I'm missing something obvious.

Thanks!

[keypoint]

Hey, Darrell, I've got it working using something like this:

Json sent by the server: {"root":[{"name":"Entry 1"},{"name":"Entry 2"},{"name":"Entry 3"},{"name":"Entry 4"},{"name":"Entry 5"}]}



public void onModuleLoad() {
final Tree tree = new Tree();
RequestBuilder builder = new RequestBuilder(RequestBuilder.GET,
"http://localhost/test/json.php");
HttpProxy proxy = new HttpProxy(builder) {
@Override
public void load(DataReader reader, Object loadConfig,
AsyncCallback callback) {
super.load(reader, loadConfig, new MyCallback());
}
};
ModelType type = new ModelType();
type.root = "root";
type.addField("name");
JsonReader reader = new JsonReader(type);
TreeLoader loader = new BaseTreeLoader(proxy, reader);
new TreeBinder(tree, new TreeStore(loader));

RootPanel.get().add(tree);
Registry.register("tree", tree);

loader.load();
}

public class MyCallback implements AsyncCallback {

public void onFailure(Throwable caught) {
// TODO Auto-generated method stub

}

public void onSuccess(Object result) {
for (BaseModelData item: ((BaseListLoadResult<BaseModelData>)result).getData()) {
((Tree)Registry.get("tree")).getRootItem().add(new TreeItem(item.get("name").toString()));
}
}

}


Any thoughts/tips on this? (any best practices I'm missing)
Thanks

[darrellmeyer]

Any thoughts/tips on this? (any best practices I'm missing)
Manually creating the tree items should probably be avoided. JsonReader was not a good fit as it returned a ListLoadResult, you need a reader that returns a list of models. This code should do the trick:


public class JsonTreeReader<C> implements DataReader<C, List<ModelData>> {

private ModelType modelType;

/**
* Creates a new JSON reader.
*
* @param modelType the model type definition
*/
public JsonTreeReader(ModelType modelType) {
this.modelType = modelType;
}

public List<ModelData> read(C loadConfig, Object data) {
JSONObject jsonRoot = (JSONObject) JSONParser.parse((String) data);
JSONArray root = (JSONArray) jsonRoot.get(modelType.root);
int size = root.size();
ArrayList<ModelData> records = new ArrayList<ModelData>();
for (int i = 0; i < size; i++) {
JSONObject obj = (JSONObject) root.get(i);
ModelData model = newModelInstance();
for (int j = 0; j < modelType.getFieldCount(); j++) {
DataField field = modelType.getField(j);
String map = field.map != null ? field.map : field.name;
JSONValue value = obj.get(map);

if (value == null) continue;
if (value.isArray() != null) {
// nothing
} else if (value.isBoolean() != null) {
model.set(field.name, value.isBoolean().booleanValue());
} else if (value.isNumber() != null) {
model.set(field.name, value.isNumber().doubleValue());
} else if (value.isObject() != null) {
// nothing
} else if (value.isString() != null) {
String s = value.isString().stringValue();
if (field.type != null) {
if (field.type.equals(Date.class)) {
DateTimeFormat format = DateTimeFormat.getFormat(field.format);
Date d = format.parse(s);
model.set(field.name, d);
}
} else {
model.set(field.name, s);
}

} else if (value.isNull() != null) {
model.set(field.name, null);
}
}
records.add(model);
}
return records;
}

/**
* Returns the new model instances. Subclasses may override to provide an
* model data subclass.
*
* @return the new model data instance
*/
protected ModelData newModelInstance() {
return new BaseModelData();
}
}

Let me know if that works for you.

[keypoint]

Thanks! Looks like a great starting point.

[keypoint]

To those interested, in order to make the tree items display a certain label, define the ModelType with the needed fields and then run setDisplayProperty on the TreeBinder object, with the name of the field holding the label.

[mkn]

I have been trying to figure out where to start to make either an XML or a JSON data reader work without using the GWT RPC mechanism. There are cases where one simply cannot use Java and this is where a simple PHP class creating the JSON string comes handy. Moreover, parsing JSON in an Ajax application is a lot faster than parsing XML - at least in GWT client side.

What I have at the moment is the url String to the PHP service that returns the JSON (or XML if preferred):

http://localhost/test/getdata.php?pa...=b&output=json (http://localhost/test/getdata.php?param1=a&param2=b&output=json) etc....

but I cannot figure out the set of classes even though I have succesfully written an RPC implementation already. Can I extend/implement an existing one or do I need to create a new one from scratch and how to perform the task? Has anybody done anything like this already?

btw: GXT looks really good and very professional. I hope Instantiations will include full support to the GWT designer in a near future.

Markku

[keypoint]

Look at the code fragments above. Together they form a working example :)

[mkn]

Look at the code fragments above. Together they form a working example :)

me, now that you say it I can really see the answer in your example (for some reason I moved to Darrel's reply too hastily). Blush. I should obviously go back to bed and continue intellectual work a bit later :|

Thanks

Markku

[mkn]

Actually I still seem be in a stalled state (even after having the nap I needed). I can get the JSON data to the callback now but nothing happens after that. I assume that I have to take some extra steps to make paging work the way it does in the RPC end. Using RPC this is utterly simple as there we know exactly what will happen and when. But how on earth do I bolt the paging to the plain client-side asynchronous JSON reader/loader/proxy?

Should I make use of the LoadConfig object in the callback? Or - generally - do I need to do even more hand coding if I do not use RPC?

Markku

[Tereno]

Are there any examples for the ScriptProxy versus the HttpProxy? I read somewhere that to load data from a remote server that you need to use the ScriptProxy.

[keypoint]

I haven't tried paging yet. For that I think you need a different binder/store type. If you can't figure it out, Darrell could be of more assistance ;)

[Gooch]

Hello,
I am having issues passing parameters via the HttpProxy.
I am able to successfully call the RequestBuilder.setRequestData method, but when I create the RequestBuilder, then create an HttpProxy from it, and call HttpProxy.load, I get a message indicating my parameter is missing. I am able to successfully make a call with no parameters.
Code:

ModelType type = new ModelType();
type.root = "Folders";
type.recordName = "Folder";
type.addField("Name");
type.addField("Id");
XmlReader reader = new XmlReader(type);

RequestBuilder builder = new RequestBuilder(RequestBuilder.POST, "http://localhost/ECMAPIWebService/ECMAPIGWTPrototype.asmx/getFolders");
builder.setHeader("Content-Type","application/x-www-form-urlencoded"); //For asmx webservice
String requestData = URL.encode("id={63EA8E03-6A24-4BF3-811D-97B82F4EF153}");
builder.setRequestData(requestData);

HttpProxy proxy = new HttpProxy(builder) {
@Override
public void load(DataReader reader, Object loadConfig, AsyncCallback callback) {
super.load(reader, loadConfig, new MyCallback());
}
};

try {
proxy.load(reader, requestData, new MyCallback());
}
catch(Exception e)
{
System.out.println(e.getMessage());

Within the MyCallback.onFailure() method, the following message is present:

System.InvalidOperationException: Missing parameter: id.
at System.Web.Services.Protocols.ValueCollectionParameterReader.Read(NameValueCollection collection)
at System.Web.Services.Protocols.HtmlFormParameterReader.Read(HttpRequest request)
at System.Web.Services.Protocols.HttpServerProtocol.ReadParameters()
at System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()


The request information (retrieved from fiddler):
POST /ECMAPIWebService/ECMAPIGWTPrototype.asmx/getFolders HTTP/1.1
Accept: */*
Accept-Language: en-US,it-IT;q=0.7,el-GR;q=0.3
Referer: http://localhost:8888/com.agilent.TestDotNetService/hosted.html?com_agilent_TestDotNetService
Content-Type: application/x-www-form-urlencoded
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; InfoPath.2; .NET CLR 3.5.21022; .NET CLR 3.0.04506)
Host: ssi-aghilard
Content-Length: 0
Connection: Keep-Alive
Pragma: no-cache

When making the same call via my web browser (IE), the request looks like this:
POST /ECMAPIWebService/ECMAPIGWTPrototype.asmx/getFolders HTTP/1.1
Accept: */*
Referer: http://localhost/ECMAPIWebService/ECMAPIGWTPrototype.asmx?op=getFolders
Accept-Language: en-US,it-IT;q=0.7,el-GR;q=0.3
Content-Type: application/x-www-form-urlencoded
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; InfoPath.2; .NET CLR 3.5.21022; .NET CLR 3.0.04506)
Connection: Keep-Alive
Content-Length: 45
Host: localhost
Pragma: no-cache

id=%7B63EA8E03-6A24-4BF3-811D-97B82F4EF153%7D



(The "id= . . . " is not present in the HttpProxy generated request)
What I am missing? The RequestBuilder.sendRequest method works correctly.

[gtfMasterJohn]

i have tried to use the two ways for the JSON Tree View either using the JsonReader and the JsonTreeReader without success. Anyone can help me?

Here are the results.

-----------------------------------------------------------------------------------
Using JsonTreeReader
-----------------------------------------------------------------------------------




Entry 1








Entry 2








Entry 3








Entry 4








Entry 5





[com.extjs.gxt.ui.client.data.BaseModelData@1fc2cfb, com.extjs.gxt.ui.client.data.BaseModelData@ed1bf6, com.extjs.gxt.ui.client.data.BaseModelData@c6d5cd, com.extjs.gxt.ui.client.data.BaseModelData@1feb551, com.extjs.gxt.ui.client.data.BaseModelData@131d9dc]
------------------------------------------------------------------------------------
Using JsonReader
------------------------------------------------------------------------------------
java.lang.ClassCastException: com.extjs.gxt.ui.client.data.BaseListLoadResult cannot be cast to java.util.List
at Love.GXT.client.MyCallback.onSuccess(AsyncTreeView.java:97)
at com.extjs.gxt.ui.client.data.HttpProxy$1.onResponseReceived(HttpProxy.java:65)
at com.google.gwt.http.client.Request.fireOnResponseReceivedImpl(Request.java:254)
at com.google.gwt.http.client.Request.fireOnResponseReceivedAndCatch(Request.java:226)
at com.google.gwt.http.client.Request.fireOnResponseReceived(Request.java:217)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
at java.lang.reflect.Method.invoke(Unknown Source)
at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
at com.google.gwt.dev.shell.ie.IDispatchImpl.callMethod(IDispatchImpl.java:126)
at com.google.gwt.dev.shell.ie.IDispatchProxy.invoke(IDispatchProxy.java:155)
at com.google.gwt.dev.shell.ie.IDispatchImpl.Invoke(IDispatchImpl.java:294)
at com.google.gwt.dev.shell.ie.IDispatchImpl.method6(IDispatchImpl.java:194)
at org.eclipse.swt.internal.ole.win32.COMObject.callback6(COMObject.java:117)
at org.eclipse.swt.internal.win32.OS.DispatchMessageW(Native Method)
at org.eclipse.swt.internal.win32.OS.DispatchMessage(OS.java:1925)
at org.eclipse.swt.widgets.Display.readAndDispatch(Display.java:2966)
at com.google.gwt.dev.GWTShell.pumpEventLoop(GWTShell.java:720)
at com.google.gwt.dev.GWTShell.run(GWTShell.java:593)
at com.google.gwt.dev.GWTShell.main(GWTShell.java:357)


------------------------------------------------------------------------------------

here the Json that i'm sending:
------------------------------------------------------------------------------------
{"root":[{"name":"Entry 1"},{"name":"Entry 2"},{"name":"Entry 3"},{"name":"Entry 4"},{"name":"Entry 5"}]}
-------------------------------------------------------------------------------------
Here the code that i'm using with the JsonReader
-------------------------------------------------------------------------------------

import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.binder.TreeBinder;
import com.extjs.gxt.ui.client.data.BaseTreeLoader;
import com.extjs.gxt.ui.client.data.DataReader;
import com.extjs.gxt.ui.client.data.HttpProxy;
import com.extjs.gxt.ui.client.data.JsonReader;
import com.extjs.gxt.ui.client.data.JsonTreeReader;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.ModelType;
import com.extjs.gxt.ui.client.data.TreeLoader;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.tree.Tree;
import com.extjs.gxt.ui.client.widget.tree.TreeItem;
import com.google.gwt.core.client.GWT;
import com.google.gwt.http.client.RequestBuilder;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import java.util.List;

public class AsyncTreeView extends LayoutContainer{

protected void onRender(Element parent,int pos){
super.onRender(parent, pos);
final Tree tree = new Tree();
RequestBuilder builder = new RequestBuilder(RequestBuilder.GET,
"Service.html");
HttpProxy proxy = new HttpProxy(builder) {
@Override
public void load(DataReader reader, Object loadConfig,
AsyncCallback callback) {
super.load(reader, loadConfig, new MyCallback());
}
};
ModelType type = new ModelType();
type.root = "root";
type.addField("name");
JsonReader reader = new JsonReader(type);
TreeLoader loader = new BaseTreeLoader(proxy, reader);
new TreeBinder(tree, new TreeStore(loader));

RootPanel.get().add(tree);
Registry.register("tree", tree);

loader.load();
}
}

class MyCallback implements AsyncCallback {

public void onFailure(Throwable caught) {
Label label = new Label(caught.getMessage());
caught.printStackTrace();
RootPanel.get().add(label);
}

public void onSuccess(Object result) {

Label label = new Label(result.toString());
RootPanel.get().add(label);

for(int i =0;i<((List<ModelData>)result).size();i++){
((Tree)Registry.get("tree")).getRootItem().add(new TreeItem(((List<ModelData>)result).get(i).get("name").toString()));
}
}

}

------------------------------------------------------------------------------------
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

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

/**
* This is the entry point method.
*/
public void onModuleLoad() {
//Label label = new Label("is Working");
//RootPanel.get().add(label);
AsyncTreeView treeview = new AsyncTreeView();
treeview.onRender(RootPanel.getBodyElement(), 10);
treeview.setVisible(true);
}
}

-------------------------------------------------------------------------------------
Here the code that i'm using with the JsonTreeReader (Changes just in the AsyncTreeView Class)
-------------------------------------------------------------------------------------

public class AsyncTreeView extends LayoutContainer{

protected void onRender(Element parent,int pos){
super.onRender(parent, pos);

final Tree tree = new Tree();

setLayout(new FlowLayout(10));

//RequestBuilder builder = new RequestBuilder(RequestBuilder.POST,"JsonPoster");
RequestBuilder builder = new RequestBuilder(RequestBuilder.POST,"Service.html");
HttpProxy proxy = new HttpProxy(builder){

public void load(DataReader reader,Object loadConfig, AsyncCallback callback){
super.load(reader, loadConfig, new MyCallback());
}
};
ModelType type = new ModelType();
type.root = "root";
type.addField("name");
//type.addField("text");
//type.addField("id");
//type.addField("cls");
JsonTreeReader reader = new JsonTreeReader(type);
//JsonReader reader = new JsonReader(type);
TreeLoader loader = new BaseTreeLoader(proxy,reader);
TreeBinder binder = new TreeBindder(tree,new TreeStore(loader));
binder.setDisplayProperty("name");

RootPanel.get().add(tree);
Registry.register("tree", tree);

loader.load();
}
}

[gtfMasterJohn]

Hello All i think i have it, the Tree is populating was was expected. But what i can't see why is not working is the setIconProvider or the setStyle Provider, i'm using the ext-all.css from the examples and the same images estructure for a while i'm trying to get the TreeView to work.

i'm using this without success:
binder.setIconProvider(new ModelStringProvider(){
public String getStringValue(ModelData model, String property) {
Label label = new Label("We are inside setIconProvider");
RootPanel.get().add(label);
return "tree-folder-open";
}
});

binder.setStyleProvider(new ModelStringProvider(){
public String getStringValue(ModelData model, String property) {
Label label = new Label("We are inside setStyleProvider");
RootPanel.get().add(label);
return "tree-folder-open";
}
});

binder.init();

while when i use this:
tree.getStyle().setLeafIconStyle("tree-folder-open");
works perfect. I don't know why binder.set[Style Icon]Provider never use its getStringValue

Do you have any idea about what is happening?
I have read threads about setIconProvider, but the problems appears tobe resolved.

[gtfMasterJohn]

Of course i have tried setIconProvider with images as well like the Async example and nothing.

[gtfMasterJohn]

i have managed to get a working example of what i'm trying to do. Seems that there is a bug using binder.setIconProvider when i use the AsyncTree, this is very strange i just change the way it obtains the data, with a service that has work before and then the binder doesn't work. AnyIdeas?
here your have:
--------------------------------------------------------------------------------------


//import com.extjs.gxt.ui.client.event.ComponentEvent;
//import com.extjs.gxt.ui.client.event.SelectionListener;
//import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.binder.TreeBinder;
import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.ModelStringProvider;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;

import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.tree.Tree;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

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

/**
* This is the entry point method.
*/
public void onModuleLoad() {
Viewport vp = new Viewport();
final ContentPanel panel = new ContentPanel();

final Tree tree = new Tree();
tree.setCheckable(true);

final TreeStore store = new TreeStore();
final BaseTreeModel a = new BaseTreeModel();
a.set("name", "Item 1");
final BaseTreeModel b = new BaseTreeModel();
b.set("name", "Item 2");
final BaseTreeModel b1 = new BaseTreeModel();
b1.set("name", "Item 21");
final BaseTreeModel c = new BaseTreeModel();
c.set("name", "Item 3");
store.add(a,true);
store.add(b,true);
store.add(b, b1,true);
store.add(c,true);

final TreeBinder binder = new TreeBinder(tree, store);
binder.setDisplayProperty("name");

binder.setIconProvider(new ModelStringProvider() {
public String getStringValue(ModelData arg0, String arg1) {
return "my-icon-asc";
}
});

binder.setStyleProvider(new ModelStringProvider() {

public String getStringValue(ModelData arg0, String arg1) {
return "x-info-header";
}
});

binder.init();

/*Button bu = new Button("Update all");
bu.addSelectionListener(new SelectionListener() {
public void componentSelected(ComponentEvent arg0) {
Iterator<ModelData> it = store.getAllItems().iterator();
while(it.hasNext()) {
binder.update(it.next());
// also: store.update(it.next());
// This throws NPE when Item 2 was not expanded:
// [ERROR] Uncaught exception escaped
// java.lang.NullPointerException: null
// at com.extjs.gxt.ui.client.binder.TreeBinder.update(TreeBinder.java:141)

}
}
});

Button bufilter = new Button("Apply filter - !'Item 1'");
bufilter.addSelectionListener(new SelectionListener() {
public void componentSelected(ComponentEvent arg0) {
StoreFilter filter = new StoreFilter(){
public boolean select(Store arg0, ModelData arg1, ModelData arg2, String arg3) {
if(!((String)arg2.get("name")).equals("Item 1")) return true;
return false;
}
};
store.addFilter(filter);
store.filter("");
}
});

*/
panel.add(tree);
//panel.addButton(bu);
//panel.addButton(bufilter);

vp.add(panel);
RootPanel.get().add(vp);
}
}

--------------------------------------------------------------------------------------
Then the code that doesn't work do you have any idea of what can i do or what i'm doing wrong i just change the way the tree obtain the data,
---------------------------------------------------------------------------------------

//import com.extjs.gxt.ui.client.event.ComponentEvent;
//import com.extjs.gxt.ui.client.event.SelectionListener;
//import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.binder.TreeBinder;
import com.extjs.gxt.ui.client.data.BaseTreeLoader;
import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.extjs.gxt.ui.client.data.DataReader;
import com.extjs.gxt.ui.client.data.HttpProxy;
import com.extjs.gxt.ui.client.data.JsonTreeReader;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.ModelStringProvider;
import com.extjs.gxt.ui.client.data.ModelType;
import com.extjs.gxt.ui.client.data.TreeLoader;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;

import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.tree.Tree;
import com.extjs.gxt.ui.client.widget.tree.TreeItem;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.http.client.RequestBuilder;
import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.extjs.gxt.ui.client.data.ModelData;
import java.util.List;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class GXTLove implements EntryPoint {

/**
* This is the entry point method.
*/
public void onModuleLoad() {
Viewport vp = new Viewport();
final ContentPanel panel = new ContentPanel();

final Tree tree = new Tree();
tree.setCheckable(true);

RequestBuilder builder = new RequestBuilder(RequestBuilder.POST,"Service.html") ;
HttpProxy proxy = new HttpProxy(builder){
public void load(DataReader reader,Object loadConfig, AsyncCallback callback){
super.load(reader, loadConfig, new MyCallback());
}
};
ModelType type = new ModelType();
type.root = "root";
type.addField("name");
//type.addField("text");
//type.addField("id");
//type.addField("cls");
JsonTreeReader reader = new JsonTreeReader(type);
//JsonReader reader = new JsonReader(type);
TreeLoader loader = new BaseTreeLoader(proxy,reader);
TreeBinder binder = new TreeBinder(tree,new TreeStore(loader));

binder.setDisplayProperty("name");

binder.setIconProvider(new ModelStringProvider() {
public String getStringValue(ModelData arg0, String arg1) {
return "my-icon-asc";
}
});

binder.setStyleProvider(new ModelStringProvider() {

public String getStringValue(ModelData arg0, String arg1) {
return "x-info-header";
}
});

binder.init();

/*Button bu = new Button("Update all");
bu.addSelectionListener(new SelectionListener() {
public void componentSelected(ComponentEvent arg0) {
Iterator<ModelData> it = store.getAllItems().iterator();
while(it.hasNext()) {
binder.update(it.next());
// also: store.update(it.next());
// This throws NPE when Item 2 was not expanded:
// [ERROR] Uncaught exception escaped
// java.lang.NullPointerException: null
// at com.extjs.gxt.ui.client.binder.TreeBinder.update(TreeBinder.java:141)

}
}
});

Button bufilter = new Button("Apply filter - !'Item 1'");
bufilter.addSelectionListener(new SelectionListener() {
public void componentSelected(ComponentEvent arg0) {
StoreFilter filter = new StoreFilter(){
public boolean select(Store arg0, ModelData arg1, ModelData arg2, String arg3) {
if(!((String)arg2.get("name")).equals("Item 1")) return true;
return false;
}
};
store.addFilter(filter);
store.filter("");
}
});

*/
panel.add(tree);
//panel.addButton(bu);
//panel.addButton(bufilter);

vp.add(panel);
RootPanel.get().add(vp);
}
}

class MyCallback implements AsyncCallback {

public void onFailure(Throwable caught) {
Label label = new Label(caught.getMessage());
caught.printStackTrace();
RootPanel.get().add(label);
}

public void onSuccess(Object result) {


StringBuffer data = new StringBuffer();
for(int i=0;i<((List<ModelData>)result).size();i++){
data.append(((List<ModelData>)result).get(i).toString()+"\n");
data.append(((List<ModelData>)result).get(i).getProperties().toString()+"\n");
}
Label label = new Label(data.toString());
RootPanel.get().add(label);

for(int i =0;i<((List<ModelData>)result).size();i++){
((Tree)Registry.get("tree")).getRootItem().add(new TreeItem(((List<ModelData>)result).get(i).get("name").toString()));
}
}

}
---------------------------------------------------------------------------------------

[gtfMasterJohn]

Seems that when i use a the JSON Load in my code the Binder doesn't set the styles, but when i use store aproach then the Binder works and set me the styles, what i'm missing?

[dhanabalan]

Hi,
Can you share your servlet code...

[HerrB]

This block:

} else if (value.isString() != null) {
String s = value.isString().stringValue();
if (field.type != null) {
if (field.type.equals(Date.class)) {
DateTimeFormat format = DateTimeFormat.getFormat(field.format);
Date d = format.parse(s);
model.set(field.name, d);
}
} else {
model.set(field.name, s);
}
has to be:

} else if (value.isString() != null) {
String s = value.isString().stringValue();
if (field.type != null) {
if (field.type.equals(Date.class)) {
DateTimeFormat format = DateTimeFormat.getFormat(field.format);
Date d = format.parse(s);
model.set(field.name, d);
} else {
model.set(field.name, s);
}
} else {
model.set(field.name, s);
}
Otherwise string values are not stored in the model, if a type has been specified for the field (and the field type is not Date.class ... ;-)).

Regards,

HerrB