AjaxBlog » JavaScript

JqueryWTP – плагин для Eclipse

admin — Tue, 19 Apr 2011 21:17:04 +0000

Очень полезный плагин, позволяющий вам автодополнять методы Jquery.

Плагин в работа

Установка

Инструкция на официальном сайте несколько устарела, по этому, приведу свою, которая точно работает.

Скачиваем файл и запускаем файл.
Появиться вот такая форма
- в поле Jar File – указываем путь до файла org.eclipse.wst.jsdt.core_xxxxxxx.jar
- в поле Output Dir – указываем путь, куда сохраняться пропатченный файл
Смело жмем кнопку Generate
Заменяем старую версию файла на пропатченную.
Удаляем папку workspace/.metadata/.plugins/org.eclipse.wst.jsdt.core.
Запускаем eclipse.

Новая тема для jQuery UI – Aristo

admin — Mon, 07 Mar 2011 18:04:20 +0000

Для одного из проектов нужно было найти красивую тему для jQuery UI.
Стандартные мне некогда не нравились, а авторские стоили от 75$.
И вот в результате случайного везения, я нашел свой идеал…

Смотрим Качаем

JsUnit – тонкости настройки

admin — Mon, 31 Jan 2011 15:52:44 +0000

На чем писать модульные тесты для JavaScript. Вопрос не такой простой как кажется. В отличии от Java здесь нет признанного лидера. Для себя я выделил три фрэймворка о которые стоит упомянут:

JsTestDriver – разработка ребят от google, позиционируется как универсальное решения для тестирования js.
QUnit – тест от разработчиков jquery, кстати свой фреймворк они тестирует этим тестом.
JsUnit – самый старый из представленных здесь фреймворков.

Трудно сделать выбор, каждый из них справляется с поставленной задачей. Я остановлюсь на последнем , так как он позволяет запускать себя на приложениях содержащем только браузерный движок, и не требует дополнительных библиотек для своей работы.

Как работает

Не буду расписывать, как заставить это все работать. Здесь очень неплохая статья для начинающих.

http://www.simplecoding.org/jsunit-testiruem-javascript-kod.html

Тонкости настройки

Попробуем ответить на некоторые популярные предубеждения связанные с этим фреймворком.

jsunit не поддерживает наборы тестов…
читаем – Test Suites

создаем файл testSuite.html





    TestSuite

    
    
    <script type="text/javascript">

        function testSuite() {
            var result = new JsUnitTestSuite();
            result.addTestPage("unit-tests/exampleTest1.html");
            result.addTestPage("unit-tests/exampleTest2.html");
            result.addTestPage("unit-tests/exampleTest3.html");
            result.addTestPage("unit-tests/exampleTest4.html");
            return result;
        }

        function suite() {
            var newsuite = new JsUnitTestSuite();
            newsuite.addTestSuite(testSuite());
            return newsuite;
        }
    script>



TestSuite

Причем ничего нам не мешает вкладывать один набор тестов в другой.

jsunit не позволяет автоматически запускать тесты…
читаем – Standard query strings
- создаем копию файла testRunner.html
- назовем его testRunnerAuto.html
- находим следующие строчки кода
```
    var params = new JsUnit.Params(document.location.search);
    var testManager;
    var tracer;
```
- вставляем код
```
var params = new JsUnit.Params(document.location.search);

params.hash['testpage'] = 'http://localhost/testSuite.html';
params.hash['autorun'] = 'true';

var testManager;
var tracer;
```
  Тем самым при запуске страницы testRunnerAuto.html мы загрузим подготовлены нами набор тестов testSuite.html, и сразу после загрузке произойдет автоматический запуск тестов.

jsunit не может тестировать асинхронные запросы…
читаем – setUp() and tearDown()

var native;
var encode;
 
function setUpPage() {
    //ждем когда загрузиться страница и отработают все запросы 
    setUpPageStatus = 'running';
 
    req1 = new XMLHttpRequest();
    req1.open('GET', "data/base64.native", true);
    req1.onreadystatechange = function() {
	if (req1.readyState == 4) {
	    native = req1.responseText;
            setUpPageComplete();
    	}
    };
    req1.send(null);
 
    req2 = new XMLHttpRequest();
    req2.open('GET', "data/base64.encode", true);
    req2.onreadystatechange = function() {
	if (req2.readyState == 4) {
	    encode = req2.responseText;
	    setUpPageComplete();
        }
    };
    req2.send(null);
}
 
function setUpPageComplete() {
    if ((native != "") && (encode != "")) {
        //все запросы отработались, можно запускать тесты
        setUpPageStatus = 'complete';
    }
}
 
 
function testUtilsCodecRecursion() {
    assertEquals(Utils.decode(z.encode(native)), native);
}
 
 
function testUtilsCodecEncode() {
    assertEquals(Utils.encode(native), encode);
}
 
function testUtilsCodecDecode() {
    assertEquals(Utils.decode(encode), native);
}

Дополнительная литература

Скрещиваем jqGrid и Open Flash Chart

admin — Wed, 28 Oct 2009 18:42:39 +0000

Вывод данных в виде таблице удобно тем, что предостовляет большие возможности работы с ними (сортировка, фильтрация, выборки). И с этим прекрасно справляется плагин jqGrid.

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

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

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

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

у jqGrid есть событие loadComplete – на него мы подвешиваем генерацию графика. То есть каждый раз когда грид обновляется, у нас будет обновятся график.
а данные для графика мы будем получать через пользовательский массив , с помощью функции 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>

Скрещиваем jqGrid и FCKeditor

admin — Wed, 14 Oct 2009 09:25:59 +0000

Есть прекрасный программный продукт jqGrid. У него есть неплохой функционал по редактированию данных в таблице, вот только нет возможности редактировать текст через какой-либо визуальный редактор, например FCKeditor.

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

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

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



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

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

Select Box Factory – очумелый плагин для jQuery.

admin — Mon, 20 Oct 2008 09:47:59 +0000

Я являюсь тайным фанатом библиотеки для javascript – jQuery. Это библиотека предоставляет для разработчика фантастические возможности для реализации задуманного им функционала.

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

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

Что он умеет:

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

var dropdown = new sFac({
	id : "fromMemory",
	container : "dropdownContainer"
});	


	 Lynx 
	Cheetah
	Bobcat

Получать самому списочный массив с сервера с помощью 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)
Плагин поддерживает фильтрование значений списка и создание списков из картинок
Создание списков с подкрашенными значениями, с последующей возможностью применить к ним фильтр
Поддержка скинов для списков

Скажи «здравствуй» Blackbird и «до свидание» alert()

admin — Thu, 16 Oct 2008 12:37:57 +0000

Вот такой громкий заголовок венчает сайт авторов Blackbird.

Что такое Blackbird – это js скрипт который позволяет забыть о существовании оператора JavaScript’а – alert(). Для разработчика javascript – интересный инструмент дебагинка кода.

Конечно, «монстры» JavaScript программирования скажут, зачем нам это нужно. Когда есть Firebug с его console.log(message). Для отладки кода в браузерах отличном от Firefox, есть от встроенных средств браузера до Firebug Lite.

Конечно, они будут правы, но…. я сторонник идеи – чем больше возможности выбора у человека, тем лучше. Каждый программист решает, каким инструментом ему удобнее воспользоваться для данной задачи и возможно это будет Blackbird.

Как подключить

скачать код
прописать в html файле следующие строчки

Что умеет

log.toggle(): Скрыть/Показать Blackbird
log.move(): Перемещение Blackbird к следующей фиксированной позиции: верхней-левой, верхней-правой, нижней-левой, нижней-правой.
log.resize(): Развернуть / Свернуть Blackbird
log.clear(): Очистить от содержимого Blackbird
log.debug(message): Добавить отладочную информацию в Blackbird
log.info(message): Добавить сообщение в Blackbird
log.warn(message): Добавить предупреждение в Blackbird
log.error(message): Добавить ошибку в Blackbird
log.profile(label): Профайлер кода. Это метка должна стоять в начале и конце тестируемого кода. Очень удобно чтобы узнать время выполнение вашего кусочка кода.

Какие клавиши понимает

F2: Скрыть/Показать
Shift+F2: Переместить
Alt+Shift+F2: Очистить Blackbird от сообщений

Drosera – отладчик javascript для Safari

admin — Tue, 05 Aug 2008 09:48:51 +0000

Webkit – движок Safari получил мощный javascript отладчик – Drosera. Это сообщение было опубликовано на блоке Safari. Загрузив последнюю ночную сборку Webkit вы сразу получите этот инструмент. По функциональности он не сильно уступает известному Firebug.

Теперь, кто сможет сказать, что javascript – не настоящий язык программирования.

240 удивительных плагинов для jQuery

admin — Fri, 25 Jul 2008 06:58:51 +0000

jQuery одна из моих любимых JavaScript библиотек. Одно из сильных сторон этот библиотеки – поддержка сторонних расширений (плагинов). А нашему брату только дай по расширять

В этом посту приведен список более чем 200 отобранных плагинов для jQury на каждый случай. Правда не мной, а Jürgen Koller.

File upload

Form Validation

Form – Select Box stuff

Form Basics, Input Fields, Checkboxes etc.

Time, Date and Color Picker

Rating Plugins

Search Plugins

Inline Edit & Editors

Audio, Video, Flash, SVG, etc

Photos/Images/Galleries

Google Map

Games

Tables, Grids etc.

Charts, Presentation etc.

Border, Corners, Background

Text and Links

Tooltips

Menus, Navigations

Accordions, Slide and Toggle stuff

Drag and Drop

XML XSL JSON Feeds

Browserstuff

Alert, Prompt, Confirm Windows

CSS

DOM, Ajax and other jQuery plugins

Js Decoder или как распутать запутаный код

admin — Fri, 11 Jul 2008 11:02:51 +0000

Нашел в сети замечательный онлайн инструмент Js Decoder. Он позволяет декодировать обфускационный код.

Часто можно встретить код такого вида
var base_code='';var jsdecoder;var jscolorizer;var code='';var time=0;function decode() {code='';base_code='';jsdecoder=new JsDecoder();jscolorizer=new JsColorizer();if($('msg').innerHTML.length){do_clean_init();}else{jsdecoder.s=$("a1").value;do_decode_init();}} function do_decode_init() {$('msg').innerHTML+='Decoding .. ';setTimeout(do_decode,50);}...

И не всегда это делается для того чтобы максимально усложнить жизнь программисту который хочет понять логику работы кода. Очень часто для того, что-бы уменьшить размер кода, за счет удаления лишних пробелов, переводов строк и пустых строк разделителей.

Вот для того что-бы привести код в человекопонятный вид и служит этот инструмент.