Codename One TextArea Padding has no effect

Question

Both the TextField and the TextArea in the attached image have the same UIID. I have set the left padding be 1 mm using theme designer.

You can see that the left padding is applied to the TextField but not the TextArea.

I have also attempted to set it manually in the code using gui_TextArea.getAllStyles().setPaddingLeft(1); and gui_textArea.getAllStyles().setPadding(1,1,1,1); to no effect.

There does not appear to be a setTextUIID() method for TextArea.

How do we set the padding for this component?

Full source per Steve's request:

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package com.this.that.gui;

import com.codename1.ui.Button;
import com.codename1.ui.Component;
import com.codename1.ui.Container;
import com.codename1.ui.Dialog;
import com.codename1.ui.Display;
import com.codename1.ui.TextField;
import com.codename1.ui.layouts.BoxLayout;
import com.codename1.ui.layouts.FlowLayout;
import com.codename1.ui.layouts.LayeredLayout;
import com.codename1.ui.plaf.Style;
import com.this.that.Constants;
import com.this.that.Main;
import com.this.that.util.MyNetwork;
import com.this.that.util.MyToolbar;
import com.this.that.util.MyValidator;
import com.this.that.util.User;
import java.util.HashMap;
import java.util.Map;

/**
 * GUI builder created Form
 */
public class Contact extends com.codename1.ui.Form {

    private User user;

    public Contact() {
        this(com.codename1.ui.util.Resources.getGlobalResources());
    }

    public Contact(com.codename1.ui.util.Resources resourceObjectInstance) {
        initGuiBuilderComponents(resourceObjectInstance);
        Style s = gui_Message.getAllStyles();
        s.setPaddingUnit(Style.UNIT_TYPE_DIPS);
        s.setPadding(6, 6, 6, 6);
        this.revalidate();
    }

//-- DON'T EDIT BELOW THIS LINE!!!
    private com.codename1.ui.Container gui_welcomeContainer = new com.codename1.ui.Container(new com.codename1.ui.layouts.BorderLayout());
    private com.codename1.ui.Label gui_null = new com.codename1.ui.Label();
    private com.codename1.ui.Container gui_BodyContainer = new com.codename1.ui.Container(new com.codename1.ui.layouts.BoxLayout(com.codename1.ui.layouts.BoxLayout.Y_AXIS));
    private com.codename1.ui.Label gui_spacer1 = new com.codename1.ui.Label();
    private com.codename1.ui.TextField gui_Subject = new com.codename1.ui.TextField();
    private com.codename1.ui.TextArea gui_Message = new com.codename1.ui.TextArea();
    private com.codename1.ui.Button gui_SubmitButton = new com.codename1.ui.Button();


//                           
    private void guiBuilderBindComponentListeners() {
        EventCallbackClass callback = new EventCallbackClass();
        gui_SubmitButton.addActionListener(callback);
    }

    class EventCallbackClass implements com.codename1.ui.events.ActionListener, com.codename1.ui.events.DataChangedListener {
        private com.codename1.ui.Component cmp;
        public EventCallbackClass(com.codename1.ui.Component cmp) {
            this.cmp = cmp;
        }

        public EventCallbackClass() {
        }

        public void actionPerformed(com.codename1.ui.events.ActionEvent ev) {
            com.codename1.ui.Component sourceComponent = ev.getComponent();

            if(sourceComponent.getParent().getLeadParent() != null && (sourceComponent.getParent().getLeadParent() instanceof com.codename1.components.MultiButton || sourceComponent.getParent().getLeadParent() instanceof com.codename1.components.SpanButton)) {
                sourceComponent = sourceComponent.getParent().getLeadParent();
            }

            if(sourceComponent == gui_SubmitButton) {
                onSubmitButtonActionEvent(ev);
            }
        }

        public void dataChanged(int type, int index) {
        }
    }
    private void initGuiBuilderComponents(com.codename1.ui.util.Resources resourceObjectInstance) {
        guiBuilderBindComponentListeners();
        setLayout(new com.codename1.ui.layouts.BoxLayout(com.codename1.ui.layouts.BoxLayout.Y_AXIS));
        setInlineStylesTheme(resourceObjectInstance);
        setScrollableY(false);
                setInlineStylesTheme(resourceObjectInstance);
        setTitle("");
        setName("Contact");
        addComponent(gui_welcomeContainer);
        gui_welcomeContainer.setUIID("welcomeContainer");
                gui_welcomeContainer.setInlineStylesTheme(resourceObjectInstance);
        gui_welcomeContainer.setName("welcomeContainer");
        ((com.codename1.ui.layouts.BorderLayout)gui_welcomeContainer.getLayout()).setCenterBehavior(com.codename1.ui.layouts.BorderLayout.CENTER_BEHAVIOR_CENTER);
        gui_welcomeContainer.addComponent(com.codename1.ui.layouts.BorderLayout.CENTER, gui_null);
        gui_null.setText("Contact Us");
        gui_null.setUIID("welcomeLabel");
                gui_null.setInlineStylesTheme(resourceObjectInstance);
        addComponent(gui_BodyContainer);
                gui_BodyContainer.setInlineStylesTheme(resourceObjectInstance);
        gui_BodyContainer.setName("BodyContainer");
        gui_BodyContainer.addComponent(gui_spacer1);
        gui_BodyContainer.addComponent(gui_Subject);
        gui_BodyContainer.addComponent(gui_Message);
        gui_BodyContainer.addComponent(gui_SubmitButton);
        gui_spacer1.setText(" ");
                gui_spacer1.setInlineStylesTheme(resourceObjectInstance);
        gui_spacer1.setName("spacer1");
        gui_Subject.setScrollVisible(true);
        gui_Subject.setHint("  Subject");
        gui_Subject.setUIID("TextField");
                gui_Subject.setInlineStylesTheme(resourceObjectInstance);
        gui_Subject.setName("Subject");
        gui_Subject.setColumns(20);
        gui_Message.setHint("  Please enter a brief message");
        gui_Message.setUIID("TextField");
                gui_Message.setInlineStylesTheme(resourceObjectInstance);
        gui_Message.setName("Message");
        gui_Message.setMaxSize(1000);
        gui_Message.setColumns(20);
        gui_Message.setRows(10);
        gui_SubmitButton.setText("Submit");
                gui_SubmitButton.setInlineStylesTheme(resourceObjectInstance);
        gui_SubmitButton.setName("SubmitButton");
        gui_SubmitButton.setTextPosition(com.codename1.ui.Component.BOTTOM);
        gui_welcomeContainer.setUIID("welcomeContainer");
                gui_welcomeContainer.setInlineStylesTheme(resourceObjectInstance);
        gui_welcomeContainer.setName("welcomeContainer");
        ((com.codename1.ui.layouts.BorderLayout)gui_welcomeContainer.getLayout()).setCenterBehavior(com.codename1.ui.layouts.BorderLayout.CENTER_BEHAVIOR_CENTER);
                gui_BodyContainer.setInlineStylesTheme(resourceObjectInstance);
        gui_BodyContainer.setName("BodyContainer");
    }// 

//-- DON'T EDIT ABOVE THIS LINE!!!
        public void onSubmitButtonActionEvent(com.codename1.ui.events.ActionEvent ev) {
        if (gui_Subject.getText().equals("") || gui_Message.getText().equals("")) {
            Main.showDialog("You must enter all fields.");
        } else {
            if (user.getName() == null || user.getEmail() == null) {
                requestNameOrEmail();
            }
            else{
                sendMessage(false);
            }
        }
    }

    private void requestNameOrEmail(){
        Dialog d = new Dialog(new BoxLayout(BoxLayout.Y_AXIS));
        d.setTitle("Require Name/Email to Send");

        Container nameLayeredLayout = new Container(new LayeredLayout());
        TextField name = new TextField();
        name.setHint("Name");
        nameLayeredLayout.add(name);

        Container emailLayeredLayout = new Container(new LayeredLayout());
        TextField email = new TextField();
        email.setHint("Email");
        emailLayeredLayout.add(email);

        if(user.getName() != null){
            name.setText(user.getName());
        }
        if(user.getEmail() != null){
            email.setText(user.getEmail());
        }

        Map validatorParams = new HashMap<>();
        validatorParams.put("name", false);
        validatorParams.put("email", false);
        MyValidator v = new MyValidator(validatorParams);
        v.setupLengthConstraint(nameLayeredLayout, name, 2, 30, "name", "Name must be 2-30 characters.");
        v.setupEmailConstraint(emailLayeredLayout, email, "email", "Email not valid.");

        Container buttonCnt = new Container();
        Button cancel = new Button("Cancel");
        cancel.addActionListener((l) -> {
            d.dispose();
        });

        Button submit = new Button("Submit");
        submit.addActionListener((l) -> {
            if (v.isValid()) {
                d.dispose();
                sendMessage(true);
            }

        });
        buttonCnt.add(cancel).add(submit);

        d.add(nameLayeredLayout).add(emailLayeredLayout).add(FlowLayout.encloseCenter(buttonCnt));
        d.show();
    }

    private void sendMessage(boolean updateUser) {
        Map params = new HashMap<>();
        params.put("update_user",String.valueOf(updateUser));
        params.put("sender_name", user.getName());
        params.put("sender_email", user.getEmail());
        params.put("sender_udid", Display.getInstance().getUdid());
        params.put("subject", gui_Subject.getText());
        params.put("message", gui_Message.getText());
        MyNetwork.getInstance().getNetworkObject("POST", Constants.SEND_EMAIL, params, "noDialog");
        Main.showDialog("Message sent.");
        Home form = new Home();
        MyToolbar.getInstance().setupToolbar(form);
        form.show();
    }

}

Here is the .gui for the form

Here are the relevant lines from theme.xml (uiid is set to TextField)

Here is a screenshot of the Theme Designer showing padding for Selected TextField UIID. Padding in millimeters is also applied to unselected and pressed. Both components share this UIID but the padding is only appearing on the text field component, not the text area component. This behavior does not change if the lines that I added in the code to set padding are present or not.

You see in the screenshot that left and right are both in mm while top/bottom are in pixels. I also set it so that all four units are mm and it did not change the behavior.

(We are using CN1 v4.0)

SolStack · Accepted Answer

To resolve the issue, I ended up doing the following:

Reverted my project to a prior commit that did not have any padding styling for TextArea or TextField
In the Theme Designer I edited the padding on each state one-by-one instead of copying the styling from one state to another.

I am suspecting but cannot say for certain that the issue was caused by the act of copy/pasting the styling in the Theme Designer. AFAIK that is the only difference between the working and non-working versions of the styling. I seem to recall running into issues when doing copy/paste in the designer in the past.

Codename One TextArea Padding has no effect

Answers (2)

Related Questions