Flow集成

在Hilla视图中集成Flow组件。

使用属性
WebComponent的onload事件

可以通过实现[classname]`WebComponentExporter`类并使用生成的Web组件，在Hilla视图中使用Flow组件。[classname]`WebComponentExporter`类可以作用于任何Flow组件。

以下是一个此类组件的示例：

Source code

Javapublic class CustomComponent extends Div {

    public CustomComponent(@Autowired GreetService service) {
        Button button = new Button("Say hello", e -> {
            Notification.show("Hello!");
        });

        add(button);
    }
}

随后，这个组件可以按以下方式转换为Web组件：

Source code

Javapublic class MyFlowComponentExporter
        extends WebComponentExporter<CustomComponent> {

    public static final String TAG = "my-flow-component";

    public MyFlowComponentExporter() {
        super(TAG);
    }

    @Override
    protected void configureInstance(WebComponent<CustomComponent> webComponent,
                                     CustomComponent component) {
    }
}

更多信息，参见Creating an Embedded Vaadin Application。

Note	[classname]`WebComponentExporter`需要有一个无参的public构造方法。否则，它将不会被实例化或生成。

若要将导出的Web组件添加到Hilla视图中，需要从Flow导入`reactElement`函数，并在React组件中创建一个与`WebComponentExporter`使用的标签名相同的`React.DOMElement`（即，上例中的`TAG`）。然后在视图中使用生成的React组件，例如：

Source code

TSX
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout';
import { reactElement } from 'Frontend/generated/flow/Flow'; 1

function MyFlowComponent() {
  return reactElement('my-flow-component'); 2
}

export default function HillaView() {
  return (
    <>
      <VerticalLayout className={'centered-content'}>
        <h3>Hilla View</h3>
        <MyFlowComponent/> 3
      </VerticalLayout>
    </>
  );
}

导入`reactElement`函数。
从React组件返回您导出的自定义元素的实例，使用相同的标签名。
在视图中使用React组件。

使用属性

您可以通过向[method]reactElement 函数传递具有`string`值对的一个[interface]`Properties`对象，为元素添加属性。

当导出的网页组件向客户端公开属性时，可以使用这种方法。

Source code

Flow Web组件的自定义属性
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout';
import { reactElement } from 'Frontend/generated/flow/Flow';
import React from 'react';

function MyFlowComponent() {
  // 创建具有hellomsg属性的元素
  return reactElement('my-flow-component', {
    hellomsg: 'Hi from the client!'
  });
}

export default function HillaView() {
  return (
    <>
      <VerticalLayout className={'centered-content'}>
        <h3>Hilla View</h3>
        <MyFlowComponent/>
      </VerticalLayout>
    </>
  );
}

您也可以使用自定义属性类型将属性与React组件的属性绑定：

Source code

具有属性绑定的自定义属性
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout';
import { reactElement } from 'Frontend/generated/flow/Flow';
import React from 'react';

type MyProperties = {
  hellomsg: string
}

function MyFlowComponent(props: MyProperties) {
  // 创建具有hellomsg属性的元素
  return reactElement('my-flow-component', {
    hellomsg: props.hellomsg
  });
}

export default function HillaView() {
  return (
    <>
      <VerticalLayout className={'centered-content'}>
        <h3>Hilla View</h3>
        <MyFlowComponent hellomsg={'Hi from the client!'}/>
      </VerticalLayout>
    </>
  );
}

通过这种方式，改变属性时将同时更新Web组件的属性值。

下面的示例展示了Web组件属性相应的服务器端代码：

Source code

带有暴露属性的Web组件
public class MyFlowComponentExporter
        extends WebComponentExporter<CustomComponent> {

    public static final String TAG = "my-flow-component";

    public MyFlowComponentExporter() {
        super(TAG);
        addProperty("hellomsg", "Hello!")
            .onChange(CustomComponent::setHelloMessage);
    }

    @Override
    protected void configureInstance(WebComponent<CustomComponent> webComponent,
                                     CustomComponent component) {
    }
}

Source code

带有属性的Flow组件
public class CustomComponent extends Div {
    String helloMessage;

    public CustomComponent(@Autowired GreetService service) {
        Button button = new Button("Say hello", e -> {
            Notification.show(helloMessage);
        });

        add(button);
    }

    public void setHelloMessage(String helloMessage) {
        this.helloMessage = helloMessage;

    }
}

WebComponent的onload事件

根据网络情况，加载[classname]`WebComponent`脚本可能需要一段时间。因此，最好显示一个加载提示符，让用户知道需要等待。

可以为[classname]`WebComponent`脚本的`onload`事件添加监听器，以便脚本加载完成时移除加载提示元素。

[methodname]`reactElement`接受一个`onload`回调函数作为第三个参数，也可以将`onerror`回调函数设为第四个参数。如果没有提供`onerror`回调函数，当Web组件脚本加载失败时会在控制台中记录错误信息。

Source code

加载提示示例
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout';
import { reactElement } from 'Frontend/generated/flow/Flow';
import React from 'react';

type MyProperties = {
  hellomsg: string
}

function MyFlowComponent(props: MyProperties) {
  // 创建具有hellomsg属性的元素
  return reactElement('my-flow-component',
    undefined,
    () => document.getElementById('loading')?.remove()
  );
}

export default function HillaView() {
  return (
    <>
      <VerticalLayout className={'centered-content'}>
        <h3>Hilla View</h3>
        <!-- MyFlowComponent脚本加载的占位符元素 -->
        <div id={"loading"}>Loading script...</div>
        <MyFlowComponent hellomsg={'Hi from the client!'}/>
      </VerticalLayout>
    </>
  );
}

920dc03d-5eb4-4826-8934-4416b58a9a3e

Docs

Docs

Flow集成

使用属性

WebComponent的onload事件