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 va passer en revue les éléments clés d'une application webforJ de base, en se concentrant particulièrement sur les classes Application et HomeView, qui sont les classes fondamentales dans le 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 éléments essentiels et les routes. Pour commencer, notez la déclaration de la classe et les annotations.

Cette classe étend la classe principale App de webforJ, la rendant reconnaissable en tant qu'application webforJ. Diverses 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 : Lie un fichier CSS externe, app.css, permettant un style personnalisé pour l'application.

La classe Application ne contient pas de méthodes supplémentaires car les configurations sont définies via des annotations, et webforJ gère l'initialisation de l'application.

Avec Application.java configuré, l'application est désormais 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 du 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 l'une des classes découvertes est annotée 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, énumérant 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 manière 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 saluer le nom saisi par l'utilisateur.

Déclaration de la classe et annotations

HomeView étend Composite<FlexLayout>, ce qui lui permet d'agir en tant que composant réutilisable composé d'un composant FlexLayout. L'annotation @Route("/") fait de cette route la 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("Dire 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 de l'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("Dire bonjour");

• self : Le composant principal de mise en page utilisant FlexLayout, configuré comme conteneur pour les éléments. Cet élément utilise la méthode getBoundComponent() pour stocker le principal FlexLayout qu'elle contient.
• hello : Un TextField étiqueté Quel est votre nom ? pour permettre aux utilisateurs de saisir leur nom.
• btn : Un Button au style principal étiqueté Dire 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 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é.

Stylisation de 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, qui permet à l'application d'appliquer des styles aux composants dans l'application.

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.