COMPANY

BLOGS

  • user warning: Unknown column 'u.signature_format' in 'field list' query: SELECT c.cid as cid, c.pid, c.nid, c.subject, c.comment, c.format, c.timestamp, c.name, c.mail, c.homepage, u.uid, u.name AS registered_name, u.signature, u.signature_format, u.picture, u.data, c.thread, c.status FROM comments c INNER JOIN users u ON c.uid = u.uid WHERE c.nid = 19286 AND c.status = 0 ORDER BY c.cid LIMIT 0, 50 in /var/www/www.4d.com/docs/modules/comment/comment.module on line 991.
  • warning: file_get_contents(http://www.telize.com/geoip/54.144.57.183) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /var/www/www.4d.com/docs/includes/common.inc(1762) : eval()'d code on line 4.

The Text Looks Great!

29.07.2010
by Thibaud Arguillère

Every major new version of 4D brings with it some new features. Whether major or minor, what is immediately interesting for a developer does not necessarily have the same importance to another. And vice versa, when you think about it.

 

I readily admit that this is stating the obvious. On the other hand, this is my place to write such things, even when they’re obvious.

 

Still, one of the new features of 4D v12 (released in June), described as major by myself, is what is commonly called the Multi-styled Text, sometimes more familiarly called Styled Text. This is a major implementation for several reasons, at the very least because it had been demanded for a long time! To allow our users to edit the style of text, to change one part to red, another to a bigger font size and italics: we needed this. Not necessarily everybody, nor all applications (see introduction), but often enough. I have the audacity to go further: not only would we want our users to stylize a text area, but also that their changes are saved if needed. That is to say that a table can store a text field as well as its style. We needed it, and 4D did it in v12! (Who just said “At last!”? Same person as in my previous post?)

 

Without going too deeply into the details (the fine line between a blog and a technical note is sometimes hard to find), I’d like to focus on several points about the management of styled text in 4D.


Putting the R in RAD

First, its implementation is dramatically simple, and fully justifies the "R" of "4D is a RAD tool.” Just put a variable / text field into a form, check the "Multi-style" box, check the "Contextual menu" box and that's all. The user can stylize the text, and I didn’t write a single line of code.

 

Don’t get me wrong: I love writing code. But I also love to work fast. And when it comes to checking two boxes, I am super fast.


Here's a quick example of implementation:

 

 

Multi-style text – tagged text

The internal format chosen to handle styled text is the HTML SPAN tag. This means that when the user changes a word to bold, a SPAN tag containing the style attribute, itself containing the font-weight: bold attribute, is inserted in the text in memory. So ...

 

“This is a styled text”

 

becomes:

 

“This is a <SPAN STYLE="font- weight:bold"> styled</SPAN> text”

 

It is this combination of “property Multi-style checked” and “the text contains SPAN tags” that allows 4D to draw the text in its style.

 

4D v12 contains all the tools necessary to manage multi-style text areas at runtime: we can set the style, read the style, etc. I invite you to download and watch the Rich Text Area demonstration, which uses a widget to format text, reusable in your own applications.

 

Let’s spend a moment on one point: Since the text contains tags filtered by 4D when it draws the area, it can be complicated to detect the existence of an expression in the text. If I use the previous example, a call to Position ("is a styled";myText) will return 0. In fact, after "a" and before "text", the tag was inserted. The new OBJECT Get plain text function is the solution: it returns the text stripped of all tags (note that in this example, it returns the position value in the plain text, not in the styled text).

 

If the form object is a text field whose "Multi-style" property is checked, then the record is saved with its tags. Again, be careful if you need to search on words or phrases. To facilitate the query (including with the standard editor), you should check the Queries and sorts of text without tags box in the field properties. Indeed, in this case, QUERY([Invoice];[Invoices]StyledInfos="@invoice paid") will find the records whatever their style. Important: Note that the operation will then always be sequential because 4D loads each record, removes the tags from the field, and then performs the comparison.

 

As demonstrated during the 4D World Tour 2009-2010, we went further than the style displayed in a text area: It also works in List boxes! Check the Multi-style attribute of a column of type text (array or field), and its contents will be displayed in multi-style. Just to say, printing (Print object) a styled text area or a ListBox containing a styled text column also works. But that’s just to say...

 

One more thing. The fact that the style is handled via SPAN tags in memory lets us change the style programmatically. For example, we had previously set a word to bold in this post. To add italics to the style, I can just write:

 

myText:=Replace string(myText;"font-weight:bold";"font-weight:bold;font-style:italic")

 

One more thing (a second one). Be aware of pitfalls. The text area becomes, in fact, a SPAN area, wherein carriage returns are converted to the <BR/> tag. Thus, when the user enters...

 

“1
2
3”

 

…the field is actually stored as “1<BR/>2<BR/>3”

 

A little work for the R&D team

With display, runtime, storage in fields, display in ListBoxes, and printing, there would be enough to write pages and pages of blogs, Technical Notes, and Tech Tips. However, I would like to point out a missing feature, just to give some work to 4D’s R&D team. The fact is, you can’t stylize static text. For the moment, if one wants to display a stylized label or prompt, one must use a variable. Hint: use the new Dynamic Form Variables feature (another major feature).

 

Finally, what if we say that all the new features of 4D v12 are major?

 

It's very simple:

  1. Drag a variable on the form
  2. Give it a useful name (this is not mandatory, just a good coding practice)
  3. Clear the name of the variable. The object must have no variable name.
  4. Assign it the type “Text”
  5. Uncheck “Enterable,” check “Multi-style”

Properties

To fill the label, put the pointer on the object using its name, then assign it the value of the styled text:

 

$toObject:=OBJECT Get pointer(Object named;"oStyledLabel")

// Must escape the quotes

$toObject->:="The <SPAN STYLE=\"font-style:bold;color:#FF0000\">tax value</SPAN> is missing"

 

Example

 

And now I’ll let you jump into the documentation (upgrade to 4D v12, language documentation, look at the demo application...) to install, manipulate and print styled text.

RSS 0 comment(s) to this post