Text Input field with rounded corner

[Rashmi N]

Hi All,

Can anyone tell me how to make a TextInput field with rounded corners?


--
Regards,
Rashmi

[Prakaz]

Hey Rashmi,

Probably you can extend the TextInput and create a custom component. Inside that you could draw vector rounded corners manually around the InputField by getting the field's width and height. For drawing a rounded rectangle you could use the drawRoundRect() method found in flash.display.Graphics package.

May be not the best way to do it; just a quick idea. Hope it helps.


Regards,
Prakash

[Arul Kumaran]

Dear Rashmi,

 

It is very simple with style properties you need to set borderStyle to "solid" and then set thecornerRadius

 

for example see the following css setting

 

TextInput {
   borderStyle: solid;
   borderColor: #777777;
   borderThickness: 1;
   cornerRadius: 2;
   backgroundAlpha: 1;
   backgroundColor: #555555;
   color: #cccccc;
   fontWeight: bold;
}

 

Regards,

Arul

 

On 4/18/07, Rashmi N <rashmi....@gmail.com> wrote:

[Abdul Qabiz]

Yup most of things can be done via styles, please always look at docs,
it saves time.
Flex 2 is more flexible :-)

[Prakaz]

Piece of cake... I didn't realize that could be done just using styles!

Rock on Flex!

On 4/18/07, Arul Kumaran < arulk...@gmail.com> wrote:

[Subbu]

Hi all,

But Rashmi says having it in the CSS was not working for some reason.

It just draws the rounded corners for the text box and not for the
background.

So we extended the TextInput to have this working.

Thanks & Regards
Subbu

On Apr 19, 9:57 am, Prakaz <mr.pra...@gmail.com> wrote:
> Piece of cake... I didn't realize that could be done just using styles!
>
> Rock on Flex!
>

> On 4/18/07, Arul Kumaran <arulkuma...@gmail.com> wrote:
>
>
>
> > Dear Rashmi,
>
> > It is very simple with style properties you need to set borderStyle to
> > "solid" and then set thecornerRadius
>
> > for example see the following css setting
>
> > TextInput {
> > borderStyle: solid;
> > borderColor: #777777;
> > borderThickness: 1;
> > cornerRadius: 2;
> > backgroundAlpha: 1;
> > backgroundColor: #555555;
> > color: #cccccc;
> > fontWeight: bold;
> > }
>
> > Regards,
> > Arul
>

[Rashmi N]

Hey All.
I have applied a skin for this through CSS.. There is a CSS style name called borderSkin in TextInput. You can make use of this to draw border with dropShadow. Shown as below

borderSkin: ClassReference("BorderForTextInput");

Can anyone tell me how to expose shadow length, strength of the shadow, which I have drawn in the skin class through CSS?
I have actually hard coded the values in the skin file. But I want to make it more flexible by allowing the user to set those styles through the main application.


thanks.

Regards,
Rashmi

[Manish Jethani]

On 4/20/07, Rashmi N <rashmi....@gmail.com> wrote:

> Can anyone tell me how to expose shadow length, strength of the shadow,
> which I have drawn in the skin class through CSS?

In your component class, declare the style in the metadata:

[Style(...)]

Then in your skin code, call getStyle() to get the style's value and
use that value instead of the hard-coded one.

Manish

[Rashmi N]

Hi all,
thanks for your reply.. I have resolved the issue.

Regards,
Rashmi