As a developer you can’t wait using the various features of Symfony 2 in eZ Publish 5. After the first successful “Hello World”, we go one step further now: We will first create our own sandbox website using a custom Symfony 2 bundle. In this way we want to show how to “actually” use Symfony 2 in eZ Publish 5 for the very first time. All files and directories discussed in this “hands on” article are available here for download.
Our sandbox website should contain stylesheets, javascript-code, jQuery, etc., such that we can act within an environment that is as much representative as possible. Besides, I personally prefer not to see unformatted Times New Roman all the time while working on a certain topic 
One thing you should know beforehand: We create our Symfony 2 bundle manually. As we want to grasp in detail which code is essential for a bundle, we do not use Symfony’s capability tocreate a bundle automatically via CLI.
A bundle consists at least of the directory Controller and the directory Ressources, which contains three subdirectories: config, public und views. We limit our explanations to the fundamental excerpts of each file at this point.
After having created the directory tree we should be able to generate a page by the simple means common for MVC frameworks such as Symfony 2: A route, a controller comprising an action that the route refers to, and a template used for the output of the view. We create the files as depicted by the figure above. Of course, further configuration is needed to prepare everything for the new bundle. The documentation of the Symfony 2 framework recommends to configure the routes to a particular bundle in a separate file. Therefore we have to add an appropriate reference to our global routing:
ezpublish5/app/config/routing.yml
|
1 2 |
ymcSandbox: resource: "@ymcSandboxBundle/Resources/config/routing.yml" |
In the file routing.yml we created as part of the bundle, we define a simple route that includes an ID, which identifies a content object from our installation of eZ Publish:
ezpublish5/src/Ymc/SandboxBundle/Resources/config/routing.yml
|
1 2 3 4 5 6 |
sandbox: pattern: /sandbox/{contentId} defaults: _controller: ymcSandboxBundle:Sandbox:sandbox requirements: contentId: \d+ |
Next we have to register our bundle class in the kernel of eZ Publish 5:
ezpublish5/app/EzPublishKernel.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
… use Ymc\SandboxBundle\YmcSandboxBundle; … … … public function registerBundles() { $bundles = array( … … … new YmcSandboxBundle() ); … |
In order to have any content objects at all, those have to be created via eZ Publish’s admin interface as usual. Unfortunately there is no trace of such an interface in the code of eZ Publish 5 so far. Though, as the database in the background has just to be filled with content, the legacy system should be sufficient for that purpose as well. Given you have chosen “plain_site” in the installation process of eZ Publish 4, you can reach the admin interface of eZ Publish 4 with the URL
…/ezpublish_legacy/index.php/plain_site_admin/.
There, a subtle information indicates that you are in the legacy system belonging to eZ Publish 5 – the highlighted version number on the dashboard:
5.0.0alpha1
Subsequently to the creation of a new content object of type “folder” we proceed: In the controller, we define an action named sandbox, which the routing refers to. In this action, we simply specify the template to be used as well as a concrete value for an arbitrary variable – in our case the template placeholder content.
ezpublish5/src/Ymc/SandboxBundle/Controller/SandboxController.php
|
1 2 3 4 5 6 7 8 9 10 11 |
… public function sandboxAction($contentId) { return $this->render( "ymcSandboxBundle::ezcontent.html.twig", array( "content" => $this->getRepository()->getContentService()->loadContent($contentId) ) ); } ... |
By the newly created view ezcontent.html.twig we experience our first contact with Twig, a separate template engine that has been developed by the makers of Symfony 2. In the course of eZ Publish 5, eZ Systems discards its custom template engine and employs Twig from this time forward. You can grasp the syntax’ structure and its particular capabilities, such as control structures, by means of the Twig’s documentation.
In our contrived scenario, we just want to output the variable content set by the controller. In the simplest case, we therefor rely on that part of the information to the content object which is unversioned contentInfo by using its attributes, eg. name and id. In Twig’s block notation that looks like this.
ezpublish5/src/Ymc/SandboxBundle/Resources/views/ezcontent.html.twig
|
1 2 3 4 5 6 |
{% block content %} <div> <h3>Object ID : #{{ content.contentInfo.id }}</h3> <h3>Object Name : {{ content.contentInfo.name }}</h3> </div> {% endblock %} |
Now we packed everything that is necessary to request our page. With
…/ezpublish5/web/index.php/sandbox/1 that should be possible. However, when requesting the page it seems as if something in not working properly: A Javascript alert “An error occurred while loading the web debug toolbar (500: Internal Server Error)…” appears. The profiler’s toolbar can not be loaded and code information is missing as well. In place of that we receive a 404 response.
What was that again… In order to use a fresh bundle you have to link its non-public paths yet. You can accomplish that by CLI:
Thus we created all links and directories needed for the required sources. In practice, it is recommendable to establish new Symfony 2 bundles by CLI in general. Thereby, typos and structural errors can be prevented and you save a lot of time, as you can see.
On our page we see a rather unspectacular output now:
Object ID : #1
Object Name : eZ Publish5
In order to complete our sandbox, we have to add a page layout which the content information is embedded into. For that, we need a basic markup. In the simplest case that markup – without any stylesheets – could be structured in the following way:
|
1 2 3 4 5 6 7 |
<!DOCTYPE html> <head> </head> <body > {% block content %}{% endblock %} </body> </html> |
Though, for the sake of a proper demonstration, we prefer one of those numerous templates that are freely available on the web – in this case that theme for example. In that template, the content from our template ezcontent.html.twig is embedded during the rendering by Symfony’s implemenation of the Twig engine. A stylesheet can be included as a so-called asset:
|
1 |
{{ asset( "bundles/ymcsandbox/css/style.css" ) }} |
By adding some jQuery, a page title and a charset specification we have a quite acceptable basic structure for our sandbox. The stylesheet path bundles/ymcsandbox/css should be located in the public-directory belonging to the bundle – consequently at src/Ymc/SandboxBundle/Resources/public/css/ in the filesystem.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <head> <meta charset="utf-8"/> <title>eZPublish5 Sandbox</title> <link rel="stylesheet" type="text/css" href="{{ asset( "bundles/ymcsandbox/css/coolblue.css" ) }}"/> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body > <header> header </header> {% block content %}{% endblock %} <footer> footer </footer> </body> </html> |
Extended by some additional markup for the stylesheets the complete page layout could look like this. To put the layout into action, we incorporate it into our content template with the statement extends:
/ezpublish5/src/Ymc/SandboxBundle/Resources/views/pagelayout.html.twig
|
1 2 3 4 5 6 7 8 |
{% extends "ymcSandboxBundle::pagelayout.html.twig" %} {% block content %} <div> <h3>Object ID : #{{ content.contentInfo.id }}</h3> <h3>Object Name : {{ content.contentInfo.name }}</h3> </div> {% endblock %} |
Finally we have accomplished it: A complete website based upon a custom Symfony 2 bundle, which serves us with a sandbox.
That was a further blog article in our “hands on” series about eZ Publish 5. Don’t hesitate to comment on it or to suggest an idea for another article. In the next article we will deal with how to migrate a module from eZ Publish 4 to eZ Publish 5 in the best possible way.