open20 / amos-wizflow
使用 yii2-workflow 实现的向导 UI 模式
Requires
- php: >=5.4.0
- raoul2000/yii2-workflow: *
- yiisoft/yii2: *
Requires (Dev)
This package is auto-updated.
Last update: 2024-09-04 18:21:27 UTC
README
这是一个 概念验证,演示了如何在 YII2-WORKFLOW 扩展之上实现向导 UI 模式。
有关 yii2-workflow 的更多信息,请参阅 用户指南。
向导实现
“向导”一词不仅指某个甘道夫或任何其他戴着一顶滑稽帽子、充满超级魔法力量的老人。在用户界面领域,向导是一种可以在用户希望实现单一目标,而这个目标可以分解为可依赖的子任务的情况下应用的设计模式(来自 ui-patterns.com)。
有关向导的更多信息,请参阅 设计界面。
问题
问题很简单:我们如何实现一个复杂的逐步过程,引导用户达到最终目标?这种复杂性可能源于用户做出的选择,他们可能需要通过不同的步骤进行引导(条件分支)。换句话说,我们考虑的情况是,会有几条路径(步骤的有序序列)从第一步到最后一步(目标)。
此 Yii2 扩展的目的是使用 yii2-workflow 扩展实现的流程范式来解决此问题。
Wizflow 解决方案
工作流定义
可以将工作流视为用户在导航向导小部件时必须执行的所有可能步骤的表示。那么,为什么不简单地定义一个代表我们向导所有可能路径的工作流呢?我们还可以使用 yii2-workflow 提供的 元数据 属性将一些数据与我们的向导中的每个步骤(工作流的每个 状态)相关联。
我们需要
- 模型名称
- 视图名称
让我们看看一个非常基本的向导,它会向用户提出一些愚蠢的问题(例如,“你更喜欢绿色还是蓝色?”),然后根据她的回答执行相应的转换。在更线性的用例中,我们还将能够从一个步骤移动到另一个步骤。
这是我们的 wizflow
如您所见,状态 step1 与一个包含用户必须选择的属性和代表用户要显示的表单的 Yii2 视图名称的 Yii2 模型相关联。
为这个 wizflow 定义工作流定义很容易:查看这里。
有关 工作流定义 的更多信息。
Wizflow 管理器
最后一件事情是一个组件,可以根据用户输入和当前步骤(即状态)在 wizflow 中导航。此组件是 WizflowManager。此扩展提供的此组件还负责路径持久性,即跟踪用户在 wizflow 中执行的连续步骤(实现了非常基本的会话存储持久性)。
如果您查看 WizflowManager 代码,您会发现 getNextStep 方法负责在按下 NEXT 按钮时提供用户将到达的下一个状态。为了定义下一个步骤,WizflowManager 调用 SimpleWorkflowBehavior.getNextStatuses(true,true)
方法,该方法包括模型验证。如果存在多个下一个步骤(下一个状态),则使用第一个:**开发者负责确保验证规则和转换只允许一个下一个步骤**。
在 yii-wizflow 扩展中包含的示例中,上述工作流程被配置。此工作流程包括在 step1 和 blue 或 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 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() ]); }