Creating a Basic App

Abrir en ChatGPT

En Configuración del proyecto, generaste un proyecto webforJ. Ahora es el momento de crear la clase principal para el proyecto y agregar una interfaz interactiva usando componentes de webforJ. En este paso, aprenderás sobre:

El punto de entrada para aplicaciones que usan webforJ y Spring Boot
Componentes de webforJ y elementos HTML
Uso de CSS para estilizar componentes

Completar este paso crea una versión de 1-creating-a-basic-app.

Ejecutando la aplicación

Mientras desarrollas tu aplicación, puedes usar 1-creating-a-basic-app como comparación. Para ver la aplicación en acción:

Navega al directorio de nivel superior que contiene el archivo pom.xml, que es 1-creating-a-basic-app si estás siguiendo la versión en GitHub.
Usa el siguiente comando de Maven para ejecutar la aplicación de Spring Boot localmente:
```
mvn
```

Ejecutar la aplicación abre automáticamente un nuevo navegador en http://localhost:8080.

El punto de entrada

Cada aplicación de webforJ contiene una única clase que extiende App. Para este tutorial, y otros proyectos publicados de webforJ, comúnmente se llama Application. Esta clase está dentro de un paquete que lleva el nombre del groupId que usaste en Configuración del proyecto:

1-creating-a-basic-app
│   .editorconfig
│   .gitignore
│   pom.xml
│   README.md
│
├───.vscode
├───src/main/java
│   └──com/webforj/tutorial
│       └──Application.java
└───target

Dentro de la clase Application, el método SpringApplication.run() utiliza las configuraciones para lanzar la aplicación. Las diversas anotaciones son para las configuraciones de la aplicación.

Application.java
@SpringBootApplication
@StyleSheet("ws://css/card.css")
@AppTheme("system")
@AppProfile(name = "Customer Application", shortName = "CustomerApp")
public class Application extends App {

  public static void main(String[] args) {
    SpringApplication.run(Application.class, args);
  }
}

Anotaciones

La anotación @SpringBootApplication es una anotación central en Spring Boot. Debes colocar esta anotación en la clase principal para marcarla como el punto de inicio de tu aplicación.

@StyleSheet, @AppTheme y @AppProfile son solo algunas de las muchas anotaciones de webforJ disponibles cuando deseas establecer configuraciones de manera explícita.

@StyleSheet incrusta un archivo CSS en la página web. Más detalles sobre cómo interactuar con un archivo CSS específico se encontrarán más adelante en Estilizando con CSS.
@AppTheme gestiona el tema visual de la aplicación. Si está configurado como system, la aplicación adopta automáticamente el tema preferido del usuario: light, dark o dark-pure. Para obtener información sobre cómo crear temas personalizados o anular los temas predeterminados, consulta el artículo de Temas.
@AppProfile ayuda a configurar cómo la aplicación se presenta al usuario como una aplicación instalable. Como mínimo, esta anotación necesita un name para el nombre completo de la aplicación y un shortName para usar cuando el espacio es limitado. El shortName no debe exceder los 12 caracteres.

Creando una interfaz de usuario

Para crear tu interfaz de usuario, necesitarás agregar componentes de elementos HTML y componentes de webforJ. Por ahora, solo tienes una aplicación de una sola página, así que agregarás los componentes directamente a la clase Application. Para hacer esto, sobreescribe el método App.run() y crea un Frame para agregar los componentes.

@Override
public void run() throws WebforjException {
  Frame mainFrame = new Frame();

  // Crear componentes UI y agregar al frame

}

Usando elementos HTML

Puedes agregar elementos HTML estándar a tu aplicación con componentes de elementos HTML. Crea una nueva instancia del componente, luego usa el método add() para agregarlo al Frame:

// Crear el contenedor para los elementos de la UI
Frame mainFrame = new Frame();

// Crear el componente HTML
Paragraph tutorial = new Paragraph("¡Aplicación Tutorial!");

// Agregar el componente al contenedor
mainFrame.add(tutorial);

Usando componentes de webforJ

Mientras que los elementos HTML son útiles para la estructura, la semántica y las necesidades de UI ligeras, los componentes de webforJ proporcionan un comportamiento más complejo y dinámico.

El código a continuación agrega un componente Button, cambia su apariencia con el método setTheme(), y agrega un listener de eventos para crear un componente Message Dialog cuando se hace clic en el botón. La mayoría de los métodos de componentes de webforJ que modifican un componente devuelven el componente en sí, por lo que puedes encadenar múltiples métodos para un código más compacto.

// Crear el contenedor para los elementos de la UI
Frame mainFrame = new Frame();

// Crear el componente de webforJ
Button btn = new Button("Info");

// Modificar el componente de webforJ y agregar un listener de eventos
btn.setTheme(ButtonTheme.PRIMARY)
  .addClickListener(e -> OptionDialog.showMessageDialog("¡Esto es un tutorial!", "Info"));

// Agregar el componente al contenedor
mainFrame.add(btn);

Estilizando con CSS

La mayoría de los componentes de webforJ tienen métodos incorporados para realizar cambios comunes de estilo, como tamaño y tematización.

//Establecer el ancho del Frame usando una palabra clave CSS
mainFrame.setWidth("fit-content");

//Establecer el max-width del Botón usando píxeles
btn.setMaxWidth(200);

//Establecer el tema del Botón en PRIMARY
btn.setTheme(ButtonTheme.PRIMARY);

Además de estos métodos, puedes estilizar tu aplicación usando CSS. La sección de Estilización de la página de documentación de cualquier componente tiene detalles específicos sobre las propiedades CSS relevantes.

webforJ también incluye un conjunto de variables CSS diseñadas llamadas tokens DWC. Consulta la documentación de Estilización para obtener información detallada sobre cómo estilizar componentes de webforJ y cómo usar los tokens.

Referenciando un archivo CSS

Es mejor tener un archivo CSS separado para mantener todo organizado y mantenible. Crea un archivo llamado card.css dentro de src/main/resources/static/css, con la siguiente definición de clase CSS:

card.css
.card {
  display: grid;
  gap: var(--dwc-space-l);
  padding: var(--dwc-space-l);
  margin: var(--dwc-space-l) auto;
  border: thin solid var(--dwc-color-default);
  border-radius: 16px;
  background-color: var(--dwc-surface-3);
  box-shadow: var(--dwc-shadow-xs);
}

Luego, referencia el archivo en Application.java usando la anotación @StyleSheet con el nombre del archivo CSS. Para este paso, es @StyleSheet("ws://css/card.css").

Protocolo del servidor web

Este tutorial usa el protocolo del servidor web para referenciar el archivo CSS. Para aprender más sobre cómo funciona esto, consulta Gestión de Recursos.

Agregando clases CSS a los componentes

Puedes agregar o eliminar dinámicamente nombres de clase a los componentes usando los métodos addClassName() y removeClassName(). Para este tutorial, solo se usa una clase CSS:

mainFrame.addClassName("card");

Aplicación `Application` completada

Tu clase Application ahora debería verse similar a lo siguiente:

Application.java
@SpringBootApplication
@StyleSheet("ws://css/card.css")
@AppTheme("system")
@AppProfile(name = "Customer Application", shortName = "CustomerApp")
public class Application extends App {

  public static void main(String[] args) {
    SpringApplication.run(Application.class, args);
  }

  @Override
  public void run() throws WebforjException {
    Frame mainFrame = new Frame();
    Paragraph tutorial = new Paragraph("¡Aplicación Tutorial!");
    Button btn = new Button("Info");

    btn.setTheme(ButtonTheme.PRIMARY)
        .setMaxWidth(200)
        .addClickListener(e -> OptionDialog.showMessageDialog("¡Esto es un tutorial!", "Info"));

    mainFrame.setWidth("fit-content")
        .addClassName("card")
        .add(tutorial, btn);
  }

}

Múltiples páginas

Para una aplicación más compleja, puedes dividir la UI en múltiples páginas para una mejor organización. Este concepto se cubre más adelante en este tutorial en Enrutamiento y Compuestos.

Siguiente paso

Después de crear una aplicación funcional con una interfaz de usuario básica, el siguiente paso es agregar un modelo de datos y mostrar los resultados en un componente Table en Trabajando con Datos.

Ejecutando la aplicación​

El punto de entrada​

Anotaciones​

Creando una interfaz de usuario​

Usando elementos HTML​

Usando componentes de webforJ​

Estilizando con CSS​

Referenciando un archivo CSS​

Agregando clases CSS a los componentes​

Aplicación Application completada​

Siguiente paso​