Creating a Basic App

Ouvrir dans ChatGPT

Dans Project Setup, vous avez généré un projet webforJ. Il est maintenant temps de créer la classe principale pour le projet et d'ajouter une interface interactive en utilisant les composants webforJ. Dans cette étape, vous apprendrez à propos de :

Le point d'entrée pour les applications utilisant webforJ et Spring Boot
Les composants webforJ et les éléments HTML
L'utilisation de CSS pour styliser les composants

Compléter cette étape crée une version de 1-creating-a-basic-app.

Exécution de l'application

Au fur et à mesure que vous développez votre application, vous pouvez utiliser 1-creating-a-basic-app comme référence. Pour voir l'application en action :

Naviguez vers le répertoire de niveau supérieur contenant le fichier pom.xml, c'est 1-creating-a-basic-app si vous suivez la version sur GitHub.
Utilisez la commande Maven suivante pour exécuter l'application Spring Boot localement :
```
mvn
```

L'exécution de l'application ouvre automatiquement un nouveau navigateur à http://localhost:8080.

Le point d'entrée

Chaque application webforJ contient une seule classe qui étend App. Pour ce tutoriel, et d'autres projets webforJ publiés, elle est communément appelée Application. Cette classe se trouve à l'intérieur d'un package nommé d'après le groupId que vous avez utilisé dans Project Setup :

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

À l'intérieur de la classe Application, la méthode SpringApplication.run() utilise les configurations pour lancer l'application. Les diverses annotations concernent les configurations de l'application.

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

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

Annotations

L'@SpringBootApplication est une annotation centrale dans Spring Boot. Vous placez cette annotation sur la classe principale pour marquer le point de départ de votre application.

@StyleSheet, @AppTheme, et @AppProfile ne sont que quelques-unes des nombreuses annotations webforJ disponibles lorsque vous souhaitez définir explicitement des configurations.

@StyleSheet intègre un fichier CSS dans la page web. Des détails supplémentaires sur la façon d'interagir avec un fichier CSS spécifique peuvent être trouvés plus tard dans Styling with CSS.
@AppTheme gère le thème visuel de l'application. S'il est défini sur system, l'application adopte automatiquement le thème préféré de l'utilisateur : light, dark, ou dark-pure. Pour des informations sur la création de thèmes personnalisés ou le remplacement des thèmes par défaut, reportez-vous à l'article sur les Thèmes.
@AppProfile aide à configurer la façon dont l'application se présente à l'utilisateur en tant qu'application installable. Au minimum, cette annotation nécessite un name pour le nom complet de l'application et un shortName à utiliser lorsque l'espace est limité. Le shortName ne doit pas dépasser 12 caractères.

Création d'une interface utilisateur

Pour créer votre interface utilisateur, vous devez ajouter des HTML element components et des webforJ components. Pour l'instant, vous n'avez qu'une application à page unique, donc vous ajouterez des composants directement dans la classe Application. Pour ce faire, substituez la méthode App.run() et créez un Frame pour ajouter des composants.

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

  // Créez des composants UI et ajoutez-les au cadre

}

Utilisation des éléments HTML

Vous pouvez ajouter des éléments HTML standard à votre application avec des HTML element components. Créez une nouvelle instance du composant, puis utilisez la méthode add() pour l'ajouter au Frame :

// Créer le conteneur pour les éléments UI
Frame mainFrame = new Frame();

// Créer le composant HTML
Paragraph tutorial = new Paragraph("Application Tutoriel!");

// Ajouter le composant au conteneur
mainFrame.add(tutorial);

Utilisation des composants webforJ

Bien que les éléments HTML soient utiles pour la structure, la sémantique, et les besoins UI légers, les webforJ components offrent un comportement plus complexe et dynamique.

Le code ci-dessous ajoute un Button, change son apparence avec la méthode setTheme(), et ajoute un écouteur d'événements pour créer un composant Message Dialog lorsque le bouton est cliqué. La plupart des méthodes de composants webforJ qui modifient un composant retournent le composant lui-même, vous pouvez donc chaîner plusieurs méthodes pour un code plus compact.

// Créer le conteneur pour les éléments UI
Frame mainFrame = new Frame();

// Créer le composant webforJ
Button btn = new Button("Info");

// Modifier le composant webforJ, et ajouter un écouteur d'événements
btn.setTheme(ButtonTheme.PRIMARY)
  .addClickListener(e -> OptionDialog.showMessageDialog("C'est un tutoriel !", "Info"));

// Ajouter le composant au conteneur
mainFrame.add(btn);

Stylisation avec CSS

La plupart des composants webforJ ont des méthodes intégrées pour apporter des modifications de style courantes, telles que la dimension et le thème.

//Définir la largeur du Frame en utilisant un mot-clé CSS
mainFrame.setWidth("fit-content");

//Définir la largeur maximale du bouton en pixels
btn.setMaxWidth(200);

//Définir le thème du bouton sur PRIMARY
btn.setTheme(ButtonTheme.PRIMARY);

En plus de ces méthodes, vous pouvez styliser votre application à l'aide de CSS. La section Stylisation de la page de documentation de tout composant contient des détails spécifiques sur les propriétés CSS pertinentes.

webforJ est également livré avec un ensemble de variables CSS conçues appelées tokens DWC. Consultez la documentation sur Styling pour des informations détaillées sur la façon de styliser les composants webforJ et comment utiliser les tokens.

Référencer un fichier CSS

Il est préférable d'avoir un fichier CSS séparé pour garder tout organisé et maintenable. Créez un fichier nommé card.css dans src/main/resources/static/css, avec la définition de classe CSS suivante :

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);
}

Ensuite, référencez le fichier dans Application.java en utilisant l'annotation @StyleSheet avec le nom du fichier CSS. Pour cette étape, c'est @StyleSheet("ws://css/card.css").

Protocoles de serveur web

Ce tutoriel utilise le protocole de serveur web pour référencer le fichier CSS. Pour en savoir plus sur son fonctionnement, consultez Gestion des Ressources.

Ajouter des classes CSS aux composants

Vous pouvez ajouter ou supprimer dynamiquement des noms de classes aux composants à l'aide des méthodes addClassName() et removeClassName(). Pour ce tutoriel, une seule classe CSS est utilisée :

mainFrame.addClassName("card");

Application `Application` complétée

Votre classe Application devrait maintenant ressembler à ceci :

Application.java
@SpringBootApplication
@StyleSheet("ws://css/card.css")
@AppTheme("system")
@AppProfile(name = "Application Client", shortName = "ClientApp")
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("Application Tutoriel!");
    Button btn = new Button("Info");

    btn.setTheme(ButtonTheme.PRIMARY)
        .setMaxWidth(200)
        .addClickListener(e -> OptionDialog.showMessageDialog("C'est un tutoriel !", "Info"));

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

}

Pages multiples

Pour une application plus complexe, vous pouvez diviser l'interface utilisateur en plusieurs pages pour une meilleure organisation. Ce concept est traité plus tard dans ce tutoriel dans Routing and Composites.

Prochaine étape

Après avoir créé une application fonctionnelle avec une interface utilisateur de base, la prochaine étape consiste à ajouter un modèle de données et à afficher les résultats dans un composant Table dans Working with Data.

Exécution de l'application​

Le point d'entrée​

Annotations​

Création d'une interface utilisateur​

Utilisation des éléments HTML​

Utilisation des composants webforJ​

Stylisation avec CSS​

Référencer un fichier CSS​

Ajouter des classes CSS aux composants​

Application Application complétée​

Prochaine étape​