井底之蛙

F3（Form follows function）是一种宣告式的 Java 脚本语言，目标是探索更容易的 GUI 编程。她通过静态类型获得 IDE 的良好支持和编译时错误报告（不像 JavaScript…），类型推论，宣告式语法，自动数据绑定完全支持 2d 图形、标准 Swing 组件和宣告式动画。你可以导入 Java 类，创建新的 Java 对象，呼叫它们的方法，实现 Java 接口。

F3 的创造者是 Chris Oliver。

F3 在 Netbeans 和 Eclipse 平台上都有相应的插件支持，可以进行类型验证，代码自动完成，语法高亮，超链接导航（按下 Ctrl 并鼠标滑过）。

F3 试图展示那些在 Java 平台的 GUI 开发上我们没有使用的强大功能，而这些都可以通过工具比如 F3 的支持来达到。Java 平台具有高度的竞争力或者超过了其它的 GUI 开发平台，比如 Flash/Flex/Open Laszlo，Adobe Apollo，Microsoft WPF/XAML，Mozilla XUL，AJAX/DHMTL…

F3 完全支持 Swing 和 Java2D。事实上，有转换器可以转换大多数 SVG 到 F3。

想要马上体验一下 F3 的强大魅力吗？作者刚刚公布了两个 Web Start。

• Flash 效果。
• 交互式 F3 指南。

想要学习 F3 语言？这里有一份非正式的文档。

另外，关于 F3 和 Processing 的异同，作者解释说 F3 提供的是一个一般意义上的 GUI 开发平台，而不仅仅是一个针对 2D 图形的便签簿。也就是说，F3 可以做很多和 Processing 一样的事情，比如下面的例子就等同于 Processing 的这个简单示例。

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
        }
    }
}