Page 1 of 1

VL-Web - how to show notes with basic (line) formating

Posted: Thu Feb 09, 2017 3:32 am
by Jiri
The requirement is to show list of notes on single web page. Each note have a single caption and some text, basically formated only by paragraphs (defined point for new line).
I have created reusable part as the caption + text container and made collection from them, filled from list. It works fine, except two rules, which should both be true:
1) The each message takes only required content space, which is responsible changing by display size
2) The basic formating - a new lines in defined place in text.

I tried to use two different classes for text displaying - Caption (#PRIM_LABL) and Multiline Edit box (#PRIM_TEXT).
For each I have layout items with settings Sizing(ContentHeightFitToWidth)

Problem:
If Caption type is used, the sizing and responsibility works perfectly, but all text is formated as a single paragraph. I am not able to find any way, how to force wrap the caption text in particular point. It correctly wraps only at end of line space.
If MultilineEditBox is used, the text is correctly wrapped if it contain CR character (13).AsChar , but the hight is fixed - the rule ContentHight probably does not work for this type of component :-(.

Attached are exaple with those two classes type displaying the same text. Above is Caption (correctly sized, but without text wrap), below is MultilineEdit (with correctly wrapped text but taking unnecessary space).

Have anyone idea how to either:
- force a new line in Caption component,
or
- force the Multiline Edit Box to set High property based on content
or
use another componenty type ?

Re: VL-Web - how to show notes with basic (line) formating

Posted: Thu Feb 09, 2017 1:56 pm
by Stewart Marshall
Hi Jiri

I'd use the Tree control for this particular problem. It will handle all of the item creation for you, so all you need to do is size the items as required.
Untitled.png
Untitled.png (21.76 KiB) Viewed 8065 times
The item uses 2 labels: one for the title and one for the address details. These are populated as follows. Street is used many times to show off word wrapping.

Embedding (10).AsUnicodeString forces a line break for each value.

Code: Select all

Mthroutine Name(OnAdd) Options(*Redefine)

#Title := ("&1 &2 &3").Substitute( #xEmployeeTitle #xEmployeeGivenNames #xEmployeeSurname )
#Caption := #xEmployeeStreet + #xEmployeeStreet + #xEmployeeStreet + #xEmployeeStreet + #xEmployeeStreet + (10).AsUnicodeString + #xEmployeeCity + (10).AsUnicodeString + #xEmployeeState + (10).AsUnicodeString + #xEmployeePostalCode

Endroutine
The item layout is very simple. Both the Title and Caption labels are in Row1, Column1 and are TopCenter and Flow(Down). The Title won't change size, so it's sizing is FitWidth. The Caption however is ContentHeightFitToWidth so that it will get longer as more lines are added or a line wraps.

That will size the contents of the item, but it won't size the panel itself. For that we need to define the LayoutManager itself as being ContentHeight.

I think that will give you what you want

Sample import attached


Regards

Re: VL-Web - how to show notes with basic (line) formating

Posted: Thu Feb 09, 2017 9:44 pm
by Jiri
Thanks. I have found also another option - use HTML Container (#PRIM_WEB.HtmlContainer). It resizes OK and allows basic HTML formating (new line, Bold...). But TreeView is also fine option.

Re: VL-Web - how to show notes with basic (line) formating

Posted: Fri Feb 10, 2017 7:47 am
by Stewart Marshall
Hi Jiri

You'll also find that as the HTML Container just renders HTML, you'll be at the mercy of browser rendering, where what you see in one, isn't necessarily what you see in another.

Hopefully with relatively simple text and formatting, you'll be OK.