I have a following issue:My task is to style a datatip for two charts in Flex 4.5.Both charts reside in two different <Group> based components which are added to the <Application>
So after a thorough research here is what I tried to do.First applying a css descending selectors:
#container#chart1 chartClasses|DataTip{
backgroundColor:white;
backgroundAlpha:0.01;
fontSize: 12;
fontWeight:bold;
fontStyle:italic;
}
So the component with Id=container and inside it a chart with id="chart1"
It doesn't work despite the fact that Adobe docs say it should.
Another approach which I believed was supposed to solve it was to put this CSS style
chartClasses|DataTip{
backgroundColor:white;
backgroundAlpha:0.01;
fontSize: 12;
fontWeight:bold;
fontStyle:italic;
}
inside each of these components but guess what,chart DataTip class selector work only on <Application> level(and then it applies the same style to all chart datatips found in the application.So putting it in each of the two components containing the charts has no effect.
Next ,I created a class that is fed into dataTipRenderer style of the chart.Then inside the class called MyCustomDataTipRenderer I set the class selector :
.dataTip{
backgroundColor:white;
backgroundAlpha:0.01;
fontSize: 12;
fontWeight:bold;
fontStyle:italic;
}
And yes ,it works.But let's say I want to be able to set different styles for the custom datatip renderer based on the hosting chart.How can I do it ? It seems the Flex SDK has not exposed in any way thr datatipRenderer.So If I effectively set the custom datatip renderer like this:
columnchart1.setStyle("dataTipRenderer",CustomDataTip);
Then I would like to be able to get access to the instance of the CustomDataTip class.But I can't .So currently the only thing I can do is to create a distinct custom datatip renderer class for each chart.That could be fine if you have only a couple of charts you want to style but what can we do if we have many of them?
Try adding the following to the starting of the css file(Assuming that the name of the file is chartStyles.css)
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "http://www.adobe.com/2006/mxml";
mx|#container#chart1 chartClasses|DataTip{
backgroundColor:white;
backgroundAlpha:0.01;
fontSize: 12;
fontWeight:bold;
fontStyle:italic;
}
s|#container#chart1 chartClasses|DataTip{
backgroundColor:white;
backgroundAlpha:0.01;
fontSize: 12;
fontWeight:bold;
fontStyle:italic;
}
Incase the css styles are put in a style tag right in the main applications mxml , then there is no need for a #namespace tag in the beginning.You can directly add mx| and s| as prefixes to your styles.
Related
My question is pretty basic.
How to add styling from a css-file to a basic vaadin component?
What I do NOT want to use:
PolymerTemplate
getStlye().set(...)
Do I have to #ImportHtml, which includes the css-code or do I have to #StyleSheet with the css-file? And afterwards, do I have to add the "css-style" via .getElement().getClassList().add(...)?
I really need help to have a working simple code example for a Label, Button or whatsever, please. I cannot find anything to satisfy my requirements.
In our documentation we guide to use #ImportHtml in MainView for global styles as a html style module.
In the global style module you can apply themable mixins to change stylable shadow parts, etc. of the components.
In case your target is not in shadow DOM, you can set the styles in custom styles block directly, e.g.
Say you have a Label and TextField in your application
// If styles.html is in src/main/java/webapp/frontend/ path is not needed
#HtmlImport("styles.html")
public class MainLayout extends VerticalLayout implements RouterLayout {
...
Label label = new Label("Title");
label.addClassName("title-label");
add(label);
...
TextField limit = new TextField("Limit");
limit.addClassName("limit-field");
add(limit);
...
}
And in src/main/java/webapp/frontend/styles.html
<custom-style>
<style>
.title-label {
color: brown;
font-weight: bold;
}
...
</style>
</custom-style>
<dom-module theme-for="vaadin-text-field" id="limit-field">
<template>
<style>
:host(.limit-field) [part="value"]{
color:red
}
</style>
</template>
</dom-module>
And your "Title" text will have brown bold font, and the value in text field will be red, but its title un-affected.
See also: Dynamically changing font, font-size, font-color, and so on in Vaadin Flow web apps
I've got a StyleableTextField that displays very basic HTML. To format the HTML I currently use a Stylesheet declared in AS3.
This works fine, but is rather inefficient for the designers to edit colors and stuff, so I need to include these tags in my main CSS.
The AS3 CSS declaration looks like this;
_styleSheet = new StyleSheet();
_styleSheet.setStyle("p", {fontSize:'15',color:'#FFFFFF', fontFamily: 'Courier New', fontWeight:'bold'});
This gets assigned to the StyleableTextField using the usual styleSheet = _styleSheet way.
The main CSS file is declared in my main application like this: <fx:Style source="Main.css"/>.
I already have CSS tags for spark components in my CSS, such like the following;
s|TextInput
{
contentBackgroundAlpha: .5;
contentBackgroundColor: #202020;
focusColor: #e1333a;
}
However, I need to address the very instance of StyleableTextfield in the CSS (I've got other's in my app, but only this one displays HTML text).
Has anyone got an idea how to do this?
Working on a mobile project btw.
Flex supports a CSS id selector.
#instanceID
{
...
}
or
ObjectType#instanceID
{
...
}
I haven't been able to test this thoroughly, but it appeared to work for me:
#_objectName
{
p: pstyle;
}
.pstyle
{
fontSize: 15;
...
}
I have created a style in which i am defining a font family.When i apply this style to label it reflects the font were as there is no change when it is applied to a spark button.I Tried various way to Apply font style but it doesn't work.Other properties work fine except font family. Even i tried creating skin class and set the font family style of label in it. While previewing the skin i can see the changes but when i apply it to button, it shows the default font. Below given code is written in a View.I had followed 2 approaches but none of them work.
Approach 1
#font-face{
src:url("HARNGTON.TTF");
fontFamily: MyF;
embed-as-cff: false;
}
<s:Button x="143" y="108" width>="471" label="Course" color="white" fontFamily="MyF"
>
Approach 2
I have created a style and i m also using skin class for button.I have not defined font family in skin class. So i hope button is not overriding the font-family from skin class i.e the default value.
#font-face{
src:url("HARNGTON.TTF");
fontFamily: MyF;
embed-as-cff: false;
}
.myFont
{
fontFamily: MyF;
}
<s:Button x="143" y="108" width="471" label="Course" color="white" styleName=myFont skinclass="MyButton_skin">
I tried using CSS file also but it is still not working.
Sample of CSS file is as follows:
/* CSS file */
#namespace s "library://ns.adobe.com/flex/spark";
#font-face{
src:url("/views/abc.ttf");
fontFamily: MyF;
fontWeight:bold;
embed-as-cff: false;
}
s|Button {
fontFamily: MyF;
color: #000000;
fontSize: 34;
}
and i used it during initialization of view
public function init():void{
styleManager.loadStyleDeclarations("Basic.swf",true);
}
But still there is no change in the font style.
This usually happens because you embed a font with normal weight. Buttons use a bold label. If you embed a font as normal, and use it as bold, it won't be rendered correctly.
Unless you specify that the embedded font is bold (in the font-family declaration, set the font-weight property to bold), it will not be added to the button label.
After looking at the code you posted, it's evident that the font-family declaration, does not define the weight of the embedded font, so Flex assumes it is set to normal. That's why you don't see the label with the embedded font.
When using fonts with Spark components you should set the embedAsCFF to true not false. False is used when embedding fonts in a legacy mx component.
pixels4nickels is right, firstly you need to set embedAsCFF : true, secondly, I do not think embed-as-cff is not the right format, should be embedAsCFF
I have a Custom Component that has a couple of Canvas with some background colors assigned to them. Now i have hard coded the colors, i want to move them to an external css file.
So i would like to have the css declaration like this :
ControlBar
{
dividerRightColor: #ffffff;
dividerLeftColor: #f3f3f3;
}
My question is if i can define custom style names like dividerRightColor and if so, how can i use that value inside my MXML Component? I have seen examples of using them inside Pure AS components.
In CSS:
.dividerRightColor {
background-color: #ffffff;
}
.dividerLeftColor {
background-color: #f3f3f3;
}
In MXML:
<mx:ControlBar>
<mx:Canvas styleName="dividerLeftColor">
…
</mx:Canvas>
<mx:Canvas styleName="dividerRightColor">
…
</mx:Canvas>
</mx:ControlBar>
It sounds to me like you need to create the style in the component; not just send the style values into the component as the other answer.
Read this documentation.
Basically, styles don't get defined the same way that properties get defined. You can set any style name on the component you want. However, the component needs to know what to do w/ the style. To do that you need to override the styleChanged method:
override public function styleChanged(styleProp:String):void {
super.styleChanged(styleProp);
// Check to see if style changed.
if (styleProp=="dividerRightColor")
{
// do stuff to implement the style
dividerRight.setStyle('backgroundColor',getStyle('dividerRightColor'));
}
}
A common approach is to set "styleChanged" properties and invalidate the display list and then make the appropriate style changes in the updateDisplayList() method.
To make the style available in code hinting, you'll need to add metadata, like this:
[Style(name="dividerRightColor")]
This will only be required if you wish to set the style as a property in MXML.
I have the following code to create and apply a few styles for a custom TextArea in ActionScript 3.
public class MyCustomTextArea extends TextArea
{
override protected function createChildren():void
{
super.createChildren();
this.styleSheet.setStyle("sup", { display: "inline", fontFamily: "ArialSup", fontSize:"12"});
this.styleSheet.setStyle("sub", { display: "inline", fontFamily: "ArialSub", fontSize:"12"});
this.setStyle("fontFamily", "Arial");
}
}
I have two problems with this code.
this.styleSheet is always null when I create an instance of the class. If this.styleSheet is initialized to new StyleSheet() to avoid this issue, then the TextArea instance does not seem to recognize any of the HTML tags that can be used with the htmlText property.
Can anyone help in fixing these two issues? Thanks.
First off - the styleSheet property of a TextArea component is null by default - what you're seeing is an expected behavior.
You're also creating your css stylesheet in an unusual way - perhaps this is where your problems are coming from? I'd try either loading, or defining inline, a stylesheet to apply to your text area. There's an example of loading and applying a stylesheet here: http://blog.flexexamples.com/2008/03/22/applying-a-cascading-style-sheet-to-a-textarea-control-in-flex/
Also, what are ArialSub and ArialSup? If these aren't valid font names flex won't recognize them and use them.