pomfaces

Browser side XSL transformations has two ways. You can do this with JavaScript, or native browser function. The native way supported well in today's modern browsers (IE, FireFox, Opera, Safari, Chrome). With XML header contained transformation you can easy make a teszt.
Show follow data.xml :

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href='xsl/table.xsl' type='text/xsl'?>
<xml>
 <data>
  <rec>
   <field name="id">1</field>
   <field name="name">kategoria</field>
   <field name="descriptor">&#60;?xml version='1.0'
    encoding='utf-8'?>&#60;containerdescriptor
    classname='com.infokristaly.engine.containers.SQLContainer'>
    &#60;attribute name='pagesize'>15&#60;/attribute>&#60;attribute
    name='autoopen'>true&#60;/attribute>&#60;table>
    &#60;sqlstring>select id, megnevezes from
    demand_kategoria&#60;/sqlstring>
    &#60;fieldlist>
    &#60;field name='id' type='java.lang.Integer' order='1' primarykey='true'
    visible='false'>
    &#60;label context='HUN'>azonosító&#60;/label>
    &#60;/field>
    &#60;field name='megnevezes' type='java.lang.String' order='2' visible='true'>
    &#60;label context='HUN'>Kategória&#60;/label>
    &#60;/field>
    &#60;/fieldlist>
    &#60;/table>&#60;/containerdescriptor></field>
  </rec>
  <rec>
   <field name="id">2</field>
   <field name="name">arlista</field>
   <field name="descriptor">&#60;?xml version='1.0'
    encoding='utf-8'?>&#60;containerdescriptor
    classname='com.infokristaly.engine.containers.SQLContainer'>&#60;table>
    &#60;sqlstring>select kategoria_id, kod1, kod2, megnevezes, allapot,
    partner_netto, fogyaszto_netto, fogyaszto_brutto, validfrom from
    demand_arlista where kategoria_id = ?&#60;/sqlstring>
    &#60;fieldlist>
    &#60;field name='kategoria_id' type='java.lang.Integer' order='1'
    primarykey='true' visible='false'>
    &#60;label context='HUN'>Kategória azonosító&#60;/label>
    &#60;/field>
    &#60;field name='kod1' type='java.lang.String' order='2' visible='true'>
    &#60;label context='HUN'>Termékcsoport kód&#60;/label>
    &#60;/field>
    &#60;field name='kod2' type='java.lang.String' order='3' primarykey='true'
    visible='true'>
    &#60;label context='HUN'>Termék azonosító&#60;/label>
    &#60;/field>
    &#60;field name='megnevezes' type='java.lang.String' order='4' visible='true'>
    &#60;label context='HUN'>Megnevezés&#60;/label>
    &#60;/field>
    &#60;field name='allapot' type='java.lang.String' order='5' visible='true'>
    &#60;label context='HUN'>Állapot&#60;/label>
    &#60;/field>
    &#60;field name='partner_netto' type='java.lang.Integer' order='6'
    visible='true'>
    &#60;label context='HUN'>Partner ár (nettó HUF)&#60;/label>
    &#60;/field>
    &#60;field name='fogyaszto_netto' type='java.lang.Integer' order='7'
    visible='true'>
    &#60;label context='HUN'>Fogyasztói ár (nettó HUF)&#60;/label>
    &#60;/field>
    &#60;field name='fogyaszto_brutto' type='java.lang.Integer' order='8'
    visible='true'>
    &#60;label context='HUN'>Fogyasztói ár (bruttó HUF)&#60;/label>
    &#60;/field>
    &#60;field name='validfrom' type='java.util.Date'
    view='com.infokristaly.views.fields.SimpleDateFormatView' order='9'
    visible='true'>
    &#60;label context='HUN'>Érvényes (-tól)&#60;/label>
    &#60;/field>
    &#60;/fieldlist>
    &#60;references>&#60;container source='./kategoria' fieldname='id'/>&#60;/references>
    &#60;/table>&#60;/containerdescriptor></field>
  </rec>
 </data>
</xml>

You can see the table.xsl in header of data.xml, it makes the browsers to transform dry xml to other new DOM like a displayable HTML, or processable CSV or similars, like Excel 2003 xlsx.

We stay at HTML. For this we'll use the table.xsl:

<?xml version="1.0" encoding='utf-8'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 version="1.0">
 <xsl:output method="html" indent="yes" />
 <xsl:template match="/xml/data">
  <table width="100%">
   <thead>
    <tr>
     <td>id</td>
     <td>name</td>
     <td>description</td>
    </tr>
   </thead>
   <tbody>
    <xsl:for-each select="./rec">
     <xsl:element name="tr">
      <xsl:variable name="row" select="./field" />
      <td valign='top'>
       <xsl:value-of select="$row[@name='id']" />
      </td>
      <td valign='top'>
       <xsl:value-of select="$row[@name='name']" />
      </td>
      <td valign='top'>
       <xsl:value-of select="$row[@name='descriptor']" />
      </td>
     </xsl:element>
    </xsl:for-each>
   </tbody>
  </table>
 </xsl:template>
 
</xsl:stylesheet>

JavaScript

Browser side JavaScript has extra classes like FireFox has XSLTProcessor and IE has ActiveXObject that can use MSXML2.XSLTemplate extension. With this and a little JQuery helper (for example AJAX requests) it is easy generate a HTML table from XML. Let see a FireFox homework:

function doTransform() {
 var XMLpath = "XMLGenerator?xsl=jquery";
 var XSLpath = "xsl/table.xsl";
 var xslRef;
 var xmlRef;
 $.ajax({
  type : "GET",
  url : XSLpath,
  async : false,
  dataType : "xml",
  success : function(xsl) {
   xslRef = xsl;
  }
 });
 
 $.ajax({
  type : "GET",
  url : XMLpath,
  async : false,
  dataType : "xml",
  success : function(xml) {
   xmlRef = xml;
  }
 });
 
 if ((xmlRef != null) && (xslRef != null)) {
  containerDoc = document.implementation.createDocument('', "xml", null);
  $(xmlRef).find('>').each(function(index) {
   containerDoc.firstChild.appendChild(this);
  });
 
  var xsltProcessor = new XSLTProcessor();
  xsltProcessor.reset();
  xsltProcessor.importStylesheet(xslRef);
 
  var fragment = xsltProcessor.transformToFragment(containerDoc, document);
  $("#content").html(fragment);
 }
}

The XML generator servlet is run on JBoss 7 AS that has a configured demandDS datasource. The servlet code:

package hu.infokristaly.homework.dynamicweb;
 
import hu.infokristaly.homework.dynamicweb.utils.StrTk;
 
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.OutputStreamWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Hashtable;
 
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.sql.DataSource;
 
@WebServlet("/XMLGenerator")
public class XMLGenerator extends HttpServlet {
 
    private static final long serialVersionUID = -6851012218039126751L;
 
    public XMLGenerator() {
        super();
    }
 
    public static DataSource getDataSource() {
        DataSource result = null;
        try {
            Hashtable<String, String> env = new Hashtable<String, String>(11);
            InitialContext ctx = new InitialContext(env);
            Context envContext = (Context) ctx.lookup("java:jboss");
            result = (DataSource) envContext.lookup("datasources/demandDS");
        } catch (NamingException e) {
            e.printStackTrace();
        }
        return result;
    }
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        ByteArrayOutputStream ostream = new ByteArrayOutputStream();
        OutputStreamWriter sout = new OutputStreamWriter(ostream, "utf-8");
        sout.write("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
        if (!"jquery".equals(request.getParameter("xsl"))) {
            sout.write("<?xml-stylesheet href='xsl/table.xsl' type='text/xsl'?>");
            sout.write("<xml>");
        } 
        sout.write("<data>");
        DataSource ds = getDataSource();
        try {
            Statement stmt = ds.getConnection().createStatement();
            if (stmt.execute("select id,name,descriptorXML from ContainerDescriptor")) {
                ResultSet rs = stmt.getResultSet();
                while (rs.next()) {
                    sout.write("<rec>");
                    sout.write("<field name=\"id\">" + rs.getLong(1) + "</field>");
                    sout.write("<field name=\"name\">" + StrTk.HTMLEnc(rs.getString(2)) + "</field>");
                    sout.write("<field name=\"descriptor\">" + StrTk.HTMLEnc(rs.getString(3)) + "</field>");
                    sout.write("</rec>");
                }
                rs.close();
                stmt.close();
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        sout.write("</data>");
        if (!"jquery".equals(request.getParameter("xsl"))) {
            sout.write("</xml>");
        }
        sout.flush();
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/xml");
        ServletOutputStream out = response.getOutputStream();
 
        ostream.writeTo(out);
        out.flush();
        out.close();
    }
 
}

The container test4transform.html is as simply as a HTML5:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/transform.js"></script>
        <meta charset="UTF-8">
        <title>Transform JQuery AJAX XML/XSLT</title>
    </head>
    <body>
    <button onclick="doTransform()">Transform</button>
    <p id="content"></p>
    </body>
</html>

In the future maybe will be world-wide dynamic pages that will use this transformations. As a linked in CSS and JavaScript files, XSL files are stored in browser cache, so the network trafic can be lower then before. The handicap is in development and debugging. There is no utility - like FireBug - for test transformations. There are commercial tools for external XML/XSL, but in browser market this is a big disadvantage and it's very wanted tool. I hope the solution will not so fare. Standard DOM and JavaScript spread progressively. Maybe this development trend will have interests like standart HTML4, and the browser manufacturers will implement this utility very quick.

So, why I write?

I start this blog because I'd share some development experience in english. My english is not so good, sorry. But I made numerous code lines under my career, I can write to foreign language users.

I work in IT about twlve years ago. I made from scripts to object oriented codes, I used Windows and Linux, I developed from Delphi to Java and server scripting languages, from single applications to multi-tiers, with many database engeens.

I used magical words like XML, XSLT (with JQuery and object oriented JavaScript at browser side, too :-). At last but not least I used JSF2 and PrimeFaces.

I'll write about weekly, and later maybe daily.

Why this name?

The blog named from a cartoon figure: Pom Pom. "The tales of Pom-Pom" writen by Csukás Istvan. Cartoons made between 1979-2005.
Who is Pom Pom? Let me tell it in my native language:

"Hogy kicsoda Pom Pom? Hogy nem ismertek? Hohó! Igazán senki sem ismer, mert hol ilyen vagyok, hol olyan. Bámulatosan tudom változtatni az alakomat: ha akarom, olyan vagyok, mint egy szőrpamacs, vagy paróka, vagy egyujjas kifordított bundakesztyű, vagy szobafestőpemzli, vagy papucs orrán pamutbojt. Most leginkább szőrsapkához hasonlítok, ahogy ülök az ágon, egy szép hosszú ágon, föl-he-he-he, le-he-he-he, mivel egy szellő hintáztatja az ágat..."

In english it sound like this:
"Who is Pom Pom, you wonder? Don’t you know me? Well, no one knows me, because I’m always changing my shape. Sometimes I resemble a fur hat, as I sit on a nice long branch; in other cases I resemble a fur glove turned inside out; or a pompon on the toe of a slipper..."

Let me invite you watching cartoons about Pom Pom.

pomfaces

2017. január 22., vasárnap

Babylon

2016. január 22., péntek

Projects on github

2013. június 15., szombat

BlueCove OBEX and Linux

2013. május 23., csütörtök

Browsers and XSL transformations

JavaScript

2013. május 2., csütörtök

Begining of pomfaces