3. 组件化思维

你将学到: Component 作为一切的基类、生命周期、组合以及如何创建一个可复用的组件。前置条件: 窗口与导航。

完整示例(复制、粘贴、运行)

一个可复用组件(CardTarefa),在 onAdd 中搭建一次,并通过 bind(...) 用数据重新绑定。该窗口用不同数据创建了三个卡片。可直接编译运行。

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      CardTarefa c1 = new CardTarefa(); add(LAY_AUTO, c1); c1.bind(new Tarefa("Comprar pão"));
      CardTarefa c2 = new CardTarefa(); add(LAY_AUTO, c2); c2.bind(new Tarefa("Pagar conta"));
      CardTarefa c3 = new CardTarefa(); add(LAY_AUTO, c3); c3.bind(new Tarefa("Estudar CrossFly"));
   }
}

class Tarefa                                             // 最小模型
{
   final String titulo;
   Tarefa(String titulo) { this.titulo = titulo; }
}

class CardTarefa extends Component
{
   private final Label titulo = new Label();

   @Override
   public void onAdd(boolean firstTime) throws Exception  // 构建结构一次
   {
      super.onAdd(firstTime);
      setLayout(new HorizontalLayout());
      add(LAY_FILL, titulo);
   }

   public void bind(Tarefa t)                             // 按数据重新绑定（开销小）
   {
      titulo.setText(t.titulo);
      repaint();
   }
}

下面的片段只展示核心部分(放在 onShow() 里的内容)。要运行,请把它们放进上面的 MainWindow 骨架里。

一切皆 Component,容器 = Component + Layout

Label 是一个 Component。Button 是一个 Component。任何 Component 在接收一个 Layout 后都会成为容器,而 add(...) 会把排布委托给该 layout。

Component painel = new Component();
painel.setLayout(new VerticalLayout());
painel.add(LAY_AUTO, new Label("Título"));

生命周期

使用 bind(...) 的可复用组件

可回收“卡片”的模式:只搭建一次结构(在 onAdd 中),然后按数据重新绑定:

public class CardTarefa extends Component {
   private final Label titulo = new Label();
   @Override public void onAdd(boolean firstTime) throws Exception {
      super.onAdd(firstTime);
      setLayout(new HorizontalLayout());
      add(LAY_FILL, titulo);
   }
   public void bind(Tarefa t) {      // 按数据重新绑定（开销小，会被多次调用）
      titulo.setText(t.titulo);
      repaint();
   }
}

这正是 VirtualListView 用来回收视图的模式(见加载数据)。

本步骤所构建的

可复用的 CardTarefa 组件 —— 搭建一次,按任务重新绑定。

回顾

Component 是基类;容器 = Component + Layout;在 onAdd(firstTime) 中初始化,在 onRemove() 中释放;自定义组件将搭建(一次)与绑定(bind,多次)分离开来。

下一步

→ 布局

另见

• 概念:一切皆 Component · 生命周期