Dynamic Pop-Up Calendars in Maintain Applications

By Mark Derwin

Wouldn't it be great if you never had to validate a date field? Well, thanks to Maintain you may never have to again. Wouldn't it be easier to give the user a calendar to select a date instead of having them type one in? You will never have to worry about invalid dates or formats again.

A great thing about the technique I'm about to share with you is that it is all done with JavaScript. This way, the application won't have to return to the server to make a date selection. All this can be done with only three JavaScript files and one CSS (Style Sheet) file, which are included with the product.

To get started, create a new project folder from the Desktop. Locate the following three files: browserSniffer.js, dynCalendar.js, and calendarInit.js and copy them into the new project directory. These files are located in IBI\DevStudio52\ibi_html\javaassist\ibi\html\maint.

Next, locate the mnt_blue.css file and copy it into your new project directory. It is at IBI\DevStudio52\Templates\Skins\Mnt_Blue\mnt_blue.css. Please note, you can take Blue, Red, Green, or None from the Skins directory. The CSS file determines the look and layout of the form. For the Calendar technique, we only need the last eight paragraphs of this file. It starts with dynCalendar_header and goes to the end of the file. You may edit and rename this file.

Once all the files are in the directory, return to the Desktop, and edit the Project Filters, so JavaScript (JS) files can be seen in the folder. To do this, right-click the project name and select Properties. Select Edit Filters and add New. Select or enter JS. Apply and exit. The three JavaScript files should now appear when you click on the project name.

In order for the calendar to pop up, your datasource must contain a date field. I am using the Movies sample file. I have copied the Master and FOCUS file and placed it in my project directory. I have also included the Master in my project.

Select Maintain New and enter the MDE.

Bring up a form and adjust the MDE so you can see both the form and the list of JavaScript files from the desktop. One at a time, and in this order, drag the JavaScript files onto the form. First browserSniffer.js, then dynCalendar.js, and then calendarInit.js. You are told that they are being attached to the form. If you look at the objects under the name of the form, you will see the three JS files.

The last thing you need to do is assign the CSS file to the form. To do this, enter the following:

winform show_inactive form1;
form1.cssname = 
'/approot/calendar/mnt_blue.css';
Winform Show Form1;

The winform show_inactive command allows you to operate on the form before it is displayed. Then assign the CSS file to the form. My project was named Calendar. You should change the name to reflect the path and name of your project.

All that's left is placing a stack or field on the form that contains a date field. When you run the application, a calendar icon automatically appears next to the date field. Clicking it brings up a calendar from which the user can select. The date field is automatically updated with the selected date (see Screen 1). The selected value respects whatever date format is assigned to the field. A calendar icon appears for every date field on your form.

If you don't see your calendar when you run your application, please make sure that you assigned the three JavaScript files in the correct order, assigned the CSS file before the Winform Show, and included the proper path to the CSS file.

I hope this technique makes your Maintain application programmer even easier.