VL Web - How to divide text on several lines

[RomainM]

Hi,

To manage different devices, I would like that the following screen

WordWrap1_bis.JPG (12.25 KiB) Viewed 7446 times

should be this one on a small device

WordWrap2_bis.JPG (11.67 KiB) Viewed 7446 times

Note the two colors !

Using WAM it is simple to do that, but how can we do that with VL Web ?

Best regards.

[Stewart Marshall]

Hi Romain

This is simple in VL too.

The simple solution is to use an HTML control and to populate it with text as required.

The control is ContentHeightFitToWidth, so as the page size changes, the text will wrap and the control will get bigger/smaller as required

Regards

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Height(544) Width(640) LayoutManager(#Layout1)
Define_Com Class(#PRIM_TBLO) Name(#Layout1)
Define_Com Class(#PRIM_TBLO.Column) Name(#Column1) DisplayPosition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Column) Name(#Column2) DisplayPosition(2) Parent(#Layout1) Width(2)
Define_Com Class(#PRIM_TBLO.Column) Name(#Column3) DisplayPosition(3) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row1) DisplayPosition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row2) DisplayPosition(2) Parent(#Layout1) Height(2)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row3) DisplayPosition(3) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Column(#Column2) Manage(#Html) Parent(#Layout1) Row(#Row2) Sizing(ContentHeightFitToWidth) Alignment(TopCenter) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem2) Column(#Column2) Manage(#Label1) Parent(#Layout1) Row(#Row2) Sizing(FitToWidth) Flow(Down) Alignment(TopCenter)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem3) Column(#Column2) Manage(#Label2) Parent(#Layout1) Row(#Row2) Sizing(FitToWidth) Flow(Down) Alignment(TopCenter)

Define_Com Class(#PRIM_WEB.HtmlContainer) Name(#Html) Description('Html Container') DisplayPosition(2) Height(121) Left(160) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(168) Width(320)
Define_Com Class(#PRIM_LABL) Name(#Label1) Caption('Heading') DisplayPosition(1) Ellipses(Word) Height(32) Left(160) Parent(#COM_OWNER) TabPosition(3) TabStop(False) Top(136) VerticalAlignment(Center) Width(320) Alignment(Center) ThemeDrawStyle('Heading1+MediumTitle')
Define_Com Class(#PRIM_LABL) Name(#Label2) Caption('Footer') DisplayPosition(3) Ellipses(Word) Height(32) Left(160) Parent(#COM_OWNER) TabPosition(2) TabStop(False) Top(289) VerticalAlignment(Center) Width(320) Alignment(Center) ThemeDrawStyle('Heading1+MediumTitle')

Evtroutine Handling(#Com_owner.CreateInstance)

#Html := "Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Span Style=Color:Green;font-size:20px;>Mauris non tristique velit. </Span>Proin lobortis nec sem in interdum. Donec vestibulum <Span Style=Color:Red>nisl vitae libero commodo volutpat.</Span> Nulla pretium mi feugiat massa vestibulum euismod vel id erat. Maecenas feugiat iaculis eros, vitae euismod massa molestie eu. Ut quis lacus diam. Morbi nulla nibh, blandit nec felis ac, rutrum sodales ipsum. <Span Style=Color:Blue>Donec ut magna quis dui</Span>  fermentum fringilla. Etiam vitae enim dui. Mauris nibh lorem, venenatis vitae est eget, tincidunt consectetur justo."

Endroutine

End_Com

[RomainM]

Hi Romain

This is simple in VL too.

The simple solution is to use an HTML control and to populate it with text as required.

The control is ContentHeightFitToWidth, so as the page size changes, the text will wrap and the control will get bigger/smaller as required

Regards

It is a solution, but can I use themes with this solution?

[Stewart Marshall]

Hi Romain

The HTML control itself is transparent, but the text colour will be adopted from the theme.

If you want to "theme" any embedded text colours, you'll need to do that manually, although I'm not sure how practical that is in the real world.

Here I'm replacing &1, &2...with RGB values from the Theme colors. You also have access to all the Styles instances in the Theme as well.

Regards

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Height(544) Width(640) LayoutManager(#Layout1) Theme(#SYS_THEME<2015Red>)
Define_Com Class(#PRIM_TBLO) Name(#Layout1)
Define_Com Class(#PRIM_TBLO.Column) Name(#Column1) DisplayPosition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Column) Name(#Column2) DisplayPosition(2) Parent(#Layout1) Width(2)
Define_Com Class(#PRIM_TBLO.Column) Name(#Column3) DisplayPosition(3) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row1) DisplayPosition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row2) DisplayPosition(2) Parent(#Layout1) Height(2)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row3) DisplayPosition(3) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Column(#Column2) Manage(#Html) Parent(#Layout1) Row(#Row2) Sizing(ContentHeightFitToWidth) Alignment(TopCenter) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem2) Column(#Column2) Manage(#Label1) Parent(#Layout1) Row(#Row2) Sizing(FitToWidth) Flow(Down) Alignment(TopCenter)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem3) Column(#Column2) Manage(#Label2) Parent(#Layout1) Row(#Row2) Sizing(FitToWidth) Flow(Down) Alignment(TopCenter)

Define_Com Class(#PRIM_WEB.HtmlContainer) Name(#Html) Description('Html Container') DisplayPosition(2) Height(121) Left(160) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(168) Width(320) ThemeDrawStyle('Heading2')
Define_Com Class(#PRIM_LABL) Name(#Label1) Caption('Heading') DisplayPosition(1) Ellipses(Word) Height(32) Left(160) Parent(#COM_OWNER) TabPosition(3) TabStop(False) Top(136) VerticalAlignment(Center) Width(320) Alignment(Center) ThemeDrawStyle('Heading1+MediumTitle')
Define_Com Class(#PRIM_LABL) Name(#Label2) Caption('Footer') DisplayPosition(3) Ellipses(Word) Height(32) Left(160) Parent(#COM_OWNER) TabPosition(2) TabStop(False) Top(289) VerticalAlignment(Center) Width(320) Alignment(Center) ThemeDrawStyle('Heading1+MediumTitle')

Evtroutine Handling(#Com_owner.Initialize)

#Html := ("Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Span Style=Color:&1;font-size:20px;>Mauris non tristique velit. </Span>Proin lobortis nec sem in interdum. Donec vestibulum <Span Style=Color:&2>nisl vitae libero commodo volutpat.</Span> Nulla pretium mi feugiat massa vestibulum euismod vel id erat. Maecenas feugiat iaculis eros, vitae euismod massa molestie eu. Ut quis lacus diam. Morbi nulla nibh, blandit nec felis ac, rutrum sodales ipsum. <Span Style=Color:&3>Donec ut magna quis dui</Span>  fermentum fringilla. Etiam vitae enim dui. Mauris nibh lorem, venenatis vitae est eget, tincidunt consectetur justo.").Substitute( #COm_owner.GetFormattedColor( #Com_owner.Theme.Theme200Color ) #COm_owner.GetFormattedColor( #Com_owner.Theme.Theme500Color ) #COm_owner.GetFormattedColor( #Com_owner.Theme.Theme800Color ) )

Endroutine

Mthroutine Name(GetFormattedColor)
Define_Map For(*Input) Class(#Prim_Alph) Name(#Color)
Define_Map For(*Result) Class(#Prim_Alph) Name(#Result)

#Result := (("RGB(&1)").Substitute( #Color )).ReplaceAll( ":" "," )

Endroutine

End_Com

Regards