Is there a way in Flex by which a disabled canvas looks exactly the same
as an enabled canvas? I haven't been able to make sense of disabledOverLayAlpha
and disabledColor properties for a Canvas component.
# Michael Todd: There are many imaginative ways to show disabled status rather than using the default disabled over colour. For instance, you may want to disable a Canvas, but would prefer the child components to be bound to their parent and display their disabled states rather than make light of a container that the user may not even know exists and may cover an inappropriate area in comparison to the content at any given time.
# dta: I'm working with a Canvas that will be dynamically enabled/disabled right now, the disabledColor property does not effect the colour of the disabledOverlay, use backgroundDisabledColor instead, setting disabledOverlayAlpha to 0 does make the disabledOverlay entirely transparent - thus the enabled and disabled states of the component look exactly the same. The disabledColor property changes the colour used by the Canvas's textFormater.
Running Flex SDK 3.4
Related
I have this problem where the scroll bar's thumb is too small when I apply a skin programmatically. There's no problem when I apply it in the CSS.
main.css:
.myscrolls {
thumbUpSkin: Embed(source="thumb-default.png",
scaleGridLeft="7", scaleGridTop="5", scaleGridRight="8", scaleGridBottom="7");
The above looks fine, but if I try to change the thumb programmatically in the ActionScript later, the thumb is too small, which causes enormous margins between the thumb and the ends of the scroll bar.
ScrollbarColour.as:
[Embed(source="thumb-non-default.png",
scaleGridLeft="7", scaleGridTop="5", scaleGridRight="8", scaleGridBottom="7")]const cThumbNonDefault:Class;
The problem is most likely related to this warning that I get about the above line:
ScrollbarColour_cThumbNonDefault does not extend the 'DefineSprite' asset base class 'flash.display.Sprite'
But if I take away those scaleGrid* members from the ActionScript, the warning goes away.
I used the Flex 3.5 SDK.
However, I made all those Embeds on the stack. If I made them (static) members of ScrollbarColour, I was able to get those attributes to work. I really don't get this language.
I want to introduce a canvas component by zooming from a height & width of 0.0 to 1.0. I want the component to be invisible until the zoom begins and then for it to be visible when it begins zooming.
However, if I bind the zoom effect to a showEffect trigger on the component and then make the component visible, it will first show the component at its regular size for a split second before it begins the zoom effect. If I combine the zoom effect and setting the component visible together in a parallel, it will also flash the component at its regular size for a split second before the zoom. If I make the component visible when the zoom effect starts through its effectStart event, it still does it. Does anyone know how to make it visible only when the zoom effect begins so that it doesn't flash the component at its regular size for a split second before the zoom effect?
It'd be easier to provide suggestions if you were giving us code.
That said, the reason the component "Flashes" at full size before the effect starts probably relates to the positioning and sizing of the component before the effect starts. So, before you start the effect just set the height and width of the component to the zoomHeightFrom and zoomWidthFrom of the effect.
These things can be tricky to debug, though. Especially without code.
Found an easy solution: Put the zoom effect and set property action, which sets the component to visible, in a Parallel together but add a nominal start delay of 50 ms to the set property action.
I want to create an MXML container component that has some of its own chrome -- a standard query display, et al -- and that supports the addition of child components to it. Something a lot like the existing mx:Panel class, which includes a title label, but acts like a plain mx:Box with regards to adding children.
What's the easiest way to do this?
Edit:
To be clear, I want to be able to extend the container using MXML, so the "Multiple visual children" problem is relevant.
Extend a container and add a title label. Probably the <mx:Canvas/> will work here. Make the title a public var and include a var for the styleName of the label.
Then override the addChild() method so that any child that is added is added instead to the that is your container.
Leave enough space for your title when you position your Box element (i.e., give its y property enough space. If there is no title you may want to reclaim that space.
That's the basics. Customize to your heart's content.
EDITED TO ADD: I do this creating an ActionScript class first, extending the container I am targeting, and I add the "furniture" — items the class will always use, like title in your case — by overriding createChildren and calling super.addChild(item) for those items. Calling addChild from then on, even in MXML markup, adds items to the inner container.
We do this with states.
We put the chrome for the base container in a state (in mx:AddChild elements) and then use the initialize event to switch to that state when the control is created. All the chrome is then added to the container.
That gets round the multiple sets of visual children problem.
The downsides to this approach are:
You don't see the chrome when editing descendents of the base.
You can't directly access the parent chrome controls from descendent components as they are not there at compile time (instead, you need to define properties, methods or events on the base that the descendents can access)
However, it works well for us.
If I have an object in a layout in Flex what is a good way to 'break it out' of that layout to be able to animate it.
For instance I have an image and a caption arranged at an angle. I want to make the image 'zoom out' slightly when the mouse rolls over it. Since its in a layout container is active if I were to resize it then obviously it would move around everything else.
I dont think I can achieve what I want by just setting includeinlayout=false.
Any experience with best practices on this?
My best idea I'm wondering about is making the image invisible and creating another image at the same location by using the screen coordinate conversion functions. This jsut semes clumsy
Wrap your object in a fixed size Canvas so that the layout upstream will remain the same. Then position the object manually within that container and then set its includeInLayout to false. At that point, you could do whatever you wanted with the interior object. Oh, also set clipContent to false. This should work whether you want it to grow or shrink.
If this is an itemrenderer or something that you've wrapped into a class, you could handle all of this in the class definition and make it transparent to consumers of the object. You'd also be able to write a mouseOver function that did what you wanted with the interior object that should zoom.
What is the best way to change/set a registration point on a Flex 3 display object? I know this isn't really built in to easily change, but does anyone have any suggestions on how I could extend UIComponent to achieve this?
For some reason, the Flash Player API doesn't expose the registration point of DisplayObjects (and the Flash IDE makes them a pain to modify once an object is created). The best solution, as David pointed out, is to add your component as a child of another component (UIComponent would be fine). So, for example, if I had a Button and I wanted its registration point at its center, I'd add it as a child of a UIComponent (not Canvas) and offset the child by setting its position to (-button.width/2, -button.height/2).
Put your DisplayObject inside a sprite and set the DisplayObject's x & y positions to the negitive of your target registration point. Apply all transforms to the Sprite container.
Put it inside a Canvas container, with its clipContent attribute set to false. Within the canvas, you can put your object wherever you like.