java - 将导航按钮添加到 AbstractCell

Question

我创建了一个AbstractCell<String>用于创建标题为“欢迎使用您的手机...”的标题，我想在其中添加两个按钮AbstractCell：第一个按钮返回上一页，第二个按钮返回欢迎页面。我曾经使用以下代码创建一个类扩展的标题元素AbstractCell<String>：

public class HeaderCell extends AbstractCell<String> {

    interface Templates extends SafeHtmlTemplates {

        String style = "HeaderPanel";

        @SafeHtmlTemplates.Template("<div class=\""+style+"\">{0}</div>")
        SafeHtml cell(SafeHtml value);
    }

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

    interface templateWithButton extends SafeHtmlTemplates {

    }
    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context,
            String value, SafeHtmlBuilder sb) {
        SafeHtml safeValue = SafeHtmlUtils.fromString(value);

        SafeHtml rendered = templates.cell(safeValue);

        sb.append(rendered);
    }

}

有没有办法添加这两个按钮？请注意标题单元格是黑色的。PS：要设置如下图所示的标题元素，我使用了这个 CSS：

.HeaderPanel {
    -moz-box-shadow: inset -1px -1px 15px 1px #ffffff;
    -webkit-box-shadow: inset -1px -1px 15px 1px #ffffff;
    box-shadow: inset -1px -1px 15px 1px #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #242524
        ), color-stop(1, #242524) );
    background: -moz-linear-gradient(center top, #242524 5%, #242524 100%);
    background-color: #242524;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    border: 1px solid #dcdcdc;
    color: #ffffff;
    font-family: arial;
    font-size: 17px;
    font-weight: bold;
    padding: 8px 36px;
    text-decoration: none;
    text-shadow: 1px 1px 29px #ffffff;
    text-align: center;
}

Answer 1

我不确定这是否是最好的实现，但它对我有用。-- 首先，将其添加到您的构造函数中：

public HeaderCell() {
   super("click", "keydown");
}

-- 然后，覆盖 onBrowserEvent：

@Override
    public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater) {
      // Let AbstractCell handle the keydown event.
      super.onBrowserEvent(context, parent, value, event, valueUpdater);   
      // Handle the click event.
      if ("click".equals(event.getType())) {
        EventTarget eventTarget = event.getEventTarget();
       // in here we check whether the cell that was being clicked is an image, not the entire cell
        if(eventTarget.toString().contains("img src") && !eventTarget.toString().contains("<div class")){
            // do something if it's indeed the image that was clicked
        }
      }
    }

干杯，林

Answer 2

为您的按钮使用 CompositeCell 和 ActionCells 怎么样？

http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/cell/client/CompositeCell.html

new CompositeCell<C>(Arrays.<HasCell<C, ?>>asList(
    new IdentityColumn<C>(new ActionCell<C>("<", new Delegate<C>() { ... })),
    new Column<C, String>(new HeaderCell()) { ... },
    new IdentityColumn<C>(new ActionCell<C>(">", new Delegate<C>() { ... }))
));

Answer 3

// create the button element 
Element button = DOM.createButton(); 

// here you can alter the html based on your needs
button.setInnerHTML(<"button type="button">Click Me! <"/button>");

// add it to the safehtmlbuilder
sb.appendHtmlConstant(button.getInnerHTML());