Gxt和GWT整合小示例

GXT與GWT集成進行EXT前端編譯[原]

這裏我用的是GWT2.0和GXT2.1以及EXT3.1。

在gwt項目中public目錄下新建目錄js/ext，將ext（建議使用3.0以上的版本）發行版解壓後的adapter目錄、resources目錄、ext-all.js文件拷貝到js/ext目錄下。

配置gwt.xml：

XML:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<module rename-to="gxt_test">
    <!-- Inherit the core Web Toolkit stuff.                        -->
    <inherits name="com.google.gwt.user.User" />
    <inherits name="com.extjs.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.standard.Standard" />
    <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
    <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

    <!-- Other module inherits                                      -->
    <stylesheet src="js/ext/resources/css/ext-all.css" />
    <script src="js/ext/adapter/ext/ext-base.js" />
    <script src="js/ext/ext-all.js" />
    <!-- Specify the app entry point class.                         -->
    <entry-point class="com.black.app.client.GXT_test" />
    <!-- Specify the paths for translatable code                    -->
    <source path="client" />

</module>

OK，現在進行Java編碼，一個簡單helloWorld，編譯後即可運行。ext帥的要死！

Java:

package com.black.app.client;

import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
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.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.layout.FitData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

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

    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        LayoutContainer layout = new LayoutContainer();
        layout.setLayout(new FlowLayout(10));

        final Window window = new Window();
        window.setSize(500, 300);
        window.setPlain(true);
        window.setModal(true);
        window.setBlinkModal(true);
        window.setHeading("Hello Window");
        window.setLayout(new FitLayout());

        TabPanel panel = new TabPanel();
        panel.setBorders(false);
        TabItem item1 = new TabItem("Hello World 1");
        item1.addText("Hello...");
        item1.addStyleName("pad-text");

        TabItem item2 = new TabItem("Hello World 2");
        item2.addText("... World!");
        item2.addStyleName("pad-text");
        panel.add(item1);
        panel.add(item2);

        window.add(panel, new FitData(4));

        window.addButton(new Button("Hello"));
        window.addButton(new Button("World"));

        Button btn = new Button("Hello World",
                new SelectionListener<ButtonEvent>() {
                    @Override
                    public void componentSelected(ButtonEvent ce) {
                        window.show();
                    }
                });
        layout.add(btn);
        RootPanel.get().add(layout);
    }
}