Error loading skin on Gluon Project

In my project, I have created a unique custom control called ChoiceTextField along with its corresponding skin named ChoiceTextFieldSkin.

protected Skin<?> createDefaultSkin() {
        return new ChoiceFieldSkin<T, ChoiceTextField<T>>(this);
    }

Although the control is successfully displayed, I am encountering the following unexpected Exception:

Failed to load skin 'com.gluonhq.impl.charm.a.b.a.ap' for control ChoiceTextField[id=choiceCounter, styleClass=choice-field colored button flat]
java.lang.IllegalArgumentException: argument type mismatch

To resolve this issue, I have found a workaround by specifying the skin in the CSS file:

.choice-field{
    -fx-skin: "com.energymeter.control.skin.ChoiceFieldSkin";
}

Despite the workaround, I am curious to know the root cause of this unexpected Exception.

Answer №1

In this snippet of code, a view is created with a custom control:

public BasicView(String name) {
    super(name);

    setCenter(new StackPane(new ChoiceTextField()));
}

class ChoiceTextField<T> extends Control {

    public ChoiceTextField() {
        getStyleClass().add("button");
    }

    @Override
    protected Skin<?> createDefaultSkin() {
        return new ChoiceFieldSkin<>(this);
    }
}

class ChoiceFieldSkin<T> extends SkinBase<ChoiceTextField<T>> {

    private final TextField textfield;

    public ChoiceFieldSkin(ChoiceTextField<T> control) {
        super(control);
        textfield = new TextField();

        getChildren().add(textfield);
    }
}

However, an exception is encountered:

javafx.scene.control.Control loadSkinClass
Failed to load skin 'com.gluonhq.impl.charm.a.b.a.ap' for control ChoiceTextField@4fb753dd[styleClass=button]
java.lang.IllegalArgumentException: argument type mismatch
at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
at javafx.scene.control.Control.loadSkinClass(Control.java:735)

The javadoc for Control.createDefaultSkin() explains that a default skin is created if no skin is provided via CSS {@code -fx-skin} or set explicitly in a sub-class with {@code setSkin(...)}.

By adding the style class "button", Charm overrides the ButtonSkin and causes the exception to occur.

To avoid this exception, the skin can be explicitly set via CSS:

public ChoiceTextField() {

    getStyleClass().addAll("choice-field", "button");
        getStylesheets().add(getClass().getResource("style.css").toExternalForm());
} 


.choice-field {
      -fx-skin: '<package name>.ChoiceFieldSkin'
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieving full white space utilization with inline block elements

When attempting to stack elements on top of each other, I encounter unwanted white space due to varying heights of the elements. I am trying to figure out how to move boxes 6 and 7 up while keeping all corresponding elements beneath them aligned properly. ...

Increase the size of the box-shadow so that it extends beyond the boundaries

Can we create a wider box-shadow in CSS than the actual HTML element it is being applied to, while maintaining the same height as the element? Increasing the spread of the shadow typically increases the height as well. In the provided code snippet, the max ...

Header with a stable background image that adjusts responsively

While attempting to convert a PSD to HTML, I encountered a small issue. Please refer to the image below: https://i.sstatic.net/5KoIV.jpg As indicated by the red arrow, there is a blue background image in the header of the template! How can I add this bac ...

Exploring the power of Bootstrap 5 for vertical alignment

I am currently utilizing the flexbox grid from Bootstrap 5 to create a mobile-first Angular web application that is responsive. For the home screen of my app, I want to incorporate these 3 elements : The title of the app displayed at the top A series of ...

The HTML elements in my JSX code seem to constantly shift around whenever I resize my webpage

Using react.js, I'm currently developing a website that appears like this before resizing: pre-resize_screenshot_website However, upon vertical or diagonal resizing, the layout becomes distorted especially in the 'availability search bar' ...

Transform Typescript into compiled css files without using any additional tools

Currently, I am working on a monorepo project where the main project relies on another project called components. When running the entire monorepo, the main project utilizes webpack.dev while the components project simply uses the TypeScript compiler. It l ...

Strange CSS/browser storage glitch

UPDATE: JUST REALIZED THIS ISSUE IS ONLY OCCURRING ON FIREFOX, NOT CHROME ANOTHER UPDATE: Oddly enough, this problem only occurs locally. When I push it to GitHub, everything works fine. So strange. I suppose that means it's not a major issue. On my ...

Having trouble printing a section of a webpage after making CSS adjustments

When trying to print part of a page, I used the following method. It successfully prints that portion of the page, however, it does not preserve the CSS effects. <body> <h1><b><center>This is a test page for printing</center&g ...

Placing the date of each blog post at the end of the excerpt

Currently, there is a grid section on the homepage of our site showcasing the two most recent blog posts. I am looking for a Javascript solution to relocate the date to the bottom of each block, outside of the border. For reference, you can visit the follo ...

Selenium is having trouble reading the text from a dropdown that has the autocomplete feature disabled

It seems that Selenium is having trouble retrieving the text from the dropdown options. Here is a snippet of the code I am working on: WebElement dropdown=driver.findElement(By.id("selFromAccount")); List<WebElement> dropoptions=dropdown.findElemen ...

Unexpected Placement of CSS Grid Items

I am currently facing an issue with aligning items in a nested grid using grid-column/grid-row assignment. After setting the template with grid-template-rows:/grid-template-columns, I expected the $50 and Give Now items to appear on row 3, with one in colu ...

Aligning container - property: inline-block;

Having trouble centering two divs that are set to "display: inline-block;" in your code? Removing the inline-block class centers them, but they end up stacking vertically instead of horizontally. See below for an example: #news { background-image: url ...

How can the issue of the navbar color not being able to disappear or turn transparent be resolved, given its connection to the body color?

@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap'); :root { --color-body: #b6cbce; --color-heading: #eef3db; --color-base: #033f47; --color-base2: #022a30; --color-brand ...

Utilize a dynamic carousel with interactive lightbox functionality to display a stylish div containing captivating background

Is it possible to add a slick lightbox to a slider that only contains a div with a background image, but the lightbox doesn't display the image? What are your thoughts? $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, ar ...

Developing a robust system for managing classnames

I have a question regarding the article I found on Quora about Facebook's CSS class names structure. They mentioned that both Facebook and Google use a build system to convert developer-friendly class names into shorter ones to save bandwidth and crea ...

Text appearing in varying sizes across browsers

I need some help with a coding issue I'm facing. I have a form where one of the inputs is connected to a JavaScript function that updates a div on the page as the user types. However, I want to limit the width of this div to 900px and make sure it onl ...

Mysterious distortion of JSON strings in Tomcat

I am facing an issue with JSON-String distortion when sending it from a JavaFX application to a Tomcat server. Some symbols are being replaced by strange square symbols: https://example.com/image1.png The conversion of JSON to pass correctly - verified b ...

What is the most effective method for locating and capturing a specific element (such as an input box) in Python Selenium using either Xpath or CSS selector

I am currently using selenium to scrape a website, primarily relying on xpath or CSS selectors to extract elements. However, I have noticed that these selectors are dynamic, which contradicts what I have read online about CSS selectors being stable. As a b ...

What is the best way to place a semi-transparent black overlay on an image?

<html> <head> <style> #contain_main {background-color:black; width:100%; height:auto;} #main {width:100%; height:700px; background-image:url("https://www.sappun.co.kr/shopimages ...

Tips for creating a stylish scrollbar in a React Material-Table interface

Currently, I am utilizing the react material-table and looking to implement a more visually appealing scroll-bar instead of the default Pagination option. Although I have experimented with the react-custom-scroll package, it has not produced the desired ...