New DateField Component with the BackgroundColor Property. Explanation

This post is continuation of the previous post.

How to do this:

Create a lib project with a new Class which extends the DateField Class and the required .swc file is created in the bin folder.

Now we need to include one .as file which defines all the required properties for the DateField Component.

The .as file is already available for the TextInput component, which defines the required border properties. So all we need to do is get that file and include it in the NewDateFiled Class.

The .as file is and it is present in the sdk’s at

C:Program Filesflex_sdkframeworksprojectsframeworksrcmxstylesmetadata

Now get this .swc file generated [lib] into the your projects [paste it in your projects lib folder ] and drag the NewDateField component from the custom folder from the design view.

Now you can see the new properties included in the NewDateField component.

The below image shows the New DateField component with BackgroundColor property.

Enjoy the post ! comments are welcome for queries ..


4 Responses to New DateField Component with the BackgroundColor Property. Explanation

  1. marcus says:

    thank for the tip. one quick question though: in reference to the, what exactly do you mean by “include it in the NewDateFiled Class?”

  2. marcus says:

    issue resolved. when i would use the “include” directive with the, flex would throw an error: “[Style] must annotate a class.” the fix is to pull out the style tags and place them in the NewDateField class. here’s an example:

    package {
    import mx.controls.DateField;

    [Style(name=”backgroundAlpha”, type=”Number”, inherit=”no”)]
    [Style(name=”backgroundColor”, type=”uint”, format=”Color”, inherit=”no”)]
    [Style(name=”backgroundDisabledColor”, type=”uint”, format=”Color”, inherit=”yes”)]
    [Style(name=”backgroundImage”, type=”Object”, format=”File”, inherit=”no”)]
    [Style(name=”backgroundSize”, type=”String”, inherit=”no”)]
    [Style(name=”borderColor”, type=”uint”, format=”Color”, inherit=”no”)]
    [Style(name=”borderSides”, type=”String”, inherit=”no”)]
    [Style(name=”borderSkin”, type=”Class”, inherit=”no”)]
    [Style(name=”borderStyle”, type=”String”, enumeration=”inset,outset,solid,none”, inherit=”no”)]
    [Style(name=”borderThickness”, type=”Number”, format=”Length”, inherit=”no”)]
    [Style(name=”cornerRadius”, type=”Number”, format=”Length”, inherit=”no”)]
    [Style(name=”dropShadowEnabled”, type=”Boolean”, inherit=”no”)]
    [Style(name=”dropShadowColor”, type=”uint”, format=”Color”, inherit=”yes”)]
    [Style(name=”shadowDirection”, type=”String”, enumeration=”left,center,right”, inherit=”no”)]
    [Style(name=”shadowDistance”, type=”Number”, format=”Length”, inherit=”no”)]

    public class NewDateField extends DateField {

    public function NewDateField() {

  3. Sri says:

    Hi ,

    I am not able to set the background color of the datefield, could you please post ur code as a zip.Will be of great help.Thanks in advance

  4. rick otton…

    […]New DateField Component with the BackgroundColor Property. Explanation « flex on blog – by kumar[…]…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: