Wallogit.com
2017 © Pedro Peláez
Zend Framework (2) View Helper to load UI resources
This one is a Zend Framework (2) View Helper to load CSS and JavaScript resources with a special focus on dependencies., (*1)
The resource loader registers the requested CSS and JavaScript resources to your ZF head*() view helpers and resolves the resource dependencies correctly, (*2)
F.e. if you're using Bootstrap, then jQuery is a required resource of Bootstrap. So you have to define two resources, but you only have to load - and think about - the Bootstrap resource, because you already configured the dependency (Bootstrap requires jQuery) in your configurastion., (*3)
Here's a module configuration example. First of all we need to register the View Helper in the view helper service configuration., (*4)
return array(
'view_helpers' => array(
'factories' => array(
'resource' => 'AntiPhp\ResourceLoader\View\Helper\ResourceLoaderServiceFactory'
)
)
);
In the same configruation file we need to define our resource configuration like this:, (*5)
return aray(
'resource_loader' => array(
'resources' => array(
'jquery' => array(
'js' => 'vendor/jquery/jquery.min.js'
),
'bootstrap' => array(
'js' => 'vendor/bootstrap/js/bootstrap.min.js',
'css' => 'vendor/bootstrap/css/bootstrap.min.css',
'requires' => 'jquery'
),
'bootstrap.themed' => array(
'css' => 'vendor/bootstrap/css/bootstrap-theme.min.css',
'requires' => 'boostrap'
),
'yaml' => array(
'css' => array(
'vendor/yaml/css/flexible-columns.css',
array('vendor/yaml/yaml/core/iehacks.css', 'lte IE 7')
),
'requires' => 'html5shiv'
),
'my_layout_1' => array(
'requires' => array(
'bootstrap.themed',
'font-awesome'
)
),
'my_layout_2' => array(
'requires' => 'yaml'
),
// html5shiv, font-awesome, data-tables, ...
)
)
);
Now that the resource loader knows all UI resources, we can use them within our layout based on Bootstrap:, (*6)
$this->resource('my_layout_1');
// refers to configuration key resource_loader/resources/my_layout_1
?>
<html>
<head>
headLink();
echo $headLink->toString(8), PHP_EOL;
$headScript = $this->headScript();
echo $headScript->toString(8), PHP_EOL;
?>
</head>
<!-- .. -->
</html>
Or maybe we prefer YAML over Bootstrap:, (*7)
$this->resource('my_layout_2');
// refers to configuration key resource_loader/resources/my_layout_2
?>
<html>
<head>
headLink();
echo $headLink->toString(8), PHP_EOL;
$headScript = $this->headScript();
echo $headScript->toString(8), PHP_EOL;
?>
</head>
<!-- .. -->
</html>
Or within a view script we'd like to use jQuery DataTables:, (*8)
$this->resource('data-table');
?>
<table class="data-table">
<!-- .. -->
</table>
The resource loader assures that only the required resources are loaded and that you only have to think once about dependencies., (*9)
Zend Framework (2) View Helper to load UI resources