You may think that I am copping out with this last step. Well, I must admit that I am to some extent; however, any plan that does not allow for starting over in the event that things do not go well is a plan that will fail more often than not.
Step 2 - In order to implement the above specifications, I needed the following standard CanDo objects: two TextField objects, one for the dollar value and one for the cent value; four AreaButton objects, two with up arrows and two with down arrows for allowing incrementing and decrementing of the dollar and cent values using a mouse; and one TextButton object for quickly clearing the MIO to $0.00.
Step 3 - Laying out the standard CanDo objects in a user-friendly fashion was rather easy since there seemed to be only one logical way to do it. I decided that the dollar TextField should be to the left of the cent TextField with a slight gap between the two to clearly show that they are separate from each other. A dollar sign ($) should appear to the left of the dollar field to indicate that the input should be a monetary quantity. The four AreaButton objects should be laid out in a two-by-two grid to the right of the cent field with the top two having up arrows on them to indicate incrementing and the bottom two having down arrows to indicate decrementing. The two buttons on the left would be used for changing the dollar value while the two on the right would be used for changing the cent value. Finally, the TextField button for clearing the MIO should enclose the text $CLR to indicate that the monetary value will be cleared. Its position should be flexible so it can be placed according to the layout of the card to which the MIO will be added.
Step 4 - The layout of the MIO on a CanDo card is shown in Figure 1. The details of the card can be found in the Window section of Listing 1 while the details of the objects making up the MIO can be found in the Definition sections of the objects in the same listing (see part II of this article in last month's issue for more detail on reading CanDo source code). The dollar sign ($) to the left of the MIO was put on the screen using CanDo commands in the AfterAttachment event routine near the beginning of Listing 1. The first three lines of code in this routine set the font and print style, and then print the dollar sign. You can get CanDo to write these lines of code for you by selecting the Text Editor Tool (the big A button to the right of the editing window) and selecting the font, style, and text.
Unfortunately, a graphic image cannot be attached directly to an AreaButton object. Rather, the image, which must be an IFF ILBM brush, has to be loaded with the LoadBrush command and then displayed with the ShowBrush command at the appropriate location on the screen. An ImageButton object could be used. This object allows an image to be attached directly to the object; however, no border can be specified. This means that the image itself must also include the button border if it is needed. This is okay if the button size will not be changing during development. If it does change, the image must be edited in a paint program. Since the four increment and decrement buttons needed borders, and I was not sure about the sizing at design time, I chose to use AreaButtons and ShowBrush commands.
The small up and down arrows used on the four AreaButtons are brushes I created in DeluxePaint IV. Their file names are SmallUpArrow.br and SmallDownArrow.br. Figure 2 shows an enlargement of the two brushes so you can easily create these brushes for your program. The last six lines of the AfterAttachment routine load and display these brushes in the four AreaButtons. If you need to move the MIO to a different location on the card, then the X,Y position in the ShowBrush commands will have to be changed. This is also true of the X,Y position for the $ in the PrintText command. The Transparent False command tells CanDo to display any transparent background color that may have been saved with the brush.
Step 5 - The object event routines are shown in Listing 1. Each object that makes up the MIO only has one event associated with it. The two TextField objects each have an OnRelease event routine. OnRelease means that the user has pressed the ENTER key. I will discuss these routines in more detail later.
The four AreaButton objects each have an OnClick routine. Normally an OnRelease routine is used for buttons since this gives the user a chance to change his or her mind about the selection after pressing the mouse button by moving the pointer off of the object before releasing. However, in the case of the increment and decrement buttons, I wanted the cent or dollar value to begin changing when the mouse button is first clicked and continue to change until the mouse button is released. Thus, I used the OnClick routine and increment or decrement the dollar or cent value until the user releases the mouse button. More about this later.
Finally, the TextButton object for clearing the MIO uses the standard OnRelease routine. It simply resets the dollar and cent fields to 0 and 00, respectively.
Step 6 - There were a few problems (dare I call them bugs) with the original implementation of the MIO. The version in Listing 1 is the result of following step 7 of my eight-step ladder of success plan several times.
Step 7 - 'Nuff said in step 6.
Step 8 - My original plan worked well, and I did not have to follow step 8 (he said as he blew on his fingers and stroked them gently on his chest). Luck or skill? I choose the latter.
Figure 3 shows the MIO as part of a more extensive card in my SimpleBudget program. Notice that I changed the relative position of the $CLR button to accommodate the design of the card.
The Cents field was created as a text entry rather than an integer entry to prevent, for instance, a value of five from being displayed as 5 rather than 05 or a zero as a 0 rather than 00. For monetary amounts, the leading zero is always needed for single digit cent values. The FormatValue function could be applied to the Cents field since no -0 values are needed in this field. A single command line could be used to accomplish the appropriate formatting:
SetText "Cents",FormatValue(TextFrom("Cents"),"00")
An equivalent method without the FormatValue function did not work with the Dollars field because it is right justified and the trailing space was not eliminated.
I will not give you a boring line-by-line description of how the increment and decrement buttons work; rather I will describe how they work from a user's perspective and then let you follow through the code in Listing 1 to see how it was implemented. I decided to limit the MIO to a maximum value of $99999.99 and a minimum value of $-99999.99. This was more than sufficient to cover any amounts I would be using in my budget program.
When the user first clicks on the increment cents button, the value in the Cents field begins incrementing by one. When the cents value reaches a multiple of 10, the increment value is increased to 10, thus allowing the user to more quickly reach the value needed. When the cents value reaches 100, the Cents field is cleared to 00 and the dollar value is incremented by one. When the user releases the mouse button, this process ends. It can be restarted with an increment value of one by clicking on the button once again. The decrement cents button works the same way except it subtracts the increment value. Note that if the dollar value is negative, then the increment cents button must decrement the cents value and the decrement button must increment it. I will leave it to you to determine why this is true.
When the user first clicks on the increment dollars button, the value in the Dollars field begins incrementing by one. When the dollar value reaches a multiple of 10, the increment value is increased to 10. When it reaches a multiple of 100, the increment value is increased to 100, and so on. Of course, as the dollar value approaches the maximum value of 99999, the increment value has to decrease to make sure the maximum value is never exceeded. When the user releases the mouse button, this process ends. It can be restarted with an increment value of one by clicking on the button once again. The decrement dollars button works the same way except it subtracts the increment value.
All of the increment and decrement buttons' event routines have to take special care when the dollar value is near 0. For instance, if the MIO contains a value of $0.00 and the user wants to decrement the cent value by one, what has to happen to the dollar value? If you answered that it must become a -0, then you have answered wisely, grasshopper. A negative one cent is displayed as $-0.01; the negative sign is in the Dollars field.
If you need to add a new card containing the custom object to an existing deck, you can load the one-card deck containing the custom object, copy the card using the Copy option in the Mode menu (part of the Main Control Panel), load the deck you wish to add the card to, paste the card containing the custom object to that deck, position the custom object, and then add other objects. The custom object can be added to an existing card containing other objects by copying and pasting each individual standard object making up the custom object.
One feature I would really like to see added to CanDo is the ability to group standard objects together and save them as a custom object for later loading directly to another card. This would allow a person to create custom objects and easily distribute them to other people. Of course, CanDo should allow the object to be placed anywhere on the card without having to rewrite any code. Maybe the next release of CanDo....
If you will send me your solutions to the above challenges care of this magazine, I will choose the best solutions and include them in a future installment of this series of articles about CanDo.