Vertical Align Text in Date Field - Flex


The article is about DateField in Flex. Well not exactly about the usage of DateField at various situations, but about an issue I faced during a program and the solution I have found. The solution provided here is just a work-around and may not be suitable in some situations. Presented here are the own views of the author. That's me!

The requirement I received is that a Date has to be input, along with one other field. The design of the form has been started and the code for the simple form is,

<s:Label x="100" y="50" text="Text" width="50" height="30" verticalAlign="middle" />
<s:TextInput x="150" y="50" width="100" height="30" />
<s:Label x="100" y="100" text="Date" width="50" height="30" verticalAlign="middle" />
<mx:DateField id="startDate" x="150" y="100" width="125" height="30" />

And the output is,

The thing to be noticed here is that the text in the TextInput is aligned in the middle, but not the DateField. I tried adding the verticalAlign property to the DateField, but got the following error

Error: Cannot resolve attribute 'verticalAlign' for component type mx.controls.DateField.

The form was not uniform throughout. So, started Googling for a work around to make the text aligned to the middle. But, most of them talked about Skinning the control, Applying a CSS Style Declaration to the control. And for me it would took a lot more time to read about those and implement then without bugs. Because, I am very new to the Flex framework and also having little time for the implementation. 

After few hours of research, came to a conclusion about the implementation. The DateField is basically a combination of Text Input and the Date Picker. So the idea is to replace the text field in DateField with a separate TextInput. I mean to place a TextInput over the DateField hiding it, and whenever a date is selected the text property of the TextInput can be replaced with the selected date. It was not as simple as I thought, and have gone through back to back issues and finally did it. The issues I faced and the corresponding solution is presented in the post.

1. Hiding the DateField with TextInput
The basic problem here is the width of the TextInput, it should hide only the input area in the DateField, not the Calendar icon on to the right side. After few experiments found that a TextInput with 

width 25px less than the DateField would be enough. And the code added below the above shown.

<s:TextInput id="hdnDate" x="150" y="100" width="100" height="30" />

But the following issues happened
  • The TextInput can be focussed apart from the DateField
  • Can type data into the text field

The problem is shown in the following figure



2. Disable the text input
To overcome the aforementioned issues, the text box can be disabled. And it seems like the very first problem, there is no proper alignment of DateField.

<s:TextInput id="hdnDate" x="150" y="100" width="100" height="30" enabled="false" />




3. Increase the alpha
The above problem is due to the transparency of the control. Increasing the alpha would be the solution. alpha = 1 did not work, but alpha = 2 did.

<s:TextInput id="hdnDate" x="150" y="100" width="100" height="30" enabled="false" alpha="2" />




With these fixes, proceeding to the next step. That is, displaying the selected date in the text box. The following code does that

import mx.events.CalendarLayoutChangeEvent;

startDate.addEventListener(CalendarLayoutChangeEvent.CHANGE, date_change);


public function date_change(event:CalendarLayoutChangeEvent):void

{
    var selected_date:String = new String();
    selected_date += event.currentTarget.selectedDate.getDate().toString() + "/";
    selected_date += (event.currentTarget.selectedDate.getMonth() + 1).toString() + "/";
    selected_date += event.currentTarget.selectedDate.getFullYear().toString();
    hdnDate.text = selected_date;
}

And there you go, the DateField vertically aligned:)




There are other solutions possible.

See also,

No comments:

Post a Comment