Outward L👀king
The JavaFX Application Dev Cookbook arrived for me to review today.
It promises to provide some worked examples of using JavaFX in the real world, which is always handy. After all, why re-invent the wheel? I’m keen to see how it fares in the correctfulness and usefulness of its samples, as well as how they have weathered the newest JavaFX 1.3, and weather the authors site addresses any issues substantially.
Keep your eyes peeled for a review, real soon now.
JavaFX has some pretty charts in the latest 1.2 SDK. This post has a general overview, including the javafx.scene.chart class hierarchy and a great demo of all the charts with an excellent click transition.
Well lets go 1d, a pie chart. The series of data that fits a pie chart is just a pie label and its value
1: def pieChart = PieChart {
2: title: "Sample Pie"
3: data: [
4: PieChart.Data { label: "Apples" value: 34 }
5: PieChart.Data { label: "Oranges" value: 27 }
6: PieChart.Data { label: "Bananas" value: 16 }
7: PieChart.Data { label: "Grapes" value: 50 }
8: PieChart.Data { label: "Cherries" value: 6 }
9: PieChart.Data { label: "Raspberry" value: 7 }
10: ]
11: }
Code snippet taken from How do I create charts and graphs? – not much of a tutorial, but a link to some better references later.
The most important thing is that most charts, with the exception of the pie chart, inherit from XYChart.
This means that while you may think a simple Bar Chart is just a series of Y values, its actually a bunch (series) of X categories with a complimentary data series (or two or three or more) plotted against those category values. In the below example are 5 x-categories, with three data series (each a different colour)
I would think there should be a SimpleBarChart which only takes one data series and has an interface more like a pie chart, I think it would be a fun exercise as a JavaFX student to roll your own, extend chart, perhaps use Mixins of various pie-chart features (if possible)
The concept of two axis lends itself better to line charts where you are plotting anywhere in the XY space that is allowed.
Its not as automatic as you’d like. The BarChart wouldn’t display until I defined my XCategories and set my Y limits (valueAxis).
1: BarChart {
2: categoryAxis: CategoryAxis {
3: categories: ["Child", "Teen", "Peaking", "Middle-Aged", "Grand-parenting", "Refined"]
4: }
5: valueAxis: NumberAxis {
6: lowerBound: 0
7: upperBound: 80
8: tickUnit: 10
9: label: "Age"
10: }
It would be nice in future to have an auto-resize=true flag which does as much magic as the proportional: true flag in the LinearGradient class.
Order is important in the series, as you add a datapoint to the series, it gets assigned in a Bar Chart to the first item in the categories above.
Although a category field exists in the Data item, it doesn’t correlate to the category in the X-axis above.
1: data: [BarChart.Series {
2: name: "The series",
3: data: [
4: BarChart.Data {category: "Child", value: 10},
5: BarChart.Data {category: "Refined", value: 80},
6: BarChart.Data {category: "Peaking", value: 25},
7: BarChart.Data {category: "Middle-Aged", value: 40}
8: BarChart.Data {category: "Grand-parenting", value:60}
9: BarChart.Data {category: "Teen", value:16}
10: ]}
11: ]
The data follows the order of the series, the category in the BarChart.Data literal is ignored – likely used for a different purpose :) Note to self, RTM (or perhaps file a bug, what I read in the API sounds like I’m doing it right?)
The bar charts data and categories can be bound to another variable, and the variable updated by something else. In the below code I was able to add an onMouseClicked event to the bar chart so that when the series title or one of the existing bars were clicked, an additional category and random value data point where added to the chart.
Creating XYCharts in JavaFX – The continuation of Dean Iverson’s blog about how to do each of the XY Charts, nice use of the for loop function to prepare the chart data.
Animated Bar Charts – Sexy way to dress up the bars with Fills (gradients or different coloured paints for the bars) and KeyFrames to animate them
What’s New In JavaFX 1.2 Technology: JavaFX Charts – The most detailed blog entry I found about charts from Sun/Oracle so far. It actually went in depth to all chart types quite well and covered feeding in data from an RSS feed for a stock graph application
JavaFX Folder Visualiser – Using BackgroundTasks to update a folder pie chart view
JavaFX Charts – A great rundown of all the chart types with their usage
So what about interactivity? Live feeds from RESTful services are done with the HTTPRequest, then invoking a PullParser on it. The ShoppingMashup is the first simple example of this, but its real simple and doesnt get too much into the how.
The first thing I had to do though was learn how to use Web Services in WS. Not wanting to go too off topic, there is a HTTPRequest and a PullParser. The PullParser does the work of reading an input stream from the HTTPRequest and processing a JSON or XML request. My issue with it just seems to be the way that you access the XPath or JSON data. I would have liked a more concise interface, too many if START_ARRAY_ELEMENT, if END_VALUE to make it feel testable. And you can’t use the same uniform interface to read a JSON resource as you do an XML one. No where near as simple as what you can get through Grails. I’ll elaborate in a future post.
The best examples to help me get started on a JSON feed though was Coffee Shop, in particular JSONPullParser.fx. Other tutorials for talking to RESTful service that may help: JavaFX RESTful Web Services Invocation (using XML to talk to a home grown feed), pet catalog javafx example application and JavaFX Twitter Client – all referenced from Connect to a web service or RSS feed on the JavaFX Learn page
See TwitterTrend.fx and TwitterTrendClient.fx
My next TODO is to poll a few days worth of twitter trends and graph them. And since this post has gone on long enough, I’ll defer that to my next one 🙂
Warning: Many of the following criticisms are superficial, but I wanted to document my experience of learning a new IDE. I’ll come back to this post in a year to see what’s changed.
I should also state, I’ve got nothing against the Netbeans editor itself, and respect how it is able to support all the new Java platforms and standards in line with their release to the public. Because of this, it’s as easy to adopt a new sun-backed Java platform enhancement as it is in the .net world, and the support provided makes it easy to learn new Java technologies in both regular desktop and enterprise space.
So now for the whinge:
Trying out Netbeans 6.8 and its best of class JavaFx support left me a little disappointed. Following the JFX tutorials was ok, but copying the code from the tutorial into the IDE was a little frustrating since the formatting would be all screwed up. Organise Imports (CTRL+SHIFT+I) plus Format Source (ALT+SHIFT+F) become my new best friends. Maybe its because I’m trying in a new IDE, but I dont remember having to do these things with Idea, imports would resolve (or prompt for resolve) on paste, and formatting would normally match the target source. (I’m a spoilt IDE brat, lol)
The JavaFX palette left me wanting as well. Sure I could drag and drop a template from the palette into my code, but like the copy and paste, it didn’t respect the formatting of my code. Sure once the template was there, I could tab b/ween the fields within the object literal, but my first instinct is to make the code pretty and doing a Format Source. Doing so meant that I could no longer tab between the elements.
It would be nice to have a visual guide as to where in the code you could drop a said palette template into (perhaps highlight code blocks yellow if it was within a content or def assignment, but orange if it was somewhere else in the scenegraph it didnt make sense). This is because if you put the item in the wrong place, you have to spend a minute figuring out the order of ] and } in order to get a compiler fx class again. The scenegraph should make it easy to identify which element belongs to what, but its easy to miss a line.
I’d also like to see elements which took a sequence (like content) but only had one element assigned to them (eg content: Rectangle { … }), become a group or a sequence automatically when items were dragged into them. (eg: content: [ Rectange { … }, Circle { // i just added this } ]
I also found that CTRL+Space within an object literal to find the other properties didnt always seem to work. As I got more experience with the IDE, I found this happening less. I think the problem could have been to dragging and dropping in the wrong place, as soon as you have a syntax error in your code, the intellisense isn’t going to work, regardless if your CTRL+Space is just within the braces of the object literal.
Also in Netbeans, a lot of refactoring functions were neutered. Options like Move or Copy class or even create a variable (ALT+SHIFT+V) would prompt they didn’t work in the context of the file type. Doing a block comment using the default comment keyboard shortcut (CTRL+SHIFT+C) didnt work, and its menu option under Format was greyed out, but you could press CTRL+I, type comment and select Toggle Comment for it to work there. Strange.
End whinge
To Netbeans credit, the JavaFX preview is a great feature to help pick up the language, and of course the different profiles (Desktop, Common, Mobile) along with the integration with the the emulator is excellent. The above things are pretty superficial and since Netbeans has the jump on the other IDE’s, will probably get around to addressing those other concerns later as the platform is adopted by more devs in future.
Many of the above criticisms are borne out of wanting more refactoring options and polyglot support like I’m used to in IntelliJ. At present IntelliJ offers a mere syntax highlighting when opening Fx files, but thats about it. What I’m really waiting for is the super refactoring options when working with a project that has Scala, Groovy and other facets. As well as just being able to use the refactoring options that I’m used to (eg rename a var/class in java, and refs in the Groovy and scala get changed too). However, those things aren’t automatic in IntelliJ, I appreciate those refactoring features would have to be developed specifically for JFX, just as they have been for Groovy and Scala. The list of refactorings isn’t as wide as the java ones.
So what else can you do to get some java fx love in IntelliJ? At present not much, you can compile & run JavaFX using Intellij using the External Tools function or by using the ant script as specified in the link.
There was a JavaFX plugin that was being developed by Brian Goetz back in 2008 but word on this has gone quiet. In 2009 a blog was started by someone about writing a JFX plugin for idea but this too has gone quiet.
So its a case of watch this space.