yepsua/smartwig

Twig 的终极组件扩展。

维护者

详细信息

github.com/oyepez003/smartwig

主页

源代码

问题

安装数: 3,104

依赖项: 1

建议者: 0

安全: 0

星级: 6

关注者: 2

分支: 1

公开问题: 0

v1.1.0 2015-03-17 20:50 UTC

Requires

Suggests

MIT af1e860a8946574d9e35948c1b504f4211812648

This package is auto-updated.

Last update: 2024-08-28 11:50:30 UTC

README

Twig 的终极组件扩展。

您可以在任何 PHP 项目中使用 Twig 和 SmarTwig。

安装

您可以通过两种方式安装 SmarTwig：

  1. 使用 Git 仓库
  2. 通过 Packagist 使用 Composer 安装

资源文件

SmarTwig 组件需要一些 .css 和 .js 文件才能运行。

通过克隆 Git 仓库 或 [下载 Zip 包] (https://github.com/oyepez003/jquery4php-assets/archive/master.zip) 来获取资源。

将仓库内容放入您的应用程序公共文件夹。

使用方法（3种方式）

  1. 丑陋的方式

逐步加载所有扩展和构建器配置。

require_once 'vendor/autoload.php';

$loader = new Twig_Loader_Filesystem('templates'); 
$twig = new Twig_Environment($loader, array(
    'cache' => 'cache',
	'debug' => true // Only for dev enviroment.
));

$coreExt = new Yepsua\SmarTwig\Twig\Extension\UICoreExtension();
$coreExt->setBuilders(array(
          "ui.html" => "YsHTML",
          "ui.jqueryCore"  => "YsJQuery",
          "ui.dialog"  => "YsUIDialog",
          "ui.tabs"  => "YsUITabs",
          "ui.accordion"  => "YsUIAccordion",
          "ui.progressbar"  => "YsUIProgressbar",
          "ui.slider"  => "YsUISlider",
          "ui.autocomplete"  => "YsUIAutocomplete",
          "ui.datepicker"  => "YsUIDatepicker",
          "ui.datetimepicker"  => "YsUIDateTimepicker",
          "ui.button"  => "YsUIButton",
          "ui.multiselect"  => "YsUIMultiSelect",
          "ui.picklist"  => "YsUIPickList",
          "ui.popup"  => "YsUIPopUp",
          "ui.selectmenu"  => "YsUISelectMenu",
          "ui.expander"  => "YsUIExpander",
          "ui.splitter"  => "YsUISplitter",
          "ui.dynaselect"  => "YsUIDynamicSelect",
          "ui.menu"  => "YsUIMenu",
          "ui.panel"  => "YsUIPanel",
          "ui.tooltip"  => "YsUITooltip",
          "ui.draggable"  => "YsUIDraggable",
          "ui.droppable"  => "YsUIDroppable",
          "ui.resizable"  => "YsUIResizable",
          "ui.effect"  => "YsUIEffect",
          "ui.video"  => "YsUIVideo"
));

$uiAddonsExt = new Yepsua\SmarTwig\Twig\Extension\UIAddonsExtension();
$uiAddonsExt->setBuilders(array(
	"ui.block" => "YsBlockUI",
	"ui.box" => "YsJQBox",
	"ui.colorpicker" => "YsJQColorPicker",
	"ui.notify" => "YsPNotify",
	"ui.hotkey" => "YsKeys",
	"ui.monitor" => "YsJQMonitor",
	"ui.keypad" => "YsJQKeypad",
	"ui.calculator" => "YsJQCalculator",
	"ui.layout" => "YsJLayout",
	"ui.mask" => "YsJQMask",
	"ui.formWizard" => "YsFormWizard",
	"ui.ajaxForm" => "YsJQForm",
	"ui.validation" => "YsJQValidate",
	"ui.booklet" => "YsJQBooklet",
	"ui.cycle" => "YsJQCycle",
	"ui.ring" => "YsJQRing",
	"ui.upload" => "YsUpload",
));

//Set all extension to Twig

$twig->setExtensions(array(
	new Yepsua\SmarTwig\Twig\Extension\HTMLExtension(),
	new Yepsua\SmarTwig\Twig\Extension\JsSintaxExtension(),
	new Yepsua\SmarTwig\Twig\Extension\JQueryCoreExtension(),
	new Yepsua\SmarTwig\Twig\Extension\UIWidgetExtension(),
	$coreExt,
	$uiAddonsExt
));
  1. 简短的方式

一行代码中一次性加载所有扩展和构建器配置。

require_once 'vendor/autoload.php';

$loader = new Twig_Loader_Filesystem('templates'); 
$twig = new Twig_Environment($loader, array(
    'cache' => 'cache',
	'debug' => true // Only for dev enviroment.
));

$twig->setExtensions(
	Yepsua\SmarTwig\Twig\Extension\SmarTwigExtension::getAllExtensions()
);
  1. 美观的方式

使用 IoC Symfony 组件加载所有扩展和构建器配置。

您需要在 composer.json 中添加以下依赖项

    "require": {
		"symfony/dependency-injection": "2.3.*@dev",
		"symfony/config": "2.4.*@dev",
		"yepsua/smartwig": "1.0.*"
    } 
require_once 'vendor/autoload.php';

use Symfony\Component\DependencyInjection\ContainerBuilder;
use Symfony\Component\Config\FileLocator;
use Symfony\Component\DependencyInjection\Loader\XmlFileLoader;

$container = new ContainerBuilder();
$loader = new XmlFileLoader($container, new FileLocator(__DIR__));
$loader->load('path/to/services.xml');

$twig = $container->get('twig');

现在您可以在 service.xml 文件中编写所有服务配置

<?xml version="1.0" ?>

<container xmlns="https://symfony.com.cn/schema/dic/services"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="https://symfony.com.cn/schema/dic/services https://symfony.com.cn/schema/dic/services/services-1.0.xsd">

  <parameters>
    <parameter key="html.builder.class">YsHTML</parameter>
    <parameter key="jquery.core.builder.class">YsJQuery</parameter>
    <parameter key="jquery.ui.dialog.class">YsHTML</parameter>
    <parameter key="jquery.ui.dialog.class">YsUIDialog</parameter>
    <parameter key="jquery.ui.tabs.class">YsUITabs</parameter>
    <parameter key="jquery.ui.accordion.class">YsUIAccordion</parameter>
    <parameter key="jquery.ui.progressbar.class">YsUIProgressbar</parameter>
    <parameter key="jquery.ui.slider.class">YsUISlider</parameter>
    <parameter key="jquery.ui.autocomplete.class">YsUIAutocomplete</parameter>
    <parameter key="jquery.ui.datepicker.class">YsUIDatepicker</parameter>
    <parameter key="jquery.ui.datetimepicker.class">YsUIDateTimepicker</parameter>
    <parameter key="jquery.ui.button.class">YsUIButton</parameter>
    <parameter key="jquery.ui.multiselect.class">YsUIMultiSelect</parameter>
    <parameter key="jquery.ui.picklist.class">YsUIPickList</parameter>
    <parameter key="jquery.ui.popup.class">YsUIPopUp</parameter>
    <parameter key="jquery.ui.selectmenu.class">YsUISelectMenu</parameter>
    <parameter key="jquery.ui.expander.class">YsUIExpander</parameter>
    <parameter key="jquery.ui.splitter.class">YsUISplitter</parameter>
    <parameter key="jquery.ui.dynaselect.class">YsUIDynamicSelect</parameter>
    <parameter key="jquery.ui.menu.class">YsUIMenu</parameter>
    <parameter key="jquery.ui.panel.class">YsUIPanel</parameter>
    <parameter key="jquery.ui.tooltip.class">YsUITooltip</parameter>
    <parameter key="jquery.ui.draggable.class">YsUIDraggable</parameter>
    <parameter key="jquery.ui.droppable.class">YsUIDroppable</parameter>
    <parameter key="jquery.ui.resizable.class">YsUIResizable</parameter>
    <parameter key="jquery.ui.effect.class">YsUIEffect</parameter>
    <parameter key="jquery.ui.blockUI.class">YsBlockUI</parameter>
    <parameter key="jquery.ui.box.class">YsJQBox</parameter>
    <parameter key="jquery.ui.colorpicker.class">YsJQColorPicker</parameter>
    <parameter key="jquery.ui.notify.class">YsPNotify</parameter>
    <parameter key="jquery.ui.keys.class">YsKeys</parameter>
    <parameter key="jquery.ui.monitor.class">YsJQMonitor</parameter>
    <parameter key="jquery.ui.keypad.class">YsJQKeypad</parameter>
    <parameter key="jquery.ui.calculator.class">YsJQCalculator</parameter>
    <parameter key="jquery.ui.layout.class">YsJLayout</parameter>
    <parameter key="jquery.ui.mask.class">YsJQMask</parameter>
    <parameter key="jquery.ui.formWizard.class">YsFormWizard</parameter>
    <parameter key="jquery.ui.ajaxForm.class">YsJQForm</parameter>
    <parameter key="jquery.ui.validation.class">YsJQValidate</parameter>
    <parameter key="jquery.ui.booklet.class">YsJQBooklet</parameter>
    <parameter key="jquery.ui.cycle.class">YsJQCycle</parameter>
    <parameter key="jquery.ui.ring.class">YsJQRing</parameter>
    <parameter key="jquery.ui.video.class">YsUIVideo</parameter>
    <parameter key="jquery.ui.upload.class">YsUpload</parameter>
	<parameter key="twig.loader.filesystem.location">templates</parameter>
	<parameter key="twig.config.cache">cache</parameter>
	<parameter key="twig.config.debug">true</parameter>
  </parameters>
  <services>
	<!-- TWIG CORE -->
	<service id="twig.loader" class="Twig_Loader_Filesystem">
	  <argument>%twig.loader.filesystem.location%</argument>
    </service>
	<service id="twig" class="Twig_Environment">
	  <argument type="service" id="twig.loader" />
	  <argument type="collection">
		<argument key="cache">%twig.config.cache%</argument>
		<argument key="debug">%twig.config.debug%</argument>
	  </argument>
	  <call method="setExtensions">
		<argument type="collection">
		  <argument type="service" id="smartwig.ui.core" />
		  <argument type="service" id="smartwig.ui.addons" />
		  <argument type="service" id="smartwig.sintax" />
		  <argument type="service" id="smartwig.jquery.core" />
		  <argument type="service" id="smartwig.html.tags" />
		</argument>
	  </call>
    </service>
  
    <!-- TWIG EXTENSIONS -->
    <service id="smartwig.ui.core" class="Yepsua\SmarTwig\Twig\Extension\UICoreExtension">
      <tag name="twig.extension" alias="ui.core" />
      <call method="setBuilders">
        <argument type="collection">
          <argument key="ui.html">%html.builder.class%</argument>
          <argument key="ui.jqueryCore">%jquery.core.builder.class%</argument>
          <argument key="ui.dialog">%jquery.ui.dialog.class%</argument>
          <argument key="ui.tabs">%jquery.ui.tabs.class%</argument>
          <argument key="ui.accordion">%jquery.ui.accordion.class%</argument>
          <argument key="ui.progressbar">%jquery.ui.progressbar.class%</argument>
          <argument key="ui.slider">%jquery.ui.slider.class%</argument>
          <argument key="ui.autocomplete">%jquery.ui.autocomplete.class%</argument>
          <argument key="ui.datepicker">%jquery.ui.datepicker.class%</argument>
          <argument key="ui.datetimepicker">%jquery.ui.datetimepicker.class%</argument>
          <argument key="ui.button">%jquery.ui.button.class%</argument>
          <argument key="ui.multiselect">%jquery.ui.multiselect.class%</argument>
          <argument key="ui.picklist">%jquery.ui.picklist.class%</argument>
          <argument key="ui.popup">%jquery.ui.popup.class%</argument>
          <argument key="ui.selectmenu">%jquery.ui.selectmenu.class%</argument>
          <argument key="ui.expander">%jquery.ui.expander.class%</argument>
          <argument key="ui.splitter">%jquery.ui.splitter.class%</argument>
          <argument key="ui.dynaselect">%jquery.ui.dynaselect.class%</argument>
          <argument key="ui.menu">%jquery.ui.menu.class%</argument>
          <argument key="ui.panel">%jquery.ui.panel.class%</argument>
          <argument key="ui.tooltip">%jquery.ui.tooltip.class%</argument>
          <argument key="ui.draggable">%jquery.ui.draggable.class%</argument>
          <argument key="ui.droppable">%jquery.ui.droppable.class%</argument>
          <argument key="ui.resizable">%jquery.ui.resizable.class%</argument>
          <argument key="ui.effect">%jquery.ui.effect.class%</argument>
          <argument key="ui.video">%jquery.ui.video.class%</argument>
        </argument>   
      </call>      
    </service>
    <service id="smartwig.ui.addons" class="Yepsua\SmarTwig\Twig\Extension\UIAddonsExtension">
      <tag name="twig.extension" alias="ui.addons" />
      <call method="setBuilders">
        <argument type="collection">
          <argument key="ui.block">%jquery.ui.blockui.class%</argument>
          <argument key="ui.box">%jquery.ui.box.class%</argument>
          <argument key="ui.colorpicker">%jquery.ui.colorpicker.class%</argument>
          <argument key="ui.notify">%jquery.ui.notify.class%</argument>
          <argument key="ui.hotkey">%jquery.ui.keys.class%</argument>
          <argument key="ui.monitor">%jquery.ui.monitor.class%</argument>
          <argument key="ui.keypad">%jquery.ui.keypad.class%</argument>
          <argument key="ui.calculator">%jquery.ui.calculator.class%</argument>
          <argument key="ui.layout">%jquery.ui.layout.class%</argument>
          <argument key="ui.mask">%jquery.ui.mask.class%</argument>
          <argument key="ui.formWizard">%jquery.ui.formWizard.class%</argument>
          <argument key="ui.ajaxForm">%jquery.ui.ajaxForm.class%</argument>
          <argument key="ui.validation">%jquery.ui.validation.class%</argument>
          <argument key="ui.booklet">%jquery.ui.booklet.class%</argument>
          <argument key="ui.cycle">%jquery.ui.cycle.class%</argument>
          <argument key="ui.ring">%jquery.ui.ring.class%</argument>
          <argument key="ui.upload">%jquery.ui.upload.class%</argument>
        </argument>   
      </call>      
    </service>
    <service id="smartwig.sintax" class="Yepsua\SmarTwig\Twig\Extension\JsSintaxExtension">
      <tag name="twig.extension" alias="js.sintax" />
    </service>
    <service id="smartwig.jquery.core" class="Yepsua\SmarTwig\Twig\Extension\JQueryCoreExtension">
      <tag name="twig.extension" alias="jquery.core" />
    </service>
    <service id="smartwig.html.tags" class="Yepsua\SmarTwig\Twig\Extension\HTMLExtension">
      <tag name="twig.extension" alias="html.tags" />
    </service>	
    <!-- TWIG EXTENSIONS -->
	
  </services>
</container>

这种方式对于性能和可扩展性是最推荐的。

基本使用

/index.php 内容

require_once 'vendor/autoload.php';

$loader = new Twig_Loader_Filesystem('templates'); 
$twig = new Twig_Environment($loader, array(
    'cache' => 'cache',
	'debug' => true // Only for dev enviroment.
));

$twig->setExtensions(
	Yepsua\SmarTwig\Twig\Extension\SmarTwigExtension::getAllExtensions()
);

echo $twig->render('index.html', array('name' => 'Fabien'));

/templates/index.html 内容

<html>
<head>

{% include 'path/to/jquery4php-assets/smartwigAssets.html' %}

</head>
<body>

<div style="display:none">
	{% ui_dialog title="Hello World" %}
		The name is: <b>{{ name }}</b>
	{% end_ui_dialog %}
</div>

</body>
</html>

### 信息：smartwigAssets.html 是用于测试所有 SmarTwig 组件的示例文件，您必须编辑此文件以包含您需要的部分。

SmarTwig Showcase

Sf2 包

如果您使用 Sf2 框架，我们推荐使用 SmarTwigBundle

享受

展示 Twig jQuery4PHP