Interfaces de usuario gráficas (JavaFX) en Kotlin | Operating systems, scripting, PowerShell and security

Contenidos

Introducción a JavaFX
Conceptos clave
Ejemplos
- Ejemplo 1: Crear una ventana
- Ejemplo 2: Agregar un botón
Componentes

Introducción a JavaFX

JavaFX es un conjunto de bibliotecas y herramientas gráficas enriquecidas para crear aplicaciones de usuario interactivas en Java. En Kotlin, también podemos aprovechar JavaFX para diseñar interfaces de usuario modernas y atractivas.

Conceptos clave

Antes de sumergirnos en ejemplos prácticos, es importante comprender algunos conceptos clave relacionados con JavaFX en Kotlin.

Escena

En JavaFX, una escena es un contenedor de nivel superior que contiene todos los elementos de la interfaz de usuario. Las aplicaciones JavaFX pueden tener múltiples escenas que representan diferentes pantallas o vistas.

Controles

Los controles son elementos de la interfaz de usuario que permiten a los usuarios interactuar con la aplicación. JavaFX proporciona una variedad de controles, como botones, etiquetas, campos de texto y más.

Eventos

Los eventos son interacciones del usuario con la GUI, como hacer clic en un botón o ingresar datos en un campo de texto. JavaFX maneja eventos y permite que los controles respondan a ellos mediante controladores de eventos.

Ejemplos

A continuación, presentaremos ejemplos de cómo crear controles y diseñar una GUI básica en Kotlin utilizando JavaFX.

Ejemplo 1: Crear una ventana

import javafx.application.Application
import javafx.scene.Scene
import javafx.scene.layout.StackPane
import javafx.stage.Stage

class MiPrimeraApp : Application() {
    override fun start(primaryStage: Stage) {
        primaryStage.title = "Mi Primera Ventana"
        val root = StackPane()
        val scene = Scene(root, 400.0, 300.0)
        primaryStage.scene = scene
        primaryStage.show()
    }
}

fun main() {
    launch(MiPrimeraApp::class.java)
}

import javafx.application.Application

import javafx.scene.Scene

import javafx.scene.layout.StackPane

import javafx.stage.Stage

class MiPrimeraApp : Application() {

override fun start(primaryStage: Stage) {

primaryStage.title = "Mi Primera Ventana"

val root = StackPane()

val scene = Scene(root, 400.0, 300.0)

primaryStage.scene = scene

primaryStage.show()

}

fun main() {

launch(MiPrimeraApp::class.java)

}

Ejemplo 2: Agregar un botón

import javafx.application.Application
import javafx.application.Application.launch
import javafx.scene.Scene
import javafx.scene.control.Button
import javafx.scene.layout.StackPane
import javafx.stage.Stage

class EjemploBoton : Application() {
    override fun start(primaryStage: Stage) {
        primaryStage.title = "Ejemplo de Botón"
        val root = StackPane()
        val scene = Scene(root, 400.0, 300.0)
        primaryStage.scene = scene
        val button = Button("Haz Clic")
        root.children.add(button)
        primaryStage.show()

        // Agregar un controlador de eventos al botón
        button.setOnAction {
            println("¡Hiciste clic en el botón!")
        }
    }
}

fun main() {
    launch(EjemploBoton::class.java)
}

import javafx.application.Application

import javafx.application.Application.launch

import javafx.scene.Scene

import javafx.scene.control.Button

import javafx.scene.layout.StackPane

import javafx.stage.Stage

class EjemploBoton : Application() {

override fun start(primaryStage: Stage) {

primaryStage.title = "Ejemplo de Botón"

val root = StackPane()

val scene = Scene(root, 400.0, 300.0)

primaryStage.scene = scene

val button = Button("Haz Clic")

root.children.add(button)

primaryStage.show()

// Agregar un controlador de eventos al botón

button.setOnAction {

println("¡Hiciste clic en el botón!")

}

fun main() {

launch(EjemploBoton::class.java)

}

Estos ejemplos demuestran cómo crear una ventana y agregar un botón a la interfaz de usuario utilizando JavaFX en Kotlin. JavaFX ofrece una amplia gama de controles y funcionalidades para diseñar interfaces de usuario modernas y dinámicas.

Componentes

Scene: Representa el contenedor de nivel superior que contiene todos los elementos de la interfaz de usuario

import javafx.application.Application
import javafx.scene.Scene
import javafx.scene.layout.StackPane
import javafx.stage.Stage

class SceneExample : Application() {
    override fun start(primaryStage: Stage) {
        val root = StackPane()
        val scene = Scene(root, 400.0, 300.0)
        primaryStage.title = "Ejemplo de Scene"
        primaryStage.scene = scene
        primaryStage.show()
    }

    companion object {
        @JvmStatic
        fun main(args: Array<String>) {
            launch(SceneExample::class.java)
        }
    }
}

import javafx.application.Application

import javafx.scene.Scene

import javafx.scene.layout.StackPane

import javafx.stage.Stage

class SceneExample : Application() {

override fun start(primaryStage: Stage) {

val root = StackPane()

val scene = Scene(root, 400.0, 300.0)

primaryStage.title = "Ejemplo de Scene"

primaryStage.scene = scene

primaryStage.show()

}

companion object {

@JvmStatic

fun main(args: Array<String>) {

launch(SceneExample::class.java)

}

Stage: Es la ventana principal de la aplicación JavaFX. Puede contener una o varias escenas

import javafx.application.Application
import javafx.scene.Scene
import javafx.scene.control.Label
import javafx.stage.Stage

class StageExample : Application() {
    override fun start(primaryStage: Stage) {
        val label = Label("Ventana Principal")
        val scene = Scene(label, 300.0, 200.0)
        primaryStage.title = "Ejemplo de Stage"
        primaryStage.scene = scene
        primaryStage.show()
    }

    companion object {
        @JvmStatic
        fun main(args: Array<String>) {
            launch(StageExample::class.java)
        }
    }
}

import javafx.application.Application

import javafx.scene.Scene

import javafx.scene.control.Label

import javafx.stage.Stage

class StageExample : Application() {

override fun start(primaryStage: Stage) {

val label = Label("Ventana Principal")

val scene = Scene(label, 300.0, 200.0)

primaryStage.title = "Ejemplo de Stage"

primaryStage.scene = scene

primaryStage.show()

}

companion object {

@JvmStatic

fun main(args: Array<String>) {

launch(StageExample::class.java)

}

Button: Un botón que los usuarios pueden hacer clic

import javafx.application.Application
import javafx.scene.Scene
import javafx.scene.control.Button
import javafx.scene.layout.StackPane
import javafx.stage.Stage

class ButtonExample : Application() {
    override fun start(primaryStage: Stage) {
        val button = Button("Haz clic")
        button.setOnAction { println("Botón clicado") }

        val root = StackPane()
        root.children.add(button)

        val scene = Scene(root, 300.0, 200.0)
        primaryStage.title = "Ejemplo de Button"
        primaryStage.scene = scene
        primaryStage.show()
    }

    companion object {
        @JvmStatic
        fun main(args: Array<String>) {
            launch(ButtonExample::class.java)
        }
    }
}

import javafx.application.Application

import javafx.scene.Scene

import javafx.scene.control.Button

import javafx.scene.layout.StackPane

import javafx.stage.Stage

class ButtonExample : Application() {

override fun start(primaryStage: Stage) {

val button = Button("Haz clic")

button.setOnAction { println("Botón clicado") }

val root = StackPane()

root.children.add(button)

val scene = Scene(root, 300.0, 200.0)

primaryStage.title = "Ejemplo de Button"

primaryStage.scene = scene

primaryStage.show()

}

companion object {

@JvmStatic

fun main(args: Array<String>) {

launch(ButtonExample::class.java)

}

Label: Etiqueta de texto utilizada para mostrar información

import javafx.application.Application
import javafx.scene.Scene
import javafx.scene.control.Label
import javafx.stage.Stage

class LabelExample : Application() {
    override fun start(primaryStage: Stage) {
        val label = Label("Etiqueta de texto")

        val scene = Scene(label, 300.0, 200.0)
        primaryStage.title = "Ejemplo de Label"
        primaryStage.scene = scene
        primaryStage.show()
    }

    companion object {
        @JvmStatic
        fun main(args: Array<String>) {
            launch(LabelExample::class.java)
        }
    }
}

import javafx.application.Application

import javafx.scene.Scene

import javafx.scene.control.Label

import javafx.stage.Stage

class LabelExample : Application() {

override fun start(primaryStage: Stage) {

val label = Label("Etiqueta de texto")

val scene = Scene(label, 300.0, 200.0)

primaryStage.title = "Ejemplo de Label"

primaryStage.scene = scene

primaryStage.show()

}

companion object {

@JvmStatic

fun main(args: Array<String>) {

launch(LabelExample::class.java)

}

TextField: Un campo de texto que permite a los usuarios ingresar texto

TextArea: Un área de texto de varias líneas para ingresar texto extenso

CheckBox: Una casilla de verificación que permite a los usuarios seleccionar una o varias opciones

RadioButton: Un botón de radio que permite a los usuarios seleccionar una opción de un conjunto

ToggleButton: Un botón que puede alternar entre dos estados

ChoiceBox: Una lista desplegable que permite a los usuarios seleccionar una opción de una lista

ComboBox: Similar a ChoiceBox, pero permite a los usuarios escribir o seleccionar opciones de una lista desplegable

ListView: Muestra una lista de elementos que los usuarios pueden ver y seleccionar

TableView: Una tabla que muestra datos en filas y columnas

MenuBar: Un menú en la parte superior de la ventana que contiene elementos de menú

Menu: Un elemento de menú dentro de un MenuBar que puede contener submenús y opciones

ContextMenu: Un menú contextual que aparece cuando se hace clic derecho en un elemento

ToolBar: Una barra de herramientas que contiene botones u otros controles

Slider: Un control deslizante que permite a los usuarios seleccionar un valor en un rango

ProgressBar: Muestra el progreso de una tarea en forma de barra

ProgressIndicator: Muestra una animación de progreso circular

Accordion: Un contenedor que muestra una serie de paneles colapsables

TabPane: Un contenedor de pestañas que muestra múltiples vistas en pestañas

WebView: Muestra contenido web en una aplicación JavaFX

Canvas: Permite dibujar gráficos personalizados

ImageView: Muestra imágenes

ScrollPane: Proporciona barras de desplazamiento para contenido desbordante

Dialog: Muestra ventanas emergentes modales para interactuar con el usuario

FileChooser: Permite a los usuarios seleccionar archivos y directorios

ColorPicker: Permite a los usuarios seleccionar colores

DatePicker: Permite a los usuarios seleccionar fechas

TreeView: Muestra datos en forma de árbol

Publicado el día 1 de noviembre de 2022

CATEGORÍAS

Gráficos, Kotlin

Interfaces de usuario gráficas (JavaFX) en Kotlin (Kotlin, Gráficos)

Introducción a JavaFX

Conceptos clave

Escena

Controles

Eventos

Ejemplos

Ejemplo 1: Crear una ventana

Ejemplo 2: Agregar un botón

Componentes

Scene: Representa el contenedor de nivel superior que contiene todos los elementos de la interfaz de usuario

Stage: Es la ventana principal de la aplicación JavaFX. Puede contener una o varias escenas

Button: Un botón que los usuarios pueden hacer clic

Label: Etiqueta de texto utilizada para mostrar información

CATEGORÍAS

LO ÚLTIMO

VÍDEOS

NAVEGACIÓN