gwtquery.plugins.draggable.client.GWTIntegrationSample.java Source code

Java tutorial

Introduction

Here is the source code for gwtquery.plugins.draggable.client.GWTIntegrationSample.java

Source

/*
 * Copyright 2010 The gwtquery plugins team.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

package gwtquery.plugins.draggable.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.logical.shared.OpenEvent;
import com.google.gwt.event.logical.shared.OpenHandler;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.DecoratedTabPanel;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.FlexTable.FlexCellFormatter;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.MenuBar;
import com.google.gwt.user.client.ui.MenuItem;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Tree;
import com.google.gwt.user.client.ui.TreeItem;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.datepicker.client.DatePicker;
import gwtquery.plugins.draggable.client.events.DragEvent;
import gwtquery.plugins.draggable.client.events.DragEvent.DragEventHandler;
import gwtquery.plugins.draggable.client.events.DragStopEvent;
import gwtquery.plugins.draggable.client.events.DragStopEvent.DragStopEventHandler;
import gwtquery.plugins.draggable.client.gwt.DraggableWidget;

import java.util.Date;

/**
 * Sample of the integration of draggable plugin and GWT
 *
 * @author Julien Dramaix (julien.dramaix@gmail.com)
 */
public class GWTIntegrationSample implements EntryPoint {

    interface Image extends ClientBundle {
        Image INSTANCE = GWT.create(Image.class);

        ImageResource gwtLogo();
    }

    /**
     * Handler that catch DragEvent and DragStopEvent to fill the information
     * message
     *
     * @author Julien Dramaix (julien.dramaix@gmail.com)
     */
    private class DragHandlerImpl implements DragEventHandler, DragStopEventHandler {

        // only used to display msg
        private String draggableDescription;

        public DragHandlerImpl(String draggableDescription) {
            this.draggableDescription = draggableDescription;
        }

        public void onDrag(DragEvent event) {
            String msg = "Component " + draggableDescription + " is dragging";
            infoMsg.setHTML(msg);

        }

        public void onDragStop(DragStopEvent event) {
            infoMsg.setHTML(DEFAULT_MSG);

        }

    }

    private static String DEFAULT_MSG = "No drag operation";
    private HTML infoMsg;

    public void addInfoMsg() {
        infoMsg = new HTML(DEFAULT_MSG);
        infoMsg.addStyleName("infoMessage");
        RootPanel.get("gwtIntegrationSampleMsg").add(infoMsg);

    }

    public <T extends Widget> DraggableWidget<T> makeDraggable(T widget, String draggableDescription) {

        DraggableWidget<T> dragWidget = new DraggableWidget<T>(widget);

        DragHandlerImpl dragHandler = new DragHandlerImpl(draggableDescription);
        dragWidget.addDragHandler(dragHandler);
        dragWidget.addDragStopHandler(dragHandler);

        return dragWidget;

    }

    public void onModuleLoad() {

        addInfoMsg();

        RootPanel.get("gwtIntegrationSampleDiv").add(makeDraggable(createMenuBar(), "menu"));
        RootPanel.get("gwtIntegrationSampleDiv").add(makeDraggable(createDecoratedForm(), "form"));
        RootPanel.get("gwtIntegrationSampleDiv").add(makeDraggable(createDatePanel(), "datePicker"));
        RootPanel.get("gwtIntegrationSampleDiv").add(makeDraggable(createTabPanel(), "tabPanel"));
        RootPanel.get("gwtIntegrationSampleDiv").add(makeDraggable(createDynamicTree(), "tree"));

    }

    /**
     * Create a Date picker. The code comes from the GWT show case :
     * http://gwt.google.com/samples/Showcase/Showcase.html#!CwDatePicker@
     *
     * @return
     */
    private VerticalPanel createDatePanel() {
        // Create a basic date picker
        DatePicker datePicker = new DatePicker();
        final Label text = new Label();

        // Set the value in the text box when the user selects a date
        datePicker.addValueChangeHandler(new ValueChangeHandler<Date>() {
            public void onValueChange(ValueChangeEvent<Date> event) {
                Date date = event.getValue();
                String dateString = DateTimeFormat.getMediumDateFormat().format(date);
                text.setText(dateString);
            }
        });

        // Set the default value
        datePicker.setValue(new Date(), true);

        // Combine the widgets into a panel and return them
        VerticalPanel vPanel = new VerticalPanel();
        vPanel.add(new HTML("Permanent DatePicker:"));
        vPanel.add(text);
        vPanel.add(datePicker);
        return vPanel;

    }

    /**
     * Create a Decorated Form The code comes from the GWT show case :
     * http://gwt.google.com/samples/Showcase/Showcase.html#!CwDecoratorPanel
     *
     * @return
     */
    private DecoratorPanel createDecoratedForm() {
        // Create a table to layout the form options
        FlexTable layout = new FlexTable();
        layout.setCellSpacing(6);
        FlexCellFormatter cellFormatter = layout.getFlexCellFormatter();

        // Add a title to the form
        layout.setHTML(0, 0, "Enter Search Criteria");
        cellFormatter.setColSpan(0, 0, 2);
        cellFormatter.setHorizontalAlignment(0, 0, HasHorizontalAlignment.ALIGN_CENTER);

        // Add some standard form options
        layout.setHTML(1, 0, "Name");
        layout.setWidget(1, 1, new TextBox());
        layout.setHTML(2, 0, "Description");
        layout.setWidget(2, 1, new TextBox());

        // Wrap the content in a DecoratorPanel
        DecoratorPanel decPanel = new DecoratorPanel();
        decPanel.setWidget(layout);
        return decPanel;

    }

    /**
     * Create a Dynamic tree. The code comes from the GWT show case :
     * http://gwt.google.com/samples/Showcase/Showcase.html#!CwTree
     *
     * @return
     */
    private Widget createDynamicTree() {
        // Create a new tree
        Tree dynamicTree = new Tree();

        // Add some default tree items
        for (int i = 0; i < 5; i++) {
            TreeItem item = dynamicTree.addItem("Item " + i);

            // Temporarily add an item so we can expand this node
            item.addItem("");
        }

        // Add a handler that automatically generates some children
        dynamicTree.addOpenHandler(new OpenHandler<TreeItem>() {
            public void onOpen(OpenEvent<TreeItem> event) {
                TreeItem item = event.getTarget();
                if (item.getChildCount() == 1) {
                    // Close the item immediately
                    item.setState(false, false);

                    // Add a random number of children to the item
                    String itemText = item.getText();
                    int numChildren = Random.nextInt(5) + 2;
                    for (int i = 0; i < numChildren; i++) {
                        TreeItem child = item.addItem(itemText + "." + i);
                        child.addItem("");
                    }

                    // Remove the temporary item when we finish loading
                    item.getChild(0).remove();

                    // Reopen the item
                    item.setState(true, false);
                }
            }
        });

        // Return the tree (decorated)
        DecoratorPanel decPanel = new DecoratorPanel();
        decPanel.setWidget(dynamicTree);
        return decPanel;
    }

    /**
     * Create a menu bar. The code comes from the GWT show case :
     * http://gwt.google.com/samples/Showcase/Showcase.html#!CwMenuBar
     *
     * @return
     */
    private MenuBar createMenuBar() {
        // Create a command that will execute on menu item selection
        Command menuCommand = new Command() {
            private int curPhrase = 0;
            private final String[] phrases = new String[] { "Thank you for selecting a menu item",
                    "A fine selection indeed", "Don't you have anything better to do than select menu items?",
                    "Try something else", "this is just a menu!", "Another wasted click" };

            public void execute() {
                Window.alert(phrases[curPhrase]);
                curPhrase = (curPhrase + 1) % phrases.length;
            }
        };

        // Create a menu bar
        MenuBar menu = new MenuBar();
        menu.setAutoOpen(false);
        menu.setWidth("500px");
        menu.setAnimationEnabled(true);

        // Create a sub menu of recent documents
        MenuBar recentDocsMenu = new MenuBar(true);
        String[] recentDocs = new String[] { "Fishing in the desert.txt", "How to tame a wild parrot",
                "Idiots Guide to Emu Farms" };
        for (int i = 0; i < recentDocs.length; i++) {
            recentDocsMenu.addItem(recentDocs[i], menuCommand);
        }

        // Create the file menu
        MenuBar fileMenu = new MenuBar(true);
        fileMenu.setAnimationEnabled(true);
        menu.addItem(new MenuItem("File", fileMenu));
        String[] fileOptions = new String[] { "New", "Open", "Close", "Recents", "Exit" };

        for (int i = 0; i < fileOptions.length; i++) {
            if (i == 3) {
                fileMenu.addSeparator();
                fileMenu.addItem(fileOptions[i], recentDocsMenu);
                fileMenu.addSeparator();
            } else {
                fileMenu.addItem(fileOptions[i], menuCommand);
            }
        }

        // Create the edit menu
        MenuBar editMenu = new MenuBar(true);
        menu.addItem(new MenuItem("Edit", editMenu));
        String[] editOptions = new String[] { "Undo", "Redo", "Copy", "Cut", "Paste" };

        for (int i = 0; i < editOptions.length; i++) {
            editMenu.addItem(editOptions[i], menuCommand);
        }

        // Create the GWT menu
        MenuBar gwtMenu = new MenuBar(true);
        menu.addItem(new MenuItem("GWT", true, gwtMenu));
        String[] gwtOptions = new String[] { "Download", "Examples", "Source code", "GWT wit' the program" };

        for (int i = 0; i < gwtOptions.length; i++) {
            gwtMenu.addItem(gwtOptions[i], menuCommand);
        }

        // Create the help menu
        MenuBar helpMenu = new MenuBar(true);
        menu.addSeparator();
        menu.addItem(new MenuItem("Help", helpMenu));
        String[] helpOptions = new String[] { "Contents", "Fortune cookies", "About GWT" };

        for (int i = 0; i < helpOptions.length; i++) {
            helpMenu.addItem(helpOptions[i], menuCommand);
        }

        // Return the menu
        menu.ensureDebugId("cwMenuBar");
        return menu;

    }

    /**
     * Create a Dynamic tree. The code comes from the GWT show case :
     * http://gwt.google.com/samples/Showcase/Showcase.html#!CwTabPanel
     */
    @SuppressWarnings("deprecation")
    private DecoratedTabPanel createTabPanel() {
        // Create a tab panel
        DecoratedTabPanel tabPanel = new DecoratedTabPanel();
        tabPanel.setWidth("400px");
        tabPanel.setAnimationEnabled(true);

        // Add a home tab
        String[] tabTitles = { "Home", "GWT Logo", "More info" };
        HTML homeText = new HTML("Click one of the tabs to see more content. <br/> You can drag me now !");
        tabPanel.add(homeText, tabTitles[0]);

        // Add a tab with an image
        /*
         * VerticalPanel vPanel = new VerticalPanel(); vPanel.add(new
         * Image(Showcase.images.gwtLogo()));
         */
        // TODO add gwt logo
        VerticalPanel vPanel = new VerticalPanel();
        vPanel.add(new com.google.gwt.user.client.ui.Image(Image.INSTANCE.gwtLogo()));
        tabPanel.add(new com.google.gwt.user.client.ui.Image(Image.INSTANCE.gwtLogo()), tabTitles[1]);

        // Add a tab
        HTML moreInfo = new HTML("Tabs are highly customizable using CSS.");
        tabPanel.add(moreInfo, tabTitles[2]);

        // Return the content
        tabPanel.selectTab(0);
        tabPanel.ensureDebugId("cwTabPanel");
        return tabPanel;

    }

}