I want to change the background color of my Vaadin app on the valueChange event of a OptionGroup component.
As there are a fairly big number of layouts on my page, what would be the best is to change every HorizontalLayout and VerticalLayout background-color, but every new component that could be added should have this color too.
How can I achieve that? Thanks.
Two approaches come to mind.
The simplest, conceptually, as well as in terms of implementation, would be to have a single component to serve as the background, and give your HorizontalLayout and VerticalLayout components a transparent background. If you're layout is too complex for this, you can have a number of base 'background' components, again, with your layout components on top being transparent. The idea is to reduce the components whose color you need to change to something manageable.
If that approach doesn't translate to your use case, you can always use JavaScript to select the layout components on the fly and redefine their background. This could be made more manageable by giving all the layout components a common CSS class (eg: 'dynamic-background').
JavaScript.getCurrent().execute("$('.dynamic-background').css('background-color', 'purple')");
Note that this JavaScript depends on JQuery, have a look around for more details on integrating JQuery with Vaadin:
Add javascript/Jquery & client side code in Vaadin 7
Integrating HTML and JavaScript in Vaadin 7
Related
I have to update the nodes styling dynamically based on my data. Mostly it will be background, border and font. I cannot define predefined css class names to define background color as the colors will be dynamic. Same as with border and fonts.
I am aware that I can set background to a Region in two ways. By constructing the style string and set in setStyle method
region.setStyle("-fx-background-color:"+getColorStr()+";");
or alternatively I can construct a Background object and set using setBackground.
Background background = new Background(new BackgroundFill(getColor(), new CornerRadii(0), Insets.EMPTY));
region.setBackground(background);
I am a bit confused to choose which option to go with. Mainly worried about the performance issue of one option over other. Can someone let me know which is most preferrable way to go with (considering performance) ?
Just to let you know my CSS file is a heavy file with complete customisation of all controls. Can this be a factor to consider for performance if I go with setStyle method.
The same question when dealing with Border and Font as well.
I've been curious whether and how it is possible to change the look of Primefaces' sliders in a way that doesn't ruin the components look, i.e. quite a few styles are applied to these components and thus e.g changing the color to red would require me to also change a bunch of other style attributes.
Is there any smooth way?
I am using Flex 4.9. I thought that with the newest SDK, they finally made Flex and CSS components tags to work. But they did not.
I tried to set horisontalAlign and verticalAlign of spark HGroup vie CSS style, so I could manage it smoothly and save some code typing. HGroups didnt respond to CSS style I applied, ok, I thought that at least I will set their width. It also did not work! Nor pixel width or percent value.
Does Flex CSS styling is really so limited or am I missing something?
horizontalAlign, verticalAlign, width and height are all properties of the HGroup class, not styles. Hence you cannot set these properties through stylesheets.
What you seem to be missing is that Flex is not HTML and that the same semantics do not apply. In Flex 4 we separate the content from the way it is presented mainly through a process called skinning: we declare components and their logic in one class (usually in ActionScript) and we define its visual representation in another (usually written in MXML).
With this separation already in place there is hardly any need for stylesheets. In fact, if you would put a CSS on top of that, you would kind of artificially try to separate the layout into two separate entities which doesn't make much sense. Not to mention it would make the code much harder to read.
There is a case where CSS comes in handy though, that is when you want to apply a certain visual style throughout your application. A Button could have five different skins, but through CSS you could set the font color of all five to a specific color without repeating that in each skin.
I have a Flex app (SDK 3.5 - FP10) that does mindmap trees. Every node is a Canvas (I'm using Canvas specific properties so I needed it). It has a shadow effect, background color and some small ui element on it (like icons, texts...). It works perfectly until it goes over ~700 nodes (Canvas). Over that number it shows grey rectangles. If I turn off the DropShadowFilter effect for the Canvas, they are also gone, so I assume it's a DropShadowFilter problem.
The effect is simple:
private static var _nodeDropShadow:DropShadowFilter = new DropShadowFilter(1, 45, 0x888888, 1, 1, 1);
_backgroundComp.filters = _nodeDropShadow;
Is it possible that Flex can't handle that much?
I think you're exactly right, flex can't handle that many drop shadow filters. They're very expensive. However, if you're using the built in skins, they create bitmap versions of the dropshadows that are less processor intensive. You'll want to set the style "dropShadowEnabled" to true to enable this effect. You'll have less control over this type of dropShadow, but you may be able to get it to do what you want.
For more dropshadow styles, read the style list of mx:Canvas here: http://livedocs.adobe.com/flex/3/langref/mx/containers/Canvas.html
Yeah, 700 is a bit much for Flex components. At this level you're going to need to write your own custom components that does the drawing & layout manually. Also I agree with using bitmapCaching to make sure the drop shadow filters aren't being constantly re-rendered.
I have a web app that I've recently applied a jQuery ThemeRoller theme to. Now I want to have a simple <h2> element have the same rounded-rectangular look as the dialog titlebar or datepicker title. How can I best apply these to my elements that aren't part of larger jQuery UI constructs?
I started down the path of just setting css class values manually based on what I could see inside Chrome's inspector tool, and I got part of the way there before I got nervous that this wasn't going to necessarily be the best way since I'm bypassing any css class assignment logic that might occur inside jQuery UI.
So, is there an easier way of applying those styles, or should I just go down the road of explicitly setting css styles on my headers?
There isn't any magic to the jQuery ThemeRoller CSS styles, if you look through the CSS files that it generates, you will find that they are generally clear and concise and easy enough to read.
The rounded corners in the ThemeRoller CSS will not work in IE, so you might not want to depend on them too much, but if you do, just apply the CSS using style='blah'.
stevedbrown's answer is quite correct.
You can apply rounded corners to any containing element by using the ui-corner- prefix. For example, to apply rounded corners to all four corners of a div element, you'd use ui-corner-all.
To only style the top corners of that same element, you'd apply ui-corner-tr ui-corner-tl for the TopLeft and TopRight corners.
Another possibility to the above is, if you know the CSS attributes you want to copy, you can do it programmatically like:
var defaultColor = $(".ui-state-default").css("color");
var defaultMargin = $(".ui-state-default").css("margin");
and apply these to your elements
$(".your-css-class").css("color",color);
$(".another-css-class").css("margin",margin);
etc
Kind of clunky, but it does allow your CSS developers to update the themerolled themes and you don't have to worry about updating any of your code anymore.