Introduction
In this lesson we will use DesktopListBox to record and display all transactions made to our accounts.
DesktopListBox
A DesktopListBox is used to store and display data in rows and columns. The row and column numbers start from zero.
The following properties are very useful:
| Property | Type | Description |
|---|---|---|
| ColumnCount | Integer | The number of columns in the ListBox |
| HasHeader | Boolean | If True, a header is added to the ListBox |
| HasHorizontalScrollbar | Boolean | If True, adds a horizontal scrollbar if the sum of the width of all columns exceeds the width of the ListBox |
| HasVerticalScrollbar | Boolean | If True, adds a vertical scrollbar to the ListBox |
| LastAddedRowIndex | Integer | The number of the last row added |
| RowCount | Integer | The number of rows in the ListBox |
| SelectedRowIndex | Integer | The number of the selected row |
The following methods are used frequently:
| Method | Type | Description |
|---|---|---|
| AddRow | String() | Adds a new row to the end of the ListBox and fills the columns with the values in the String array |
| ColumnAlignmentAt | Integer | Gets or sets the alignment of the specified column |
| HeaderAt | Integer | Gets or sets the header of a specified column |
| RemoveAllRows | Removes all rows in the ListBox | |
| RemoveRowAt | Integer | Removes the specified row |
The following events will handle some user actions:
| Event | Description |
|---|---|
| DoublePressed | The user has double-pressed on a row |
| SelectionChanged | The selected row has been changed by the user or by code |
Modifications to the application
Window lay-out
In our updated application we will store all transactions from all our accounts in a DesktopListBox.
Add a DesktopListBox
The DesktopListBox control is available in the library under the Viewers section. Drag this control on the AccountWindow. Change the Name property of this control to TransactionList.
It is good practice to end the name of a DesktopListBox with the suffix 'List'.
In the Inspector we can already initialise some properties of TransactionList(e.g. Column Count, Has Header, Has Horizontal Scrollbar…). These settings can also be defined by code in the Opening event of TransactionList. This is our code in the Opening event of TransactionList:
Me.ColumnCount = 3
Me.HasHeader = True
Me.HeaderAt(0) = "Account"
Me.HeaderAt(1) = "Deposit"
Me.HeaderAt(2) = "Withdraw"
Me.ColumnAlignmentAt(0) = DesktopListBox.Alignments.Left
Me.ColumnAlignmentAt(1) = DesktopListBox.Alignments.Right
Me.ColumnAlignmentAt(2) = DesktopListBox.Alignments.Right
Instead of using the prefix Me, you can also refer to the name of the control TransactionList (e.g. TransactionList.ColumnCount = 3). However, if you change the Name of the control, it must be changed in all statements.
The Me prefix always refers to the control that contains the current event handler. When you change the Name property of the control the Me prefix still refers to the correct control.
The ColumnAlignmentAt method is assigned a value from the Enumeration set named Alignments available within the class DesktopListBox.
An Enumeration set is a group of named elements.In our example the Name of this group is Alignments and the elements in the group are Left, Center,Right and Decimal(aligned to the decimal point). To refer to an element in the set you use the following construct:
ClassName.EnumerationName.EnumerationValue
Example:
DesktopListBox.Alignments.Center
DepositButton: Pressed
The Pressed even of DepositButton should increase the selected account, but should also add a new row to TransactionList. A new row is added with the AddRow method.
The following code can be used:
Var accountName As String
accountName = AccountPopup.SelectedRowText
Select Case accountName
Case "CheckingAccount"
CheckingAccount.DepositMoney(1500.00)
TransactionList.AddRow("CheckingAccount", Str(1500.00,"+#####.00"))
Case "SavingsAccount"
SavingsAccount.DepositMoney(600.00)
TransactionList.AddRow("SavingsAccount", Str(600.00,"+#####.00"))
Case "RetirementAccount"
RetirementAccount.DepositMoney(200.00)
TransactionList.AddRow("RetirementAccount", Str(200.00,"+#####.00"))
End
The AddRow method fills two columns in the appended row of TransactionList: the first column with the name of the account, the second column with the value of the deposit. Both values are separated by a comma.
The Str method used in the second column returns a formatted String of the value passed. The format specification is a String made up with the following characters:
| Character | Description |
|---|---|
| + | Displays a plus sign to the left if the number is positive or a minus sign if the number is negative |
| – | Displays a minus sign to the left if the number is negative or a plus sign if the number is positive |
| # | Displays a digit on this place if a digit is present |
| 0 | Displays a digit on this place if a digit is present or a zero if no digit is present |
| . | Position of the decimal point |
WithdrawButton: Pressed
The Pressed event of WithdrawButton is very similar to the Pressed event of DepositButton:
Var accountName As String
Var amount As Currency
accountName = AccountPopup.SelectedRowText
Select Case accountName
Case "CheckingAccount"
amount = CheckingAccount.WithdrawMoney(275.00)
TransactionList.AddRow("CheckingAccount","", _
Str(-amount,"+#####.00"))
Case "SavingsAccount"
amount = SavingsAccount.WithdrawMoney(150.00)
TransactionList.AddRow("SavingsAccount","", _
Str(-amount,"+#####.00"))
Case "RetirementAccount"
amount = RetirementAccount.WithdrawMoney(100.00)
TransactionList.AddRow("RetirementAccount","", _
Str(-amount,"+#####.00"))
End
The third column in the list is used to display the amount withdrawn from an account. The second column (deposits) must stay empty. An empty String (“”) is used for the second column.
The underscore character (_) is used to indicate that the code is continued on the next line.
ShowButton: Pressed
The Pressed event of ShowButton can be developed as follows:
Var accountName As String
accountName = AccountPopup.SelectedRowText
Select Case accountName
Case "CheckingAccount"
BalanceLabel.Text = "The balance of the checking account = " + _
CheckingAccount.GetBalance.ToString(locale.current)
Case "SavingsAccount"
BalanceLabel.Text = "The balance of the savings account = " + _
SavingsAccount.GetBalance.ToString(locale.current)
Case "RetirementAccount"
BalanceLabel.Text = "The balance of the retirement account = " + _
RetirementAccount.GetBalance.ToString(locale.current)
End