商店和检索可乘控件的实例的标识符 [英] Store & retrieve the identifiers of a multipliable widget's instances

问题描述

目的是随时仅通过最后一个删除按钮仅删除最后一行.

The aim is to remove only the last row at any time and only by the last remove button.

有一个用户界面，它是同一行的乘法.行数由添加"和"删除"按钮也是该行的元素.问题在于，隐藏的小部件(用于每行，通过存储实例的行号来区分实例)存储的是最后一个相同的编号.除了第一个(0)隐藏的小部件之外，该小部件存储了正确的数字(0).我在哪里错过了重点?应该如何解决?

There is a user interface which building up as a multiplication of the same row. The number of rows are controlled by 'Add' & 'Remove' buttons which are also elements of the row. The problem is that the hidden widgets - that are applied for each row to distinguish the instances by storing their row numbers - are storing the very same number which is the last one. Except the first (0) hidden widget which stores the proper number (0). Where am I missing the point? How should this be resolved?

由于删除按钮有两个不同的用途(此处未详述)，我们使用cacheService将最后一行与所有其他行区分开.任何时候都只应删除最后一行.

As per the remove buttons have two different purposes (not detailed here), we use a cacheService to distinguish the last row from all the others. Only the last row should be removed at any time.

 var cache = CacheService.getPrivateCache();

我们清除缓存并创建第一个实例

we clear the cache and create the first instance

function doGet() {
  var app = UiApp.createApplication();
  app.add(app.createVerticalPanel().setId('mainContainer'));
  cache.removeAll([]);
  ui(0);
  cache.put('numberOfInstances',0);
  return app; }

每个实例由一个水平面板保存，该面板包含上述隐藏的小部件，一个通知实例编号的标签以及添加和添加"标记.删除按钮.

each instance is held by a horizontal panel which contains the mentioned hidden widget, a label which informs about the instance number, and the Add & Remove buttons.

function ui(instance) {
  var app = UiApp.getActiveApplication();
  var eventContainer = app.createHorizontalPanel()
      .setId('eventContainer' + instance);
  var instanceContainer = app.createHidden('instanceContainer',instance);
  var showInstance = app.createLabel(instance)
      .setId('showInstance' + instance);
  var addButton = app.createButton('Add')
      .setId('add' + instance)
      .addClickHandler(app.createClientHandler()
                       .forEventSource().setEnabled(false)) //avoiding multiple click during server response
      .addClickHandler(app.createServerHandler('add')
                       .addCallbackElement(instanceContainer));
  var removeButton = app.createButton('X')
      .addClickHandler(app.createServerHandler('remove')
                       .addCallbackElement(instanceContainer));
  app.getElementById('mainContainer')
    .add(eventContainer
         .add(instanceContainer)
         .add(showInstance)
         .add(addButton)
         .add(removeButton));
  return app; }

和事件处理...

function add(inst) {
  var app = UiApp.getActiveApplication();
  var instance = Number(inst.parameter.instanceContainer);
  ui(instance+1);
  cache.put('numberOfInstances',instance+1);
  return app; }


function remove(inst) {
  var app = UiApp.getActiveApplication();
  var instance = Number(inst.parameter.instanceContainer);
  var numberOfInstances = cache.get('numberOfInstances')
  if( (instance != 0) && (instance = numberOfInstances) ) {
    app.getElementById('mainContainer').remove(app.getElementById('eventContainer' + instance));
    cache.put('numberOfInstances',instance-1);
    app.getElementById('add' + (instance-1)).setEnabled(true); } //avoiding multiple click during server response
  return app; }

目的是随时仅通过最后一个删除按钮仅删除最后一行.

The aim is to remove only the last row at any time and only by the last remove button.

非常感谢.

推荐答案

为什么不像在添加"按钮上那样简单地使用clientHandler?您可以定位到前面的删除"按钮，并在每次创建新按钮时将其禁用，并在每次删除一行时更改/更新.

Why don't you simply use a clientHandler just as you did on the 'add' button? You could target the preceding 'remove' button and disable it each time you create a new one and change /update each time you remove one row.

我可以为您提供一些建议，可以随时看一下，我对方法进行了一些更改，但是它是可行的，希望您至少会发现它有趣；-)

EDIT : I can suggest you something, feel free to have a look, I changed a bit the approach but it is working and I hope you'll find it at least interesting ;-)

链接到在线测试

function doGet() {
  var app = UiApp.createApplication();

  var counter = app.createHidden().setName('counter').setId('counter').setValue('1');

  var mainContainer = app.createVerticalPanel().setId('mainContainer')
  app.add(mainContainer.add(counter));

  var event1Container = app.createHorizontalPanel()
  var showInstance = app.createLabel('1')
  var addButton = app.createButton('Add')
      .setId('add1')
      .addClickHandler(app.createClientHandler()
                       .forEventSource().setEnabled(false)) //avoiding multiple click during server response
      .addClickHandler(app.createServerHandler('add')
                       .addCallbackElement(mainContainer));
  var removeButton = app.createButton('X')
      .setId('remove1')
      .addClickHandler(app.createServerHandler('remove')
                       .addCallbackElement(mainContainer));
    mainContainer.add(event1Container
                 .add(showInstance)
                 .add(addButton)
                 .add(removeButton));
  return app; }



function add(inst) {
  var app = UiApp.getActiveApplication();
  var hiddenVal =inst.parameter.counter;
  var counterVal = Number(hiddenVal);
  var mainContainer = app.getElementById('mainContainer')
  var counter = app.getElementById('counter')
  ++ counterVal
  counter.setValue(counterVal.toString())
  var eventContainer = app.createHorizontalPanel().setId('eventContainer'+counterVal)
  var showInstance = app.createLabel(counterVal.toString())
  var addButton = app.createButton('Add')
      .setId('add'+counterVal)
      .addClickHandler(app.createClientHandler()
                       .forEventSource().setEnabled(false)) //avoiding multiple click during server response
      .addClickHandler(app.createServerHandler('add')
                       .addCallbackElement(mainContainer));
  var removeButton = app.createButton('X')
      .setId('remove'+counterVal)
      .addClickHandler(app.createServerHandler('remove')
                       .addCallbackElement(mainContainer));
    app.add(eventContainer
       .add(showInstance)
       .add(addButton)
       .add(removeButton));
 if(counterVal>1){app.getElementById('remove'+(counterVal-1)).setEnabled(false)}      
return app; }


function remove(inst) {
  var app = UiApp.getActiveApplication();
  var counterVal = Number(inst.parameter.counter);
  var counter = app.getElementById('counter')
  if(counterVal ==1) {return app}
  var maincontainer =  app.getElementById('mainContainer')
  app.getElementById('eventContainer' + counterVal).setVisible(false)
  --counterVal
  counter.setValue(counterVal.toString())
  app.getElementById('add'+counterVal).setEnabled(true)
  app.getElementById('remove'+counterVal).setEnabled(true)
  return app; 
  }

注意:我没有使用.remove(widget)，因为这是一个相当新的方法，我也不知道它是如何工作的……我稍后会对其进行测试.在此之前，我改用setVisible(false)，对此感到抱歉:-)

NOTE : I didn't make use of .remove(widget) since this is a fairly new method and I don't know exactly how it works... I'll test it later. Until then I used setVisible(false) instead, sorry about that :-)

注2:我没有使用缓存，因为隐藏的小部件足以跟踪正在发生的事情...如果需要将其用于其他用途，则可以随时将其添加回去.

Note 2 : I didn't use the cache since the hidden widget is sufficient to keep track of what is going on... if you needed it for something else then you could always add it back .

这篇关于商店和检索可乘控件的实例的标识符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！