0

我正在使用下面的代码来运行需要一段时间才能加载的函数。我的问题是，在没有大量修改的情况下，是否有一种简单的方法可以添加诸如客户端处理程序之类的内容，以便在运行该函数时它会说一些类似于“正在加载...？”的内容。

function doGet(e) {

  var app = UiApp.createApplication().setTitle('New app');

  var grid = app.createGrid(1, 2);
  grid.setWidget(0, 0, app.createLabel('First Name + Last Name (Case Sensitive):'));
  grid.setWidget(0, 1, app.createTextBox().setName('userName').setId('userName'));



  var panel = app.createVerticalPanel();
  panel.add(grid);
  var buttonPanel = app.createHorizontalPanel();
  var button = app.createButton('Submit');
  var submitHandler = app.createServerClickHandler('submit')
  submitHandler.addCallbackElement(grid);
  button.addClickHandler(submitHandler);
  buttonPanel.add(button);

  var clearButton = app.createButton('Clear');
  var clearHandler = app.createServerClickHandler('clear');
  clearButton.addClickHandler(clearHandler);
  buttonPanel.add(clearButton);

  var statusLabel = app.createHTML("").setId('status').setVisible(false);
  panel.add(statusLabel);

   panel.add(buttonPanel);

  app.add(panel);
  return app;
};

function clear() {
  var app = UiApp.getActiveApplication();
  app.getElementById('userName').setValue('');
  app.getElementById('status').setVisible(false)
  return app;
};
4

2 回答 2

1

确实是的。这就是客户端处理程序的用途。

function doGet(e) {

  var app = UiApp.createApplication().setTitle('New app');

  var grid = app.createGrid(1, 2);
  grid.setWidget(0, 0, app.createLabel('First Name + Last Name (Case Sensitive):'));
  grid.setWidget(0, 1, app.createTextBox().setName('userName').setId('userName'));

  /* Have the widget ready */
  var statusLabel = app.createHTML("").setId('status').setVisible(false);

  var panel = app.createVerticalPanel();
  panel.add(grid);
  var buttonPanel = app.createHorizontalPanel();
  var button = app.createButton('Submit');
  var submitHandler = app.createServerClickHandler('submit')
  submitHandler.addCallbackElement(grid);
  button.addClickHandler(submitHandler);
  buttonPanel.add(button);

  var clearButton = app.createButton('Clear');
  var clearHandler = app.createServerClickHandler('clear');
  /* Create the client handler */
  var plswait = app.createClientHandler().forTargets(statusLabel).setText('Loading...');

  clearButton.addClickHandler(clearHandler).addClickHandler(plswait);
  buttonPanel.add(clearButton);

  panel.add(statusLabel);

   panel.add(buttonPanel);

  app.add(panel);
  return app;
};

function clear() {
  var app = UiApp.getActiveApplication();
  app.getElementById('userName').setValue('');
  app.getElementById('status').setVisible(false).setText('');


  return app;
};
于 2013-06-18T03:28:50.430 回答
0

如果您将图像添加到状态标签会更令人愉快，这里是使用透明动画 gif 的示例：（只需在 Srik 的代码中替换）

  var statusLabel = ui.createHorizontalPanel().add(ui.createImage('https://dl.dropboxusercontent.com/u/211279/loading3T.gif'))
  .add(ui.createHTML("Loading...")).setId('status').setVisible(false);// Label + animated gif, the text in the HTML widget can be there from the start.

编辑：刚刚注意到 Srik 的代码中缺少一些东西...... clientHandler 应该是这样的：

  var plswait = app.createClientHandler().forTargets(statusLabel).setVisible(true);// and eventually setText(' blah blah...') if you didn't define/change it before/elsewhere

注意：现在您有了一个clientHandler，您还可以将它用于setEnabled(false)触发它的按钮以避免多次点击......只需添加.forEventSource().setEnabled(false)到您的clientHandler。

于 2013-06-18T08:29:48.573 回答