Desenvolvendo aplicação com Scroll List usando JavaFX

Introdução

JavaFX é uma plataforma de software multimídia baseada em Java para a criação e disponibilização de Aplicação Rica para Internet que pode ser executada em vários dispositivos diferentes. Neste artigo será mostrado como desenvolver uma aplicação em JavaFX usando Scroll List e posteriormente em TotalCross, será apontado prós e contras de cada plataforma, visando apresentar suas diferenças e vantagens.

Construindo a interface

A construção da interface é feita através do fxml, toda a implementação de componentes é feita nesta parte do projeto e o desenvolvimento FXML dessa aplicação foi feita usando a plataforma de software Scene Builder, essa plataforma permite a construção gráfica do form de maneira interativa, não sendo necessário a construção manual do código fxml.

// Implementando bibliotecas java
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.layout.*?>

//Criação do AnchorPane (painel âncora onde que abriga todos os componentes na página

<AnchorPane id="AnchorPane" prefHeight="288.0000999999975" 
prefWidth="467.0001220703125" styleClass="background"            xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2"         fx:controller="com.project_tc.controller.ButtonController">
//Criação dos componentes usados no form
  <children>
    <TextField id="" fx:id="txtTextButton" alignment="CENTER_LEFT" 
               layoutX="134.0" layoutY="89.0" prefHeight="29.0" prefWidth="200.0" promptText="" text="Text" />
    <ComboBox id="" fx:id="cbnSizeButton" layoutX="134.0" layoutY="199.0" minHeight="22.0" prefHeight="29.0"
              prefWidth="200.0" promptText="Size" styleClass="ComboBox">
      <items>
        <FXCollections fx:factory="observableArrayList">
          <String fx:value="Item 1" />
          <String fx:value="Item 2" />
          <String fx:value="Item 3" />
        </FXCollections>
      </items>
      <stylesheets>
        <URL value="@../styles/DarkTheme.css" />
      </stylesheets>
    </ComboBox>
    <ComboBox id="" fx:id="cbnColorButton" layoutX="134.0" layoutY="144.0" minHeight="22.0" prefHeight="29.0" prefWidth="200.0" promptText="Color" styleClass="ComboBox">
      <items>
        <FXCollections fx:factory="observableArrayList">
          <String fx:value="Item 1" />
          <String fx:value="Item 2" />
          <String fx:value="Item 3" />
        </FXCollections>
      </items>
      <stylesheets>
        <URL value="@../styles/DarkTheme.css" />
      </stylesheets>
    </ComboBox>
    <Button id="btnButtonApplye" fx:id="btnButtonApply" layoutX="361.0" layoutY="245.0" mnemonicParsing="false" text="Apply">
      <stylesheets>
        <URL value="@../styles/DarkTheme.css" />
      </stylesheets>
    </Button>
    <Separator layoutX="82.0" layoutY="59.0" prefWidth="304.0" />
    <Label layoutX="194.0" layoutY="25.0" styleClass="label-title" text="BUTTON" textOverrun="ELLIPSIS">
      <stylesheets>
        <URL value="@../styles/DarkTheme.css" />
      </stylesheets>
    </Label>
  </children>
  <effect>
    <DropShadow blurType="GAUSSIAN" color="#ffb800" />
  </effect>
// Chamada do codigo CSS de estilo da pagina
  <stylesheets>
    <URL value="@../styles/DarkTheme.css" />
  </stylesheets>
</AnchorPane>

Repita o mesmo processo para a criação dos outros formulários que deseja criar.

Estilizando a Aplicação

Todo o estilo da aplicação é feita por arquivos de extensão css, que é responsável por colocar cores, formas nos componentes e páginas, alinhamento e tudo que envolve a parte visual do projeto.

background {
    -fx-background-color: #1d1d1d;
}
.label {
    -fx-font-size: 15pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: white;
  
}
.labelList {
    -fx-font-size: 11pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: white;
  
}
.listview{
    -fx-background-radius:50px;
}
.label-title {
    -fx-font-size: 18pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: #ffcc00;
  
}
.button {
    -fx-padding: 5 22 5 22;   
    -fx-border-color: #e2e2e2;
    -fx-border-width: 2;
    -fx-background-radius: 0;
    -fx-background-color: #1d1d1d;
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-text-fill: #d8d8d8;
    -fx-background-insets: 0 0 0 0, 0, 1, 2;
}
.text-field {
    -fx-font-size: 12pt;
    -fx-font-family: "Segoe UI Semibold";
}



.button:hover {
    -fx-background-color: #3a3a3a;
}

.button:pressed, .button:default:hover:pressed {
  -fx-background-color: white;
  -fx-text-fill: #1d1d1d;
}

.button:focused {
    -fx-border-color: white, white;
    -fx-border-width: 1, 1;
    -fx-border-style: solid segments(1, 1);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.button:disabled, .button:default:disabled {
    -fx-opacity: 0.4;
    -fx-background-color: #1d1d1d;
    -fx-text-fill: white;
}

.button:default {
    -fx-background-color: -fx-focus-color;
    -fx-text-fill: #ffffff;
}

.button:default:hover {
    -fx-background-color: derive(-fx-focus-color,30%);
}

Controlando a aplicação

No javaFX os formulários são controlados pelas classes java do tipo controller, essas classes servem para fazer a instalação de todos os componentes e métodos implementados na aplicação.

//Implementando bibliotecas java
package com.project_tc.controller;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
import java.util.ResourceBundle;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

/**
 * FXML Controller class
 *
 * @author Julia Fideles
 */
// Criação da classe de controle para o formulário "Button"

public class ButtonController implements Initializable {

//Implementação de todos os componentes visuais usados nesta página.
    @FXML
    public Label lblTextButton;
    @FXML
    public TextField txtTextButton;
    @FXML
    public Label lblColorButton;
    @FXML
    public ComboBox<String> cbnSizeButton;  
   @FXML
    public ComboBox<String> cbnColorButton;
    @FXML
    public Label lblSizeButton;
   
//Criação de array do tipo lista para armazenar os dados que serão colocados dentro do componente "Combo Box".

     @FXML
     public List <String> ComboBoxSize = new ArrayList<>();
     public List <String> ComboBoxColor = new ArrayList<>();

//Criação de uma Lista do tipo "ObservableList" que permite que os campos de uma lista fiquem visíveis para um componente como por exemplo o "Combo Box".

    public ObservableList<String> obsComboBoxSize;
     public ObservableList<String> obsComboBoxColor;
    /**
     * Initializes the controller class.
     */
    @Override
    public void initialize(URL url, ResourceBundle rb) {

//Chamando o método criado para implementar dados dentro de um combobox.
        loadComboBox();
    }    
   
//Criando um método para adicionar dados em um combobox.
     public void loadComboBox() {

//Adicionando dados no arraylist do tipo string denominado "ComboBoxSize".
        ComboBoxSize.add("1");
        ComboBoxSize.add("2");
        ComboBoxSize.add("3");
        ComboBoxSize.add("4");
        ComboBoxSize.add("5");
        ComboBoxSize.add("7");
        ComboBoxSize.add("8");
        ComboBoxSize.add("10");
        ComboBoxSize.add("12");
        ComboBoxSize.add("14");
        ComboBoxSize.add("16");
        ComboBoxSize.add("18");
        ComboBoxSize.add("20");
        
//Adicionando os dados do arraylist "ComboBoxSize" em um ObservableList denominado "obsComboBoxSize".
        obsComboBoxSize = FXCollections.observableArrayList(ComboBoxSize);

//Adicionando os dados do "obsComboBoxSize" em do combo box denominado "cbnSizeButton".
        cbnSizeButton.setItems(obsComboBoxSize);
      
/*Dessa forma podemos colocar os valores dos campos do combobox dentro de um arraylist do tipo string e torná-los visíveis atrás de um ObservableList para assim o componente combobox poder adicionar cada nó da lista dentro dos campos disponíveis. O campo 1 do combobox recebe o nó 1 da lista e assim sucessivamente.*/
//Repetindo o mesmo processo para o combobox "ComboBoxColor"
        ComboBoxColor.add("Blue");
        ComboBoxColor.add("Black");
        ComboBoxColor.add("White");
        ComboBoxColor.add("Red");
        ComboBoxColor.add("Purple");
        ComboBoxColor.add("Yellow");
        ComboBoxColor.add("Grey");
        ComboBoxColor.add("Orange");
        ComboBoxColor.add("Brown");
        ComboBoxColor.add("Pink");
        ComboBoxColor.add("Green");
        obsComboBoxColor = FXCollections.observableArrayList(ComboBoxColor);
        cbnColorButton.setItems(obsComboBoxColor);
       }
}

Executando a Aplicação

A página principal do projeto é responsável por iniciar a execução da aplicação.

//Implementação das bibliotecas java usadas nesta classe
package com.project_tc.model;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.stage.Stage;

/**
 *
 * @author Julia Fideles
 */
//Criação da classe model "MainApp"
public class MainApp extends Application {
    
    @Override
    public void start(Stage stage) throws Exception {

//Criação do form MainApp 
        Parent mainAppForm = FXMLLoader.load(getClass().getResource("/com/project_tc/FXML/MainApp.fxml"));
 Scene scene = new Scene(mainAppForm);
        stage.setTitle("Virtual Scene");
        stage.setScene(scene);
        stage.show();

//Setando um ícone da aplicação 
        Image icon = new Image(getClass().getResourceAsStream("/com/project_tc/Icons/315090_file_java_icon.png"));
        stage.getIcons().add(icon);
               
    }

    public static void main(String[] args) {
        launch(args);
    }
    
}

Telas

Abaixo segue o resultado de algumas telas prontas.

Conclusão

Ao fim deste artigo pode-se concluir que o desenvolvimento de aplicações com JavaFX não necessitam de maiores codificações, sua construção é dividida em várias partes e extensões diferentes. Em uma das suas maiores vantagens tem-se o Scene Builder, que é uma é uma ferramenta de layout visual que permite aos usuários criar interfaces de aplicativos JavaFX rapidamente, sem codificação. Em desvantagens, pode-se colocar em alta necessidade de criação de diversas variáveis para preenchimento de seus componentes, fazendo com que o código fique mais extenso e a aplicação mais pesada diminuindo sua otimização na execução.