Outlook-style Date/Time with Flex
One of the projects I am working on requires recording the start date/time and end date/time during which a specific task was performed. You might have picked this up given my previous post about a clock component in Flex. I still owe you that component, and I am kicking around a few ideas. In the meantime I thought I would deal with date/time using an already common UI - Microsoft Outlook.
Outlook handles date and time efficiently by using common controls with which the user is likely already familiar. Flex provides similar controls which can be adapted to offer the same behavior. I’ve made the source for this example available for you to examine, but I would like to cover some of the key requirements here as well.
Outlook enforces date/time integrity largely by allowing start date/time to be manipulated freely and by forcing the end date/time to fall into sync. For example, if the current date range is Dec 20, 2004 to Dec 25, 2004, and a start date of Dec 26, 2004 is selected, then the end date will be pushed out an additional five days to Dec 31, 2004. If an end date prior to the start date is selected however, then an error occurs.
Time selection works in a similar fashion save the combo box control that represents the end time is controlled dynamically at runtime to physically enforce a selection that is after the start time. When a start time is selected, a combo box representing all the hours in the day is shown (divided into thirty minute increments). You are free to select any time you wish.
Once a start time is selected the combo box control representing the end time is emptied and refilled dynamically based on the selection made. For example, if a start time of 8:00 AM is selected, which is the seventeenth index in the combo box, the first index in the end time combo box will be 8:00 AM. This shift makes it impossible for you to select anything earlier than the start time.
The difference in time is also maintained which is on par with the start/end date fields. If the time range currently selected is 8:00 AM to 10:00 AM, and 9:00 AM is selected as a new start time, not only will 9:00 AM be the first index in the end time control, but the selected index will mirror the original two-hour range and show 11:00 AM.
In the following Captivate demo I’ve tried to capture these nuances as represented by my example Flex application.
Managing data integrity by forcing selection is a solution we rarely consider in the HTML web application world, but that is more easily accomplished using RIA. The trick is in not going so far as to utterly distract the person using the application. The solution offered by Microsoft Outlook as described here is very subtle, but would the effect be the same if we were making fields appear and disappear every time a selection was made or value was entered? Food for thought when you reach for the “visible” property in your next application.