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


¿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.
About these ads

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: