Newsletter sign-up
View all newsletters

Enterprise Java Newsletter
Stay up to date on the latest tutorials and Java community news posted on JavaWorld

JavaWorld Daily Brew
Home ยป Chris Oliver's blog

F3 and HTML

Submitted by Chris Oliver on Thu, 12/14/2006 - 17:03.
 
.
Although I'm not a fan of XML, I do consider HTML+CSS the most useful tool available for composing styled text. We plan on incorporating the Flying Saucer Java XHTML renderer into F3 eventually.

One of the things I dislike about HTML is the total lack of error reporting. If you have mistakes the output just looks funny and it's a nightmare to debug.

Since Flying Saucer requires valid XHTML and CSS it's possible to provide high quality validation for both the HTML content and CSS rules. Click the button at the bottom of this page to launch two demos:

  1. The first is a (very prototypish - I spent about 1.5 days on it) demo (written in F3) of an interactive XHTML/CSS renderer which performs XHTML and CSS as-you-type validation (I extracted the W3C CSS validator from their Java web-app for the CSS validation).

    The performance is bad right now because it's synchronously loading images, but hopefully it gives you some idea of what I have in mind. For example, you can browse www.w3.org with it, edit their style sheets and xhtml documents and see what happens.

  2. Since the XHTML renderer is a Swing component it's also possible to embed arbitrary F3 widgets inside the XHTML document.

    This is done with a special form of the HTML <object> tag, for example, like this: 

       var button = Button {text: "Click Me!"}
   XHTML {
       text: bind
       "<html>
           <body>
             Here's a button: 
             <object type='f3' data='{#button}'/>
           </body>
       </html>"
   }

    The above code embeds an F3 Button (underlyingly a Swing JButton) into the HTML content. The XHTML widget is the F3 wrapper for the Flying Saucer renderer. It renders the HTML content you assign to its text attribute.

    The # operator is F3's stringify operator: it converts the object reference of its operand to a URL which can later be dereferenced with the unstringify operator ?, e.g. 

       var num1 = 20;
   var s = #num1;
   assert s instanceof String; // passes
   var num2 = (Number)?s;
   assert num2 == num1; // passes

    URL's created with # aren't permanent but only refer to the object in memory.

    In addition, it's possible to create hyperlinks that call back to your application by embedding such URL's as the value of the href attribute. The second demo shows examples of this (click the File->View Source menu to see the source code).

    The second demo is an example which floats one of the processing examples I previously posted inside the XHTML document.