Question

我正在使用下面的代码运行一个需要一段时间才能加载的函数。我的问题是，没有经过很多修改，是否有一种简单的方法可以添加像clienthandler这样的东西，以便在运行函数时它会说“加载......？”这样的内容。

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

Answer 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;
};

Answer 2

如果您将图像添加到状态标签中可能会更加愉快，以下是使用透明动画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。

添加ClientHandler，例如将加载栏添加到ServerClickHandler

2 个答案: