ToggleButtonとRadioButtonのハイブリッドが必要です。RadioButtonの「相互に排他的な」部分と、ToggleButtonのGUIの外観と動作(アップ状態とダウン状態)が必要です。すでに存在しますか?
6 に答える
私はkirushikのソリューションを採用し、任意の数のToggleButton(およびおそらく追加したい他のウィジェット)と選択したパネル(デフォルトはVerticalPanel)を取り、ボタンを相互に作成する単純な「ToggleButtonPanel」ウィジェットを作成しましたエクスクルーシブ。
これの良いところは、ボタンがクリックされると、パネル自体が ClickEvents を起動することです。このようにして、単一の ClickHandler を ToggleGroupPanel に追加し、event.getSource() を使用してクリックされたボタンを特定できます。
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.HasClickHandlers;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HasWidgets;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.ToggleButton;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
public class ToggleButtonPanel extends Composite implements HasWidgets, HasClickHandlers{
public ToggleButtonPanel() {
this(new VerticalPanel());
}
public ToggleButtonPanel(Panel panel){
this.panel = panel;
initWidget(panel);
}
@Override
public void add(Widget w) {
if(w instanceof ToggleButton){
ToggleButton button = (ToggleButton) w;
button.addClickHandler(handler);
}
panel.add(w);
}
@Override
public void clear() {
panel.clear();
}
@Override
public Iterator<Widget> iterator() {
return panel.iterator();
}
@Override
public boolean remove(Widget w) {
return panel.remove(w);
}
@Override
public void setWidth(String width) {
panel.setWidth(width);
};
@Override
public void setHeight(String height) {
panel.setHeight(height);
}
private final Panel panel;
private ClickHandler handler = new ClickHandler(){
@Override
public void onClick(ClickEvent event) {
Iterator<Widget> itr = panel.iterator();
while(itr.hasNext()){
Widget w = itr.next();
if(w instanceof ToggleButton){
ToggleButton button = (ToggleButton) w;
button.setDown(false);
if(event.getSource().equals(button)) {
button.setDown(true);
}
}
}
for(ClickHandler h : handlers){
h.onClick(event);
}
}
};
private List<ClickHandler> handlers = new ArrayList<ClickHandler>();
@Override
public HandlerRegistration addClickHandler(final ClickHandler handler) {
handlers.add(handler);
return new HandlerRegistration() {
@Override
public void removeHandler() {
handlers.remove(handler);
}
};
}
}
拡張ライブラリになく、他の回答のようにパネルに依存していないものがあります。ボタンを管理するこのクラスを定義します。ボタンに新しいクリックリスナーを追加します。これは、「GUIコンテンツ」クラスでアタッチしたクリックハンドラーに追加されます。これをコピーして貼り付けることができないので、構文的に正しいことを願っています。
public class MutuallyExclusiveToggleButtonCollection {
List<ToggleButton> m_toggleButtons = new ArrayList<ToggleButton>();
public void add(ToggleButton button) {
m_toggleButtons.add(button);
button.addClickListener(new ExclusiveButtonClickHandler());
}
private class ExclusiveButtonClickHandler impelments ClickHandler {
public void onClick(ClickEvent event) {
for(ToggleButton button : m_toggleButtons) {
boolean isSource = event.getSource().equals(button);
button.setIsDown(isSource);
}
}
}
これが私の純粋なgwtバリアントです:
class ThreeStateMachine extends FlowPanel{
// This is the main part - it will unset all the buttons in parent widget
// and then set only clicked one.
// One mutual handler works faster and is generally better for code reuse
private final ClickHandler toggleToThis = new ClickHandler() {
@Override
public void onClick(ClickEvent clickEvent) {
for(Widget b: ThreeStateMachine.this.getChildren()){
((ToggleButton)b).setDown(false);
}
((ToggleButton)clickEvent.getSource()).setDown(true);
}
};
private ThreeStateMachine() { // Create out widget and populat it with buttons
super();
ToggleButton b = new ToggleButton("one");
b.setDown(true);
b.addClickHandler(toggleToThis);
this.add(b);
b = new ToggleButton("two");
b.addClickHandler(toggleToThis);
this.add(b);
b = new ToggleButton("three");
b.addClickHandler(toggleToThis);
this.add(b);
}
}
確かに、バリアント (-up-hovering など) を含む gwt-ToggleButton の CSS スタイルが必要になります。
「この例は、ボタンの切り替えを示しています。クリックすると、このようなボタンは「押された」状態を切り替えます。
太字、斜体、下線のトグルボタンは、トグル状態に関して独立して動作しますが、テキスト配置アイコンのボタンは同じトグルグループに属しているため、ボタンの1つをクリックすると、前に押したボタンが通常の状態に戻ります。」
すべての ToggleButton に追加の ClickHandler を登録します。たとえば、トグル ボタンのホーム、ツリー、概要、詳細などです。
public class Abc extends Composite implements ClickHandler {
ToggleButton home, tree, summary, detail
public Abc() {
// all your UiBinder initializations... blah, blah....
home.addClickHandler(this);
tree.addClickHandler(this);
summary.addClickHandler(this);
detail.addClickHandler(this);
}
@Override
public void onClick(ClickEvent p_event) {
Object v_source = p_event.getSource();
home.setDown(home==v_source);
tree.setDown(tree==v_source);
summary.setDown(summary==v_source);
detail.setDown(detail==v_source);
}
}
もちろん、他のすべてのボイラープレート コードを追加し、ToggleButton ごとに追加の ClickHandler を登録するだけです。