according the documentation borderThickness is an applicable style, but when I try to set it to anything (would prefer '0') it says "The style 'borderThickness' is excluded by type 'mx.controls.DateField'."
I could style the background color to be the same as the background, but I have an image behind so this will not work.
There must be some way to remove this border!?
There is a protected property in the DateField named textInput. You can override the DateField class and set style 'borderStyle' of the textInput, which is of type TextInput, to 'none'. Example:
.
public class ExtendedDateField extends DateField {
override protected function createChildren():void{
super();
textInput.setStyle('borderStyle','none');
}
}
Related
I would like to set the caret color for all JavaFX text inputs (e.g. TextField, TextArea, the ones in ComboBox:editable, DatePicker, etc...)
I found this Stackoverflow answer: How to change the caret color in JavaFX 2.0?
... and an example on GitHub.
The first one does change the text and the caret color which is not good. The second one extends the TextFieldSkin class, which is already better, but how can I use it in CSS?
Any help is appreciated.
UPDATE 1:
I found the following CSS style property for JavaFX controls: -fx-skin.
This would theoretically allow me to set a custom skin class (-fx-skin: "package.MySkin";), however, the skin class just isn't used!
The class looks like the following:
package gui;
…
public class MyTextFieldSkin extends TextFieldSkin
{
public MyTextFieldSkin(TextField tf) {
super(tf);
System.out.println("MyTextFieldSkin constructor called!");
ReadOnlyObjectWrapper<Color> farbe = new ReadOnlyObjectWrapper<>(Color.green);
caretPath.strokeProperty().bind(farbe);
caretPath.setStrokeWidth(1.5);
}
}
… and is set in CSS like that:
.text-field {
-fx-skin: "gui.MyTextFieldSkin";
}
What am I doing wrong? I looked at the source code of AquaFX, and they are doing it the same way as me!
After a bit of try & error, I solved the problem in the following way:
I gathered all TextFields and controls that have TextFields in them (like ComboBox, DatePicker and so on) inside a container recursively (in deference of TitledPane, ScrollPane, SplitPane and TabPane, because they don't publish their children in getChildren(), so one has to call the getContent() method of the individual classes and scan through it).
After I had all the TextField controls, I looped over them and changed their Skin with the following code:
public class MyTextFieldSkin extends TextFieldSkin {
public MyTextFieldSkin(TextField tf)
{
super(tf);
ReadOnlyObjectWrapper<Color> color = new ReadOnlyObjectWrapper<>(Color.RED);
caretPath.strokeProperty().bind(color);
}
}
Then I just had to call
textfield.setSkin(new MyTextFieldSkin(textfield));
and that was about it.
Cheers
I use validators in my flex mobile application.
I want to remove the red border when validator has triggered an error.
<mx:EmailValidator id="emailV" source="{login_txt}" property="text" triggerEvent="click" trigger="{connexion_btn}" />
<mx:StringValidator id="passwordV" source="{password_txt}" property="text" trigger="{connexion_btn}" triggerEvent="click" />
I tried:
target.errorString = null; // not good
Any clue ?
Usually I would set the errorString to an empty string; and I do that on the instance of the component with the red string on it. I believe in that case, it would be your trigger component:
login_txt.errorString = '';
password_txt.errorString = '';
I'm unclear based on the limited code provided if the target you are setting the errorString on will be the same as the actual component specified as the validator source. It could be, we just aren't provided enough information to know for sure.
The red glow is defined in spark.skins.spark.ErrorSkin, which is the default value of a UIComponent's errorSkin property. You can't set this property to null, but you can extend the ErrorSkin class and override the methods that generate the glow (namely, updateDisplayList and processBitmap).
I created a NullFocusSkin that I use to remove the red error glow and the blue focus glow. I set the component's errorSkin and focusSkin properties to that and hey presto - no more nasty glow, and no need to manually clear the errorString!
import spark.skins.spark.HighlightBitmapCaptureSkin;
public class NullFocusSkin extends HighlightBitmapCaptureSkin
{
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
// Do nothing.
}
override protected function processBitmap():void
{
// Do nothing.
}
}
Besides setting the error string to empty, I had to call showFocus(), or the red border wouldn't go away.
login.errorString = '';
login.focusManager.showFocus();
I am using a SuggestBox in GWT.I also inherit the Standard theme from SuggestionBox.gwt.xml as
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
so this are using default standard css for widget Suggestbox and it is making border through image as hborder.png,vborder.png etc..I want to remove this but my css is not working.
.gwt-SuggestBoxPopup{
border : 1px solid #000000;
}
so how can i solve this issue.Please help me.
Thanks Rahul
The class used for the popup is a DefaultSuggestionDisplay for default SuggestBox. It uses a DecoratedPopupPanel as you can see in SuggestBox.java around line 392.
To avoid "heavy" border, you have to create/override a SuggestionDisplay that uses a non-decorated popupPanel and pass it to your SuggestBox trough constructor
public SuggestBox(SuggestOracle oracle, TextBoxBase box,SuggestionDisplay suggestDisplay);
Say, "border" is not sufficient, because DecoratedPopupPanel uses multiple cells to set borders, as you seen in the CSS. So you probably can update CSS directly but it will apply to all project, as SuggestBox does not seems to handle resource bundle directly.
Create a customSuggestionDisplay class
public static class CustomSuggestionDisplay extends SuggestBox.DefaultSuggestionDisplay {
private PopupPanel suggestionPopupRef;
public CustomSuggestionDisplay() {
suggestionPopupRef = getPopupPanel();
}
public void removeBorder() {
((Element)suggestionPopupRef.getElement().getChild(0)).getStyle().setBackgroundColor("white");
NodeList<com.google.gwt.dom.client.Element> tdList = suggestionPopupRef.getElement().getElementsByTagName("td");
for (int tdIndex = 0; tdIndex < tdList.getLength(); ++tdIndex) {
Element tdElement = (Element) tdList.getItem(tdIndex);
if (tdElement.getClassName().startsWith("suggestPopup"))
tdElement.removeClassName(tdElement.getClassName());
}
}
}
Create a suggestBox object
SuggestOracle oracle = new RestSuggestOracle();
CustomSuggestionDisplay suggestionDisplay = new CustomSuggestionDisplay();
TextBox textfield = new TextBox();
SuggestBox m_field = new SuggestBox(oracle, textfield, suggestionDisplay);
Call removeBorder when the suggestion is displaying
if (m_field.isSuggestionListShowing())
suggestionDisplay.removeBorder();
i have a sequence of buttons and each button has its own icon.
I was wondering if I have to create a Spark skin file for each button in order to assign its icon.
thanks
You don't have to create separate skins, you could make 1 skin and 1 class (that extends Button) with a property you can set to determine which icon to draw based on the button.
You can extend the button class like this
package com.components
{
import spark.components.Button;
//icons
[Style(name="iconImg",type="*")]
public class IconButton extends Button
{
public function IconButton()
{
super();
}
}
}
At this point you'd have a set of IconButtons and you'd need to set the iconImg property for each.
Declare the icon
[Embed('assets/bookmarkIcon.png')]
public static const icon_bookmark:Class;
And the set the iconImg property
<components:IconButton id="ibBookmark"
iconImg="{icon_bookmark}"
skinClass="com.skins.IconButtonSkin"
click="" />
Then in your skin you use the property like this
<mx:Image id="icon" source="{hostComponent.getStyle('iconImg')}" />
I want to make a label that has a tiny title above it, for example so the label say $1,000 with a small retail price or our price above it. I am trying to add the title label to the display list of the main label. I get no error but the title does not show up. I also considered rawChildren but apparently Label has no rawChildren property.
Here is my code:
package
{
import mx.controls.Label;
public class PriceLabel extends StrikeThroughLabel //<-- exntension of label to add strike
{
private var _title:Label;
public function PriceLabel()
{
super();
}
[Bindable]
public function set title(s:String):void
{
if(_title == null)
{
_title = new Label();
addChild(_title);
this.alpha = .2;
}
_title.text = s;
}
public function get title():String
{
var s:String
if(_title != null)
{
s = _title.text;
}
return s;
}
}
}
If you add children to a Flex component that is not a container, then you have to manually manage sizing and positioning of those children. Containers do a lot of that work for you.
Here's what you should do:
Move the creation of your child Label into an override of the createChildren() function.
Set the text property of the child label in an override of the commitProperties() function. Your title getter and setter should save the value in a _title variable to be used later for the assignment in commitProperties(). This is actually important for performance.
Override the measure() function and update measuredWidth and measuredHeight to be the maximum width and height values of the main label and it's child.
Override updateDisplayList() and use setActualSize() on the child Label to set it to the required width and height.
That may seem like a lot of work, but in terms of best practices, that's the way you're supposed to build custom components. The Flex Team at Adobe spent a lot of time maximizing performance, and that's why things happen in several steps like that.
That's how to do it based on what you asked. Personally, I would make a subclass of UIComponent with two Labels or UITextFields as children, each with their own separate property.
By the way, the rawChildren property is only available on containers. It exists so that you can add "chrome" to a container that isn't part of the container's child layout algorithm. For example, Panel has a title bar and a border that aren't affected by the vertical/horizontal/absolute layout options.
Why not create a custom component that contains both labels as its children, instead of trying to throw a child on the Label? That feels cleaner to me, as adding children to build-in components like that doesn't seem right.