2017-06-04 33 views
0

我有一个简单的附加开关与vaadin的例子,我想要的是保持开关的状态,即使我更新的用户界面,也就是说,我支持多个选项卡,但我做不到,这个推送示例与我想要做的非常相似,但是使用textField开关附加推,vaadin

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

为了我的例子中我添加了一个灯泡,以便访问其它应用程序时可以看到灯泡的当前状态。我在github上的例子是,只有3类

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

bombilla

这是swithc听者改变我的球,但是当我得到的布尔值(真或假的),我仍然不明白正确的方式来推动其他开关

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

     } 
}); 

更新

在我的示例github成就中,将所有开关的状态更改为所有UI,但我仍然不知道如何获取开关的状态

+1

对我来说这是一个有点不清楚你想要做什么seing代码和阅读后说明:** 1)**在UI中共享一个灯泡/开关状态,并且在UI中打开/关闭更新剩余的状态? ** 2 **)每个用户界面都有一个灯泡/开关...?我假设它是** 1)**,所以你应该只有一个静态开关状态(不是列表)和一个监听器列表。一旦状态改变,将新状态广播给所有的监听者,这样他们相应的UI就会被更新。 – Morfic

+0

您好@Morfic非常感谢您的帮助,是1),当我更改影响其他用户界面的开关,并且实际上只是在做这个部分时,我的问题是,当我刷新浏览器时,开关状态不会保留,我已经尝试了几件事,但我感到困惑:s,也就是说,如果我的开关打开,我应该继续刷新选项卡,我不想使用PreserveOnRefresh:s,作为Markus的示例代码,我尝试使用它作为我的交换机的指南,并保持其状态,因为他们在他们的例子中甚至刷新浏览器 –

回答

1

我对源进行了一些更改(仍是基本的,但它可以让你开始):

  • 只有1个公共共享状态
  • switch value change listeners现在只是触发state changed event
  • state changed listeners现在更新UI元素触发
  • UPO时Ñ注册,state changed listeners是有关当前状态

的主要思想是具有只是一个单一的共享状态的任何变化被传递到所有侦听(包括一个其中所述变化起源)通知(触发)。

以下您可以找到代码:(P.S.我没有重新编译我的视窗元件,因此好的开关图标回落到默认的复选框风格)

1)SwitchState - 代表所有的应用程序实例之间共享的开关的状态

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普通状态和听众经理

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布局和部件

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)结果 Light bulbs

+0

....非常感谢。真棒 –

0

我可以看到,随着ThemeResource()类,换灯泡其ON/OFF效果是很奇怪,但我解决这个问题如下

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

而且handleChangeEvent它保持这样

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

UPDATE:

我注意到一个问题,就是当我添加一个新的视图,或使用buttonMenuToggle改变,它失去了同步,并更新球很奇怪,明确与themeResource不会发生那。

解决方案:

避免UiDetachedException使用导航试试这个时候,它非常好

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