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 parcourra les éléments clés d'une application webforJ de base, en se concentrant spécifiquement sur les classes Application et HomeView, qui sont les classes fondatrices 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 réglages essentiels et les routes. Pour commencer, remarquez la déclaration et les annotations de la classe.

Cette classe étend la classe de base App de webforJ, ce qui la rend identifiable comme une 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 paquet com.samples.views à la recherche de composants de route.
• @AppTitle : Définit le titre affiché dans l'onglet du navigateur de l'application.
• @StyleSheet : Lien vers un fichier CSS externe, app.css, permettant un style personnalisé pour 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 dotée d'un titre et de routes pointant vers le paquet 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 transfère toutes les responsabilités de gestion des erreurs côté Java et donne aux développeurs le plein contrôle sur la gestion des erreurs.

Au cours du processus de démarrage de webforJ, toutes les classes qui étendent com.webforj.App sont analysé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 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("/") en fait la route principale de l'application.

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

  private 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 sur webforJ Starter " + 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 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 un conteneur pour les éléments. Cet élément utilise la méthode getBoundComponent() pour stocker le principal FlexLayout que la classe contient.
• hello : Un TextField étiqueté Quel est votre nom ? pour que les utilisateurs saisissent leur nom.
• btn : Un Button au style primaire é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 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 au sein de l'application.

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