Creating a Basic App

Ouvrir dans ChatGPT

Dans Configuration du projet, 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 sur :

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

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

Exécution de l'application

Alors que vous développez votre application, vous pouvez utiliser 1-creating-a-basic-app comme comparaison. Pour voir l'application en action :

Accédez au répertoire principal 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 couramment appelée Application. Cette classe se trouve dans un paquet qui porte le nom du groupId que vous avez utilisé dans Configuration du projet :

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

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

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

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

Annotations

L'@SpringBootApplication est une annotation essentielle dans Spring Boot. Vous placez cette annotation sur la classe principale pour la marquer comme 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 informations complémentaires sur la façon d'interagir avec un fichier CSS spécifique seront abordées plus tard dans Styliser avec 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 : clair, sombre ou sombre-pur. 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 Thèmes.
@AppProfile aide à configurer comment 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 UI, vous devrez ajouter des composants d'éléments HTML et des composants webforJ. Pour l'instant, vous n'avez qu'une application à page unique, donc vous ajouterez directement des composants à la classe Application. Pour ce faire, vous devez remplacer la méthode App.run() et créer un Frame pour y ajouter des composants.

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

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

}

Utilisation des éléments HTML

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

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

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

// Ajoutez 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 des besoins UI légers, les composants webforJ offrent un comportement plus complexe et dynamique.

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

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

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

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

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

Styliser avec CSS

La plupart des composants webforJ ont des méthodes intégrées pour effectuer des changements de style courants, comme la taille 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 en utilisant CSS. La section Styliser de la page de documentation de tout composant contient des détails spécifiques sur les propriétés CSS pertinentes.

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

Référence à un fichier CSS

Il est préférable d'avoir un fichier CSS séparé pour garder tout organisé et facile à maintenir. Créez un fichier nommé card.css à l'intérieur de 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").

Protocole Webserver

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

Ajout de classes CSS aux composants

Vous pouvez ajouter ou supprimer dynamiquement des noms de classe aux composants en utilisant les méthodes addClassName() et removeClassName(). Pour ce tutoriel, il n'y a qu'une seule classe CSS 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 = "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("Application Tutoriel !");
    Button btn = new Button("Info");

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

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

}

Plusieurs pages

Pour une application plus complexe, vous pouvez diviser l'interface utilisateur en plusieurs pages pour une meilleure organisation. Ce concept est abordé plus tard dans ce tutoriel dans Routage et composites.

Étape suivante

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 Travailler avec des données.

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​

Styliser avec CSS​

Référence à un fichier CSS​

Ajout de classes CSS aux composants​

Application Application complétée​

Étape suivante​