Placing buttons on opposite sides of an adjustable window in JavaFX - javafx

I have two buttons that I'd like to use in my display screen: a reset button, and a settings button.
The problem is, I want them on opposite sides of the window (reset in the top right corner and settings in the top left) while being the same height. When I expand the window, however, the buttons stay in the same place, but I want them to move with the window walls.
I first tried using setAlignment of my reset button to Pos.*TOP_RIGHT* and the settings button to top left, but it comes out with the settings button being on top of the reset button.
resetButton = new Button("Reset Gameboard");this.setTop(resetButton);
resetBox = new HBox(resetButton);
resetBox.setAlignment(Pos.TOP_RIGHT);
backButton = new Button("Back to Settings");
this.setTop(backButton);
backBox = new HBox(backButton);
backBox.setAlignment(Pos.TOP_LEFT);
resetbackBox = new HBox(backButton, resetButton);
this.setTop(resetbackBox);`
I currently am using (below) which during the initial window appears to be working and correctly spaced, but as soon as you expand the window the reset button doesn't follow it, although the settings button does.
`resetButton = new Button("Reset Gameboard");
this.setTop(resetButton);
resetBox = new HBox(resetButton);
resetBox.setAlignment(Pos.TOP_RIGHT);
backButton = new Button("Back to Settings");
this.setTop(backButton);
backBox = new HBox(backButton);
backBox.setAlignment(Pos.TOP_LEFT);
resetbackBox = new HBox(backButton, resetButton);
resetbackBox.setSpacing(380);
this.setTop(resetbackBox);`

The problem start from this line:
resetbackBox.setSpacing(380);
You have setted a fixed spacing value. To fix that you can easily add a component to HBox called Region, this component allow to set a grow area between two buttons:
Button resetButton = new Button("Reset Gameboard");
Button backButton = new Button("Back to Settings");
Region region = new Region();
HBox.setHgrow(region, Priority.ALWAYS);
HBox topHBox = new HBox(backButton, region, resetButton);
this.setTop(resetbackBox);

Related

Display big image in QListWidget

I want to use QListWidget to display big images, e.g. 3508×4961 size in pixels, each list item will display one image. The image is set in a Qlabel and the Qlabel is set into the QListWidgetItem by setItemWidget(). When my program is running, the list item cannot display the entire image because the image is too large. It only displays the upper part of an image. When I scroll down, the list item changes to the next image immediately instead of showing the lower part of the current image gradually. Does anyone know how to show the lower part of each image by scrolling?
Here is my code,
QImage *image = new QImage("/home/sk/image1.png");
QLabel *label = new QLabel;
label->setPixmap(QPixmap(QPixmap::fromImage(*image)));
QListWidgetItem *ite = new QListWidgetItem;
auto size = label->sizeHint();
ite->setSizeHint(label->sizeHint());
size = ite->sizeHint();
ui->listWidget->addItem(ite);
ui->listWidget->setItemWidget(ite, label);
image = new QImage("/home/sk/image2.png");
label = new QLabel;
label->setPixmap(QPixmap(QPixmap::fromImage(*image)));
ite = new QListWidgetItem;
ite->setSizeHint(label->sizeHint());
ui->listWidget->addItem(ite);
ui->listWidget->setItemWidget(ite, label);
image = new QImage("/home/sk/image3.png");
label = new QLabel;
label->setPixmap(QPixmap(QPixmap::fromImage(*image)));
ite = new QListWidgetItem;
ite->setSizeHint(label->sizeHint());
ui->listWidget->addItem(ite);
ui->listWidget->setItemWidget(ite, label);
have you tried changing the scroll mode to ScrollPerPixel
setVerticalScrollMode
and
setHorizontalScrollMode
ui->listWidget->setVerticalScrollMode(QListWidget::ScrollPerPixel);
and in order to change the scroll step
ui->listWidget->verticalScrollBar()->setSingleStep(10);
ui->listWidget->verticalScrollBar()->setPageStep(20);
these values will be used for scrolling

Qt tab widget add corner group widget

I want to add a group widget to the corner of tab widget. so i wrote these below, but doesn't work.
auto layout = new QHBoxLayout;
auto text = new QTextEdit;
auto button = new QPushButton("find");
layout->addWidget(text);
layout->addWidget(button);
auto group = new QGroupBox;
group->setLayout(layout);
stageTabWidget->setCornerWidget(group);
problem solved! It turns out that the group was too small to show the widget. Change the style of the group with this line group->setStyleSheet("QGroupBox{border:0px;padding-top:-10px;padding-bottom:-10px;}"); will be ok.

Tab text alignment in QTabWidget

I am using QTabWidget class of Qt.
In TabWidget i am dynamically adding new tab and setting the TextElideMode to right to display the toolbutton in tabBar.
tabWidget = new QTabWidget(this);
m_addNewTab = new QWidget(tabWidget);
m_addNewGridLayout = new QGridLayout(m_addNewTab);
m_addNewWebView = new MyWebView(m_addNewTab);
widget = new QWidget(m_addNewTab);
tb = new QToolButton(widget);
tb->setFixedHeight(20);
tb->setText("<");
tb1 = new QToolButton(widget);
tb1->setFixedHeight(20);
tb1->setText(">");
m_horizontalLayout = new QHBoxLayout(widget);
m_horizontalLayout->addWidget(tb);
m_horizontalLayout->addWidget(tb1);
Please see the below screen shot for the output of the sample application.
When the current tab is selected then both the toolbutton should display and text elide mode should be right but when tab is not selected then toolbutton should not be displayed but text elide mode should be left.
Here in below screen shot i am able to hide and show the toolbutton depending on tab selection but when the tab is not selected text elide mode is setting as right so we are able to see the unnecessary space (check last tab). Setting the text elide mode left also not working because we have already set the toolbutton at left side.
Can someone guide me how to remove the space (last tab from screen shot) when there is not tab selected ?
You'll have to:
Keep track of tab index and corresponding holding widget (let's say std::map<int,QToolButton> toolbutton_by_index
When QTabWidget.currentChanged is emitted, deactivate all widgets except the selected
You can do the 2nd part like this:
std::for_each(toolbutton_by_index.begin(), toolbutton_by_index.end(),
[&index](auto pair){
(pair.first == index)?pair.second->hide():pair.second->show()});

set spacing among elements within button javafx

I want to specify spacing between two elements within JavaFX Buttons, Here is the Code :
ImageView fiv = new ImageView(new Image("/modified/map.png"));
fiv.setFitHeight(20);
fiv.setPreserveRatio(true);
Button cr = new Button( "Crop", fiv);
Here I want to Specify Spacing Between "Crop" and fiv, How can i do this ?
Use graphicTextGap property of the button.

Showing one widget over other panel

I'm working with GWT and I have a problem trying to show one VerticalPanel over other panel. I have two panels in my app: one as a menu bar and the other one as a main content. The VerticalPanel is the menu bar and when you move the mouse over it, it is opened showing you more options(widgets). The problem is that this new widgets are hidden by the panel which is below the menu bar. I want to show the whole widget even if it's partially "invading" another panel. I've tried the z-index property with CSS but I can't get it.
public class Example2 implements EntryPoint {
public void onModuleLoad()
{
//Creating the layout which one will contain two simplePanels
DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
dockLayoutPanel.setStylePrimaryName("layout");
//Creating the two Simplepanels
SimplePanel menuPanel = new SimplePanel();
menuPanel.setStylePrimaryName("menuPanel");
SimplePanel mainContentPanel = new SimplePanel();
mainContentPanel.setStylePrimaryName("mainContentPanel");
//Adding panels to the DockLayoutPanel
dockLayoutPanel.addNorth(menuPanel, 10);
dockLayoutPanel.add(mainContentPanel);
VerticalPanel vPanel = new VerticalPanel();
//Creating some buttons
Button a = new Button("Button");
vPanel.add(a);
Button b = new Button("MoreButton");
vPanel.add(b);
Button c = new Button("AnotherButton");
vPanel.add(c);
Button d = new Button("ButtonButton");
vPanel.add(d);
Button e = new Button("LastButton");
vPanel.add(e);
//Adding the buttons to the menuPanel(simplePanel)
menuPanel.add(vPanel);
RootLayoutPanel rp = RootLayoutPanel.get();
rp.add(dockLayoutPanel);
}
}
And the .css
.layout{
font-size:10px;
}
.menuPanel{
background:#e8f8ff;
}
.mainContentPanel{
background:#eee9e9;
}
With this example you might see my point. I know it's a dumb one, but it shows my problem. The buttons that are added to the vPanel are shown as long as they occupy space in the menuPanel, the rest are hidden under the mainContentPanel.
It can be as simple as changing the order in which you add menu panel and main panel to their parent widget. Add main panel first, then menu panel. Obviously, it's hard to be sure without seeing your code.

Resources