After a couple of weeks i decided to write another post about Symfony 1.2 and jQuery. This simple tutorial shows you how integrate jQuery layout plugin, jQuery accordion widget for navigation and Symfony admin generator.
Symfony offers nice and powerfull admin generator feature. After rewriting in version 1.2 it uses form and filter framework which makes it really easy and customizable. For more details you need to check admin generator documentation .
“JQuery Layout plug-in was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any UI look you want - from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.”
What i really like about the admin generator is its… generator feature. After a couple of minutes we have all the basic actions for our models. We can also add custom actions and modify templates. The missing component for me is navigation. We can create some simple navigation between modules alone, we can also use nice Symfony plugin: sfAdminDashPlugin or jQuery plugin: layout. The picture below shows the final result of what i’m going to do in this tutorial.
First we need to create new project and for example new backend application. In this example we are going to use database so database configuration is necessary. For this tutorial i have chosen Propel but it doesn’t matter which ORM you are going to use - both provide admin generator feature.
<?php
symfomy generate:project sfLayout
symfomy generate:app backend
symfomy configure:database "mysql:host=localhost;dbname=sf_layout" user pass
?>
I will also install and configure sfGuardPlugin ( sfGuard plugin installation and configuration ) for some custom data:
symfony plugin:install sfGuardPlugin
I don’t want to create any other model class for such simple tutorial - You can do it for practice.
After that we need to download latest jQuery Core and jQuery layout plugin version and put it in web/js/jQuery directory. We can add those scripts through view.yml file in config dir of backend appliaction. My view.yml
default: stylesheets: [admin.css, jQuery/smoothness/jquery-ui-1.7.1.custom.css] javascripts: [jQuery/jquery-1.3.2.min.js, jQuery/jquery-ui-1.7.1.custom.min.js, jQuery/jquery.layout.min.js] has_layout: on layout: layout
After that all we have to do is to setup the layout. Layout plugin configuration depends on modules you want to use for you backend appliaction. In my example i have added page module to show you how usefull accordion navigation could be. My layout.php file looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<?php include_http_metas() ?>
<?php include_metas() ?>
<?php include_title() ?>
<?php include_javascripts() ?>
<?php include_stylesheets() ?>
<link rel="shortcut icon" href="/favicon.ico" />
<?php javascript_tag(); ?>
var outerLayout; // init global vars
$(document).ready( function() {
// PAGE LAYOUT
outerLayout = $('body').layout({
applyDefaultStyles: true
// AUTO-RESIZE Accordion widget when west pane resizes
, west__onresize: function () { $("#accordion").accordion("resize"); }
, west__size: 280
, east__size: 340
});
// ACCORDION - inside the West pane
var accor = $("#accordion").accordion({
fillSpace: true,
header: "h3",
animated: 'bounceslide',
active: false,
navigation: true
});
<?php switch($this->getModuleName()):
case 'sfGuardUser': ?>
<?php case 'sfGuardPermission': ?>
$("#accordion").accordion( 'activate' , 0 );
<?php break; ?>
<?php case 'page': ?>
$("#accordion").accordion( 'activate' , 1 );
<?php break; ?>
<?php endswitch; ?>
});
<?php end_javascript_tag(); ?>
</head>
<body>
<div class="ui-layout-west">
<div id="accordion" class="basic">
<h3><a href="#">Users</a></h3>
<div>
<p> Manage users, groups and permissions. </p>
<ul>
<li> <?php echo link_to('Users list', 'sfGuardUser/index') ?> </li>
<li> <?php echo link_to('Add user', 'sfGuardUser/new') ?> </li>
<li> <?php echo link_to('Groups list', 'sfGuardGroup/index') ?> </li>
<li> <?php echo link_to('Permissions list', 'sfGuardPermission/index') ?> </li>
</ul>
</div>
<h3><a href="#">Static pages</a></h3>
<div>
<p> Manage static page content. </p>
<ul>
<li> <?php echo link_to('Pages list', 'page/index') ?> </li>
<li> <?php echo link_to('Add page', 'page/new') ?> </li>
</ul>
</div>
</div>
</div>
<div class="ui-layout-center">
<?php echo $sf_content ?>
</div>
<div class="ui-layout-north">
<div class="left">
Back to <strong><a href=#" > website </a></strong>
</div>
<div class="right">
Logged in as: <strong> <?php echo $sf_user->getGuardUser()->getUsername() ?> </strong>
<?php echo link_to('Sign out', 'sfGuardAuth/signout') ?>
</div>
</div>
<div class="ui-layout-south">
<div class="left">
Footer
</div>
</div>
</body>
</html>
I think that there is some better way to set the active tab in navigation but this one is also working well. For advance use we can also modify admin generator layout structure and put for example list filters in east panel so it could be toggleable as any other panel.
Nice to see your comments, enjoy.
Loading ...
Nice job ! You save me enough time for drinking a couple of beers
Regards,
David
Hello, I’m using the theme but I have trouble showing the sfWidgetFormJQueryDate of sfFormExtraPlugin,I’m trying to implement it with the admin generator but It apears behind the tables..
Check integration with UI widgets at:
http://layout.jquery-dev.net/tips.html#Widget_DatePicker
This should helps.
Hello Kamil, thanks for the advice the only change I did was add “#ui-datepicker-div { z-index: 5; }” to my main css, and it works perfect …
Hello! Where i get admin.css ?
Hi, admin.css is not really required for this example. It’s just my custom stylesheet.
Awsome, you should make a plugin to handle this with the menu link_to’s etc in a config file.
btw, can you add your admin.css??
Admin.css is not required for this example. I put there some custom css for my login panel.
Спасибо, прочитал на одном дыхании))