[Blama]

Hi Isomorphic,

I just retested the sample from #16 with v11.1p_2018-04-27 and it still looks the same.


Best regards
Blama

[Isomorphic]

Apologies for the delay - we'll get to this in the next few days and update here when it's fixed.

[Blama]

Hi Isomorphic,

can you have a look at this one now as well?

Thank you & Best regards
Blama

[Isomorphic]

We do see this issue, but we won't be able to get to it until after the imminent 12.0 release - we'll update here when it's fixed.

[Blama]

Hi Isomorphic,

can you have a look at the sample code from #16? It shows the issue I displayed before in #14 with a screenshot.

Best regards
Blama

[Blama]

Hi Isomorphic,

yes, please try this in the SmartClient showcase:

isc.DynamicForm.create({
    ID: "form1",
    titleOrientation: "top",
    canEdit: false,
    width: 620,
    colWidths: ["*", "*"],
    fields: [
        {name: "text", title:"Text", type:"text", hint: "A plain text field", wrapHintText: false,
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "✆",
            baseStyle: "telIcon"
        }]},
        {name: "link", title:"Link", type:"LinkItem", value:"https://forums.smartclient.com/", applyHeightToTextBox: null,
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "✆",
            baseStyle: "telIcon"
        }]}
    ]
});

Best regards
Blama

[Isomorphic]

Can you show the code for that sample? We need to see the title, column and width settings at least?

[Blama]

Hi Isomorphic,

I tried your change from #11 with v11.1p_2018-02-16, but it is not working as expected, yet.
As you can see below, the title is not longer vertically aligned and the FormItemIcon overlaps the text. But I can see that the text itself is now centered vertically.




Best regards
Blama

[Blama]

Hi Isomorphic,

OK, thank you. I'll give it a try tomorrow and report back.

Best regards
Blama

[Isomorphic]

Note that, as we said, in today's builds you'll see this issue fixed if you just remove your calls to setReadOnlyTextBoxStyle() and setApplyHeightToTextBox(true/false) and call setApplyHeightToTextBox(null) instead.

That's still true, for today's build, but from tomorrow you won't even need to call setApplyHeightToTextBox(null) because it's now the default for LinkItems - in other words, just this code will do:

final LinkItem scientificName8 = new LinkItem("scientificName8");
scientificName8.setTitle("Readonly-true-nobox");
scientificName8.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
// this line now dictates the value of shouldApplyHeightToTextBox
scientificName8.setCanEdit(true);

[Isomorphic]

We've fixed this for tomorrow's builds - the trick will be to replace your calls to setReadOnlyTextBoxStyle() and setApplyHeightToTextBox(true/false) with a single setApplyHeightToTextBox(null)

[Blama]

Hi Isomorphic,

sorry for not being clear. My aim is to have a design where:

• The bounding textBox in canEdit:true-mode is as for TextItem or SpinnerItem
• The link text in canEdit:false-mode is centered w.r.t. the FormItem-title
• I don't care so much if the item in canEdit:false-mode has a box or not, but if it has, the box should be as big as it is for TextItem/SpinnerItem.

IMHO the setApplyHeightToTextBox(true) does what I want, but here I have the issue that the link text in canEdit:false-mode is not vertically centered. This is the issue I'm reporting.

The changing of DynamicForm and FormItems at the same time is necessary, as LinkItem is canEdit:false (and not canEdit:null like other FormItems) by default, so that just calling setCanEdit(true) on the DynamicForm does not toogle the LinkItems.

Thank you & Best regards
Blama

[Isomorphic]

We're not clear on which ones you think are incorrect and why. Are you reporting a bug with dynamically changing the canEdit values of both a form and formItems simultaneously?

[Blama]

Hi Isomorphic,

I found this thread again by chance. As this is still an issue in my Application (showing an URL to edit or showing an URL to click depending on the user) I investigated and created a testcase (v11.1p_2018-01-29, Tahoe) with all permutations for LinkItem.
None of those shows the text in canEdit(false)-mode correctly - correctly in my opinion is a 30-high FormItem with "big" textBox (like SpinnerItem and TextItem in the sample) with centered text in both modes (canEdit:true/false).

BuiltInDS.java:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.Criteria;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.types.ReadOnlyDisplayAppearance;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
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.FormItem;
import com.smartgwt.client.widgets.form.fields.LinkItem;
import com.smartgwt.client.widgets.form.fields.SpinnerItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
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("95%");
        w.setHeight("95%");
        w.setMembersMargin(0);
        w.setModalMaskOpacity(70);
        w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
        w.setTitle("LinkItem content positioning when showing the link" + w.getTitle());
        w.setShowMinimizeButton(false);
        w.setIsModal(true);
        w.setShowModalMask(true);
        w.centerInPage();

        VLayout vLayout = new VLayout(10);
        DataSource ds = DataSource.get("animals");

        TextItem ti = new TextItem() {
            {
                setWidth("*");
                setHeight(30);
            }
        };
        TextItem.setDefaultProperties(ti);

        LinkItem li = new LinkItem() {
            {
                setWidth("*");
                setHeight(30);
            }
        };
        LinkItem.setDefaultProperties(li);

        SpinnerItem si = new SpinnerItem() {
            {
                setWidth("*");
                setHeight(30);
            }
        };
        SpinnerItem.setDefaultProperties(si);

        final DynamicForm boundForm = new DynamicForm();
        boundForm.setCanEdit(true);
        boundForm.setWidth(500);
        boundForm.setTitleWidth(200);
        boundForm.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
        boundForm.setDataSource(ds);

        final LinkItem scientificName = new LinkItem("scientificName");
        scientificName.setTitle("Static-false-box");
        scientificName.setReadOnlyTextBoxStyle("textItem");
        scientificName.setReadOnlyDisplay(ReadOnlyDisplayAppearance.STATIC);
        scientificName.setApplyHeightToTextBox(false);
        scientificName.setCanEdit(true);

        final LinkItem scientificName2 = new LinkItem("scientificName2");
        scientificName2.setTitle("Static-true-box");
        scientificName2.setReadOnlyTextBoxStyle("textItem");
        scientificName2.setReadOnlyDisplay(ReadOnlyDisplayAppearance.STATIC);
        scientificName2.setApplyHeightToTextBox(true);
        scientificName2.setCanEdit(true);

        final LinkItem scientificName3 = new LinkItem("scientificName3");
        scientificName3.setTitle("Readonly-false-box");
        scientificName3.setReadOnlyTextBoxStyle("textItem");
        scientificName3.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
        scientificName3.setApplyHeightToTextBox(false);
        scientificName3.setCanEdit(true);

        final LinkItem scientificName4 = new LinkItem("scientificName4");
        scientificName4.setTitle("Readonly-true-box");
        scientificName4.setReadOnlyTextBoxStyle("textItem");
        scientificName4.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
        scientificName4.setApplyHeightToTextBox(true);
        scientificName4.setCanEdit(true);

        final LinkItem scientificName5 = new LinkItem("scientificName5");
        scientificName5.setTitle("Static-false-nobox");
        scientificName5.setReadOnlyDisplay(ReadOnlyDisplayAppearance.STATIC);
        scientificName5.setApplyHeightToTextBox(false);
        scientificName5.setCanEdit(true);

        final LinkItem scientificName6 = new LinkItem("scientificName6");
        scientificName6.setTitle("Static-true-nobox");
        scientificName6.setReadOnlyDisplay(ReadOnlyDisplayAppearance.STATIC);
        scientificName6.setApplyHeightToTextBox(true);
        scientificName6.setCanEdit(true);

        final LinkItem scientificName7 = new LinkItem("scientificName7");
        scientificName7.setTitle("Readonly-false-nobox");
        scientificName7.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
        scientificName7.setApplyHeightToTextBox(false);
        scientificName7.setCanEdit(true);

        final LinkItem scientificName8 = new LinkItem("scientificName8");
        scientificName8.setTitle("Readonly-true-nobox");
        scientificName8.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);
        scientificName8.setApplyHeightToTextBox(true);
        scientificName8.setCanEdit(true);

        SpinnerItem lifeSpan = new SpinnerItem("lifeSpan");

        final TextItem status = new TextItem("status");

        boundForm.setFields(scientificName, scientificName2, scientificName3, scientificName4, scientificName5, scientificName6,
                scientificName7, scientificName8, lifeSpan, status);

        boundForm.fetchData(new Criteria("scientificName", "Loxodonta africana"));

        IButton toogleBtn = new IButton("Toggle canEdit");
        toogleBtn.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                boundForm.setCanEdit(!boundForm.getCanEdit());
                for (FormItem fi : boundForm.getFields())
                    fi.setCanEdit(boundForm.getCanEdit());
                boundForm.markForRedraw("Toggled canEdit");
            }
        });

        vLayout.setMembers(boundForm, toogleBtn);

        w.addItem(vLayout);
        w.show();
    }
}

animals.ds.xml:

<DataSource
    ID="animals"
    serverType="sql"
    tableName="animals"
    testFileName="animals.data.xml" useAnsiJoins="true" 
>
    <fields>
        <field name="commonName"      title="Animal"             type="text"/>
        <field name="scientificName"  title="Scientific Name"    type="text" primaryKey="true"  required="true" />
        <field name="scientificName2"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="scientificName3"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="scientificName4"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="scientificName5"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="scientificName6"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="scientificName7"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="scientificName8"  title="Scientific Name"    type="text" customSelectExpression="scientificName" />
        <field name="lifeSpan"        title="Life Span"          type="integer"/>
        <field name="status"          title="Endangered Status"  type="text">
            <valueMap>
                <value>Threatened</value>
                <value>Endangered</value>
                <value>Not Endangered</value>
                <value>Not currently listed</value>
                <value>May become threatened</value>
                <value>Protected</value>
            </valueMap>
        </field>
        <field name="diet"            title="Diet"               type="text"/>
        <field name="information"     title="Interesting Facts"  type="text"  length="1000"/>
        <field name="picture"         title="Picture"            type="image" detail="true"
               imageURLPrefix="/isomorphic/system/reference/inlineExamples/tiles/images/"/>
    </fields>
</DataSource>

Best regards
Blama

[Isomorphic]

Hi!
The first 2 points here:

• commonName and status are not centred when setCanEdit=false (related to this?)
• scientificName changes its (inner) size when setCanEdit=false

...are closely related. Form items support vertical alignment specifications via the setVAlign() API - however, this governs the alignment of the text box, not the text within the text-box.
When a formItem has a specified height, this can be applied to the text-box or to the cell as a whole (with the text-box being sized to fit the content) - see formItem.shouldApplyHeightToTextBox().

The reason that commonName and status are not centered by in readOnly mode is that the specified height is being applied to the text box - the text box *is* centered within the cell but nothing is forcing the cell itself to be taller.
For StaticTextItems and for items with readOnlyAppearance set to "static", we do not apply the height to the text-box, so for these the text box doesn't take up the complete available space in the cell and instead will itself be vertically centered within the cell. This is also why the scientificName item (which has it's readOnly appearance set to "static") has its text box change height when the canEdit flag is toggled.

We're not quite following the third issue [commonName should look like status...] - can you clarify what you mean?

On the last issue - we'll look at improving the documentation.

Thanks
Isomorphic Software