跳至主要内容

App Basics

在 ChatGPT 中打开

一旦您在项目中设置了webforJ及其依赖项，您就准备好创建应用程序结构。本文将逐步介绍基本webforJ应用程序的关键元素，特别关注Application和HomeView类，它们是webforj-archetype-hello-world启动项目中的基础类。

主应用程序类：Application.java​

Application类作为您的webforJ应用程序的入口点，设置基本配置和路由。首先，注意类的声明和注解。

该类扩展了webforJ的核心App类，使其被识别为webforJ应用程序。各种注解配置应用程序的主题、标题和路由。

@Routify(packages = "com.samples.views")
@AppTitle("webforJ Hello World")
@StyleSheet("ws://app.css")
public class Application extends App {
}
  • @Routify：指定webforJ应扫描com.samples.views包以查找路由组件。
  • @AppTitle：定义在应用程序浏览器标签上显示的标题。
  • @StyleSheet：链接外部CSS文件app.css，允许为应用程序应用自定义样式。

Application类不包含任何额外的方法，因为配置通过注解设置，webforJ处理应用程序初始化。

配置完Application.java后，应用程序现在具有指向视图包的标题和路由。接下来，概述HomeView类，以了解应用程序运行时显示的内容。

发现一个App​

webforJ中强制实施一个单一的App限制，所有错误处理责任转移到Java端，并赋予开发人员对错误管理的完全控制。

在webforJ引导过程期间，所有扩展com.webforj.App的类都会被扫描。如果找到多个应用程序，系统会查找com.webforj.annotation.AppEntry注解。如果发现的任何类被标记为@AppEntry，则第一个遇到的类被视为入口点。

  • 如果一个类被标记为@AppEntry，该类将被选为入口点。
  • 如果多个类被标记为@AppEntry，将抛出异常，列出所有发现的类。
  • 如果没有类被标记，且只找到一个App的子类，则该类将被选为入口点。
  • 如果没有类被标记，且找到多个App的子类，则将抛出异常，详细说明每个子类。
错误处理

有关webforJ中如何处理错误的更多信息，请参见本文。

主视图类：HomeView.java​

HomeView类定义了一个简单的视图组件，作为应用程序的主页。它显示一个字段和一个按钮，以便问候用户输入的姓名。

类声明和注解​

HomeView扩展了Composite<FlexLayout>，使其能够作为由FlexLayout组件组成的可重用组件。@Route("/")使其成为应用程序的根路由。

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

  private final FlexLayout self = getBoundComponent();
  private TextField hello = new TextField("What is your name?");
  private Button btn = new Button("Say Hello");

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

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

    self.add(hello, btn);
  }
}

组件初始化​

在类内部，初始化并声明了几个UI元素：

private final FlexLayout self = getBoundComponent();
private TextField hello = new TextField("What is your name?");
private Button btn = new Button("Say Hello");
  • self：使用FlexLayout的主要布局组件，配置为元素的容器。该元素使用getBoundComponent()方法存储类包含的主要FlexLayout。
  • hello：一个标记为What is your name?的TextField，供用户输入其姓名。
  • btn：一个标记为Say Hello的主样式Button。

布局配置​

布局(self)配置了一些关键样式属性：

  • FlexDirection.COLUMN将元素垂直堆叠。
  • setMaxWidth(300)限制宽度为300像素，以实现紧凑布局。
  • setStyle("margin", "1em auto")用边距居中布局。

向布局添加组件​

最后，通过调用self.add(hello, btn)将hello文本字段和btn按钮添加到FlexLayout容器中。此排列定义了视图的结构，使表单既具有互动性又在视觉上居中。

样式应用程序​

styles.css文件为您的webforJ应用程序提供自定义样式。这个CSS文件通过@StyleSheet注解在Application类中被引用，这使得应用程序能够将样式应用到应用程序内的组件。

该文件位于项目的resources/static目录中，并可以使用web服务器URL ws://app.css进行引用。