在這一步中，你將添加一個按鈕。應用啟用時，文本字段中沒有文本。用戶單擊按鈕時，應用將顯示出 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 中眾多元素的一個。

• 變量，包括數(shù)字，如果沒有實質內容，就為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 頁面

為按鈕實現(xiàn)一個點擊監(jiān)聽

...
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。

和下面的實際比較一下。