将相同的小部件添加到两个面板引发问题 [英] Adding same widget to two panel causing issue

问题描述

我创建了两个VerticalPanel（mainVP，subVP）和一个TextBox（box）.TextBox（box）被添加到mainVP以及subVP，但我只在这里添加了mainVP到RootPanel如果我推迟了我的应用程序，虽然我已经添加了TextBox（box）到VerticalPanel（mainVP），它被添加到主Rootpanel中。
$ b

  VerticalPanel mainVP = new VerticalPanel ）; 
 VerticalPanel subVP = new VerticalPanel（）; 
 TextBox box = new TextBox（）; 
 
 mainVP.add（box）; //将文本框添加到VerticalPanel 
 subVP.add（box）; 
 
 RootPanel.get（）。add（mainVP）; // mainVP contains TextBox 
  

可以有人解释我上面的代码是如何工作的吗？

/ code>不会添加到任何内容，并且当框添加到 subVP 时，它是已从 mainVP 中移除。小部件一次只能放置一个地方。

-

（为评论发布添加更多详细信息）

这是小部件工作原理的基本假设的一部分 - 它不是可以在几个地方放在页面上的印记，而是代表一个或多个DOM元素，并将其包装起来以便于使用和重用。每个小部件都公开了一些可以侦听的事件处理程序，以及更改小部件外观的方法。

想象一下，如果页面上有两个按钮，并且您需要他们做同样的事情。在查看页面时，显然有两个按钮，虽然它们看起来相同并导致相同的操作，但它们不是同一件事。

考虑按钮在内部的工作方式 - 让我们说它有检查鼠标是否悬停，如果是的话显示工具提示或更改颜色。如果同一个窗口小部件在两个地方渲染，现在都会得到这个更改。

从API端： Widget 有一个方法 getParent（），它返回父窗口小部件。如果您可以一次向多个位置添加小部件，则无法 getParent（）或需要返回列表。

面板同样具有 indexOf ，但是如果您可以将小部件添加到多个父项，它也会跟随你可以多次将同一个小部件添加到同一个父项 - 什么是 indexOf 返回？

最后，实现为了达成这个。从Javadoc Panel.add ：

  / ** 
 *添加一个子部件。 
 * 
 *< p> 
 *< b>如何覆写此方法< / b> 
 *< / p> 
 *< p> 
 *在正确的
 *命令中必须发生几个重要的事情才能正确地向面板添加或插入Widget。并非所有这些步骤
 *都将与每个面板相关，但必须考虑所有步骤。 
 *< ol> 
 *< li>< b>验证：< / b>执行任何健全性检查以确保Panel 
 *接受一个新的Widget。示例：在插入时检查有效的索引; 
 *如果存在最大容量，则检查面板未满。< / li> 
 *< li>< b>调整重新导入：< / b>某些面板需要处理
 *的情况，其中Widget已经是该面板的子项。例如：在执行
 *重新插入时，可能需要调整索引以考虑Widget的
 *删除。请参阅{@link ComplexPanel＃adjustIndex（Widget，int）}。< / li> 
 *< li>< b> Detach Child：< / b>如果
 * any，则从其现有父级中移除Widget。大多数面板只需在
 * Widget上调用{@link Widget＃removeFromParent（）}。< / li> 
 *< li>< b>逻辑连结：< / b> Panel的任何状态变量应该是
 *更新以反映新的Widget的添加。示例：该小部件在相应索引的Panel {@link WidgetCollection}中添加了
 *。< / li> 
 *< li>< b>物理附件：< / b> Widget的元素必须直接或间接附加到面板元素的物理元素
 *中。< / li> 
 *< li>< b>采用：< / b>请致电{@link #adopt（Widget）}以最后完成添加为
 *的最后一步。< / li> 
 *< / ol> 
 *< / p> 
 * 
 * @param child要添加的小部件
 * @throws UnsupportedOperationException如果不支持此方法（大多数
 *通常表示必须调用特定的重载） 
 * see HasWidgets＃add（Widget）
 * / 
 public void add（Widget child）
  

最后，GWT中大多数面板所使用的默认实现基本上是这样（ ComplexPanel.add ）：

  //分离新的孩子。 
 child.removeFromParent（）; 
 
 //逻辑连接。 
 getChildren（）。add（child）; 
 
 //物理附加。 
 DOM.appendChild（container，child.getElement（））; 
 
 //采用。 
通过（孩子）; 
  

还有其他一些实现，但他们主要归结为这一点，在面板中。

I have created two VerticalPanel(mainVP,subVP) and one TextBox(box).TextBox(box) is added to mainVP as well as subVP but i am adding mainVP only to RootPanel here If i lauch my application nothing is visible even though i have added TextBox(box) to VerticalPanel(mainVP) which is added to main Rootpanel.

 VerticalPanel mainVP=new VerticalPanel();
 VerticalPanel subVP=new VerticalPanel();
 TextBox box=new TextBox();

 mainVP.add(box); //Textbox added to VerticalPanel
 subVP.add(box);

 RootPanel.get().add(mainVP);//mainVP contains TextBox

Can anybody explain me how the above code is working internally?

解决方案

Your panel subVP isn't added to anything, and when the box is added to subVP, it is removed from mainVP. Widgets can only be one place at a time.

--

(adding more detail for the comment posted)

This is part of the basic assumption of how a widget works - it isn't a "stamp" that can be put on the page in several places, it instead represents one or more DOM elements, and wraps them up for easier use and reuse. Each widget exposes some event handlers that you can listen to, and ways to change what the widget looks like.

Imagine if you had two buttons on the page, and you need them to do the same thing. When looking at the page, clearly there are two buttons, and while they look the same and cause the same action, they aren't the same thing.

Consider how the button might work internally - lets say it has a check to see if the mouse is hovered, and if so display a tooltip, or change the color. If the same widget is rendered in two places, both now would get this change.

From the API side: Widget has a method getParent(), which returns the parent widget. If you could add a widget to more than one place at a time, either getParent() wouldn't be possible, or it would need to return a list.

Panel likewise has indexOf, but if you could add a widget to more than one parent, it would also follow that you could add the same widget to the same parent multiple times - what would indexOf return?

Finally, implementation to achieve this. From the Javadoc for Panel.add:

/**
 * Adds a child widget.
 * 
 * <p>
 * <b>How to Override this Method</b>
 * </p>
 * <p>
 * There are several important things that must take place in the correct
 * order to properly add or insert a Widget to a Panel. Not all of these steps
 * will be relevant to every Panel, but all of the steps must be considered.
 * <ol>
 * <li><b>Validate:</b> Perform any sanity checks to ensure the Panel can
 * accept a new Widget. Examples: checking for a valid index on insertion;
 * checking that the Panel is not full if there is a max capacity.</li>
 * <li><b>Adjust for Reinsertion:</b> Some Panels need to handle the case
 * where the Widget is already a child of this Panel. Example: when performing
 * a reinsert, the index might need to be adjusted to account for the Widget's
 * removal. See {@link ComplexPanel#adjustIndex(Widget, int)}.</li>
 * <li><b>Detach Child:</b> Remove the Widget from its existing parent, if
 * any. Most Panels will simply call {@link Widget#removeFromParent()} on the
 * Widget.</li>
 * <li><b>Logical Attach:</b> Any state variables of the Panel should be
 * updated to reflect the addition of the new Widget. Example: the Widget is
 * added to the Panel's {@link WidgetCollection} at the appropriate index.</li>
 * <li><b>Physical Attach:</b> The Widget's Element must be physically
 * attached to the Panel's Element, either directly or indirectly.</li>
 * <li><b>Adopt:</b> Call {@link #adopt(Widget)} to finalize the add as the
 * very last step.</li>
 * </ol>
 * </p>
 * 
 * @param child the widget to be added
 * @throws UnsupportedOperationException if this method is not supported (most
 *           often this means that a specific overload must be called)
 * @see HasWidgets#add(Widget)
 */
public void add(Widget child)

Finally, the default implementation used by most panels in GWT is basically this at its heart (ComplexPanel.add):

// Detach new child.
child.removeFromParent();

// Logical attach.
getChildren().add(child);

// Physical attach.
DOM.appendChild(container, child.getElement());

// Adopt.
adopt(child);

There are other implementations as well, but they mostly boil down to this, in keeping with the guidelines outlined in Panel.

这篇关于将相同的小部件添加到两个面板引发问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！