Symfonyob娱乐下载的新功能:用户体验倡议，Symfony的一个新的JavaScript生态系统

ob娱乐下载Symfony UX:利用JavaScript构建高度交互的应用程序

ob娱乐下载Symfony UX是一系列用于在Symfony和JavaScript生态系统之间建立桥梁的工具。它站在JavaScript巨头的肩膀上:npm，Webpack安可而且刺激．

ob娱乐下载Symfony用户体验没有绑定到任何特定的JavaScript框架:如果你喜欢React、Vue或Angular，你仍然可以使用它们。它也是固执己见的，基于标准HTML可以是逐步采用在现有的应用程序中。

ob娱乐下载Symfony UX由三个主要组件组成:

1. 为Sob娱乐下载timulus集成Symfony，为应用程序中的JavaScript代码提供一种新的组织方式
2. Symfony Fleob娱乐下载x和Symfony Webpack Encore的更新可以自动配置PHP包附带的JavaScript代码
3. 一系列核心UX包设计可靠，可组合，快速创建惊人的界面

示例:使用Symfony UX Chart.js在PHP中显示图表ob娱乐下载

Symfony UX强大的一个很好的例子是ob娱乐下载新的Syob娱乐下载mfony UX Chart.js组件．该组件依赖于Chart.js图书馆内部。

要使用Symfob娱乐下载ony UX，首先更新您的Symfony Flex和Webpack Encore依赖项:

1 2

symfony/flex yarob娱乐下载n升级“@ob娱乐下载symfony / webpack-encore@ ^ 1.0.0”

并同步您的食谱到最新版本:

1

Composer recipe:安装symfonyob娱乐下载/webpack-encore-bundle——force -v

一旦更新，Symfony Fob娱乐下载lex将对您安装的每个包含JavaScript代码的PHP包做出反应。例如，你现在可以安装Chart.js组件:

1

＄作曲家需要symfony/ux-cob娱乐下载hartjs

1 2 3 4 5 6

symfony/ux-chartjs ./coob娱乐下载mposer使用^1.0版本。已更新同步包。不要忘记运行npm或yarn来刷新你的Javascript依赖项!.．.

ob娱乐下载Symfony Flex刚刚同步了package.json你的项目文件和你安装的Chart.js PHP包。现在你会在这个文件中发现一个新的JavaScript模块:

1 2 3 4 5 6 7

/ / package.json｛“devDependencies”{…“@ob娱乐下载symfony / ux-chartjs”：“文件:供应商/ symfob娱乐下载ony / ux-chartjs /资源/资产”}}

ob娱乐下载Symfony Flex也更新了新的资产/ controllers.json在项目中归档。这个文件引用了Symfony UX包提供的所有刺激器控制器，让Webpack Encore将它们添加到你的JavaScript构建文件中:ob娱乐下载

12 3 4 5 6 7 8 9 10 11 12

/ /资产/ controllers.json｛“控制器”: {“@ob娱乐下载symfony / ux-chartjs”: {“图”: {“启用”：真正的，“获取”：“渴望”}}}，“entrypoints”: []}

由于这些变化，你现在应该安装新的JavaScript依赖项并编译新文件:

1 2

纱线安装-强迫纱线返场开发

和…就是这样!通过利用Symfony Flob娱乐下载ex, Symfony UX Chart.js被安装和配置为PHP中的Symfony包，以及编译到应用程序构建文件中的JavaScript库。

这意味着你现在可以使用bundle构建一个图表:

12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

/ /……使用ob娱乐下载＼用户体验＼Chartjs＼构建器＼ChartBuilderInterface；使用ob娱乐下载＼用户体验＼Chartjs＼模型＼图表；类HomeController扩展AbstractController｛/ * * *@Route("/"， name="首页")*/公共函数指数(ChartBuilderInterface＄chartBuilder）：响应｛＄图表＝＄chartBuilder->createChart(图：：TYPE_LINE);＄图表->setData ([“标签”= > [“1月”，“2”，“3”，“4”，“可能”，“6月”，“7”),“数据集”=> [[“标签”= >“我的第一个数据集”，“写成backgroundColor”= >'rgb(255, 99, 132)'，“borderColor”= >'rgb(255, 99, 132)'，“数据”= > [0，10，5，2，20.，30.，45]，]，]，]);＄图表->setoption ([/ *……* /]);返回＄这->呈现(家/ index.html.twig ', (“图”= >＄图表]);}}

一旦在PHP中创建，可以使用Twig显示图表:

1 2 3 4

{{render_chart(chart)}}{#您可以将HTML属性作为第二个参数传递给标签#}{{render_chart(chart， {'class': 'my-chart'})}}

所有选项和数据都按原样提供给Chart.js。你可以阅读
Chart.js文欧宝官网下载app档去发现它们。

在github.com/symfony/ux上发现Symfob娱乐下载ony UX的所有软件包!

你也可以阅读法比恩的主题幻灯片而且Titouan的演讲幻灯片以全面了解该计划!

让我们一起建立一个神奇的生态系统

ob娱乐下载Symfony UX是一个倡议:其目标是建立一个生态系统。为了实现这一点，我们需要您的帮助:我们还可以在Symfony UX中创建哪些包?ob娱乐下载那么自动添加输入掩码您的Symfony窗体的文本字段?ob娱乐下载或者是使EntityType呈现与AJAX自动完成？你在JavaScript中所做的任何事情都可以被简化成一个UX包。

我们有一些想法，我们将在未来几天发布更多的包。剩下的就靠我们了:让我们一起创造一个惊人的生态系统!