raoul2000 / yii2-wizflow

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

安装: 2,754

依赖者: 0

建议者: 0

安全性: 0

星标: 14

关注者: 6

分支: 9

开放问题: 2

类型:yii2-extension

dev-master 2019-08-26 10:32 UTC

This package is not auto-updated.

Last update: 2024-09-18 20:07:00 UTC


README

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

对于 TLDR 的人,请查看 演示

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

向导实现

单词 向导 不仅指代那些像甘道夫这样的家伙或任何其他戴着滑稽帽子并拥有超级魔法力量的老人。在用户界面世界中,向导是一种设计模式,可以在用户想要实现一个可以通过可依赖的子任务分解的单个目标的情况下应用(来自 ui-patterns.com)。

要了解更多关于向导的信息,请参阅 Designing Interfaces

问题

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

这个 Yii2 扩展的目的是利用由 yii2-workflow 扩展实现的工性行为来解决这个问题。

Wizflow 解决方案

工作流定义

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

我们需要

  • 模型名称
  • 视图名称

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

这是我们的 wizflow

the wizflow

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

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

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

Wizflow 管理器

现在最后一个是能够根据用户输入和当前步骤(即状态)导航此 wizflow 的组件。这个组件是 WizflowManager。此扩展提供的这个组件还负责路径持久性,即跟踪用户通过 wizflow 完成的所有连续步骤(实现了非常基础的会话存储持久性)。

如果您查看 WizflowManager 的代码,您会发现 getNextStep 方法负责提供用户在点击 下一步 按钮时将到达的下一个状态。为了定义下一个步骤是什么,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.1.1"
composer create-project yiisoft/yii2-app-basic wizflow 2.0.9
cd wizflow
composer require raoul2000/yii2-wizflow:@dev
cp vendor/raoul2000/yii2-wizflow/example/* .

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

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

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

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