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 BorderStyles.as and it is present in the sdk’s at

“C:\Program Files\flex_sdk\frameworks\projects\framework\src\mx\styles\metadata”

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 ..

This entry was posted on Tuesday, May 27th, 2008 at 7:18 am and is filed under Flex related, custom components. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “New DateField Component with the BackgroundColor Property. Explanation”

  1. marcus Says:
    June 4, 2009 at 3:42 pm | Reply

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

  2. marcus Says:
    June 5, 2009 at 12:34 am | Reply

    issue resolved. when i would use the “include” directive with the BorderStyles.as, 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() {
    super();
    }
    }
    }

Leave a Reply