Make GWT Fenster Titel editierbar

Question

Ich brauche den Titel von smartGWT Windows editierbar sein. Und ich muss es dynamisch machen, weil die Anzahl der Fenster variabel ist.

I verlief wie folgt:

1) I erstellen eine Liste von Zufalls IDs für die Fenster, wenn sie

private String randomId = "title" + Random.nextInt(); 

2) I implementiert, ein Verfahren, um das Fenster zu erstellen und geladen werden, ihre Titel

@Override 
public final Canvas getCanvas() { 
    if (window == null) { 
     window = new Window(); 
     window.setTitle(getTitle(model)); 

3)

private String getTitle(E model) { 
     return "<span contenteditable=\"true\" style=\"cursor: text\" id=\"" + randomId + "\">" + model.getName() + "</span>"; 
} 

3) nenne ich ein Verfahren das Fenster, falls zu bearbeiten

geklickt wird

window.addDrawHandler(event -> setupTitleEditing(randomId)); 

4) I, das Verfahren wie folgt implementiert:

private native void setupTitleEditing(String name)/*-{ 
    document.getElementById(name).bind('click', function() { 
     $(this).attr('contentEditable', true); 
     }).blur(function() { 
     $(this).attr('contentEditable', false); 
     }); 
}-*/; 

Das Element Spanne in Schritt null sein wird betrachten 4) sogar es existiert mit der richtigen ID (Browser Inspector).

Meine Frage ist: Gibt es eine direkte Methode, um das in Java mit GWT-Methoden zu tun? Wenn nicht, was habe ich falsch gemacht?

Answer 1

Meine vorgeschlagene Lösung ist immer noch mit einem Problem, aber ich kann Ihnen zeigen, was Sie falsch gemacht haben, und dann können Sie die vollständige Lösung finden.

Innerhalb der JSNI-Methode setupTitleEditing(String name) sollten Sie stattdessen statt document verwenden. Der Grund dafür ist, dass (Zitat aus Kapitel 11, GWT in Aktion, 2. Auflage)

eine GWT-Anwendung sein könnte (und in der Regel ist) der Browser innerhalb in einen Rahmen geladen. Dies bedeutet, dass die Sichtbarkeit der document Variablen garantiert ist. GWT stellt stattdessen die JavaScript-Variable $doc zur Verfügung, die garantiert, dass sie mit der Standardvariable document verknüpft wird, unabhängig davon, wie die Anwendung in den Browser geladen wird.

Beachten Sie, dass das Objekt, das von $doc.getElementById(name) zurückgegeben wird, nicht über die Methode 'bind' oder 'blur' verfügt. Sie müssen diese Aufgabe tun

$doc.getElementById(name).onclick = function(){ 
    $(this).attr('contentEditable', true); 
}; 

Ich implementierte diese Lösung und ich lief es. Ich konnte den Titel bearbeiten, aber nicht ohne Ärger. Der Cursor des Elements <span> wird nicht bereitwillig angezeigt. Es hat mich immer dazu gebracht, hier und da eine Sequenz von Klicks zu machen, um endlich den Cursor zu öffnen und erst danach kann ich den Titel bearbeiten. Ich weiß nicht warum, aber es sieht so aus, als würde man mit der rechten Maustaste auf den Titel klicken, um das Kontextmenü zu öffnen, und dann auf inspect element klicken, könnte der Cursor immer auftauchen.

P.S. Sie haben Ihren Beitrag mit 'smartgwt' anstelle von 'gwt' getaggt, weil die in Ihrer Frage erwähnten Widget-Klassen Canvas und Window zu SmartGWT statt Vanille GWT gehören. Habe ich recht? Jemand hat Ihre Tags bearbeitet und 'smartgwt' durch 'gwt' ersetzt.Ich habe das erst bemerkt, als ich das GWT-Javadoc durchging und fand, dass seine Window Klasse keine Methode mit dem Namen addDrawHandler hat und die Window Klasse auch keine Unterklasse von Canvas ist.

Obwohl die Lösung möglicherweise nicht spezifisch für SmartGWT ist, schlage ich vor, dass Sie 1) das Tag zurückgeben, damit jemand, der mit SmartGWT vertraut ist, helfen kann und 2) Links zu den Klassen hinzufügt, wenn Sie sie so erwähnen Canvas und Window.