I have been trying (but to no avail) to set the background color of a legend item in Flex to a color of my choosing.
Unfortunately, it doesn't seem to be working.
I obtain a reference to the legendItem in question and then set the fill style like so:
var legendItem:LegendItem = event.item;
var legendItemColor:SolidColor = new SolidColor(0x00FF00, 0.5);
legendItem.setStyle("fill", legendItemColor);
I am able to set other styles of the legend item but, for some reason, this isn't working.
Any help would be greatly appreciated.
Thanks in advance.
Check out this example http://blogs.adobe.com/flexdoc/2008/07/customized_legend_layout.html
Managed to get the effect I was looking for by setting the opaqueBackground property of the legendItem.
legendItem.opaqueBackground = 0x00FF00;
Doesn't really make sense and I had even found an example where setStyle of fill was used and seemed to work for them.
Oh well, as long as it works!
Related
Using code (not the Interface builder) I need to create an NSButton that looks like an image. Specifically I want to use NSImageNameStopProgressFreestandingTemplate and I need it not to look like button but to look like the image. This means:
1. No 'button down' look
2. No border, no any visibility of the button
Thanks.
I know this response is a bit late, but you could try this, given thisButton:
[thisButton setImage:[NSImage imageNamed:NSImageNameStopProgressFreestandingTemplate]];
[thisButton setImagePosition:NSImageOnly];
[thisButton setBordered:NO];
That last line is the key bit: removing the button border effectively strips it of its bezel, leaving only the image to click on. (BTW, I haven't tried the above code specifically, so you may need to throw in a couple of other tweaks, such as setting the imageScaling or buttonType, to get it to work best.)
One final note: If you're using a template image (as you said you would), Cocoa will automatically display it with a slight dark-grey gradient; when the button is clicked, it will momentarily darken to solid black. This is an automatic "'button down' look" you didn't want; however, it is very subtle, and is a good indicator that the button worked. If you don't want this to happen, you could get an instance of the desired image and [stopImage setTemplate:NO]; on it.
Disable isBordered
let button = NSButton(
image: NSImage(named: NSImage.Name("plus"))!,
target: self,
action: #selector(onButtonPress)
)
button.isBordered = false
If you don't want to use a templated but want the push down highlight anyways, you can also use the following setup for an NSButton:
let imageButton = NSButton()
imageButton.image = NSImage(named: "MyImage")!
imageButton.bezelStyle = .shadowlessSquare
imageButton.isBordered = false
imageButton.imagePosition = .imageOnly
The important thing to make the highlight work on any image is to set bezelStyle to shadowlessSquare.
I know this behavior wasn't requested in the question, but it might be useful for others.
I'm having difficulty with Flex charts. I'm working on a complete rewrite of a flex app that has a fair bit of charting involved, and I've been instructed to get the look and feel as close to the previous version as possible (for the initial release).
I can't seem to find the style property which dispays a blue, tabbed sort of effect of the chart axes. As I don't have the rep to post an image, I'll direct you to the adobe live docs 'using line charts' page (sorry, I can only post one link because of the anti spamming mechanism, see link in the edit below) - the effect is present on the vertical axis of the chart at the top of the line charts examples page.
It seems to be some kind of default setting, but I have not been able to pin it down, not even when copying chunks of the old code.
If anyone has any ideas as to how to get hold of this style, or as to what could be removing this style, I'd be extremely grateful.
Thanks for reading.
Edit:
Sorry I will try to clarify:
If you look at the chart at the top of the using line charts page in the Adobe Live docs, the vertical axis has a thick, blue tabbed style, but the horizontal axis does not.
I am trying to gain control over this blue tabbed style - specifically I want to make it appear on the horizontal axis and remove it from the vertical axis of a line chart. However, I cannot find the property which sets this style.
I know it is possible to alter this style, as I have seen examples of charts with the look I need, however there does not appear to be an obvious way to alter it.
I hope this is a bit clearer. Thanks.
The blue bar that comes by default is a stroke. The white divisions within it are minor ticks.
To style it differently, you need four parts:
a chart (e.g. LineChart)
an Axis (e.g. LinearAxis)
an AxisRenderer
a Stroke (e.g. SolidColorStroke)
Then you'll have to connect these parts:
var chart = new LineChart();
var vAxis = new LinearAxis();
var stroke = new SolidColorStroke();
stroke.caps = CapsStyle.NONE;
stroke.weight = 1;
stroke.color = 0x000000;
var axisRenderer = new AxisRenderer();
axisRenderer.axis = vAxis;
axisRenderer.setStyle("axisStroke", stroke);
// Only if you don't want minor ticks to display:
axisRenderer.setStyle("minorTickPlacement", "none");
chart.verticalAxis = vAxis;
chart.verticalAxisRenderers = [axisRenderer];
You'll find more on the topic here: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c65.html
Its not enough clear for me, what do you want, but if you are looking for styling of charts look this, but if something about axis look this.
Anyway you should explain your goals, so we could help you.
Does anybody know how to change the color of GridGroupByExpression arrow shown at the link below?
http://demos.telerik.com/aspnet-ajax/grid/examples/groupby/outlookstyle/defaultcs.aspx
I haven't figured out how to change the color from the default black. I'd like to change the several I have in my project to white (in the above demo it's a shade of blue) but I have no clue how to pull this off (the demo doesn't show how to change it), so if anybody knows how I can accomplish this I'd greatly appreciate it. Thank you in advance.
The easiest thing to do would be to just subscribe to the OnColumnCreated event and use the following code-snippet:
if (e.Column is GridGroupSplitterColumn)
{
(e.Column as GridGroupSplitterColumn).ExpandImageUrl = "image.gif";
(e.Column as GridGroupSplitterColumn).CollapseImageUrl = "image.gif";
}
The images that are used for these groups are the "SingleMinus.gif" and "SinglePlus.gif" images that you can find within the local Telerik install folder. They should be found in the Skins/[Skin Name]/Grid/ folder.
#Kswift : we can not change the colour of an image , we have to use the OnColumnCreated event what Carl suggested ,if you want to change the color of an image , you can do it with any photo editor and than use the above method to bind with the grid.
I have a handful of sprites that I am attempting to group together via addChild().
Here is some pseudo-code demonstrating what I would like to accomplish:
import nav.text.TextSprite;
spr1:Sprite = new Sprite();
spr1.graphics.clear();
spr1.graphics.beginFill(0x000000);
spr1.graphics.drawRect(0,0,100,100);
txt1:TextSprite = new TextSprite;
txt1.text = "hello";
spr1.addChild(txt1);
//this is what isn't working: the sprite is hidden but not the text
spr1.alpha = 0.0;
For some reason I cannot seem to get the TextSprite to draw correctly... All it is is a Sprite with a TextField added to it. I think everything is working there, but I might have something wrong w/r/t making sure all of TextSprites children are grouped correctly.
I should mention that it does position correctly; but the alpha property won't respond in the way I would expect it to. I.E., the sprite that the TextField is attached to will allow it's alpha to be set but the text remains visible.
Any thoughts?
Most likely you just need to embed the font in your textfield. Try changing the x, y of spr1 and see if txt1 moves along with it. If it truly is a child then it will respond to the new position.
You need to embed the font using textfield.embedFonts = true. If your text is disappearing when you do this, how are you going about embedding the font (using the Flex embed meta tag or using the Flash IDE?), check that you are not changing the font weight (setting the text to bold when you have only embedded the normal weight font) and if you are using a text format, be sure to apply the text format AFTER you set the textfield.text property. You can get around this by using textfield.defaultTextFormat.
I have a line chart that sometimes contains a number of data points. I have solved how to prevent the horizontal axis from displaying too many labels using custom label functions and data functions. My problem is forcing the AxisRenderer not to scale down my labels.
I'm using the labelRotation property so the canDropLabels and canStagger properties are not an option.
Thanks in advance for any replies.
Try use gutter, gutter set are for the axis labels (if you want u can try to read the code of the AxisRenderer, and see how it use the gutter and other parameters to scale if need the text.
You can set the gutter by style like this (this work for me):
LineChart {
gutterLeft:50;
gutterRight:50;
gutterBottom:50;
}
I believe this can be done by editing the labelRenderer property. Take a look at the second example on this page (Formatting charts), they define a custom component to use as the label. You can do something like that to maintain whatever look you want.
I ran into the same issue. In my case (for the data that I'm plotting), simply setting canDropLabels to true (either in ActionScript or MXML as below) resulted in widening the margins allocated (I'm guessing) to the label text in the chart such that I never saw the text render smaller than set by fontSize below. Try it, it may be all you need.
hAxisRenderer.setStyle("canDropLabels",true);
...
<mx:AxisRenderer id="hAxisRenderer" placement="bottom"
tickPlacement="inside" tickLength="8"
canStagger="false" canDropLabels="false" fontSize="12">
For reference: http://blog.flexexamples.com/2007/10/16/dropping-labels-in-a-flex-chart/