Ask Reuben

Readonly TextEdit (Multi-line Label)

How can I make a LABEL go over two or more lines?

How can I make a TEXTEDIT look like a LABEL ?

A LABEL was originally designed to display one line of text, it was not originally intended to display over two more lines.  If you have two adjacent lines of static text in a form, if you look at the resulting .42f you will see two Label nodes, one corresponding to each line.  i.e this .per …

GRID
{
Foo
Bar
}
END

… produces in the .42f the following …


<Label text="Foo" posY="0" posX="0" gridWidth="3"/>
<Label text="Bar" posY="1" posX="0" gridWidth="3"/>

… it does not produce a single Label with height = “2”.

If you explicitly add a LABEL to a form, you can draw it over two or more lines

GRID
{
[l01       ]
[          ]
}
END

… and this will result in one Label node in the compiled form …


<Label width="10" height="2" text="Foo Bar" posY="2" posX="1" gridWidth="10" gridHeight="2"/>

As the LABEL was originally designed for one line of text, if you display more to the LABEL than will fit on one line, it will either truncate or stretch horizontally the widget depending on the value of the SIZEPOLICY attribute.

To force a line-break, as documented about half way down here, you need to place a \n in your label text.  That is you might code if static in your .per …

LABEL ... TEXT="Foo\nBar"

… or you might DISPLAY to the field in your 4gl …

DISPLAY "Foo\nBar" TO label_name

However what if you wanted it to wrap rather than forcing a line-break in a certain position?  One approach you can take in the absence of an attribute or Presentation Style for LABEL is to use a TEXTEDIT and make it look like a LABEL.

Run the example in the code below and you should see the following …

The magic is in the .4st.  By setting backgroundColor=”window”, border=”none” the TEXTEDIT almost looks like a LABEL, and the final piece is in the .per to set SCROLLBARS=NONE, STRECH=BOTH, NOENTRY.

General rule of thumb, is if you want to force the line-breaks, you a LABEL and use \n to force the line-break in the text.  To have it insert line breaks responsively, use a TEXTEDIT and make it look like a LABEL.

(Code for above screenshot below )

#! readonlytextedit.4gl
MAIN
CONSTANT LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    CLOSE WINDOW SCREEN
    CALL ui.Interface.loadStyles("readonlytextedit.4st")
    OPEN WINDOW w WITH FORM "readonlytextedit"

    DISPLAY LOREM_IPSUM TO label;
    DISPLAY LOREM_IPSUM TO label_html;
    DISPLAY LOREM_IPSUM TO textedit;

    MENU ""
        
        ON ACTION label1 ATTRIBUTES(TEXT="Force line with slash-n")
            DISPLAY "Line 1\nLine 2" TO label
        ON ACTION label2 ATTRIBUTES(TEXT="Force line with br")
            DISPLAY "Line 1<br>Line 2" TO label_html
        ON ACTION exit ATTRIBUTES(TEXT="Exit")
            EXIT MENU
         
    END MENU
END MAIN
#! readonlytextedit.per
LAYOUT (MINHEIGHT= 10, MINWIDTH=40, TEXT="Multi-line Label")
GRID
{
Label     [f01                   ]
          [                      ]
Label     [f02                   ]
(html)    [                      ]
TextEdit  [f03                   ]
          [                      ]
}
END
END
ATTRIBUTES
LABEL f01 = formonly.LABEL, SIZEPOLICY=FIXED;
LABEL f02 = formonly.label_html, STYLE="html", SIZEPOLICY=FIXED;
TEXTEDIT f03 = formonly.textedit, STYLE="label html", SCROLLBARS=NONE, STRETCH=BOTH, NOENTRY, JUSTIFY=LEFT;
#! readonlytextedit.4st -- delete this line
<?xml version="1.0" encoding="ANSI_X3.4-1968"?>
<StyleList>
  <Style name="Window">
     <StyleAttribute name="windowType" value="normal" />
  </Style>
  <Style name=".html">
     <StyleAttribute name="textFormat" value="html" />
  </Style>
  <Style name="TextEdit.label">
     <StyleAttribute name="border" value="none" />
     <StyleAttribute name="backgroundColor" value="window" />
  </Style>
</StyleList>