If I skin a button and use the AS3 graphice.clear() and graphics.lineTo and beginFill to create a shape, the button overlaps other items in the container.
When I use the and mxml to create the same shape, the button is neatly positioned inside the container.
Why is that?
This is probably happening because Flex is unable to calculate the size of your dynamically drawn button, while the MXML version allows the size to be calculated prior to being displayed. You may need to override the measure method to calculate the width/height. If that's not the issue, then post some code so we can take a closer look. Hope that helps.
Because the Line Object is doing a bunch of checks and extra work you aren't doing when you use the Graphics object. Look at the code for spark.primitives.Line to see what its doing that you aren't.
Related
I'm using Dojo GFX to do some simple drawing, but having a problem with IE 7/8 (switching browsers is not an option).
If I create a div, set up a surface and draw some rects, they draw correctly relative to the div, so far so good.
However, what I want to do is create a widget, something with an embedded 'surface' that draws based on some widget-specific data. As such, I have a widget that contains a div, and I draw into this div. When I do that, the rects I create behave as if they are responding to a float:right, appearing in order they are created and ignoring the 'x' parameter.
I assume that this behaviour is something to do with CSS, but I haven't got to the bottom of it yet. Any ideas or solutions gratefully appreciated!
Updates:
I've disabled all stylesheets and I am not using style attributes. No difference to the behaviour.
I've inspected the markup that gets generated using IE8 dev tools. Apart from the different location of the containing div, the only difference I can see is that the v:roundrect elements have no child elements when created against the widget div, but they do have empty elements like stroke when created against the div referenced by ID.
Reading back through the docs, a difference I can see that might be responsible is that the postCreate method where I am doing my drawing is manipulating a div that has not been added to the dom yet, whereas drawing on a hardcoded div is done when it does exist. Maybe the difference in rendering is something to do with this? Is there a specific lifecycle function which is appropriate to draw in for widgets?
It seems that if you are going to use Dojo GFX and draw on DOM elements that are created as part of a widget in IE7/8, you must actually do the drawing in an override of the startup() method.
Drawing in the postCreate() method causes incorrect rendering resembling a float: left.
I am creating a component that will be a large plus or a large minus. I don't want to use a bitmap because even I can draw this using the Graphics class, but the component must be clickable (the Shape class is not).
It will be part of an item renderer, so I want it to be as light-weight as possible. UIComponent does not seem to sent CLICK messages.
Thanks for any ideas
I would suggest creating a Sprite object and drawing the minus and plus arrows to its graphics object. You'll then have to addEventListener(MouseEvent.CLICK, someFunction); in its constructor or wherever else you'll need it.
You may also want to set cacheAsBitmap to true at that point, so that it's not redrawn every frame.
EDIT: Per #jeremynealbrown you have to use the SpriteAsset class if you are working in Flex, apparently. Very similar, but another 2 levels of abstraction are added.
If you look here:
UIComponent Docs
You will see that UIComponent has InteractiveObject in its inheritance path. InteractiveObject is the class that adds mouse event functionality.
UIComponent will actually dispatch click events. However, if there is no content drawn to the graphics, the UIComponent will have no area that can be clicked. If the plus or minus icon you draw is too small to reliably catch mouse activities, then draw a fully-transparent rectangle to increase the hit area.
For those of you who haven't been reading my Qt questoins, I am learning Qt for a project. I have only limited experience with GUI design at all, and not in Qt.
I've got a horizontal layout that I want to populate with some buttons. I can feed these buttons in just fine, but my formerly-square buttons are stretched horizontally to take up more space.
I want to let the layout manager determine the best way to size these buttons, but I also want their original proportions to remain intact. For instance, if I start would with 32X32 buttons that need to shrink to fit all of them in the layout, I want them to shrink proportionally so that the width to height scale is maintained. 20X20, 16X16, 12X12 would all be just fine, but 24X16 would be an example of dimensions that are unacceptable.
I've tinkered with size policies on the buttons and stretch options. I'm not seeing, even after reading the QPushButton and QHboxLayout classes how to do this. How is it accomplished?
Thanks.
As long as I understand the question correctly, I think what you want is QBoxLayout::addStretch(). This will add a spacer object that fills the unused space. So the buttons will have their ideal size and the spacer will fill the rest. You can try experimenting with this in Designer, it's easier than the write/compile/run cycle.
You should take a look at the answers to this question. This is a recap of my answer there.
You need to create a custom derivative of QLayoutItem, which overrides bool hasHeightForWidth() and int heightForWidth( int width ) to preserve the aspect ratio. You could either pass the button in and query it, or you could just set the ratio directly. You'll also need to make sure the widget() function returns a pointer to the proper button.
Once that is done, you can add a layout item to a layout in the same manner you would a widget. So when your button gets added, change it to use your custom layout item class.
I haven't actually tested any of this, so it is a theoretical solution at this point. I don't know of any way to do this solution through designer, if that was desired.
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.