Android and JavaFX

This brief post is not about running JavaFX on Android...something I really hope does happen and soon would be nice.  JavaOne announcement?

It is about a quick comparison between a native Android application and a JavaFX FXML application.

If I recall correctly, one of the books I used as a reference for Android development used code-only to explain "hello world" type examples.  After that simple stuff it was quickly pointed out that Android development is typically done using XML as the markup language to create views.  It is possible, although not advised, to use Java-only because the XML separates the design from the code.

JavaFX 2.0 seems to be getting a great deal of press now and perhaps it's gaining in popularity.  In my opinion Jim Weaver and Stephen Chin joining Oracle as evangelists is a great for JavaFX.  I know I have been working with it a good bit lately.  At this point it seems like there are more code-only examples than FXML based examples (but this is changing).  This past week I mentioned this perception to a few people and I was surprised to learn that some are not aware of the FXML side of JavaFX.

• The Android plugin for Eclipse, ADT, includes a designer that creates XML markup
• The Android markup can be edited by hand
• Oracle created Scene Builder for JavaFX which is also a designer that creates XML markup
• FXML can also be edited by hand
• Both designers "respect" XML they don't support (if you add what it won't yet do, it's not lost)

Here's a quick comparison


Android XML

        <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/button1"

        android:layout_alignParentRight="true"

        android:layout_centerVertical="true"

        android:padding="@dimen/padding_medium"

        android:text="@string/hello_world"

        tools:context=".MainActivity" />

    <EditText

        android:id="@+id/editText1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:layout_marginTop="22dp"

        android:ems="10"

        android:hint="Enter your name" >

        <requestFocus />

    EditText>

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@+id/editText1"

        android:layout_marginLeft="14dp"

        android:layout_marginTop="18dp"

        android:text="Say Hi" />

Android development, leveraging the auto-compile feature of Eclipse, uses a generated "R" class file.  As the XML markup is modified by hand or via the designer, the R class is updated so that the components can be easily and safely referenced from the Java code.  [The "R" class file includes other resources such as Strings as well.]  Components are referenced using code such as this:

btnSayHello = (Button)this.findViewById(R.id.button1);



JavaFX FXML

   
<AnchorPane id="AnchorPane" prefHeight="200.0" prefWidth="320.0" xmlns:fx="http://javafx.com/fxml" 
  fx:controller="demo.SampleController">
  <children>
    <Button id="button" fx:id="btnSayHello" layoutX="46.0" 
layoutY="150.0" onAction="#handleButtonAction" text="Click Me!" />
    <Label fx:id="label" layoutX="126.0" layoutY="120.0" 
minHeight="16.0" minWidth="69.0" />
    <TextField fx:id="tfName" layoutX="46.0" layoutY="33.0" 
prefWidth="200.0" promptText="Name" />
    <Label fx:id="lblHello" layoutX="46.0" layoutY="78.0" 
prefWidth="200.0" text="Hello" />
  </children>
</AnchorPane>

The JavaFX Scene Builder is still relatively new but getting nicer with each release.  Some of the recently added magic is "richer" controller class reference.  In the above example the SampleController class from the hellojavafx package is referenced.  Here's an excerpt from the controller class:

    @FXML
    private TextField tfName;
    @FXML
    private Label lblHello;
    @FXML
    private Button btnSayHello;
    
    @FXML
    private void handleButtonAction(ActionEvent event) {
        System.out.println("You clicked me!");
        lblHello.setText("Hello " + tfName.getText());
    }


Annotations are used instead of the Android-style findViewbyId method but concept of the separation of code from markup language is the same.  The designer is "aware" of the class property references by type making the tool that much easier to use.

If you have not checked out JavaFX and FXML yet, it's definitely worth doing.  If you are familiar with Android development you already have a nice starting perspetive.  The documentation on Oracle's web site is very good and there's more every time I visit.  Specifically the Getting Started page is excellent.  In addition the fxexperience web site is excellent.

Happy Coding