HELP: HyperLink, Image and Text in one Cell of CellTable

[Akbar Gadhiya]

Hello All,

I am new to GWT. I need to display a CellTable in which a cell has an HyperLink, Image and Text. When user clicks on link, a dialogbox should be opened and should display current selection.

I dont know how to bring this in one cell and how to handle click event of the link. I create a widget to display HyperLink, Image and Text but I rendered as SafeHtml. Which I think is incorrect because I dont get handler to the link.

How I add to column is,

        final SafeHtmlCell cell = new SafeHtmlCell();
        Column<MyProxy, SafeHtml> column = new Column<MyProxy, SafeHtml>(cell) {

            @Override
            public SafeHtml getValue(MyProxy proxy) {
                SafeHtmlBuilder sb = new SafeHtmlBuilder();
                sb.appendHtmlConstant(new NameCell(proxy).getElement().getInnerHTML());
                return sb.toSafeHtml();
            }
        };

NameCell.ui.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
             xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
    <g:HTMLPanel>
        <div id="parent">
            <div><g:Image ui:field="status"/></div>
            <div><g:Label ui:field="candidateName"/></div>
            <div><g:Label ui:field="skills"/></div>
        </div>
    </g:HTMLPanel>
</ui:UiBinder>


Thanks.

[Andrei]

Do you need to show the DialogBox when a user clicks the link only, or when a user clicks anywhere in that cell? Both are doable, but the second option is much easier.

[Tham]

Hi Andrei,

I am also in the need of implementing this one. My requirement is to show a popup when user clicks on the link only. How to do that?

Thanks,

Tham

[Joshua Godi]

The way I accomplish this is with a AbstractCell built from a SafeHtmlTemplate that sinks the click event.

Have a template the feeds into the cell, the code will resemble something like:

 /**

     * The HTML templates used to render the cell.

     */

    public interface Templates extends SafeHtmlTemplates {

        @SafeHtmlTemplates.Template("" +

                "<div>" +

                "<img src='IMAGE'/>" +

                "<a id='YOURID'>{0}</a>" +

                "<a id='YOURID2'>{1}</a>" +

                "<span>TEXT</span>" +

                "</div>")

        SafeHtml cell(String linkText, String secondLinkText);

    }

    /**

     * A custom {@link Cell} used to render a widget that displays the search results

     */

    private class TemplateCell extends AbstractCell< YOUROBJECT > {

        /**

         * Create a singleton instance of the templates used to render the cell.

         */

        private Templates templates = GWT.create(Templates.class);

        public TemplateCell() {

            /**

             * Sink the click and keydown events. We handle click events in this

             * class. AbstractCell will handle the keydown event and call

             * onEnterKeyDown() if the user presses the enter key while the cell is

             * selected.

             */

            super("click", "keydown");

        }

        /**

         * Called when an event occurs in a rendered instance of this Cell. The

         * parent element refers to the element that contains the rendered cell, NOT

         * to the outermost element that the Cell rendered.

         */

        @Override

        public void onBrowserEvent(Context context, Element parent, YOUROBJECT value, NativeEvent event,

                                   ValueUpdater< YOUROBJECT > valueUpdater) {

            // Let AbstractCell handle the keydown event.

            super.onBrowserEvent(context, parent, value, event, valueUpdater);

            // Handle the click event.

            if ("click".equals(event.getType())) {

                // Ignore clicks that occur outside of the outermost element.

                EventTarget eventTarget = event.getEventTarget();

                Element eventElement = Element.as(eventTarget);

                if ("YOURID".equals(eventElement.getId())) {

                    handleTheClick(); // handle the click here

                } else if ("YOURID2".equals(eventElement.getId())) {

                    handleTheOtherClick(); // handle the other click, if you had two links

                }

            }

        }

        @Override

        public void render(Context context, YOUROBJECT value, SafeHtmlBuilder sb) {

            /**

             * Always do a null check on the value. Cell widgets can pass null to

             * cells if the underlying data contains a null, or if the data arrives

             * out of order.

             */

            if (value == null) {

                return;

            }

            // Use the template to create the Cell's html.

            SafeHtml rendered = templates.cell(YOUROBJECT.firstText(), YOUROBJECT.secondText());

            sb.append(rendered);

        }

    }