F3 and XML

Quite a few people have asked me why I didn't use XML markup for F3, or even whether F3 could be "translated" into XML.

Well, let me first tell you that it was intentional.

F3 is based on the idea that XML is not an effective syntax for a programming language that's supposed to be used by human programmers. Nevertheless, F3 provides the primary benefits other systems derive from XML and its supporting technologies, namely:

• Declarative Syntax
• Expression/Query Language with all of the power of XPath and XQuery

In addition, because F3 is a real object-oriented programmming language it allows you to factor your code the way we always have: namely be means of variables, subroutines, and class hierarchies.

Note that most if not all XML-based systems include some other embedded programming language, e.g. JavaScript or XPath or the EL of JSTL.

Finally, being a statically typed language F3 can provide IDE-support and compile-time error reporting equal in quality to what programmers are used to with Java. I'm not aware of any XML-based system that delivers a comparable user-experience for the programmer.

It may be surprising, however, to know that F3 was influenced by traditional web applications.

In a traditional web application you can "project" an HTML document from a set of Java beans by writing a "template". For example, in JSTL

<table>
   <tr>
     <th>
     Description
     </th>
     <th>
     Price
     </th>
   </tr>
   <forEach var="item" items="${cart.items}">
      <tr>
         <td>
         ${item.description}
         </td>
         <td>
         ${item.price}
         </td>
     </tr>
   </forEach>
</table>

Since, in traditional (non-AJAX) web-apps the page was regenerated every time, you could change your Java beans however you liked, and the page would appear to incrementally change without any additional programming (i.e, you didn't have to add "listeners" to the beans, respond to change events, and update the document yourself).

From my experience, the declarative syntax of the HTML template and the automatic regeneration of the pages, made writing web-based UI's way easier and faster than writing Swing programs.

In F3, the combination of declarative syntax, incremental evaluation, and list comprehensions brings that same ease of use to Swing and Java2D programming. For example, I can write a JTable in a manner similar to the one in the above example in F3 like this:

Table {
    columns: [TableColumn {text: "Description"}, TableColumn {text: "Price"}]
    cells: bind foreach (item in cart.items)
        [TableCell {text: bind "{item.description}"}, TableCell {text: bind "{item.price}"}]
}

As in the web-app example I can insert or delete items into/from the cart or modify the properties of an item and the table will automatically reflect my changes.

RSS Reader Demo

Having said all that, XML is still a reality and you may need to work with it in F3 programs. To enable that, we have an experimental add-on which plugs into F3 as an F3 class loader. This class loader reads XML Schema or WSDL documents and generates corresponding F3 classes (analagous to what JAX-B and JAX-RPC do for Java). The generated classes have methods to marshal and unmarshal XML documents and to invoke WSDL operations.

Below is an F3 program that uses this facility to create a simple RSS reader. It loads the RSS XML Schema and then reads the XML document at the URL you specify. This has the effect of populating corresponding F3 objects with the content of the XML document. Since these are first-class F3 objects, you can use F3 bindings on them as usual.

You can view the source code for this program by clicking its File->View Source menu.

Posted at 12:50PM Nov 24, 2006 by Christopher Oliver in F3  |  Comments[7]

F3 and Swing

In addition to declarative 2D graphics, F3 also provides a declarative interface to standard Swing components and layout managers. The F3 Canvas is itself a Swing JComponent. So it's possible to both embed Swing components in a Canvas, and to embed a Canvas in other Swing components.

F3 Swing Tutorial

Here is a (non-interactive) tutorial on using Swing components in F3.

Posted at 07:59AM Nov 21, 2006 by Christopher Oliver in F3  |  Comments[31]

F3 and SVG

F3's declarative 2D graphics API's are largely based on those defined by SVG. As a result, it was (relatively) easy to write a translator from SVG to F3.

Our current translator isn't perfect but does cover a large portion of SVG syntax.

Having such a translator makes it possible to create graphic elements in vector drawing tools such as Inkscape or Illustrator and then use the result in your F3 programs. In addtion, since F3 is a real programming language, you can parameterize properties of such graphic elements, for instance fill or stroke or some of the coordinates, and then call it like a function in your program.

F3 SVG Browser

Here's a demo program written in F3 that resembles the Apache Batik Squiggle SVG browser, but renders SVG files by first translating them into F3 source code and then compiling and executing the result.

You can drag URL's that point at SVG files from web pages into the SVG Browser's canvas. Below are a few examples for you to try:

• Java Cup Logo from Wikipedia
• The Famous SVG Tiger
• Lion

Posted at 03:38PM Nov 17, 2006 by Christopher Oliver in F3  |  Comments[7]

Live versions of F3 Tesla and Amazon demos (and some others)

Here are the live versions of these demos.

They're launched in a prototype F3 "Application Server", which makes it possible to run multiple isolated F3 applications in the same JVM. If you're running Java 1.6 you'll see an F3 icon added to your system tray. Double-clicking it will display a window titled "F3", listing the running applications, with some additional controls to manually kill such applications, and perform other system tasks. If you're running Java 1.5 this window will always be visible.

To shut down the whole thing, click the File->Shutdown menu in the "F3" window.

The F3 server application performs its own "web-start", meaning that it downloads the latest versions of jar files on demand (by doing conditional http-gets) and caches them. You can remove the cached files from your system by clicking File->Delete Cache in the "F3" window.

In addtion to Tesla, Amazon, and the Cars demo I added three others:

1. Yahoo Maps
2. Guitar Tuner
3. Processing examples: Arctangent, Bezier, Mouse1d

(1) and (2) reuse artwork from some Yahoo Widget Engine examples, and demonstrate that F3 can easily do the kinds of things Yahoo Widgets do. (3) contains F3 versions of several simple processing examples, with source code.

Sorry for the large downloads for some of these. The size of the Tesla demo is due to the large number of images it contains (which are embedded in swf files in the original flash programs and can't be downloaded directly from the tesla web site). The Amazon demo uses Apache axis to contact the amazon soap service and so includes a bunch of jar files axis depends on. Finally, the guitar tuner example has to download about 1MB worth of wav files, hence the long delay while "loading sound".

Posted at 07:39AM Nov 14, 2006 by Christopher Oliver in F3  |  Comments[21]

The F3 Programming Language

Here is an informal description of the F3 language itself.

Posted at 12:03PM Nov 11, 2006 by Christopher Oliver in F3  |  Comments[10]

F3 vs Processing

One of the comments to my earlier posts asked whether F3 is a competitor to Processing.

No, not really. F3 is intended to provide a general purpose GUI development platform and not just an "electronic scratchpad" for 2D graphics like Processing.

That said, F3 can do many of the same things as Processing, for example below is the F3 equivalent to this simple processing example.

Note the use of the F3 bind operator in this example. F3 performs dependency-based evaluation of the right-hand operand of the bind operator. Whenever any of the values it depends on changes the result is incrementally reevaluated and, if the overall value of the expression changed, the left-hand side is automatically updated.

In this example, when the gx, gy, rightColor, and leftColor attributes are modified in the update() operation, the dimensions and colors of the rectangles are also implicitly updated due to the bindings.

import f3.ui.*;
import f3.ui.canvas.*;

public class Mouse1d extends CompositeNode {
    public attribute width: Number;
    public attribute height: Number;
    attribute gx: Number;
    attribute gy: Number;
    attribute leftColor: Number;
    attribute rightColor: Number;
    operation update(x:Number);
}

attribute Mouse1d.gx = 15;
attribute Mouse1d.gy = 35;
attribute Mouse1d.leftColor = 0.0;
attribute Mouse1d.rightColor = 0.0;

operation Mouse1d.update(x:Number) {
    leftColor = -0.002 * x/2 + 0.06;
    rightColor =  0.002 * x/2 + 0.06;
    
    gx = x/2;
    gy = 100-x/2;
    
    if (gx < 10) {
        gx = 10;
    } else if (gx > 90) {
        gx = 90;
    }
    
    if (gy > 90) {
        gy = 90;
    } else if (gy < 10) {
        gy = 10;
    }
}

function Mouse1d.composeNode() =
Clip {
    shape: Rect {width: bind width, height: bind height}
    content:
    [Rect {
        height: bind height
        width: bind width
        fill: black
        selectable: true
        onMouseMoved: operation(e:CanvasMouseEvent) {
            update(e.localX);
        }
    },
    Rect {
        x: bind width/4-gx, 
        y: bind width/2-gx
        height: bind gx*2
        width: bind gx*2
        fill: bind new Color(0.0, leftColor + 0.4, leftColor + 0.6, 1.0) 
    },
    Rect {
        x: bind width/1.33-gy,
        y: bind width/2-gy
        height: bind gy*2
        width: bind gy*2
        fill: bind new Color(0.0, rightColor + 0.2, rightColor + 0.4, 1.0)
    }]
};


Frame {
    visible: true
    content: Canvas {
        content: Mouse1d {
            width: 200
            height: 200
        }
    }
}

Posted at 11:15AM Nov 11, 2006 by Christopher Oliver in F3  |  Comments[2]

"Flash-like" effects

Here's an F3 demo that demonstrates the kind of visual effects commonly seen in Flash programs, but more rarely in Java programs. As you can see Java is very capable of delivering such behavior.

Posted at 09:45AM Nov 11, 2006 by Christopher Oliver in F3  |  Comments[7]

Interactive F3 Tutorial

Here's an interactive tutorial on using 2D graphics in F3 (written in F3, of course).

Posted at 06:30PM Nov 10, 2006 by Christopher Oliver in F3  |  Comments[33]

F3

My name is Chris Oliver. I came to Sun through their acquisition of Seebeyond in September 2005. I'd like to present something about my current work – it’s not public yet but it should be open-sourced on java.net shortly.

My project is called F3 which stands for “Form follows function”, and its purpose was to explore making GUI programming easier in general.

F3 is actually a declarative Java scripting language with static typing for good IDE support and compile-time error reporting (unlike JavaScript...), type-inference, declarative syntax, and automatic data-binding with full support for 2d graphics and standard Swing components as well as declarative animation. You can also import java classes, create new Java objects, call their methods, and implement Java interfaces.

We have IDE plugins for both Netbeans and Eclipse Both plugins support as-you-type validation, code-completion, syntax highlighting, and hyperlink navigation (with control-mouse-over).

F3 attempts to demonstrate that we're not exploiting the full capabilities of the Java platform for GUI development and that together with supporting tools like F3, the Java platform is highly competitive with or superior to competing GUI development platforms such as Macromedia Flash/Flex/Open Laszlo, Adobe Apollo, Microsoft WPF/XAML, Mozilla XUL, AJAX/DHMTL..

F3 fully supports Swing as well as Java2D. In fact, we have a translator that can translate most of SVG to F3.

Here are some small examples to give you a flavor of what F3 is like:

import f3.ui.canvas.*;

import f3.ui.*;

 

Canvas {

    

    content: Rect {

        x: 20

        y: 20

        height: 80

        width: 300

        arcHeight: 20

        arcWidth: 20

        fill: cyan

        stroke: purple

        strokeWidth: 2

    }

}

produces:

An example using image filters is:

 

import f3.ui.*;

import f3.ui.canvas.*;

import f3.ui.filter.*;

 

Canvas {

    content: Text {

        x: 20

        y: 20

        content: "Welcome to F3"

        font: Font { face: VERDANA, style: [ITALIC, BOLD], size: 80 }

        fill: LinearGradient {

            x1: 0, y1: 0, x2: 0, y2: 1

            stops: 

            [Stop {

                offset: 0

                color: blue

            },

            Stop {

                offset: 0.5

                color: dodgerblue

            },

            Stop {

                offset: 1

                color: blue

            }]

        }

        filter: [Glow {amount: 0.1}, Noise {monochrome: true, distribution: 0}]

    }

}

which gives:

It’s also possible to use 2D content as a TexturePaint through the concept of a “Pattern” as in SVG, for example:

import f3.ui.*;

import f3.ui.canvas.*;

 

Canvas {

    content: Ellipse {    

        fill: Pattern {

             content: Polygon {

                 points: [5, 5, 25, 5, 15, 25]

                 fill: orange

                 stroke: red

                 strokeWidth: 3

             }

       } 

       cx: 100

       cy: 50

       radiusX: 90

       radiusY: 40

       stroke: black

    }

}

These snippets don’t demonstrate F3’s full capabilities.

Using F3, I’m able to write nearly exact replicas of many Flash or DHTML or Java programs in a remarkably short amount of time, for example this Flash program the F3 version below was written in 2 days):

This combination DHTML/Flash program the F3 version below (although incomplete) was also written in about 2 days:

Posted at 12:51PM Nov 08, 2006 by Christopher Oliver in F3  |  Comments[311]