The concept behind LayoutBundle (Symfony 2.x)
Before We Start
How we compose a web page layout normally? There are no fixed rules to compose the web page layouts, most of the time we use layout pattern like, Header, Sidebar, Content, Footer. A web page is full of widgets or blocks, which have different functionality. Web Application have one or more than one pages, every page have its own layout composition. While creating a layout system, we aim to create a layout system that fits almost every layout composition/design.
Features of LayoutBundle
LayoutBundle have many usefull features:
- Multi theme supported
- Theme regions and blocks supported
- Xml based layout configuration file
- Inline theme blocks support
- Fully extendable
Todo list
updates for next version:
- Dynamic breadcrumbs
- Customizeable menus/links
- Region and block visibilty rules
- Block sorting
- Fancy error pages
- Url rules
- Theme assets management
- Custom and customizedable/extendable header and footer
- User roles and permissions on layout
- Dashboard/Widgets
- Dynamic head titles
- Head meta tags
- Head sharing tags
- Ajax blocks
- Schema markup
- Multi language support
- Useful helper commands
Why I need to develop LayoutBundle?
Symfony is very powerful php framework with a strong template engine(twig). Doctrine ORM made symfony2 the best choice to develop larger web applications smoothly. During development in symfony, I want to develop a layout system/theming engine which helps frontend/backend developers to integrate UI with backend without any issue. This component will help developer in following ways:
- More productive
- One click theme change
- URL rules effect on theme templates
- Easy to use
- Automated repeated work
- Fully extendable
- User permissions on layout level
- Dynamic dashboard/ajax supported wigets
- Page performance optimization
- All themes in one pack
- Implement maximum layout related features
- Easy to deploy
- Easily integrate a web design with backend functionality
- Support modern css frameworks like Bootstrap & Foundation.
- Integrate with node.js and other JS frameworks
- SEO friendly
This Layout component is not completed yet, it is still in initial stage. I want to share this component with all developers for suggestions and to help make it better.
Flexibility and productivity is the key point of LayoutBundle
Layouts inspirations!
During the development with frameworks a UI or design is hard to integrate. Mostly developers did not follow the design standards. So the final design is not fully compatible with backed. I always try to create small UI's myself to improve my front end skills. The best layout must have 3 following features, portable, customiseable, and extendable. Drupal has a very powerful UI layout structure, with usable building blocks. Magneto's layout structure is also powerful but its configuration is very complex. so my aim is to develop a layout system which will be easy to customize can be used with any frame work with simple one click install and yet simple to understand and configure .
I inspired theming of Drupal & Magneto.
Layout Configurations
LayoutBundle provide full support for multi-themes. How can you apply the theme or themes? This bundle uses a central configuration file which is “layouts.xml”. This file is the main handler for themes. You can define rule for specific theme or theme template in this file. This file have predefined pattern which is in detail explained in LayoutBundle doc file. In below diagram, you can see the basic flow of “layouts.xml” file.
Theme templates changed based on urls
How LayoutBundle services communicate?
The layoutbundle have many services which performs different tasks. All services are sharing information. Here are some step which will guide you about services flow:
1. LayoutListener : When a request will be made it will invoke HTTPKenel events. LayoutBundle is using three HttpKernel events:
- "onKernelRequest()" here is the start point of layoutbundle. LayoutBundle will set the urls to 'LayoutThemeResolver' services and get parent template.
- "onKernelController()" here layoutbundle sets the twig variables to request attributes.
- "onKernelView()" here layoutbundle get template and twig variables attribute from request object and set into response.
2. LayoutThemeResolver : This service gives the information(current url) to 'LayoutBuilder' and returns parent template from it.
3. LayoutBuilder : 'LayoutBuilder' sets current infomation to 'LayoutTemplateRenderer' service and get parent template that is found in layouts.xml file
4. LayoutTemplateRenderer : This service is reponsible to build regions and block.
5. ThemeHelper : 'ThemeHelper' provides 'regions' and 'inlineblocks'
6. ThemeExtention : Twig helper
How Regions and blocks work?
Regions and bloks are main part of layoutbundle. LayoutBundle scans the specified bundles and find blocks for layout region. How this works? when you configure the layoutbundle you can see the option: This option helps layout bundle to find blocks from a specific namespace e. if you set vest namespace, layout bundle will scan all bundles from "Vest" namespace and collect the blocks to fit in template regions. Theme name space configuration option accepts one or more parameters(name spaces). Every bundle which blocks we wish to use in our layout. It's name space must be added in configuration, multiple name spaces are added comma separated. Blocks configuration file performs main role to handle blocks attributes with layout system using block config file you can define block visibility rules and set many other options.
Finally, your thoughts
This bundle is in initial stage and we want to add more features. We value your precious feedback and will review/implement suggestions from you. So please take time and write to us “bleak.unseen@gmail.com”