lispa/amos-wizflow

此包的最新版本(1.0.7)没有可用的许可证信息。

使用 yii2-workflow 实现的向导 UI 模式

1.0.7 2022-08-04 13:26 UTC

This package is auto-updated.

Last update: 2024-09-04 18:21:33 UTC


README

这是一个 概念验证,演示了如何在 YII2-WORKFLOW 扩展之上实现向导 UI 模式。

有关 yii2-workflow 的更多信息,请参阅 用户指南

向导实现

“向导”一词不仅指某个甘道夫或任何其他戴着滑稽帽子并充满超级魔法力量的老人。在用户界面世界中,“向导”是一种设计模式,当用户想要通过可信赖的子任务(来自 ui-patterns.com)实现单一目标时可以应用。

要了解更多关于向导的信息,请参阅 设计界面

问题

问题很简单:我们如何实现一个复杂的多步过程,引导用户达到最终目标?复杂性可能来自于用户做出的选择,他/她可能会被引导通过不同的步骤(条件分支)。换句话说,我们正在考虑一个存在多个路径(有序步骤序列)的情况,从第一步到最后一步(目标)。

此 Yii2 扩展的目的是使用 yii2-workflow 扩展实现的流程范式来解决此问题。

Wizflow 解决方案

工作流定义

工作流可以被视为用户必须执行的所有可能步骤的表示,以导航通过向导小部件。那么,为什么不为我们的向导定义一个表示所有可能路径的工作流呢?我们还可以使用 yii2-workflow 提供的 元数据 属性,将一些数据与向导的每个步骤(工作流的每个 状态)关联起来。

我们需要

  • 模型名称
  • 视图名称

让我们看看一个非常基本的向导,它将向用户提出愚蠢的问题(例如,“你更喜欢绿色还是蓝色?”),并根据她的回答执行相应的转换。在更线性的用例中,我们还可以从一个步骤跳到另一个步骤。

这是我们的 wizflow

the wizflow

如你所见,状态 step1 与一个包含用户必须选择的属性以及代表显示给用户的表单的 Yii2 视图名称的 Yii2 模型相关联。

为这个 wizflow 定义工作流定义很简单:查看这里

更多关于 工作流定义 的信息。

Wizflow 管理器

最后一件事情是一个组件,可以根据用户输入和当前步骤(即状态)在 wizflow 中导航。这个组件是 WizflowManager。这个扩展提供的组件也负责路径持久性,即跟踪用户在 wizflow 中执行的所有连续步骤(实现了非常基础的会话存储持久性)。

如果您查看 WizflowManager 的代码,您会发现 getNextStep 方法负责提供当按下 NEXT 按钮时用户将达到的下一个状态。为了定义下一个步骤,WizflowManager 调用 SimpleWorkflowBehavior.getNextStatuses(true,true) 方法,该方法包括模型验证。如果存在多个下一个步骤(下一个状态),则使用第一个:**开发者负责确保验证规则和转换只允许一个下一个步骤**。

yii-wizflow 扩展中包含的示例中,已配置上述工作流。此工作流包括在 step1bluegreen 状态之间的分支。根据用户输入,验证规则必须是互斥的,以便只选择一个可能的目的地。

  • 如果用户选择“蓝色”作为最喜欢的颜色,则下一个步骤是“蓝色”
  • 如果用户选择“绿色”作为最喜欢的颜色,则下一个步骤是“绿色”

这就是处理分支的方式:在特定步骤应用的验证规则应该配置为仅选择一个**下一个步骤**作为目的地。再次强调,这是开发者的责任确保这一点得到正确执行。

有关工作流驱动的属性验证的更多信息,请参阅工作流驱动属性验证

安装示例

yii2-wizflow 扩展附带一组 Yii2 模型、控制器和视图,用于覆盖 基本的 Yii2 应用程序模板 并展示 yii-wizflow 的实际应用。

以下是运行以安装示例 Wizflow 应用程序的命令摘要。下面有详细说明。

composer global require "fxp/composer-asset-plugin:~1.2.2"
composer create-project yiisoft/yii2-app-basic wizflow 2.0.9
cd wizflow
composer require open20/amos-wizflow:@dev
cp vendor/open20/amos-wizflow/example/* .

要安装此演示应用程序,您必须

  • 基于 基本 模板创建一个新的 yii2 应用程序。为此,请遵循Yii2 安装指南
  • 安装 amos-wizflow 扩展
  • vendor/open20/amos-wizflow/example 中提供的文件夹覆盖您 yii2 应用程序的根目录中的所有文件夹

如果您已经有了一个基于 基本 模板运行的 Yii2 应用程序,以下是您可以手动执行的步骤

  • APP_FOLDER/conf/web.php 中声明 WizflowManager 组件。此组件实现了工作流定义和模型/视图之间的所有逻辑。它还处理持久化层,通过将用户条目保存到当前会话中。
'components' => [
  'wizflowManager' => [
    'class' => '\open20\amos\wizflow\WizflowManager'
  ],
  // etc ...
  • APP_FOLDER/conf/web.php 中声明 workflowSource 组件。这是标准的 yii2-wizflow 源组件。
'components' => [
  'workflowSource' => [
    // use default settings : workflow definition is stored in an object and can be
    // retrieved with the getDefinition() method
    'class' => '\raoul2000\workflow\source\file\WorkflowFileSource'
  ],
// etc ...
  • APP_FOLDER/controllers/SiteController.php 中添加一个新的操作。此操作用于向导导航期间。
public function actions()
{
    return [
      // other actions ...
        'wizflow' => [
            'class' => '\open20\amos\wizflow\WizardPlayAction'
        ],
    ];
}
  • APP_FOLDER/controllers/SiteController.php 中添加 finish 操作。此操作在工作向导结束时调用,以显示用户所做的选择摘要。
public function actionFinish()
{
  return $this->render('finish',[
    'path' => Yii::$app->wizflowManager->getPath()
  ]);
}