Now that we have our bank account back on screen, we add an input field with ID #number (and of type number) that captures the amount of money that we want to deposit or withdraw from our account. We add a button "Deposit-Withdrawal" to initiate that action, and also a button "Add interest" to calculate and add interest to our account. Our screen now looks like the following screenshot:
Changing data screen
Here is the code of bank_terminal_s5.dart (declarations are left out for brevity):
void main() { bind_elements(); (1) attach_event_handlers(); (2) disable_transactions(true); (3) } bind_elements() { owner = query('#owner'), balance = query('#balance'), number = query('#number'), btn_other = query('#btn_other'), amount = query('#amount'), btn_deposit = query('#btn_deposit'), btn_interest = query('#btn_interest'), error = query('#error'), } attach_event_handlers() { number.onInput.listen(readData); amount.onChange.listen(nonNegative); amount.onBlur.listen(nonNegative); btn_other.onClick.listen(clearData); btn_deposit.onClick.listen(deposit); btn_interest.onClick.listen(interest); } readData(Event e) { // same code as in Spiral 4 // enable transactions part: disable_transactions(false); (4) } clearData(Event e) { number.value = ""; owner.innerHtml = "----------"; balance.innerHtml = "0.0"; number.focus(); disable_transactions(true); } disable_transactions(bool off) { amount.disabled = off; btn_deposit.disabled = off; btn_interest.disabled = off; } changeBalance(Event e) { // read amount: double money_amount = double.parse(amount.value); (5) // call deposit on BankAccount object: if (money_amount >= 0) bac.deposit(money_amount); (6) else bac.withdraw(money_amount); window.localStorage["Bankaccount:${bac.number}"] = bac.toJson(); // show new amount: balance.innerHtml = "<b>${bac.balance.toStringAsFixed(2)}</b>"; // disable refresh screen: e.preventDefault(); (7) e.stopPropagation(); } interest(Event e) { bac.interest(); window.localStorage["Bankaccount:${bac.number}"] = bac.toJson();(8) balance.innerHtml = "<b>${bac.balance.toStringAsFixed(2)}</b>"; e.preventDefault(); e.stopPropagation(); }
The main() method in lines ((1) and (2)) calls methods to create objects for the DOM elements, and creates the event handlers. When the screen displays for the first time, the Amount transaction field and the buttons are best shown as disabled; this is accomplished by line (3), which calls a handy method disable_transactions to disable or enable DOM elements by passing a boolean value. When data is shown, the
readData method performs as in Spiral 4, reading and showing data, and the second part of the screen is enabled line (5). The Deposit-Withdrawal button can perform both functions whether the amount is greater or less than 0. The
double.parse method in line (5) will not throw an exception, because we checked the number input. The corresponding methods on the object are called to change its balance in line (6), for example, the deposit method in BankAccount class:
deposit(double amount) {
balance += amount;
date_modified = new DateTime.now();
}The changed object is again stored in local storage in line (8). The two lines starting at line (7) are necessary to stop the event from propagating; if they are not used, the change is not visible because the screen is refreshed immediately. The interest calculation follows the same pattern.