DDH Software, LLC Making a big world smaller

One of the additions to the HanDBase 3.0 product line is HanDBase Forms Designer. This tool allows you to customize the way you view or enter data in the simplest of ways: By designign the interface for your database application.

Once your interface has been designed, each record is displayed in your custom form (which can be linked to other forms as we'll see in this tutorial). This not only makes data entry easier (and less cluttered), but also adds that 'special' touch your database application demands.

This document is a tutorial that will take you step by step on creating a useful form for a small, useful 'Contacts' database. It will explain the basic tools and elements that comprise the Forms Designer and will guide you through the forms creation process. If you are already in active development forms, you may still find this tutorial to be of interest since it contains useful hints and tips.

You will notice that the tutorial applies to three platforms: PalmOS, PocketPC and the desktop. The functionality in all of them is basically the same, any differences will be indicated. Please refer to the screenshot that applies for your development platform.

Forms designed on any of the platforms are portable to the others. This means that you may design a database in a single platform and transport it to the other without any changes. Creating database applications with HanDBase, is truly cross-platform. There are also options in the Desktop Designer to make it possible to have different set of forms for each platform, thus taking advantage of any differences between them.

1. Before We Begin

This tutorial assumes that you've gone through at least Tutorial 1 for HanDBase and that you are able to create a simple database. This is important because knowing how a database is structured allows a smooth transition of it to a form.

For this particular tutorial, we will use a contacts database called 'ContactBook'. You may either download this database from our website's Gallery section, or you may create it yourself with the following fields:

You may keep all other values in the fields to their default values. Once you have setup your database, the Edit Fields screen should look something like the following:

2. Accessing to the Forms Designer Tool

Once you've loaded your database in HanDBase, go to the 'DB Properties' screen. Notice the button called 'Forms'. When you click/tap on this button it will launch the forms designer tool with your database ready to be enhanced. When you are done with the forms designer, and close it, you will be automatically be returned to your database. To continue, tap the Forms button.

3. First Screen of Forms Designer tool

You should now be able to see a list of all the forms you may have designed for the current database. In our case, you shouldn't be seeing any listed at all, since we have just begun working.

All platforms have tools to help you Copy, Delete, Examine and Edit forms. The only differences are how these options are accessed, as they are based on the standard interface for the platform. For now, lets tap on 'New'.

4. Configure the First Form

Name is the unique identifier for the form, other forms may refer to this form by this name, enter 'Main' in this field. Title allows you to choose what the user sees at the top of the screen, if anything, when the form is active 'Form Name' is the default.

The Start Form allows the selection of whether we want to use this form as the starting point when Creating a New Record or Editing a Record, neither or both. This can come in handy when you are building very specialized forms, most of the times you will keep these two active for your first form. Consequent forms will have at least one turned off, since they won't be the first form when the user taps on a record or creates a new record.

You may change the background color of the form with 'Form Potion'. The 'Show Buttons' section allows you to begin a form with some basic functionality (closing or canceling a form, viewing the record details or adding a new record). This functionality can be overridden an you may design your own button interface. Let's keep the defaults for now.

On the PocketPC and Desktop platforms, you will also have the ability to modify the form size. It is recommended that you keep the form size to the same as the PalmOS (160x160), which is the default setting. This will allow cross-platform compatibility.

PocketPC and PalmOS: Tap on OK.

5. The Design Screen

We are now located at the design screen, here we can add any and all the controls we desire our form to have. The basic procedure for adding any control, whatever types it may be is the following:

• PalmOS and PocketPC: Tap on New. Desktop: Observe the items on the toolbar, below the menus.
• PalmOS and PocketPC: Select the Control from the list Desktop. Select an item from the toolbar.
• Configure the Options for it; there may be one or more tabs with additional options.
• Tap on OK, to accept settings.
• Move control to desired spot, unless you already specified the location in the properties.
  

That's it! Now let's try that with our database.

6. A Text Field

Select from the list of items 'Text Entry' or the 'AB' text box from the toolbar. For all platforms you will be prompted to configure the Text Entry control. Our first option is the data source. For our first field select 'Last Name'. Data Source is available in all the interface controls, this allows your controls, except shape, to select where the data that we want to work with from our database (field) comes from.

Now select the next tab: Layout. This tab is also common in most controls, it specifies the exact location (in pixels) for the location of the controls. On this particular case, our control is to be placed, for starters, in the location as shown below:

The '# Lines' attribute allows you to create a multi-line entry, this may not be useful for our last name field, but will be useful for others such as an Address Field. Leave the default setting for now.

Our last tab is Attributes. This is an aesthetically important part of the control configuration. Here we specify what the control is going to look like on the screen. We can specify the font style and size, font color, background color, justification for the caption text, and other control specific options. The defaults should work fine.

On PalmOS and PocketPC, tap on OK to observe the control on the Screen (Desktop, this does not apply as the form is visible at all times). At this point you may drag and drop the control anywhere on the screen. This is an easy way to accommodate the control where you want it to be, for specific positioning, you may use the Left origin and Top origin options on the Layout tab of the control properties.

PocketPC and PalmOS: If you want to go back to the settings screen for a specific control, tap on the control, then tap on 'Details'.

7. Label to Signal Data Entry

Most data controls in HanDBase Forms are designed for data viewing and entry. One specific control that is designed only for data viewing is: Label. This control may display data from a Data Source (see above) or from static text, as specified in the caption.

The most common use for a Label is to indicate a specific area where data needs to be entered. If you take a look at the previous screen, you will notice that without something to tell us what data is expected to be entered on the box, it would be really hard to guess that we should type in a last name.

So the next step is to add a Label. Again, tap on 'New' and choose 'Label', desktop users should click the Item on the Toolbar with the "A". We have the same Tabs as we do with the Text Entry, but their content is a bit different.

On the General tab, we are able to select a data source if we choose to display text from a field in the record, in our case we want to type in specific text, so we leave the default setting. The Caption Source is the text that the Label shows, we can show the Data Source's Name or Value. Other is what we want. In the Caption box, change it to: 'Last Name:'.

We go to the next tab: Layout. It looks just like the Text Entry one, let's leave the defaults for now, we'll drag and drop the control into place later. The next tab is: Attributes. We only have one option here: Font. There is a convention where any Label used for indicating data entry, should be in a Bold. Labels used to show data that may not be modified, shouldn't be Bold. Leave it the way it is and tap or click on OK.

8. Fine Tuning Placement The Controls on The Screen

Our two controls may look a bit scattered and out of place. But that's OK. We are going to learn how to move everything into the right place. The easiest way is to drag and drop a control from one place to the other. Most of the times this does the trick. When that doesn't put the control in the right -exact- spot you want, then you go in to the Layout settings (see above) and find tune using direct pixel coordinates.

Also something strange that we notice is that the text on the Label is 'cut off'. This is caused by the size of the control being too small for the text. This also can be fixed on the Layout area of the Label's properties. In this case, changing the Width to 57 does the trick.

Now that we have that worked out, we should have a field entry for the last name of a contact!

9. Text Field Exercise

Now it's time for you to practice the above technique with the other Text fields:

• First Name
• Company
• Phone
• Address

The only difference here is that the Address field won't be a single line Text Entry, on the Layout tab change the number of lines from 1 to 2 (remember the '# Lines' section in Layout?). The end result should be something like the following:

At this point, our form is fully functional if used from within HanDBase, we would be able to enter and edit information on the fields we have specified. But let's move on to more control types.

10. Giving the Form a New Title

What if we wanted to change a setting on the form? Let's say for example that we want to change the title to be the name of the database, so that whenever any user of our database is working on entering or editing data, they'll have a reminder of where they are.

Tap on any area of the screen (or window in the case of the Desktop) to un-select all controls. This will select the form itself. Then tap on Details (in the case of the Desktop, the Details window will change to the form's settings).

Now, select 'Other' from the Title option. An area where you can enter the Title Text will come up. Enter 'ContactBook' and tap on OK.

11. Adding a Popup

It's time to try a new control. This time we'll use the Popup control. Tap on New on the designer screen, then select Popup (Desktop: Just click on the Popup image button in the toolbar, seventh from the left).

Again, we see the familiar Details screen for a control. Select for the data source the 'Category' field. Popups are very useful for when the values to be entered can be selected from a set of options. The Caption for the Popup is the text that is shown in the trigger area (this is the place where you can tap on the screen to make the options appear). For our purposes the Field Value should be selected. This means that whenever we choose an item from the list of options, it's value will be shown in the trigger area.

The Attributes tab for the Popup allow the selection of the font to use in the display of the trigger and whether this Popup may be altered by the user. The default settings work for our purposes, so tap on OK.

Now, move the Popup control over to the upper right hand corner of the screen. We now have a Popup.

12. Adding Tabs to the Form

Sometimes, our databases will contain more fields than what can fit on a single screen. So the next best thing to do is to organize them into logical parts (or related parts) and separate them into different screens. This is a very common practice in all platforms. The most common control for switching back and forth between these separate screens is with a Tab control.

HanDBase allows the usage of Tabs in a very simple way: Tabs are placed on the screen and have the ability to perform an action you specify. The most common action is to Switch to another Form. So each screen is escentially a form that is interconnected with the other through a Switch to a Form action. This is what we'll do in this section of the Tutorial.

Create a new control on the forms designer screen, it should be of type Tab. The General settings for a Tab is very similar to that of a Label. Also, we won't select a data source. Leave all the default settings but change the Caption to be 'Main'.

Select the Attributes tab, the two new settings are Active and Direction. The Active setting indicates whether this tab is the selected Tab for this form or not, in this case it is. So let's change it to Active. Tabs may be placed on the side of a screen or facing upwards or downwards, this is controled by the Direction setting. The default value for this works for us.

We won't do anything here with the Actions tab, but for the other Tabs we will add, this is where we will indicate what action to take when the Tab is selected. Tap on OK.

Now let's create two more Tabs. We are not going to assign them any actions yet. We are going to set them up the same way as the 'Main' one above, but these will not have the Active option set. Put them side by side on the screen, use the Layout Left or Top origin settings if necessary.

13. Ornaments and Shapes

Our form has now grown and become even more complete. Sometimes we also want to add aesthetic touches to our form. There is a control that allows elementary drawing of shapes and lines: Shape.

Create a new control, it should be of type Shape (Desktop users should click on the geometric figures icon in the toolbar). When the details screen for it comes up, you will be able to select on type of shape. At the time of this writing the Line and Rectangle shape are the only two supported types. Let's use a Line.

As usual, Layout and Attributes will define the position and the color of the control. There are no Caption options since shapes don't have captions. If you recall, after our Tabs there is a blank space. It doesn't look as nice as it could look, so what we are going to do now is add a Line after the tabs. Change the Start X, Start Y, End X and End Y items to reflect the following settings above. Tap OK, you should see something like the following:

14. Copying a Form

Our first form is now complete and it's time to work on the other two forms, that will be accessed using the Tabs. Most of the controls on the screen (like the Tabs and Line) will be the same on all forms, there is no point in starting from scratch for each form, so we'll copy the form we just created. Un-used controls will be deleted and those needed will be kept.

First, let's close our current form. PocketPC users tap on OK. PalmOS users tap on Done. Desktop, no action needed. Now let's make a copy of the form: PocketPC users select the 'Main' form and then go to the Tools menu and select Copy. PalmOS users, select the Main screen, tap on Tools then on Copy. Desktop users go to the 'Form' menu on the menu bar, then select 'Create Copy...'.

It's time to give a name to the new form, on Palm and PocketPC change the Name to 'Details', on the desktop you should enter the name on the box that pops up. You will notice that the 'Start Form' options are both turned off. That's because this form will not be displayed first when creating or editing a record, the previous one is. You may toggle these options back and forth, but for the moment the default options work for us. Tap on OK.

At this point we should be looking at a form that looks just like the one we first built. The difference is, of course, that it is not the same one and it has a different name.

We are now going to delete all of the controls we are not going to use:

• Last Name (Text Entry and Label)
• First Name (Text Entry and Label)
• Company (Text Entry and Label)
• Phone (Text Entry and Label)
• Address (Text Entry and Label)

• Main Tab
• Details Tab
• Map Tab
• Line
• Category Popup

We now have an form with the basic items that all of our other forms need. This is called a 'template'. Practice copying a form by repeating the copy process. This time call the new form 'Map'. You will be glad to know that you won't have to delete any controls this time.

15. Actions on the Main Form

Let's go back to the Main form. When we created the Tabs, we did not assign any actions to them, therefore, if the user taps on any of the Tabs, no action will be taken. Now we need to specify the actions so that something will happen.

Once in the the screen designer for the Main form, choose the Details Tab and tap on Details (Desktop does not require any other action except selecting the Details Tab). Then select the Actions Tab, you will notice that we can perform an action whenever we tap on a Tab. In this case select: Jump To Form. Next, under the 'Form' heading let's select the Details form. This means that whenever a user taps on this Tab, it jumps it to the Details Tab.

Repeat the same action for the Map Tab. This time the Jump To Form action should take you to Map.

16. Details Form

Now it's time to add the content for our two new forms. Let's begin with the Details form by opening it. This time we are going to add fewer controls. But important, none the less.

First, we will take care of the Tabs. Based on the previous excercise this should be a simple step. This time we are going to add actions for the Main and Map Tabs only, as we are already in the Details form. Make sure to select the appropriate 'form' for each of these tabs. While editing the Main Tab, make sure that you turn off the 'Active Tab' attribute. Go into the Details Tab and make it the 'Active Tab'.

Now let's add a Popup and a Label, these will reflect the entry of the Birthday. This is a good time to practice how we added the Popup control for the Category. While we are at it, add a Text Entry control and a Label for Notes, make the Text Entry control have 4 lines. While working on the Text Entry for Notes, make sure that you turn on the 'Scroll Bar' option in the Attributes section, this will show a scrollbar if the text exceeds the size of the box. Remember: Practice makes perfect!

17. Map Tabbed Form

Time to wrap up the form! Our last stop is with the Map form. Open it up and configure the Tabs. Make sure that you make the Map Tab, the only one Active in the Attributes section and that you point to the right Jump To Form forms.

We are now ready to add an image control. Create a new control of type Image (Desktop users click on the picture icon on the toolbar). The Data Source for the Map, should be the 'Map to Address' field. Now add a Label that says 'Map to Address:'.

18. Finished!

Congratulations! We have now finished our forms!

PocketPC: Click on all of the OK circle buttons to go back to the database, hit New to create a new record and test out your database.
PalmOS: Tap the all of the Done buttons, this should you return you to the database, now tap on New and try out the forms.
Desktop: Save the Forms by going to the File menu and selecting Save. Then again at the File menu, Exit. This should take you back to the HanDBase Desktop.

Click on and enjoy!