I need to process some data and show processing logs on a webpage. (Around 300 lines of text).
I tried to use labels. At first it worked fine - page became scrollable and all text could be seen. But after around 100 labels page became unresponsive.
How to manage this task?
(I tried to look for some other components on webcomponents.org but couldn't find anything.)
TextArea
I tried one of the approaches mentioned in Answer by Leif Åstrand, using TextArea.
When I preload with 300 short lines, no problem. Clicking a button to add 10 more lines at a time works without a hitch. Using the web browser’s window scroll bar to scroll up and down works smoothly.
I used Vaadin 10.0.4 with Java 10.0.1 (Zulu by Azul Systems), in browser Safari 11.1.2 on macOS High Sierra on an external 4K monitor hooked up to a MacBook Pro Retina.
Here is the entire Vaadin app.
package com.basilbourque.example;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.HtmlImport;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.router.Route;
import java.time.Instant;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.stream.Collectors;
/**
* The main view contains a button and a template element.
*/
#HtmlImport ( "styles/shared-styles.html" )
#Route ( "" )
public class MainView extends VerticalLayout {
TextArea textArea;
// Constructor.
public MainView () {
this.setWidth( "100%" );
this.textArea = new TextArea( "Logs" );
this.textArea.setWidth( "100%" );
this.textArea.setReadOnly( true );
this.appendRows( 300 );
Button button = new Button( "Add 10 more rows" , event -> {
this.appendRows( 10 );
} );
this.add( button , this.textArea );
this.setClassName( "main-layout" );
}
private void appendRows ( int countRows ) {
List< String > entries = new ArrayList<>( countRows );
for ( int i = 1 ; i <= countRows ; i++ ) {
entries.add( Instant.now().toString() );
}
Collections.reverse( entries ); // Put newest on top.
String s = entries.stream().collect( Collectors.joining( "\n" ) );
textArea.setValue( s + "\n" + this.textArea.getValue() );
}
}
You can put all the text in only one component instead of creating a separate component for each line. If you want line breaks (i.e. \n) in the text to wrap to the next line, you can adjust the white-space CSS property for the element to be e.g. pre-line or pre-wrap instead. You can do this using component.getElement().getStyle().set("white-space", "pre-wrap").
Another alternative if you want to visually indicate the status of the text might be a readonly TextArea component.
I would also recommend using the Span component instead of Label in Vaadin 10. Label is using the <label> element in the browser which is actually only intended for labeling input fields, but not for general purpose chucks of text.
Related
Original Question
I want to add a loading indicator overlay to the grid.
I tried to append the overlay element to the shadow root by using the attachShadow method.
The following code works well in vaadin 22.
final Grid<String> grid = new Grid<>();
final Element element = new Element("div");
element.setText("Hello");
add(grid);
grid.getElement().attachShadow().appendChild(element);
When I execute the same code in vaadin 23 it breaks the component.
Alternative solution
I tried to extend the grid component on the client side with the following typescript code
import { Grid } from "#vaadin/grid";
export class CustomGrid extends Grid {
static get is() {
return 'custom-grid';
}
}
customElements.define(CustomGrid.is, CustomGrid);
To use my custom grid in flow, I have extended the flow Grid class and added my custom typescript code with the #JsModule annotation.
#Tag("custom-grid")
#JsModule("./src/custom-grid/custom-grid.ts")
public class CustomGrid<T> extends Grid<T> {
}
I used the following code to add my custom grid to the layout
final CustomGrid<String> grid = new CustomGrid<>();
grid.addColumn(s -> s).setHeader("Hello");
grid.setItems(List.of("Item 1", "Item 2", "Item 3"));
add(grid);
The problem
The items are not visible. There are just blank rows.
ps: extending other components like buttons or comboboxes works pretty well.
I faced the same issue with my own customization of Vaadin's Grid.
I did exactly the same as you - and it worked with v22 but it does not with v23.
Although it's a dirty hack, it works by doing the follwing:
final Grid<String> grid = new Grid<>();
add(grid);
grid.getElement().executeJs("elem = document.createElement(\"div\"); elem.innerHTML=\"Hallo\"; this.shadowRoot.appendChild(elem);");
I have something similar to this code:
TextArea textArea = new TextArea();
textArea.setSizeFull();
Panel dataPanel = new Panel("Panel", textArea);
dataPanel.setSizeFull();
textArea.setValue(... some very long text...);
The problem is that this TextArea appears without vertical scrollbar (and mouse-wheel scrolling also doesn't work), although inner text is longer than TextArea height (I can navigate lower using cursor and keyboard down arrow).
How do I enable scrolling in this component?
A bit weird, but as per the documentation if you disable word-wrapping in a text-area, you'll get the vertical scroll-bar:
Word Wrap
The setWordwrap() sets whether long lines are wrapped ( true - default) when the line length reaches the width of the writing area. If the word wrap is disabled (false), a vertical scrollbar will appear instead. The word wrap is only a visual feature and wrapping a long line does not insert line break characters in the field value; shortening a wrapped line will undo the wrapping.
The following code sample illustrates this behaviour with Vaadin 8.0.6. Please note my class extends Panel to match your sample but at this point you can eliminate it:
public class PanelWithScrollableTextField extends Panel {
public PanelWithScrollableTextField() {
TextArea textArea = new TextArea();
textArea.setWordWrap(false);
textArea.setSizeFull();
setContent(textArea);
setSizeFull();
StringBuffer buffer = new StringBuffer();
IntStream.range(1, 100).forEach(value -> buffer.append(value).append("\r\n"));
textArea.setValue(buffer.toString());
}
}
Result:
P.S. I know it's a bit weird to grasp, but panels are used to scroll surfaces that are larger then the panel size, so if we'd get it working, you'd be scrolling the text area itself, not its content. You can see below a sample to better understand what I mean:
public class PanelWithScrollableTextField extends Panel {
public PanelWithScrollableTextField() {
TextArea textArea = new TextArea();
textArea.setWordWrap(false);
textArea.setHeight("500px"); // fixed size with height larger than the panel
setContent(textArea);
setHeight("100px"); // fixed height smaller than the content so we get a scroll bar
StringBuffer buffer = new StringBuffer();
IntStream.range(1, 100).forEach(value -> buffer.append(value).append("\r\n"));
textArea.setValue(buffer.toString());
}
}
Result:
You can change it CSS also like below .
.v-textarea { overflow-y: auto ! important;}
I have added a popup window to my main UI as follows:
Window component = new Window();
UI.getCurrent().addWindow(component);
Now, I want my popup to be centered horizontally and e.g. 40 pixels from the top of the screen. As far as I can see Vaadin has 4 methods for positioning my window.
component.center()
component.setPosition(x, y)
component.setPositionX(x)
component.setPositionY(y)
None of these are really what I want. I was hoping at first that setPositionY might help me. This does allow me to get the right distance from the top, but the x-position is now set to 0, where I wanted it to be centered.
The setPosition might have helped if I was able to calculate what the x-position should be, but this would require me to know the width of the component in pixels, but component.getWidth just tells me 100%.
Next I tried to use CSS styling on the component, writing and explicit css rule and adding it to the component with addStyleName. It seems though that Vaadin overrides whatever I wrote in my css with its own defaults...
Any ideas how to get my Window component positioned correctly?
I used the methods getBrowserWindowWidth() and getBrowserWindowHeight() from the com.vaadin.server.Page class for this.
I centered my "log" window horizontally in the lower part of the browser window with
myWindow.setHeight("30%");
myWindow.setWidth("96%");
myWindow.setPosition(
(int) (Page.getCurrent().getBrowserWindowWidth() * 0.02),
(int) (Page.getCurrent().getBrowserWindowHeight() * 0.65)
);
Solution 1: Use SizeReporter
Indeed, setPositionY() will reset the window's centered property to false. As the width of your pop-up and that of your browser window are not know before they appear on the screen, the only way I know to get those values is to use the SizeReporter add-on. Its use is quite straightforward:
public class MyUI extends UI {
private Window popUp;
private SizeReporter popUpSizeReporter;
private SizeReporter windowSizeReporter;
#Override
protected void init(VaadinRequest request) {
Button button = new Button("Content button");
VerticalLayout layout = new VerticalLayout(button);
layout.setMargin(true);
popUp = new Window("Pop-up", layout);
popUp.setPositionY(40);
addWindow(popUp);
popUpSizeReporter = new SizeReporter(popUp);
popUpSizeReporter.addResizeListenerOnce(this::centerPopUp);
windowSizeReporter = new SizeReporter(this);
windowSizeReporter.addResizeListenerOnce(this::centerPopUp);
}
private void centerPopUp(ComponentResizeEvent event) {
int popUpWidth = popUpSizeReporter.getWidth();
int windowWidth = windowSizeReporter.getWidth();
if (popUpWidth == -1 || windowWidth == -1) {
return;
}
popUp.setPositionX((windowWidth - popUpWidth) / 2);
}
}
This piece of code will be okay as long as you don't resize the pop-up. If you do, it will not be automatically recentered. If you replace addResizeListenerOnce() by addResizeListener() then it will automatically recenter the pop-up but you'll get some "UI glitches" as the add-on sends resize events almost continually while you're resizing your pop-up...
You could try to do it using CSS, but I personally avoid CSS as much as I can with Vaadin :).
You'll need to recompile the widgetset after you've added the add-on as a dependency.
Solution 2: Use com.vaadin.ui.JavaScript
I won't vouch for the portability of this solution but I guess it will work on most modern browsers.
public class MyUI extends UI {
private Window popUp;
#Override
protected void init(VaadinRequest request) {
Button button = new Button("Content button");
VerticalLayout layout = new VerticalLayout(button);
layout.setMargin(true);
popUp = new Window("Pop-up", layout);
popUp.setPositionY(40);
popUp.addStyleName("window-center");
addWindow(popUp);
// Add a JS function that can be called from the client.
JavaScript.getCurrent().addFunction("centerWindow", args -> {
popUp.setPositionX((int) ((args.getNumber(1) - args.getNumber(0)) / 2));
});
// Execute the function now. In real code you might want to execute the function just after the window is displayed, probably in your enter() method.
JavaScript.getCurrent().execute("centerWindow(document.getElementsByClassName('window-center')[0].offsetWidth, window.innerWidth)");
}
}
I have two Grids (both in its own panel), and want to navigate between them using the Tab Key.
To do that I'm trying to focus the Grid inside a Panel (If Tab is pressed, the Grid should gain focus, so I can use the up/Down key to select Items).
Vaadin doesn't provide a .focus() method for Grid. Is there any solution so I can focus the Grid anyway?
Here is small example which shows working scenario with
Tab key pressed
Arrows down/up should points to a row (exactly in Valo this is presented as contour around one cell)
Space makes row selected (if Grid has enabled selection!) - row should be highlighted.
Code example:
#Theme ( ValoTheme.THEME_NAME )
public class MyUI extends UI {
public class A {
String a;
String b;
A(String a, String b) {
this.a = a;
this.b = b;
}
// getters & setters
}
#Override
protected void init ( VaadinRequest vaadinRequest )
{
Grid g = new Grid();
List<A> list = Arrays.asList(new A("a", "b"), new A("aa", "bb"),
new A("aaa", "bbb"));
BeanItemContainer<A> items = new BeanItemContainer<>(A.class, list);
g.setContainerDataSource(items);
Panel p = new Panel(g);
setContent(p);
}
}
Tested: Vaadin 7.5, Java 8, Tomcat 8.
You could try to use:
setFocusedComponent(p);
after setContent(p). This should exactly tells Vaadin to make panel focused. But you still must press tab - once or more (depending on rest of components, which you placed on screen).
But make sure:
Grid is selectable.
Maybe you should press Tab more than once.
Depending on Theme there could be different effects of getting focus (or even select state). It is also possible that you use some predefined project which has blocked grid css to make it lighter. So check if you can highlight one row by click on it.
Without more information I can't help more.
The OP write in an edit:
Solved the problem using Javascript/Jquery. Added this to my Panel that contains the Grid:
public class FileTable extends Panel
{
String id;
public FileTable(String id)
{
this.id=id;
Grid table = new Grid();
initGrid();
fileTable.setId(id);
}
public void focus()
{
JavaScript.getCurrent().execute("$(\"#"+id+" table:first td:first\").click();");
}
}
I've the this Shadow Element/root in this example http://jsfiddle.net/fyf6thte/8/ working perfectly with JavaScript, interested to have similar one with DART, so I wrote the below code (using the same html and css file), but I could not see the button it looks theshadow.innerHTML = '<button id="d">click</button>'is not working
the full code is:
import 'dart:html';
void main() {
var thehost = document.querySelector('#host1');
document.registerElement(fonixDiv.tag, fonixDiv);
thehost.append(new fonixDiv());
}
class fonixDiv extends HtmlElement {
static final tag = 'fonix-div';
var shadow;
bool disabled;
factory fonixDiv() => new Element.tag(tag);
fonixDiv.created() : super.created() {
shadow = this.createShadowRoot();
shadow.host.innerHTML = '<button id="d">click</button>';
shadow.host.onClick.listen((e){
this.host.dataset.disabled='true'; // set Attribute to the custom element
});
shadow.children.d.onClick.listen((e){
this.text = "you clicked me :(";
// or shadow.children[0].textContent="Shadow DOM content changed";
this.disabled=true;
// alert("All: button, text and host should be change");
});
}
#override
void attached() {
super.attached();
this.disabled=disabled;
}
}
I'm not sure about the accuracy of the balance of the code, I can check it only after I see the button.
any help.
The error is correct: in Dart 'this' is not bound contextually as in JS and instead we have lexical scoping;
in your dart code you are actually changing the text content of the custom element and not of the target of the event (the button in the shadow root). So basically you have a custom element, you set the text content on it but you also have a shadow root created inside of that same DOM node and it shadows everything else you put inside that custom element and that is why you do not see it and continue to see the shadow root's content - this is how shadow root works by design.
To fix it you need to update the text content (and the disabled property) on the button (for example e.target.text = ...).
Hope this helps.
Seems like the .host should be removed from this line
shadow.host.innerHTML = '<button id="d">click</button>';
shadow.innerHTML = '<button id="d">click</button>';
The jsfiddle doesn't have it and it seems weird. I think with .host you add it basically to this and therefore as child not as content.
I think the main issue is: Use innerHtml instead of innerHTML.
There are a few additional minor things you need to fix:
Remove 'host', as Gunter says, you want to set the innerHtml of the shadow.
Instead of shadow.children.d.onClick, do shadow.querySelector('#d').onClick.
Also, do dataset['disabled'] instead of dataset.disabled.