Flutter文档处理插件bizdoc的使用

特性

通过BizDoc工作流引擎创建表单驱动的移动应用程序。

功能

• 身份验证: Okta、Entra或DirectoryServices。
• 在线消息和通知。
• 分析图表。
• 仪表板小部件。
• 从相机捕获并附加文件。
• 位置敏感表单。
• 地理定位服务。

开始使用

在pubspec.yaml文件中添加插件：

flutter pub add bizdoc

如果需要访问自有的服务器API，还需安装dio插件：

flutter pub add dio provider

BizDoc移动应用依赖于Firebase消息推送。为了充分利用BizDocApp，你需要创建一个Firebase项目，并将其设置提供给BizDoc。

使用示例

将BizDocApp添加到main.dart中：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BizDocApp(
      serverAddress: 'https://bizdoc-server-here',
      authentication: FormIdentity(),
    );
  }
}

BizDocApp可以配置证书、Firebase通信设置和标题。

设置身份验证

根据服务器配置选择合适的身份验证方法。

声明组件

BizDoc组件是可以访问应用状态和服务的小部件。Flutter支持三种类型的BizDoc组件：表单（form）、操作（action）和小部件（widget）。

首先声明一个有状态的小部件：

class MyComponent extends StatefulWidget {
  [@override](/user/override)
  _MyComponentState createState() => _MyComponentState();
}

class _MyComponentState extends State<MyComponent> {

}

注册组件

在main.dart中注册组件：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BizDocApp(
        routes: {
          'my-component': (context) => MyComponent(),
        },
    );
  }
}

表单

表单是一种组件类型，允许用户填写一系列输入。

声明模型

class MyModel {
  final Map<String, dynamic> _json;
  MyModel(this._json);

  String? get subject => _json['subject'];
  set subject(String? val) => _json['subject'] = val;

  num? get price => _json['price'];
  set price(num? val) => _json['price'] = val;
}

注意：这里我们为每个属性使用getter和setter。也可以通过fromJson()模式反序列化JSON。

管理状态

使用BizDocFormState访问表单状态：

class _MyComponentState extends State<MyComponent> {
  late BizDocFormState _state;
  late MyModel _model;

  [@override](/user/override)
  void initState() {
    _state = Provider.of<BizDocFormState>(context, listen: false);
    _model = MyModel(_state.data);
    super.initState();
  }
}

更新状态以响应输入变化：

TextFormField(
  keyboardType: TextInputType.text,
  controller: new TextEditingController(text: _model.subject),
  onChanged: (value) {
    _model.subject = value;
    _state.setDirty(); // 设置表单为脏状态
  },
  validator: (value) {
    if (value != null && value != '') _state.setInvalid(); // 设置表单无效
    else if (_model.isValid) _state.setValid(); // 设置表单有效
  },
),

控制小部件

嵌入BizDoc控件以简化API的使用。

设置GoogleMapsSettings属性在BizDocApp中：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) => BizDocApp(
        firebaseSettings: FirebaseSettings(
            apiKey: '...',
            projectId: '...',
            senderId: '...',
            vapidKey: '...',
            appId: '...'),
        googleMapsSettings: GoogleMapsSettings(apiKey: '...'),
      );
}

集成API

使用扩展或单例访问BizDoc服务。

可用的服务：

示例代码：

extension MyModel on Session {
  Future<Iterable<VendorInfo>> vendors(String? name) async {
    final response = await dio.get('/vendors/', queryParameters: {'name': name});
    return response.data.map((e) => VendorInfo(e));
  }
}

class VendorInfo {
  final Map<String, dynamic> _json;
  VendorInfo(this._json);
  String? get name => _json['name'];
}

注意：使用dio属性向服务器发送HTTP请求。

在小部件中使用：

let vendors = await dataSource.vendors();

仪表板小部件

使用BizDocWidgetState获取远程数据。

class CubeAnalysisWidget extends StatefulWidget implements IDashboardWidget {
  const CubeAnalysisWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  _CubeAnalysisWidgetState createState() => _CubeAnalysisWidgetState();
}

class _CubeAnalysisWidgetState extends State<CubeAnalysisWidget> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Consumer<BizDocWidgetState>(
      builder: (context, value, child) {
        if (value.hasData) {
          for (var item in value.data!) {
            // 处理数据
          }
        }
        return Container();
      },
    );
  }
}

注册组件在BizDocApp解析中。

设置

要充分利用BizDoc应用，添加消息传递和API设置。

推送消息

在main.dart中添加Firebase设置：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) => BizDocApp(
        firebaseSettings: FirebaseSettings(
            apiKey: '...',
            projectId: '...',
            senderId: '...',
            vapidKey: '...',
            appId: '...'),
      );
}

地理位置服务

在main.dart中添加Google Maps设置：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) => BizDocApp(
        googleMapsSettings: GoogleMapsSettings(apiKey: '...'),
      );
}