Navigation:  Tutorials > Creating a GUI Application > Drawing a View for PersonalAccountShell >

Adding the fields

Previous pageReturn to chapter overviewNext page

When you're creating a view it is important to bear in mind details about the presenters to which the views will be attached., in particular, you will need to know the types and names of the sub-presenters which must to be connected to sub-views that you're drawing.

In PersonalAccountShell we have:

Sub-presenter type

Connection name

Model aspect

TextPresenter

'name'

#name

TextPresenter

'accountNumber'

#accountNumber

NumberPresenter

'initialBalance'

#initialBalance

NumberPresenter

'currentBalance'

#currentBalance

ListPresenter

'transactions'

#transactions

We'll take you through the creation of one of the fields to get you used to the View Composer's operation. After that, you'll be left to your own devices to finish off the remaining fields.

1.Let's add an entry field for the account name. We know that the account name is being handled by a TextPresenter (see table above) so find the Text Fields category icon in the toolbox to see all the views that are appropriate for editing text. An account name is single line text and we can use a "Default view" to handle the display and editing of this. Find TextPresenter.Default view and drag this item from the toolbox and drop it within the shell being composed.

Tip: notice that as objects are added to the View Composer they are displayed in the view hierarchy at top right. Although the view we are creating is fairly simple you will find this hierarchy indispensable in more complex situations, allowing you to navigate around and see the structure of your composition much more easily.

2.Position the new view within the shell by dragging with the left mouse button held down. Any view can be re-sized by dragging the small grabbers at the corners or in the centre of each edge. Notice that, within the View Composer there is always one view that is currently selected and this is indicated by a eight black grabbers around it.

Tip: many of the operations within the View Composer can act on more than one selection. In these cases the first view that was selected will be treated as the primary selection and the remainder as secondary selections. The Match and Align commands within the Modify menu are examples of commands that act on multiple selections.

3.This single line text field you've just added is to connect to the TextPresenter called "name" (and therefore to the #name property of the PersonalAccount model). Therefore, we must set the name of the field to match. Ensure the text field is selected and choose the name property. Then type "name" into the lower pane of the inspector. Hit the Enter key to commit the change and you'll see the entry in the view hierarchy change to display what you've typed.
4.Most of our fields will require a static label text. Go back to the toolbox and drag a TextPresenter.Static text view into the shell. Select the text property and type a suitable label for the account name field, eg: "Account Name:". In this case you'll see the text appear in the field directly, as you type. Note that this static text item is not going to be connected to any presenter so we don't need to give it a connection name. This demonstrates a flexibility of allowing the views to be defined separately from the presenters since only items involved in the application functionality need to be actually part of the presenter. Consequently, a composite view can be embellished without affecting the complexity of the underlying application code.

Now you can add the remaining fields for the other presenters (#accountNumber, #initialBalance, #currentBalance and #transactions); just remember to drag across an appropriate view from the toolbox (ie: one listed under the presenter's class) and name it to match the name we gave to the presenter in our #createComponents method. If in doubt check with the table of presenter types and names given above.