JavaFX Script
Don Park: As you can see, JavaFX script (*.fx) is basically JSON-like version of XAML which can be either compiled into Java bytecode or run as is using a java-based JavaFX player. Since JavaFX is just java, it can run as applets in browsers, midlets on mobiles, and applications on WebStart
Superficially, while JavaFX does appear JSON-like (with bits of LINQ tossed in), the underlying Canvas object model (“a 2D vector graphics scene-graph model with a declarative API similar to SVG”) is a somewhat clunky. Compare intertwingly.fx against the original intertwingly.svg. This verbosity will inhibit the growth of Inkscape like tools that are vital to the ecosystem.
While Silverlight can be directly embedded in an HTML page, JavaFX can only indirectly be embedded via an applet. Additionally, JavaFX can embed HTML as a String. This isn’t as limiting as it might sound as JavaFX Strings not only support interpolation, but also support incremental and lazy evaluation:
Attributes initialized with
bindare akin to cells in a spreadsheet that contain formulas rather than literal values. During the lifetime of the object containg the attribute, whenever any of the objects referenced by the right hand side of the initializer expression changes the left hand side (the attribute’s value) is automatically updated.
In my opinion, such dynamic behavior is the true sleeper feature in JavaFX that others will incorporate over time.
I’m not sure I understand the point of the comparison between intertwingly.fx and .svg as the difference in verbosity seemed minimal to me and I can’t see how it would have a big affect tools.
I initially tried to build a JavaFX version of duke.svg, but gave up out of exhaustion.
That blog entry is interesting. While the F3 SVG browser does a reasonable job of rendering my duke.svg, it refuses to divulge the equivalent fx that is required.
Additionally, it seems to not handle the gradients correctly in my intertwingly.svg.
Posted by Sam Ruby atis it a known issue that most of your pages don’t load in IE7? I don’t normally use it so I don’t know if this is recent — it does mean I can’t see your sl demos.
Posted by dbt at
dbt: can you cite an example of a page that doesn’t load in IE7?
Heck, I developed my sl demos using IE7 on WinXP...
Posted by Sam Ruby atThree points to add to yours:
1. While JavaFX is more verbose than SVG, I think one can build a JavaFX library that allows graphics representation more compact than SVG.
2. One can build SVG to JavaFX translator much more easily than one could build JavaFX to SVG. The difference is XML versus a proprietary format.
3. I don’t see an easy way to ‘process’ JavaFX without instantiating because where, if XAML is data masquerading as code, JavaFX is code masquerading as data.
Posted by Don Park atInside JavaFX
It was difficult to learn what JavaFX exactly is from tech journalists beyond strategic dribble and comparisons to Silverlight and Apollo so I went searching. From news articles, I thought it was just an announcement. Surprise! You can...Excerpt from Don Park's Daily Habit at
links for 2007-05-10
JavaFX Script Digital gifts: Participation and gift exchange in LiveJournal communities (tags: livejournal gifts community paper relationships) iConcertCal updates with iCal exporting, better listings and more...Excerpt from Breyten's Dev Blog at
The SVG browser has an “F3” button in the toolbar that gives you the equivalent F3/FX code.
Posted by dave at
The SVG browser has an “F3” button in the toolbar that gives you the equivalent F3/FX code.
I get a blank window when I press that button. I get the same results when I select View->View S3 Source or View->View SVG Source
Posted by Sam Ruby atI get this on Ubuntu Feisty, Sun Java 6 (sorry for the long post)
import f3.ui.UIElement;
import f3.ui.*;
import f3.ui.canvas.*;
Group { content:[
Path {
d: [
MoveTo {
x: 1190.0
y: 2982.0
absolute: true
},
CurveTo {
x1: -38.0
y1: -31.0
x2: -31.0
y2: -179.0
x3: 17.0
y3: -347.0
smooth: false
absolute: false
},
CurveTo {
x1: 14.0
y1: -49.0
x2: -50.0
y2: 34.0
x3: -89.0
y3: 115.0
smooth: false
absolute: false
},
CurveTo {
x1: -59.0
y1: 126.0
x2: -75.0
y2: 138.0
x3: -139.0
y3: 104.0
smooth: false
absolute: false
},
CurveTo {
x1: -89.0
y1: -45.0
x2: -31.0
y2: -286.0
x3: 106.0
y3: -438.0
smooth: false
absolute: false
},
CurveTo {
x1: 37.0
y1: -41.0
x2: 37.0
y2: -56.0
x3: 2.0
y3: -56.0
smooth: false
absolute: false
},
CurveTo {
x1: -64.0
y1: -1.0
x2: -147.0
y2: -63.0
x3: -147.0
y3: -111.0
smooth: false
absolute: false
},
CurveTo {
x1: 0.0
y1: -68.0
x2: 36.0
y2: -95.0
x3: 107.0
y3: -78.0
smooth: false
absolute: false
},
CurveTo {
x1: 72.0
y1: 17.0
x2: 110.0
y2: 12.0
x3: 162.0
y3: -18.0
smooth: false
absolute: false
},
CurveTo {
x1: 59.0
y1: -36.0
x2: 99.0
y2: -53.0
x3: 121.0
y3: -53.0
smooth: false
absolute: false
},
CurveTo {
x1: 70.0
y1: 0.0
x2: 98.0
y2: -274.0
x3: 36.0
y3: -339.0
smooth: false
absolute: false
},
CurveTo {
x1: -77.0
y1: -80.0
x2: -124.0
y2: -64.0
x3: -211.0
y3: 69.0
smooth: false
absolute: false
},
CurveTo {
x1: -235.0
y1: 363.0
x2: -871.0
y2: 1021.0
x3: -794.0
y3: 823.0
smooth: false
absolute: false
},
CurveTo {
x1: 6.0
y1: -16.0
x2: 15.0
y2: -109.0
x3: 21.0
y3: -208.0
smooth: false
absolute: false
},
CurveTo {
x1: 8.0
y1: -154.0
x2: 7.0
y2: -237.0
x3: -7.0
y3: -510.0
smooth: false
absolute: false
},
CurveTo {
x1: -1.0
y1: -22.0
x2: -5.0
y2: -71.0
x3: -9.0
y3: -110.0
smooth: false
absolute: false
},
CurveTo {
x1: -3.0
y1: -38.0
x2: -8.0
y2: -99.0
x3: -11.0
y3: -135.0
smooth: false
absolute: false
},
CurveTo {
x1: -16.0
y1: -193.0
x2: -59.0
y2: -311.0
x3: -172.0
y3: -463.0
smooth: false
absolute: false
},
CurveTo {
x1: -89.0
y1: -120.0
x2: -103.0
y2: -199.0
x3: -62.0
y3: -333.0
smooth: false
absolute: false
},
CurveTo {
x1: 46.0
y1: -147.0
x2: 32.0
y2: -217.0
x3: -65.0
y3: -342.0
smooth: false
absolute: false
},
CurveTo {
x1: -86.0
y1: -110.0
x2: -34.0
y2: -240.0
x3: 74.0
y3: -182.0
smooth: false
absolute: false
},
CurveTo {
x1: 15.0
y1: 8.0
x2: 16.0
y2: -2.0
x3: 16.0
y3: -118.0
smooth: false
absolute: false
},
CurveTo {
x1: -1.0
y1: -208.0
x2: 99.0
y2: -262.0
x3: 252.0
y3: -137.0
smooth: false
absolute: false
},
CurveTo {
x1: 459.0
y1: 378.0
x2: 583.0
y2: 383.0
x3: 820.0
y3: 37.0
smooth: false
absolute: false
},
CurveTo {
x1: 106.0
y1: -155.0
x2: 165.0
y2: -182.0
x3: 267.0
y3: -123.0
smooth: false
absolute: false
},
CurveTo {
x1: 179.0
y1: 103.0
x2: 150.0
y2: 755.0
x3: -55.0
y3: 1272.0
smooth: false
absolute: false
},
CurveTo {
x1: -72.0
y1: 180.0
x2: -71.0
y2: 272.0
x3: 6.0
y3: 419.0
smooth: false
absolute: false
},
LineTo {
x: 38.0
y: 71.0
absolute: false
},
LineTo {
x: -1.0
y: 147.0
absolute: false
},
CurveTo {
x1: 0.0
y1: 177.0
x2: 4.0
y2: 192.0
x3: 76.0
y3: 262.0
smooth: false
absolute: false
},
CurveTo {
x1: 82.0
y1: 80.0
x2: 99.0
y2: 158.0
x3: 65.0
y3: 300.0
smooth: false
absolute: false
},
CurveTo {
x1: -25.0
y1: 105.0
x2: -22.0
y2: 166.0
x3: 16.0
y3: 269.0
smooth: false
absolute: false
},
CurveTo {
x1: 47.0
y1: 130.0
x2: 23.0
y2: 186.0
x3: -68.0
y3: 161.0
smooth: false
absolute: false
},
CurveTo {
x1: -65.0
y1: -17.0
x2: -142.0
y2: -154.0
x3: -142.0
y3: -253.0
smooth: false
absolute: false
},
CurveTo {
x1: 0.0
y1: -42.0
x2: -37.0
y2: 30.0
x3: -49.0
y3: 96.0
smooth: false
absolute: false
},
CurveTo {
x1: -23.0
y1: 120.0
x2: -43.0
y2: 186.0
x3: -61.0
y3: 202.0
smooth: false
absolute: false
},
CurveTo {
x1: -30.0
y1: 27.0
x2: -91.0
y2: 31.0
x3: -120.0
y3: 7.0
smooth: false
absolute: false
},
ClosePath {},
MoveTo {
x: -342.0
y: -1094.0
absolute: false
},
CurveTo {
x1: 74.0
y1: -22.0
x2: 122.0
y2: -90.0
x3: 122.0
y3: -170.0
smooth: false
absolute: false
},
CurveTo {
x1: 0.0
y1: -77.0
x2: -7.0
y2: -87.0
x3: -54.0
y3: -86.0
smooth: false
absolute: false
},
CurveTo {
x1: -83.0
y1: 2.0
x2: -183.0
y2: -78.0
x3: -173.0
y3: -139.0
smooth: false
absolute: false
},
CurveTo {
x1: 14.0
y1: -82.0
x2: -172.0
y2: -40.0
x3: -237.0
y3: 54.0
smooth: false
absolute: false
},
CurveTo {
x1: -127.0
y1: 183.0
x2: 105.0
y2: 413.0
x3: 342.0
y3: 341.0
smooth: false
absolute: false
},
ClosePath {},
MoveTo {
x: 315.0
y: -214.0
absolute: false
},
CurveTo {
x1: 237.0
y1: -426.0
x2: 341.0
y2: -786.0
x3: 342.0
y3: -1179.0
smooth: false
absolute: false
},
CurveTo {
x1: 0.0
y1: -460.0
x2: -61.0
y2: -531.0
x3: -239.0
y3: -277.0
smooth: false
absolute: false
},
CurveTo {
x1: -251.0
y1: 358.0
x2: -453.0
y2: 367.0
x3: -824.0
y3: 35.0
smooth: false
absolute: false
},
CurveTo {
x1: -124.0
y1: -110.0
x2: -190.0
y2: -136.0
x3: -208.0
y3: -80.0
smooth: false
absolute: false
},
CurveTo {
x1: -7.0
y1: 22.0
x2: -7.0
y2: 235.0
x3: 0.0
y3: 272.0
smooth: false
absolute: false
},
CurveTo {
x1: 2.0
y1: 11.0
x2: 7.0
y2: 45.0
x3: 10.0
y3: 75.0
smooth: false
absolute: false
},
CurveTo {
x1: 4.0
y1: 30.0
x2: 8.0
y2: 66.0
x3: 11.0
y3: 80.0
smooth: false
absolute: false
},
CurveTo {
x1: 2.0
y1: 14.0
x2: 9.0
y2: 52.0
x3: 14.0
y3: 85.0
smooth: false
absolute: false
},
CurveTo {
x1: 109.0
y1: 661.0
x2: 160.0
y2: 849.0
x3: 214.0
y3: 789.0
smooth: false
absolute: false
},
CurveTo {
x1: 199.0
y1: -228.0
x2: 612.0
y2: 2.0
x3: 545.0
y3: 303.0
smooth: false
absolute: false
},
CurveTo {
x1: -6.0
y1: 28.0
x2: -4.0
y2: 32.0
x3: 15.0
y3: 36.0
smooth: false
absolute: false
},
CurveTo {
x1: 38.0
y1: 7.0
x2: 40.0
y2: 4.0
x3: 120.0
y3: -139.0
smooth: false
absolute: false
},
ClosePath {},
MoveTo {
x: -900.0
y: -522.0
absolute: false
},
CurveTo {
x1: 3.0
y1: -4.0
x2: -5.0
y2: -61.0
x3: -18.0
y3: -127.0
smooth: false
absolute: false
},
CurveTo {
x1: -13.0
y1: -66.0
x2: -25.0
y2: -131.0
x3: -27.0
y3: -145.0
smooth: false
absolute: false
},
CurveTo {
x1: -6.0
y1: -36.0
x2: -39.0
y2: 38.0
x3: -46.0
y3: 101.0
smooth: false
absolute: false
},
CurveTo {
x1: -7.0
y1: 76.0
x2: 66.0
y2: 213.0
x3: 91.0
y3: 171.0
smooth: false
absolute: false
},
ClosePath {},
]
fill: black
transform: [
translate(0.0, 136.0),
scale(0.045181, -0.045181),
]
},
Ellipse {
fill: new Color(0xFF, 0x00, 0x00, 0xff)
opacity: 0.7
radiusX: 12.0
radiusY: 10.0
transform: [
rotate(-24.0, 0, 0),
translate(5.4, 68.3),
]
},
Ellipse {
fill: new Color(0xFF, 0xFF, 0xFF, 0xff)
opacity: 0.7
radiusX: 3.5
radiusY: 2.0
transform: [
rotate(-33.0, 0, 0),
translate(-9.0, 61.0),
]
},
]}
Posted by dave
at
Odd. I’m running
$ cat /etc/lsb-release DISTRIB_ID=Ubuntu DISTRIB_RELEASE=7.04 DISTRIB_CODENAME=feisty DISTRIB_DESCRIPTION="Ubuntu 7.04" $ java -version java version "1.6.0" Java(TM) SE Runtime Environment (build 1.6.0-b105) Java HotSpot(TM) Client VM (build 1.6.0-b105, mixed mode, sharing)Posted by Sam Ruby at
That is odd, I get the exact same info from those commands. Maybe the web start is grabbing a different VM for some reason?
Posted by dave at
Quebrando a web
Vamos fazer um tour rápido pela situação atual. A Microsoft A Microsoft anunciou que está lançando o Silverlight. A idéia é competir com o Flash da Adobe - atual líder do mercado. Silverlight foi lançado sob uma licença quase-livre. É permissiva,...Excerpt from about:blank at
RIA: Game of Thrones
{ Catching up on my aggregator yesterday I saw that Dare had posted about Sun’s response to Silverlight: their own rich internet application (RIA) framework to supplant (though the politically correct answer is not that it would, it’s just a "new...Excerpt from MetaDeveloper at
What is Java FX Answered by Don Park
If like me your head is spinning from all the announcements of proprietary “AJAX killers” out there then you probably were still too busy trying to digest Silverlight to even have heard that Sun’s announced it’s own “AJAX killer” and Flash...Excerpt from User:dolander on SWiK at
I’m not sure I understand the point of the comparison between intertwingly.fx and .svg as the difference in verbosity seemed minimal to me and I can’t see how it would have a big affect tools.
However, this blog entry might be interesting:
[link]
Posted by dave at