How do you create a TextInput Skin?
Axel
TextInput...
the skin is just a rectangle... with a stroke, and horizontalLine
representing the little shadow that is in a text input by default
here is the css
-------------------------
TextInput
{
border-skin : ClassReference("com.project.skins.TextInputSkin");
}
here is the skin
------------------------
<?xml version="1.0" encoding="utf-8"?>
<GraphicBorderSkin
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="http://www.degrafa.com/2007">
<!-- fills -->
<fills>
<LinearGradientFill id="backgroundFill" angle="180">
<GradientStop alpha="1" color="#FFFFFF"/>
<GradientStop alpha="1" color="#FFFFFF"/>
</LinearGradientFill>
<LinearGradientFill id="overBackgroundFill" angle="180">
<GradientStop alpha="1" color="#D5D5D5"/>
<GradientStop alpha="1" color="#FFFFFF"/>
</LinearGradientFill>
<LinearGradientFill id="downBackgroundFill" angle="180">
<GradientStop alpha="1" color="#D6D6D6"/>
<GradientStop alpha="1" color="#FFFFFF"/>
</LinearGradientFill>
</fills>
<!-- strokes -->
<strokes>
<SolidStroke id="shadowStroke" color="#6D6F70" weight="1"
alpha="1"/>
<SolidStroke id="borderStroke" color="#D3D5D6" weight="1"
alpha="1"/>
</strokes>
<!-- States -->
<states>
<State name="upSkin">
<SetProperty target="{ backgroundRectangle }" name="fill"
value="{ backgroundFill }" />
</State>
<State name="downSkin" />
<State name="overSkin" basedOn="downSkin" />
<State name="disabledSkin" basedOn="upSkin" />
<State name="selectedSkin" basedOn="downSkin" />
<State name="selectedOverSkin" basedOn="overSkin" />
<State name="selectedDisabledSkin" basedOn="upSkin" />
</states>
<geometry>
<RegularRectangle
id="backgroundRectangle"
fill="{backgroundFill}"
stroke="{borderStroke}"
width="{skinWidth}"
height="{skinHeight}"
/>
<HorizontalLine
x="0"
x1="{skinWidth}"
y="0"
stroke="{shadowStroke}"
/>
</geometry>
</GraphicBorderSkin>
the skin seems to let the text now move more up and left so its no
longer in the middle of the text input...
any advice would help... thanks.
Axel
Josh McDonald
Here's some tips for troubleshooting when things don't seem to be going your way with skinning so you don't have to wait around for a response on the list:
1. Try switching between the different base classes, in this case GraphicRectangularBorderSkin instead of GraphicBorderSkin. If you're skinning a panel for instance, you need to use GraphicPanelSkin.
2. Add a "function get borderMetrics():EdgeMetrics {}" class to your skin. This only works with certain skin base classes though, due to some hardcoded logic in the Flex component base classes. IIRC it'll only be called when using GraphicRectangularBorderSkin and GraphicPanelSkin.
3. If you've tried these, post here or on StackOverflow, and if you get no love, ping me on email or twitter.
Cheers,
-Josh
--
You received this message because you are subscribed to the Google Groups "Degrafa" group.
To post to this group, send email to deg...@googlegroups.com.
To unsubscribe from this group, send email to degrafa+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/degrafa?hl=en.
--
"Therefore, send not to know For whom the bell tolls. It tolls for thee."
Josh 'G-Funk' McDonald
- jo...@joshmcdonald.info
- http://twitter.com/sophistifunk
- http://flex.joshmcdonald.info/
Axel Jensen
Axel
in looks at all... the border metrics is just 0,0,0,0 for top, bottom,
right, and left... which sounded fine to me...
its like the skin by default puts top and left padding in the text
input, and it wiped that style out when i just did:
TextInput
{
border-skin :
ClassReference("com.project.skins.TextInputSkin");
}
so.... i changed it to:
TextInput
{
border-skin :
ClassReference("com.project.skins.TextInputSkin");
padding-top : 4;
padding-left : 4;
}
and it worked alright... looks like the default textinput but now i
can start to customize it...
thanks for the help
On Feb 24, 9:36 pm, Axel Jensen <axelcjen...@gmail.com> wrote:
> Thanks, I'll check those out, I had no clue about rectangular border
> skin and espesially not the panel... I'll try that stuff out and let u
> know, thanks tons
>
> On Feb 24, 2010, at 9:29 PM, Josh McDonald <j...@joshmcdonald.info>
> wrote:
>
>
>
> > The way Flex 3 handles skins is a little bit... Well, a bit...
> > shithouse :)
>
> > Here's some tips for troubleshooting when things don't seem to be
> > going your way with skinning so you don't have to wait around for a
> > response on the list:
>
> > 1. Try switching between the different base classes, in this case
> > GraphicRectangularBorderSkin instead of GraphicBorderSkin. If you're
> > skinning a panel for instance, you need to use GraphicPanelSkin.
>
> > 2. Add a "function get borderMetrics():EdgeMetrics {}" class to your
> > skin. This only works with certain skin base classes though, due to
> > some hardcoded logic in the Flex component base classes. IIRC it'll
> > only be called when using GraphicRectangularBorderSkin and
> > GraphicPanelSkin.
>
> > 3. If you've tried these, post here or on StackOverflow, and if you
> > get no love, ping me on email or twitter.
>
> > Cheers,
> > -Josh
>
> > - j...@joshmcdonald.info
> > - http://twitter.com/sophistifunk
> > - http://flex.joshmcdonald.info/
>
> > --
> > You received this message because you are subscribed to the Google
> > Groups "Degrafa" group.
> > To post to this group, send email to deg...@googlegroups.com.
> > To unsubscribe from this group, send email to degrafa+u...@googlegroups.com
> > .
Josh McDonald
As a rule, you want your skin to have borderMetrics set so that it looks good if padding were 0, then the padding specified in your CSS is "extra".
-Josh