F3 and HTML

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
                 Here's a button: 
                 <object type='f3' data='{#button}'/>

    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.


Chris very impresive, but when and where can we get F3?

Posted by Rene Davila on December 14, 2006 at 05:43 AM PST #

"but when and where can we get F3?"

That's one question that never gets an answer. F3 is very attractive to me, but if it's a year or more away then I can't afford to get too interested.

Posted by guest on December 14, 2006 at 12:52 PM PST #

release early! even java itself followed that rule...

Posted by Ivan on December 14, 2006 at 08:29 PM PST #

I'm assuming it's for legal reasons this project hasn't been released yet? Let's just hope you aren't waiting for the Flying Saucer integration or for some kind of code cleanup before releasing this project. If you release the project now, you might even get some help with the integration and/or cleanup! I say, bring it on, no matter what it looks like! A lot of people are interested in this project now, so strike while the iron is hot. Unless something happens soon, that interest will wane and the project will be met with silence.

Posted by Anon on December 19, 2006 at 12:12 AM PST #

Chris, The RSS feed for this blog shows an entry newer than this (something about open source, where and when). But the link seems to be broken.

Posted by falcon on December 19, 2006 at 12:26 PM PST #

Chris, I'm starting to get more excited about F3 by the day. I'm trying to find a mailing list, but there isn't any. Do you plan to bring this to dev.java.net, and if, when? Thanks, Wilfred

Posted by Wilfred Springer on December 19, 2006 at 11:19 PM PST #


Posted by matbaa on June 22, 2009 at 03:13 AM PDT #

important and awake! great job bro thanks.

Posted by Egitim on December 11, 2010 at 06:24 AM PST #

Simple and Nice example !

Posted by شات on December 15, 2010 at 03:57 AM PST #

Post a Comment:
  • HTML Syntax: NOT allowed



« February 2016