PDA

View Full Version : cannot add gwt sdk



tong123123
26 Sep 2012, 12:03 AM
in http://www.sencha.com/learn/getting-started-with-ext-gwt/
I try to add GWT SDK in eclipse window > preference > Google WebToolKit > press "add" button and select the downloaded gxt-2.2.5 folder, but error "gwt-user.jar is missing" is shown!!
But if not add this google web toolkit SDK, then when following the step "Create Project", only GWT2.4 can be selected!!
So how to create a new GXT project using 2.2.5?
38933

38932

Colin Alworth
3 Nov 2012, 7:57 AM
GXT is not GWT, but depends on GWT. You need to have a copy of GWT on your computer, and to add GXT to the classpath afterward.

GWT is the compiler that allows Java to turn into JavaScript, whereas GXT is the set of widgets and data binding. Both are needed to develop an application.

Here is an article on setting up GWT and GXT 2.x: www.sencha.com/learn/setting-up-your-first-ext-gwt-project-in-eclipse/

If you are starting a new project, we encourage you to check out GXT 3 - we've made substantial changes to the API, allowing us to support new and upcoming GWT features as well as improved performance and better use of strong types.

tong123123
29 Nov 2012, 12:37 AM
the link
(http://www.sencha.com/learn/setting-up-your-first-ext-gwt-project-in-eclipse/)http://www.sencha.com/learn/setting-up-your-first-ext-gwt-project-in-eclipse/
is not for maven project,
is there any maven starting project for GXT 2.X?

Colin Alworth
3 Dec 2012, 8:39 PM
After you've got a standard GWT project going, add a dependency for GXT (2 or 3), then follow the rest of the setup instructions included in the GXT download. You'll need at least one new CSS file in you HTML page, and a new inherits statement - both of these will depend on which version of GXT you follow.

GXT is a library that augments GWT projects - it provides a consistent set of powerful widgets, it doesn't set any rules or requirements on how you build the GWT project, as long as it remains a valid, buildable GWT project.

tong123123
6 Dec 2012, 1:08 AM
I use webappcreator to create the project, then I try to follow setup.txt in gxt-3.0.1-GPL.zip and then run the project, everything is ok, the gwt DialogBox can be shown successfully.
Then I replace the DialogBox with com.sencha.gxt.widget.core.client.box.MessageBox, then when I run the example again, the MessageBox cannot be shown, and I use debug mode to run, I cannot see any error, so what happens?!!

If in the java file, I just write
public void onModuleLoad() {
MessageBox popup = new MessageBox("On the 8th day, God said...",
"Hello World");
RootPanel.get().add(popup);
popup.show();
}
then the messagebox can be shown correctly....is GXT component cannot cooperate with GWT component?

Colin Alworth
6 Dec 2012, 9:05 AM
No need to add the popup to the root panel, just call the show() method - it adds itself so that it doesn't end up at the bottom of your page.

Can you post your .html file and .gwt.xml file? It may be that you missed a piece of the instructions in setup.txt.

tong123123
6 Dec 2012, 6:46 PM
the gwt.xml file is as follow:


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

<!-- 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.clean.Clean'/>
<!-- <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='au.com.uptick.gwt.maven.sample.client.MyGwtMavenSampleApp'/>

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

</module>


the hosted page html is as follow:


<!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 rel="stylesheet" type="text/css" href="mygwtmavensampleapp/reset.css" /> -->
<link type="text/css" rel="stylesheet" href="MyGwtMavenSampleApp.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="mygwtmavensampleapp/mygwtmavensampleapp.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>

<h1>Web Application Starter Project</h1>

<table align="center">
<tr>
<td colspan="2" style="font-weight:bold;">Please enter your name:</td>
</tr>
<tr>
<td id="nameFieldContainer"></td>
<td id="sendButtonContainer"></td>
</tr>
<tr>
<td colspan="2" style="color:red;" id="errorLabelContainer"></td>
</tr>
</table>
</body>
</html>

tong123123
6 Dec 2012, 6:52 PM
the entry class is as follow, in fact, it is just the webAppCreator generated class with DialogBox replaced with gxt messagebox, however, the messagebox cannot be shown even no any error.
From the attachment, we see that the rpc call return to "onSuccess" successfully.
so, is gwt widget cannot work with GXT widget??


package au.com.uptick.gwt.maven.sample.client;

import au.com.uptick.gwt.maven.sample.shared.FieldVerifier;
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.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.sencha.gxt.widget.core.client.box.MessageBox;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class MyGwtMavenSampleApp 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 Button sendButton = new Button("Send");
final TextBox nameField = new TextBox();
nameField.setText("GWT User");
final Label errorLabel = new Label();

// We can add style names to widgets
sendButton.addStyleName("sendButton");

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

// Focus the cursor on the name field when the app loads
nameField.setFocus(true);
nameField.selectAll();

// Create the popup dialog box
final DialogBox dialogBox = new DialogBox();
final MessageBox popup = new MessageBox("On the 8th day, God said...",
"Hello World");
popup.setHeadingText("Remote Procedure Call");

final Button closeButton = new Button("Close");
// We can set the id of a widget by accessing its Element
closeButton.getElement().setId("closeButton");
final Label textToServerLabel = new Label();
final HTML serverResponseLabel = new HTML();
VerticalPanel dialogVPanel = new VerticalPanel();
dialogVPanel.addStyleName("dialogVPanel");
dialogVPanel.add(new HTML("<b>Sending name to the server:</b>"));
dialogVPanel.add(textToServerLabel);
dialogVPanel.add(new HTML("<br><b>Server replies:</b>"));
dialogVPanel.add(serverResponseLabel);
dialogVPanel.setHorizontalAlignment(VerticalPanel.ALIGN_RIGHT);
dialogVPanel.add(closeButton);
popup.setWidget(dialogVPanel);
popup.setMessage("see");

// Add a handler to close the popup
closeButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
popup.hide();
sendButton.setEnabled(true);
sendButton.setFocus(true);
}
});

// 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();
}
}

/**
* Send the name from the nameField to the server and wait for a response.
*/
private void sendNameToServer() {
// First, we validate the input.
errorLabel.setText("");
String textToServer = nameField.getText();
if (!FieldVerifier.isValidName(textToServer)) {
errorLabel.setText("Please enter at least four characters");
return;
}

// Then, we send the input to the server.
sendButton.setEnabled(false);
textToServerLabel.setText(textToServer);
serverResponseLabel.setText("");
greetingService.greetServer(textToServer, new AsyncCallback<String>() {
public void onFailure(Throwable caught) {
// Show the RPC error message to the user
popup.setHeadingText("Remote Procedure Call - Failure");
serverResponseLabel.addStyleName("serverResponseLabelError");
serverResponseLabel.setHTML(SERVER_ERROR);
popup.center();
closeButton.setFocus(true);
}

public void onSuccess(String result) {
popup.setHeadingText("Remote Procedure Call");
serverResponseLabel.removeStyleName("serverResponseLabelError");
serverResponseLabel.setHTML(result);
popup.center();
closeButton.setFocus(true);
}
});
}
}

// Add a handler to send the name to the server
MyHandler handler = new MyHandler();
sendButton.addClickHandler(handler);
nameField.addKeyUpHandler(handler);
}
}




40632

Colin Alworth
6 Dec 2012, 7:55 PM
GXT widgets inherit from GWT widgets - they *are* GWT widgets.

Your example has a ton of extra stuff in it - but not the all important method popup.show(). If you don't call show(), the popup won't show up.

Did the basic GWT project work? Did the code they provided run? I believe the default app draws a button, and when it is clicked, it sends data to and from the server. Did you see the button, and did it do what it should?

If so, adding GXT to the project is most of the way done - you've got the <inherits> statement, the reset.css (but the folder name seems to have wrong case). Start small as you are starting to learn it - don't write 150 lines of code to make sure your project works when a dozen will do.


package au.com.uptick.gwt.maven.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.sencha.gxt.widget.core.client.box.MessageBox;

public class MyGwtMavenSampleApp implements EntryPoint {

/**
* This is the entry point method.
*/
public void onModuleLoad() {
MessageBox popup = new MessageBox("Welcome to GXT");
popup.show();
}
}

tong123123
6 Dec 2012, 11:08 PM
thanks, after adding popup.show(); the messagebox can shown successfully as attached image.
and the application is generated by GWT webappCreator.bat as a stating demo application.

tong123123
6 Dec 2012, 11:18 PM
just want to know more, where is the reset.css resides? the default MyGwtMavenSampleApp.css is generated by GWT webAppCreator.bat and is placed under MyGwtMavenSampleApp\src\main\webapp\MyGwtMavenSampleApp.css,
but I cannot found where is the reset.css?
Also, is it sure that I can use most of GWT widgets plus some GXT widgets? I am used to using GWT but I find its widget style is quite weak, like its DataGrid, so I want to place some GXT widget in my GWT project, is this the correct way?

Colin Alworth
11 Dec 2012, 1:36 PM
The reset.css is automatically compiled into your project - if your compiled JS ends up in a folder called MyProject with a MyProject.nocache.js in there, the reset.css will be in there too.

Yes, GXT and GWT widgets can be mixed and matched, though most GWT widgets are built to be let the page just grow and grow, while most GXT widgets are made to be given sizes by their parents to prevent nested scrollbars. As a result, you may find that some things (the GXT Grid is one) do not behave well if not given a size, either by their parent or explicitly (using setPixelSize).