Hola Mundo con JavaFX en Netbeans – Primer Programa – Tutorial

En este Articulo veremos como crear nuestro Hola Mundo con JavaFX en Netbeans y realizaremos nuestro primer programa en esta plataforma, pero para empezar veremos que es JavaFX. JavaFX es una plataforma para la creacion de aplicaciones Rich Internet Applications(RIAs) que puede correr en gran variedad de dispositivos, te permite crear aplicaciones de escritorio, para celulares, la web, para la television, consola de videojuegos, reproductores Blu-ray, entre otras. JavaFX tiene muchas ventajas como:

• Permite que los usuario puedan ver la aplicacion en el navegador o si lo prefieren puedan arrastrarla a su escritorio.
• Permite una mejor separacion entre el trabajo de desarrollo de interfaz grafica y proceso interno.
• Permite el uso de todas las librerias java en una aplicacion FX.
• Permite que los desarrolladores puedan usar graficos vectoriales, animaciones y una interactividad con el usuario muy compleja.

Requerimientos:

• Netbeans con JavaFX
• JavaFX SDK (en caso de que ya tengas netbeans sin JavaFX)

Desarrollo

Vamos a Netbeans y creamos un nuevo proyecto J en File -> New Project -> Categories JavaFX -> Projects JavafX Application

Escribimos el nombre y terminamos, yo lo llame HolaMundoConJavaFX …
Ahora se a creado un programa basico de javaFX que si lo ejecutamos veremos esto

Ahora nosotros vamos a hacer algo mas vistoso y veremos como crear un archivo CSS para modificar mas facil la interfaz grafica…
Borramos el metodo start y escribimos lo siguiente:

@Override
public void start(Stage primaryStage) {
	primaryStage.setTitle("JavaFX Hola Mundo en Netbeans");
	GridPane grid = new GridPane();
	grid.setAlignment(Pos.CENTER);
	grid.setHgap(10);
	grid.setVgap(10);
	grid.setPadding(new Insets(25, 25, 25, 25));

	Text scenetitle = new Text("Bienvenido");
	scenetitle.setId("welcome-text");
	grid.add(scenetitle, 0, 0, 2, 1);

	Label userName = new Label("Username:");
	grid.add(userName, 0, 1);

	TextField userTextField = new TextField();
	grid.add(userTextField, 1, 1);

	Label pw = new Label("Password:");
	grid.add(pw, 0, 2);

	PasswordField pwBox = new PasswordField();
	grid.add(pwBox, 1, 2);

	Button btn = new Button("Login");
	HBox hbBtn = new HBox(10);
	hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
	hbBtn.getChildren().add(btn);
	grid.add(hbBtn, 1, 4);

	final Text actiontarget = new Text();
	actiontarget.setId("actiontarget");
	grid.add(actiontarget, 1, 6);

	btn.setOnAction(new EventHandler() {
		@Override
		public void handle(ActionEvent e) {
			actiontarget.setText("Boton Login Presionado");
		}
	});

	Scene scene = new Scene(grid, 300, 275);
	primaryStage.setScene(scene);
	primaryStage.show();
}

y veremos la siguiente interfaz al ejecutar nuestro proyecto:

Ahora vamos a agregar estilo a nuestra interfaz para lo cual necesitamos primero agregar la siguiente imagen a la carpeta src/holamundoconjavafx/

quedara asi:

el archivo style.css que ves ahi lo agregamos de la siguiente manera, boton derecho sobre nuestro paquete -> New -> Other -> Categories Other -> File Types Cascading Style Sheet
Este archivo style.css contendra el estilo de nuestra interfaz, y contendra lo siguiente:

.root {
    -fx-background-image: url('background.jpg');
}

.label {
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

#welcome-text {
   -fx-font-size: 32px;
   -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
#actiontarget {
  -fx-fill: FIREBRICK;
  -fx-font-weight: bold;
  -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );  
}

.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}
.button:hover {
    -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}

Ahora solo falta decirle a nuestro programa que utilize este archivo para darle estilo a nuestra interfaz, buscamos las siguientes lineas en nuestro metodo start

primaryStage.setScene(scene);
primaryStage.show();

y agregamos la linea que nos permitira indicarle que utilize nuestro hoja de estilos

primaryStage.setScene(scene);
scene.getStylesheets().add(HolaMundoConJavaFX.class.getResource("style.css").toExternalForm());
primaryStage.show();

Ahora al Ejecutar veremos el resultado:

Resultado