Un viaje sobre lenguajes, APIs y otras cosas raras en el mundo del desarrollo de sistemas.

Gluon Rulez

After my last BLOG entry (long time ago) lot of things have happened, JavaFX performance has improved a lot and the quantity of things that it provides and you can find for this framework has grown in quantity and quality. There are more components and definitely one of the missing parts on the equation has appear and it’s called GLUON.

¿What’s GLUON?

Well… Gluon is a company that took “the responsability” to lead a copule of very important projects: Scene Builder and  JavaFXPorts, improving the wy to use both of them, that’s what we are going to talk about.

Scene Builder

Scene Builder is a  JavaFX WYSIWYG for GUIs.

Yeah, i know that “we” prefer to use our old Eclipse or Netbeans and edit our FXML files handly, but it is always a good idea to have an auxiliar tool to help us to create the first prototype and let us make an approach on what we need in order to polish things after (using this tool or aour beloved notepad editor).

The tool is a good one and we are going to put a couple of screenshots about examples that we alrady talked before in this blog.

This way we can move some properties on our GUI quickly.

Improvements we have seen: a better way to manage image resources and CSS files (it does not have a CSS editor and it could be a valuable improvement on the future).

JavaFX Ports

This is what we wait for long long  time, a tool to let us use all the JavaX beauty to develop mobile devices applications.

Once again our life has been made easier. Gluon has generated some plugins that let us focus on coding and forget on the instalations needed, so to make a mobile development we only need to install the required SDKs (Android, iOS -XCode- and Gluon). To have the complete set of instructions on how to do it i will drop the link to see it:

http://docs.gluonhq.com/charm/1.0.0/#_ide_plugins

I have to point out that once you have your gluon project and the gradle files generated by the tool you must update the build.gradle file to point to the last javafx ports version as dependency:

dependencies {
classpath ‘org.javafxports:jfxmobile-plugin:1.0.6’
classpath ‘com.android.tools.build:gradle:0.5.+’
classpath ‘com.google.code.ksoap2-android:ksoap2-android:3.4.0’
}

 

If you left the default version (the one that the plugin generates the day of this post) you may have some trouble with the displaying position for the item list box for ChoiceBox and DatePicker … and you are not going to like it.

I must recomend an aditional reading of the documentation provided on the site in order to generate notification or some mobiles platform specific features for your programs.

So the good news are on, cause beside these and the modularization that will be in java 9 (jigsaw) we can be sure that the WORE concept is not just back but in the best position ever. Hopefully and Gluon can contribute to create a PPAPI plugin for browsers in order  to run again our applets, that could be “the icing on the cake”.

Greetings and i promise that my blog is back for good.

Después de la última entrada en este BLOG (ya hace bastante) muchas cosas han pasado, JavaFX mejoró bastante en su desempeño y en la cantidad de cosas que provee y poco a poco cada vez hay más soporte para los componentes necesarios para este lenguaje, definitivamente uno de los componentes que estaba perdido era GLUON.

¿Que es GLUON?

Bueno… gluon es una empresa que se ha dado a la labor de “hacerse responsable” de un par de proyectos muy específicos:  Scene Builder y JavaFXPorts, mejorando la forma de utilizar ambos, que es de lo que hablaremos a continuación.

Scene Builder

Scene Builder es un constructor de interfaces JavaFX WYSIWYG.

Si, ya se que preferimos (muchos) manejar nuestro viejo Eclipse o NetBeans y estar editando los XML (FXML) a mano, pero siempre es bueno una herramienta auxiliar que nos permita hacer la primera aproximación de una manera rápida y segura para que nosotros podamos refinarla posteriormente (ya sea con ayuda de esta herramienta o “a patín del diablo” -a mano- )

La herramienta es buena y les dejamos aqui algunos ejemplos con lo que ya alguna vez escribimos dentro de este blog.

Así pues podemos mover las características de nuestra aplicación de una forma más rápida.

Una de las mejoras que hemos observado es un mejor manejo de las iágenes y recursos CSS dentro del editor. (No tiene editor de CSS y probablemente eso pudiese ser un extra muy valioso a futuro).

JavaFX Ports

Esto es lo que durante muchos e interminables meses estuvimos buscando, una herramienta (justo de la que hablé en mi último post) que nos permitiera llevar toda la belleza de JavaFX hacia los dispositivos móviles.

Una vez más nos han facilitado la vida. Han generado plugins que nos permiten olvidarnos un podo sobre las instalaciones necesarias y nos ayudan a enfocarnos en la codificación, así que ahora para hacer un desarrollo en móviles sólo hay que instalar los SDK adecuados (Android, iOS -Xccode- y Gluon). Para las instrucciones de como instalar los plugins les dejo la liga correspondiente:

http://docs.gluonhq.com/charm/1.0.0/#_ide_plugins

Es bueno hacer notar que una vez que el proyecto e gradle se encuentre generado para nuestra aplicación es recomendable actualizar el archivo build.gradle para que las dependencias vayan a la última versión de javafx ports:

dependencies {
classpath ‘org.javafxports:jfxmobile-plugin:1.0.6’
classpath ‘com.android.tools.build:gradle:0.5.+’
classpath ‘com.google.code.ksoap2-android:ksoap2-android:3.4.0’
}

 

Por ejemplo, si usted deja la versión (que hasta hoy viene en el plugin por omisión) es probable que haya problemas con la posición en que se desplieguen las listas del Datepickeer o del ChoiceBox… lo cual no nos gustará.

Yo recomendaría, adicionalmente darle una buena leida al sitio por si creen que generar notificaciones o hacer algo específico de alguna plataforma movil debe ser parte de su aplicación.

Así pues siguen las buenas noticias, pues entre esto y la modularización que tendremos en Java 9 podemos estar seguros de que el concepto WORE está no sólo de vuelta si no en un mejor posicionamiento que muchas otras herramientas, ojalá y Gluon decidiera contribuir para que se genere un plugin PPAPI para JavaFX, sería “la cereza en el pastel”.

Saludos y les aseguro que volveré pronto con más posts.

JavaFX en mi android

El día de hoy vamos a hacer que una aplicación ya hecha en Java FX la podamos pasar a nuestro dispositivo Android.

Los pasos son a grandes rasgos:

Bajar el sdk de android y el adt para tener emuladores. http://developer.android.com/sdk/installing/index.html?pkg=tools

Bajar el runtime de JFX https://bitbucket.org/javafxports/android/downloads

Gradle viene con el dalvik sdk

Generar para gradle las siguientes variables:

NAME El nombre escogido para el proyecto.

ANDROID_SDK el path donde se ha bajado el SDK Android, Si se ha bajado todo el ADT hay que apuntar al directorio interno del adt.

DIR el directorio donde el apk será guardado. Un directorio llamado NAME será generado en este directorio de salida

PACKAGE El nombre del paquete requerido por Android. No tiene relación con el de la aplicación JavaFX pero se puede usar el mismo.

JFX_SDK Donde el JavaFX-Android Runtime ha sido compilado o descargado

JFX_APP Lugar donde está el .jar de la aplicación JavaFX

debe utilizar el API de Android al nivel 19 o posterior, si alguno de los archivos han sido compilados con Java 7 o mayor. De otra forma los archivos deben ser compilados para Java 6.

JFX_MAIN el nombre de la clase que inicia la aplicación Java (completa con el nombre de los paquetes)

DEBUG Si se quiere hacer l depuración del producto portado.

Crear el proyecto de Gradle:

gradle -PDEBUG -PDIR=/home/user/work -PNAME=HelloAndroidWorld -PPACKAGE=com.helloworld \

-PJFX_SDK=/home/user/android/android-sdk -PJFX_APP=/home/user/NetBeansProjects/HelloAndroidWorld/dist \

-PJFX_MAIN=com.helloworld.HelloAndroidWorld createProject

correr en el directorio de la aplicación: ant debug

Instale la aplicación en su dispositivo

La aplicación no correrá en dispositivos virtuales debido a que estos no tienen las extensiones de opengl requeridas por JFX. Se debe utilizar un dispositivo real.

El bundle Android ADT tiene una herramienta llamada adb que le permitirá comunicarse con el dispositivo real (o incluso con los emuladores). Instale el paquete via:

adb install -r path/to/package-debug.apk

Si quiere debugearlo hágalo usando:

adb logcat

En las entradas posteriores les iremos diciendo que es lo que hemos encontrado sobre este procedimiento, por lo pronto queda saber que el runtime que manejamos aqui es referente a JavaFX2 (Java 7), sin embargo en el mismo repositorio de bitbucket podemos encontrar el JFX rt para JFX 8… seguiremos informando

After a very heavy workload here we are to finish (or start) what we begun.

If you remember we made a user interface that had a VBox named as  “vbScores” in that VBox  we’ll put our baseball results. but what we will show?

well let’s make our FXML first:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<AnchorPane id="AnchorPane" prefHeight="45.0" prefWidth="169.0" styleClass="mainFxmlClass, rootPane" xmlns:fx="http://javafx.com/fxml" fx:controller="com.beisbolicos.scoreboard.GameResultController">
  <children>
    <GridPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
      <children>
        <Label fx:id="eVisitante" text="Label" textFill="#e0ff66" GridPane.columnIndex="0" GridPane.rowIndex="0">
          <font>
            <Font name="Verdana Bold" size="12.0" fx:id="x1" />
          </font>
        </Label>
        <Label fx:id="eLocal" font="$x1" text="Label" textFill="#52ff00" GridPane.columnIndex="0" GridPane.rowIndex="2" />
        <Label fx:id="cVisitante" text="Label" textFill="WHITE" GridPane.columnIndex="1" GridPane.rowIndex="0" />
        <Label fx:id="cLocal" text="Label" textFill="WHITE" GridPane.columnIndex="1" GridPane.rowIndex="2" />
        <Label id="lInning" fx:id="lInning" text="Label" textFill="#ff3d00" GridPane.columnIndex="2" GridPane.rowIndex="0">
          <font>
            <Font name="System Bold" size="12.0" fx:id="x2" />
          </font>
        </Label>
        <Label fx:id="lStatus" font="$x2" graphicTextGap="0.0" text="Label" textFill="#33ffe7" GridPane.columnIndex="0" GridPane.rowIndex="3">
          <GridPane.margin>
            <Insets fx:id="x3" />
          </GridPane.margin>
        </Label>
        <ImageView fitHeight="30.0" fitWidth="50.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.halignment="LEFT" GridPane.hgrow="NEVER" GridPane.margin="$x3" GridPane.rowIndex="1" GridPane.rowSpan="2" GridPane.valignment="TOP" GridPane.vgrow="NEVER" />
      </children>
      <columnConstraints>
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
      </rowConstraints>
    </GridPane>
  </children>
  <stylesheets>
    <URL value="@scoreboard.css" />
  </stylesheets>
</AnchorPane>


As you can see we will put the game’s local team name and runs, visitor’s name and run and one state and one graphic for the on bases runners.

Now it’s time to connect to the WebService that will provide the data, we will make this from out initial FXML controller, that is the ScoreboardController class and we will read something like:

package com.beisbolicos.scoreboard;
import com.delunasaenz.scoreboardWS.Game;
import com.delunasaenz.scoreboardWS.ScoreboardWS;
import com.delunasaenz.scoreboardWS.ScoreboardWSService;
import java.io.IOException;import java.net.MalformedURLException;
import java.net.URL;
import java.util.List;
import java.util.ResourceBundle;
import java.util.concurrent.ExecutionException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Task;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Node;
import javafx.scene.control.ChoiceBox;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javax.annotation.Resource;
import javax.xml.namespace.QName;
import javax.xml.ws.Service;

public class ScoreBoardController implements Initializable {
    public ScoreboardWSService service;
    @FXML
    private ChoiceBox leagueSelection;
    @FXML
    private VBox vbScores;
    @FXML
    private void handleButtonAction(ActionEvent event) {
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        URL wsdlLocation = null;
        try {
            wsdlLocation = new URL("http://localhost:8080/"
                    + "ScoreboardApp/ScoreboardWSService?wsdl");
        } catch (MalformedURLException ex) {
            Logger.getLogger(ScoreBoardController.class.getName()).log(Level.SEVERE, null, ex);
        }
        service = new ScoreboardWSService(wsdlLocation,
                new QName("http://scoreboard.delunasaenz.com/", "ScoreboardWSService"));
        leagueSelection.getSelectionModel().select(0);
        leagueSelection.getSelectionModel().selectedIndexProperty()
                .addListener(new ChangeListener<Number>() {
            @Override
            public void changed(ObservableValue<? extends Number> ov,
                    Number t, Number t1) {
                actualizaLista(t1);
            }
        });
        actualizaLista(new Integer(0));
    }
    private void actualizaLista(Number t1) {
        ScoreboardWS port = service.getScoreboardWSPort();
        String liga;
        switch (t1.intValue()) { 
           case 0:
                liga = "MEX";
                break;
            case 1:
                liga = "LMP";
                break;
            case 2:
                liga = "MLB";
                break;
            case 3:
                liga = "SC";
                break;
            default:
                liga = "MEX";
                break;
        }
        List<Game> result = port.league(liga);
        vbScores.getChildren().clear();
        for (Game item : result) {
            FXMLLoader fxml = new FXMLLoader(getClass()
                        .getResource("/com/beisbolicos/scoreboard/GameResult.fxml"));
            try {
                fxml.load();
                GameResultController grc = fxml.getController();
                vbScores.getChildren().add((Node) fxml.getRoot());
                grc.setGame(item);
            } catch (IOException ex) {
                Logger.getLogger(ScoreBoardController.class.getName()).
                        log(Level.SEVERE, null, ex);
            }
        }
    }
}

And now the explanation.

if you have used Web Services from servlets or JSP you will find that  @WebServiceRef(wsdlLocation = “http://localhost:8080/ScoreboardApp/ScoreboardWSService?wsdl&#8221;) is missing, that is because the Service reference for our webservice client (service variable), that is because that annotation only works inside a Webserver container and a JavaFX is not running on the server side, but the client side, then we need to start our WS client using the constructor of the client using the wsdlLocation, new QName(“http://scoreboard.delunasaenz.com/&#8221;, “ScoreboardWSService”) as the parameters to start it.

On the initialize method we add a listener to the leagueSelection ChoiceBox making the VBox to be filled with the current games on the league selected, the leagues are obtained thanks to web service we defined.

I hope this can get you a good brief explanation on how to start and use a WebService from a FXML/JavaFX application.

Stop the press… xD

I’ve been working hard with a project that uses a lot of text data in a TableView, usually the tableviews uses about 8 columns for each row and can be more than 100000 rows on a “bad user search”…

the problem with this is that TableView use to “paint” (outside the screen) all the cells involved (above) the line that has to be presented when you use the scroolTo(int) function, so with tables like the one i described the response can became veeeery slooow…

after making a research i wrote a “work around” for those tables with the same height on all the rows:

package my.good.stuff.package.utils;

import com.sun.javafx.scene.control.skin.TableViewSkin;
import com.sun.javafx.scene.control.skin.VirtualContainerBase;
import com.sun.javafx.scene.control.skin.VirtualFlow;
import javafx.scene.Node;
import javafx.scene.control.ScrollBar;
import javafx.scene.control.TableView;

/**
* @author charly
*/
public class MyVeryGoodTableView extends TableView
{
protected double rowHeight;
@Override
public void scrollTo(int registro){
TableViewSkin skin = (TableViewSkin)getSkin();
VirtualFlow vf = null;
for(Node node : skin.getChildren()){
if(node instanceof VirtualFlow){
vf = (VirtualFlow)node;
}
}
ScrollBar bar=null;
for(Node node : vf.getChildrenUnmodifiable()){
if(node instanceof ScrollBar){
bar=(ScrollBar)node;
if(Orientation.VERTICAL== bar.getOrientation()){
bar.valueProperty().set((double)(
((double)registro/(double)(getItems().size()-1))
*bar.getMax()));
}
}
}
}

public double getRowHeight() {
return rowHeight;
}

public void setRowHeight(double rowHeight) {
this.rowHeight = rowHeight;
}

}

Hope this works for you… after this we will continue with the JavaFX tutorial…  xD

La reusabilidad viene en varios sabores, el peor de ellos es el copy/paste o el mueve_este_archivo_y_vuelvelo_a_usar, y el mejor de los sabores es el usa_este_modulo. Para obtener este último sabor se debe considerar cuantos proyectos (módulos) debe tener uno. Yo recomiendo por lo menos 2 (aún cuando uno programa algo tan sencillo como un “casi Hola Mundo”), uno para la capa de presentación (Vista y controladores con un “cliente del modelo”) y otro con el Modelo, que incluye la Lógia  de Megocios y los DAOs

Normalmente se necesitará una Façade -Una Façade (o Fachada) es un objeto que recibe peticiones (en este caso para CUALQUIERA de los “métodos” de la Lógica de Negocios) y los redirige al objeto correcto que puede resolver dicha petición (En este caso un Objeto de Lógica de Negocios) y puede ser publicada despues como un Web Service o usado por cualquier otra capa de presentación como JSP/JSF-. Asi pues, si uno quiere “aislar” la Façade en un proyecto nuevo para poder ser reutilizado por otro proyecto similar definitivamente tendría que ser otro módulo o proyecto (piensen en un banco que tiene diferentes políticas de impuestos dependiente del sistema y el país donde se acceda al sistema; cada sistema y país tendrían sus propios objetos de negocio de acuerdo a las especificaciones de la Fachada).

Generalmente cuando uno habla de modularidad encontramos buenas razones para hacer más y más módulos cada vez, les recomiendo leer el refcard   http://refcardz.dzone.com/refcardz/patterns-modular-architecture.

La siguiente entrada será sobre un diseño de UI basado en un escenario complejo de manera que podamos utilizar FXML y sus controlers, debo disculparme por estas dos partes de introducción “teóricas”  que habla principalmente de patrones.

Saludos y hasta la siguiente.

¿Do you like baseball? Well, may be not as much as i do…  I have a site that is all about baseball, news, results, world baseball classic, mexican baseball, major leagues, etc… inside that site there is a plugin made in Adobe Flash…

Recently i talked with a group of designers and they made me a new design for the complete site… but one of the things to change is that applet.. and guess what!!! even when i have not the code to that applet i will made a JavaFX app to change it, what about doing it togheter?

To start i discovered that the applet reads a XML file with the information of several leagues (winter leagues, for today’s results), so in order to have more than just the “Mexican Pacific league” and have more audience for that applet let’s make a “multi-league” scoreboard.

To start let’s supposed that the part to read the file with the “live” results is done and that we have a class (let’s called that class ResultsFacade) that does all that., so our main goal is to design the front end in a very little space.

To do that we will make our “applet/application” for about 300pix width and 400 pix height.

Before begin let’s understand a little bit of JavaFX, FXML and how do they make great apps.

First af all, JavaFX is an API, used to create User Interfaces that will run on a JVM, usually you will want to write those UIs in Java or any other language compatible wih Java 7. You can think in JavaFX as the sucesor of swing, a good API reborned and rewritten inorder to help you to have more tools to create and develop great applications and to let the graphical designers to do their job without having to learn Java or any programming language (maybe HTML and JavaScript can be a usefull reference).

FXML is a language based on XML to design the UI and conect it to a controller Java class, that is you can develop an XML file to “draw” your UI and a .java to make it work.

Once you have this in mind try to imagine our scoreboard.

Imagen

well… if you look at it everything is “anchored” in a “Pane”, so the main UIControl will be a “AnchorPane”, after that we will be “adding” more controls one below the others until we reach our logo, so we will have a “Vertical Box” inside our Anchor pane and so on… what about something like this:

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="200.0" prefWidth="320.0" xmlns:fx="http://javafx.com/fxml" fx:controller="com.beisbolicos.scoreboard.ScoreBoardController">
  <children>
    <VBox AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="10.0">
      <children>
        <ChoiceBox>
          <items>
            <FXCollections fx:factory="observableArrayList">
              <String fx:value="Item 1" />
              <String fx:value="Item 2" />
              <String fx:value="Item 3" />
            </FXCollections>
          </items>
        </ChoiceBox>
        <ScrollPane prefHeight="200.0" prefWidth="200.0">
          <content>
            <VBox prefHeight="150.0" prefWidth="200.0" />
          </content>
        </ScrollPane>
        <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" />
      </children>
    </VBox>
  </children>
</AnchorPane>

If we check line per line we will have:

<?xml version=”1.0″ encoding=”UTF-8″?>
Just to say that is an XML file
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>

All of them to import the needed objects to make our UI:

<AnchorPane id="AnchorPane" prefHeight="200.0" prefWidth="320.0"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.beisbolicos.scoreboard.ScoreBoardController">
  <children>

This will put an Achor pane (a pane that will grow or shrink within the space the parent (our Stage -applet or window-) will left for it. it will have an id (used for CSS) called “AnchorPane” and the controller will be our Java class, as part of the attributes are the children that will populate the UI inside the AnchorPane:

    <VBox AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="10.0">

The VBox is a pane that will be populated adding any new child on the bottom of the already existing children

<ChoiceBox>
          <items>
            <FXCollections fx:factory="observableArrayList">
              <String fx:value="Item 1" />
              <String fx:value="Item 2" />
              <String fx:value="Item 3" />
            </FXCollections>
          </items>
        </ChoiceBox>

A ChoiceBox is like a “closed” Combo box (that is you will not be able to “write” a new value being the user, and the Items are inside a Collections (yes, a new kind of List that we have been using in Java Generics), the values are given (in this case) by Strings.

After it we will put a scroll bar to have all the live results that will be aded via programming, and they will be added vertically inside a VBox.

After that there will be our logo.

If you want to “manipullate any of the controls you will need to name them with the fx:id attribute, so… since you will need to know what league is choosed and you will want to add scores to the scoreboard space inside the applet you must name them and the final FXML will look like:

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane"
            prefHeight="200.0"
            prefWidth="320.0"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.beisbolicos.scoreboard.ScoreBoardController">
  <children>
    <VBox AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0"
          AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="10.0">
      <children>
        <ChoiceBox fx:id="cbxLeague">
          <items>
            <FXCollections fx:factory="observableArrayList">
              <String fx:value="Item 1" />
              <String fx:value="Item 2" />
              <String fx:value="Item 3" />
            </FXCollections>
          </items>
        </ChoiceBox>
        <ScrollPane prefHeight="200.0" prefWidth="200.0">
          <content>
            <VBox  fx:id="vbScores" prefHeight="150.0" prefWidth="200.0" />
          </content>
        </ScrollPane>
        <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" />
      </children>
    </VBox>
  </children>
</AnchorPane>


In the next entry (later this week) we will customize the colors using CSS and we will populate the data inside our applet.
Hope you enjoy this first look on the actual JavaFX front-end code.