Codename One - customize Dialog style not working

Question

I would like to have a customized Dialog styling, having another background color and a rounded border, as it looks nicer than the gray rectangle that comes by default.

This is partially possible, by styling the Contentpane of the Dialog. The problem is, that the underlying Dialog Style is still there, in which the contentpane is shown. And it seems the Dialog UDID itself cannot be changed, nor can the "Dialog" style be overwritten in the designer nor by code.

    Form hi = new Form();
    hi.getUnselectedStyle().setBgColor(0xffffff);
    Button but = new Button("open dialog");
    but.addActionListener(e -> {
        Dialog d = new Dialog(BoxLayout.y());

        d.setUIID("Container"); // this line has no effect, the outside dialog component is still visible

        Style s = d.getContentPane().getUnselectedStyle();
        s.setBorder(RoundRectBorder.create());
        s.setBgColor(0x00ff00);
        s.setBgTransparency(255);
        s.setMargin(5, 5, 5, 5); // adding some margin between contentpane and Dailog container, to be more obvious
        d.setDisposeWhenPointerOutOfBounds(true);

        // title
        Label title = new Label();
        title.setText("Confirmation");
        d.add(title);

        // body field with spanlabel info text
        SpanLabel bodyLabel = new SpanLabel("Body Text");
        d.add(bodyLabel);

        // delete button
        Button okButton = new Button("Ok");
        okButton.addActionListener(e2 -> {
            d.dispose();
        });

        // exit button
        Button exitButton = new Button("Cancel");
        exitButton.addActionListener(e3 -> {
            d.dispose();
        });
        d.add(GridLayout.encloseIn(2, okButton, exitButton));

        d.show();
    });

    hi.add(but);
    hi.show();

In above image, the outermost dark gray is the tinted area outside the dialog. The green is the content pane with the intended rounded border. the light grey in between comes from the Dialog style that I would like to get rid off.

Can this be done?

Shai Almog Shai Almog · Accepted Answer · 2019-08-23T02:15:59

Short answer: setDialogUIID("Container");

However dialogs are a bit problematic to customize via code, I would strongly recommend styling them via the designer/css as we just didn't design them for hand styling and so you're relying on internal implementation details that might break.

When you invoke getContentPane() on the Dialog you're styling the content pane of the Dialog. Not the Dialog itself so the dialog styling still has the non-transparent background. You can use getDialogStyle() to style the Dialog itself. I'm not sure how well that will work.

Codename One - customize Dialog style not working

1 Answers