Bug (perhaps enhancement) with textcolor for canEdit=false FormItems

[Blama]

Hi Isomorphic,

please see this modified FormVariousControlsSample from the LGPL showcase (using v9.1p_2014-07-23, GWT 2.6.1, FF26 dev mode):

FormVariousControlsSample.java (changed Forms to setCanEdit(false) and set some FormItem default-values):

package com.smartgwt.sample.showcase.client.forms.controls;

import com.smartgwt.client.data.DateRange;
import com.smartgwt.client.data.RelativeDate;
import com.smartgwt.client.types.MultipleAppearance;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.*;
import com.smartgwt.client.widgets.form.fields.events.ClickEvent;
import com.smartgwt.client.widgets.form.fields.events.ClickHandler;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.sample.showcase.client.PanelFactory;
import com.smartgwt.sample.showcase.client.ShowcasePanel;

import java.util.LinkedHashMap;

public class FormVariousControlsSample extends ShowcasePanel {
    private static final String DESCRIPTION = "Demonstration of several form controls.";

    public static class Factory implements PanelFactory {
        private String id;

        public Canvas create() {
            FormVariousControlsSample panel = new FormVariousControlsSample();
            id = panel.getID();
            return panel;
        }

        public String getID() {
            return id;
        }

        public String getDescription() {
            return DESCRIPTION;
        }
    }

    public Canvas getViewPanel() {
        VLayout layout = new VLayout(10);

        final DynamicForm form = new DynamicForm();
        form.setCanEdit(false);

        TextItem textItem = new TextItem();
        textItem.setTitle("Text");
        textItem.setHint("<nobr>A plain text field</nobr>");
        textItem.setDefaultValue("Teststring");

        TextAreaItem textAreaItem = new TextAreaItem();
        textAreaItem.setTitle("TextArea");

        ColorPickerItem colorPicker = new ColorPickerItem();
        colorPicker.setTitle("Color Picker");

        SpinnerItem spinnerItem = new SpinnerItem();
        spinnerItem.setTitle("Spinner");
        spinnerItem.setDefaultValue(5);
        spinnerItem.setMin(0);
        spinnerItem.setMax(10);
        spinnerItem.setStep(0.5f);

        SliderItem sliderItem = new SliderItem();
        sliderItem.setTitle("Slider");
        sliderItem.setHeight(40);
        sliderItem.setWidth(180);
        sliderItem.setMinValue(1);
        sliderItem.setMaxValue(5);
        sliderItem.setNumValues(5);
        sliderItem.setDefaultValue(4);

        LinkItem linkItem = new LinkItem("link");
        linkItem.setTitle("LinkItem");
        linkItem.setLinkTitle("<br>Click Me<br>");
        linkItem.setHeight(36);
        linkItem.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                SC.say("Hello World");
            }
        });

        CheckboxItem checkboxItem = new CheckboxItem();
        checkboxItem.setTitle("Checkbox");
        checkboxItem.setHeight(25);

        RadioGroupItem radioGroupItem = new RadioGroupItem();
        radioGroupItem.setTitle("Radio Group");
        radioGroupItem.setValueMap("Option 1", "Option 2");

        form.setFields(textItem, colorPicker, textAreaItem, spinnerItem, sliderItem, linkItem, checkboxItem, radioGroupItem);
        layout.addMember(form);

        DynamicForm selectComboForm = new DynamicForm();
        selectComboForm.setCanEdit(false);
        selectComboForm.setWidth(450);
        selectComboForm.setIsGroup(true);
        selectComboForm.setGroupTitle("Select / Combo Controls");

        ComboBoxItem cbItem = new ComboBoxItem();
        cbItem.setTitle("Select");
        cbItem.setHint("<nobr>A simple combobox</nobr>");
        cbItem.setType("comboBox");
        cbItem.setValueMap("Cat", "Dog", "Giraffe", "Goat", "Marmoset", "Mouse");
        cbItem.setDefaultValue("Cat");

        LinkedHashMap<String, String> valueMap = new LinkedHashMap<String, String>();
        valueMap.put("US", "<b>United States</b>");
        valueMap.put("CH", "China");
        valueMap.put("JA", "<b>Japan</b>");
        valueMap.put("IN", "India");
        valueMap.put("GM", "Germany");
        valueMap.put("FR", "France");
        valueMap.put("IT", "Italy");
        valueMap.put("RS", "Russia");
        valueMap.put("BR", "<b>Brazil</b>");
        valueMap.put("CA", "Canada");
        valueMap.put("MX", "Mexico");
        valueMap.put("SP", "Spain");

        final SelectItem selectItem = new SelectItem();
        selectItem.setTitle("Select");
        selectItem.setHint("<nobr>A combobox with icons</nobr>");
        selectItem.setValueMap(valueMap);
        selectItem.setImageURLPrefix("flags/16/");
        selectItem.setImageURLSuffix(".png");
        selectItem.setDefaultValue("MX");

        LinkedHashMap<String, String> valueIcons = new LinkedHashMap<String, String>();
        valueIcons.put("US", "US");
        valueIcons.put("CH", "CH");
        valueIcons.put("JA", "JA");
        valueIcons.put("IN", "IN");
        valueIcons.put("GM", "GM");
        valueIcons.put("FR", "FR");
        valueIcons.put("IT", "IT");
        valueIcons.put("RS", "RS");
        valueIcons.put("BR", "BR");
        valueIcons.put("CA", "CA");
        valueIcons.put("MX", "MX");
        valueIcons.put("SP", "SP");
        selectItem.setValueIcons(valueIcons);

        SelectItem selectItem2 = new SelectItem();
        selectItem2.setTitle("Select");
        selectItem2.setHint("<nobr>A combobox with styled entries</nobr>");
        selectItem2.setValueMap("<span style='color:#FF0000;'>Red</span>",
                "<span style='color:#00FF00;'>Green</span>",
                "<span style='color:#0000FF;'>Blue</span>");


        final SelectItem selectItemMultipleGrid = new SelectItem();
        selectItemMultipleGrid.setTitle("Select Multiple (Grid)");
        selectItemMultipleGrid.setMultiple(true);
        selectItemMultipleGrid.setMultipleAppearance(MultipleAppearance.GRID);
        selectItemMultipleGrid.setValueMap("Cat", "Dog", "Giraffe", "Goat", "Marmoset", "Mouse");

        final SelectItem selectItemMultiplePickList = new SelectItem();
        selectItemMultiplePickList.setTitle("Select Multiple (PickList)");
        selectItemMultiplePickList.setMultiple(true);
        selectItemMultiplePickList.setMultipleAppearance(MultipleAppearance.PICKLIST);
        selectItemMultiplePickList.setValueMap("Cat", "Dog", "Giraffe", "Goat", "Marmoset", "Mouse");

        selectComboForm.setItems(cbItem, selectItem, selectItem2, selectItemMultipleGrid, selectItemMultiplePickList);
        layout.addMember(selectComboForm);

        DynamicForm dateForm = new DynamicForm();
        dateForm.setCanEdit(false);
        dateForm.setWidth(450);
        dateForm.setIsGroup(true);
        dateForm.setGroupTitle("Date Controls");

        DateItem dateItem = new DateItem();
        dateItem.setTitle("Date");
        dateItem.setHint("<nobr>Picklist based date input</nobr>");

        DateItem dateItem2 = new DateItem();
        dateItem2.setTitle("Date");
        dateItem2.setUseTextField(true);
        dateItem2.setHint("<nobr>Direct date input</nobr>");

        TimeItem timeItem1 = new TimeItem("timeItem", "Time");
        TimeItem timeItem2 = new TimeItem("timeItem", "Time");
        timeItem2.setHint("Picklist based time input");
        timeItem2.setUseTextField(false);

        DateRangeItem dateRangeItem = new DateRangeItem("dri", "Date Range");
        dateRangeItem.setAllowRelativeDates(true);
        DateRange dateRange = new DateRange();
        dateRange.setRelativeStartDate(RelativeDate.TODAY);
        dateRange.setRelativeEndDate(new RelativeDate("-1m"));
        dateRangeItem.setValue(dateRange);

        MiniDateRangeItem miniDateRangeItem = new MiniDateRangeItem("mdri", "Mini Date Range");
        RelativeDateItem relativeDateItem = new RelativeDateItem("rdi", "Relative Date");

        dateForm.setItems(dateItem, dateItem2, timeItem1, timeItem2,
                          dateRangeItem, miniDateRangeItem, relativeDateItem);
        layout.addMember(dateForm);

        return layout;
    }

    public String getIntro() {
        return DESCRIPTION;
    }

}

As you can see in Enterprise and Simplicity skin all FormItems are disabled.
You can tell that from the design for the SelectItems and CheckboxItems.
You can't tell it for the TextItems.
Especially the font-color is the same for setCanEdit(true/false), which is really confusing.
To the user, setCanEdit(false) and setDisabled(true) mean almost the same ("I can't edit here"), so they should look the same.

Could you change this in both Simplicity and Enterprise skin in 4.1p?

Another enhancement (less important) would be to make setCanEdit(false)-SelectItems (and extending childs) to support text-selection.
Again it would be difficult for the user to tell why he or she can't select text in one (SelectItem) and can in the other (CheckboxItem) as they look 100% the same when editing is not possible.

The first one is really bugging me, while the second is more an enhancement.

Thank you & Best regards,
Blama

[Isomorphic]

Seems like you probably haven't noticed DynamicForm/FormItem.setReadOnlyDisplay()?

[Blama]

Hi Isomorphic,

please also note:

1. DateRangeItem: Already looks disabled (class="formCellDisabled")
2. RelativeDateItem: Already looks disabled (class="formCellDisabled")
3. selectItemMultiplePickList: Already looks disabled (is multiple(grid), class="nativeSelectItem")
4. MiniDateRangeItem: Shows popup on click even though setCanEdit=false (bug)
5. SliderItem: Has no bar (in Simplicity only) when setCanEdit=false (bug)

Best regards,
Blama

[Blama]

Crossposting...

Seems like you probably haven't noticed DynamicForm/FormItem.setReadOnlyDisplay()?

No, I did not see this. Looks like this is exactly what I'm looking for.

Could you then please check the display of the points 1-3 of my 2nd post?
I'll check my posts again and list what might be a bug.

Thanks for the fast answer and again for the great framework.

Best regards,
Blama

[Blama]

Hi Isomorphic,

here a list of all issues I found:

setCanEdit(false) + ReadOnlyDisplayAppearance.DISABLED set on form level (3x in sample):

• ComboBoxItem: textcolor still as when setReadOnly(false)
• SelectItem: textcolor still as when setReadOnly(false)
• DateRangeItem: Resulting date textcolor not as other FormItems
• MiniDateRangeItem: Resulting date textcolor not as other FormItems
• RelativeDateItem: Resulting date textcolor not as other FormItems
• SliderItem: sliderValue has no color defined in CSS (Simplicity only, default to black)

setCanEdit(false) + ReadOnlyDisplayAppearance.READONLY set on form level (3x in sample):

• DateRangeItem: Does not respect ReadOnlyDisplayAppearance.READONLY (looks like ReadOnlyDisplayAppearance.DISABLED)
• MiniDateRangeItem: Does not respect ReadOnlyDisplayAppearance.READONLY (looks like ReadOnlyDisplayAppearance.DISABLED)
• RelativeDateItem: Does not respect ReadOnlyDisplayAppearance.READONLY (looks like ReadOnlyDisplayAppearance.DISABLED)
• SelectItem with setMultiple(true) + selectItemMultiplePickList.setMultipleAppearance(MultipleAppearance.PICKLIST): Textcolor not black (not set at all?)

General bugs:

• MiniDateRangeItem with setCanEdit(false): TextItem reacts to clicks
• SliderItem setCanEdit(false): Has no bar (in Simplicity only)

General enhancements:

• SliderItem does not have support for "*Disabled"-CSS classes (and therefore no rules in the skin_styles.css-files)
• SelectItems with setCanEdit(false) (and extending childs) should support text-selection.
  It is difficult for the user to tell why he or she can't select text in one (SelectItem) and can in the other (CheckboxItem) as they look 100% the same when editing is not possible in both. (Edit: I created an own thread for this)

Best regards,
Blama

[Isomorphic]

Thanks for the report - we've addressed all of the issues in both 4.1p and 5.0d branches

Please try the latest nightly build (July 28) and let us know if you continue to have issues here

Regards
Isomorphic Software

[Blama]

Hi Isomorphic,

thanks for fixing.

Just to let you know (no priority for me, I don't use those currently), those are still open in v9.1p_2014-07-31:

• SelectItem with setMultiple(true) + selectItemMultiplePickList.setMultipleAppearance(MultipleAppearance.PICKLIST): Textcolor not black (not set at all? (is "class=nativeSelectItem"))
• SliderItem: uses *Disabled when in ReadOnlyDisplayAppearance.READONLY-mode

Best regards,
Blama