How can i overlap two components in a horizontal layout. I have a progress bar in which i am trying to add a label upon it. The problem is i have structured my layout as horizontal layout upon a vertical layout. I have added components into the horizontal layout. As per my below code how can i add a two label upon a progress bar component, _process. This whole layout is build through Vaadin 7.6.3, Groovy programming.
The main layout is:
_VLayout = new VerticalLayout();
_VLayout.setSizeFull();
_VLayout.setSpacing(true);
_VLayout.addStyleName("new");
setCompositionRoot(_vLayout);
The layout added into vertical layout is horizontal layout which is _Layout.
_Layout = new HorizontalLayout();
_Layout.setSpacing(true);
_Layout.setSizeFull();
_Layout.addComponents(_machineName, _process, _Label, _time);
_Layout.setExpandRatio(_machineName, 0.1f);
_Layout.setExpandRatio(_process, 0.4f);
_Layout.setExpandRatio(_Label, 0.2f);
_Layout.setExpandRatio(_time, 0.3f);
I wanted to add a label on a _process, which is a progress bar. But how can i do that. ?any suggestions would be helpful.
Related
I'm trying to build a screen where there is a fixed widget at the top of the screen and another widget which is fixed to the bottom of the screen and in between is a scrollable widget.
I want to have the content inside the scrollable widget scroll underneath the two fixed widgets (both with a transparent blur), to indicate that there is more content underneath.
Here is an image of what I am trying to do.
I am currently using a Stack for this, however I am having to manually adjust the padding in the SingleChildScrollView to offset for the top and bottom widgets, but I would like to have this be much more flexible and have the widgets be any size and not have to update the padding.
I've found other examples where the bottom widget is part of the scrollable content but that isn't quite what I am looking for.
Does anyone know of a way to do this, without having to manually provide the padding?
I have a Vaadin 8 application with several views.
public class ViewName extends Panel implements View {
There is a VerticalLayout as main layout in the panel.
public ViewName() {
setSizeFull();
VerticalLayout mainLayout = new VerticalLayout();
setContent(mainLayout);
Then I have many different layouts (HorizontalLayout, GridLayout) or Components such as Label being added as components to the mainLayout. For the HorizontalLayouts I often do the following to use the full width of the screen:
hLayout.setWidth("100%");
I have a lot of icons, grids etc. Everything is OK as long as I don't resize the window.
When I resize the window to a small size I get a mess (icons, text etc. on top of each other) and no horizontal scrollbar. (However, the grids get horizontal scrollbars.) I have tried many things to fix this. If I add
mainLayout.setSizeFull();
or
mainLayout.setWidth("100%");
I have a mess on the big screen already. I also tried the CSS for the mainLayout as described here. I get several scrollbars but none for the window itself!
The only component that resizes correctly is a Label added to the mainLayout, e.g.:
Label title = new Label("Some text",ContentMode.HTML);
title.setWidth(100, Unit.PERCENTAGE);
mainLayout.addComponent(title);
mainLayout.setComponentAlignment(title, Alignment.MIDDLE_CENTER);
I also noticed that anything in a GridLayout seems to stay in place after resizing but is not vissible since I have no scrollbar. However, icons in a HorizontalLayout get on top of each other.
What is wrong? Please, I need a general instruction on which layout I should use as main layout for my view panel, how to size the components and how to get ONE horizontal scrollbar for the main window if necessary.
The problem is that you are setting the width of your mainLayout to the width of your view. This means, that your mainLayouts width will never be bigger than your views width. So no scroll bar will appear.
According to the information you posted, changing your mainLayouts width to undefined should fix the problem.
mainLayout.setWidth("-1px");
I am working on an application that functions like a text messaging app. I am working on the layout of the app now. In the XML file I have an edit text on the top of the screen and one on the bottom of the screen. I want to dynamically create a scrollview that would be between the 2 edit texts. The scroll view would enable to scroll through multiple messages of the app. When I try to create the scrollview and textview dynamically it replaces the edittexts and they disappear.
So my question is how would I go about preventing the edittexts from disappearing and adding a scrollview in between the 2 edit texts ?
My code is like this:
ScrollView sv = new ScrollView(this);
LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);
sv.addview(ll);
TextView tv = new TextView(this);
tv.setText("Dynamic layouts ftw!");
ll.addView(tv);
this.setContentView(sv);
What you are asking to do is build a ListView. ListView'ss have every function you require and more. Further, with the adapters, they are pretty quick. Here is a decent turorial on using ListViews.
I'm new to Qt Designer, and I am working on a main window where I want to have two list widgets off to the right, laid out in a vertical splitter, and then a larger text browser widget to the left, which is then itself in a splitter with the list widgets. So the relative sizes of the list widgets can be resized vertically, and the horizontal space between the text browser and the other two widgets can also be resized.
I tried first laying out the two widgets on the right in a vertical splitter, and then selecting the layout, like so:
The problem is, now that the two list widgets are in the splitter layout, I can't then add that layout to any other larger layouts. All the options appear grayed out. If I just do a standard horizontal or vertical layout, it is possible to then make larger layouts out of smaller ones. So how is this to be done when using splitter layouts? Thanks!
Look's like you are selecting two ListWidgets instead splitter. To combine layouts you need to select one splitter which contains ListWidgets and then TextBrowser. In this case Lay Out Horizontaly in splitter will be available.
Here video demonstration (1.25 MB)
There is a panel with anchor layout used for vertical sizing.
Inside the panel there is a horizontal buttongroup.
Is there a way to set fixed width or better make the width depend on buttons?
In my case it is always stretched to the size of the window.
There is the same problem with the grid inside the panel.
Thank you.
Making the width dependent on the buttons is handled by the layout itself. If you have an hbox layout, each of the items inside the container (say, buttons) will automatically occupy the width.