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).
Related
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.
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
The AbsoluteLayout in Vaadin 8 (Framework) enables pixel-position-oriented placement of widgets within a layout. While not my first layout of choice, the AbsoluteLayout is suited to porting code from other UI-building platforms that use pixel-position-oriented layout.
Example code from the manual:
// A 400x250 pixels size layout
AbsoluteLayout layout = new AbsoluteLayout();
layout.setWidth("400px");
layout.setHeight("250px");
// A component with coordinates for its top-left corner
TextField text = new TextField("Somewhere someplace");
layout.addComponent(text, "left: 50px; top: 50px;");
I can see that the passed argument is simply CSS coding. But I am no HTML/CSS wizard, that’s why I am using Java-based Vaadin in the first place.
The migration guide for moving from Vaadin 8 (Framework) to Vaadin 10 (Flow) says in this list of components that the AbsoluteLayout from 8 is not included in 10, nor do they plan to add it in the future. But that page does offer this note about replacement for AbsoluteLayout:
Very easy to achieve the same in V10 using e.g. Div
Can someone explain what this would mean in a Java-based Vaadin app? Perhaps an example?
How might a person conveniently and routinely do pixel-positioning of widgets in a Vaadin 10 Flow app?
As your request for an "Hello World" example app, I downloaded the Project Starter with Spring Starter from https://vaadin.com/start and combined Tatu's solution with your example usage code. You can find it at https://github.com/Peppe/absolute-layout-demo.
You can test it live with the following commands in terminal / command line:
https://github.com/Peppe/absolute-layout-demo.git
cd absolute-layout-demo
mvn spring-boot:run
I created a class called AbsoluteLayout, with it's entirety looking like this:
public class AbsoluteLayout extends Div {
public AbsoluteLayout() {
getElement().getStyle().set("position", "relative");
}
public void add(Component component, int top, int left) {
add(component);
component.getElement().getStyle().set("position", "absolute");
component.getElement().getStyle().set("top", top + "px");
component.getElement().getStyle().set("left", left + "px");
}
}
Only change that I did, compared to what Tatu said, was to give the position relative to the parent layout. This makes the position of the children added to the layout relative to the layout, and not the body (or parent position relative in the DOM structure). Otherwise the component would be in top:50px, left:50px from browser corner.
Then the usage class looks like this:
#HtmlImport("styles/shared-styles.html")
#Route
public class MainView extends VerticalLayout {
public MainView() {
setClassName("main-layout");
//Just to add some content on the page to test relative position
for (int i = 0; i<5; i++){
add(new Div(new Text("Hello")));
}
// A 400x250 pixels size layout
AbsoluteLayout layout = new AbsoluteLayout();
layout.setWidth("400px");
layout.setHeight("250px");
// A component with coordinates for its top-left corner
TextField text = new TextField("Somewhere someplace");
layout.add(text, 50, 50);
add(layout);
}
}
I added a few lines of text before the layout to add some rows of text, just to test out the position:relative mentioned above.
Hope this helps and gets you on the right path. As you notice, this "AbsoluteLayout" doesn't have really any code to it - it is just a div. You can do this same trick with any layout in your app if you want to place one element into a relative position.
The simplest way in Java-based Vaadin app is to use Div as the layout and add components there.
For each component you want to position you need to apply CSS styles, there is Java API for that, i.e. component.getElement().getStyle().
It could be something like
public void setPosition(Component component, int x, int y) {
component.getElement().getStyle().set("position","absolute");
component.getElement().getStyle().set("top",y+"px");
component.getElement().getStyle().set("left",x+"px");
}
Probably you want to extend Div and the above method (that makes rudimentary AbsoluteLayout)
See also
https://developer.mozilla.org/en-US/docs/Web/CSS/position
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
I am developing a game app for blackberry where i want to place the buttons in a semi circle fashion on the home screen.....so far I have seen all the buttons being aligned either horizontally or vertically....is there any way out where we can place buttons at custom locations such as using a layout in android and hardcoding to place them in terms of pixels? Any help is greatly appreciated
thanks
You may do this by overriding sublayout in your field manager.
In the following example setPositionChild defines the X,Y position of the first field (field 0) added to this manager. To add additional fields increment the number in this.getField() and add the fields to hfm in the order you position them.
public HorizontalFieldManager testingXYPlacement() {
HorizontalFieldManager hfm = new HorizontalFieldManager() {
// Define the x,y, positions of the fields
protected void sublayout( int width, int height ) {
super.sublayout( width, height );
Field field = null;
field = this.getField(0);
if (field != null && equals(field.getManager())) {
setPositionChild(field, XPOS, YPOS);
}
setExtent( width, height);
}
};
hfm.add(new ButtonField("hello!"));
return hfm;
}
if you are used custom button than sometimes set margin is not working properly so used button.setpadding for place your desire location .please keep USEALLWIDTH for your Horizontal or Vertical layout
If your layout is a RelativeLayout you can position elements relative to other elements within the layout (or to the entire RelativeLayout). This directly lets you place views next to other views, and you can apply margins to offset the views from others.