How to style a Text (or a Span)

Flow
1

I shall be goofing at something, but I am unable to do a very simple thing: create chunk of HTML with a minimum text in it, something like “hello world” something that in V8 I made with a HTML formatted label and in with any other framework I make in a snap.

First of all notice the documentation fail: if I look at [Components in Vaadin 10]
(https://vaadin.com/docs/v10/flow/migration/5-components.html) I see that Label has been replaced by Text or Span, but there is no example link (like other components). So let’s take a look at [Components page]
(https://vaadin.com/components/browse) and again neither Text, not Span.

So let’s look at [javadoc for Text]
(https://vaadin.com/api/platform/10.0.4/com/vaadin/flow/component/Text.html), again no method to specify that the text is HTML instead of plain text. So after 20 minutes I’m still unable to insert a chunk of preformatted HTML.

After investing few extra minutes googling, I find [Dynamic Styling]
(https://vaadin.com/docs/v10/flow/element-api/tutorial-dynamic-styling.html). Finally I’m done! I type “text.getClassList()” and surprise again: no such method. I try text.getStyle(), some result.

Maybe those methods are applicable only to buttons. Let’s check, just cut and paste the code from the web page and … Same results! The methods no not exist. Maybe the page is dated strange for a version fresh as V10. At this point 40 minutes were gone and still not formatted label.

But I need the formatted label, let’s find another way. Let’s disassemble some code. Aha there is a Component.getElement() to which both getClassList() and getStyle() apply. So probably the getElement() in between, is missing from the guide. Finally the compiler stays quiet, I shall be done but NO! I get the following exception:

java.lang.UnsupportedOperationException: This instance is immutable

Now more than 1 hour is gone and I am still unable to write the dam formatted label.

So I invest 15 more minutes in writing this post hoping somebody will tell me how to do with an example that works.

2

Hi Franco,

Agree that the level of documentation is insufficient and fairly frustraing. Anyway, try with Html, Span or Div. All of these allow for styling.

      Html h = new Html("<p>Html</p>");
      h.getElement().getStyle().set("font-size", "70px");
      add(h);

      Span s = new Span("Span");
      s.getElement().getStyle().set("font-size", "45px");
      add(s);

There is also a Label component for labels. Although the documentation states that it should be used for forms, it appear that you can use it elsewhere too, but not sure that it’s best practice.

3

Thanks Martin, I did really not noticed the existence of Html component (now I see it in javadoc but nowhere in the guides). That sorted out my meed. Anyway the suggestion to fix the [examples that do not work]
(https://vaadin.com/docs/v10/flow/element-api/tutorial-dynamic-styling.html) remains. I would do it myself but I think I have no rights to edit the page.

4

If you directly want to set HTML text created by you in some component, you can set it as an innerHTML property.

Div content = new Div();
content.getElement().setProperty("innerHTML", "<p>Hello World</p></br><span>Some text after a break</span>");

However, you need to be careful about the security in your HTML text.