[Blama]

Hi Hirn,

I'd open a new thread for that.
But does the rest work for you?

Best regards
Blama

[Hirn]

>>But does the rest work for you?

so far it fits, but if (as promised by Isomorphic) my solution breaks, then I will have to invent something new

[Blama]

Why do you need that? I meant if the storeValue() approach works.

[Hirn]

>>Why do you need that? I meant if the storeValue() approach works.

To be honest, I haven't even tried. The prospect of comparing 2 arrays of objects to find out whether the selection has changed or not does not appeal to me

[Hirn]

Well, I wrote the version I wanted. I think it won't break after the next updates.

package com.cbtl.widgets.editors;

import java.lang.reflect.Array;
import java.util.Arrays;

import com.cbtl.events.tile.SelectionChangedEvent;
import com.cbtl.events.tile.SelectionChangedHandler;
import com.cbtl.utils.JsUtils;
import com.cbtl.widgets.CONSTANT;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.event.logical.shared.CloseEvent;
import com.google.gwt.event.logical.shared.CloseHandler;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.PopupPanel;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.SelectionType;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.events.DoubleClickEvent;
import com.smartgwt.client.widgets.events.DoubleClickHandler;
import com.smartgwt.client.widgets.events.FocusChangedEvent;
import com.smartgwt.client.widgets.events.FocusChangedHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.CanvasItem;
import com.smartgwt.client.widgets.form.fields.FormItemIcon;
import com.smartgwt.client.widgets.form.fields.events.IconClickEvent;
import com.smartgwt.client.widgets.form.fields.events.IconClickHandler;
import com.smartgwt.client.widgets.form.fields.events.ShowValueEvent;
import com.smartgwt.client.widgets.form.fields.events.ShowValueHandler;
import com.smartgwt.client.widgets.layout.FlowLayout;

public class TileListDeveloperItem extends CanvasItem {
    private static String STYLE = "inputTextField";
    private FlowLayout tileList;
    private String[] valueMap;
    private String[] selectedValues;
    private PopupPanel selectionPanel;
    private TileListDeveloperItem selectionList;
    private int pickListWidth;
    private int pickListtHeight;

    public TileListDeveloperItem (JavaScriptObject obj) {
        super(obj);
        init();
    }

    public TileListDeveloperItem (String name) {
        super(name);
        init();
    }

    public TileListDeveloperItem(String name, String title) {
        super(name, title);
        init();
    }

    private void init() {
        setColSpan("*");
        setShouldSaveValue(true);

        selectedValues = new String[] {};

        tileList = new FlowLayout();
        tileList.setWidth("100%");
        tileList.setCanFocus(true);
        tileList.setStyleName(STYLE);
        tileList.setLayoutMargin(CONSTANT.PADDING);
        tileList.setTileMargin(CONSTANT.PADDING);
        tileList.setAutoHeight();
        tileList.setOverflow(Overflow.VISIBLE);
        tileList.addDoubleClickHandler(new DoubleClickHandler() {
            @Override
            public void onDoubleClick(DoubleClickEvent event) {
                if(valueMap != null) {
                       createSelectionPanel();
                }
            }
        });

        tileList.addFocusChangedHandler(new FocusChangedHandler() {
            @Override
            public void onFocusChanged(FocusChangedEvent event) {
                if(event.getHasFocus()) {
                    tileList.setStyleName(STYLE + "Focused");
                } else {
                    tileList.setStyleName(STYLE);
                }
            }
        });

        addShowValueHandler(new ShowValueHandler() {
            @Override
            public void onShowValue(ShowValueEvent event) {
                String[] values = JsUtils.castObjectToStrings(event.getDataValue());
                if(values != null) {
                    showValues(values);
                }
            }
        });

        setCanvas(tileList);

    }

    public void setValueMap(String... values) {
        valueMap = values;
        if(values != null && values.length > 0) {
            FormItemIcon editIcon = new FormItemIcon();
            editIcon.setSrc(CONSTANT.BUTTONS_ICONS + "edit.png");
            editIcon.setShowOver(false);
            editIcon.setTabIndex(-1);
            setIcons(editIcon);
            addIconClickHandler(new IconClickHandler() {
                public void onIconClick(IconClickEvent event) {
                       createSelectionPanel();
                }
            });
        } else {
            setIcons(new FormItemIcon[] {});
        }
    }

    public String[] getValue() {
        return JsUtils.castObjectToStrings(super.getValue());
    }

    public void setValue(String value) {
        setValues(new String[] {value});
    }

    public String[] getValues() {
        return JsUtils.castObjectToStrings(super.getValue());
    }

    public void setValues(String[] values) {
        super.setValue(values);
    }

    private String[] clearValues(String... values) {
        String[] oldValues = new String[] {};
        Canvas[] children = tileList.getChildren();
        if(children != null && children.length > 0) {
            for(Canvas child:children) {
                String title = child.getTitle();
                if(JsUtils.indexOf(values, title) == -1) {
                    tileList.removeChild(child);
                } else {
                    Array.set(oldValues, oldValues.length, title);
                }
            }
        }
        return oldValues;
    }

    public void showValues(String[] newValues) {
        String[] oldValues = clearValues(newValues);
        Boolean multiple = getMultiple();
        String name = getName();
        Boolean canSelect = getCanSelect();
        for(String value:newValues) {
            if(canSelect) {
                if(oldValues == null || JsUtils.indexOf(oldValues, value) == -1) {
                    Button item = new Button(value);
                    item.setPadding(CONSTANT.PADDING);
                    item.setAutoFit(true);
                    item.setCanFocus(false);
                    item.setShowRollOver(false);
                    if(multiple) {
                        item.setActionType(SelectionType.CHECKBOX);
                    } else {
                        item.setActionType(SelectionType.RADIO);
                        item.setRadioGroup(name);
                    }
                    item.addClickHandler(new ClickHandler() {
                        @Override
                        public void onClick(ClickEvent event) {
                            Button buttom = (Button) event.getSource();
                            String value = buttom.getTitle();
                            selectValue(value, buttom.getSelected());
                               doSelect(value, buttom.isSelected());
                        }
                    });
                    tileList.addTile(item);
                }
            } else {
                if(oldValues == null || JsUtils.indexOf(oldValues, value) == -1) {
                    Label item = new Label(value);
                    item.setHeight(25);
                    item.setAutoFit(true);
                    item.setStyleName("textButton");
                    item.setWrap(false);
                    tileList.addTile(item);
                }
            }
        }
    }

    public CanvasItem setCanSelect(Boolean canSelect) {
        return (CanvasItem)setAttribute("canSelect", canSelect);
    }

    public Boolean getCanSelect() {
        Boolean result = getAttributeAsBoolean("canSelect", true);
        return result == null ? false : result;
    }

    public String[] getSelectedValues() {
        if(selectedValues != null) {
            return Arrays.copyOf(selectedValues, selectedValues.length);
        } else {
            return new String[] {};
        }
    }

    public void selectValue(String value) {
        selectValue(value, true);
    }

    public void selectValue(String value, Boolean state) {
        if(getCanSelect()) {
            if(selectedValues == null) {
                selectedValues = new String[] {};
            }
            if(getMultiple()) {
                if(state) {
                    Array.set(selectedValues, selectedValues.length, value);
                } else {
                    JsUtils.removeArrayValue(selectedValues, value);
                }
            } else {
                if(state) {
                    selectedValues = new String[] {value};
                }
            }
        }
    }

    public void selectValues(String[] values) {
        if(getCanSelect()) {
            if(getMultiple()) {
                selectedValues = values;
            } else {
                selectedValues = new String[] {values[0]};
            }
            updateSelection();
        }
    }

    public void updateSelection() {
        Canvas[] children = tileList.getChildren();
        for(Canvas child:children) {
            Button button = (Button) child;
            Boolean select = JsUtils.indexOf(selectedValues, button.getTitle()) != -1;
            button.setSelected(select);
        }
    }

    public HandlerRegistration addSelectionChangedHandler(SelectionChangedHandler selectionChangedHandler) {
        return doAddHandler(selectionChangedHandler, SelectionChangedEvent.getType());
    }

    public native void doSelect(String value, Boolean state) /*-{
        var selfJ = this;
        var param = {"_this":this, "value":arguments[0], "state":arguments[1]};
        var event = @com.cbtl.events.tile.SelectionChangedEvent::new(Lcom/google/gwt/core/client/JavaScriptObject;)(param);
        selfJ.@com.smartgwt.client.widgets.BaseWidget::fireEvent(Lcom/google/gwt/event/shared/GwtEvent;)(event);
    }-*/;

    public void setPickListWidth(int value) {
        pickListWidth = value;
    }

    public int getPickListWidth() {
        return pickListWidth;
    }

    public void setPickListHeight(int value) {
        pickListtHeight = value;
    }

    public int getPickListHeight() {
        return pickListtHeight;
    }

    private void createSelectionPanel() {
        DynamicForm form = new DynamicForm();
        form.setWidth("100%");
        form.setMargin(0);
        form.setCellPadding(0);
        form.setAutoHeight();

        selectionList = new TileListDeveloperItem(getName() + "selectionList");
        selectionList.setWidth("100%");
        selectionList.setShowTitle(false);
        selectionList.setMultiple(getMultiple());
        selectionList.setCanSelect(true);
        selectionList.setValues(valueMap);
        selectionList.selectValues(getValues());
        selectionList.addSelectionChangedHandler(new com.cbtl.events.tile.SelectionChangedHandler() {
            @Override
            public void onSelectionChanged(com.cbtl.events.tile.SelectionChangedEvent event) {
                String[] values = selectionList.selectedValues;
                showValues(values);
                storeValue(values);
                Timer timer = new Timer() {
                    @Override
                    public void run() {
                        cancel();
                        setPanelPosition();
                    }
                };
                timer.scheduleRepeating(300);
            }
        });

        form.setFields(selectionList);

        selectionPanel = new PopupPanel(true);
        selectionPanel.setStyleName("dropDownPanel");
        int width = getPickListWidth();
        if(width == 0) {
            width = tileList.getWidth();
        }
        selectionPanel.setWidth(Integer.toString(width));
        selectionPanel.setModal(true);
        selectionPanel.setWidget(form);
        selectionPanel.addCloseHandler(new CloseHandler<PopupPanel>() {
            @Override
            public void onClose(CloseEvent<PopupPanel> event) {
                selectionList = null;
                selectionPanel = null;
            }
        });
        selectionPanel.show();
        selectionPanel.setVisible(false);
        selectionList.updateSelection();

        Timer timer = new Timer() {
            @Override
            public void run() {
                cancel();
                setPanelPosition();
            }
        };
        timer.scheduleRepeating(50);

    }

    public void setPanelPosition() {
        int x = tileList.getAbsoluteLeft();
        int h = tileList.getBottom() - tileList.getTop();
        int y = tileList.getAbsoluteTop();
        int h1 = selectionList.tileList.getBottom() - selectionList.tileList.getTop();
        int wh = Window.getClientHeight() - Window.getScrollTop();
        if((y + h + h1) < wh) {
            selectionPanel.setPopupPosition(x, y + h);
        } else {
            selectionPanel.setPopupPosition(x, y - h1);
        }
        selectionPanel.setVisible(true);
    }
}

and here are examples of the use of components

TileListDeveloperItem projectLanguagesList = new TileListDeveloperItem("projectLanguages", Strings.get("projectLanguages"));
        projectLanguagesList.setWidth("100%");
        projectLanguagesList.setWrapTitle(false);
        projectLanguagesList.setMultiple(true);
        projectLanguagesList.setCanSelect(true);
        projectLanguagesList.setValueMap(languages);
        projectLanguagesList.setValues(projectLanguages);
        projectLanguagesList.addChangedHandler(new ChangedHandler() {
            @Override
            public void onChanged(ChangedEvent event) {
                 .....
            }
        });
        projectLanguagesList.addSelectionChangedHandler(new com.cbtl.events.tile.SelectionChangedHandler() {
            @Override
            public void onSelectionChanged(com.cbtl.events.tile.SelectionChangedEvent selectionChangedEvent) {
             .....
            }
        });

[kesarteraa]

I have such a task in front of me... write a component in which a list of elements was selected from a drop-down list as in (SelectItem) and additionally this selected list should be selectable.
indigo card
jjsploit.click

[Isomorphic]

This continues to be a broken and unsupportable approach, for the same reason as we have explained before: internal, undocumented and unsupported JSNI details have been copied and pasted into your application code.

The underlying issue continues to be the same as stated multiple times previously: you are talking about something being "selectable" and unilaterally assuming that this means there must be a JSNI-based OnSelectionChanged handler. This is neither a requirement for any normal notion of "selectable" nor is it something coming from our product.

If there is something in your codebase that has a notion of "selectable" and requires hacks like this, then you need to change that part of your application code, rather than proceeding with a hack that is simply going to break.

As we have previously stated, any apparent "progress" in this direction is illusory: you are literally making negative progress, putting yourself in a worse position than when you started.

Bottom line: no one should copy this code, and this poster is demonstrating how not to work with Support: this poster is simply assuming various things and not explaining them. The communication problem is so bad here that we are starting to expect trolling, because we are literally 36 posts in, and even with heroic attempts by Blama to address the problem via painstaking interrogation of the OP, we still have no explanation from the OP as to what "selectable" means to him and why he assumes this means a hacked-up OnSelectionChanged handler that copies undocumented internals into application code.