SmarTwig
========
Ultimate Components Extension for Twig.
You can use Twig and SmarTwig and any PHP Project.
Instalation
===========
You can install the SmarTwig in 2 different ways:
1. Use the [Git repository](https://github.com/oyepez003/smartwig)
2. Install it via Composer on [Packagist](https://packagist.org/packages/yepsua/smartwig)
The Assets:
-----------
All the SmarTwig Components need some .css and .js files to work.
Get the resources cloning the [Git repository](https://github.com/oyepez003/jquery4php-assets) or [ Download the Zip] (https://github.com/oyepez003/jquery4php-assets/archive/master.zip)
Put content of the repo in your app public folder.
How To Use (3 Ways)
===================
1) The Ugly Way:
----------------
Load all Extensions and the Builders Configuration step by step.
``` 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.
));
$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
));
```
2) The Short Way:
-----------------
Load all Extensions and the Builders Configuration in one line of code.
``` 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()
);
```
3) The Pretty Way:
------------------
Load all Extensions and the Builders Configuration using The IoC Symfony Component.
You need add to your composer.json the next dependencies:
``` yml
"require": {
"symfony/dependency-injection": "2.3.*@dev",
"symfony/config": "2.4.*@dev",
"yepsua/smartwig": "1.0.*"
}
```
``` php
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');
```
Now you can write all the services configuration in the service.xml file:
``` xml
YsHTML
YsJQuery
YsHTML
YsUIDialog
YsUITabs
YsUIAccordion
YsUIProgressbar
YsUISlider
YsUIAutocomplete
YsUIDatepicker
YsUIDateTimepicker
YsUIButton
YsUIMultiSelect
YsUIPickList
YsUIPopUp
YsUISelectMenu
YsUIExpander
YsUISplitter
YsUIDynamicSelect
YsUIMenu
YsUIPanel
YsUITooltip
YsUIDraggable
YsUIDroppable
YsUIResizable
YsUIEffect
YsBlockUI
YsJQBox
YsJQColorPicker
YsPNotify
YsKeys
YsJQMonitor
YsJQKeypad
YsJQCalculator
YsJLayout
YsJQMask
YsFormWizard
YsJQForm
YsJQValidate
YsJQBooklet
YsJQCycle
YsJQRing
YsUIVideo
YsUpload
templates
cache
true
%twig.loader.filesystem.location%
%twig.config.cache%
%twig.config.debug%
%html.builder.class%
%jquery.core.builder.class%
%jquery.ui.dialog.class%
%jquery.ui.tabs.class%
%jquery.ui.accordion.class%
%jquery.ui.progressbar.class%
%jquery.ui.slider.class%
%jquery.ui.autocomplete.class%
%jquery.ui.datepicker.class%
%jquery.ui.datetimepicker.class%
%jquery.ui.button.class%
%jquery.ui.multiselect.class%
%jquery.ui.picklist.class%
%jquery.ui.popup.class%
%jquery.ui.selectmenu.class%
%jquery.ui.expander.class%
%jquery.ui.splitter.class%
%jquery.ui.dynaselect.class%
%jquery.ui.menu.class%
%jquery.ui.panel.class%
%jquery.ui.tooltip.class%
%jquery.ui.draggable.class%
%jquery.ui.droppable.class%
%jquery.ui.resizable.class%
%jquery.ui.effect.class%
%jquery.ui.video.class%
%jquery.ui.blockui.class%
%jquery.ui.box.class%
%jquery.ui.colorpicker.class%
%jquery.ui.notify.class%
%jquery.ui.keys.class%
%jquery.ui.monitor.class%
%jquery.ui.keypad.class%
%jquery.ui.calculator.class%
%jquery.ui.layout.class%
%jquery.ui.mask.class%
%jquery.ui.formWizard.class%
%jquery.ui.ajaxForm.class%
%jquery.ui.validation.class%
%jquery.ui.booklet.class%
%jquery.ui.cycle.class%
%jquery.ui.ring.class%
%jquery.ui.upload.class%
```
This way is the most recommended for performance and scalability.
Basic Usage
===========
The /index.php content:
``` 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'));
```
The /templates/index.html content:
``` html
{% include 'path/to/jquery4php-assets/smartwigAssets.html' %}
{% ui_dialog title="Hello World" %}
The name is: {{ name }}
{% end_ui_dialog %}
```
###Info:
The smartwigAssets.html is an example file for test all the SmarTwig
Components, You must edit this file for include only that you need.
The Sf2 Bundle
==============
If you are using Sf2 Framework we recommend the [SmarTwigBundle](https://github.com/oyepez003/YepsuaSmarTwigBundle)
Enjoy
[Showcase](http://smartwig.yepsua.com/web/)
[Twig](http://www.twig-project.org/)
[jQuery4PHP](http://jquery4php.sourceforge.net/)