Centering components in a Layout - css

I'm trying to center a picture and a label into a Vertical layout so here's the code i wrote:
picture = new Embedded(null, BrandableResourceHelper.getInstance().newResource("image/icon.png"));
lab = new Label();
lab.setWidth(100, UNITS_PERCENTAGE);
VerticalLayout col = new VerticalLayout();
col.addComponent(picture);
col.addComponent(lab);
col.setWidth(30, UNITS_PERCENTAGE);
col.setComponentAlignment(picture, Alignment.MIDDLE_CENTER);
col.setComponentAlignment(lab, Alignment.MIDDLE_CENTER);
Here's what i wanna get:
Here's what i'm getting:

Related

BackgroundImage Javafx Combobox

is there a way to set an Image (like setGraphic() for Button) for a ComboBox?
file = new File(IMG_DIR + "load.png");
BackgroundImage bg = new BackgroundImage(new Image(file.toURI().toString()),BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.CENTER,
BackgroundSize.DEFAULT);
comboBox.setBackground(new Background(bg));
That's what i tried, but it only results in a black background.
As comparison, what i do with my buttons:
File file = new File(IMG_DIR + "save.png");
ImageView imageView = new ImageView(new Image(file.toURI().toString()));
buttonSave.setGraphic(imageView);
what it currently looks like:
I want a load image on the ComboBox positioned like the images on the Buttons. Is that possible?
Thanks!

How to align controls from to differents VBox in JAVAFX

I have a Vbox with 5 Text classes, and other Vbox with a TextField, DatePicker, RadioButton, ToggleButton and a check box. 5 and 5. I want to align the first Text class in the first Vbox with the first control in the second Vbox, using a HBox, successively.
How could i do?
VBox verticaltextbox1 = new VBox();
Text nombre = new Text("Nombre");
Text fecha = new Text("Fecha");
Text genero = new Text("Genero");
Text reservacion = new Text("Reservacion");
Text tecnologias = new Text("Tecnologias conocidas");
VBox verticaltextbox2 = new VBox();
TextField caja = new TextField();
DatePicker calendario = new DatePicker(LocalDate.now());
RadioButton masculino = new RadioButton("Masculino");
ToggleButton reservacionSi = new ToggleButton("Si");
CheckBox java = new CheckBox("Java");
verticaltextbox1.getChildren().addAll(nombre, fecha, genero,
reservacion,tecnologias);
verticaltextbox2.getChildren().addAll(caja, calendario, masculino,
reservacionSi, java);
HBox horizontalbox = new HBox(50);
horizontalbox.getChildren().addAll(verticaltextbox1,verticaltextbox2)
You're probably better of using GridPane:
GridPane gridPane = new GridPane();
gridPane.setHgap(50);
gridPane.addRow(0, text1, textField);
gridPane.addRow(1, text2, datePicker);
gridPane.addRow(2, text3, radioButton);
gridPane.addRow(3, text4, toggleButton);
gridPane.addRow(4, text5, checkBox);
This aligns the text nodes horizontally and the rest of the nodes horizontally in columns and aligns corresponding text and control nodes vertically in a grid.

Vaadin window scrolling

I have a vaadin window with a specific size When the browser window is small, some fields aren't visible (probably because of the size of the window). We need to enable scrolling in these cases.So I try to add the content of my window in a panel but it doesn't work .Have you any idea please?
setModal(true);
setResizable(false);
setClosable(false);
Panel mainPanel = new Panel();
VerticalLayout content = new VerticalLayout();
content.addComponent.......
content.setSizeFull();
mainPanel.setContent(content);
The solution that came to my mind, is to set both max-height and 100% height of the modal window, so that if the content has not enough space (due to browser window size) scrollbar will appear. Contrary, when browser window is big enough, max-height come into play and the modal window is centered and has predefined in ccs max-height.
Code sample that works in my app:
windowOpenButton.addClickListener(event -> {
Window window = new Window();
window.setWidth("100px");
window.setHeight("100%");
window.setModal(true);
window.setResizable(false);
window.setClosable(false);
Panel panel = new Panel();
Button close = new Button("close");
close.addClickListener(event1 -> window.close());
VerticalLayout content = new VerticalLayout(new Button(), new Button(), new Button(), new Button(), new Button(), new Button(), new Button(), new Button(), new Button(), new Button(), close);
content.setSizeFull();
panel.setContent(content);
window.setContent(panel);
window.setStyleName("max_height");
panel.setSizeUndefined();
UI.getCurrent().addWindow(window);
});
css:
.max_height {
max-height: 350px;
}
Instead you can just use setSizeFull() in your window to achieve that
so your code will be like :
setModal(true);
setResizable(false);
setClosable(false);
setSizeFull()
Panel mainPanel = new Panel();
VerticalLayout content = new VerticalLayout();
content.addComponent.......
content.setSizeFull();
mainPanel.setContent(content);

Adjustment of contents in FlowPane

I have a flowpane in center and i applied a slider effect which gets invoke on a click of button on the right (so slider moves from right to left when expanded). I have followed JewelSea slider tutorial mentioned here Slider
Now i have two different flowpanes in two different nodes. Both the flowpane contains array of labels but the only difference is, One flowpane contains scrollbar and is contained in TitlePane while the other is without scrollbar and no titlepane.
So now if i click on slider the contents in the flowpane(without scrollbar & titlepane) gets automatically adjusted but its not the same case with the flowpane containing scrollbar.
Here is relevant code for flowpane with scrollbar-
public void loadCase() {
ScrollPane s = null;
if (!homeController.mainTabPane.getTabs().contains(testTab)) {
int app = 0;
if (appareaList.size() > 0) {
FlowPane fpTestmoduleContainer = new FlowPane();
FlowPane example = new FlowPane();
for (ApplicationAreas appttribute : appareaList) {
appTestTitledPane[app] = new TitledPane();
appTestTitledPane[app].setText(appttribute.getApplication_name());
appTestTitledPane[app].setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
/*Module loop start*/
fpTestmoduleContainer.setHgap(10);
fpTestmoduleContainer.setVgap(10);
// fpTestmoduleContainer.setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
List<TestModuleAttribute> testmoduleList = WSData.getTestingModuleList(appttribute.getApplication_id());
ArrayList<Label> listTestlbs = new ArrayList<Label>(testmoduleList.size());
System.out.println("testmoduleList.size()" + testmoduleList.size());
int i = 0;
for (TestModuleAttribute testmattribute : testmoduleList) {
listTestlbs.add(new Label());
listTestlbs.get(i).setText(testmattribute.getModule_name());
listTestlbs.get(i).setAlignment(Pos.CENTER);
listTestlbs.get(i).setTextAlignment(TextAlignment.CENTER);
listTestlbs.get(i).setWrapText(true);
listTestlbs.get(i).setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
listTestlbs.get(i).setId(testmattribute.getFxnode_css());
Image imgInstalled = new Image(getClass().getResourceAsStream("/upgradeworkbench/View/Icons/ok.png"));
listTestlbs.get(i).setGraphic(new ImageView(imgInstalled));
listTestlbs.get(i).setContentDisplay(ContentDisplay.BOTTOM);
Tooltip testtp = new Tooltip();
testtp.setText("Total No. Of test Cases :" + testmattribute.getTest_case());
testtp.setWrapText(true);
listTestlbs.get(i).setTooltip(testtp);
addModuleMouseClickListener(listTestlbs.get(i), testmattribute.getModule_name(), testmattribute.getFxnode_css(), testmattribute.getTest_case());
i = i + 1;
}
s = new ScrollPane();
s.setContent(fpTestmoduleContainer);
fpTestmoduleContainer.setPrefWidth(1500);
fpTestmoduleContainer.getChildren().addAll(listTestlbs);
//appTestTitledPane[app].setContent(fpTestmoduleContainer[app]);
listTestlbs.clear();
app = app + 1;
}
appareaTestmoduleContainer.getPanes().addAll(appTestTitledPane);
appareaTestmoduleContainer.setExpandedPane(appTestTitledPane[0]);
testTab.setText("Test Cases Wizard");
testTab.setText("Testing Application Foot Print");
//mainTab.setClosable(true);
// testTab.getContent().setVisible(true);
HBox hb = new HBox();
testTab.setContent(s);
}
}
}
Image of slider working as expected - before sliding
After sliding (without scrollbar) the 4 modules get to the next row as space is occupied by the slider
After adding scrollpane and embedding flowpane inside it. Slider overlaps the flowpane contents as shown
I want to know why the scrollbar causing issue in auto adjustment of contents inside the flowpane and how can i fix it ?
Here the width of your scrollpane is fixed. And then so is the width of the flow pane.You need to change the size of your scrollpane so that its content gets reset.
Use the following code.
scroll[app].setFitToHeight(true);
scroll[app].setFitToWidth(true);
This code will set the size of scrollpane according to the view. The flowpane will also adjust accordingly then.

Displaying Images Side-by-Side in Qt with Scrollbars

I'm a Qt newbie. I want to display 2 images side-by-side using Qt. Using Qt's Image Viewer Example, I want to add another scrollable image display, such that both images are displayed side-by-side.
The example code has this snippet for the ctor:
ImageViewer::ImageViewer()
{
imageLabel = new QLabel;
imageLabel->setBackgroundRole(QPalette::Base);
imageLabel->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
imageLabel->setScaledContents(true);
scrollArea = new QScrollArea;
scrollArea->setBackgroundRole(QPalette::Dark);
scrollArea->setWidget(imageLabel);
setCentralWidget(scrollArea);
...
If I understand it correctly, I want to get imageLabel to be only half width of the screen while another QLabel is displayed on the other half.
How can I do this?
Thanks.
If I understand correctly, this here should suffice:
// Left image
imageLabelLeft = new QLabel;
imageLabelLeft->setBackgroundRole(QPalette::Base);
imageLabelLeft->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
imageLabelLeft->setScaledContents(true);
scrollAreaLeft = new QScrollArea;
scrollAreaLeft->setBackgroundRole(QPalette::Dark);
scrollAreaLeft->setWidget(imageLabelLeft);
// Right image
imageLabelRight = new QLabel;
imageLabelRight->setBackgroundRole(QPalette::Base);
imageLabelRight->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
imageLabelRight->setScaledContents(true);
scrollAreaRight = new QScrollArea;
scrollAreaRight->setBackgroundRole(QPalette::Dark);
scrollAreaRight->setWidget(imageLabelRight);
// Do the layout
QWidget *centralWidget = new QWidget;
QHBoxLayout *layout = new QHBoxLayout(centralWidget);
layout->addWidget(scrollAreaLeft);
layout->addWidget(scrollAreaRight);
setCentralWidget(centralWidget);

Resources