Hi all,
I got some interesting research result here, you guys might be interested.
As previous post, the label is rendered, so I use it to guess what
happens when you drop a button into the Flex Builder designer.
In the method viewSkinForPhase() of 'MyButton', I added the following
code before and after the code the new skin class:-
label = "Try to get new skin class...";
var newSkinClass:Class = Class(getStyle(skinName));
label = "We got new skin class :" + newSkinClass;
So, I refresh my Flex Builder design view, it shows "We got new skin
class :null". When I run it, it shows "We got new skin
class:[class...". This seems to be that the custom style 'MyButton'
is not registered with StyleManager when it is in Flex Builder design
view. The null reference to skin class I think is the cause that stop
Flex Builder from rendering it in the design view.
I then go deeper. I used the -keep-generated options to get the style
definition actionscript generated by the compiler:-
var style:CSSStyleDeclaration =
StyleManager.getStyleDeclaration("MyButton");
if (!style)
{
style = new CSSStyleDeclaration();
StyleManager.setStyleDeclaration("KZButton", style, false);
}
if (style.defaultFactory == null)
{
style.defaultFactory = function():void
{
this.downSkin = mx.skins.halo.ButtonSkin;
this.overSkin = mx.skins.halo.ButtonSkin;
this.selectedDisabledSkin = mx.skins.halo.ButtonSkin;
this.cornerRadius = 4;
this.selectedUpSkin = mx.skins.halo.ButtonSkin;
this.verticalGap = 2;
this.paddingLeft = 3;
this.paddingRight = 3;
this.upSkin = mx.skins.halo.ButtonSkin;
this.fontWeight = "bold";
this.selectedDownSkin = mx.skins.halo.ButtonSkin;
this.textAlign = "center";
this.disabledSkin = mx.skins.halo.ButtonSkin;
this.horizontalGap = 2;
this.selectedOverSkin = mx.skins.halo.ButtonSkin;
};
}
I copy and paste the above code snippet into 'MyButton' constructor,
then now it renders in both Flex Builder designer and runtime! I know
it is kind of dirty way, but at least this shows that it is the
StyleManager at design view that does not register my custom style.
Knowing the cause can help me to solve the problem.
Do you think my hipo makes sense?
Thanks.
Best Regards,
Chee Seng
--- In [email protected], "Chua Chee Seng" <[EMAIL PROTECTED]>
wrote:
>
> Hi,
>
> Thank you very much for your reply, but after I compiled the new
> classes into an SWC and add it as Library in a Flex Project, it still
> does not render well. I can see that the label is rendered, but
> without the skin.
>
> It do work when I change the class name to Button, the constructor
> name and the Button.createAccessibilityImplementation call in function
> initializeAccessibility(). And if I use 'MyButton', and provided I
> have a type selector for 'MyButton' in defaults.css, the 'MyButton' is
> well rendered in runtime but not in Flex Builder. If I ommit the type
> selector 'MyButton' in defaults.css, the skin is not rendered in
> runtime as well. This make me wonder how does the Flex Builder choose
> to render control skin in the design view?
>
> Thanks again
>
> Chee Seng
>
>
> --- In [email protected], "nathanbrown19"
> <nathanbrown19@> wrote:
> >
> > Have you compiled your new class into an SWC?
> >
> > You need to do this and then include the SWC in project's library
> > paths before it is viewable in Flex Builder.
> >
> > Step by step:
> >
> > 1) Create a Flex Library project
> > 2) Put your new component in there
> > 3) Check that the component is checked of in the classes tab in the
> > Library Properties
> > 4) Create a new Flex Project
> > 5) In the properties include you ComponentLibrary.swc in the Library
> > Paths tab
> > 6) Now try using the component in your new project
> >
> > You have to do this before Flex Builder can understand your custom
> > components in design mode. It also enables things like custom icons
> > (in the components panel) to start working.
> >
> > Not sure why it worked when it was called Button in your new package!?
> > but hope the above helps.
> >
> > Nathan
> >
> > --- In [email protected], "Chua Chee Seng" <quai83@>
> > wrote:
> > >
> > > Hi all,
> > >
> > > With reference to previous topic of 'Custom Component Render
Problem',
> > > I have successfully compile Button class source file under my own
> > > package name, and it renders well in Flex Builder and runs well
too.
> > > However, if I try to rename the class name from 'Button' to
> > > 'MyButton', it does not render in Flex Builder anymore, and does not
> > > render in runtime too. I suspect it to be CSS problem, so I add a
> > > type selector for 'MyButton' (which same as original 'Button' type
> > > selector) in defaults.css which I used to compile my application
> > > project. After that, it renders well in runtime, but it still does
> > > not render in the Flex Builder. Is there a way to make the
'MyButton'
> > > component to render in the Flex Builder like others built-in
> components?
> > >
> > > Thanks in advance for any help.
> > >
> > > Thanks
> > >
> > > Best Regards,
> > > Chee Seng
> > >
> >
>
