第 4 章 步骤 3：添加一个按钮

在这一步中，你将添加一个按钮。应用启用时，文本字段中没有文本。用户单击按钮时，应用将显示出 Anne Bonney 的字样。

编辑 piratebadge.html

...
<div class="widgets">
  <div>
    <input type="text" id="inputName" maxlength="15">
  </div>
  <div>
    <button id="generateButton">Aye! Gimme a name!</button>
  </div>
</div>
...

• 按钮有一个 ID 叫做 generateButton ，所以Dart可以找到它。

编辑 piratebadge.dart

import 'dart:html';
ButtonElement genButton;

• 按钮元素是 dart:html 中众多元素的一个。

• 变量，包括数字，如果没有实质内容，就为null。

  void main() {
  querySelector('#inputName').onInput.listen(updateBadge);
  genButton = querySelector('#generateButton');
  genButton.onClick.listen(generateBadge);
  }

• 注册一个 click 事件

  ...
  void setBadgeName(String newName) {
  querySelector('#badgeName').text = newName;
  }

• 这个方法更新了 HTML 页面

为按钮实现一个点击监听

...
void generateBadge(Event e) {
  setBadgeName('Anne Bonney');
}

• 这个方法将 badgeName 的显示内容设置为了 Anne Bonney 。

修改 updateBadge() 方法，在其中调用 setBadgeName() 方法

void updateBadge(Event e) {
  String inputName = (e.target as InputElement).value;
  setBadgeName(inputName);
}

• 将文本框输入的值赋值给一个本地 String 变量

在 updateBadge() 方法中添加一个 if-else 结构

void updateBadge(Event e) {
  String inputName = (e.target as InputElement).value;
  setBadgeName(inputName);
  if (inputName.trim().isEmpty) {
    // To do: add some code here.
  } else {
    // To do: add some code here.
  }
}

• String 来源于 dart:core 库，这个库在每一个 Dart程序中都被自动添加。

• Dart 拥有公共的语言结构，例如 if-else。

  void updateBadge(Event e) {
  String inputName = (e.target as InputElement).value;
  setBadgeName(inputName);
  if (inputName.trim().isEmpty) {
  genButton..disabled = false
  ..text = 'Aye! Gimme a name!';
  } else {
  genButton..disabled = true
  ..text = 'Arrr! Write yer name!';
  }
  }

• updateBadge() 的代码在按钮元素上使用 cascade 操作。其结果和下面代码结果一样

  genButton.disabled = false;
  genButton.text = 'Aye! Gimme a name!';

运行应用

保存你的文件

右击 piratebadge.html 选择 Run in Dartium。

和下面的实际比较一下。