Not getting good look and feel for Tree Grid

[navneethr]

Hello,
I am new to SmartGwt though I did a little work on the client side in GWT.
I am trying to explore the use of the TreeGrid component so that I can select treenodes and display information of a particular node in a form, edit it in the form and send it back to the TreeGrid data.

First issue that I am having (been working on this for the whole of yesterday and day before ) is to try to give it a good look and feel and to display the intended information.
My desire is to get it to look something like
http://www.java2s.com/Code/Java/GWT/TreewithMultipleColumnsSampleSmartGWT.htm
I have been trying various methods of the TreeGrid but I am getting a very drab looking interface with empty check boxes. I am unable to give the Grid a good border, the header fields are not being displayed the way I wanted it, the Look and feel is very bad, the nodeicon images are not showing, etc. Pl find below the code that I am playing with. I started with the class LocalDataSample.java that came with the installation.
Any tips on how I can resolve this would be very welcome.
I have a feeling that for some reason the images, style in the smartgwt-skins.jar file are not getting reflected...not sure.... I have kept this jar file and the other gwt and smartgwt jar files in the WEB-INF/lib directory. Hope it is correct

I have tried this both on Unix and windows but have not been able to get a good L and F

I then want to make the nodes selectable so that I can capture info of the node. This I have not tried but some advance tips on this would be helpful.


Regards

package com.app.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.widgets.tree.TreeGrid;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class SmartGwtTest implements EntryPoint {
/**
* The message displayed to the user when the server cannot be reached or
* returns an error.
*/
private static final String SERVER_ERROR = "An error occurred while "
+ "attempting to contact the server. Please check your network "
+ "connection and try again.";

/**
* Create a remote service proxy to talk to the server-side Greeting service.
*/
private final GreetingServiceAsync greetingService = GWT.create(GreetingService.class);

/**
* This is the entry point method.
*/
public void onModuleLoad() {
final LocalDataTreeSample localDataTreeSample = new LocalDataTreeSample();
final TreeGrid treeGrid= localDataTreeSample.getTreeGrid();


// Add the nameField and sendButton to the RootPanel
// Use RootPanel.get() to get the entire body element
RootPanel.get("nameFieldContainer").add(treeGrid);


// Create a handler for the sendButton and nameField
class MyHandler implements ClickHandler, KeyUpHandler {
/**
* Fired when the user clicks on the sendButton.
*/
public void onClick(ClickEvent event) {
//sendNameToServer();
}

/**
* Fired when the user types in the nameField.
*/
public void onKeyUp(KeyUpEvent event) {
if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
//sendNameToServer();
}
}
}

// Add a handler to send the name to the server
MyHandler handler = new MyHandler();
//treeGrid.addCickHandler(handler);
}
}



package com.app.client;

import com.smartgwt.client.types.ExpansionMode;
import com.smartgwt.client.types.SelectionAppearance;
import com.smartgwt.client.types.TreeModelType;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.tree.Tree;
import com.smartgwt.client.widgets.tree.TreeGrid;
import com.smartgwt.client.widgets.tree.TreeGridField;
import com.smartgwt.client.widgets.tree.TreeNode;
//import com.smartgwt.sample.showcase.client.PanelFactory;
//import com.smartgwt.sample.showcase.client.ShowcasePanel;

//public class LocalDataTreeSample extends ShowcasePanel {
public class LocalDataTreeSample {
private static final String DESCRIPTION = "Load tree data from a collection of local beans.";
/***
// public static class Factory implements PanelFactory {


public static class Factory {

private String id;


public Canvas create() {
LocalDataTreeSample panel = new LocalDataTreeSample();
id = panel.getID();
return panel;
}

public String getID() {
return id;
}

public String getDescription() {
return DESCRIPTION;
}
}

***/

public TreeGrid getTreeGrid() {
TreeGrid treeGrid = new TreeGrid();
treeGrid.setWidth(600);
treeGrid.setHeight(400);
treeGrid.setBorder("4px");
//treeGrid.addStyleName("treeGrid");
treeGrid.setStyleName("treeGrid");
//treeGrid.setIconSize(14);
treeGrid.setShowAllColumns(Boolean.TRUE);
treeGrid.setExpansionMode(ExpansionMode.DETAILS);
//treeGrid.setImage("collapsedImage", "icons/16/person.png");
treeGrid.setNodeIcon( "http:/localhost:8080/SmartGwtTest/icons/person.png");
treeGrid.setFolderIcon( "icons/16/person.png");
treeGrid.setSelectionAppearance(SelectionAppearance.ROW_STYLE);
//treeGrid.setBackgroundColor("grey");
TreeGridField field = new TreeGridField("Name", "Tree from local data");
field.setCanSort(false);

treeGrid.setFields(field);
treeGrid.show();

///**
Tree tree = new Tree();
tree.setModelType(TreeModelType.PARENT);
//tree.setRootValue("1");
tree.setNameProperty("Name");
tree.setIdField("EmployeeId");
tree.setParentIdField("ReportsTo");
tree.setShowRoot(true);
System.out.println("11111");
EmployeeTreeNode root = new EmployeeTreeNode("4", "1", "Charles-or Madigen");
EmployeeTreeNode node2 = new EmployeeTreeNode("188", "4", "Rogine Leger");
EmployeeTreeNode node3 = new EmployeeTreeNode("189", "4", "Gene Porter");
EmployeeTreeNode node4 = new EmployeeTreeNode("265", "189", "Olivier Doucet");
EmployeeTreeNode node5 = new EmployeeTreeNode("264", "189", "Cheryl Pearson");

//tree.setRoot(rootNode);

tree.setData(new TreeNode[]{root, node2, node3, node4, node5});

//tree.setData(new TreeNode[]{rootNode});

//tree.setRoot(root);

treeGrid.setData(tree);



System.out.println("2223333");
return treeGrid;
}


public static class EmployeeTreeNode extends TreeNode {

public EmployeeTreeNode(String employeeId, String reportsTo, String name) {
setEmployeeId(employeeId);
setReportsTo(reportsTo);
System.out.println(" in constructor 11");
setIcon("icons/16/person.png");
setName(name);
}

public void setEmployeeId(String value) {
setAttribute("EmployeeId", value);
}

public void setReportsTo(String value) {
setAttribute("ReportsTo", value);
}

public void setName(String name) {
setAttribute("Name", name);
}
}
public String getIntro() {
return DESCRIPTION;
}
}


smartgwttest.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='smartgwttest'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>

<inherits name="com.smartgwt.SmartGwt"/>




<inherits name="com.google.gwt.core.Core"/>
<inherits name="com.google.gwt.user.History"/>

<inherits name="com.smartgwt.SmartGwtNoScript"/>
<inherits name="com.smartgwt.tools.SmartGwtTools"/>
<inherits name="com.smartclient.theme.enterprise.EnterpriseResources"/>
<inherits name="com.smartclient.theme.enterpriseblue.EnterpriseBlueResources"/>
<inherits name="com.smartclient.theme.graphite.GraphiteResources"/>






<!-- Inherit the default GWT style sheet. You can change -->
<!-- the theme of your GWT application by uncommenting -->
<!-- any one of the following lines. -->
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->

<!-- Other module inherits -->

<!-- Specify the app entry point class. -->
<entry-point class='com.app.client.SmartGwtTest'/>

<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>

</module>

[svjard]

Please use the CODE tags, it is very hard to read the code otherwise.

Note you are including the standard GWT theme in your xml file, DON'T do this. Second your using NoScript so I am guessing you aren't loading any themes inside your HTML file. See the Showcase code to help you get started or don't use NoScript.

[navneethr]

Hello,
Thanks for your valuable information. I will try it and get back on this. Thanks again.

[navneethr]

I changed the xml file as per the showcase.gwt.xml but had to add the line
<inherits name="com.smartgwt.SmartGwt"/>

without the above line I get a javascript error $wnd.isc is undefined.
Please find below the xml file. I will also try uploading it.
Would appreciate some suggestions on how to resolve this. I am unable to attach a snapshot of the look and feel that I am getting due to size limitations but will try to reduce the size and upload it.


======= start of SmartGwtTest.xml file =============
<CODE>


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.6.4//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.6.4/distro-source/core/src/gwt-module.dtd">

<module rename-to="smartgwttest">

<inherits name='com.google.gwt.user.User'/>
<inherits name="com.google.gwt.core.Core"/>
<inherits name="com.google.gwt.user.History"/>
<!-- without the line below error got was $wnd.isc is undefined -->
<inherits name="com.smartgwt.SmartGwt"/>


<!--rCom inherits name="com.smartgwt.SmartGwtNoScript"/-->
<inherits name="com.smartgwt.tools.SmartGwtTools"/>
<inherits name="com.smartclient.theme.enterprise.EnterpriseResources"/>
<inherits name="com.smartclient.theme.enterpriseblue.EnterpriseBlueResources"/>
<inherits name="com.smartclient.theme.graphite.GraphiteResources"/>

<entry-point class='com.app.client.SmartGwtTest'/>

<!-- english language, independent of country -->
<extend-property name="locale" values="en"/>


<!--german-->
<!--
<extend-property name="locale" values="de"/>

-->
<!--french in france -->
<!--
<extend-property name="locale" values="fr_FR"/>

-->
<!--greek (hellenic)-->
<!--
<extend-property name="locale" values="el"/>

-->
<!--spanish -->
<!--
<extend-property name="locale" values="es"/>

-->
<!--norwegian bokmal / norway-->
<!--
<extend-property name="locale" values="es"/>

-->
<!--polish-->
<!--
<extend-property name="locale" values="pl"/>

-->
<!--portuguese-->
<!--
<extend-property name="locale" values="pt"/>

-->
<!--russian / russia-->
<!--
<extend-property name="locale" values="ru_RU"/>

-->
<!--chinese / china-->
<!--
<extend-property name="locale" values="zh_CN"/>

-->
<!--italian -->
<!--
<extend-property name="locale" values="it"/>

-->
<!--romanian / romania -->
<!--
<extend-property name="locale" values="ro_RO"/>

-->
<!--portuguese / brazil-->
<!--
<extend-property name="locale" values="pt_BR"/>

-->
<!-- Specify the paths for translatable code -->

<source path='client'/>
<source path='shared'/>



</module>




</CODE>
======= end of SmartGwtTest.xml file =============

[navneethr]

Hello,
Could someone point me to a source that shows how a TreeGrid and the associated Tree data is to be used so that one can get a good look and feel. The code in the showcase module bundled with the SmartGwt download is complex and is dependant on datasources and so many other classes.

I have seached the net high and low but cannot find a simple standalone application complete with the associated ..gwt.xml file depicting this. I am looking for something like the standalone helloworld2.0 that has come bundled with the smartgwt2.1 download. Would appreciate some pointers on this.

[svjard]

So now that you made changes what is the issue? I mean yes you either need to include the SmartGWT module or use NoScript and include the javascript modules directly in your HTML files as the showcase does.

[navneethr]

Sorry I was not clear in my post.
The issue continues to remain. I am not getting a good look and feel. I have a feeling the css and image files are not getting linked. I need to reduce the size of the snapshot of the application so that the same can be uploaded.

If possible could you please point me to a standalone TreeGrid code with the correct gwt.xml file and associated java files. The showcase example shows good results but is difficult to replicate with only the treeGrid. I have searched the net exhaustively for a simple standalone TreeGrid java code with no success. Any suggestions will be very much appreciated.

[navneethr]

Hi Everyone,
I am surprised....There have been 76 views to this post and nobody can point me to a simple standalone application depicting a TreeGrid with a good look and feel.

How can developers use this component without such access? Do hope that the administrators of the SmartGwt forum will respond.
Look forward to some vital clues and suggestions...

[navneethr]

Hello,
After doing some more trials I figured out the issue. Please find attached a zipped version of the trial files that I was using. This may be useful to folks who may face the same problem that I faced. Do get in touch with me if anyone needs any clarification.

Finally resolved the look and feel issue.
Basically the html file was not including the scripts from the isomorphic folders. This html file was being created automatically by the gwt project creator.

Please find attached a zipped file of the trials that I am doing...
In the smartGwttest.java I am creating a treegrid based on a class LocalDataSample that I picked from the showcase code.

In the second case I was trying to create a TreeGrid based on the class that is actually used and rendered in the showcase example i.e the SideNavTree with the FrozenColumnsSample.java. I toggle between the 2 trials by commenting and uncommenting appropriate lines in this code.


final LocalDataTreeSample localDataTreeSample = new LocalDataTreeSample();
final TreeGrid treeGrid= localDataTreeSample.getTreeGrid();
//final SideNavTree navTreeGrid = new SideNavTree();

// Add the nameField and sendButton to the RootPanel
// Use RootPanel.get() to get the entire body element
RootPanel.get("nameFieldContainer").add(treeGrid);
//RootPanel.get("nameFieldContainer").add(navTreeGrid);

You will need the jar files gwt-dev.jar, gwt-servlet.jar, gwt-user.jar, smartgwt.jar, smartgwt-skins.jar. You will find these in the downloads of the gwt-2.03 and smartgwt-2.1.


You can build and run the application 2 ways w.r.t build.xml

1) ant hosted (effecient way brings up the gwt host env)

2) ant war (traditional build a war file and deploy to tomcat..slower and not effecient)

Regards and All the Best