arter/amos-wizflow

该软件包最新版本(1.0.5)没有可用的许可证信息。

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

该软件包的官方仓库似乎已不存在,因此该软件包已被冻结。

安装: 585

依赖者: 1

建议者: 0

安全: 0

类型:插件

1.0.5 2022-05-04 16:00 UTC

This package is auto-updated.

Last update: 2024-06-16 19:57:29 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 状态之间的分支。根据用户输入,验证规则必须是唯一的,以便只选择一个可能的目的地。

  • 如果用户选择 "blue" 作为最喜欢的颜色,下一个步骤是 "blue"。
  • 如果用户选择 "green" 作为最喜欢的颜色,下一个步骤是 "green"。

这是处理分支的方式:在给定步骤应用的验证规则应配置为只选择 一个目的地 作为 下一个步骤。同样,这是开发者的责任,确保正确执行此操作。

更多关于 工作流程驱动的属性验证 的信息。

安装示例

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 arter/amos-wizflow:@dev
cp vendor/arter/amos-wizflow/example/* .

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

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

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

  • APP_FOLDER/conf/web.php 中声明 WizflowManager 组件。此组件实现工作流程定义和模型/视图之间的所有逻辑。它还通过将用户条目保存到当前会话来处理持久化层。
'components' => [
  'wizflowManager' => [
    'class' => '\arter\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' => '\arter\amos\wizflow\WizardPlayAction'
        ],
    ];
}
  • APP_FOLDER/controllers/SiteController.php 中添加 finish 操作。此操作在向导结束时调用,用于显示用户做出的选择摘要。
public function actionFinish()
{
  return $this->render('finish',[
    'path' => Yii::$app->wizflowManager->getPath()
  ]);
}