А если мы хотим отображать данные выводимые в jqGrid в виде графика. Причем синхронно обновлять график вместе с данными в таблице. Например так.

Для построения графика я выбрал флешь библиотеку Open Flash Chart, которая себе прекрасно зарекомендовала. Если вам что то, придется не по душе в этой библиотеки, вы всегда сможете изменить . Так как Open Flash Chart – open source проект.

Еще нам понадобиться js библиотека – SWFobject. Ее задача поместить флешку в нужное нам место. В принципе мы смогли бы обойтись и без нее, но она позволяет решить: проблемы кросс-браузерности, наличие нужной версии флешь проигрывателя и  т.д.

Основная идея скрипта.

1. у jqGrid есть событие loadComplete – на него мы подвешиваем генерацию графика. То есть каждый раз когда грид обновляется, у нас будет обновятся график.
2. а данные для графика мы будем получать через пользовательский массив , с помощью функции getUserData()

Вот пример кода.

<script type="text/javascript" src="/js/swfobject.js"></script>

$(document).ready(function(){
	var chartCreate = false;
	var data_statistics_chart = '';

	$("#statistics-list").jqGrid({
		...некоторый ваш код...

		// функция вызывается в тот момент когда приходят данные в грид
		loadComplete: function() {
			// получаем пользовательские данные
			var udata = $("#statistics-list").getUserData();
			// вызываем функцию loadChartData с нашими данными udata.chart_data для флеши
			loadChartData(udata.chart_data);
		}
	}).navGrid('#statistics-pager', {refresh:true,add:false,edit:false,del:false,search:false});

	function loadChartData(data) {
		data_statistics_chart = data;
		// проверяем мы создали объект флешь
		if (chartCreate) { // если да, то
			// находим флешку
			chart = swfobject.getObjectById('statistics_chart');
			// загружаем в нее полученные данные
			chart.load(data);
		} else { // создаем флешку с помощью js библиотеки swfobject
			chartCreate = true;
			swfobject.embedSWF(
				// откуда берем саму флешку
				'/flash/open-flash-chart.swf',
				// куда ее помещаем
				'statistics_chart',
				// настройки флешки
				'734', '270', '9.0.0', 'expressInstall.swf',
				// данные откуда флешка будет брать
				// обратите внимания! флешка ждет на входе имя функции, 
				// поэтому сразу передать данные не получаетьса
				{'get-data': 'get_data_statistics_chart'},
				{'wmode':'opaque'}
			);
		}
	}

	// сама функция которая вернет нужные данные флешки
	function get_data_statistics_chart() {
		return data_statistics_chart;
	}
});
</script>

<div id='statistics_chart'></div>

<div class="grid">
	<table id="statistics-list" class="scroll"></table>
	<div id="statistics-pager" class="scroll"></div>
</div>

И так что он умеет:

1. Двигаться по странице (move)
2. Изменять размеры (resize)
3. Имеет возможность настроить максимальную ширину панели (max width)
4. Имеет два состояния: нормальное (normal) и компактное (compact)
5. Имеет возможность сортировать гаджеты внутри панельки (sort)
6. Просмотр в компактном режиме

Нормальный режим

Компактный режим

Смотрим:  рабочий пример гаджета

Технология:  jQuery + UI, CSS, HTML – все просто. Если кому-то нужно будет доработать гаджет или адаптировать к своим требованием, пишите – договоримся.

Почему FCKeditor?
Во первых он достаточно стабилен, во вторых его легко настроить под себя, и наверное самое главное у меня был опыт работы с ним.

Поиск в интернете ничего мне не дал, … значить придется все делать самому.

Все оказалось на удивление просто

<script type="text/javascript" src="/js/lib/fckeditor/fckeditor.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("#news-list").jqGrid({
		...некоторый ваш код...
	}).navGrid('#news-pager',
		{refresh:true,add:true,edit:true,del:true,search:true},
		{
			// edit parameters
			width: 500,
			reloadAfterSubmit:true,
			beforeShowForm: function() {
				fckeditor('text');
			},
			onclickSubmit: function() {
				var oEditorText = FCKeditorAPI.GetInstance('text');
				return {
					text: oEditorText.GetHTML()
				};
			}
		},
		{
			// add parameters
			reloadAfterSubmit:true,
			beforeShowForm: function() {
				// Перед тем как показать форму, вставляем в элемент с id='text' наш редактор
				fckeditor('text');
			},
			onclickSubmit: function() {
				// Получаем введенный и отформатированный текст в редакторе
				var oEditorText = FCKeditorAPI.GetInstance('text');
				// Возвращаем его в виде html текста
				return {
					text: oEditorText.GetHTML()
				};
			}
		},
		{
			//delete parameters
		}
	);

	function fckeditor(id) {
		var oFCKeditor = new FCKeditor(id) ;
		oFCKeditor.ReplaceTextarea();
	}
});
</script>

<h1><?=_('Новости')?></h1>

<div class="grid">
	<table id="news-list" class="scroll"></table>
	<div id="news-pager" class="scroll"></div>
</div>

А вот так это выглядит в работе

Тем же путем, идет Opera (зачем там IRC-чат, почтовый клиент и BitTorrent, мне это не нужно). Я понимаю что мои предпочтения по функциональности браузера могут не совпадать с другими пользователями, которым это нужно. Как угодить всем, ответ прост и давно известен – расширения, модули и плагины.

Я очень рад что разработчики Firefox пошли именно этим путем. Я могу настроить функциональность своего браузера именно так как мне нужно и любо.

Об одном из таком расширении мы и поговорим. Это Firebug.

Расширения для Firebug

Полный список их приводить не буду, вы сами сможете выбрать то что вам нужно. Например здесь:

• http://getfirebug.com/extensions/index.html
• http://habrahabr.ru/blogs/firefox/50579

Вот наверно самые востребованные.

FirePHP – расширение номер один для Firebug. Если вы конечно, PHP программист:) Что тут говорить, мой рабочий инструмент. Поэтому маловероятно, что я перейду на какой-то другой браузер.

Firecookie – показывает все куки доступные на текущей веб-странице. Вы можете видеть, когда они был изменены, и вы можете изменить ваши настройки куков для принятия или отказа прямо из Firebug панели. Очень полезное расширение. Часто приходиться использовать его, когда проверяешь работу кода авторизации.

Jiffy – делалась как более функциональный аналог вкладки Net. но как-то у меня не сложилось. Наверное мне не нужен такой расширенный функционал. мне вполне хватает функционала вкладки Net.

Pixel Perfect – позволяет накладывать макет дизайна прямо на существующий сайт. Хорошее расширение, за исключением одного обидного недостатка – можно смешать картинку только на один пиксел за раз. Однажды мне нужно было срочно подогнать картинку к дизайну, сдвинув ее на 200 пикселей… думал сломаю мышку кликая.

FireRainbow – раскрашивает ваш js код. Предупреждаю, находиться в стадии экспериментального расширения. у меня не возникло проблем. работает отлично.

YSlow – вроде как позволяет проанализировать ваши страницы и рассказать что нужно сделать что-бы ускорить ее. Рекомендации основаны на опыте написание разработчиков Yahoo высокопроизводительных сайтов. То есть стоит прислушаться. Но у меня как-то не прижился. Наверное оптимизация запросов к бд, дает более существенный выигрыш, чем пытаться оптимизировать сами странички.

Модули основанные на FirePHP

Во время отладки темы для своего проекта «Твои плагины«, была острая необходимость постоянно отслеживать значение переменных не нарушая дизайна. Вот здесь и пригодился плагин от Ivan Weiler под WordPress. Все просто:

• Скачиваем плагин
• Активизируем в панели администратора
• Пишем в любом месте <?php fb($var); ?>
• Смотри значение в панели FirePHP

Вообще то модулей написанных под различные продукты:

• Agavi
• BIGACE
• CakePHP
• CodeIgniter
• Drupal
• ExpressionEngine
• eZ
• Joomla
• Kohana
• Nette Framework
• PEAR
• Project Zero
• PRADO
• REDAXO
• Seagull
• Smarty
• Solar
• Symfony
• TYPO3
• WordPress
• Zend Framework

Глобальный подход

Есть официальная документация которая позволяет нам использовать предоставленный API интерфейс для работы с твиккером. Мне было лень разбираться с ним и я начал искать далее.

Готовые плагины для WordPress

• SimpleTwitter – плагин который позволяет добовлять ваши посты в твиттер, достаточно много настроек.
• The Twitter Updater – другой плагин который автоматически отправляет сообщения в twitter, при редактирование записи, обновлении ее или публикации, настраивайте плагин, как сами считаете нужным.
• Twitter Tools – позволяет как постить в твитер, так и в блог постить свои твитты.

Вот наверное самые интересные плагины. Только как-то они у меня не пошли, то ли я что-то не так настроил, то ли еще что-то, но результат один. Мои опубликованные посты не добавлялись в мой твиттер.

Сервисы для работы с твиттером

Пока из известных – TwitterFeed. Инструкция по применению очень проста.

Если есть OpenId – отлично. Если нет – заводим, (например: здесь myopenid, или здесь Yandex OpenID)

Логинемся в TwitterFeed под вашим OpenID

Создаем новый профиль

Заполняем форму

1. Вводим адрес вашего RSS
2. Устанавливаем частота обновления вашего твикера (по умолчанию: каждый час)
3. Сколько добавлять новых постов в твикер (по умолчанию: 1, максимальное количество 5)
4. Что выводит в твитер (по умолчанию: заголовок и описание)
5. Каким сервисом коротких ссылок мы будем пользоваться, а мы будем пользоваться так как длина сообщения для твикера ограничена 140 символами (если вы хотите без регистрации – то urlShot, если не поленитесь и зарегистрируетесь то – bit.ly. Помимо того что этот сервис сокращает ссылки, он ведет статистику кликов по ним.)
6. Публикация новых постов на основание их (по умолчанию: на дате).
7. Сообщение выводимое перед публикацией поста в твикер (по умолчанию: пусто). Не совсем нужная опция, у нас и так ограничено, так тратить дорогие знакосимволы на прикрепляемое сообщение – разорительно.
8. Если галочка стоить то идет публикация в ваш твикер. Если ее убрать то времено будет остановлен процесс публикации до тех пор пока вы ее снова не установите.
9. Думаю кнопочку «Create» вы сами найдете

Сервис работал «на ура», но под мои требования он не подошел, так-как максимальное количество публикуемых сообщений 5, а у меня может добовлятьса ежедневно более 10 новых плагинов.

Своими руками

Хочешь что-бы получилось как надо. сделай сам. Берем готовый PHP класс для работы с твикером. И на базе него пишем свой плагин для WordPress.

Не на какую универсальность он не претендует, задача его максимально проста. При публикование поста, он автоматически публикуется в вашем твикере. Я буду рад, если кто-то на основе его напишет полноценный плагин.

<?php
/*
Plugin Name: Twitter post
Plugin URI: http://www.youplugins.com/
Description: Updates Twitter when you create a new blog or publish one
Version: 1.00.0
Author: Denis Doroshenko
*/

function wp_twitter_post_shotlink($link)  {
	$shotlink = "";
	$url = "http://api.bit.ly/shorten?version=2.0.1&longUrl={$link}&login=******&apiKey=******";
	$bit = json_decode(file_get_contents($url), TRUE);
	if ($bit["errorCode"] == 0) {
		$shotlink = $bit["results"]["{$link}"]["shortUrl"];
	}
	return $shotlink;
}

function wp_twitter_post_add($post_ID) {
    include(dirname(__FILE__).'/twitterAPI.php');

	$post 			= get_post($post_ID);
	$postTitle 		= $post->post_title;
	$postLink 		= get_permalink($post_ID);
	$postContent 	        = $post->post_content;

	$twitter_username 	= '******';
	$twitter_psw 		= '******';
	$twitter_message	= "{$postTitle}: {$postContent}";
	$count = mb_strlen($twitter_message);
	if ($count < 1) {
		$twitter_message = "";
	} else if ($count > 115) {
		$twitter_message = mb_substr($twitter_message, 0, 115).'..';
	}
	$twitter_message .= ' '.wp_twitter_post_shotlink($postLink);
	$twitter_status = postToTwitter($twitter_username, $twitter_psw, $twitter_message);
	return $post_ID;
}

add_action('publish_post', 'wp_twitter_post_add');

?>

add_action(‘publish_post’, ‘wp_twitter_post_add’) – вызываем функцию wp_twitter_post_add, после события publish_post
wp_twitter_post_add() – функция которая производит публикацию поста в ваш твикер, для этого вам нужно знать логин и пароль вашего твикера.
wp_twitter_post_shotlink($link) – функция преобразования ваших урлов в их укороченный вариант, я для этого использовал сервис bit.ly, для его правильной работы вы должны быть на нем зарегистрированы. После регистрации сервис для вас с генерирует apiKey, который и нужно будет подставить в эту функцию.

Ссылки по данной тематике

• http://www.quickonlinetips.com/archives/2007/04/10-best-twitter-tools-for-wordpress-blogs/
• http://blogproblog.com/twitter-dlya-wordpress-bloga/
• http://blog.dimok.ru/blog-i-twitter
  

С вязи с чем часто приходиться искать в Интернете тот или иной плагин для своих нужд. Иногда бывает что:
- сразу не находишь то что хотелось бы,
- или вроде кажется нашёл, но оказывается есть более функциональный аналог от других разработчиков,
- нашёл но не то что искал и думаешь «классный плагин» он мне потом обязательно пригодиться давай я залажу закладку, а потом накапливается такой ворох закладок, что легче заново начать искать

Вот так созрела идея создать свой каталог плагинов для известных js фреймворков (jQuery, MooTools, Prototype и других).

Идея есть, переходим к реализации.

Анализ

Каталоги похожей тематики:

• plugins.jquery.com – каталог js плагинов для jquery
  + наверное самое полное собрание плагинов для jquery.
  + очень «раскрученный» ресурс
  + есть каталог
  + есть поиск
  - нет скриншота плагина
  - нет системы рейтинга плагина (на самом деле вроде есть,, но только на странички конкретного плагина)
  - нет облака тэгов
  - нет топа популярных плагинов
• AjaxRain – презентуют себя как каталог всех плагинов, не только для js фреймворков (например: там есть плагины для Firefox)
  + достаточное большое собрание плагинов
  + есть система рейтинга
  + есть скриншот плагина
  + плагины можно комментировать
  + можно добавить в избранное
  + есть каталог плагинов
  + есть сортировка по кол-ву комментариев, по популярности, по дате добовления
  + есть поиск
  - очевидных недостатков нет, просто мне бы хотелось увидеть более удобный клиентский интерфейс
• jQuery Style – стильный сайт поклонника jQuery
  + есть социальные закладки
  + можно добавить понравившийся плагин в твиттер
  + есть тэги
  + есть список сайтов, рассказывающих как создавать плагины
  - в принципе дальше идут одни недостатки, приводит небуду, достаточно сравнить с предыдущим ресурсом

Делаем

Итак я хочу получить:

1. каталог с легким дизайном
2. с возможность поиска по рубрикатору и тэгам
3. с возможность рейтинга плагинов
4. добавлять в избранное или социальные закладки
5. возможностью комментировать
6. не ограничить каталог, только js плагинами

Что сделано пока…

Есть сайт действующий сайт – www.youplugins.com

Показ новых плагинов – на основе карусели

Топ популяных плагинов – с эффектом скольжения.

Я хотел собрать здесь дополнительный материал по js фреймворкам

Сделано пока WordPress`е – для того что-бы понять насколько это востребовано и нужно. проект будет постоянно развиваться. Мне очень нужны ваши отзывы, что вы хотели бы добавить, улучшить или убрать.

Я хочу сделать каталог который был бы удобен не только мне, но и Вам.

Чем хорошо этот Kumo, он позволяет отказаться от ставших привычных операций echo, print_r(), var_dump(). В замен использовать krumo(). Библиотека достаточно интеллектуальна, чтобы понять какой тип переменой вы передали (String, Array, Object, Clasи т.д.) и сама проводит соответствующие преобразование в нужный html код для выдачи в отформатированном виде в ваш браузер.

Как работает:

• Скачиваем: на официальном сайте или у меня. В последнем случае вы получите немного модифицированную библиотеку.
  • Добавил подержу оператора __(). Теперь можно вывести переменные как с помощью оператора krumo(), так и __().
  • Убрал в отладочном выводе следующию строчку, Krumo version 0.2.1a | http://krumo.sourceforge.net/. Да простят меня разработчики, но я думаю где взять и какая версия вас мало будет интересовать во время отладки кода.
• Подключаем

  include "class.krumo.php";

• Используем

  krumo($var);
  или так
  __($var);

• Дополнительные настройки

  // показ debug backgrace
   krumo::backtrace();
   // показ всех подключенных классов
   krumo::includes();
   // показ всех функций
   krumo::functions();
   // показ всех декларированных классов
   krumo::classes();
   // показ всех объявленных констант
   krumo::defines();
   // запретить вывод отладочных сообщений всего что ниже
   krumo::disable();
   // Этот вывод показан не будет
   krumo::includes();
   // Разрешить отладочный вывод
   krumo::enable();
   // Этот вывод будет показан
   krumo::classes();

К сожалению под рукой не оказалось сканера и поэтому я решил сделать прототип системы в фотошопе. После второй кнопки, я понял что не успею. Поэтому решил поискать в Интернете, что-то, что позволило решить мою задачу.

Вот что я нашёл – Pencil.

Доступ ко всем свойствам формы

• 
• Создание прототипа GUI для настольных приложений Windows.
  
• Страница Свойства диалог с возможностью выбрать другую страницу в качестве фонового.
  
• Текст на экране поддерживает возможность редактирование, как простого текста так и форматированного.
  
• Pencil поддерживает возможность конвертировать ваш проект в PNG.
  

Самая приятная фича этого проекта, в том, что он сделан как плагин к Firefox. Мой любимый Firefox – уже перестает быть просто браузером, а становится средой для разработки приложений.

jQuery, по своей концепции напоминает Firefox. Сама по себе, как и «голый» Firefox (без плагинов) вряд ли завоевал такую популярность и любовь. Все дело в дружественной среде заложенной в библиотеке. Которая позволяет легко писать расширения в виде плагинов. Начиная от официальных плагинов jQuery UI, и заканчивая сторонними.

Вот об одном из них я и расскажу. Select Box Factory –поистине очумелый плагин для создание списков с выбором.

Что он умеет:

• строить списки на основе уже существующей DOM – структуры

  var dropdown = new sFac({
  	id : "fromMemory",
  	container : "dropdownContainer"
  });	
  
  <div id="dropdownContainer">
  	<div id="lynx" title="lynx" defaultSelection="false" state="0" data="claws,stripes"> Lynx </div>
  	<div id="cheetah" title="cheetah" defaultSelection="false" state="0" data="eyes,claws">Cheetah</div>
  	<div id="bobcat" title="bobcat" defaultSelection="false" state="0" data="eyes,nose">Bobcat</div>
  </div>

• Получать самому списочный массив с сервера с помощью JSON или прописать его в коде

  var dropdown = new sFac({
  	id : "fromTheServerSide",
  	container : "dropdownContainer",
  	choices :
  		[
  			['leopard','leopard','Leopard',false,0,["spots"," ears"]],
  			['tiger','tiger','Tiger',false,0,[" tail","nose"]],
  			['serval','serval','Serval',true,0,["tail","nose"]],
  		]
  });

• Списки поддерживают следующие свойства: dropdown, показать один только список без шапки, мультивыбор значений списка, изменений размеров списков (resize)
  
• Плагин поддерживает фильтрование значений списка и создание списков из картинок
  
• Создание списков с подкрашенными значениями, с последующей возможностью применить к ним фильтр
  
• Поддержка скинов для списков