Layout CSS gets different result with production and dev maven build

Flow
1

image
image2732×1126 456 KB

I build custom component (resto-food-company-detail-element.js) as above and using in my view.
When i build with with development mode, then I get UI with 2 checkboxes (see photo at comment below).

But when i build with production mode, then i gets 4 checkboxes (see photo at comment below):

There is no code change in dev vs production build.

Why i get different view in different build mode ?

<profiles>
        <profile>
            <!-- Production mode is activated using -Pproduction -->
            <id>production</id>
            <build>
                <plugins>
                    <plugin>
                        <groupId>com.vaadin</groupId>
                        <artifactId>vaadin-maven-plugin</artifactId>
                        <version>${vaadin.version}</version>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>build-frontend</goal>
                                </goals>
                                <phase>compile</phase>
                            </execution>
                        </executions>
                        <configuration>
                            <productionMode>true</productionMode>
                        </configuration>
                    </plugin>
                </plugins>
            </build>
        </profile>

        <profile>
            <id>it</id>
            <build>
                <plugins>
                    <plugin>
                        <groupId>org.springframework.boot</groupId>
                        <artifactId>spring-boot-maven-plugin</artifactId>
                        <version>${project.parent.version}</version>
                        <executions>
                            <execution>
                                <id>start-spring-boot</id>
                                <phase>pre-integration-test</phase>
                                <goals>
                                    <goal>start</goal>
                                </goals>
                            </execution>
                            <execution>
                                <id>stop-spring-boot</id>
                                <phase>post-integration-test</phase>
                                <goals>
                                    <goal>stop</goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>

                    <!-- Runs the integration tests (*IT) after the server is started -->
                    <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId>maven-failsafe-plugin</artifactId>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>integration-test</goal>
                                    <goal>verify</goal>
                                </goals>
                            </execution>
                        </executions>
                        <configuration>
                            <trimStackTrace>false</trimStackTrace>
                            <enableAssertions>true</enableAssertions>
                        </configuration>
                    </plugin>
                </plugins>
            </build>
        </profile>

    </profiles>
2

2 checkboxes - production build.
image

3

4 checkboxes - dev build.

image

4

I think the vaadin radio button is not loaded in production because it’s not detected. In dev mode, all the components are loaded by default.

Are you using this JavaScript component in a Java component? Did you add @Uses for the components in the JavaScript?

5

Hi @jeanchristophe.gueriaud

Yes. we used it in Java component like below code. It is mandatory to use @Uses in java component ?

@Tag("resto-food-company-detail-element")
@JsModule("./views/Component/resto-food-company-detail-element.js")
public class RestoFoodDetailVaadin extends Component implements HasSize, HasStyle {

    private static final Logger LOG = LogManager.getLogger(RestoFoodDetailVaadin.class);
    /**
     *
     */
    private static final long serialVersionUID = 1L;

    private static final String valueImage = "valueImage";
    private static final String foodID = "foodID";
    private static final String nameFood = "nameFood";


    private Registration registration;

    private List<ItemSelectionListener> listeners = new ArrayList<>();

    public RestoFoodDetailVaadin() {
    }

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        super.onAttach(attachEvent);
        registration = getElement().addEventListener("call-server-method", event->{
            myMethod();
        });
    }

    @Override
    protected void onDetach(DetachEvent detachEvent) {
        super.onDetach(detachEvent);
        registration.remove();
    }

    @Synchronize(property = "foodID", value = {""})
    public String getFoodID() {
        String obj = getElement().getProperty("foodID");
        return obj;
    }

    public void setFoodID(String value) {
        getElement().setProperty("foodID", value);
    }



    @Synchronize(property = "nameFood", value = {""})
    public String getNameFood() {
        String obj = getElement().getProperty("nameFood");
        return obj;
    }
}
6

If you don’t add the annotation the client side of component won’t be added in the production bundle. So you might have the checkbox because you are using it in another view but not the radio button.
So yes, you should add it.

7

Thanks @jeanchristophe.gueriaud

Below is my entire of component. where i should put @Uses annotation ?

import {LitElement, html, css} from "lit";
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';

class RestoFoodCompanyDetailElement extends LitElement {

    static get properties() {
        return {
            foodID: {
                type: String,
                value:"",
            },
            valueImage: {
                type: String,
                value:"",
            },
            nameFood: {
                type: String,
                value:"",
            },
            price: {
                type: Number,
                value: 0,
            },
            currency: {
                type: String,
                value: "",
            },
            description: {
                type: String,
                value: "",
            },
            optionValue: {
                type: Array
            },
            valueObject: {
                type: String,
                value:"",
            }
        };
    }

    static get styles() {
        return [
            css`
              .vert-layout-row-food {
                display: flex;
                width: 100%;
              }
              .border{
                border: 5px solid white;
                background-color: whitesmoke;
              }
              .full-row-food {
                display: flex;
                width: 100% !important;
              }
              p{
                margin: 0;
              }
              .colorPrice{
                color: red;
              }
              .component-width100-food{
                width: 100% !important;
              }
      		`,
        ];
    }

    firstUpdated() {
        if(this.valueObject != undefined){
            this.updateValueObject(this.valueObject);
        }
    }

    updateValueObject(strValue) {

        let obj = JSON.parse(strValue);
        console.log("aa " + obj);
        window.alert(strValue);
        let strOptionValue = JSON.parse(optionValue);
        console.log("bb " + strOptionValue);
        window.alert(strOptionValue);
    }

    async callServerMethod() {
        try {
            await this.$server.myMethod();
        } catch (error) {
            console.error('Error calling server method:', error);
        }
    }

    callServerMethod02(checkboxElement, type, nameGroupOption, foodID) {
        try {
            if(checkboxElement.detail.value !== ""){
                const isChecked = checkboxElement.detail.queueProperty;
                this.$server.myMethod02(checkboxElement.detail.value, this.price, this.currency, type, nameGroupOption, foodID, isChecked);
            }
        } catch (error) {
            console.error('Error calling server method:', error);
        }
    }

    callServerMethod03(checkboxElement, value, type, nameGroupOption, foodID) {
        try {
            if(foodID !== undefined){
                const isChecked = checkboxElement.checked;
                this.$server.myMethod02(value.name, value.price, value.currency, type, nameGroupOption, foodID, isChecked);
            }
        } catch (error) {
            console.error('Error calling server method:', error);
        }
    }

    callServerMethod01(value) {
        // Dispatch a custom event to signal the server to call myMethod
        this.dispatchEvent(new CustomEvent('call-server-method'),   {
            detail: {
                itemName: value.name,
                itemPrice: value.price,
                itemCurrency: value.currency
            }
        });
    }

    render() {
        return html`
            <vaadin-vertical-layout class="vert-layout-row-food border">
                <vaadin-vertical-layout class="full-row-food">
                    <div class="component-width100"> ${unsafeHTML(this.nameFood)}</div>
                    <img src="${this.valueImage}" alt="Food Image" class="full-row-food"/>

                    <div class="full-row-food colorPrice padding5"><b>${this.price} - ${this.currency}</b></div>
                    <div class="component-width100-food padding5"> ${unsafeHTML(this.description)}</div>

                    ${this.optionValue.map((value, index) => html`
                        ${value.type === 1 ?
                                html`
                                    <vaadin-radio-group
                                            label="${value.nameGroupOption}"
                                            theme="vertical"
                                            class="component-width100-food"
                                            @value-changed="${(e) => this.callServerMethod02(e, value.type, value.nameGroupOption, this.foodID)}"
                                    >
                                        ${value.listRestoRestaurantMenuFoodOption.map((item, index) => html`
                                            <vaadin-radio-button
                                                    class="component-width100-food"
                                                    value="${item.name}"
                                                    label="${item.name} - ${item.price} ${item.currency}"
                                            ></vaadin-radio-button>
                                        `)}
                                    </vaadin-radio-group>`
                                : html`
                                    <vaadin-checkbox-group
                                            label="${value.nameGroupOption}"
                                            theme="vertical"
                                            class="component-width100-food"
                                    >
                                        ${value.listRestoRestaurantMenuFoodOption.map((item, index) => html`
                                            <vaadin-checkbox
                                                    class="component-width100-food"
                                                    value="${item.name}"
                                                    label="${item.name} - ${item.price} ${item.currency}"
                                                    @checked-changed=${(event) => this.callServerMethod03(event.target, item, value.type, value.nameGroupOption, this.foodID)}
                                            ></vaadin-checkbox>
                                        `)}
                                    </vaadin-checkbox-group>
                                `}
                    `)}
                </vaadin-vertical-layout>
            </vaadin-vertical-layout>
        `;
    }
}

customElements.define("resto-food-company-detail-element", RestoFoodCompanyDetailElement);

Seem condition ${value.type === 1 ? gets different effecting in dev vs prod build .

8

In your javascript you need to add the import for your components, for example:

import '@vaadin/text-field';

On top of your Java class you need to add:

@Uses(TextField.class)

I think that should solve your issue.

9

Thanks for support @jeanchristophe.gueriaud