FieldGroup component is creating sets of labels and fields for each mapped attribute. I would like to be able to change the style of the label when the corresponding field value is changed. Documentation explains how to do it for the field, not for the label.
How should i do ?
If you set stylename of a field inside of a fieldGroup, suppose to "red-field", then caption of this field will have corresponding CSS class "v-caption-red-field", so you will be able to write CSS rules with this selector in your extended theme.
Example FieldGroup:
<fieldGroup id="fieldGroup"
datasource="clientDs">
<column width="250px">
<field id="title"/>
<field id="summary"
rows="5"/>
</column>
</fieldGroup>
<button caption="Change style" invoke="changeStyle"/>
Trigger style change:
public class ClientEdit extends AbstractEditor<Client> {
#Named("fieldGroup.title")
private TextField titleField;
public void changeStyle() {
titleField.setStyleName("red-field");
}
}
CSS rules:
#mixin halo-ext {
#include halo;
.v-caption-red-field {
color: red;
}
}
You can read more on themes extension here: https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html
Related
It is possible to style the class name in PlantUML to italic by making the class abstract. Is there a way to style the class name so that it is bold as in the example class below?
you can put the name of the class between "** and **".
Example:
#startuml
class **House** {
}
#enduml
There is work now to support styles (check the PlantUML Q&A forum for more info).
#startuml
<style>
classDiagram {
class {
' attributes and methods
FontColor blue
BackgroundColor yellow
' class name
header {
FontSize 20
FontColor violet
FontStyle bold
}
}
}
</style>
hide circle
class User {
name : String
id : integer
toString() : String
}
#enduml
When inheriting a TextBox, not all styles are respected by the child (see image in appendix).
<TextBox
x:Class="AdvoTools.PerfectTimeNative.UI.Controls.TextInput"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"/>
using Microsoft.UI.Xaml.Controls;
namespace AdvoTools.PerfectTimeNative.UI.Controls
{
public sealed partial class TextInput : TextBox
{
public TextInput() => InitializeComponent();
}
}
I tried different approaches:
Inheriting as above results in certain styles missing;
Copying the hardcoded TextBox styles from generic.xaml and setting their target to the inherited control results into the same effect;
using templated controls as mentioned here does not seem to work either. When I create it through the templated control preset for UWP and change the namespaces from Windows to Microsoft, the control is empty (the generated generic.xaml does not appear to be respected at all. Deleting it altogether makes no difference);
Defining a style with the BasedOn property has the same reuslt as the first approach.
Note:
The blue bottom border thickness does not increase when the TextBox is focused (not visible here);
the corder radius is 0.
This should be a no-brainer but I am really struggling at the moment.
Create a standalone custom class:
public class MyCustomTextBox : TextBox
{
public MyCustomTextBox()
{
DefaultStyleKey = typeof(MyCustomTextBox);
}
}
And add the following default template for it to themes/generic.xaml:
<Style TargetType="local:MyCustomTextBox" BasedOn="{StaticResource DefaultTextBoxStyle}" />
Then it should look like a default TextBox.
I would like to know, how I can change the background color of an datagrid item!
I use external CSS and with flex 4.6 I use:
s|ItemRenderer
{
contentBackgroundColor: #FF0000;
}
But I have to upgrade to apache flex 4.15 and it doesn't work anymore... I can't find which component I suppose to style. In the documentation I can't find the list of styles available T_T.
If you have a link or answer thx!
In the documentation of adobe Flex it's said:
An item renderer is associated with a column of the DataGrid control. The item renderer then controls the appearance of each cell in the column. However, each item renderer has access to the data item for an entire row of the DataGrid control. Use the data property of the item renderer to access the data item.
Try to accomplish that by using ItemRenderer for all your columns you can do that in MXML manner or by mixing MXL with Action script code like applying the style for a known column:
<mx:DataGrid x="29" y="303" width="694" height="190" dataProvider="{testData.book}" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn headerText="Title" dataField="title">
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingLeft="2">
<mx:Script>
<![CDATA[
override public function set data( value:Object ) : void {
super.data = value;
var today:Number = (new Date()).time;
var pubDate:Number = Date.parse(data.date);
if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
else setStyle("backgroundColor",0xffffff);
}
]]>
</mx:Script>
<mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
<mx:Text width="100%" text="{data.title}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
or in separated action script class by excluding the content of the script tag mentioned to action script class extending your column's type and overriding the set data method like:
public class CheckBoxHeaderRenderer extends CheckBox
{
override public function set data(value:Object):void
{
_data = value as CheckBoxHeaderColumn;
selected = _data.selected;
//type your condition here using the property of your dataField
if(data.property=="value"){
this.styleName="yourClassCSSName"
}
}
and your class CSS will be like:
.yourClassCSSName{
contentBackgroundColor: #FF0000;
}
for more:
Understanding Flex itemRenderers
Creating item renderers and item editors for the Spark DataGrid control
I'm trying to dynamically change some field color when it has changed due to some processing.
CUBA documentation explains how to do it statically through web theme extension (https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html), but not dynamically. Although it is possible in Vaadin (https://vaadin.com/wiki/-/wiki/Main/Dynamically%20injecting%20CSS) on which platform web gui is built upon.
I suppose that if I use the Vaadin way of injecting CSS it will work (which I will try) but I will then have Vaadin specific code, which I'm trying to avoid.
Is there a CUBA way of doing so I'm missing ?
Edit:
I'm trying to have any field of a form to change background color when it has changed from its initial value. As per CUBA documentation (https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html) I need to :
- create a SCSS mixin with background color
- inject the field in the editor class in order to have access to it
- react to a field change event and then define the style name of the field
I did create the SCSS mixin, but two issues I have :
1) I would like to retrieve the field instance dynamically instead of injecting it (keep code clean and light)
2) I would like to avoid defining the background color statically so that the color could be parameterized at runtime
For 1) I tried to injected the fieldGroup and used getFieldComponent(), then applied the style with setStyleName on it when it is changed. It worked but I would prefer to define this behavior for every field that is an input field.
For 2) apart from using Vaadin specific feature of injecting CSS (and tighing my code to Vaadin (and so leading me away of generic interface) I do not see how to do
Hope it's more clear
You cannot set truly dynamic color (any RGBA) from code to field but you can create many predefined colors for your field:
#import "../halo/halo";
#mixin halo-ext {
#include halo;
.v-textfield.color-red {
background: red;
}
.v-textfield.color-blue {
background: blue;
}
.v-textfield.color-green {
background: green;
}
}
I do not recommend using styles injected from code (as Vaadin Page does) since it is a mixing of logic and presentation. Instead you can create all predefined styles (30-50 styles should be enough) and assign it depending on some conditions using setStyleName method:
public class ExtAppMainWindow extends AppMainWindow {
#Inject
private TextField textField;
private int steps = 0;
public void changeColor() {
if (steps % 2 == 0) {
textField.setStyleName("color-red");
} else {
textField.setStyleName("color-blue");
}
steps++;
}
}
If you want to apply the logic of color change for all TextFields inside of FieldGroup you can iterate FieldGroup fields in the following way:
for (FieldGroup.FieldConfig fc : fieldGroup.getFields()) {
Component fieldComponent = fieldGroup.getFieldComponent(fc);
if (fieldComponent instanceof TextField) {
TextField textField = (TextField) fieldComponent;
textField.addValueChangeListener(e ->
textField.setStyleName("color-red")
);
}
}
i read this article http://www.sitepoint.com/dealing-color-schemes-sass/ and I wanted to try to apply the method but I've a question: It's possible use this with a variable?
Ex. I use bootstrap and i wanna change only value (without assign a property) for $brand-primary, can i change this value with this method?
I've assigned a dynamic class on my body ( or ), and i wanna change a $brand-primary value for every class...
Another Ex.
If body class is "en" $brand-primary: red; if body class is "it" $brand-primary: blue; if body class is "fr" $brand-primary: green;
It's possible?
Thanks for your reply.
Perhaps the cleanest way to accomplish this is to create a mixin, and then pass in theme color variables.
The theme mixin code takes in all necessary colors, as well as a name that corresponds to the body class:
#mixin theme($name, $brand-primary) {
body.#{$name} {
background-color: $brand-primary;
}
}
Create a separate Sass partial for housing your theme color variables. In this case, it would look something like this:
$brand-primary: green;
Create as many of these files as you have themes.
Using the themes is then as simple as:
#import 'Themes/_theme-name.scss';
#include theme("theme-name", $brand-primary);
Bonus - if you need to apply styles to a specific theme, it's as easy as an #if statement in the mixin:
#if ($name == "theme-name") {
.class-name {background-image: url(example.png);}
}