Switch-Add-on mit Push, vaadin

Question

Ich habe ein einfaches Beispiel für den Add-on-Schalter mit vaadin, was ich will ist, den Status des Schalters zu halten, auch wenn ich die Benutzeroberfläche aktualisieren, dh ich mehrere Registerkarten unterstützen , aber ich kann es nicht tun, dieses Push-Beispiel ist sehr ähnlich zu dem, was ich tun möchte, aber mit einem textField.

https://github.com/vaadin-marcus/push-example/blob/master/src/main/java/com/vaadin/training/ScrumBoardLayout.java

https://github.com/rucko24/MVP/blob/testingSwitchPushTemu/src/main/java/com/Core/vaadin/pushServer/ejemploPushMarkus/ScrumBoard.java

Zu meinem Beispiel füge ich eine Lampe, so dass, wenn ein anderer die Anwendung greift auf den aktuellen Zustand der Lampe sehen. Mein Beispiel in Github ist dies mit nur 3 Klassen

https://github.com/rucko24/MVP/tree/testingSwitchPushTemu/src/main/java/com/Core/vaadin/pushServer/ejemploPushMarkus

Dies ist der swithc Zuhörer, die meine Birne ändert, aber wenn ich den Booleschen Wert (true oder false) erhalten, habe ich noch nicht die richtige Art und Weise verstehen, die andere Switch

switchTemu.addValueChangeListener(new Property.ValueChangeListener() { 
     private static final long serialVersionUID = 1L; 

@Override 
public void valueChange(Property.ValueChangeEvent event) { 
     boolean estado = (boolean) event.getProperty().getValue(); 
     ScrumBoard.addSwitch(estado); 
     switchTemu.removeValueChangeListener(this); 
     if(estado == Boolean.TRUE) { 
       bombilla.setIcon(bombillaON); 

     }else { 
       bombilla.setIcon(bombillaOFF); 

     } 
     switchTemu.addValueChangeListener(this); 

     } 
}); 

aktualisieren

schieben

In meinem Beispiel github Leistung, ändern Sie den Status aller Schalter auf alle UI, aber ich weiß immer noch nicht, wie man den Zustand der Schalter

Answer 1

Ich machte ein paar Änderungen an Ihren Quellen (immer noch grundlegend, aber es wird Ihnen den Start):

• nur 1 gemeinsam genutzten Zustand
• switch value change listeners nun ausgelöst werden nur state changed event
• state changed listeners jetzt die UI-Elemente aktualisieren, wenn
• ausgelöst upo n-Registrierung, ein state changed listeners informiert (ausgelöst) über den aktuellen Stand

Die Hauptidee ist nur einen einzigen gemeinsamen Staat zu haben, und jede Änderung an alle Zuhörer mitgeteilt wird (einschließlich dem, in dem die Änderung stammte).

Unten finden Sie den Code: (P.S.Ich habe neu kompilieren nicht mein Widgetset so das schöne Schaltersymbol auf das Kontrollkästchen Standard-Stil fällt zurück)

1) SwitchState - stellt den Zustand des Schalters geteilt zwischen allen App-Instanzen

public enum SwitchState { 
    ON(true, new ThemeResource("img/on.png")), OFF(false, new ThemeResource("img/off.png")); 

    private final boolean value; 
    private final ThemeResource icon; 

    SwitchState(boolean value, ThemeResource icon) { 
     this.value = value; 
     this.icon = icon; 
    } 

    public boolean getValue() { 
     return value; 
    } 

    public ThemeResource getIcon() { 
     return icon; 
    } 

    public static SwitchState from(boolean value) { 
     return value ? ON : OFF; 
    } 
} 

2) ScrumBoard gemeinsamen Zustand und Hörer-Manager

public class ScrumBoard { 

    // list of listeners  
    private static List<SwitchChangeListener> LISTENERS = new ArrayList<>(); 
    // initial state 
    private static SwitchState STATE = SwitchState.OFF; 

    // state change listener contract 
    public interface SwitchChangeListener { 
     void handleStateChange(SwitchState state); 
    } 

    // handle a a state change request 
    public static synchronized void updateState(boolean value) { 
     STATE = SwitchState.from(value); 
     fireChangeEvent(STATE); 
    } 

    // register a new state listener 
    public static synchronized void addSwitchChangeListener(SwitchChangeListener listener) { 
     System.out.println("Added listener for " + listener); 
     LISTENERS.add(listener); 
     // when a new listener is registered, also inform it of the current state 
     listener.handleStateChange(STATE); 
    } 

    // remove a state listener 
    public static synchronized void removeSwitchListener(SwitchChangeListener listener) { 
     LISTENERS.remove(listener); 
    } 

    // fire a change event to all registered listeners 
    private static void fireChangeEvent(SwitchState state) { 
     for (SwitchChangeListener listener : LISTENERS) { 
      listener.handleStateChange(state); 
     } 
    } 
} 

3) ScrumBoardLayout - UI-Layout und Komponenten

public class ScrumBoardLayout extends VerticalLayout implements ScrumBoard.SwitchChangeListener { 

    private Label icon = new Label(); 
    private Switch mySwitch = new Switch(); 

    public ScrumBoardLayout() { 
     setMargin(true); 
     setSpacing(true); 
     addHeader(); 

     // listen for state changes 
     ScrumBoard.addSwitchChangeListener(this); 
    } 

    private void addHeader() { 
     mySwitch.setImmediate(true); 
     icon.setSizeUndefined(); 

     // notify of state change 
     mySwitch.addValueChangeListener((Property.ValueChangeListener) event -> ScrumBoard.updateState((Boolean) event.getProperty().getValue())); 

     VerticalLayout layout = new VerticalLayout(); 
     layout.setHeight("78%"); 
     layout.addComponents(icon, mySwitch); 

     layout.setComponentAlignment(icon, Alignment.BOTTOM_CENTER); 
     layout.setComponentAlignment(mySwitch, Alignment.BOTTOM_CENTER); 
     layout.setExpandRatio(mySwitch, 1); 
     addComponents(layout); 
    } 

    @Override 
    public void handleStateChange(SwitchState state) { 
     // update UI on state change 
     UI.getCurrent().access(() -> { 
      mySwitch.setValue(state.getValue()); 
      icon.setIcon(state.getIcon()); 
      Notification.show(state.name(), Type.ASSISTIVE_NOTIFICATION); 
     }); 
    } 

    @Override 
    public void detach() { 
     super.detach(); 
     ScrumBoard.removeSwitchListener(this); 
    } 
} 

4) Ergebnis

Answer 2

ich, dass mit der ThemeResource() der Klasse sehen konnte, ist die Lampe in seine EIN/AUS-Effekt ändert seltsam, aber ich lösen sie als

.bombillo-on { 
    @include valo-animate-in-fade($duration: 1s); 
    width: 181px; 
    height: 216px; 
    background: url(img/on.png) no-repeat; 
} 
.bombillo-off { 
    @include valo-animate-in-fade($duration: 1s); 
    width: 181px; 
height: 216px; 
    background: url(img/off.png) no-repeat; 
} 

public enum Sstate { 

ON(true,"bombillo-on"), 
OFF(false,"bombillo-off"); 

private boolean value; 
private String style; 

Sstate(boolean value, String style) { 
    this.value = value; 
    this.style = style; 
} 

public boolean getValue() { return value;} 
public String getStyle() { return style;} 
public static Sstate from(boolean value) { return value ? ON:OFF;} 
} 

folgt Und die handleChangeEvent es bleibt wie diese

@Override 
public void handleChangeEvent(Sstate state) { 
    ui.access(() -> { 
     bombilla.setStyleName(state.getStyle()); 
     s.setValue(state.getValue()); 
     System.out.println(state+" values "+s); 
    }); 
} 

UPDATE:

ich ein Problem bemerken, dass, wenn ich eine neue Ansicht hinzufügen oder ändern Sie die buttonMenuToggle verwenden, ist es die Synchronisation verliert, und die Lampe ziemlich seltsam, klar aktualisieren mit der themeResource nicht geschehen ist Das.

Lösung:

UiDetachedException zu vermeiden, wenn der Navigator versuchen dies mit, Es funktioniert sehr gut

@Override 
public void handleChangeEvent(Sstate state) { 
    if(!ui.isAttached()) { 
     BroadcastesSwitch.removeListener(this); 
     return; 
    } 
    ui.access(() -> { 
     bombilla.setStyleName(state.getStyle()); 
     s.setValue(state.getValue()); 
     System.out.println(state+" values "+s); 
    }); 
}