App Basics

Ouvrir dans ChatGPT

Une fois que webforJ et ses dépendances sont configurés dans votre projet, vous êtes prêt à créer la structure de l'application. Cet article passera en revue les éléments clés d'une application webforJ basique, en se concentrant spécifiquement sur les classes Application et HomeView, qui sont les classes fondamentales du projet de démarrage webforj-archetype-hello-world.

Classe principale de l'application : Application.java

La classe Application sert de point d'entrée pour votre application webforJ, configurant les paramètres et les routes essentiels. Pour commencer, remarquez la déclaration de la classe et les annotations.

Cette classe étend la classe de base App de webforJ, la rendant reconnaissable comme une application webforJ. Plusieurs annotations configurent le thème, le titre et le routage de l'application.

@Routify(packages = "com.samples.views")
@AppTitle("webforJ Hello World")
@StyleSheet("ws://app.css")
public class Application extends App {
}

• @Routify : Spécifie que webforJ doit scanner le package com.samples.views à la recherche de composants de route.
• @AppTitle : Définit le titre affiché sur l'onglet du navigateur de l'application.
• @StyleSheet : Lien vers un fichier CSS externe, app.css, permettant le style personnalisé de l'application.

La classe Application ne contient aucune méthode supplémentaire car les configurations sont définies par des annotations, et webforJ gère l'initialisation de l'application.

Avec Application.java configuré, l'application est maintenant paramétrée avec un titre et des routes pointant vers le package des vues. Ensuite, un aperçu de la classe HomeView donne un aperçu de ce qui est affiché lorsque l'application est exécutée.

Découverte d'une App

Une seule App est imposée dans webforJ, ce qui déplace toutes les responsabilités de gestion des erreurs vers le côté Java et donne aux développeurs un contrôle total sur la gestion des erreurs.

Au cours du processus de démarrage de webforJ, toutes les classes qui étendent com.webforj.App sont scannées. Si plusieurs applications sont trouvées, le système recherche l'annotation com.webforj.annotation.AppEntry. Si des classes découvertes sont annotées avec @AppEntry, la première rencontrée est considérée comme le point d'entrée.

• Si une classe est annotée avec @AppEntry, cette classe est sélectionnée comme point d'entrée.
• Si plusieurs classes sont annotées avec @AppEntry, une exception est levée, listant toutes les classes découvertes.
• Si aucune classe n'est annotée et qu'une seule sous-classe de App est trouvée, cette classe est sélectionnée comme point d'entrée.
• Si aucune classe n'est annotée et que plusieurs sous-classes de App sont trouvées, une exception est levée, détaillant chaque sous-classe.

Gestion des erreurs

Pour plus d'informations sur la façon dont les erreurs sont gérées dans webforJ, consultez cet article.

Classe principale de la vue : HomeView.java

La classe HomeView définit un composant de vue simple qui sert de page d'accueil pour l'application. Elle affiche un champ et un bouton pour accueillir le nom saisi par l'utilisateur.

Déclaration de la classe et annotations

HomeView étend Composite<FlexLayout>, ce qui lui permet d'agir comme un composant réutilisable composé d'un composant FlexLayout. L'annotation @Route("/") fait de cela la route racine de l'application.

@Route("/")
public class HelloWorldView extends Composite<FlexLayout> {

  private final FlexLayout self = getBoundComponent();
  private TextField hello = new TextField("Quel est votre nom ?");
  private Button btn = new Button("Dites Bonjour");

  public HelloWorldView(){
    self.setDirection(FlexDirection.COLUMN);
    self.setMaxWidth(300);
    self.setStyle("margin", "1em auto");

    btn.setTheme(ButtonTheme.PRIMARY)
        .addClickListener(e ->
          Toast.show("Bienvenue dans le Starter webforJ " + hello.getValue() + "!", Theme.GRAY));

    self.add(hello, btn);
  }
}

Initialisation des composants

À l'intérieur de la classe, plusieurs éléments d'interface utilisateur sont initialisés et déclarés :

private final FlexLayout self = getBoundComponent();
private TextField hello = new TextField("Quel est votre nom ?");
private Button btn = new Button("Dites Bonjour");

• self : Le composant principal de mise en page utilisant FlexLayout, configuré comme un conteneur pour les éléments. Cet élément utilise la méthode getBoundComponent() pour stocker le FlexLayout principal que la classe contient.
• hello : Un TextField étiqueté Quel est votre nom ? pour permettre aux utilisateurs de saisir leur nom.
• btn : Un Button de style principal étiqueté Dites Bonjour.

Configuration de la mise en page

La mise en page (self) est configurée avec quelques propriétés de style clés :

• FlexDirection.COLUMN empile les éléments verticalement.
• setMaxWidth(300) limite la largeur à 300 pixels pour une mise en page compacte.
• setStyle("margin", "1em auto") centre la mise en page avec une marge autour.

Ajout de composants à la mise en page

Enfin, le champ de texte hello et le bouton btn sont ajoutés au conteneur FlexLayout en appelant self.add(hello, btn). Cet agencement définit la structure de la vue, rendant le formulaire à la fois interactif et visuellement centré.

Styliser l'application

Le fichier styles.css fournit un style personnalisé pour votre application webforJ. Ce fichier CSS est référencé dans la classe Application à l'aide de l'annotation @StyleSheet, ce qui permet à l'application d'appliquer des styles aux composants.

Ce fichier est situé dans le répertoire resources/static du projet, et peut être référencé en utilisant l'URL du serveur web ws://app.css.