README

敏捷UI实现了服务器端渲染引擎和超过50个UI通用组件，用于与您的数据进行交互。

敏捷UI是构建后端UI、管理界面、数据管理系统（围绕角色、复杂逻辑、公式等设计）的快速方式。

敏捷UI依赖于抽象数据。它可以存储在SQL、NoSQL或外部API中。
敏捷UI会适应您的数据模型。如果更改了模型结构，UI会相应反映出来。
敏捷UI提供开箱即用的组件，您无需前端开发经验。
敏捷UI是交互式的，这使得在JS事件上触发PHP代码变得非常简单。
敏捷UI紧凑 - 单个文件，几行代码 - 就这么简单。
敏捷UI是可扩展的 - 集成了VueJS以创建自定义组件和交互行为。

快速链接：文档。演示网站。 ATK数据。 Discord社区。

敏捷工具包是如何工作的？

敏捷工具包的目标是减少构建通用Web应用程序所需的编码量。涉及三个步骤

通过敏捷数据框架定义您的“数据模型”并将其与SQL、NoSQL或API关联。
初始化UI组件，将它们连接到数据模型以构建应用程序的用户界面。
如果需要 - 使用敏捷API为您的移动/React应用程序或物联网设备提供API访问。

敏捷数据允许您定义模型、字段、关系、公式、聚合、表达式、用户操作和访问控制规则。敏捷UI和敏捷API都会遵循这些规则。

使用敏捷UI的集成和应用程序

敏捷UI可以与Laravel或Symfony等框架集成，与WordPress集成，并且有几个高级项目完全在敏捷工具包上开发。

谁使用敏捷工具包？

许多公司使用敏捷工具包来实现管理界面，有时甚至实现面向用户的界面。

它是如何工作的？

使用composer安装敏捷UI： composer require atk4/ui

创建index.php文件

<?php

require_once __DIR__ . '/vendor/autoload.php';

$app = new \Atk4\Ui\App();
$app->initLayout([\Atk4\Ui\Layout\Centered::class]);

$form = \Atk4\Ui\Form::addTo($app);
$form->addField('email');
$form->onSubmit(function (Form $form) {
    // implement subscribe here

    return $form->jsSuccess('Subscribed ' . $form->entity->get('email') . ' to newsletter.');
});

// decorate anything
$form->buttonSave->set('Subscribe');
$form->buttonSave->icon = 'mail';

// everything renders automatically

在浏览器中打开PHP并观察一个完整工作且外观良好的表单

ATK UI依赖于https://fomantic-ui.com CSS框架以美观地渲染表单。它还以非常直接的方式实现了提交回调。该演示还演示了JavaScript动作的使用，这使得对象可以相互交互（例如，表单提交重新加载表格）。

与ATK Data的数据库集成

要充分利用ATK UI，请使用ATK Data来描述您的业务模型，例如“用户”或“购买”。在定义模型时，您可以使用一些更高级的组件

Crud是一个完全交互式的组件，支持分页、重新加载、条件、数据格式化、排序、快速搜索、排序、自定义操作和模态，同时使用起来非常简单

$app = new \Atk4\Ui\App(['title' => 'hello world']);
$app->initLayout([\Atk4\Ui\Layout\Admin::class]);
$app->db = \Atk4\Data\Persistence::connect('mysql://user:pass@localhost/atk');

\Atk4\Ui\Crud::addTo($app)
    ->setModel(new User($app->db));

ATK Data允许您设置模型之间的关系

class User extends Model
{
    protected function init(): void
    {
        parent::init();

        $this->addField('name');
        $this->addField('gender', ['enum' => 'female', 'male', 'other']);
        $this->hasMany('Purchases', ['model' => [Purchase::class]]);
    }
}

传统CRUD只适用于单个模型，但通过附加组件，您可以利用这种关系信息： https://github.com/atk4/mastercrud

use \Atk4\Mastercrud\MasterCrud;

// set up $app here

$masterCrud = MasterCrud::addTo($app)
    ->setModel(new User($app->db), [
        'Purchases' => [],
    ]);

Agile UI可以自定义样式

创建自己的应用程序样式非常容易。以下是一些示例UI

操作

自2.0版起 - Agile Toolkit提供对用户操作的支持。这些操作可以在您的数据模型声明中轻松定义

$this->addUserAction('archive', function (Model $entity) {
    $this->set('is_archived', true);
    $this->saveAndUnload();
});

例如，Crud或Card等用户界面将自动识别新操作并向用户提供执行它的选项。您还可以通过我们的ACL系统控制谁有权执行操作。

Agile UI功能亮点

Agile UI有一些独特功能

回调。到处都是回调！

ATK的基本功能之一是回调 - 动态生成路由的能力，然后组件的JS部分可以调用它。得益于这种方法，代码可以流畅、简单且易于阅读

$tabs = \Atk4\Ui\Tabs::addTo($app);
\Atk4\Ui\Message::addTo($tabs->addTab('Intro'), ['Other tabs are loaded dynamically!']);

$tabs->addTab('Users', function (\Atk4\Ui\VirtualPage $p) use ($app) {
    // this tab is loaded dynamically, but also contains dynamic component

    \Atk4\Ui\Crud::addTo($p)
        ->setModel(new User($app->db));
});

$tabs->addTab('Settings', function (\Atk4\Ui\VirtualPage $p) use ($app) {
    // second tab contains an AJAX form that stores itself back to DB

    $m = new Settings($app->db);
    $m = $m->load(2);
    \Atk4\Ui\Form::addTo($p)
        ->setModel($m);
});

向导

另一个使用非常友好的PHP语法的组件实现

当您使用各种ATK UI组件时，可以获得最大好处。尝试以下演示： https://ui.atk4.org/demos/interactive/wizard.php。该演示实现了

多步向导，具有前进和后退导航功能
带有验证的表单
会话中的数据记忆
带有列格式化器和消息的表格
实时输出控制台

使用ATK，只需约50行PHP代码即可构建所有这些功能。https://github.com/atk4/ui/blob/develop/demos/interactive/wizard.php

入门：构建您的管理员

构建复杂的管理系统非常容易。将以下代码添加到新的PHP文件中（使用您的数据库详细信息、表和字段对其进行修改）

<?php

$app = new \Atk4\Ui\App('My App');
$app->initLayout([\Atk4\Ui\Layout\Admin::class]);
$app->db = \Atk4\Data\Persistence::connect('mysql://user:pass@localhost/yourdb');

class User extends \Atk4\Data\Model
{
    public $table = 'user';

    protected function init(): void
    {
        parent::init();

        $this->addField('name');
        $this->addField('email', ['required' => true]);
        $this->addField('password');
    }
}

\Atk4\Ui\Crud::addTo($app)
    ->setModel(new User($app->db));

结果如下

捆绑和计划组件

Agile UI包含许多内置组件

所有组件都可以通过演示应用程序进行查看。

附加组件和集成

附加组件

MasterCrud - 创建带面包屑的多级CRUD系统
Filestore - 将您的表单与Flysystem集成，上传和存储文件
用户认证和ACL - 用户登录、注册和Agile UI的访问控制
图表附加组件 - 带有chartJS的现代外观和免费图表
模型的审计 - 记录所有数据库操作，支持Agile Data的撤销/重做

集成

Agile UI for WordPress - 使用Agile UI编写WordPress插件
Laravel Agile Data - Agile Data的ServiceProvider

所有捆绑组件均为免费软件，并受MIT许可证的许可。它们与Agile UI一起安装。

外部和第三方组件可能受到不同的许可条款约束。

文档和社区

ATK UI积极使用ATK Core和ATK Data框架。

ATK UI示意图

鸣谢和许可证

敏捷UI、数据和API是我们业余时间开发的项目，根据MIT许可证免费向您提供。如果您想对我们核心团队表示感谢或参与项目，请通过Discord上的聊天联系我们。

atk4 / ui

维护者

详细信息