how can i get a title window with all rounded courners, so that i may make it whole round or circular shape ?
i want shape like circle..
set the property: cornerRadius
default is 4
A couple of possible approaches:
If you are using Flex 4 (spark TitleWindow as opposed to the halo TitleWindow) you can create your own skin and assign that skin in CSS. In your custom skin you can draw the background however you want, including an Ellipse set to the width and height of the TitleWindow.
If you don't want to create a skin, or you are using a halo TitleWindow, you can create a circular mask and set it as the mask property on the TitleWindow. The downside to this approach is that you will probably clip the title and the close button (if it is visible), not to mention the contents as well.
Hope that helps, let me know if you need more details on either of these approaches.
Related
I'm trying to skin a canvas with an image (which is essentially a custom border for the canvas). I've been trying the backgroundImage style as well as the borderSkin style. I can't get the image to scale to the full size of the canvas though. I was wondering what the best way to go about this is.
Basically I've been trying this:
<mx:Canvas id="canvas1" backgroundImage="../src/assets/custom_border.jpg" backgroundSize="100%"> CANVAS CONTENT </mx:Canvas>
What's the best way to scale the backgroundImage to the canvas size or is there a better way to go about this such as borderSkin or something else?
You can probably achieve what you're after using Degrafa CSS skinning. If not, you'll need to create a simple custom skin component.
It depends on what you're trying to achieve.
If you are trying to get a really complex border then an image might be the most reasonable way to do check the 9 Slice Scaling in the link below.
http://livedocs.adobe.com/flex/3/html/embed_4.html#186094
Alternatively, if the boarder is relatively simple, you can override the updateDisplayList function and draw the style you want manually:
http://livedocs.adobe.com/flex/3/html/help.html?content=skinstyle_3.html
I'm trying to create a custom tab navigator that has to look like this http://www.freeimagehosting.net/uploads/b470d024c4.jpg.
Also, when there's a rollover, the borders of the arrow have to be in blue (like the label in the current tab).
For that purpose, I've created a custom component: a hbox containing a label and a canvas with 3 images inside (for the arrow tip that has to change depending on the currentState).
Then, I thought of overlapping the components in order to get the blue highlight color (ex: arrow button 3 is over arrow button 4. The image of the arrow tip in button 3 will be transparent outside the arrow, so that we can see the black color of the following button).
I'm now trying to position the components inside the canvas ... but I cannot.
After the creationComplete event, I assign the label text and I was calculating the coordonates of the component but it doesn't take into account the label width... -_-'
Any ideas?
Thanks. Regards,
BS_C3
Read up on the Flex Component LifeCycle. You should be positioning and sizing your child components in the updateDisplayList() method; not in a creationComplete handler.
You should assign the label text in either commitProperties or createChildren depending upon when you know what it is.
If you want to share some code, we may be able to hone in on the exact problem. If you run code like this:
myLabel.text = 'Blahblahblahblah';
trace(myLabel.width);
I would expect that the width has not changed to reflect the new text because the myLabel has not gone through it's own component lifecycle steps yet.
I'm using PopupManager to display (not modal) popups in Flex.
How can I make the background of my TitleWindow popup completely transparent?
Now it is semi-transparent.. see picture with semi-transparent background (i.e. I just want the label inside visible):
http://dl.dropbox.com/u/72686/semiTransparent.png
Maybe, instead of making it transparent I could try to reduce the padding, in order to make only the children visible ?
thanks
If you want to make it transparent, add
borderAlpha="0.0"
If you also want to remove the side and bottom borders completely, add
borderThicknessLeft="0" borderThicknessRight="0"
You can't remove the header, even thought there is borderThicknessTop option.
Also, the borderThickness="0" option doesn't work as far as I know.
Set the backgroundAlpha style of the TitleWindow to 0.
Edit, oops, my mistake, since it's a subclass of Panel, you'll also need to set the borderAlpha style to 0 as well. If you're using the default flex skins, the white arrow is the "background" and the blue area is the "border".
It looks like the "cornerRadius" property of a Panel only changes the top corners and bottom if using a ControlBar. I'd like to specify a corner radius for each of the corners individual.
I know Degrafa can do this but I'd like to avoid if possible. Thanks!
If it's a panel you'll need to set the roundedBottomCorners property to true.
If you need per corner radius you have the option of implementing your own skin using Degrafa or you simply use a mask to do so.
I am having 2 problems creating programmatic skin for Canvas.
First problem:
I would like to have background with rounded corners and I am using GraphicsUtil.drawRoundRectComplex in order to have round corners for only the upper two corners. The problem is that drawRoundRectComplex takes for each corner one single parameter - the corner radius. However my scaleX and scaleY factors are different and in fact the corners are not properly rounded because I either can set the radius using scaleX or scaleY.
Graphics.drawRoundRect is better because it takes two parameters for the corners - elipse width and height and then you could apply both scale factors but it doesn't allow me to specify different radius for different corners.
I am looking for an idea how to use GraphicsUtil.drawRoundRectComplex when scaleX and scaleY are different.
Second problem:
Even though I set my programmatic skin through style - <> the skin's updateDisplayList gets executed only once and after that somehow "backgroundImage" style gets "undefined" and my programmatic skin is not associated anymore to the Canvas instance. As a workaround I am setting on each resize event "backgroundImage" style again but this is ugly.
What could cause such "silent" resetting of the "backgroundImage" style to undefined?
Thanks!
isnt the backgroundImage supported by the RectangularBorder Class?
Rectabgular Border at Adobe AS3 Reference