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：要将header元素设置为如下图所示，我使用此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

// 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());

Answer 3

如何将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>() { ... }))
));

将导航按钮添加到AbstractCell

3 个答案: