Uniface Sample: Date Picker

Uniface 9.6.01
Sample Version: 1.0
December 2012

Demonstrated Functionality
Files
Knowledge Prerequisites
Environment Dependencies
Steps
1. The Edit Box
2. The Button
3. The Popup Form
More Information



Demonstrated Functionality

This sample demonstrates how to make your own Date Picker using a Popup Form and the Month Calendar widget.

This sample does not demonstrate how to:

Sample Description

The sample consists of a form that shows a date in an Editbox widget and a button with a picture of a calendar on it. If you press this button a Popup Form with a Month Calendar widget pops up, allowing you to select a date. You can click the numbered buttons to see the relevant part of this Readme file.

Screen:

Files

This sample consists of the following files:

File name

Description

u96_simple_datepicker_readme.htm

This file

u96_datepicker.xml

Uniface export file containing:

Object

Name

Description

Form

U96_DATEPICKER

The main form of this sample.

Form

U96_DATEPICKER2

The popup form with the month calender widget.

u96_datepicker.png
u96_datepicker_calendar.png
u96_datepicker_info_1.png
u96_datepicker_info_2.png
u96_datepicker_info_3.png
u96_datepicker_info_active.png
u96_datepicker_info_default.png
u96_datepicker_info_focus.png
u96_datepicker_info_hover.png
u96_datepicker_s1.png
u96_datepicker_s3.png
u96_datepicker_screen.png

Pictures that are used in this sample.

Knowledge Prerequisites

To use this sample, knowledge of the following topics is assumed:

Uniface Subject

Knowledge Level

Uniface development

Basic

Uniface Proc code

Basic

Environment Dependencies

This sample runs only on Microsoft Windows platforms.


Steps

  1. Add the following line as the first line in the [FILES] section of your IDF assignment file.
    u96*.*     .\samples\u96*.*
  2. Create a subfolder samples in your projects folder.
  3. Unzip the file u96_datepicker.zip and place all its files in your samples folder.
  4. Import the Uniface sources.
    /imp u96_datepicker.xml
  5. Compile the Uniface sources.
    /all u96_datepicker*
  6. Run the sample from outside the Uniface Development Environment
    /tst u96_datepicker
  7. Test the form.
    The form will show an editable date field with a small button with an image of a calendar. Press the button and a calendar will show. Choose a date and you will see the date in the field has changed. Click the numbered buttons to see the relevant sections of this readme file.
  8. Examine the Forms in the component editor.

The Edit Box

The edit box that is used here is a plain edit box with a date field.
Field properties
  • Inital Value (to set a default date)
  • Data Type=Date
  • Layout (display format for a Dutch date)
Widget properties Not applicable

The Button

To make it look like a date picker a small button with a calendar icon is painted next to the date field.
Field properties
  • Data Type=String
Widget properties
  • Representation=Uniface
  • Default Image (to set the image)
Detail trigger

In the Detail trigger a newinstance creates a popup form and positions it at the bottom right of the button, extending down and to the left.

newinstance "U96_DATEPICKER2", "DATEPICK", "POSITION=BOTTOMRIGHT_DOWNLEFT"

activate "DATEPICK".Exec(DATEOFBIRTH.DUMMY)

The Popup Form

The form U96_DATEPICKER2 is defined as a popup form. A month calendar widget is painted on the form.
Window Properties
  • Window Type=Popup
Field properties
  • Widget Type=MonthCalendar
  • Data Type=String
Widget properties
  • Representation=Uniface
  • Default Image (to set the image)
Execute trigger The input date is assigned to the calendar.
The edit statement shows the screen
The /modal option makes that this window keeps the focus
Value changed trigger When you select a date, the value changed trigger fires.
In the Value Changed trigger is a macro "^accept".
Accept trigger This trigger is empty so control passes back to the Execute trigger
Execute trigger Code execution continues in the Execute trigger after the edit statement.
The value of the calendar is assigned to the INOUT parameter.

More information