EditTextCell FieldUpdater宽度 [英] EditTextCell FieldUpdater width
本文介绍了EditTextCell FieldUpdater宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
EditTextCell febCell = new EditTextCell（ ）;
列< DTO，String> febColumn = new Column< DTO，String>（febCell）{
@Override
public String getValue（DTO object）{
return（String.valueOf（object.getFeb（）））;
}
};
febColumn.setFieldUpdater（new FieldUpdater< DTO，String>（）{
public void update（int index，DTO object，String value）{
System.out.println（index = + index +resourceId =+ object.getId（）+feb =+ value）;
}
}）;
febColumn.setHorizontalAlignment（HasHorizontalAlignment.ALIGN_LOCALE_END）;
cellTable.addColumn（febColumn，Feb）;
cellTable.setColumnWidth（febColumn，3，Unit.PCT）;
一切正常，但当我点击可编辑字段时，会出现一个非常大的文本框。那么，我该如何定制这个小部件来编辑数据？
如果我设置了PX的宽度而不是PCT，就像
cellTable.setColumnWidth（febColumn，25，Unit.PX）;
单元格在编辑时不会爆炸，但内部文本框仍具有相同的宽度和a长字符串值隐藏在右侧。
好的。可能我需要为每种EditTextCell重新创建轮子：
MyEditTextCell扩展AbstractEditableCell< String，MyEditTextCell.ViewData> ...
interface MyTemplate extends SafeHtmlTemplates {
@Template（< input type = \text \value = \{0} \tabindex = \-1 \size = \{1} \maxlength = \{1} \style = \{2} \>< / input>）
SafeHtml输入（字符串值，整数maxLength，字符串样式）;
}
...
@Override public void render（com.google.gwt.cell.client.Cell.Context context，
String value，SafeHtmlBuilder sb）{.. 。
sb.append（template.input（text，maxLegth，style））;
然后使用这个小部件：
MyEditTextCell febCell = new MyEditTextCell（SimpleSafeHtmlRenderer.getInstance（），4，width：35px;）;
欢迎您提供任何建议。 解决方案
重新实现解决方案。请注意 setInputWidth 方法。
public class JustInPlaceEditCell extends AbstractEditableCell< String ，JustInPlaceEditCell.ViewData> {
interface Template extends SafeHtmlTemplates {
@Template（< input type = \text \value = \{0} \tabindex = \ -1 \size = \{1} \>< / input>）
SafeHtml input（String value，int size）;
}
/ **
*此单元格使用的视图数据对象。我们需要存储文本和
*状态，因为这个单元格在编辑模式下呈现不同。如果我们确实
*没有存储编辑状态，那么使用视图数据刷新单元格将总是
*让我们编辑状态，渲染一个文本框而不是新文本
*字符串。
* /
static class ViewData {
private boolean isEditing;
/ **
*如果属实，这不是第一次编辑。
* /
private boolean isEditingAgain;
/ **
*跟踪编辑开始时的原始值，这可能是
*编辑后的值，而不是实际值。
* /
private String original;
私人字符串文本;
/ **
*在编辑模式下构建一个新的ViewData。
*
* @param输入要编辑的文本
* /
public ViewData（String text）{
this.original = text;
this.text = text;
this.isEditing = true;
this.isEditingAgain = false;
$ b @Override
public boolean equals（Object o）{
if（o == null）{
return false;
}
ViewData vd =（ViewData）o;
return equalsOrBothNull（original，vd.original）
&& equalsOrBothNull（text，vd.text）&& isEditing == vd.isEditing
&& isEditingAgain == vd.isEditingAgain;
}
public String getOriginal（）{
return original;
}
public String getText（）{
return text;
$
$ b @Override
public int hashCode（）{
return original.hashCode（）+ text.hashCode（）
+ Boolean.valueOf（ isEditing）.hashCode（）* 29
+ Boolean.valueOf（isEditingAgain）.hashCode（）;
}
public boolean isEditing（）{
return isEditing;
}
public boolean isEditingAgain（）{
return isEditingAgain;
}
public void setEditing（boolean isEditing）{
boolean wasEditing = this.isEditing;
this.isEditing = isEditing;
//这是后续的编辑，所以从我们离开的地方开始。
if（！wasEditing&& isEditing）{
isEditingAgain = true;
original = text;
}
}
public void setText（String text）{
this.text = text;
private boolean equalsOrBothNull（Object o1，Object o2）{
return（o1 == null）？ o2 == null：o1.equals（o2）;
}
}
私有静态模板模板;
private int inputWidth = 20;
public int getInputWidth（）{
return inputWidth;
}
public void setInputWidth（int inputWidth）{
this.inputWidth = inputWidth;
}
private final SafeHtmlRenderer< String>渲染器;
/ **
*构建一个新的EditTextCell，它将使用
* {@link com.google.gwt.text.shared.SimpleSafeHtmlRenderer}。
* /
public JustInPlaceEditCell（）{
this（SimpleSafeHtmlRenderer.getInstance（））;
}
/ **
*构建一个新的EditTextCell，它将使用给定的SafeHtmlRenderer。
*
* @param渲染器a SafeHtmlRenderer SafeHtmlRenderer< String>实例
* /
public JustInPlaceEditCell（SafeHtmlRenderer< String>渲染器）{
super click，keyup，keydown，blur）;
if（template == null）{
template = GWT.create（Template.class）;
}
if（renderer == null）{
throw new IllegalArgumentException（renderer == null）;
}
this.renderer = renderer;
$ b @Override
public boolean isEditing（Context context，Element parent，String value）{
ViewData viewData = getViewData（context.getKey（））;
返回viewData == null？ false：viewData.isEditing（）;
$ b @Override
public void onBrowserEvent（Context context，Element parent，String value，
NativeEvent event，ValueUpdater< String> valueUpdater）{
Object key = context.getKey（）;
ViewData viewData = getViewData（key）;
if（viewData！= null&& viewData.isEditing（））{
//处理编辑事件。
editEvent（context，parent，value，viewData，event，valueUpdater）;
} else {
String type = event.getType（）;
int keyCode = event.getKeyCode（）;
boolean enterPressed =keyup.equals（type）
&& keyCode == KeyCodes.KEY_ENTER;
if（click.equals（type）|| enterPressed）{
//进入编辑模式。
if（viewData == null）{
viewData = new ViewData（value）;
setViewData（key，viewData）;
} else {
viewData.setEditing（true）;
}
edit（context，parent，value）;
}
}
}
@Override
public void render（Context context，String value，SafeHtmlBuilder sb）{
// Get视图数据。
Object key = context.getKey（）;
ViewData viewData = getViewData（key）;
if（viewData！= null&&！viewData.isEditing（）&& amp; value！= null
&& value.equals（viewData.getText（）））{
clearViewData（key）;
viewData = null;
}
if（viewData！= null）{
String text = viewData.getText（）;
SafeHtml html = renderer.render（text）;
if（viewData.isEditing（））{
//注意模板不会将SafeHtml特别对待
sb.append（template.input（html.asString（），inputWidth））;
} else {
//用户按下回车键，但查看数据仍然存在。
sb.append（html）;
}
} else if（value！= null）{
SafeHtml html = renderer.render（value）;
sb.append（html）;
$ b @Override
public boolean resetFocus（Context context，Element parent，String value）{
if（isEditing（context，parent，值））{
getInputElement（parent）.focus（）;
返回true;
}
返回false;
}
/ **
*将单元格转换为编辑模式。
*
* @param上下文单元格的{@link上下文}
* @param父元素
* @param值当前值
* /
protected void edit（Context context，Element parent，String value）{
setValue（context，parent，value）;
InputElement input = getInputElement（parent）;
input.focus（）;
input.select（）;
}
/ **
*将单元格转换为非编辑模式。
*
* @param context单元格的上下文
* @param父元素元素
* @param值与单元格关联的值
* /
private void cancel（Context context，Element parent，String value）{
clearInput（getInputElement（parent））;
setValue（context，parent，value）;
}
/ **
*从输入元素中选择清除。如果选择不是
*，输入从DOM中移除后，Firefox和IE都会触发虚假的
* onblur事件。
*
* @param输入输入元素
* /
私有本地无效clearInput（元素输入）/ * - {
if（input.selectionEnd）
input.selectionEnd = input.selectionStart;
else if（$ doc.selection）
$ doc.selection.clear（）;
} - * /;
/ **
*提交当前值。
*
* @param上下文单元格的上下文
* @param父元素元素
* @param viewData {@link ViewData}对象
* @ param valueUpdater {@link ValueUpdater}
* /
private void commit（Context context，Element parent，ViewData viewData，
ValueUpdater< String> valueUpdater）{
String value = updateViewData （parent，viewData，false）;
clearInput（getInputElement（parent））;
setValue（context，parent，viewData.getOriginal（））;
if（valueUpdater！= null）{
valueUpdater.update（value）;
private void editEvent（Context context，Element parent，String value，$ b $ ViewData viewData，NativeEvent event，ValueUpdater< String> valueUpdater）{
String type = event.getType（）;
boolean keyUp =keyup.equals（type）;
boolean keyDown =keydown.equals（type）;
if（keyUp || keyDown）{
int keyCode = event.getKeyCode（）;
if（keyUp& keyCode == KeyCodes.KEY_ENTER）{
//提交更改。
commit（context，parent，viewData，valueUpdater）;
} else if（keyUp&& keyCode == KeyCodes.KEY_ESCAPE）{
//取消编辑模式。
String originalText = viewData.getOriginal（）;
if（viewData.isEditingAgain（））{
viewData.setText（originalText）;
viewData.setEditing（false）;
} else {
setViewData（context.getKey（），null）;
}
cancel（context，parent，value）;
} else {
//更新每个键上视图数据中的文本。
updateViewData（parent，viewData，true）;
}
} else if（blur.equals（type））{
//提交更改。确保我们模糊输入元素和
//不是父元素本身。
EventTarget eventTarget = event.getEventTarget（）;
if（Element.is（eventTarget））{
Element target = Element.as（eventTarget）;
if（input.equals（target.getTagName（）。toLowerCase（）））{
commit（context，parent，viewData，valueUpdater）;
}
}
}
}
/ **
*获取编辑模式下的输入元素。
* /
private InputElement getInputElement（Element parent）{
return parent.getFirstChild（）。< InputElement> cast（）;
}
/ **
*根据当前值更新视图数据。
*
* @param父母元素
* @param viewData更新
的@Data ViewData对象@param isEditing如果处于编辑模式，则为true
* @返回新值
* /
private String updateViewData（Element parent，ViewData viewData，
boolean isEditing）{
InputElement input =（InputElement）parent.getFirstChild（）;
String value = input.getValue（）;
viewData.setText（value）;
viewData.setEditing（isEditing）;
返回值;
}
}
How can I set the width of the text-box when the field is editing?
EditTextCell febCell = new EditTextCell();
Column<DTO, String> febColumn = new Column<DTO, String>(febCell){
@Override
public String getValue(DTO object) {
return (String.valueOf(object.getFeb()));
}
};
febColumn.setFieldUpdater(new FieldUpdater<DTO, String>() {
public void update(int index, DTO object, String value) {
System.out.println("index="+index+" resourceId="+object.getId()+" feb="+value);
}
});
febColumn.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LOCALE_END);
cellTable.addColumn(febColumn, "Feb");
cellTable.setColumnWidth(febColumn, 3, Unit.PCT);
Everything is working well, but when I do click on the editable field a very big text box appears. So, how can I customize this widget for editing the data?
If I do set the width in PX instead of PCT like
cellTable.setColumnWidth(febColumn, 25, Unit.PX);
the cell does not explode while editing, but the inner text box still has the same long width and a long string value hides out behind the right side.
OK. Probably I need reinvent to the wheel for each kind of EditTextCell like that:
MyEditTextCell extends AbstractEditableCell<String, MyEditTextCell.ViewData> ...
interface MyTemplate extends SafeHtmlTemplates {
@Template("<input type=\"text\" value=\"{0}\" tabindex=\"-1\" size=\"{1}\" maxlength=\"{1}\" style=\"{2}\"></input>")
SafeHtml input(String value, Integer maxLength, String style);
}
...
@Override public void render(com.google.gwt.cell.client.Cell.Context context,
String value, SafeHtmlBuilder sb) {...
sb.append(template.input(text, maxLegth, style));
And use the widget like that:
MyEditTextCell febCell = new MyEditTextCell(SimpleSafeHtmlRenderer.getInstance(), 4, "width:35px;");
Any ideas are welcome.
解决方案
Solution with reimplementation. Put attention at setInputWidth method.
public class JustInPlaceEditCell extends AbstractEditableCell<String, JustInPlaceEditCell.ViewData> {
interface Template extends SafeHtmlTemplates {
@Template("<input type=\"text\" value=\"{0}\" tabindex=\"-1\" size=\"{1}\"></input>")
SafeHtml input(String value, int size);
}
/**
* The view data object used by this cell. We need to store both the text and
* the state because this cell is rendered differently in edit mode. If we did
* not store the edit state, refreshing the cell with view data would always
* put us in to edit state, rendering a text box instead of the new text
* string.
*/
static class ViewData {
private boolean isEditing;
/**
* If true, this is not the first edit.
*/
private boolean isEditingAgain;
/**
* Keep track of the original value at the start of the edit, which might be
* the edited value from the previous edit and NOT the actual value.
*/
private String original;
private String text;
/**
* Construct a new ViewData in editing mode.
*
* @param text the text to edit
*/
public ViewData(String text) {
this.original = text;
this.text = text;
this.isEditing = true;
this.isEditingAgain = false;
}
@Override
public boolean equals(Object o) {
if (o == null) {
return false;
}
ViewData vd = (ViewData) o;
return equalsOrBothNull(original, vd.original)
&& equalsOrBothNull(text, vd.text) && isEditing == vd.isEditing
&& isEditingAgain == vd.isEditingAgain;
}
public String getOriginal() {
return original;
}
public String getText() {
return text;
}
@Override
public int hashCode() {
return original.hashCode() + text.hashCode()
+ Boolean.valueOf(isEditing).hashCode() * 29
+ Boolean.valueOf(isEditingAgain).hashCode();
}
public boolean isEditing() {
return isEditing;
}
public boolean isEditingAgain() {
return isEditingAgain;
}
public void setEditing(boolean isEditing) {
boolean wasEditing = this.isEditing;
this.isEditing = isEditing;
// This is a subsequent edit, so start from where we left off.
if (!wasEditing && isEditing) {
isEditingAgain = true;
original = text;
}
}
public void setText(String text) {
this.text = text;
}
private boolean equalsOrBothNull(Object o1, Object o2) {
return (o1 == null) ? o2 == null : o1.equals(o2);
}
}
private static Template template;
private int inputWidth = 20;
public int getInputWidth() {
return inputWidth;
}
public void setInputWidth(int inputWidth) {
this.inputWidth = inputWidth;
}
private final SafeHtmlRenderer<String> renderer;
/**
* Construct a new EditTextCell that will use a
* {@link com.google.gwt.text.shared.SimpleSafeHtmlRenderer}.
*/
public JustInPlaceEditCell() {
this(SimpleSafeHtmlRenderer.getInstance());
}
/**
* Construct a new EditTextCell that will use a given {@link SafeHtmlRenderer}.
*
* @param renderer a {@link SafeHtmlRenderer SafeHtmlRenderer<String>} instance
*/
public JustInPlaceEditCell(SafeHtmlRenderer<String> renderer) {
super("click", "keyup", "keydown", "blur");
if (template == null) {
template = GWT.create(Template.class);
}
if (renderer == null) {
throw new IllegalArgumentException("renderer == null");
}
this.renderer = renderer;
}
@Override
public boolean isEditing(Context context, Element parent, String value) {
ViewData viewData = getViewData(context.getKey());
return viewData == null ? false : viewData.isEditing();
}
@Override
public void onBrowserEvent(Context context, Element parent, String value,
NativeEvent event, ValueUpdater<String> valueUpdater) {
Object key = context.getKey();
ViewData viewData = getViewData(key);
if (viewData != null && viewData.isEditing()) {
// Handle the edit event.
editEvent(context, parent, value, viewData, event, valueUpdater);
} else {
String type = event.getType();
int keyCode = event.getKeyCode();
boolean enterPressed = "keyup".equals(type)
&& keyCode == KeyCodes.KEY_ENTER;
if ("click".equals(type) || enterPressed) {
// Go into edit mode.
if (viewData == null) {
viewData = new ViewData(value);
setViewData(key, viewData);
} else {
viewData.setEditing(true);
}
edit(context, parent, value);
}
}
}
@Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
// Get the view data.
Object key = context.getKey();
ViewData viewData = getViewData(key);
if (viewData != null && !viewData.isEditing() && value != null
&& value.equals(viewData.getText())) {
clearViewData(key);
viewData = null;
}
if (viewData != null) {
String text = viewData.getText();
SafeHtml html = renderer.render(text);
if (viewData.isEditing()) {
// Note the template will not treat SafeHtml specially
sb.append(template.input(html.asString(), inputWidth));
} else {
// The user pressed enter, but view data still exists.
sb.append(html);
}
} else if (value != null) {
SafeHtml html = renderer.render(value);
sb.append(html);
}
}
@Override
public boolean resetFocus(Context context, Element parent, String value) {
if (isEditing(context, parent, value)) {
getInputElement(parent).focus();
return true;
}
return false;
}
/**
* Convert the cell to edit mode.
*
* @param context the {@link Context} of the cell
* @param parent the parent element
* @param value the current value
*/
protected void edit(Context context, Element parent, String value) {
setValue(context, parent, value);
InputElement input = getInputElement(parent);
input.focus();
input.select();
}
/**
* Convert the cell to non-edit mode.
*
* @param context the context of the cell
* @param parent the parent Element
* @param value the value associated with the cell
*/
private void cancel(Context context, Element parent, String value) {
clearInput(getInputElement(parent));
setValue(context, parent, value);
}
/**
* Clear selected from the input element. Both Firefox and IE fire spurious
* onblur events after the input is removed from the DOM if selection is not
* cleared.
*
* @param input the input element
*/
private native void clearInput(Element input) /*-{
if (input.selectionEnd)
input.selectionEnd = input.selectionStart;
else if ($doc.selection)
$doc.selection.clear();
}-*/;
/**
* Commit the current value.
*
* @param context the context of the cell
* @param parent the parent Element
* @param viewData the {@link ViewData} object
* @param valueUpdater the {@link ValueUpdater}
*/
private void commit(Context context, Element parent, ViewData viewData,
ValueUpdater<String> valueUpdater) {
String value = updateViewData(parent, viewData, false);
clearInput(getInputElement(parent));
setValue(context, parent, viewData.getOriginal());
if (valueUpdater != null) {
valueUpdater.update(value);
}
}
private void editEvent(Context context, Element parent, String value,
ViewData viewData, NativeEvent event, ValueUpdater<String> valueUpdater) {
String type = event.getType();
boolean keyUp = "keyup".equals(type);
boolean keyDown = "keydown".equals(type);
if (keyUp || keyDown) {
int keyCode = event.getKeyCode();
if (keyUp && keyCode == KeyCodes.KEY_ENTER) {
// Commit the change.
commit(context, parent, viewData, valueUpdater);
} else if (keyUp && keyCode == KeyCodes.KEY_ESCAPE) {
// Cancel edit mode.
String originalText = viewData.getOriginal();
if (viewData.isEditingAgain()) {
viewData.setText(originalText);
viewData.setEditing(false);
} else {
setViewData(context.getKey(), null);
}
cancel(context, parent, value);
} else {
// Update the text in the view data on each key.
updateViewData(parent, viewData, true);
}
} else if ("blur".equals(type)) {
// Commit the change. Ensure that we are blurring the input element and
// not the parent element itself.
EventTarget eventTarget = event.getEventTarget();
if (Element.is(eventTarget)) {
Element target = Element.as(eventTarget);
if ("input".equals(target.getTagName().toLowerCase())) {
commit(context, parent, viewData, valueUpdater);
}
}
}
}
/**
* Get the input element in edit mode.
*/
private InputElement getInputElement(Element parent) {
return parent.getFirstChild().<InputElement>cast();
}
/**
* Update the view data based on the current value.
*
* @param parent the parent element
* @param viewData the {@link ViewData} object to update
* @param isEditing true if in edit mode
* @return the new value
*/
private String updateViewData(Element parent, ViewData viewData,
boolean isEditing) {
InputElement input = (InputElement) parent.getFirstChild();
String value = input.getValue();
viewData.setText(value);
viewData.setEditing(isEditing);
return value;
}
}
这篇关于EditTextCell FieldUpdater宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
