1

「モバイルへようこそ...」というヘッダーを作成するAbstractCell<String>ための を作成しました。これに 2 つのボタンを追加したいと思います。1 つAbstractCell目は前のページに戻り、2 つ目はウェルカム ページに戻ります。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);
    }

}

これら2つのボタンを追加する方法はありますか? 黒く着色されたヘッダセルに注目してください。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;
}

http://hpics.li/5e81f65

4

3 に答える 3

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
        }
      }
    }

乾杯、リン

于 2012-04-24T13:51:56.347 に答える
0 
// 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());
于 2012-04-11T11:49:16.620 に答える
0

ボタンに 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>() { ... }))
));
于 2012-04-11T14:35:32.317 に答える