B4J Tutorial [WebApp] (mini) Template Engine

WebUtils.ReplaceMap together with the CreateMap keyword are useful for building dynamic strings, especially for html output.

For example, in the chat example when a user writes a message we want to add a html line with the user name and message.

The user name should be bold and the message should be html escaped. Without escaping the html the site will be open for XSS issues.

We start with the base string. We use $<identifier>$ to mark the places that should be replaced:

WebUtils.ReplaceMap("<b>$NAME$</b>: $H_MSG$<br/>", CreateMap("NAME": name, "H_MSG": msg.Trim))

The second parameter is a Map that holds the values that should be replaced. Note that the keys are case sensitive and they do not include the $ sign. The keys can be made of letters, numbers and underscores.
If a key starts with H_ then it will be escaped automatically.

The base string can be loaded from a file. You can see it in the Dynamic example:

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
   Dim base As String = File.ReadString(File.DirAssets, "Dynamic.html")
   Dim sb As StringBuilder
   sb.Initialize
   For y = 0 To 9
     For x = 0 To 9
       Dim id As String = "btn" & (y * 10 + x)
       sb.Append(WebUtils.ReplaceMap(base, _
         CreateMap("ID": id, _
           "LEFT": x * 50, _
           "TOP": y * 50, _
           "TEXT": "0")))
     Next
   Next
   MainDiv.SetHtml(sb.ToString)
End Sub

Another example:

Sub RandomCSSColor As String
   Return WebUtils.ReplaceMap("rgb($R$, $G$, $B$)", _
     CreateMap("R": Rnd(0, 256), "G": Rnd(0, 256), "B": Rnd(0, 256)))
End Sub

WebUtils is a code module. It is included in the server examples: http://www.b4x.com/android/forum/threads/webapp-web-apps-overview.39811/#content
Make sure to use v1.00+ (the version is written in a comment at the top of this module).

 

[myriaddev]

Wow! Most mornings, first thing I do is to look at B4A & B4J!!