Codename One - customize Dialog style not working - dialog

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?

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.

Related

Vaadin 10 Dialog emulating Vaadin 8 Window Caption

Using Vaadin Flow Java API I would like to emulate a Vaadin 8 Window feature: particularly I need to emulate Caption behaviour.
I mean a fixed top "Title" not scrollable as the real content of the Dialog. Anyone can tell me some Example I could learn from ?
Thanks in advance
This is the workaround I found.
public MainView() {
Button button = new Button("Click me",
event -> {
Dialog dialog = new Dialog();
HorizontalLayout horizontalLayout = new HorizontalLayout();
VerticalLayout verticalLayout = new VerticalLayout();
Div headerDiv = new Div();
Div bodyDiv = new Div();
bodyDiv.getElement().getStyle().set("overflow", "auto");
bodyDiv.getElement().getStyle().set("max-height", "420px"); // !!!
dialog.add(headerDiv, bodyDiv);
headerDiv.add(horizontalLayout);
bodyDiv.add(verticalLayout);
horizontalLayout.add(new Label("Hi there !"));
for (int i = 1; i <= 20; i++) {
verticalLayout.add(new TextField("TextField_" + i));
}
dialog.open();
});
add(button);
}
The trouble is that I have to fix max-height size to avoid scrolling of all the contained components. So I cannot take advantage from the auto-size behaviour of the Dialog Container. Also tried using setFlexGrow, but I did not reach the solution.
Any Hint ?
In Vaadin 10+ there is no component called Window, but there is component called Dialog. It does not have Title like Window, but otherwise it has similar baseline. I.e. it is popup. Based on your question you have found already that.
Dialog itself is component container, which means you can add components there. I would just create e.g two Divs (the simplest of the layout components in Vaadin 10). I would style the first one to have fixed height and place the Title there. And then I would apply component.getElement().getStyle().set("overflow", "auto") to the other one, which is the actual content body. The mentioned style will enable the scrollable feature. You could potentially use VerticalLayout / HorizontalLayout instead of Div as well depending what you need.
See also: https://vaadin.com/docs/v10/flow/migration/5-components.html

Layout composition varying between preview and running app in CN1

I configured a layout with the following result:
The Layout of the Form's contentpane is TableLayout which consists of one cell. The contentpane has only one container as child for which I set the layoutConstraint with the following modified values: width = 100%, height = 100%, Align = CENTER, Vertical Align = CENTER.
In other words, I'm centering the components of the form.
In the preview it looks as expected but not when the app runs in the simulator!
Note:
I'm not modifiying any style or layout properties in my code! Thus I have no idea why it's not as intended in the simulator.
The approach from How to show two or more label at centre of the container in codenameone didn't work for me!
this is my code concerning that form:
#Override
protected void postIntroLangSelect(Form f) {
f.getTitleArea().setHidden(true);
f.revalidate();
// button configuration
Button btnDE = findButtonDE(f);
Button btnTR = findButtonTR(f);
btnDE.addActionListener((e) -> {
settings.setLocale(Lang.GERMAN);
showNextForm();
});
btnTR.addActionListener((e) -> {
settings.setLocale(Lang.TURKISH);
showNextForm();
});
}
Set your form's layout to BorderLayout and check the Absolute Center, then add a container on the form with its layout constraint set to Center. Give this container a BoxLayout Y layout and add all your other components in it.
If this approach didn't work for you, then you will have to hand-code your form and set it's Layout to new BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER).

How to set Dialog text position from code?

Good day all,
I have a simple Dialog started after click button, I post my code:
Dialog dialog;
super();
dialog = new Dialog("Dialog example");
dialog.addText(strFmt("Text to show"));
dialog.addText(strfmt("SecondText to show"));
dialog.run();
I will show a Dialog window loollike this :
It's possible to set the position from code the Text: Text to show ?
For example, if I want to centered position the second text how should I do?
I tried to put blanks in the code:
dialog.addText(strfmt(" Text to show"));
But nothing changes, and this I think not good method.
I saw any suggestions on Web but or I do not use well or is not suitable for me: Example-suggestions.
Exist a method to do what I want?
Thanks for help,
enjoy!
You can center the text using the form control:
Dialog dialog = new Dialog("Dialog example");
DialogText t1 = dialog.addText(strFmt("Text to show"));
DialogText t2 = dialog.addText(strfmt("SecondText to show"));
FormStaticTextControl c1 = t1.control();
c1.widthMode(FormWidth::ColumnWidth);
c1.alignment(FormAlignment::Center);
dialog.run();
The first control is now centered (to the surrounding group).
You have to give it ColumnWidth, otherwise the control would have the minimum size and the centering would have no effect.

Switch checkbox text and component

I want to create checkbox with text in the left side and the checkbox component on the right side. How I can switch their place?
CheckBox cb = new CheckBox("Show on Startup");
In JavaFX 8, you can do it like this:
Label lb = new Label("left check");
lb.setGraphic(new CheckBox());
lb.setContentDisplay(ContentDisplay.RIGHT); //You can choose RIGHT,LEFT,TOP,BOTTOM
There might be an easier way, but you can use a label and wrap it with the CheckBox in a HBox:
HBox box = new HBox();
CheckBox cb = new CheckBox();
Label text = new Label("Show on Startup");
box.getChildren().addAll(text, cb);
box.setSpacing(5);
It would be nice if the CheckBox considered the box as its "content" like some of the other controls based on Labeled. Then the contentDisplayProperty could be set to ContentDisplay.RIGHT to achieve this. A nice side-effect would be that we could change the rendering of the box with a setGraphic() call.
As of my release (1.8 EA b129), CheckBox doesn't work that way.

How can I create resizing spacers in JavaFX?

First of all, I'm a long time Java/Swing developer. I recently installed JavaFX 2.2 to play around with.
I'm creating a fairly simple app, whose main window has a toolbar on top and content in the rest of the window. The obvious way to accomplish this is to use a BorderPane, and stick a ToolBar into the top section. So far, so good. However, I would like some of the controls in the toolbar to be at the left edge of the window, and some at the right edge. I can find no way to do this. I can put an invisible spacer object into the toolbar, but I only know how to give it a fixed width; it doesn't resize when the window is resized.
So I thought that instead of using a ToolBar object, I'll just use an HBox; it should be equivalent to a horizontally-oriented Swing Box object, right? And the Swing Box class has a createHorizontalGlue() method that inserts an auto-sizing spacer. Well, I can't find an equivalent in the JavaFX HBox class. Is there no simple way to do this?
I figured out how to do it using an HBox instead of a ToolBar to hold the controls; the key is the HBox.setHgrow() method, which allows you to set a spacer object to grow to fill the available space. I still don't know if it's possible to do this with an actual ToolBar instance.
/**
* Creates and populates the Node that serves as the window toolbar.
*
* #return a newly constructed and populated toolbar component
*/
private Node makeToolbar() {
// Auto-sizing spacer
Region spacer = new Region();
HBox.setHgrow(spacer, Priority.ALWAYS);
// Horizontal box containing toolbar controls
HBox box = new HBox();
box.setPadding(new Insets(8));
box.setAlignment(Pos.CENTER);
box.getChildren().addAll(openButton, spacer, resizeSlider);
// Colored background panel with drop shadow
Pane bgRect = new Pane();
bgRect.setStyle("-fx-background-color: #e0e0e0;");
bgRect.setEffect(DropShadowBuilder.create().width(1).build());
// StackPane to hold box and rectangle
StackPane stack = new StackPane();
stack.getChildren().addAll(bgRect, box);
return stack;
}
i do it this way:
private Node makeFooter(Node left, Node right) {
ToolBar footer = new ToolBar();
Region spacer = new Region();
HBox.setHgrow(spacer, Priority.ALWAYS);
spacer.setMinWidth(Region.USE_PREF_SIZE);
footer.getItems().addAll(left, spacer, right);
return footer;
}
hope i could help someone

Resources