problem with GXT and gwt maven plugin

dialloma

unread,

Sep 4, 2009, 4:17:05 AM9/4/09

to gwt-maven

Hello,

I use this plugin in my GWT + GXT plugin but I have a problem with one
GXT component: HtmlEditor.
I created my project using this plugin and I added GXT library in my
project as explain in the GXT setup file contained in GXT downloaded
folder. ie.

Quick Setup for Ext GWT 2.X
===========================

Note : Ext GWT 2.X requires GWT 1.6.x

STEP 1 -> Create a GWT 1.6.x project within Eclipse.

Copy the contents of the /resources folder in the download to a
{foldername} location with your war folder.
Substitute {foldername} with the name of the folder you've created for
resources within your war folder.

STEP 3 -> Add the following stylesheet to your host page.

<link rel="stylesheet" type="text/css" href="{foldername}/css/gxt-
all.css" />

STEP 3b -> If you are using Charts, add the following script to your
host page.

<script language='javascript' src='{foldername}/flash/swfobject.js'></
script>

STEP 4 -> Add the following entry to you projects module xml file.

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

STEP 5 -> Ext GWT requires the following doctype (quirksmode).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I also added GXT dependency in my pom.xml. All works fine but when I
use the HtmlEditor component, the toolbar doesn't displayed correctly.
All buttons are hiden.

To investigate the problem, I created another GWT project using GWT
eclipse plugin developped by GWT Team since GWT 1.7. When I use the
same code in this GWT project, it works fine. All components are
displayed correcctly.

Please do you have any idea about this problem please ?

Here is my sample code :

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.HtmlEditor;
import com.extjs.gxt.ui.client.widget.form.Radio;
import com.extjs.gxt.ui.client.widget.form.RadioGroup;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.form.FormPanel.LabelAlign;
import com.extjs.gxt.ui.client.widget.layout.ColumnData;
import com.extjs.gxt.ui.client.widget.layout.ColumnLayout;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;
import com.google.gwt.user.client.Element;

public class AdvancedFormsExample extends LayoutContainer {

private VerticalPanel vp;

public AdvancedFormsExample() {
vp = new VerticalPanel();
vp.setSpacing(10);
}

@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
createColumnForm();
createTabForm();
add(vp);
}

private void createTabForm() {
FormData formData = new FormData("100%");
FormPanel panel = new FormPanel();
panel.setPadding(0);
panel.setFrame(false);
panel.setHeaderVisible(false);
panel.setBodyBorder(false);
panel.setButtonAlign(HorizontalAlignment.CENTER);
panel.setLayout(new FitLayout());

TabPanel tabs = new TabPanel();

TabItem personal = new TabItem();
personal.setStyleAttribute("padding", "10px");
personal.setText("Personal Details");
personal.setLayout(new FormLayout());

TextField<String> name = new TextField<String>();
name.setFieldLabel("First Name");
name.setValue("Darrell");
personal.add(name, formData);

TextField<String> last = new TextField<String>();
last.setFieldLabel("Last Name");
last.setValue("Meyer");
personal.add(last, formData);

TextField<String> company = new TextField<String>();
company.setFieldLabel("Company");
personal.add(company, formData);

TextField<String> email = new TextField<String>();
email.setFieldLabel("Email");
personal.add(email, formData);

tabs.add(personal);

TabItem numbers = new TabItem();
numbers.setStyleAttribute("padding", "10px");
numbers.setText("Phone Numbers");
numbers.setLayout(new FormLayout());

TextField<String> home = new TextField<String>();
home.setFieldLabel("Home");
home.setValue("800-555-1212");
numbers.add(home, formData);

TextField<String> business = new TextField<String>();
business.setFieldLabel("Business");
numbers.add(business, formData);

TextField<String> mobile = new TextField<String>();
mobile.setFieldLabel("Mobile");
numbers.add(mobile, formData);

TextField<String> fax = new TextField<String>();
fax.setFieldLabel("Fax");
numbers.add(fax, formData);

tabs.add(numbers);

panel.add(tabs);
panel.addButton(new Button("Cancel"));
panel.addButton(new Button("Submit"));

panel.setSize(340, 200);

vp.add(panel);
}

private void createColumnForm() {
FormData formData = new FormData("95%");
FormPanel panel = new FormPanel();
panel.setFrame(true);
panel.setHeading("FormPanel");
panel.setSize(600, -1);
panel.setLabelAlign(LabelAlign.TOP);
panel.setButtonAlign(HorizontalAlignment.CENTER);

LayoutContainer main = new LayoutContainer();
main.setLayout(new ColumnLayout());

LayoutContainer left = new LayoutContainer();
left.setStyleAttribute("paddingRight", "10px");
FormLayout layout = new FormLayout();
layout.setLabelAlign(LabelAlign.TOP);
left.setLayout(layout);

TextField<String> first = new TextField<String>();
first.setFieldLabel("First Name");
left.add(first, formData);

TextField<String> company = new TextField<String>();
company.setFieldLabel("Company");
left.add(company, formData);

DateField birthday = new DateField();
birthday.setFieldLabel("Birthday");
left.add(birthday, formData);

LayoutContainer right = new LayoutContainer();
right.setStyleAttribute("paddingLeft", "10px");
layout = new FormLayout();
layout.setLabelAlign(LabelAlign.TOP);
right.setLayout(layout);

TextField<String> last = new TextField<String>();
last.setFieldLabel("Last");
right.add(last, formData);

TextField<String> email = new TextField<String>();
email.setFieldLabel("Email");
right.add(email, formData);

Radio radio1 = new Radio();
radio1.setBoxLabel("Yes");

Radio radio2 = new Radio();
radio2.setBoxLabel("No");

RadioGroup group = new RadioGroup();
group.setFieldLabel("Ext GWT User");
group.add(radio1);
group.add(radio2);
right.add(group);

main.add(left, new ColumnData(.5));
main.add(right, new ColumnData(.5));

panel.add(main);

HtmlEditor a = new HtmlEditor();
a.setFieldLabel("Comment");
a.setHeight(200);
panel.add(a, new FormData("100%"));

panel.addButton(new Button("Cancel"));
panel.addButton(new Button("Submit"));

vp.add(panel);
}

}

Thank you in advance

dialloma

Charlie Collins

unread,

Sep 8, 2009, 9:00:28 AM9/8/09

to gwt-maven

Please try the codehaus Mojo GWT plugin, and post questions about it
at that group, see the project home page of this project for details
and links.

David Durham

unread,

Sep 8, 2009, 3:52:59 PM9/8/09

to gwt-...@googlegroups.com

> Please try the codehaus Mojo GWT plugin, and post questions about it
> at that group, see the project home page of this project for details
> and links.