Saltar al contenido principal

El editor visual de webforJ

Mira la app que creó tu código Java. Cámbialo mientras se ejecuta.

craftforJ se ejecuta dentro de tu aplicación en modo de desarrollo. Muestra el árbol de componentes creado por tu código, te permite cambiar sus propiedades en tiempo real y guarda los cambios que conserves en el archivo Java donde se crearon.

Cuatro atajos cubren el bucle

  • Abrir o cerrarAltShiftD
  • Selecciona un componenteAltShiftC
  • Revisar cambiosCmd/CtrlS
  • Deshacer un cambioCmd/CtrlZ
craftforJ abierto sobre una aplicación en ejecución, con AppNav seleccionado en el árbol de componentes y sus propiedades en la barra lateral

Cómo funciona

Lee tu app a través del propio webforJ

Por eso describe la aplicación en los términos en que la escribiste. El árbol enumera tus componentes, las propiedades son las que declaran tus componentes y las rutas son las que registró tu router, con las reglas de acceso que les anotaste.

  1. 01

    Abrir

    Haz clic en el botón de activación superpuesto en tu aplicación o pulsa Alt+Mayús+D desde cualquier lugar de ella.

  2. 02

    Seleccionar

    Pulsa Alt+Mayús+C, pasa el cursor sobre un componente y haz clic en él. El árbol lo selecciona y la barra lateral muestra sus propiedades.

  3. 03

    Cambiar

    Edita una propiedad. La aplicación en ejecución se actualiza al instante y tus archivos no se modifican.

  4. 04

    Mantener

    Revisa el cambio como diff y aplícalo al archivo Java que lo generó.

Recorrido por los paneles

Los paneles, sobre una app real

Vídeo
1 de 2

El árbol de componentes que creó tu Java

El Inspector muestra tus componentes, no el marcado renderizado por el navegador. Un Composite aparece como la clase que escribiste, con sus elementos secundarios en el orden en que webforJ los contiene.

  • Pulsa Alt+Mayús+C y haz clic en cualquier elemento de la página para seleccionarlo en el árbol.
  • Cambia una propiedad en la barra lateral y la aplicación en ejecución se actualiza al instante.
  • Rastrea un componente hasta la línea de Java que lo creó.

Volver al origen

Edita Java, no es una copia de eso

Toma un formulario con botones Guardar y Cancelar. Selecciona Guardar, haz clic derecho sobre él en el árbol y elige Eliminar del código fuente. Se eliminan la declaración, el tema, el listener, su lugar en la llamada add() y la importación de ButtonTheme que ya no se usa. Cancelar permanece.

Antes

ContactFormView.java
import com.webforj.component.button.Button;
import com.webforj.component.button.ButtonTheme;
import com.webforj.component.layout.flexlayout.FlexLayout;

public class ContactFormView {
public ContactFormView(FlexLayout layout) {
layout.setSpacing("1em");
Button save = new Button("Save");
save.setTheme(ButtonTheme.PRIMARY);
save.onClick(event -> {
save.setEnabled(false);
});
Button cancel = new Button("Cancel");
layout.add(save, cancel);
}
}

Después de quitar del origen

ContactFormView.java
import com.webforj.component.button.Button;
import com.webforj.component.layout.flexlayout.FlexLayout;

public class ContactFormView {
public ContactFormView(FlexLayout layout) {
layout.setSpacing("1em");
Button cancel = new Button("Cancel");
layout.add(cancel);
}
}
  • Dos ajustes, ambos obligatorios

    craftforJ necesita webforj.debug y webforj.devtools.craftforj.enabled. Ninguno de los dos hace nada por sí solo.

  • Acceso local predeterminado

    Solo un navegador del equipo donde se ejecuta la aplicación puede acceder a ella, hasta que indiques otro equipo en hosts-allowed.

  • Sin superficie HTTP adicional

    No añade ningún endpoint, servlet ni filtro. Funciona sobre la conexión que ya tiene tu aplicación.

  • Escribe solo código que compile.

    La eliminación del código fuente solo se registra si el resultado sigue compilando; los archivos nunca se eliminan.

Primeros pasos

Activar en tres pasos

craftforJ viene incluido con webforJ, así que no tienes que descargar nada por separado. Los proyectos creados con startforJ o a partir de un arquetipo de webforJ ya lo tienen habilitado. Ejecuta la aplicación y ve directamente al paso tres.

  1. 1

    Añadir la dependencia

    Añade webforj-devtools a tu proyecto si aún no está.

    pom.xml
    <dependency>
    <groupId>com.webforj</groupId>
    <artifactId>webforj-devtools</artifactId>
    <version>${webforj.version}</version>
    </dependency>
  2. 2

    Activar el modo de depuración y craftforJ

    Establece ambas propiedades en webforj.conf o en application.properties para un proyecto Spring. craftforJ solo funciona cuando ambas están habilitadas.

    webforj.debug = true
    webforj.devtools.craftforj.enabled = true
  3. 3

    Reiniciar, recargar y abrirlo.

    Abre la aplicación desde el equipo donde se ejecuta. Aparecerá un botón de activación sobre tu aplicación. Haz clic en él o pulsa AltShiftD desde cualquier lugar de la aplicación. El mismo atajo también cierra craftforJ.

    craftforJ acoplado al borde derecho de la página de la aplicación
    craftforJ flota sobre tu aplicación de forma predeterminada. Arrástralo hasta un borde para acoplarlo allí, o muévelo a una ventana o pestaña del navegador independiente para usarlo en un segundo monitor.