Startup Screen Design

Introduction

A Startup Screen is a good beginning for an Application, and not only does this gives the user a taste of your design abilities, but also you can use this screen to launch some of your daily routine programs like Daily Backup of the database, checking the link status of the attached tables from external data sources, etc., in the background.

Sample Design

We will look at a simple design of a Startup Screen. The Completed design is shown below with an animated 'Website Address Image' at the center:

Click to Enlarge

We will look at the Form level and control level settings individually. Click on the Image above to look at its design in a bigger window.

NB: All Object specifications on this site are in U.S. Measurements. Those who follow the Metric System, please convert them or change the Regional Settings to the U.S., in the Control Panel on your PCs.

Form Property Values.

Open a new Form and set the Detail Section & Form level Properties as given below:

1. Detail Section Height = 2.85"
2. Back Color = 16777215 (white)
3. Form Width = 5.45"
4. Default View = Single Form
5. Allow Form View = Yes
6. Allow Datasheet View = No
7. Allow Edits = No
8. Allow Deletions = No
9. Allow Additions = No
10. Data Entry = No
11. Record Selectors = No
12. Navigation Buttons = No
13. Dividing Lines = No
14. Auto Resize = Yes
15. Auto Center = Yes
16. Pop Up = Yes
17. Border Style = None
18. Control Box = No
19. Min Max Buttons = None
20. Close Button = No
21. What's This Button = No
22. Allow Design Changes = Design View only

Create a Label with the Caption as shown at the top of the design. Display its Property Sheet and change the following Properties:

1. Fore color = 12632256 (gray color, good for a shadow-like effect)
2. Border Style = Transparent
3. Font Name = Times New Roman
4. Font Size = 18
5. Font Weight = Bold
6. Text Align = Center

Copy the Label and Paste it once again. Position the new copy of the Label slightly up and to the right of the original, so that the earlier label's text will be like a shadow to the new label caption. Change the new labels' property ForeColor = 0 (black) or any other strong color you prefer.

Create another label below it as shown in the design with the caption indicating the Version Number of your Application.

Create a Text Box at the bottom of the design and write the text as shown to display the Copyright information. Set the property Text Align = Center.

Select the Box control from the Toolbox and draw a Box around the design as shown and change the box color to Red. Copy the Box, click somewhere outside the box to de-select it, and paste it one more time. Drag and position the copy slightly up and to the right to look like a double-lined border.

Now, we come to the centerpiece of our design. Here you can insert any picture of your choice like the Logo of your company, WordArt, ClipArt, etc. If you insert WordArt or any other object copied from other Applications you must convert them into an Image after pasting it into the Form. Select the Object, select Change To from Format Menu, and select Image which will show a warning message saying that you cannot edit the Image, after converting, select Yes from the prompt.

In our design I have created a 3D Text, Design, which we have seen in one of the earlier Topics, on a white background, displayed and captured with Alt+Prt Scrn Keys, pasted into MS-Paint, cut and saved on disk in jpg format, and then inserted into the design.

Whatever object you insert, change the following properties to the values given below:

Image Properties.

1. Name = OLE1
2. Size Mode = Zoom
3. Picture Alignment = Center
4. Picture Tiling = No
5. Back Style = Transparent
6. Back Color = 16777215 (white. or change to your design background color)
7. Special Effect = Flat
8. Border Style = Transparent

Save the Form with the name Startup. In the form view, it will look like the sample below, of course after the completion of the programmed animation of the center image. When the Form is open the center image will not be visible and after a few seconds it will Zoom In from the center and end up in its original size as it was originally placed.

Click to Enlarge

Animation Code

Open the Startup Form again in the design view. Display the Form's Code Module, Click the Code Toolbar button, or select the Tools - -> Macro- -> Visual Basic Editor option. Copy and paste the following VB Code into the form module and save the Form:

Option Compare Database
Option Explicit
'Global declarations
Dim i As Integer, h As Long

Private Sub Form_Load()
   Me.OLE1.Visible = False
   h = Me.OLE1.Height / 10
   Me.OLE1.Height = h
   Me.TimerInterval = 100
End Sub

Private Sub Form_Timer()
Dim x As Long
i = i + 1
Select Case i
   Case 1 To 5
      'do nothing
   Case 6
      Me.OLE1.Visible = True
   Case 7 To 15
      x = Me.OLE1.Height
      x = x + h
      Me.OLE1.Height = x
   Case 40
      Me.TimerInterval = 0
      i = 0
      DoCmd.Close
 End Select
End Sub

Private Sub Form_Unload(Cancel As Integer)
    DoCmd.OpenForm "Control", acNormal
End Sub

Select Startup from Tools Menu. Select the Startup Form in the Display Form/Page control. On the left side of Application Title control, you can type a suitable title for your Application which will appear in place of the 'Microsoft Access' Title. If you have an icon file with your company logo or a small .bmp file with the company logo you can insert it at the Application Icon control which will replace the MS-Access Icon on the Application title. You may remove the checkmark from the 'Display Database Window' to keep the database hidden when your Application is open.

When the Startup Screen is closed, the last three lines in the VB Code will attempt to open the Application's "Control" Screen. You must have a Screen named Control (Switchboard) or you can change the name of the form you would like to Open in the following code segment:

Private Sub Form_Unload(Cancel As Integer)
    DoCmd.OpenForm "Control", acNormal
End Sub

Try out your design. Close and open your application and see that your design works as planned.

Download Demo Database.

Download Demo Database

• Opening Access Forms
• Control Screen Menu Design

Read More

Control Screen Menu Design

Introduction

We have seen in the earlier topic on Control Screen Design that we can display several Menus in one place. Let us look into a simple design with 2 Menus and how they can be displayed at the same place interchangeably. We need two Tables, one for Data Files List, and another one for Reports List. You can use the same Table that we have created for the Opening Access Forms topic. Make a copy of it and rename it as ReportList.

The Design Task

1. Open a New Form in Design View.
2. Click on the Tab Control Button on the Toolbox and draw a Tab Control on the new form's detail section as shown below:
   

   Click to Enlarge the Image

3. Click on the second page of the tab control where page2 is shown and display the property sheet. Type Reports in the Caption Property.
4. Click on Page1 and Type Data Files in the Caption Property.
5. Now we need to create a List Box. Before clicking on the Listbox button on the Toolbox ensure that the Control Wizard (the button next to the arrow button) is selected in the Toolbox.
6. When you point the arrow on the Tab control Page, after selecting the Listbox control, the Tab Control Page will highlight with a black background where you can position your Listbox. Draw a Listbox with the size of your choice.
7. The List box Wizard starts up. Select the Data Files Table and select Seq & Desc Fields from the Table and click Next. Select the Seq field for sorting in Ascending Order and click Finish.

   We need to re-organize the List box and the Tab Control as their size and placement have changed. Select the child label of the Listbox and delete it. Click outside the Tab Control and drag the mouse over it (or click on the right of the tab-page projections, right of page2) to select the Tab Control and drag it towards the right, giving enough space on the left side for creating Command Buttons later, if its position was changed too close to the left border. Change the Listbox's size to your liking.

   We are concentrating only on the designing aspect of the controls not running its options from the Listbox, which we have already discussed under the topic Opening Access Forms.

8. Click on the Listbox and display its Property Sheet. Note down the following Property Values:
   • Left
   • Top
   • Width
   • Height

   We need to create a 2nd Listbox on the 2nd Page of the Tab Control. Instead of going through the wizard method, we will do it differently.

9. Right-click on the Listbox on the first page and select copy from the shortcut menu.
10. Click on the 2nd Page (Reports) tab to select it, press and hold the Shift Key then right-click on the tab page and select paste from the shortcut menu. The List box from the first page is copied to the 2nd page. To change its Row Source, display the property sheet and click on the Row source property and select the build (. . .) Button on the right side. The Query Design window is On with the DataFiles Table in it. Click on the Show Table Button on the Tool Bar above and select the ReportList Table. Change the Fields and the Table Names in place of Datafiles table to ReportList Table and Fields. Delete the Datafiles table from the design and close the window to save the changes.
11. Display the Property Sheet of the Listbox on the 2nd Page, if it is not already visible, and change the values of the above properties (Top, Left, Width & Height) to the same value that we have noted down on the first page. Change the Fill Color and the Font Color to something different like blue background and white font color.
12. Select the tab control using one of the methods explained under item 7 (2nd paragraph text in bold italics) above and display the property sheet. Change the following Property values:
    • Name = TabCtl0 (Zero at the end)
    • Back Style = Transparent
    • Multirow = No (default)
    • Style = Buttons

    View the Changes Done So Far.

13. Save the Form and open it in Form View. Because of the above property change, you can hardly say it is a Tab Control. Click on the buttons on the top one after the other to display the Data Files & Report Menus and we can see both the menus are sharing the same space for displaying their contents.
14. If you don't like the Buttons at the top, create two Command Buttons on the left side, one below the other. Name the First one as cmdDF and change its Caption to Data Files. Name the second Button as cmdRpt and change its Caption to Reports.
15. Select the first Command Button and display the Property Sheet. Add a line of code in the On Click Event Procedure:

Private Sub cmdDF_Click()
   Me.TabCtl0.Pages(0).SetFocus
End Sub

Write the following code in the On Click Event Procedure of the 2^nd Command Button:

Private Sub cmdRpt_Click()
   Me.TabCtl0.Pages(1).SetFocus
End Sub

Click to Enlarge

We need to make one more change on the Tab Control's Style Property Value = None.

To make the top Buttons disappear and then save the Form. Open it in the Form view and try out your design.  If you need more menus, you can add more Tab Control Pages

Read More

Control Screen Design

Introduction

Computers were designed for serious business purposes, when they were costing a fortune, not for entertainment. But, this changed in the 80s when Personal Computers were introduced and easily available programs were computer games.

Owning a personal computer was a dream of everyone at that time (even now) and I bought mine too (brand name Spectra Video, Taiwan). Its processor speed was 1.xx something with 84K Memory, (you can call it a Keyboard rather than a computer) with connections to a TV as a Monitor and to a Cassette Recorder for recording Programs(BASIC) or Data. Even now you can see these types of machines in Supermarkets in the Toys section. IBM PCs with 4.77 Mhz. Processor speed and 640K Main Memory, with a cassette recorder priced sky-high, were unreachable for many. 5.25" Floppies & 10MB Hard Disk came with later Versions of XT(Extended Technology), and AT (Advanced Technology) Models.

What I am trying to say here is, that the plaything concept has not changed ever since and it comes as a side dish to serious business needs and it is essential too.

MS-Access is designed for serious data processing needs, but you can make it attractive and amusing to use by incorporating animations, slide shows, and the like useful information from within your application itself (without overdoing it) so that the user doesn't get bored using your Application. It should be user-friendly and attractive too, like the reception area of Five Star Hotels with all the decorations around and ready to serve staff on duty, advertising what kind of service you can expect.

Here, our emphasis is on looking into a sample Control Screen designed with all the important elements of an Application, like Data Entry Screens, Reports, Data Processing, etc., and organizing all of them in a central point within easy reach.

We are not going through the entire design task of this screen, but for now, we will look into only a simple aspect of this screen design and others we will look into later.

The sample Control Screen

Click to Enlarge

The Screen Header Section is decorated with the Company Logo and the Title of the Application in 3D Text and the Version Number below it. Below that, the control area is organized into mainly three categories: Data Files, Reports & Data Upload control. The purpose of this application is to monitor the service expenses of the vehicles, which are in Service Contracts with the company, and used for audit checks. The 'Data Upload' Command Button is used for running procedures for uploading vehicle service data from IBM AS400 Main Frame machines into the System every month.

You can see the Data Files command button is active and its Menu is displayed at the center and a row of buttons on the right side for different categories of Vehicles. When any of these buttons on the right side is clicked its corresponding menu options will appear at the center window overlaying the earlier one.

Why different Vehicle Type has different data files and menus, and why can't all of them go into one Table is a question that naturally comes into one's mind. The Main Data Table is one only, but the data are grouped into different categories to give access to different user groups and keep away from others. The right-side command buttons are enabled or disabled based on which member of the user-groups login into the System. The current user-name is appearing in a small text control below the 'Quit' command button on the left side. As per his access rights, some of the command buttons on the right side are enabled and others are disabled.

When the 'Reports' command button on the left side is clicked a similar set of menus and command buttons will appear at the same place with user-level security features. A total of 15 different menus including the upload command button's menu will be displayed in the same place. We will learn how to organize menus this way under the Control Screen Menu Design topic.

At the bottom of the screen, a white stripe can be seen with blue-colored text. This is a News Ticker-like control, scrolling continuously as a reminder to the user showing details of the vehicles, as an indication that their Service Contract is going to expire this month. The total number of such vehicles is shown underneath it, prompting immediate action for renewals, etc.

As you have already noticed this Screen doesn't have any default control buttons on the top (Min, Max, Close) or the title bar.

The System opens with a Startup Screen (learn Startup screen design here) followed by the Control Screen. The Control Screen stays as if it is pasted into the Application background till it is closed from the Menu, File - - > Close, or by clicking the Quit command button on the Screen. It doesn't have any Border style or re-sizing facility and it has a flat paper-like look. This is achieved with the following Form Property settings:

Form Property Settings.

1. Default View = Single Form
2. Allow Datasheet View = No
3. Allow Edits = Yes
4. Allow Deletions = No
5. Allow Additions = No
6. Data Entry = No
7. Scroll Bars = Neither
8. Record Selectors = No
9. Navigation Buttons = No
10. Dividing Lines = No
11. Auto Resize = Yes
12. Auto Center = Yes
13. Pop Up = No
14. Modal = No
15. Border Style = None
16. Control Box = No
17. Min Max Buttons = None
18. Close Button = No
19. What's This Button = No

Write an Event Procedure on the On Load event:

Private Sub Form_Load()
    DoCmd.Restore
End Sub

When you open your control screen with the above property settings and with the On Load Event Procedure it will look as if the screen is painted in the Application Background.

• Next: Control Screen Menu Design

Read More