Paragraphs of text for display

What’s the best way to add paragraph(s) of explanatory text on the screen for the user to read?

I mean read-only, not for user-input. Preferably allowing formatting, such as bold & italic & color. Think of it as a Help page, or a Tutorial.

At first I thought
TextArea
is the way to go.
• Pass True to “setReadOnly()”.
• Use some CSS to make the border disappear.

But in looking at the
TextArea Sampler
, it looks like what I want is shown on the right side of the example. There a Label is used in XHTML mode to show paragraphs by calling setContentMode(Label.CONTENT_XHTML). I’m confused because the
Label doc
says it is for showing “short texts”. What is the limitations of using Label for paragraphs?

By the way, what defines and controls paragraph delimiter (carriage return, linefeed, CRLF, PARAGRAPH SEPARATOR U+2029, etc.) in a TextArea?

–Basil Bourque

I would not see why you should use textarea;

I use labels with ContentType xhtml and in the html I use normal html elements like p. works fine for me. Another option is a CustomLayout

Label + XHTML is absolutely the way to go for this problem.

We’re using it to layout many many elements - far more that a “short texts” - with absolutely no problems whatsoever.

Cheers,

Charles.

Thank you Charles for the recommendation.

My experiments led me to the same conclusion. Label+XHTML works well in terms of:

• Displays paragraphs well, when text is marked as such with

tags.

• Text flows well with automatic word-wrapping to fit space given in a layout.

• Formatting with CSS works well, such as larger font size. The Label asks for as much space as needed to display the bigger text.

Example code:

// Paragraphs of text.
StringBuilder text = new StringBuilder();
text.append( "<p>This set of panels asks you a couple dozen questions. From those questions AcmeCoach will build a complete document.</p>\n" );
text.append( "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat commodo ipsum sit amet sollicitudin. Ut arcu leo, pulvinar vitae porta eu, porta sed nisi. Nulla facilisi. Aenean suscipit, nulla non vehicula aliquet, sem leo tristique erat, eget mattis arcu sem a purus. Donec at libero erat.</p>\n" );
text.append( "<p>Morbi dolor turpis, faucibus ac pharetra quis, vulputate quis justo. Vivamus non pulvinar nisl. Mauris vitae libero et dui eleifend viverra sit amet sit amet tortor. Cras sollicitudin tincidunt dictum. Vivamus eros justo, laoreet sed commodo quis, ullamcorper nec libero.</p>\n" );
label = new Label();
label.setStyleName( "big_label"); // For control in CSS using .big_label{}  (for example)
label.setContentMode( Label.CONTENT_XHTML );  // Interpret the label's contents as XHTML rather than literally.
label.setValue( text.toString() );  // Fill the contents of the Label.
myGridLayout.addComponent( label, 0, 1 );  // Add the label to your Layout. 

Note that the “\n” on the ends are not technically necessary. The “

” is what causes the paragraphs to break. The “\n” sequences are just to make the actual (raw) HTML wrap for easier reading should any human peruse it for debugging.

–Basil Bourque

One thing to keep in mind when using this (or any other approach to displaying HTML directly): if the content can be entered by another user, you should be careful not to create cross-site scripting vulnerabilities where the HTML entered by one user contains scripts that are executed in the browser of another user.

Thanks Henri. I included that idea along with my suggested rewrite of the Label class’ API documentation in
this bug report
.