As a result, i received sfWidgetFormJQueryMultiSelect.

<?php

/**
 * sfWidgetFormJQueryMultiSelect represents a multi choice select widget.
 *
 * @package    symfony
 * @subpackage widget
 * @author     Kamil Adryjanek <kamil.adryjanek@gmail.com>

 */
class sfWidgetFormJQueryMultiSelect extends sfWidgetFormChoice
{
  /**
   * Constructor.
   *
   * Available options:
   *
   *  * choices:          An array of possible choices (required)
   *  * renderer_class:   The class to use instead of the default ones
   *  * renderer_options: The options to pass to the renderer constructor
   *  * renderer:         A renderer widget (overrides the expanded and renderer_options options)
   *                      The choices option must be: new sfCallable($thisWidgetInstance, 'getChoices')
   * @param array $options     An array of options
   * @param array $attributes  An array of default HTML attributes
   *
   * @see sfWidgetFormChoiceBase
   */

  protected function configure($options = array(), $attributes = array())
  {
    $this->addOption('config', '{}');

    parent::configure($options, $attributes);

    $this->setOption('multiple', true);
    $this->setOption('expanded', true);
  }

  /**
   * @param  string $name        The element name
   * @param  string $value       The value selected in this widget
   * @param  array  $attributes  An array of HTML attributes to be merged with the default HTML attributes
   * @param  array  $errors      An array of errors for the field
   *
   * @return string An HTML tag string
   *
   * @see sfWidgetForm
   */
  public function render($name, $value = null, $attributes = array(), $errors = array())
  {
    return parent::render($name, $value = null, $attributes = array(), $errors = array()).
    	   sprintf(<<<EOF
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#%s").multiSelect(
      %s
   );
 });

</script>
EOF
      ,
      $this->generateId($name),
      $this->getOption('config')
      );
  }
}

How to use it
Include into your application neccessary JavaScripts (jQuery 1.4+ and jQuery UI required) and stylesheets: (for example view.yml):

  stylesheets:    [main.css, ui-lightness/jquery-ui-1.7.2.custom.css, jquery.multiselect.css]

  javascripts:    [jquery.js, jquery-ui.js, jquery.multiselect.js]

Then we need to create simple form and set our widgets:

<?php

class SimpleForm extends sfForm {

	public function configure() {

		$userChoices = array('John', 'Michael', 'Tom', 'Peter');

		$this->setWidgets(array(
			'users'	=> new sfWidgetFormJQueryMultiSelect(array(
				'choices'	=> $userChoices
			))
		));

		$this->setValidators(array(
			'users'	=> new sfValidatorChoice(array(
				'choices'	=> array_keys($userChoices)
			))
		));
	}
} 

How does it work (look)
Form should now look similar to that:

Widget should work with Symfony 1.2.X - 1.4.X.

More information about jquery.multiselect plugin can be found on this page.

In the near future I would like to create Symfony widget and put there some of my custom widgets (for example sfWidgetFormJQueryDateTime).

Enjoy

function __(string) {

	 if (typeof(i18n)!='undefined' && i18n[string]) {

		return i18n[string];
	}

	return string;
}

Then i attached another JavaScript file with translations object (before including __() function), for example we can call this file “pl_PL.js” and put there code:

var i18n = {
	'Country.'							: 'Kraj',
	'Description'						: 'Opis',
	'Population'						: 'Populacja',
	'Created at'						: 'Data utworzenia',
	'Symfony 1.2 and Ext.js example'	: 'Przykład wykorzystania Symfony 1.2 i Ext.js '
}

In our ExtJS components (or any other JavaScript code) we just simple call (example code from latest entry):

	//columns structure
	var columns = [
		{id:'name',header: __('Country'), width: 160, sortable: true, dataIndex: 'name'},
		{header: __('Description'), width: 160, sortable: false, dataIndex: 'description'},
		{header: __('Population'), width: 160, sortable: true, dataIndex: 'population'},
		{header: __('Created at'), width: 100, sortable: true, dataIndex: 'created_at'}
	];

	// gridPanel object
	var grid = new Ext.grid.GridPanel({
		title: __('Symfony 1.2 and Ext.js example'),
		loadMask: true,   // mask panel when data is loading
		store: store,
		columns: columns,
		autoExpandColumn: 'name',
		height: 400,
		width: 600,
		renderTo: 'grid-example'  // DOM element
	});

});

For me it’s simple, powerfull and really usefull.

Configuration

The necessary configuration for the tutorial:

• any server with PHP support at least version 5.2.4 + MySql database;
• Symfony framework installed version 1.4.X (latest stable Symfony version is always recommended);
• access to the command line;

At the begining

After setting up the environment we need to create a new Symfony project, generate frontend application (if you use the sandbox is already generated) and a sample module, eg grid.
To do so in the project directory from the command line should be performed sequentially:

symfony generate:project sfExtTest

symfony generate:app frontend

symfony generate:module frontend grid

Connection to the database and test data
For our simple example, we could use static data created in JavaScript, howewer, i would like to show the flow of data between the client application, server and database (ExtJs - Symfony - MySql), so additional configuration is required.

You must configure the connection to database, create tables and load test data. The fallowing code is responsible for the above items (almost the same data have been used previously in this tutorial).

Configuring a database connection:

symfony configure:database mysql:host=localhost;dbname=your_db_name user pass

The structure of the test table:

country:
  actAs: [timestampable]
  columns:
    name:         string(50)
    description:  string(255)
    population:   integer(4)

Test data:

Country:
  Country_:
    name: 'Poland'
    description: 'Description for Poland'
    population: 38130302
  Country_2:
    name: 'Germany'
    description: 'Description for Germany'
    population: 82060000
  Country_3:
    name: 'Brazil'
    description: 'Description for Brazil'
    population: 192098152
  Country_4:
    name: 'USA'
    description: 'Description for USA'
    population: 308147000
  Country_5:
    name: 'Ireland'
    description: 'Description for Ireland'
    population: 6300000
  Country_6:
    name: 'Canada'
    description: 'Description for Canada'
    population: 33874000
  Country_7:
    name: 'India'
    description: 'Description for India'
    population: 1198003000
  Country_8:
    name: 'Italy'
    description: 'Description for Italy'
    population: 60200060
  Country_9:
    name: 'Spain'
    description: 'Description for Spain'
    population: 46661950
  Country_10:
    name: 'Portugal'
    description: 'Description for Portugal'
    population: 10707924
  Country_11:
    name: 'Argentina'
    description: 'Description for Argentina'
    population: 40482000
  Country_12:
    name: 'Estonia'
    description: 'Description for Estonia'
    population: 1340415
  Country_13:
    name: 'Bulgaria'
    description: 'Description for Bulgaria'
    population: 7606551
  Country_14:
    name: 'France'
    description: 'Description for France'
    population: 65073482
  Country_15:
    name: 'Belgium'
    description: 'Description for Belgium'
    population: 10665867
  Country_16:
    name: 'Austria'
    description: 'Description for Austria'
    population: 8356707
  Country_17:
    name: 'Australia'
    description: 'Description for Australia'
    population: 22076000
  Country_18:
    name: 'Japan'
    description: 'Description for Japan'
    population: 127590000
  Country_19:
    name: 'Russia'
    description: 'Description for Russia'
    population: 141909279
  Country_20:
    name: 'Slovakia'
    description: 'Description for Slovakia'
    population: 5379455
  Country_21:
    name: 'Ukraine'
    description: 'Description for Ukraine'
    population: 46011300

Now we need to run from command line sequentially:

  symfony doctrine:build --sql
  symfony doctrine:build --model
  symfony doctrine:build --db
  symfony doctrine:data-load

ExtJS
Next step is to download the latest version (3,0) of ExtJs library from the project official website and unpack it to js/ext directory.

At this point we make changes to the configuration file: view.yml, so that the framework automatically attached the appropriate library js and css (changes should be made to the file: app/frontend/config/view.yml):

  stylesheets:
    - ../js/ext/resources/css/ext-all.css

  javascripts:
    - ext/adapter/ext/ext-base-debug.js
    - ext/ext-all-debug.js

It’s recommended to organize JavaScript code in separate JS file, but in this case, the code responsible for displaying the grid put in the index action view grid module.

To be able to begin to work with the grid component we need to know at least the basis of its architecture and components. GridPanel essentially consists of 4 items:

• Store - object responsible for data storing, including communication with server - in our case JsonStore;
• Column model - display configuration for each column (such as rendering options);
• View - special display settings;
• Selection model - optional component, is responsible for operations on columns (onClick, onSelect, onBeforeSelect) - i wiil try to show the use of this comopnent in a separate entry;

To display the basic version of the grid we need the data, the configuration of columns that we want to display and configuration of the view (grid also accepts additional configuration options that are described in detail in the documentation).

The following code is responsible for all the above elements (file: apps/frontend/modules/grid/templates/indexSuccess.php):

<div id="grid-example"> </div>

<script type="text/javascript">

Ext.onReady(function() {

	// component responsible for connection to the server
	var store = new Ext.data.JsonStore({
		root: 'result',
		totalProperty: 'total', // total number of data
		idProperty: 'id',
		id: 'id',
		remoteSort: true,  // server-side sorting
		fields: ['id', 'name', 'description', 'population', 'created_at'],  // field structure
		url: 'grid/list',
		autoLoad: true  // autoloading
	});

	//columns structure
	var columns = [
		{id:'name',header: 'Country', width: 160, sortable: true, dataIndex: 'name'},
		{header: 'Description', width: 160, sortable: false, dataIndex: 'description'},
		{header: 'Population', width: 160, sortable: true, dataIndex: 'population'},
		{header: 'Created at', width: 100, sortable: true, dataIndex: 'created_at'}
	];

	// gridPanel object
	var grid = new Ext.grid.GridPanel({
		title: 'Symfony 1.2 and Ext.js example',
		loadMask: true,   // mask panel when data is loading
		store: store,
		columns: columns,
		autoExpandColumn: 'name',
		height: 400,
		width: 600,
		renderTo: 'grid-example'  // DOM element
	});

});

</script>

To component can work properly we need to create additional action: “list” - for data processing (file: apps/frontend/modules/grid/actions/actions.class.php):

<?php

  public function executeList(sfWebRequest $request) {

	# some static data
	$limit = 15;
	$page = 1;

	# object responsible for paging
	$pager = new sfDoctrinePager('Country', $limit);

	$pager->setPage($page);
	$pager->init();

	$result = array();

	foreach($pager->getResults() as $country) {

		$result[] = $country->toArray();
	}

	# formatted data are returned to the grid
	return $this->renderText(json_encode(array(
		'total'		=> $pager->getNbResults(),
		'result'	=> $result
	)));
  }

?>

At this point you can test the code: http://localhost/application-name/web/grid

We should see a grid similar to that shown in the figure below:

Support for paging and sorting
The current figure of the grid is quite inconvenient, displaying a couple of records on one list it not a problem, but when the database starts to grow, loading all the data and manipulate them, it becomes almost impossible.

PagingToolbar is a component responsible for paging on the ExtJs side. Its key element was defined earlier: store component. Responsible for the paging code is shown below:

var paging = new Ext.PagingToolbar({
	pageSize: 10,  // items per page
	store: store,
	displayInfo: true,
	displayMsg: 'Displaying countries {0} - {1} of {2}',   // messages
	emptyMsg: 'Country list is empty'
});

/ / small modification of the grid code
var grid = new Ext.grid.GridPanel({
	...
	bbar: paging,   // set the bottom panel
	...
});

To paging and sorting work properly, action “list” (in which we build the appropriate query based on request parameters) requires some modifications.

ExecuteList action, also requires modification - we need to add paging support and sorting by the selected column:

<?php

  public function executeList(sfWebRequest $request) {

	# data retrieved from the request
	$limit = $request->getParameter('limit', 10);
	$page = $request->hasParameter('start') ? $request->getParameter('start')/$limit+1 : 1;
	$dir = $request->getParameter('dir', 'ASC');
	$column = strtolower($request->getParameter('sort', 'name'));

	# conditions for sorting
	$query = Doctrine_Query::create()->from('Country c');

	if (Doctrine::getTable('Country')->hasColumn($column)) {

		$query->orderBy(sprintf('c.%s %s', Doctrine::getTable('Country')->getFieldName($column), $dir));
	}

	# object responsible for paging
	$pager = new sfDoctrinePager('Country', $limit);

	# Pager query
	$pager->setQuery($query);
	$pager->setPage($page);
	$pager->init();

	$result = array();

	foreach($pager->getResults() as $country) {

		$result[] = $country->toArray();
	}

	# formatted data is returned to the grid
	return $this->renderText(json_encode(array(
		'total'		=> $pager->getNbResults(),
		'result'	=> $result,
		'page'		=> $page
	)));
  }

?>

Now we only need to refresh the page and verify that all changes have been properly marked - it should looks something like this:

Same prezentacje zapowiadały się bardzo ciekawie. Po wystąpieniach, które miały miejsce w czerwcu (w szczególności przypadło mi do gustu bardzo ciekawe wystąpienie Pana Grzegorza Sławatyńskiego o targetowaniu behawioralnym), liczyłem na więcej. Nie będę się za bardzo rozpisywał - prawdopodobnie już niedługo pojawią się bardziej obszerne recenzje na oficjalnej stronie NetDay.

Tak w skrócie:

• na pierwszy ogień poszedł Googlemon. Tomasz Frelik raczej nie specjalnie zaciekawił zgromadzoną publiczność. Nie jestem specjalnie zaznajomiony z SEO, ale nawet dla mnie rzeczy o których mówił Tomek były oczywiste. Osobiście odebrałem to wystąpienie raczej jako reklamę niezbyt dopracowanego serwisu (nigdy wcześniej o Nim nie słyszałem). Sam pomysł jest ciekawy - jednakże jego autor musi nad Nim jeszce popracować - jak sam zresztą przyznaje.
• następnie zaprezentował się Jarosław Bielecki z Mint Media. Wystąpienie zdecydowanie ciekawsze i dużo lepiej przemyślane. MintMedia to nowo powstała sieć internetowa świadcząca usługi w zakresie reklamy internetowej. Prezentacja opierała się na wyjaśnieniu zasad działania tego typu reklamy i możliwości jakie oferuje zarówno potencjalnym klientom, jaki i współpracującym wydawcom.
• wystąpienie Michała Krawczyka, osoby odpowiedzialnej za marketing internetowy UM Lublin, wzbudziło najwięcej emocji. Prezentacja dotyczyła prowadzonych ostatnio kampanii promujących Lublin w sieci. Ciekawe wystąpienie wywołało żywą dyskusję wśród zgromadzonych. Wprawdzie o wspomnianych reklamach (z wyjątkiem jednej: “Przeżyj studia. Studiuj w Lublinie”) nigdy wcześniej nie słyszałem, cieszyć może fakt, że Lublin w końcu w sieci zaistniał. W tym momencie, jak dowiadujemy się z od Pana Michała, priorytetem jest reklama Lublina poza granicami naszego miasta, jednakże w przyszłorocznym budżecie nie zabraknie miejsca dla promocji inicjatyw lokalnych.

Niestety z przyczyn ode mnie niezależnych nie mogłem uczestniczyć w pozostałych wystąpieniach.

Podsumowując, 4 spotkanie lubelskiej branży internetowej pozostawiło pewien niedosyt. Na przyszłość przydałoby się więcej wystąpień dotyczących konkretnych zagadnień związanych np z marketingiem w wyszukiwarkach, e-commerce czy chociażby o trendach wśród developerów. Uważam, że ciekawym i przyszłosciowym pomysłem byłoby utworzenie swojego rodzaju kategorii/dziedzin do których moznaby zapraszac prelegentów. Spotkania napewno byłby ciekawsze i mniej monotematyczne.

W niniejszym wpisie chciałbym na prostym przykładzie zademonstrować możliwości jednego z komponentów tego potężnego frameworka - GridPanel . Jeszcze nie wiem czy będzie to część większego cyklu kursów o extjs i czy pojawi się on także w wersji angielskiej (wersja angielska - dodatkowo zaktualizowana dla Symfony 1.4 i Doctrine), ale narazie w planie mam wpisy dotyczące integracji z zaawansowanym systemem filtrów (ExtJS filter plugin) i dodawania/edytowania elementów do grida za pomocą modalnych okien - o ile oczywiście tematyka tego wpisu spotka się z zainteresowaniem.

Konfiguracja

Niezbędna konfiguracja dla tutoriala:

• dowolny serwer z obsługa PHP w wersji co najmniej 5.2.4 + baza danych MySql;
• zainstalowany framework Symfony w wersji 1.2.X (nic nie stoi na przeszkodzie by wypróbować sf 1.3) lub ewentualnie sandbox do pobrania (piaskownica Symfony- wstępnie skonfigurowany framework gotowy do pracy od zaraz);
• dostęp do wiersza poleceń;

Rozpoczynamy prace
Mając tak przygotowane środowisko należy utworzyć nowy projekt, wygenerować aplikacje frontendu (w przypadku korzystania z piaskownicy jest już wygenerowana) i przykładowy moduł, np: grid. By tego dokonać w katalogu projektu z wiersza poleceń należy wykonać kolejno:

symfony generate:project sfExtTest

symfony generate:app frontend

symfony generate:module grid

Połączenie z bazą danych i dane testowe
Dla naszego prostego przykładu moglibyśmy wykorzystać statyczne dane utworzone w JavaScript, jednakże chce pokazać przepływ danych między aplikacją klienta, a serwerem i bazą danych (między framewrokiem ExtJS, a Symfony i bazą danych), także niezbędna będzie dodatkowa konfiguracja.

Należy skonfigurować połączenie z bazą danych, utworzyć testowe tabele i wczytać do nich dane testowe. Poniższy kod odpowiada za wymienione powyżej elementy (poniższe dane zostały już wcześnie wykorzystane w tutorialu).

Konfiguracja połączenia z bazą danych:

symfony configure:database “mysql:host=localhost;dbname=twojaBazaDanych” uzytkownik haslo

Struktura tabeli testowej:

propel:
  country:
    _attributes: { phpName: Country }
    id:
    name: varchar(50)
    description: varchar(255)
    created_at:

Dane testowe:

Country:
  Country_1:
    name: 'Poland'
    description: 'Description for Poland'
  Country_2:
    name: 'Germany'
    description: 'Description for Germany'
  Country_3:
    name: 'Brazil'
    description: 'Description for Brazil'
  Country_4:
    name: 'USA'
    description: 'Description for USA'
  Country_5:
    name: 'Ireland'
    description: 'Description for Ireland'
  Country_6:
    name: 'Canada'
    description: 'Description for Canada'
  Country_7:
    name: 'India'
    description: 'Description for India'
  Country_8:
    name: 'Italy'
    description: 'Description for Italy'
  Country_9:
    name: 'Spain'
    description: 'Description for Spain'
  Country_10:
    name: 'Portugal'
    description: 'Description for Portugal'
  Country_11:
    name: 'Argentina'
    description: 'Description for Argentina'
  Country_12:
    name: 'Estonia'
    description: 'Description for Estonia'
  Country_13:
    name: 'Bulgaria'
    description: 'Description for Bulgaria'
  Country_14:
    name: 'France'
    description: 'Description for France'
  Country_15:
    name: 'Belgium'
    description: 'Description for Belgium'
  Country_16:
    name: 'Austria'
    description: 'Description for Austria'
  Country_17:
    name: 'Australia'
    description: 'Description for Australia'
  Country_18:
    name: 'Japan'
    description: 'Description for Japan'
  Country_19:
    name: 'Russia'
    description: 'Description for Russia'
  Country_20:
    name: 'Slovakia'
    description: 'Description for Slovakia'
  Country_21:
    name: 'Ireland'
    description: 'Description for Ireland'

Teraz wystarczy z poziomu lini komend wywołać kolejno:

  symfony propel:build-sql
  symfony propel:build-model
  symfony propel:insert-sql
  symfony propel:data-load

ExtJS
Następnym krokiem jest pobranie najnowszej wersji (3,0) biblioteki ExtJs. Całość ściągamy z oficjalnej strony EXTa i wypakowujemy do katalogu ext.

W tym momencie warto dokonać konfiguracji pliku view.yml, tak by framework automatycznie załączył odpowiednie biblioteki js i css (zmian należy dokonoać w pliku app/frontend/config/view.yml):

stylesheets:
- ../js/ext/resources/css/ext-all.css

javascripts:
- ext/adapter/ext/ext-base-debug.js
- ext/ext-all-debug.js

Zalecane jest by kod JavaScript organizować w osobnych plikach JS, jednakże w tym wypadku kod odpowiedzialny za wyświetlanie grida umieścimy w widoku akcji index modułu Grid.

By móc w ogóle przystąpić do pracy z komponentem grida trzeba poznać przynajmniej podstawy jego budowy i elementy składowe. Zasadniczo na GridPanel składa się 4 elementy:

• Store - obiekt odpowiedzialny za przechowywanie danych, w tym komunikację z serwerem - w naszym przypadku JsonStore;
• Column model - konfiguracja wyświetlania poszczególnych kolumn (m.in. opcje renderowania);
• View - specyficzne ustawienia efektów wyświetlania;
• Selection model - element nieobowiązkowy, odpowiada za operacje na kolumnach (zaznaczanie, pobieranie zaznaczonych) - postaram się pokazać zastosowanie tego komponentu w osobnym wpisie;

Także aby wyświetlić podstawową wersję grida potrzebujemy danych, konfiguracji kolumn, które chcemy wyświetlić i konfiguracji widoku (grid przyjmuje również dodatkowe opcje konfiguracyjne opisane szczegółowo w dokumentacji).

Poniższy kod odpowiada za wszystkie wyżej wymienione elementy (kod pliku: apps/frontend/modules/grid/templates/indexSuccess.php):

<div id="grid-example"> </div>

<?php javascript_tag(); ?>

Ext.onReady(function() {

	// komponent odpowiadający za połączenie z serwerem
 	var store = new Ext.data.JsonStore({
		root: 'result',
		totalProperty: 'total', //całwkoita ilość zwracanych danych
		idProperty: 'id',
		id: 'id',
		remoteSort: true,  // sortowanie po stronei serwera
		fields: ['id', 'name', 'description', 'created_at'],  // struktura zwracanych elementów
		url: 'grid/list',  // adres url na serwerze
		autoLoad: true  // automatyczne ładowanie danych
	});

	//struktura kolumn
	var columns = [
            {id:'name',header: 'Państwo', width: 160, sortable: true, dataIndex: 'name'},
            {header: 'Opis', width: 160, sortable: false, dataIndex: 'description'},
            {header: 'Data utworzenia', width: 100, sortable: true, dataIndex: 'created_at'}
        ];

    // obiekt grida
    var grid = new Ext.grid.GridPanel({
    	title: 'Symfony 1.2 and Ext.js example',
    	loadMask: true,   //maskowanie ładowania danych
        store: store,
        columns: columns,
        autoExpandColumn: 'name',
        height: 400,
        width: 600,
        renderTo: 'grid-example'  // element DOM do którego ma być załadowany grid
    });

});

<?php end_javascript_tag(); ?>

By całość mogła poprawnie działać nalezy utowrzyć dodatkową akcje “list”, z której komponent store będzie pobierał dane do grida (kod pliku: apps/frontend/modules/grid/actions/actions.class.php):

<?php

   public function executeList(sfWebRequest $request) {

  	 // tymczasowe dane ustawione na sztywno
  	$limit = 15;
    $page = 1;

     // pomocniczy obiekt odpowiedzialny za stronicowanie
  	$pager = new sfPropelPager('Country', $limit);

    $pager->setPage($page);
    $pager->init();

    $result = array();

    foreach($pager->getResults() as $country) {

    	$result[] = $country->toArray(BasePeer::TYPE_FIELDNAME);
    }

     // sformatowane dane są zwracane do grida
    return $this->renderText(json_encode(array(
    	'total'		=> $pager->getNbResults(),
    	'result'	=> $result
    )));
  }

?>

W tym momencie można sprawdzić działanie kodu wywołując w przeglądarce adres:
http://localhost/nazwa-aplikacji/web/grid

Powinniśmy ujrzeć grida podobnego do tego przedstawionego na rysunku poniżej:

Obsługa stronicowania i sortowania

Obecna postac grida jest dość niewygodna, o ile w przypadku kilkunastu rekordów wyświetlanie ich na jednej stronie nie jest zbyt kłopotliwe, to w momencie gdy baza zacznie się rozrastać ładowanie wszystkich danych i operowanie na nich staje się niemal niemożliwe.

Za stronicowanie po stronie ExtJS odpowiada component: PagingToolbar. Jego kluczowym elementem jest zdefiniowany wcześniej komponent store. Kod odpowiedzialny za stronicowanie widoczny jest poniżej:

	paging = new Ext.PagingToolbar({
		pageSize: 10,  // ilość elementów
		store: store,  // obiekt magazynujący dane
		displayInfo: true,  //wyśweitlanie dodatkowych informacji
		displayMsg: 'Wyświetlanie państw {0} - {1} z {2}',   // komunikaty
		emptyMsg: "Lista państw jest pusta"  

	});

         //małą modyfikacja kodu grida
	var grid = new Ext.grid.GridPanel({
        	...
		bbar: paging,   // ustawiamy dolny panel grida
		...
	});

By stronicowanie i sortowanie działało prawidłowo modyfikacji wymaga akcja list, w której musimy zbudować odpowiednie zapytanie na podstawie parametrów żądania.

Modyfikacji wymaga też sama akcja executeList - musimy dodać do Niej obsługę stronicowania i sortowania po wybranej kolumnie:

<?php

  public function executeList(sfWebRequest $request) {

  	 // dane pobierane z żądania
  	$limit = $request->getParameter('limit', 10);
    $page = $request->hasParameter('start') ? $request->getParameter('start')/$limit+1 : 1;
    $dir = $request->getParameter('dir', 'asc');
    $column = strtolower($request->getParameter('sort', 'name'));

     # warunki dla sortowania
    $c = new Criteria();
   	if (in_array($column, CountryPeer::getFieldNames(BasePeer::TYPE_FIELDNAME))) {

   		$column = CountryPeer::translateFieldName($column, BasePeer::TYPE_FIELDNAME, BasePeer::TYPE_COLNAME);
   		if ($dir == "ASC") {

   			$c->addAscendingOrderByColumn($column);
   		} else {

   			$c->addDescendingOrderByColumn($column);
   		}
   	}

     # pomocniczy obiekt odpowiedzialny za stronicowanie
  	$pager = new sfPropelPager('Country', $limit);

  	 # kryteria dla pagera
  	$pager->setCriteria($c);
    $pager->setPage($page);
    $pager->init();

    $result = array();

    foreach($pager->getResults() as $country) {

    	$result[] = $country->toArray(BasePeer::TYPE_FIELDNAME);
    }

     # sformatowane dane są zwracane do grida
    return $this->renderText(json_encode(array(
    	'total'		=> $pager->getNbResults(),
    	'result'	=> $result,
    	'page'		=> $page
    )));
  }

?>

Teraz wystarczy tylko odświeżyć stronę i sprawdzić czy wszystkie zmiany zostały poprawnie naniesione - całość powinna wyglądać mniej więcej tak:

The Good:

• dealing with forms: how to create, customize and submit the form. Also shows how to use sfExtraFormPlugins widgets for JavaScript/Ajax integration;
• plugins: installing and creating new plugins;
• security: dealing with user credentials;
• creating custom form formatters;
• creating and customizing admin area;
• internationalization: explained really well;
• delopoyment: preparing and transferring application to server;

The Bad:

• dealing with e-mail: intergartion with SwiftMailer in sf 1.3;
• it would be nice to see Zend Framework integration in practice;
• starting project with sf 1.3 and Propel - i really like Propel but sf 1.3 has much more better support for Doctrine;
• nothing about new installer option;
• nothing about updated form methods - useFields;
• some irritating inline css;

What i really like about this book:

• dealing with Symfony and memcache;
• optimization: templates caching

For me, it’s not enough. I think the Jobeet tutorial is better introduction to Symfony then Milkshake shop. So if we want to be introduced to all new Symfony 1.3 features - we would have to wait for some book upgrade or read the Symfony 1.3 documentation. My rate is 3 out of 5, i can recommend this book for beginners.

Poniżej krótka lista najważniejszych wg mnie zmian:

- E-mail. Dodano domyślny system odpowiadający za wysyłanie e-maili oparty o SwiftMailer 4.1. Nie miałem okazji testować tego mailera, także nie mogę podać żadnych konkretnych argumentów “za”, bądź “przeciw”. Wiem natomiast, że nowym Project Managerem tego projektu został Fabien Potencier, także o jego dalszy rozwój i wsparcie możemy być spokojni. Do tej pory w swoich projektach z powodzeniem wykorzystywałem Zend_Mail, a SwiftMiailera postaram się przetestować przy najbliższej okazji. Poniżej przykład wykorzystania zintergorwanego z Symfony SwiftMailera:

<?php

$message = $this->getMailer() ->compose('od@przyklad.pl', 'do@przyklad.pl', 'Temat wiadomości', 'Treść')->attach(Swift_Attachment::fromPath('/sciezka/do/pliku'));

$this->getMailer()->send($message);

?>

- Doctrine jako domyślny ORM. Pomimo tego, że pomału przekonuję się do tego ORMa, w większych projektach wciąż zostaje przy Propelu - budowanie zapytań z wykorzystaniem obiektów Criteria bardziej przypadło mi do gustu. Wg zapowiedzi wsparcie dla Propela ma się zakończyć wraz z pojawieniem się sf 2.0, jednakże ostatnio przewodzenie na projektem Propel objął François Zaninotto (były pracownik Sensio, autor wielu pluginów i części dokumentacji), co mam nadzieje zaowocuje reaktywacją projektu (wersja 1.4 ma ukazać się w  październiku). Wracając do samego Doctrine - dodano nowe opcje dla definiowania struktury bazy danych w pliku YAML, a także nowe komendy dla generatorów (m.in: doctrine:build, doctrine:reload-data, doctrine:create-model-tables, doctrine:delete-model-tables, doctrine:clean-model-files).

- Formularze. Przede wszystkim dodano metodę useFields (mój odopwiedniki unsetAllExcept, przykład poniżej), klasy: BaseForm (klasa nadrzędna dla wszystkich formularzy) i sfFormSymfony (przydatna przy implementacji zdarzeń na formularzach). Ponadto dodano brakujące metody takie jak: setDefault(), setLabel(), setIdFormat(), setHidden() dla komponentów wykorzystywanych w formularzach.

<?php
  class UserForm extends BaseUserForm
  {
    public function configure()
    {
      $this->useFields(array(
        'name',
        'surname',
        'email'
      ));
    }
  }

?>

- innym ciekawym dodatkiem do nowej wersji sf jest możliwość tworzenia własnego skryptu instalatora. By tego dokonać należy podczas tworzenia nowego projektu użyć opcji –installer i zadać odpowiedni parametr skryptu (przykład poniżej).

Z poziomu wiersza poleceń:

    php symfony generate:project --installer=custom_installer.php

Przykładowy skrypt instalatora (na podstawie “Symfony 1.3 + Doctrine 1.2″):

  if (!$this->askConfirmation('Czy jestes pewien, ze chcesz rozpoczac instalacje?')) {

    return ;
  }

  $this->installDir(dirname(__FILE__) . '/skeleton');

  $this->runTask('plugin:publish-assets');

  $validator = new sfValidatorEmail(array(), array('invalid' => 'Podano nie prawidlowy adres e-mail'));

  $email = $this->askAndValidate('Prosze podac swoj adres e-mail:', $validator);

  $this->runTask('configure:author', sprintf("'%s'", $email));

  $secret = $this->ask('Prosze podac unikalny ciag znakow dla ochrony CSRF:');

  $this->runTask('generate:app', 'frontend --escaping-strategy=true --csrf-secret=' . $secret);

  $this->runTask('plugin:install', 'sfDoctrineGuardPlugin');

  $this->reloadTasks();

  $this->runTask('guard:create-user', 'kamil haslo');

  $this->runTask('clear:cache');

Migracja do nowej wersji nie powinna przysporzyć problemów - instrukcja dostępna jest na stronie projektu.

“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.

First, we need to generate new project, new application and setup database configuration:

<?php

    symfomy generate:project sfTest
    symfomy generate:app frontend
    symfomy configure:database "mysql:host=localhost;dbname=sf_test" user pass

?>

Next step is to install sfGuardPlugin:

    symfony plugin:install sfGuardPlugin

and enable it according to its documentation.

Now we can put profile table structure into schema.yml file:

propel:
  sf_guard_profile:
    id: ~
    user_id: { type: integer, foreignTable: sf_guard_user, foreignReference: id, required: true, onDelete: cascade }
    email: { type: varchar(128), index:unique, required: true }
    name: { type: varchar(128), required: true }
    surname: { type: varchar(128), required: true }
    education: longvarchar
    company: varchar(128)
    position: varchar(128)
    phone_number: { type: varchar(30), required: true }
    fax: varchar(25)
    comunicator: varchar(30)
    country: { type: varchar(128), required: true }
    city: { type: varchar(128), required: true }
    province: { type: varchar(128), required: true }
    address: { type: varchar(255), required: true }
    zipcode: varchar(15)

Remember to set profile configuration into app.yml:

all:
  sf_guard_plugin:
    profile_class: SfGuardProfile
    profile_field_name: user_id

Then:

    symfony propel:build-all

and create module for our example:

    symfony generate:module frontend user

Now we need to download all neccessary JavaScript files:

• jquery-1.3.2.js
• jquery-ui-1.7.1.js
• jquery.validate-1.5.2.js

As i did in the previous post , after downloading new jquery validation plugin we need to make some changes in jquery.validation.js file, so it could work properly with Symfony sfForm (conversion form “name” to “id”). You can find corrected file here.

We can put our bussiness logic to executeProfile action into actions.class.php but earlier we have to create our ProfileForm.class.php - we can put that file into global lib/form/ directory or lib/form of current module.
ProfileForm.class.php:

<?php

class ProfileForm extends sfGuardUserAdminForm {

  public function configure() {

  	parent::configure();

	$this->unsetAllExcept(array(
		'username',
		'email',
		'name',
		'surname',
		'education',
		'company',
		'position',
		'phone_number',
		'phone_number_2',
		'fax',
		'communicator',
		'country',
		'city',
		'province',
		'zipcode',
		'address',
		'address_2'
	));
	 # Edit default validators schema

	$this->validatorSchema['email'] = new sfValidatorEmail();

    $this->widgetSchema->setNameFormat('profile[%s]');
  }

	protected function doSave($con = null){

	    if (is_null($con)) {

	      $con = $this->getConnection();
	    }

	    $this->updateObject();

	    $this->object->save($con);
	}
}
?>

The unsetAllExcept method was presented in this post.

actions.class.php:

<?php 

class userActions extends sfActions {

  public function executeIndex(sfWebRequest $request) {

  	$this->forward('user', 'profile');
  }

  public function executeProfile($request) {

  	$user = $this->getUser()->getGuardUser();

  	$this->form = new ProfileForm($user);

  	if ($request->isMethod('post') && $request->hasParameter('profile')) {

  		$this->form->bind($request->getParameter('profile'));

  		if ($this->form->isValid()) {

  			$this->form->save();

  			$this->getUser()->setFlash('msg', 'Your profile has been successfully updated');
  		} else {

  			$this->getUser()->setFlash('msg', 'Sorry, there are some errors listed below. ');
  		}
  	}
  }
}

?>

Nothing special so far, but now we need to take care of our view file.
In profile template we have to split form into for example three sections: identity, experience and location. Then we can add jquery tabs and validation:

profileSuccess.php:

	<h1> Update user profile</h1>

	<?php if ($sf_user->hasFlash('msg')): ?>

	  <div class="message"><?php echo $sf_user->getFlash('msg') ?></div>

	<?php endif; ?>

	<form action="<?php echo url_for('user/profile') ?>" id="profileForm" method="post" >

	<div id="tabs">

	    <ul>
	        <li><a href="#identity"><span>Identity data</span></a></li>
	        <li><a href="#experience"><span>Experience/Job information</span></a></li>
	        <li><a href="#location"><span>Location</span></a></li>
	    </ul>

	    <div id="identity">

			<table>

				<?php echo $form['username']->renderRow() ?>
				<?php echo $form['email']->renderRow() ?>
				<?php echo $form['name']->renderRow() ?>
				<?php echo $form['surname']->renderRow() ?>

			</table>
		</div>

		<div id="experience">

			<table>

				<?php echo $form['education']->renderRow() ?>
				<?php echo $form['company']->renderRow() ?>
				<?php echo $form['position']->renderRow() ?>
				<?php echo $form['phone_number']->renderRow() ?>
				<?php echo $form['fax']->renderRow() ?>

			</table>

		</div>

		<div id="location">

			<table>

				<?php echo $form['country']->renderRow() ?>
				<?php echo $form['province']->renderRow() ?>
				<?php echo $form['city']->renderRow() ?>
				<?php echo $form['address']->renderRow() ?>
				<?php echo $form['zipcode']->renderRow() ?>
			</table>
		</div>

	</div>

		<input type="submit" value="Update profile" />

	</form> 

	<?php javascript_tag(); ?>

		$(document).ready(function(){

    		var tabs = $("#tabs").tabs();

			var validator = $("#profileForm").validate({
				rules: {
					profile_username: "required",
					profile_email: {
						required: true,
						email: true
					},
					profile_name: "required",
					profile_surname: "required",
					profile_phone_number: {
						required: true,
						number: true
					},
					profile_country: "required",
					profile_province: "required",
					profile_city: "required",
					profile_address: "required"
				},
				errorPlacement: function(label, element) {

						label.insertAfter(element);
				}

			});

			validator.focusInvalid = function() {
				if( this.settings.focusInvalid ) {
					try {
						var focused = $(this.findLastActive() || this.errorList.length &amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp; this.errorList[0].element || []).filter(":hidden");

						tabs.tabs("select", tabs.find(">div").index(focused.parents('div:first')));
						focused.focus();

					} catch(e) {
						// ignore IE throwing errors when focusing hidden elements
					}
				}
			};

		});

	<?php end_javascript_tag(); ?>

Putting it together with server side validation provided by Symfony forms, we have nice, simple and complex forms validation system that should look like this:

I think it could be useful:

<?php

  /**
   *  unset all fields except given parameters
   *
   * @param array $fields Array of fields
   */
  public function unsetAllExcept($fields = array())
  {
  	$tmp = array_keys($this->widgetSchema->getFields());

  	foreach(array_diff($tmp, $fields) as $value){

  		unset($this[$value]);
  	}
  }

?>