5.1p BatchUploader clientside design issues

[Blama]

Hi Isomorphic,

I'm having some design issues with BatchUploader using v10.1p_2016-03-27:

1. "ESC"-key does not bubble to the Window to close it when in BatchUploader or when in the area next to the buttons on the bottom
2. I can't get the FileItem to end at the right border of the "Change my text" button, as I can't access the FormItem to do setColSpan(3). Could you make it an AutoChild?
3. uploadForm.setWidth100() does not set to 100% width
4. Changing the button title for "Change my text" button does not work with the button on the bottom.

Of these, #4 really bugs me as the button text will be different in my application depending on the selection in the SelectItem via a ChangedHandler there.

The strange think is that in the Developer Console, "Evaluate JS Expression" I get this:

[B]COMMAND:[/B]
isc_BatchUploader_0.uploadForm.fields[1]

[B]RESULT:[/B]
Evaluator: result of 'isc_BatchUploader_0.uploadForm.fields[1]' (0ms):
{__ref: {GWT Java Obj},
__module: {GWT Module Obj},
AUTOIDClass: "ButtonItem",
name: "DUMMY",
_autoAssignedName: false,
editorType: "ButtonItem",
createCanvas: [a]ButtonItem.createCanvas(),
title: "[B]Changed via object[/B]",
startRow: false,
type: undef,
}

Also calling markForRedraw() does not change it.

This is the testcase (Simplicity based):

package com.smartgwt.sample.client;

import java.util.LinkedHashMap;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.BatchUploader;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.ButtonItem;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
    private VLayout mainLayout;
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        mainLayout = new VLayout(20);
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                recreate();
            }
        });
        mainLayout.addMember(recreateBtn);
        recreate();
        mainLayout.draw();
    }

    private void recreate() {
        Window w = new Window();
        w.setWidth("50%");
        w.setHeight("50%");
        w.setBackgroundColor("#EEE");
        w.setMembersMargin(0);
        w.setModalMaskOpacity(70);
        w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
        w.setTitle("BatchUploader Design Problems" + w.getTitle());
        w.setShowMinimizeButton(false);
        w.setDismissOnEscape(true);
        w.setIsModal(true);
        w.setShowModalMask(true);
        w.centerInPage();

        DynamicForm uploadForm = new DynamicForm();
        uploadForm.setWidth100();
        uploadForm.setNumCols(3);
        uploadForm.setTitleWidth(120);
        BatchUploader.changeAutoChildDefaults("uploadForm", uploadForm);

        final BatchUploader bu = new BatchUploader();
        bu.setWidth100();
        bu.setBackgroundColor("#EEE");
        bu.setUploadDataSource(DataSource.get("employees"));
        final SelectItem onetwo = new SelectItem("SI", "Change button name");
        onetwo.setWidth("*");
        onetwo.setValueMap(new LinkedHashMap<String, String>() {
            private static final long serialVersionUID = 1L;
            {
                put("Key-one", "Value-one");
                put("Key-two", "Value-two");
            }
        });
        final ButtonItem dummy = new ButtonItem("DUMMY", "Change my text");
        dummy.setStartRow(false);
        bu.setUploadFormFields(onetwo, dummy);
        w.addItem(bu);

        IButton change1 = new IButton("Change via object");
        change1.setWidth(200);
        change1.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                dummy.setTitle("Changed via object");
                ;
            }
        });
        w.addItem(change1);

        IButton change2 = new IButton("Change via DynamicForm");
        change2.setWidth(200);
        change2.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                bu.getUploadForm().getField("DUMMY").setTitle("Changed via DynamicForm");
            }
        });
        w.addItem(change2);
        w.show();
    }
}

Best regards
Blama

[Blama]

Hi Isomorphic,

another issue I have: I'm changing the DataSource for the BatchUploader to use a user-chosen import-profile like described here.
Depending on the Selection the DataSource changes. This is not possible in an already drawn BatchUploader.
Most likely there is no technical reason for this until the "Upload" button is really hit (?)

Could you make it possible to change the UploadDataSource until "Upload" is hit? My (working) workaround is to destroy and recreate the BatchUploader for every selection change.

This is minor and due to the changes related to my workaround also all other issues from post #1 are minor now to me, as well.

Best regards
Blama

[Isomorphic]

Sorry, for various reasons this is not an easy change and this is a really obscure use case. Re-creating the BatchUploader is the right approach here.

[Isomorphic]

On your 4 original points:

1) we see this and will add a fix for it shortly.

2) we probably *will* add an autoChild API to override settings on the uploadItem - but note that you will still not be able to have the uploadItem fill arbitrary space horizontally - the browser's FILE input is non-resizeable.

3) actually, your problem here is just that your button is being displayed in the left of a very wide column - you want something like setColWidths(120, "*", 100)

4) this will be fixed shortly

[Isomorphic]

We've resolved #4 in SGWT 5.1p/SC 10.1p and newer. The fix will be in the nightly builds dated 2016-04-07 and beyond.

[Blama]

Hi Isomorphic,

creating a unrelated testcase for BatchUploader here, I noticed that #1 is still open (although minor).

Best regards
Blama

[Isomorphic]

Yes, thanks for the reminder - we'll whack it this week.

[Isomorphic]

Actually, what you're seeing here isn't really a bug. It's a result of focus, which is initially in the button you clicked to open the window - focus doesn't change when you click elements of the window itself, like the header and body, so if you then press Escape, the focus handle is still the button - the window doesn't get an Escape keyPress event.

You just need to focus() or setAutoFocus(true) on your Window, so it gets subsequent keypresses.

[Isomorphic]

By way of a follow-up - we misled you a little, by mentioning autoFocus, which is internal and undocumented.

We think it's important for application designers to think about where to place focus when a dialog is shown, so we don't intend to try to guess at what a good focus target would be.

You can fix the problem you mentioned, where clicking in the main part of the window doesn't enable Escape key-presses, by just calling Window.setCanFocus(true).

However, if you want to make sure that clicking the button to open the modal window, and then immediately pressing escape, will dismiss the window without the user clicking anything else, you need to also call window.focus() - or, wait for tomorrow's build and call focus() on your BatchUploader, which will now focus in its first child (the File chooser button).

[Blama]

Hi Isomorphic,

calling myWindow.setCanFocus(true) and then myWindow.focus() after myWindow.show() did solve the issue for me.

Thank you & Best regards
Blama

[Blama]

Hi Isomorphic,

all issues from this thread are finished now (#3 was a usage error as you wrote), thanks a lot.

Best regards
Blama