README

使用Tailwind CSS的PHP框架。

演示网站

加入Discord频道

历史

Fohn-ui是Agile Toolkit (atk4/ui)的直接进化，因此在使用Fohn-ui时，您会发现与atk4/ui有很多相似之处。但是，Fohn-ui不能直接作为atk4/ui项目的升级使用。

以下是主要区别

• Fohn-ui视图与数据模型解耦。一些视图，如表单或表格，将通过ModelController类消耗模型数据。
• Fohn-ui使用了自己特有的JavaScript集成。
• Fohn-ui使用Tailwind CSS实用工具来定义视图的外观和感觉。
• Fohn-ui组件以最简洁的方式定义。

例如，您在Fohn-ui中找不到Crud组件。为了构建Crud，您需要使用Table组件定义自己的Crud类。这开始时可能需要更多的工作，但允许在未来Fohn-ui的版本中实现更大的灵活性和更好的可移植性。

安装

要创建使用Fohn-ui的项目，只需使用Composer安装它。

composer require fohn-group/fohn-ui

设置Ui::service

Ui::service类是Fohn-ui的核心，因此需要正确设置才能显示页面内容。

以下是一个最小化设置

<?php

declare(strict_types=1);

// Create and boot service.
Ui::service()->boot(function (Ui $ui) {
    $ui->setApp(new App());
    
    // Add default exception handler.
    $ui->setExceptionHandler(PageException::factory());
    
    // Set page.
    $page = Page::factory(['title' => 'My Fohn-ui Project']);
    $page->addLayout(SideNavigation::factory(['topBarTitle' => 'My Fohn-Ui App']));
    $ui->initAppPage($page);
});

View::addTo(Ui::layout())->setText('Hello World');

为什么是Ui::service()

主要因为视图依赖于Ui::service()来正确设置Html引擎、JavaScript库和其他由视图类使用的实用工具。

例如，Ui::service()将提供由视图使用的Theme类。

Ui::theme()::styleAs()

因此，您可以使用自己的实现覆盖Ui::class或简单地设置适当的属性在启动时，来定制几乎由View::class使用的所有外部内容。

Ui::service()->boot(function (Ui $ui) {
    // ...code
    $ui->formLayoutSeed = [MyFormLayout::class]
});

使用Docker运行app-test

app-test文件夹被设置为Fohn-ui项目，主要用于测试各种Fohn-ui视图和组件。

如果您系统上已安装Docker，您可以轻松运行app-test项目，通过克隆此存储库并构建Dockerfile。

git clone https://github.com/Fohn-Group/fohn-ui
cd fohn-ui/app-test
docker build -f Dockerfile .. -t fohn-ui-test
docker run --rm -p 80:80 -it fohn-ui-test

完成之后，在浏览器中打开：https:///app-test

Tailwind CSS

通过使用Tailwind CSS实用工具，可以轻松设置Fohn-ui中视图的外观和感觉。

PHP可定制主题

此外，由于Tailwind CSS使用实用工具而不是CSS类名，因此现在可以创建主题并将主题样式应用于Fohn-ui中的任何视图。

按钮视图是一个很好的例子

 $btn = Button::addTo(Ui::layout(), ['type' => 'outline', 'color' => 'secondary']);
 Ui::theme()::styleAs(Fohn::BUTTON, [$btn]);

这将使用在Theme类中设置的合适的Tailwind CSS实用工具在HTML中渲染按钮，这使得定义自己的实用工具颜色和样式变得容易。

JavaScript和Jquery

可以在任何Fohn-ui视图中应用JavaScript或Jquery事件。

例如，使用Jquery通过点击按钮来切换视图的显示。

$view = View::addTo(Ui::layout())->setText('I will show/hide if you click button below');
$btn = Button::addTo(Ui::layout())->setLabel('Toggle View');

Jquery::addEventTo($btn, 'click')->execute(JQuery::withView($view)->toggle());

Vue.js组件

一些Fohn-ui视图使用Vue.js框架定义。例如，表单、表格、模态框使用Vue集成来定义它们的操作。但是，在Vue中定义的组件通常是渲染组件，即它们的模板由Fohn-ui的HTML模板引擎定义。这允许开发者有很大的灵活性来控制组件的外观和行为。

开发自己的Vue组件时请注意

开发使用其他组件的组件可能会很具挑战性，因为HTML模板被分割到使用的组件数量中。例如，表单使用Form/Control组件来渲染最终的HTML模板。

因此，Fohn-ui提供了一个实用程序，在Vue.js将其渲染到DOM之前，将渲染整个组件的最终HTML：Ui::viewDump($form, 'form')。

// pages/form.php

$form = Form::addTo(Ui::layout());
$form->addControl(new Form\Control\Range(['caption' => 'Range', 'controlName' => 'range']));

Ui::viewDump($form, 'form');

为了显示在Vue渲染之前，$form是如何以HTML形式渲染的，只需将查询参数dump=form附加到页面URL。

https:///form.php?dump=form

HTML模板

每个Fohn-ui视图类都与一个HTML模板相关联。每个视图都在HTML中渲染，它们的HTML输出都渲染在它们的父视图模板内。换句话说，当将视图添加到视图时，Fohn-ui在父HTML内容内生成HTML内容。

这意味着模板使用标签区域定义，以便正确输出渲染内容。

使用标签区域的视图模板示例

<div id="{$idAttr}" class="{$classAttr}" style="{$styleAttr}" {$attributes}>
    {$Content}
<div>

模板引擎还使用特定的注释来防止将花括号符号用作区域标签。当使用此特定注释时，模板引擎将内容按原样渲染。

例如，使用'@'或双花括号'{{}}'来渲染Vue组件中的花括号内容。

<fohn-component #default=@{props}>
    <div>{{props}}</div>
</fohn-component>

模板引擎将按以下方式渲染，在Vue js渲染之前。

<fohn-component #default={props}>
    <div>{{props}}</div>
</fohn-component>