Example usage for com.google.gwt.user.client.ui HTML HTML

List of usage examples for com.google.gwt.user.client.ui HTML HTML

  1. HOME
  2. Java
  3. com.google.gwt
  4. com.google.gwt.user.client.ui.*
  5. HTML
  6. HTML

Introduction

In this page you can find the example usage for com.google.gwt.user.client.ui HTML HTML.

Prototype

protected HTML(Element element)

Source Link

Document

This constructor may be used by subclasses to explicitly use an existing element.

Usage

From source file:com.allen_sauer.gwt.dnd.demo.client.DragDropDemo.java

License:Apache License

private void onModuleLoad2() {
    RootPanel mainPanel = RootPanel.get(DEMO_MAIN_PANEL);
    DOM.setInnerHTML(mainPanel.getElement(), "");

    // create the main common boundary panel to which drag operations will be restricted
    AbsolutePanel boundaryPanel = new AbsolutePanel();
    boundaryPanel.addStyleName(CSS_DEMO_MAIN_BOUNDARY_PANEL);
    boundaryPanel.setPixelSize(900, 600);

    // instantiate the common drag controller used the less specific examples
    dragController = new PickupDragController(boundaryPanel, true);
    dragController.setBehaviorMultipleSelection(false);

    mainPanel.add(new HTML(
            "<div style='font-weight: bold; font-size: 1.2em;'><a href='https://github.com/fredsa/gwt-dnd'>gwt-dnd</a>"
                    + " - Drag-and-Drop for your Google Web Toolkit projects.</div>"
                    + "<div style='font-style: italic; margin-bottom: 1em;'>by Fred Sauer</div>"));

    // Umbrella example illustrating basic drag and drop behavior
    HTML boundaryDescription = ExampleTabPanel.describe(
            new Class[] { DragDropDemo.class, PickupDragController.class, BoundaryDropController.class, },
            "Most of the example drag operations are constrained to the panel below."
                    + " Try to drag one of the widgets outside the area below.");
    boundaryDescription.addStyleName(CSS_DEMO_BOUNDARY);
    mainPanel.add(boundaryDescription);/*  w ww  .  j a  v a 2  s. co  m*/
    mainPanel.add(boundaryPanel);

    // Add configuration panel for main drag controller
    VerticalPanel configurationPanel = new VerticalPanel();
    configurationPanel.setWidth("200px");
    configurationPanel.add(new MultipleSelectionBehaviorPanel(dragController));
    configurationPanel.add(new DragStartSensitivityBehaviorPanel(dragController));
    configurationPanel.add(new DragProxyBehaviorPanel(dragController));
    configurationPanel.add(new ConstrainedToBoundaryBehaviorPanel(dragController));
    configurationPanel.add(new BidiBehaviorPanel(dragController));
    boundaryPanel.add(configurationPanel, 10, 0);

    // Create some draggable widgets to play with
    boundaryPanel.add(createDraggable(), 20, 530);
    boundaryPanel.add(createDraggable(), 60, 510);
    boundaryPanel.add(createDraggable(), 100, 520);
    boundaryPanel.add(createDraggable(), 140, 530);

    // TabPanel to hold our examples
    final ExampleTabPanel examples = new ExampleTabPanel(7);
    examples.setWidth("650px");
    boundaryPanel.add(examples, 220, 10);

    // text area to log drag events as they are triggered
    final HTML eventTextArea = new HTML();
    eventTextArea.addStyleName(CSS_DEMO_EVENT_TEXT_AREA);
    eventTextArea.setSize(boundaryPanel.getOffsetWidth() + "px", "10em");

    // instantiate shared drag handler to listen for events
    final DemoDragHandler demoDragHandler = new DemoDragHandler(eventTextArea);
    dragController.addDragHandler(demoDragHandler);

    Button clearButton = new Button("clear");
    clearButton.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            demoDragHandler.clear();
        }
    });
    mainPanel.add(new HTML("<br>Events received by registered <code>DragHandler</code>s"));
    mainPanel.add(clearButton);
    mainPanel.add(eventTextArea);

    // add our individual examples
    examples.add(new BinExample(dragController));
    examples.add(new AbsolutePositionExample(dragController));
    examples.add(new GridConstrainedExample(dragController));
    examples.add(new FlowPanelExample(dragController));

    examples.add(new InsertPanelExample(demoDragHandler));
    examples.add(new FlexTableRowExample(demoDragHandler));
    examples.add(new WindowExample(demoDragHandler));
    examples.add(new DragHandleExample(demoDragHandler));

    examples.add(new DualListExample(demoDragHandler));
    examples.add(new PuzzleExample(demoDragHandler));
    examples.add(new MatryoshkaExample(demoDragHandler));
    examples.add(new ResetCacheExample(dragController));

    examples.add(new PaletteExample(demoDragHandler));
    examples.add(new ClickTouchExample(dragController, demoDragHandler));

    mainPanel.add(new HTML(
            "<div style='color: gray; margin-top: 1em;'>Demo created with gwt-dnd @GWT_DND_VERSION@ and GWT "
                    + GWT.getVersion() + "</div>"));

    Scheduler.get().scheduleDeferred(new ScheduledCommand() {
        @Override
        public void execute() {
            examples.selectTabByHistoryToken(History.getToken());
        }
    });
}

From source file:com.allen_sauer.gwt.dnd.demo.client.example.draghandle.DragHandleExample.java

License:Apache License

public DragHandleExample(DemoDragHandler demoDragHandler) {
    addStyleName(CSS_DEMO_DRAG_HANDLE_EXAMPLE);

    // use the boundary panel as this composite's widget
    final AbsolutePanel boundaryPanel = new AbsolutePanel();
    boundaryPanel.setPixelSize(600, 400);
    setWidget(boundaryPanel);/*from ww w. j  a  va2s  . co m*/

    // create the title bar
    HTML header = new HTML(
            "Title/Header (Drag Handle) with <a href='http://google.com/' target='_blank'>link</a>");
    header.addStyleName(CSS_DEMO_DRAG_HANDLE_EXAMPLE_HEADER);

    // add some text
    HTML content = new HTML("This is a <code>VerticalPanel</code> which can be dragged by its header,"
            + " i.e. the title/header widget.");

    // add an editable text area
    final TextArea textArea = new TextArea();
    textArea.addStyleName(CSS_DEMO_DRAG_HANDLE_EXAMPLE_TEXTAREA);
    // textArea.setSize("20em", "5em");
    textArea.setText("You can click in this TextArea to get focus without causing the panel to be dragged.");

    // add a clickable button
    Button button = new Button("Click me");
    button.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            textArea.setText(textArea.getText() + " Click!");
        }
    });

    // create a panel to hold all our widgets
    VerticalPanel verticalPanel = new VerticalPanel();
    verticalPanel.setSpacing(2);
    verticalPanel.addStyleName(CSS_DEMO_DRAG_HANDLE_EXAMPLE_PANEL);
    verticalPanel.add(header);
    verticalPanel.add(content);
    verticalPanel.add(textArea);
    verticalPanel.add(button);
    boundaryPanel.add(verticalPanel, 20, 20);

    // instantiate our drag controller
    dragController = new PickupDragController(boundaryPanel, true);
    dragController.addDragHandler(demoDragHandler);
    dragController.setBehaviorConstrainedToBoundaryPanel(true);
    dragController.setBehaviorMultipleSelection(false);
    dragController.setBehaviorDragStartSensitivity(5);

    // instantiate our drop controller
    AbsolutePositionDropController dropController = new AbsolutePositionDropController(boundaryPanel);
    dragController.registerDropController(dropController);

    // make the panel draggable by its header
    dragController.makeDraggable(verticalPanel, header);
}

From source file:com.allen_sauer.gwt.dnd.demo.client.example.duallist.DualListBox.java

License:Apache License

public DualListBox(int visibleItems, String width) {
    HorizontalPanel horizontalPanel = new HorizontalPanel();
    add(horizontalPanel);//w w  w  .  j  av a 2 s  .  c o  m
    horizontalPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);

    VerticalPanel verticalPanel = new VerticalPanel();
    verticalPanel.addStyleName(CSS_DEMO_DUAL_LIST_EXAMPLE_CENTER);
    verticalPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);

    dragController = new ListBoxDragController(this);
    left = new MouseListBox(dragController, LIST_SIZE);
    right = new MouseListBox(dragController, LIST_SIZE);

    left.setWidth(width);
    right.setWidth(width);

    horizontalPanel.add(left);
    horizontalPanel.add(verticalPanel);
    horizontalPanel.add(right);

    oneRight = new Button("&gt;");
    oneLeft = new Button("&lt;");
    allRight = new Button("&gt;&gt;");
    allLeft = new Button("&lt;&lt;");
    verticalPanel.add(oneRight);
    verticalPanel.add(oneLeft);
    verticalPanel.add(new HTML("&nbsp;"));
    verticalPanel.add(allRight);
    verticalPanel.add(allLeft);

    allRight.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            moveItems(left, right, false);
        }
    });

    allLeft.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            moveItems(right, left, false);
        }
    });

    oneRight.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            moveItems(left, right, true);
        }
    });

    oneLeft.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            moveItems(right, left, true);
        }
    });

    ListBoxDropController leftDropController = new ListBoxDropController(left);
    ListBoxDropController rightDropController = new ListBoxDropController(right);
    dragController.registerDropController(leftDropController);
    dragController.registerDropController(rightDropController);
}

From source file:com.allen_sauer.gwt.dnd.demo.client.example.duallist.ListBoxDragController.java

License:Apache License

@Override
protected Widget newDragProxy(DragContext context) {
    MouseListBox currentMouseListBox = (MouseListBox) context.draggable.getParent().getParent();
    MouseListBox proxyMouseListBox = new MouseListBox(context.selectedWidgets.size());
    proxyMouseListBox.setWidth(DOMUtil.getClientWidth(currentMouseListBox.getElement()) + "px");
    for (Widget widget : context.selectedWidgets) {
        HTML htmlClone = new HTML(DOM.getInnerHTML(widget.getElement()));
        proxyMouseListBox.add(htmlClone);
    }// w w w .  ja  v  a 2 s.c om
    return proxyMouseListBox;
}

From source file:com.allen_sauer.gwt.dnd.demo.client.example.duallist.ListBoxDropController.java

License:Apache License

@Override
public void onDrop(DragContext context) {
    MouseListBox from = (MouseListBox) context.draggable.getParent().getParent();
    for (Widget widget : context.selectedWidgets) {
        if (widget.getParent().getParent() == from) {
            HTML htmlClone = new HTML(DOM.getInnerHTML(widget.getElement()));
            mouseListBox.add(htmlClone);
        }/*  ww  w.  j av  a  2  s .  c o m*/
    }
    super.onDrop(context);
}

From source file:com.allen_sauer.gwt.dnd.demo.client.example.flextable.DemoFlexTable.java

License:Apache License

/**
 * Creates a FlexTable with the desired number of rows and columns, making each row draggable via
 * the provided drag controller./* w  w  w. j  a v  a  2s  . c  o m*/
 * 
 * @param rows desired number of table rows
 * @param cols desired number of table columns
 * @param tableRowDragController the drag controller to enable dragging of table rows
 */
public DemoFlexTable(int rows, int cols, FlexTableRowDragController tableRowDragController) {
    addStyleName("demo-flextable");
    for (int row = 0; row < rows; row++) {
        HTML handle = new HTML("[drag-here]");
        handle.addStyleName("demo-drag-handle");
        setWidget(row, 0, handle);
        tableRowDragController.makeDraggable(handle);
        for (int col = 1; col < cols; col++) {
            setHTML(row, col, "[" + row + ", " + col + "]");
        }
    }
}

From source file:com.allen_sauer.gwt.dnd.demo.client.example.flowpanel.FlowPanelExample.java

License:Apache License

@Override
protected void onInitialLoad() {
    for (int i = 1; i <= 25; i++) {
        FocusPanel focusPanel = new FocusPanel();
        focusPanel.setStyleName(CSS_DEMO_FLOW_PANEL_EXAMPLE_DRAGGABLE);

        FlowPanel flowPanel = new FlowPanel();
        focusPanel.add(flowPanel);/*from   ww w . j av  a  2 s . c  o  m*/

        HTML label = new HTML("Draggable&nbsp;#" + i);
        HTML spacer = new HTML(" ");
        label.addStyleName(CSS_DEMO_FLOW_PANEL_EXAMPLE_LABEL);
        flowPanel.add(label);
        flowPanel.add(spacer);
        getDragController().makeDraggable(focusPanel);
        flowPanelDropTarget.add(focusPanel);
    }
}

From source file:com.allen_sauer.gwt.dnd.demo.client.example.insertpanel.InsertPanelExample.java

License:Apache License

public InsertPanelExample(DemoDragHandler demoDragHandler) {
    addStyleName(CSS_DEMO_INSERT_PANEL_EXAMPLE);
    int count = 0;

    // use the boundary panel as this composite's widget
    AbsolutePanel boundaryPanel = new AbsolutePanel();
    boundaryPanel.setSize("100%", "100%");
    setWidget(boundaryPanel);/*from w  ww  .jav  a 2s  .  c  o  m*/

    // initialize our column drag controller
    PickupDragController columnDragController = new PickupDragController(boundaryPanel, false);
    columnDragController.setBehaviorMultipleSelection(false);
    columnDragController.addDragHandler(demoDragHandler);

    // initialize our widget drag controller
    PickupDragController widgetDragController = new PickupDragController(boundaryPanel, false);
    widgetDragController.setBehaviorMultipleSelection(false);
    widgetDragController.addDragHandler(demoDragHandler);

    // initialize horizontal panel to hold our columns
    HorizontalPanel horizontalPanel = new HorizontalPanel();
    horizontalPanel.addStyleName(CSS_DEMO_INSERT_PANEL_EXAMPLE_CONTAINER);
    horizontalPanel.setSpacing(SPACING);
    boundaryPanel.add(horizontalPanel);

    // initialize our column drop controller
    HorizontalPanelDropController columnDropController = new HorizontalPanelDropController(horizontalPanel);
    columnDragController.registerDropController(columnDropController);

    for (int col = 1; col <= COLUMNS; col++) {
        // initialize a vertical panel to hold the heading and a second vertical
        // panel
        VerticalPanel columnCompositePanel = new VerticalPanel();
        columnCompositePanel.addStyleName(CSS_DEMO_INSERT_PANEL_EXAMPLE_COLUMN_COMPOSITE);

        // initialize inner vertical panel to hold individual widgets
        VerticalPanel verticalPanel = new VerticalPanelWithSpacer();
        verticalPanel.addStyleName(CSS_DEMO_INSERT_PANEL_EXAMPLE_CONTAINER);
        verticalPanel.setSpacing(SPACING);
        horizontalPanel.add(columnCompositePanel);

        // initialize a widget drop controller for the current column
        VerticalPanelDropController widgetDropController = new VerticalPanelDropController(verticalPanel);
        widgetDragController.registerDropController(widgetDropController);

        // Put together the column pieces
        Label heading = new Label("Column " + col);
        heading.addStyleName(CSS_DEMO_INSERT_PANEL_EXAMPLE_HEADING);
        columnCompositePanel.add(heading);
        columnCompositePanel.add(verticalPanel);

        // make the column draggable by its heading
        columnDragController.makeDraggable(columnCompositePanel, heading);

        for (int row = 1; row <= ROWS; row++) {
            // initialize a widget
            HTML widget = new HTML("Draggable&nbsp;#" + ++count);
            widget.addStyleName(CSS_DEMO_INSERT_PANEL_EXAMPLE_WIDGET);
            widget.setHeight(Random.nextInt(4) + 2 + "em");
            verticalPanel.add(widget);

            // make the widget draggable
            widgetDragController.makeDraggable(widget);
        }
    }
}

From source file:com.allen_sauer.gwt.dnd.demo.client.example.resetcache.ResetCacheExample.java

License:Apache License

public ResetCacheExample(PickupDragController dragController) {
    super(dragController);
    addStyleName(CSS_DEMO_CACHE_EXAMPLE);

    // some colors to go with each tab
    String[] colors = { "#AAAAFF", "#AAFFAA", "#FFAAAA", "#FFFFAA", "#FFAAFF", "#AAFFFF", };

    // use the containing panel as this composite's widget
    AbsolutePanel containingPanel = new AbsolutePanel();
    containingPanel.setPixelSize(600, 300);
    setWidget(containingPanel);/*from w ww  .j  a  v  a2 s  .co  m*/

    // create a tab panel and populate with a few tabs
    TabPanel tabPanel = new TabPanel();
    tabPanel.addStyleName(CSS_DEMO_CACHE_EXAMPLE_TAB_PANEL);
    tabPanel.setPixelSize(300, 200);
    containingPanel.add(tabPanel, 40, 20);

    for (int i = 0; i < colors.length; i++) {
        // create a simple panel for the tab content
        AbsolutePanel contentPanel = new AbsolutePanel();
        contentPanel.setHeight("200px");
        contentPanel.getElement().getStyle().setProperty("backgroundColor", colors[i]);

        // create a tab widget
        HTML tabWidget = new HTML("Tab #" + (i + 1));
        tabWidget.setWordWrap(false);
        tabWidget.getElement().getStyle().setProperty("backgroundColor", colors[i]);
        tabPanel.add(contentPanel, tabWidget);

        // add drop controller to allow automatic tab selection and dropping on tab
        TabSelectingDropController tabSelectingDropController = new TabSelectingDropController(tabWidget,
                tabPanel, i);
        dragController.registerDropController(tabSelectingDropController);

        // create a sample draggable
        Widget draggableLabel = new Label("Drag me to another tab");
        draggableLabel.getElement().getStyle().setProperty("backgroundColor", colors[i]);
        draggableLabel.addStyleName(CSS_DEMO_CACHE_EXAMPLE_DRAGGABLE);

        // make label draggable
        dragController.makeDraggable(draggableLabel);

        // determine random location within target panel
        int left = Random.nextInt(200);
        int top = Random.nextInt(150);
        contentPanel.add(draggableLabel, left, top);

        // create a drop controller for the content panel
        AbsolutePositionDropController contentPanelDropController = new AbsolutePositionDropController(
                contentPanel);
        dragController.registerDropController(contentPanelDropController);
    }
    tabPanel.selectTab(0);

    // create a drop controller for the containing panel
    containerDropController = new AbsolutePositionDropController(containingPanel);
    dragController.registerDropController(containerDropController);
}

From source file:com.allen_sauer.gwt.dnd.demo.client.example.window.WindowExample.java

License:Apache License

public WindowExample(DemoDragHandler demoDragHandler) {
    addStyleName(CSS_DEMO_RESIZE_EXAMPLE);

    // use the boundary panel as this composite's widget
    final AbsolutePanel boundaryPanel = new AbsolutePanel();
    boundaryPanel.setPixelSize(600, 400);
    setWidget(boundaryPanel);//from w ww  .ja v a 2 s. co m

    // initialize window controller which provides drag and resize windows
    WindowController windowController = new WindowController(boundaryPanel);
    windowController.getPickupDragController().addDragHandler(demoDragHandler);

    // create the first panel
    HTML header1 = new HTML("An draggable &amp; resizable panel");
    HTML html1 = new HTML(makeText().replaceAll("\n", "<br>\n"));
    html1.addStyleName("demo-resize-html");
    WindowPanel windowPanel1 = new WindowPanel(windowController, header1, html1, true);
    boundaryPanel.add(windowPanel1, 20, 20);

    // create the second panel
    HTML header2 = new HTML("A draggable &amp; resizable <code>IFRAME</code>");
    Frame iframe2 = getIframe(IFRAME_URL);
    WindowPanel windowPanel2 = new WindowPanel(windowController, header2, iframe2, false);
    boundaryPanel.add(windowPanel2, 50, 80);

    // create the third panel
    HTML header3 = new HTML("A draggable &amp; resizable <code>IMG</code>");
    Image image3 = new Image("images/99pumpkin2-65x58.jpg");
    image3.setPixelSize(65, 58);
    image3.addStyleName("demo-resize-html");
    WindowPanel windowPanel3 = new WindowPanel(windowController, header3, image3, false);
    boundaryPanel.add(windowPanel3, 70, 30);

    // create the fourth panel
    HTML header4 = new HTML("A draggable &amp; resizable <code>TEXTAREA</code>");
    TextArea textArea4 = new TextArea();
    textArea4.addStyleName("demo-resize-html");
    textArea4.setText(makeText());
    WindowPanel windowPanel4 = new WindowPanel(windowController, header4, textArea4, false);
    boundaryPanel.add(windowPanel4, 10, 120);
}