Hinzufügen von Navigationsschaltflächen zu einem AbstractCell

Ich habe einen AbstractCell<String> erstellt, um die Kopfzeile zu erstellen, die "Willkommen zu Ihrem Handy ..." enthält, und ich möchte zwei Schaltflächen in diesem AbstractCell hinzufügen: der erste, um zur vorherigen Seite zurückzukehren und die zweite, um zur Begrüßungsseite zurückzukehren. ich verwendet habe, die Header-Element eine Klasse zu erstellen, die AbstractCell<String> mit diesem Code erweitert:Hinzufügen von Navigationsschaltflächen zu einem AbstractCell

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

}

Gibt es eine Möglichkeit, diese beiden Tasten hinzufügen? Bitte beachten Sie die schwarz markierte Kopfzeile. PS: das Kopfelement einzustellen, wie das Bild suchen unten, verwende ich diese 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; 
}

Quelle

2012-04-11 bouhmid_tun

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

Quelle

2012-04-11 11:49:16 Lin

Ich stelle fest, dass die Taste unter dem HeaderCell hinzugefügt wird. Ich würde, dass es in der gleichen Linie wie diese Demo kommt: http://www.ambigtion.com/gwtmobileui/. Ich werde dankbar sein, wenn Sie mir helfen können. Danke –

Oh in diesem Fall, machen Sie einfach einen Tisch daraus. Hier ein Beispiel: sb.appendHtmlConstant ("

"); sb.appendHtmlConstant (""); sb.appendHtmlConstant (""); sb.appendHtmlConstant ("

"); \t sb.appendHtmlConstant (""); sb.appendHtmlConstant (""); sb.appendHtmlConstant (button.getInnerHTML()); \t sb.appendHtmlConstant (""); – Lin

Und wissen Sie, wie Sie einen Aktionslistener für das Image-Tag hinzufügen? Vielen Dank im Voraus –

Was CompositeCell mit ActionCells für Ihre Tasten?

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

Quelle

2012-04-11 14:35:32

Würden Sie bitte mehr erklären? Danke –

CompositeCell wird jede einzelne Zelle nebeneinander legen. Mein Codebeispiel sollte eine Schaltfläche auf beiden Seiten der Header-Zelle einfügen (dh [<] header [>]) und wenn Sie das suchen, können Sie einfach diesen Code kopieren, C durch Ihren Zelltyp ersetzen und die ... -Elemente implementieren . –

Ich bin nicht wirklich sicher, ob dies die beste Umsetzung ist, aber es funktioniert für mich. - Zuerst fügen Sie diese zu Ihrem Konstruktor:

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

- dann überschreiben die 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 
     } 
     } 
    }

Cheers, Lin

Quelle

2012-04-24 13:51:56 Lin

Verwandte Themen

Hinzufügen von Navigationsschaltflächen zu einem AbstractCell

Antwort

Verwandte Themen