步驟 3：添加一個(gè)按鈕

在這一步中，你將添加一個(gè)按鈕。應(yīng)用啟用時(shí)，文本字段中沒有文本。用戶單擊按鈕時(shí)，應(yīng)用將顯示出 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>
...

• 按鈕有一個(gè) ID 叫做 generateButton ，所以Dart可以找到它。

編輯 piratebadge.dart

import 'dart:html';
ButtonElement genButton;

• 按鈕元素是 dart:html 中眾多元素的一個(gè)。
• 變量，包括數(shù)字，如果沒有實(shí)質(zhì)內(nèi)容，就為null。

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

• 注冊(cè)一個(gè) click 事件

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

• 這個(gè)方法更新了 HTML 頁(yè)面

為按鈕實(shí)現(xiàn)一個(gè)點(diǎn)擊監(jiān)聽

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

• 這個(gè)方法將 badgeName 的顯示內(nèi)容設(shè)置為了 Anne Bonney 。

修改 updateBadge() 方法，在其中調(diào)用 setBadgeName() 方法

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

• 將文本框輸入的值賦值給一個(gè)本地 String 變量

在 updateBadge() 方法中添加一個(gè) if-else 結(jié)構(gòu)

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 來(lái)源于 dart:core 庫(kù)，這個(gè)庫(kù)在每一個(gè) Dart程序中都被自動(dòng)添加。

• Dart 擁有公共的語(yǔ)言結(jié)構(gòu)，例如 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 操作。其結(jié)果和下面代碼結(jié)果一樣

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

運(yùn)行應(yīng)用

保存你的文件

右擊 piratebadge.html 選擇 Run in Dartium。

和下面的實(shí)際比較一下。

http://wiki.jikexueyuan.com/project/learn-dart-in-minutes/images/dart1-learn-dart-in-minutes-step-3-add-a-button-pic1.png" alt="運(yùn)行" />