TIP: E4X for HTML Templates

Find out how to get things done with Servoy. Post how YOU get things done with Servoy

TIP: E4X for HTML Templates

Postby goldcougar » Tue Feb 11, 2020 5:45 pm

I was working on a client project and saw they were doing a lot of string concatenation for building some HTML. I converted it to E4X, but i noticed there weren't many examples on the forum, so I thought I'd share a few very simple ones.

Code: Select all
   var someVar = 1
   var someVar2 = 2
   var template = <html>
                  <body>
                     <table border="0">
                        <tr>
                           <td>{someVar}</td>
                           <td>{someVar2}</td>
                        </tr>
                     </table>
                  </body>
               </html>
   var merged = template.toString()
   application.output(merged)


The result is:
<html>
<body>
<table border="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>



You can also do it dynamically in some loops:
Code: Select all
   var ds = databaseManager.createEmptyDataSet(0,2)
   ds.addRow(['a','b'])
   ds.addRow(['d','e'])
   ds.addRow(['g','h'])
   
   var template =    <html>
                        <body>
                           <table border="0">
                           </table>
                        </body>
                  </html>
   
   
   for(var i=1; i<=ds.getMaxRowIndex(); i++){
      template.body.table.appendChild(<tr>
                                          <td>{ds.getValue(i,1)}</td>
                                          <td>{ds.getValue(i,2)}</td>
                                    </tr>)
   }
   
   var merged = template.toString()
   application.output(merged)


The result is:
<html>
<body>
<table border="0">
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
</tr>
</table>
</body>
</html>


Have fun with these. Lots more that you can do with E4X.
Scott Butler
iTech Professionals, Inc.
SAN Partner

Servoy Consulting & Development
Servoy University- Training Videos
Servoy Components- Plugins, Beans, and Web Components
Servoy Guy- Tips & Resources
ServoyForge- Open Source Components
User avatar
goldcougar
Servoy Expert
 
Posts: 702
Joined: Sun Jan 08, 2006 7:15 am
Location: Cincinnati, OH

Re: TIP: E4X for HTML Templates

Postby ptalbot » Thu Feb 13, 2020 4:20 am

Even better yet, use Velocity ;)

With a "template1.html" placed in the reports folder, containing:
Code: Select all
<html>
  <body>
    <table border="0">
      <tr>
         <td>$someVar</td>
         <td>$someVar2</td>
      </tr>
    </table>
  </body>
</html>


call:
Code: Select all
var merged = plugins.VelocityReport.renderTemplate('template1.html', {someVar: 1, someVar2: 2});
application.output(merged);


The advantages of using a template file is that you can edit it in any html editor, place it under your preferred versioning system and Velocity will pick up the changes automatically, each time you render (no need to redeploy your solution)...

But if you really prefer to use inline html, you can do:
Code: Select all
var template = <html>
                  <body>
                     <table border="0">
                        <tr>
                           <td>$someVar</td>
                           <td>$someVar2</td>
                        </tr>
                     </table>
                  </body>
               </html>;
   var merged = plugins.VelocityReport.evaluateWithContext(template.toString(), {someVar: 1, someVar2: 2});
   application.output(merged);

Either way, you will get:
Code: Select all
<html>
  <body>
    <table border="0">
      <tr>
         <td>1</td>
         <td>2</td>
      </tr>
    </table>
  </body>
</html>


With template2.html, containing:
Code: Select all
<html>
  <body>
    <table border="0">
      #foreach($row in $ds)
         <tr>
         #foreach($value in $row)
            <td>$value</td>
         #end
         </tr>
      #end
    </table>
  </body>
</html>


call:
Code: Select all
var ds = databaseManager.createEmptyDataSet(0,2);
ds.addRow(['a','b']);
ds.addRow(['d','e']);
ds.addRow(['g','h']);
var merged = plugins.VelocityReport.renderTemplate('template2.html', {ds: ds});
application.output(merged);

you get:
Code: Select all
<html>
  <body>
    <table border="0">
         <tr>
            <td>a</td>
            <td>b</td>
         </tr>
         <tr>
            <td>d</td>
            <td>e</td>
         </tr>
         <tr>
            <td>g</td>
            <td>h</td>
         </tr>
    </table>
  </body>
</html>


The Velocity language is simple (see https://www.servoyforge.net/projects/velocity-report/wiki/Velocity, easily readable, and when it comes to String manipulation, Velocity is optimized for speed.

And there's tons more you can do with it!
Patrick Talbot
Freelance - Open Source - Servoy Valued Professional
http://www.servoy-stuff.net
https://www.servoyforge.net
--------------------------------------------
Servoy 5.2.16 / 6.0.9 / 6.1.6 / 7.3.1
All OSes / Java 5 & 6 & 7
User avatar
ptalbot
 
Posts: 1616
Joined: Wed Mar 11, 2009 5:13 am
Location: Montreal, QC

Re: TIP: E4X for HTML Templates

Postby goldcougar » Thu Feb 13, 2020 4:55 am

Great examples Patrick! Personally I don't think I would use Velocity just to render HTML. I usually will use what's built in before relying on a call to an external component, but there are definitely some more complex use cases that would benefit from Velocity.
I hope the main take away from people is that there are better options than string concatenation for HTML!
Scott Butler
iTech Professionals, Inc.
SAN Partner

Servoy Consulting & Development
Servoy University- Training Videos
Servoy Components- Plugins, Beans, and Web Components
Servoy Guy- Tips & Resources
ServoyForge- Open Source Components
User avatar
goldcougar
Servoy Expert
 
Posts: 702
Joined: Sun Jan 08, 2006 7:15 am
Location: Cincinnati, OH

Re: TIP: E4X for HTML Templates

Postby ptalbot » Thu Feb 13, 2020 5:31 am

Indeed, most applications nowadays need to manipulate not just HTML, but also all kinds of structured String-based files and data, and Velocity can render any String structure based on a template, can be HTML, XML, JSON, CSS, JavaScript, basically any text-based format...

Personally, I find "just rendering HTML" to be pretty cumbersome when you integrate it directly inline in your code... it kinda hurts my eyes! :D
I find it less readable than a pure HTML file outside of the application, so even in that case, I think it's still a good idea to use Velocity, especially when one of the advantages of having externalized templates is to make them easy to update on the fly, without the need to redeploy...
It's a big plus if you've ever needed to update your solution because there was a comma missing in your template!

As to what's built-in or not, I would say that Velocity is now in version 3.5.74 - it's been used for many years in production for all sorts of projects and it's maintained and improved constantly (I use it myself all the time for my client's projects and have all incentives to keep it up to date).

But you're right, there are many ways to skin a cat!
Patrick Talbot
Freelance - Open Source - Servoy Valued Professional
http://www.servoy-stuff.net
https://www.servoyforge.net
--------------------------------------------
Servoy 5.2.16 / 6.0.9 / 6.1.6 / 7.3.1
All OSes / Java 5 & 6 & 7
User avatar
ptalbot
 
Posts: 1616
Joined: Wed Mar 11, 2009 5:13 am
Location: Montreal, QC

Re: TIP: E4X for HTML Templates

Postby david » Thu Feb 13, 2020 9:10 pm

Fun fact!

The JSX syntax is similar to the E4X Specification (ECMA-357). E4X is a deprecated specification with deep reaching semantic meaning. JSX partially overlaps with a tiny subset of the E4X syntax. However, JSX has no relation to the E4X specification.


https://facebook.github.io/jsx/#prior-art
David Workman, Kabootit

Image
Everything you need to build great apps with Servoy
User avatar
david
 
Posts: 1727
Joined: Thu Apr 24, 2003 4:18 pm
Location: Washington, D.C.


Return to How To

Who is online

Users browsing this forum: No registered users and 1 guest