ScreenIO Demonstration Continued - Add/Edit Screen

We're about to take a look at another common programming task that ScreenIO can help save time with: the Add/Edit screen. You can create an Add/Edit screen and tie it into the Listview screen we already made, and you end up with a complete file maintenance program.

This tutorial builds off of the ScreenIO Listview Screen Tutorial. If you haven't completed that tutorial yet, please do so now.

You can download the sample environment for this tutorial here:

Design the Add/Edit Screen

The first step is to launch ScreenIO if you haven't already. Then select File->New from the windows dropdown menu. If you still had it open from the previous tutorial, make sure to save what you were doing first, of course.

At this point you should be looking at the familiar ScreenIO Screen Designer window.

The first step is to enter a Screen Name and select a file layout. Enter "CUSTEDIT" for the screen name, so that the listview screen we made earlier will find it properly.

Click on the File Layout button and select the Customer file layout that we've been working with.

At this point you should see the fields list populate with all the fields from the customer file.

First, we'll want to add a caption to the screen. Do so by clicking the Add Caption button in the Toolbox in the bottom left corner of the screen. A new Caption appears in your screen near the top.

Under this caption we want a blank line. ScreenIO will do that automatically for you if you want by clicking the "Skip a Space" button in the Toolbox at the bottom left. Click this button once. Nothing will happen, but internally, ScreenIO has marked the next row as skipped, so that when you add controls later, they will automatically appear in the correct place. This step can be skipped, but we're doing it to save some time moving the controls around later.

Click on the Fields listview at the left of the screen now, and it will turn Yellow, indicating that your cursor is in it.

From here, you can select any fields you want with the keyboard and add them to your screen using the Enter key.

Select the bottom four fields: Name, City, Zip, and Phone Number, and they will be added to the screen.

By now you should be looking at an editor window something like the screenshot above. If not, move the controls around the same way we moved the listview control in the last tutorial, using the keyboard or mouse.

When moving controls around on Add/Edit screens, it's useful to understand that the Captions for the fields are tied to the fields themselves. Therefore its very important to move the Fields first, and the Captions will move automatically.

Our new screen has almost all the controls its going to need. Only the exit buttons are missing. Add them by selecting each from the Windows Dropdown menu under "Add Control".

You may notice that the screen is much larger than we need it to be to display all the data. We can easily change the size by using Window Attributes, but this time around, lets look at another way to do it. Select "Adjust Screen Size" from the "Screen" dropdown menu, and ScreenIO will automatically adjust the screensize for you, shrinking it down and leaving just the right amount of space around the edges.

By now, our screen is starting to take shape, but it's still pretty plain. Let's add a touch of color to liven things up. I've selected another shade of blue, to match the theme of the listview screen that we made last time. Having a similar theme will make the screens look like they're part of the same File Maintenance program.

Click on the "Background Color" button from the Window Attributes section of the toolbar to select a color.

After a little trial and error, I found a color that looked pretty good with the other screens color: 90B0FF. Enter it into the color picker window and click the "Select Color" button or press enter to accept the selection.

Our screen is starting to shape up.

If your buttons and text boxes don't look like the screenshot above, you may need to go into the Object Attributes window and ensure that they each have their foreground and background colors to "W". A color of "W" to BR means "use the windows appearance", whereas the default BR appearance will inherit from the controls parent window.

Go ahead and adjust the colors of any of your controls that look funky now.

The next step is to enter the details for the screen's Title Caption. Click on the Caption until you see its Object Attributes window.

Enter the following information for the attributes for the title caption.

• Caption: "Enter Customer Details"
• Justification Spec: "CC"

Adding Custom Code

By now the screen should be looking pretty good. There's only one important step left. This screenIO screen will work fine to add and edit records, but in our scenario, we want to do something special with the file whenever the user adds a new customer. We have addressed all the fields except the Customer Code field. This field places a unique identifier in the record, that the user never has to be concerned with. Therefore, whenever we add a new record, we need to automatically generate a customer code. The user never sees this field, so it doesn't matter what it is, but it does need to be a unique ID field.

In ScreenIO, you can override several events in order to place custom code in your screen. You can read all about them in the ScreenIO documentation, but for now we are concerned with the Initialize Event.

The Initialize Event runs in an Add/Edit screen whenever we're adding a new record. In this event you should place any code, such as defaults, or autogenerated values that go into creating a new record in your system.

The Read Event is another ScreenIO event that gets triggered whenever it reads an existing record. You can unpack the data from the disk into a more user-friendly version on the screen in the Read.

Our example program is simple. It doesn't need a Read event, but we do need an Initialize event.

Click on the "Set Form Events" button in the Window Attributes section of the Toolbar. A window showing all the form level event handlers pops up.

Click on the Edit button next to the Initialize Event. This will open the "Select Custom Function" dialog that we saw in the last chapter.

Type the name of our new event, "InitCustomer", and click the "New" button. Just like last time, MyEdit will pop up with a blank function, just waiting to be filled in. Enter the following code for the InitCustomer function, and save the function. (You should not enter line numbers in any ScreenIO custom function. The line numbers will be added for you by ScreenIO when it builds your helper library.)

  ! function\initcustomer.brs
  ! Created on 03/31/2010
  !
  ! fnInitCustomer - This Function autogenerates a unique key to put in the customer file.
  !
  !
  def fnInitCustomer
     let f$(cu_code)=fnMakeUniqueKey$(DataFile)
  fnend

FnMakeUniqueKey is a FileIO function that generates a key value unique to the given data file. You have access to all the FileIO functions from your ScreenIO Screens. ScreenIO handles the linkages for you.

Now that your function is entered and saved, you can switch tasks back to the ScreenIO window. You should see that your new function has been selected for you.

There are only two other things we might want to adjust before we're done. We've established a gradient theme of blue between our two screens. The listview starts with the darkest shade and each new window that opens has a slightly lighter shade of blue.

It might be fun to complete the effect by setting the Background color of all the textboxes to blue on this screen.

The good news is, we don't have to set them one at a time. It's possible to select a group of controls in ScreenIO and edit them together.

The first step is to select the first textbox control by clicking on it. It will turn yellow, and the black and blue grid should appear, indicating that we're in movement mode.

Now, press CTRL-S. This will make the textbox a shade of Yellow-Green. The Yellow indicates that the cursor is still in this control, and the green indicates that its part of a control group.

Now, click on one of the other textboxes. It will turn yellow, and the control you just left will now be a solid Green color. Press CTRL-S again to include this new textbox.

Continue through all four textboxes until they're all selected and green (or yellow green).

Now that you have all the text boxes selected, you can move them around as a group, resize them together, align their edges, make them the same width, and more. To see a full list of options, check out the ScreenIO documentation.

Our controls are already in the correct positions. We're going to use the Selection Group to change the color of all of them simultaneously.

Click on one of the controls until you see the Object Attributes window appear.

Now, click the Background Color button to bring up the Color Picker so we can choose a nice shade of light blue.

Enter a value of A7C0FF into the Color Picker and press Enter to select it.

At this point you can see the color has been changed, but the changes haven't been applied yet. Press ESC to unselect all the controls and exit out of the Object Attributes window, saving the changes.

At this point ScreenIO will ask you if you would like to copy the changes to all the selected controls. Enter Yes to set the background color for all members of the selection.

Your screen should now look like the following screenshot:

There's one other thing you usually want to check out on any Add/Edit screen. If you added the fields out of order and then rearranged them, the Tab Order (the order the cursor flows through the controls) may not be correct. In ScreenIO, it's very easy to set the Tab Order.

Simply click the "Set Tab Order" button in the Window Attributes section of the Toolbar, and all your input controls will turn light blue. A number will appear in each, showing the current tab order through the controls. To change it, simply click through the controls in the order you would like the cursor to flow. As you click on each control, it will turn green, and the new number will appear in the control.

If you make a mistake, you can press ESC to cancel. The results aren't saved until you've clicked all the controls.

In this screen, as with most Add/Edit screens, we want the tab order to flow intuitively from the top to the bottom.

Save and Test Screen

Once we're done, its time to save and test our new screen.

As before, ScreenIO compiles your screen and then launches a new copy of BR to test it in. It appears to be working correctly, but it doesn't look like much running by itself.

Lets load up the Listview screen we made in the last chapter and run it. Press ESC or click the cancel button to exit the screen.

At the BR console, type:

  load customer/screenio
  run

The listview runs like it did last time. Click on the "Edit" button to edit one of the Customer Records.

Congratulations! You just made a fully featured File Maintenance program from scratch in less time than ever possible before.

I can say from personal experience, once you get used to the ScreenIO system, it only gets faster. I made all the example screens for this demo in under 20 minutes.

This concludes our introductory training session for using ScreenIO. I hope you enjoyed the presentation, and I hope you consider joining us in making ScreenIO a BR Revolution.