SmartGWT: ComboBox - ValueMap not appearing - java

I'm still newbie in SmartGWT, currently having a strange problem..
I am using Windows XP and SmartGWT version 3.0,
GWT SDK 2.4.0 (using Eclipse IDE).
So my problem is, I kind of copied examples from the SmartGWT showcase: Styled ComboBox
DynamicForm df = new DynamicForm();
ComboBoxItem cb = new ComboBoxItem();
cb.setValueMap("cat", "dog", "bird");
cb.setTitle("Select:");
df.setItems(cb);
...
layout.addMember(df);
And when I run it as Web Application, the valuemap doesn't appear.
I mean, the [v] button is there but nothing happens when i clicked it..
Sorry for the noob question, and thanks for your help! :D
UPDATE - 05/03/2012
Here is what appears on my browser:
screenshot removed
Here is the full standalone code:
HelloWorld.java
package com.example.helloworld.client;
import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.ComboBoxItem;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
VLayout layout = new VLayout();
layout.setWidth100();
layout.setHeight100();
DynamicForm df = new DynamicForm();
ComboBoxItem cb = new ComboBoxItem();
cb.setTitle("Select :");
cb.setValueMap("Cat", "Dog", "Bird");
df.setItems(cb);
layout.addMember(df);
layout.draw();
}
}
HelloWorld.gwt.xml
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- 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 -->
<inherits name="com.smartgwt.SmartGwt" />
<!-- Specify the app entry point class. -->
<entry-point class='com.example.helloworld.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
</module>
On the 'Development Mode' tab in Eclipse (the one that shows you link to run on browser),
i get this message:
[INFO] [helloworld] - Your *.gwt.xml module configuration prohibits
the use of the current doucment rendering mode (document.compatMode='
CSS1Compat').Modify your application's host HTML page doctype, or
update your custom 'document.compatMode' configuration property
settings.
There is also a single warning:
The following classpath entry 'C:\some-path\smartgwt-3.0\smartgwt.jar'
will not be available on the server's classpath.
UPDATE 2 - HTML and CSS file
HTML:
<!doctype html>
<!-- The DOCTYPE declaration above will set the -->
<!-- browser's rendering engine into -->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype is not supported. -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<link type="text/css" rel="stylesheet" href="HelloWorld.css">
<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Web Application Starter Project</title>
<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script type="text/javascript" language="javascript" src="helloworld/helloworld.nocache.js"></script>
</head>
<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
</html>
and the CSS file:
/** Add css rules here for your application. */
/** Example rules used by the template application (remove for your app) */
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}
.sendButton {
display: block;
font-size: 16pt;
}
/** Most GWT widgets already have a style name defined */
.gwt-DialogBox {
width: 400px;
}
.dialogVPanel {
margin: 5px;
}
.serverResponseLabelError {
color: red;
}
/** Set ids using widget.getElement().setId("idOfElement") */
#closeButton {
margin: 15px 6px 6px;
}
IMPORTANT UPDATE
I forgot to inform you that I am currently using Google Chrome(18.0.1025.168) for debug / test build. When I ran it on Firefox, it runs OK!
I noticed this thread a bit late.. So this is currently a known bug.
conclusion: do NOT use google chrome for GWT / smartGWT development mode (for now).
Thank you for your help! :D

I forgot to inform you that I am currently using Google Chrome(18.0.1025.168) for debug / test build. When I ran it on Firefox, it runs OK!
I noticed this thread (smartclient forum) a bit late.. So this is currently a known bug.
conclusion: do NOT use google chrome for GWT / smartGWT development mode (for now).
Thank you for your help! :D

ComboBox is not SmartGWT. Where is it coming from ?
This code works as expected :
DynamicForm df = new DynamicForm();
ComboBoxItem cb = new ComboBoxItem();
cb.setValueMap("cat", "dog", "bird");
cb.setTitle("Select");
df.setItems(cb);
HLayout layout = new HLayout();
layout.addMember(df);
layout.draw();

DynamicForm df = new DynamicForm();
ComboBox cb = new ComboBox();
cb.setValueMap("cat", "dog", "bird");
cb.setTitle("Select:");
//other fields
df.setFields(cb); // Use this to add fields
layout.addMember(df);
Have a look At Show Case

Try this..
DynamicForm df = new DynamicForm();
ComboBox cb = new ComboBox();
Map<String,String> valuesMap = new HashMap<String,String>();
valuesMap.put("cat","cat");
valuesMap.put("dog","dog");
valuesMap.put("bird","bird");
cb.setValueMap(valuesMap);
cb.setTitle("Select:");
df.setItems(cb);
...
layout.addMember(df);

If you are in debug mode you never will see the content of this selectItem or comboBox, but if you select down with the keyboard you will see the content. You should be in "production" mode for see everything correctly
Is a problem with chrome, if you work with firefox you will see the content

Related

How to combine GWT and Material Design Library w/o Maven?

I was trying to use the MD-Library from Central Maven Repo by just downloading the jar's and just using a normal Java-Project in Eclipse.
From the Central Maven Repo I used the jar gwt-material and since it said during compilation I need MD-jQuery-lib as well, I integrated that jar for gwt-material-jQuery, too.
So following you will find
gwt.xml: where I inherit all the required libraries for the gwt-project
the entryPoint-class (Addressbook2) with onModuleLoad()-method
UIBinder-class, of which an instance should be added in the entryPoint-class
UIBinder.ui.xml-file where the MatDes-Lib is integrated as resource-field
Sorry in advance for such a huge post. Did not know how to pack it more compact.
So running and compiling this in Eclipse does work now with GWT Development Mode with Jetty, after integrating MatDes-jQuery-Lib, but when I open the address at the local host http://127.0.0.1:8888/Addressbook.html I am just getting an white browser window without content and even can not open the Dev-Tools. Am I missing something in the configuration or is the code just not correct and I have to adjust it?
gwt.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.2//EN"
"http://gwtproject.org/doctype/2.8.2/gwt-module.dtd">
<module rename-to='addressbook'>
<inherits name='com.google.gwt.user.User'/>
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<inherits name='gwt.material.design.jquery.JQuery'/>
<inherits name='gwt.material.design.GwtMaterialDesignBasic'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
<entry-point class='addressbook.client.Addressbook2'/>
<!-- allow Super Dev Mode -->
<add-linker name="xsiframe"/>
<set-configuration-property name="CssResource.enableGss" value="true" />
<extend-property name="locale" values="de, en"/>
<set-property-fallback name="locale" value="en"/>
</module>
EntryPoint-Class
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import addressbook.client._2view.MainViewUIB;
public class Addressbook2 implements EntryPoint {
#Override
public void onModuleLoad() {
Window.alert("Hello, World!");
RootLayoutPanel.get().add(new MainViewUIB());
}
}
MainViewUIB-Class
package addressbook.client._2view;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
import gwt.material.design.client.resources.MaterialResources;
public class MainViewUIB extends Composite {
private static final MainViewUIBUiBinder uiBinder = GWT.create(MainViewUIBUiBinder.class);
interface MainViewUIBUiBinder extends UiBinder<Widget, MainViewUIB> {
}
public MainViewUIB() {
initWidget(uiBinder.createAndBindUi(this));
}
#UiField(provided = true)
MaterialResources res;
}
MainViewUI.ui.xml
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:m="urn:import:gwt.material.design.client.ui">
<ui:with type="gwt.material.design.client.resources.MaterialResources" field="res"></ui:with>
<m:MaterialPanel>
<m:MaterialIcon marginTop="120" iconType="POLYMER" iconSize="LARGE"/>
<m:MaterialLabel text="Hello MD World" fontSize="2em"/>
<m:MaterialLabel text="Start building now your gwt-material apps." fontSize="0.8em"/>
</m:MaterialPanel>
</ui:UiBinder>
That is the result I am getting by inspecting the page in chrome I just get one Element on the page:
<iframe id="addressbook" tabindex="-1" style="position: absolute; width: 0px; height: 0px; border: none; left: -1000px; top: -1000px;">
<script src="http://127.0.0.1:9876/addressbook/0A7EA82001E95E9BED1D0ABA0EF89DEF.cache.js"></script>
</iframe>
#UiField(provided = true)
MaterialResources res;
The provided=true means that the .ui.xml doesn't need to create this resource, because you will provide it before calling createAndBind. Failing to do this may cause NullPointerExceptions to happen while trying to make the widget, which would result in no content being visible on this path. However, nothing in your .ui.xml actually seems to use res (except for being declared in the ui:with, which is like declaring it as a variable), so you can probably remove both the field and the ui:with pointing at it.

GWT compilation failed in eclipse

guys i am trying to make small app using gxt but it gives me GWT compilation failed and then [ERROR] Line 96: Value 'ie6' in not a valid value for property 'user.agent' appears in the console
here is my code
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD GWT 2.7.0//EN"
"http://gwtproject.org/doctype/2.7.0/gwt-module.dtd">
<module rename-to='gxt_project'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User' />
<!-- Other module inherits -->
<inherits name='com.sencha.gxt.ui.GXT' />
<set-property name="user.agent" value="safari" />
<!-- GXT stylesheet -->
<stylesheet src="reset.css" />
<!-- Specify the app entry point class. -->
<entry-point class='com.sencha.gxt.project.client.GXT_Project' />
<!-- Specify the paths for translatable code -->
<source path='client' />
<source path='shared' />
</module>
and
public class GXT_Project implements EntryPoint {
#Override
public void onModuleLoad() {
TextButton textButton = new TextButton("Verify GXT Works");
RootPanel.get().add(textButton);
textButton.addSelectHandler(new SelectHandler() {
#Override
public void onSelect(SelectEvent event) {
MessageBox messageBox = new MessageBox("GXT Works.");
messageBox.show();
}
});
}
}
also here is the project trace
project trace
any help would be appreciated .. thanks a lot
GWT 2.7.0 does not support ie6, but GXT 3.0.1 uses it in itself .gwt.xml (com/sencha/gxt/core/Core.gwt.xml etc).
You should upgrade GXT version or downgrade GWT version.
See Also: GXT 4.0 Guides | GWT and GXT Versions

Why isn't my GWT web application running properly?

I'm going through the book: GWT in Action. On chapter I'm working through the very first hello world application. It's all in development mode.
My issue is that the label in my .java file is not showing up when I open the URL webpage. There is nothing being displayed versus the Label("Hello World!") appearing.
EDIT: When at the displayed webpage, I pressed F12 in google chrome to see if I could find anything weird. Got the error: Failed to load resource: the server responded with a status of 404 (Not Found)
HelloWorld.gwt.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.6.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.6.0/distro-source/core/src/gwt-module.dtd">
<module>
<inherits name="com.google.gwt.user.User" />
<source path="client" />
<entry-point class="com.example.gwt.client.HelloWorld"></entry-point>
</module>
HelloWorld.java
package com.example.gwt.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
public class HelloWorld implements EntryPoint {
#Override
public void onModuleLoad() {
RootPanel.get().add(new Label("Hello World!"));
}
}
HelloWorld.html
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HelloWorld</title>
<script type="text/javascript" language="javascript" src=".nocache.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html>
My console is displaying this after I run it as a web application:
[WARN] Server class 'org.eclipse.jetty.servlet.listener.ELContextCleaner' could not be found in the web app, but was found on the system classpath
[WARN] Adding classpath entry 'file:/C:/Users/Qs/Desktop/eclipse/plugins/com.google.gwt.eclipse.sdkbundle_2.6.0/gwt-2.6.0/gwt-dev.jar' to the web app classpath for this session
For additional info see: file:/C:/Users/Qs/Desktop/eclipse/plugins/com.google.gwt.eclipse.sdkbundle_2.6.0/gwt-2.6.0/doc/helpInfo/webAppClassPath.html
If you don't specify the rename-to in your gwt.xml as shown below then by default GWT places the generated nocache.js under war directory by the name of location of gwt.xml followed by its name as shown in below snapshot.
<module rename-to="xyz">
For more info have a look at gwt-module dtd.
Please have a look Defining a module and Renaming modules
There are two ways to solve this issue:
define rename-to in gwt.xml that is more preferable over second solution
gwt.xml
<module rename-to="hello">
html
<script type="text/javascript" language="javascript" src="hello/hello.nocache.js"></script>
use default way
html
<script type="text/javascript" language="javascript" src="com.example.gwt.HelloWorld/com.example.gwt.HelloWorld.nocache.js"></script>
Here is a snapshot to make it more clear
Change the src attribute of the script tag in HelloWorld.html to
src="com.example.gwt.client.HelloWorld/com.example.gwt.client.HelloWorld.nocache.js"
If that still doesn't work, run the GWT compiler and look at the files it generates to determine the exact name of the *.nocache.js file.

Making Google Visualization - Annotation Chart to work in GWT

I am using the newly released Annotation Chart in gwt by calling native javascript, and what I got until now is to have it display the example chart as it is, but the problem I am having is that it is not interactive at all. It looks more like an image. Anyone got any idea about how might I make this work properly?
Here's the code I am using:
public void onModuleLoad() {
createChart();
}
private native void createChart()
/*-{
$wnd.google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new $wnd.google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Kepler-22b mission');
data.addColumn('string', 'Kepler title');
data.addColumn('string', 'Kepler text');
data.addColumn('number', 'Gliese 163 mission');
data.addColumn('string', 'Gliese title');
data.addColumn('string', 'Gliese text');
data.addRows([
[new Date(2314, 2, 15), 12400, undefined, undefined,
10645, undefined, undefined],
[new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
12374, undefined, undefined],
[new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
15766, 'Gallantors', 'First Encounter'],
[new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
34334, 'Gallantors', 'Statement of shared principles'],
[new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
66467, 'Gallantors', 'Mysteries revealed'],
[new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
79463, 'Gallantors', 'Omniscience achieved']
]);
var chart = new $wnd.google.visualization.AnnotationChart($wnd.document.getElementById('chart_div'));
var options = {
displayAnnotations: true,
};
chart.draw(data, options);
}
}-*/;
and I am loading the library in the HTML file:
<!doctype html>
<!-- The DOCTYPE declaration above will set the -->
<!-- browser's rendering engine into -->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype is not supported. -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<link type="text/css" rel="stylesheet" href="GUI.css">
<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Analytics</title>
<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script type="text/javascript" language="javascript" src="gui/gui.nocache.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {'packages' : ["annotationchart"] });
</script>
</head>
<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
To answer my own question, here is the GWT wrapper that I wrote for this chart. It works and supports all the options, and can be used in the same way as you would use other google charts in GWT.

Jsf 2.0 Custom Tag

I get the following error on every page of my project when I am removing the MyFaces-2.0 entry from web.xml. My project is created using JSF 2.0.
Error:
One or more resources have the target of 'head', but no 'head'
component has been defined within the view.
web.xml:
<context-param>
<param-name>org.jboss.jbossfaces.JSF_CONFIG_NAME</param-name>
<param-value>MyFaces-2.0</param-value>
</context-param>
After removing that entry my custom tag runs. If I put this in web.xml again, then the compiler doesn't go to the component class.
As the message you got says, you have no head component in your view (on your Facelet). Such a component is needed for other components that e.g. want to inject scripts and css resources into the head.
The remedy is to simply add this component on your Facelet, e.g.:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
>
<!-- The head component that was missing -->
<h:head/>
<h:body>
<!-- Other components here -->
</h:body>
</html>

Categories

Resources