Problem with LinkItem (does not work as expected, no textbox when enabled)

[Blama]

Hi Isomorphic,

can you reproduce the errors from the last post and think these are bugs?

Best regards,
Blama

[Blama]

Hello Isomorphic,

thanks for the explanation. I think I'm fine with calling setLinkTitle() in my DSCallback for now.

Also thanks for the hint on readOnlyTextBoxStyle, which does exactly what I need. While experimenting with it I found these issues with LinkItem.

Please see this testcase based on BuiltInDS:

BuiltInDS.java

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
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.PageKeyHandler;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
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.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 DynamicForm boundForm;
	private LinkItem scientificName;
	private LinkItem commonName;
	private LinkItem status;
	private SpinnerItem lifeSpan;
	private IButton toogleBtn;

	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();
			}
		});

		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);

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

		scientificName = new LinkItem("scientificName");
		scientificName.setReadOnlyTextBoxStyle("textItem");
		scientificName.setReadOnlyDisplay(ReadOnlyDisplayAppearance.STATIC);

		commonName = new LinkItem("commonName");
		commonName.setReadOnlyTextBoxStyle("textItem");
		commonName.setReadOnlyDisplay(ReadOnlyDisplayAppearance.READONLY);

		lifeSpan = new SpinnerItem("lifeSpan");

		status = new LinkItem("status");

		boundForm.setFields(scientificName, commonName, lifeSpan, status);

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

		toogleBtn = new IButton("Toggle canEdit");
		toogleBtn.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				if (boundForm.getCanEdit()) {
					boundForm.setCanEdit(false);

					scientificName.setCanEdit(boundForm.getCanEdit());
					commonName.setCanEdit(boundForm.getCanEdit());
					status.setCanEdit(boundForm.getCanEdit());
				} else {
					boundForm.setCanEdit(true);

					scientificName.setCanEdit(boundForm.getCanEdit());
					commonName.setCanEdit(boundForm.getCanEdit());
					status.setCanEdit(boundForm.getCanEdit());
				}
				boundForm.markForRedraw("Toggled canEdit");
			}
		});

		vLayout.setMembers(boundForm, toogleBtn);
		vLayout.draw();
	}
}

Observations / Bugs:

• commonName and status are not centred when setCanEdit=false (related to this?)
• scientificName changes its (inner) size when setCanEdit=false
• commonName should look like status, as according to the FormItem.setReadOnlyTextBoxStyle-javadocs, this setting applies only to readOnlyDisplay=static-items
• LinkItem.setReadOnlyDisplay()-javadocs state "LinkItems are, by default, canEdit: false", which is an information that should also be present in the general LinkItem-class javadocs, as this affects DynamicForm.setCanEdit(true) in an unexpected way and inherited FormItem.setCanEdit() states a default value of null. Until I found the additional documentation I thought it was a bug.

Best regards,
Blama

[Isomorphic]

Part 1):
Two new APIs (setLinkURLFormatter(LinkURLFormatter), setLinkTitleFormatter(LinkTitleFormatter)), or one new and reusing setValueFormatter(FormItemValueFormatter) for one of the above.
I can't get it to work otherwise with Databound items; my usecase:
"user1@domain.com" in DB, I want to link to "mailto:user1@domain.com" and display "user1@domain.com" as link.
"user2@domain.com" in DB, I want to link to "mailto:user2@domain.com" and display "user2@domain.com" as link.

Can you do that with just the existing setLinkTitle() / setValue()?

The result standard valueFormatter will be applied to the link target href, so if your item is editing a database record with value "user1@domain.com", you can have a standard valueFormatter to add the "mailto://" to the beginning.
For the link title, we only have setLinkTitle() to set the title to some static string - no dynamic linkTitleFormatter, so you'd have to actually update the link title explicitly to reflect the underlying data value.

Adding a linkTitleFormatter or similar would be something we could add as a feature - probably a Feature Sponsorship. Let us know if you'd like us to look at what's involved to do this (it would likely be a fairly quick feature to add).

On the second issue - this is something you'd achieve by styling. Setting readOnlyTextBoxStyle to the desired style ("textItem", to match a standard TextItem) would be a good starting point.

[Blama]

Hi Isomorphic,

thanks for the hint on the difference of setCanEdit(false) / setDisabled(true).

My issue consists of two parts:

Part 1):
Two new APIs (setLinkURLFormatter(LinkURLFormatter), setLinkTitleFormatter(LinkTitleFormatter)), or one new and reusing setValueFormatter(FormItemValueFormatter) for one of the above.
I can't get it to work otherwise with Databound items; my usecase:
"user1@domain.com" in DB, I want to link to "mailto:user1@domain.com" and display "user1@domain.com" as link.
"user2@domain.com" in DB, I want to link to "mailto:user2@domain.com" and display "user2@domain.com" as link.

Can you do that with just the existing setLinkTitle() / setValue()?


Part 2):
As options when in setCanEdit(false) mode:

1. As it currently is
2. Show the <a>-link (underlined by the browsers default css) in a setCanEdit(false)-TextItem

This is to have the FormItem use the same amount of space as before and to fit perfectly to the design of my TextItems above and below.
I'm pretty sure I could fake this with an own setCanEdit(false)-TextItem, FormItem.addClickHandler() and some CSS, but then I don't need LinkItem at all and would be using a javascript-link instead of an <a>-link, that does display its target in the browser's status bar.

Best regards,
Blama

[Isomorphic]

Hi Blama
There is actually a difference between explicit "canEdit" and disabled. If you call formItem.setCanEdit(...) on a linkItem you'll see in canEdit:true mode it shows as an editable TextItem and if set to canEdit:false, it shows a link.

The setLinkTitle() method gives you a way to display a title for the Link which differs from the "value" of the item.

You can set target to "javascript" and specify a click handler for custom click handling rather than just opening a link.

Not sure if we fully follow the proposed enhancements but if you just want a Text-box appearance around your clickable link, or you want the text to be underlined in the text box while in edit mode, you could specify custom css styles to achieve this.

Please let us know if this won't give you enough to do what you need

Regards
Isomorphic Software

[Blama]

Hi Isomorphic,

please see this modified BuiltInDS.java:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.Criteria;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
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.FormItemValueFormatter;
import com.smartgwt.client.widgets.form.fields.FormItem;
import com.smartgwt.client.widgets.form.fields.LinkItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
	private DynamicForm boundForm;
	private IButton toogleBtn;

	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();
			}
		});

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

		TextItem commonName = new TextItem("commonName");
		MyLinkItem lifeSpan = new MyLinkItem("lifeSpan", Type.Telephone);
		MyLinkItem status = new MyLinkItem("status", Type.Mail);

		boundForm.setFields(commonName, lifeSpan, status);
		boundForm.fetchData(new Criteria("scientificName", "Loxodonta africana"));

		toogleBtn = new IButton("Toggle disabled");
		toogleBtn.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				boundForm.setDisabled(!boundForm.getDisabled());
				boundForm.markForRedraw("toggled disabled");
			}
		});

		vLayout.setMembers(boundForm, toogleBtn);
		vLayout.draw();
	}

	public enum Type {
		Mail("mailto:"),
		Telephone("tel:"),
		Skype("callto:");

		private String protocol;

		private Type(String protocol) {
			this.protocol = protocol;
		}

		public String getProtocol() {
			return this.protocol;
		}
	}

	public class MyLinkItem extends LinkItem {

		public MyLinkItem(String name, final Type type) {
			super(name);

			setValueFormatter(new FormItemValueFormatter() {
				@Override
				public String formatValue(Object value, Record record, DynamicForm form, FormItem item) {
					if (value != null && value.toString().length() > 0)
						return isDisabled() ? type.getProtocol() + value.toString() : value.toString();
					return null;
				}
			});
		}
	}
}

Even when enabled, it does not show the TextItem-Box, but the link. This is also true for the showcase sample form_controls_various. This is contrary to what the Javadocs say.
Please also note that in the sample, the text "LinkItem" is not aligned with the text "Click Me" (both in Enterprise and Simplicity skin).

I'd like to achieve the following:

• Link (<a> or javascript, <a> preferred) when disabled
• Input (TextItem) when enabled
• Link on click, but other text displayed (e.g. DB-entry: "name@domain.com", link to "mailto:name@domain.com" displayed text: "name@domain.com")

As enhancement, if possible:

• For design reasons (I have TextItems above and below) I'd like this better when disabled: A disabled TextItem with a clickable link inside, with different styles (enabled: normal text, disabled: underlined text)

I think this could be solved the best with two new APIs (setLinkURLFormatter(LinkURLFormatter), setLinkTitleFormatter(LinkTitleFormatter)), or reusing setValueFormatter(FormItemValueFormatter) for one of those.
I think it does not work with setLinkTitle(String) when using DataBound items.

I'm using v9.1p_2014-07-22 in FF26 Dev Mode and the online client showcase (also v9.1p_2014-07-22).

Best regards,
Blama