TextBox: investment portfolio

[Scott Ferguson]

The TextBox component is one of the most useful components in a typical app as it allows the user to enter text or numbers for storage or processing.

In this exercise we will be creating an app to represent an investment in a fund which returns an interest payment.

The app must be able to accept basic information about the investment fund and do a simple interest calculation.

Create a new project named lrn_tbx_portfolio .

Screen Designer:

Set Screen1 AlignHorizontal and AlignVertical properties to Center and set Title to My Portfolio .

Drag and drop a TableArrangement into the Viewer and set Rows to 5.

 - note that it centers in the Viewer due to the Screen1 alignment settings.

 - the TableArrangement helps to position viewable components on the app screen in a grid

Drag and drop five Label components inside TableArrangement1 in the left column from the top down.

Change their Text values as shown below:

Starting from the top right cell of TableArrangement1, drag and drop four TextBox components then a Label component.

 - the first textbox will contain the name of the investment fund

 - the second textbox will contain a description of the fund

 - the third and fourth textboxes will contain numbers entered for the interest calculation

 - the label will contain the result of the interest calculation

Check MultiLine for the description textbox and set its Height to 150.

Rename the textbox next to Amount Invested to investedTBX.

 - note that component names must begin with a letter and cannot contain spaces (underscore '_' is allowed)

Check NumbersOnly.

 - we don't want the user to accidentally put non-numbers here as it will be used in a calculation

Set TextAlignment to center.

Rename the textbox next to Rate of return to rateTBX.

Check NumbersOnly.

Set TextAlignment to center.

Rename the label to the right of Yearly earnings to earnedLBL.

Set its Text to 0, and TextAlignment to center.
 - a label does not need a NumbersOnly checkbox as its value cannot be changed directly by the user

Drag and drop a button below TableArrangement1.

Set the Text to Calculate yearly earnings.

Blocks Editor:

Drag out a Button1.Click block.

 - the blocks inside Button1.Click to calculate and display the yearly earnings on the investment will be executed when the 'Calculate yearly earnings' button is touched

Drag and click an earnedLBL.Text block inside the Button1.Click block.

 - this block will be used to store the calculation

Drag and click a math multiply 'x' block to the earnedLBL.Text's 'to' socket.

Drag and click an investedTBX.Text block to the left socket of the 'x' math block.

Drag and click a rateTBX.Text block to the right socket of the 'x' math block.

 - when these blocks are executed, the amount invested is multiplied by the interest rate and the result will display on the screen when it is placed in the earnedLBL.Text block.

Your project is now ready for testing in the emulator or connected device.

You can enter the following data for testing if you wish:

Name of investment: gobble

Description: marketplace for individual cooks to connect with consumers

(notice how the text wraps - that is due to the MultiLine setting)

Amount invested: 36500 (it does not matter what currency unit is being used)

Rate of return: .0375   (3.75%)

My output with this data was:

END.

Challenge:

Can you change the math blocks to allow the user to enter 3.75 rather than .0375 for the rate of return? (Hint: your blocks will have to divide '/' the rate of return by 100)