JavaScript Property Tree. Реализация дерева свойств на JavaScript

В одной из предыдущих статей я писал об использовании HTML-интерфейса в приложениях на MFC, которое, по моему мнению, является очень перспективным направлением в силу существенного снижения затрат на разработку интерфейса и его последующую модификацию. Роль связующего звена между web-интерфейсом и программой на C++ выполняет JavaScript, с помощью которого реализуется большинство управляющих элементов.

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

Поэтому возникла потребность собственной реализации PropertyTree, тем более что аналогичного элемента управления на JavaScript мне отыскать не удалось. Разработку можно разделить на две части: собственно создание элемента управления и его сопряжение с программой на MFC. В этой статье хотелось бы поговорить о первом этапе.

Ниже на странице представлено дерево свойств на JavaScript, которое иллюстрирует следующий набор управляющих элементов:

  • Статический элемент.
  • Поле ввода (EditBox).
  • Выпадающий список (ComboBox).
  • Элемент для выбора цвета (ColorPicker).
 
Таблица
Значение 1 Значение 2
Значение 3 Значение 4

Первые три реализованы стандартными средствами HTML, а элемент управления цветом взят здесь: JavaScript Toolbox Color Picker, который был немного доработан. Изменения коснулись функции pickColor, которая, в новой версии, изменяет не только значение соответствующего поля ввода, но и его свойство background, а кроме того, вызывает метод onchange(), если таковой определен.

  1.  
  2. // A Default "pickColor" function to accept the color passed back from popup.
  3. // User can over-ride this with their own function.
  4. function pickColor(color) {
  5. if (ColorPicker_targetInput==null) {
  6. alert("Target Input is null, which means you either didn't
  7. use the 'select' function or you have no defined your own 'pickColor' function
  8. to handle the picked color!");
  9. return;
  10. }
  11. ColorPicker_targetInput.value = color;
  12. ColorPicker_targetInput.style.background = color;
  13. if(ColorPicker_targetInput.onchange != null){
  14. ColorPicker_targetInput.onchange();
  15. }
  16. }
  17.  
  18.  

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

Самым важным моментом является использование callback-функций, которые вызываются при развертывании или свертывании узлов дерева, а так же при изменении значений свойств в нем. Вызов этих функций будет осуществлен по имени, которое формируется из имени самого дерева и соответствующего суффикса.

  1.  
  2. //Create property tree.
  3. //Создается дерево свойств с именем TestPropTree
  4. testTree = new PropTree('TestPropTree');
  5. /*
  6.   Определение функции вызываемой при раскрытии и сворачивании узлов,
  7.   ее имя состоит из названия ранее определенного дерева и суффикса OnToggle.
  8.   В теле функции должна вызываться функция OnToggle, первый параметр которой –
  9.   ранее созданное дерево свойств. В примере, это treeTest.
  10.   */
  11. function TestPropTreeOnToggle(id)
  12. {
  13. OnToggle(testTree, id);
  14. }
  15. /*
  16.   Функция, вызываемая на изменение свойств, определяется аналогичным образом,
  17.   за тем исключением, что вызываемая в примере OnChangeItem, так же должна быть
  18.   определена пользователем.
  19.   */
  20. function TestPropTreeOnChangeItem(id)
  21. {
  22. OnChangeItem(testTree, id);
  23. }
  24.  
  25.  

Пример функции, вызываемой при изменении свойств:

  1.  
  2. //Define callback function for property tree
  3. function OnChangeItem(tree, id)
  4. {
  5. var editor = document.getElementById(tree.name + id + 'editor');
  6. tree.items[id].value = editor.value;
  7.  
  8. switch(id)
  9. {
  10. case 'TABLE_COLOR':
  11. var obj = document.getElementById('SampleTable');
  12. obj.style.color = editor.value;
  13. break;
  14. case 'TABLE_BGCOLOR':
  15. var obj = document.getElementById('SampleTable');
  16. obj.style.background = editor.value;
  17. break;
  18. case 'TABLE_HEAD':
  19. var obj = document.getElementById('SampleTableHead');
  20. obj.innerHTML = editor.value;
  21. break;
  22. case 'BORDER_WIDTH':
  23. var obj = document.getElementById('SampleTable');
  24. obj.style.borderWidth = editor.value;
  25. break;
  26. case 'BORDER_COLOR':
  27. var obj = document.getElementById('SampleTable');
  28. obj.style.borderColor = editor.value;
  29. break;
  30. case 'BORDER_STYLE':
  31. var obj = document.getElementById('SampleTable');
  32. obj.style.borderStyle = editor.value;
  33. break;
  34. }
  35. }
  36.  
  37.  

Узлы дерева могут добавляться в произвольном порядке, однако перед отрисовкой необходимо вызвать функцию сортировки FixLevels(), которая выстроит их в зависимости от уровня вложености.

  1.  
  2. obj = new PropTreeItem('ROOT');
  3. obj.name = 'Свойства таблицы';
  4. testTree.Add(obj);
  5.  
  6. obj = new PropTreeItem('COLORS', 'ROOT');
  7. obj.collapsed = true;
  8. obj.name = 'Цвета';
  9. testTree.Add(obj);
  10.  
  11. testTree.FixLevels();
  12. testTree.Show();
  13.  
  14.  

Что ж, первый шаг в реализации PropertyTree на JavaScript можно считать пройденным. Конечно класс еще несовершенен, необходимо реализовать автоматическое изменение размеров и более детально проработать механизм вызова callback-функций, а потому продолжение этой статьи обязательно последует.

Читайте в блоге

JavaScript Определение координат объектов и указателя мыши
Разноцветное облако ссылок
Рисуем график на PHP
Создание таблиц в плагине для WordPress
JavaScript Преобразование массивов и объектов в строку

Метки: Word Press

Комментарии:

Александр23 @ 20.04.2010 13:57

Спасибо хороший код

Войдите на сайт, чтобы оставить комментарий