SimpleXML. Часть 2. XML дерево

В заключительной части цикла статей посвященного работе с SimpleXML, будет рассмотрена довольно распространенная задача: построение XML дерева.

Требования

  • Отображение в виде дерева содержимого любого XMLфайла с правильной структурой;
  • Возможность сворачивать и разворачивать ветви;
  • Атрибуты элементы выводятся в строку рядом с ним;
  • Текст элемента так же пишется рядом с названием элемента, но в скобках;

Для того, что бы лучше понять, что же все-таки мы хотим сделать, можно посмотреть на уже готовый пример: http://st-programming.ru/simple_xml/index.php

Как видно, здесь в качестве примера используется все тот же файл с рецептом.

Дерево представляет собой обычный вложенный список. Для добавления функциональности (сворачивание и разворачивание) и нормального внешнего вида используется плагин для JQuery – Treeview (скачать).

Внешний вид и структура

Прежде чем перейти к, непосредственно, разбору xml разберемся сначала с внешним видом и структурой приложения. Создадим три папки: css, images и js. Очевидно это папки для стилей, картинок и js скриптов. Файлы из скаченного архива плагина Treeview, раскидаем по этим папкам. Кроме того, в каталоге css стоит создать еще один файл: main.css – основной файл стилей для нашей странички.

Содержание файла main.css

  1. body {
  2.     margin: 0;
  3.     padding: 0;
  4.     background-color: #fff;
  5.     font-size: 12px;
  6. }
  7.  
  8. /* Стили отображения атрибутов элемента. */
  9. .attr {
  10.     margin-left: 5px;
  11.     font-size: 10px;
  12.     color: #ccc;
  13. }
  14.  
  15. /* Стили отображения текста элемента. */
  16. .text_node {
  17.     font-size: 12px;
  18.     margin-left: 5px;
  19.     color: gray;
  20. }

Наконец, в главном каталоге создадим файл index.php следующего содержания:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XML</title>
<link rel="stylesheet" type="text/css" media="screen" href="/css/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/jquery.treeview.css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.treeview.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    // Для списка xml_tree, подключаем плагин TreeView
    $("#xml_tree").treeview({
        animated: "fast" // Задаем скорость анимации
    });
  });
  </script>
</head>
    <body>
        <ul id="xml_tree" class="filetree">
            <!-- Здесь будет строится дерево -->
        </ul>
    </body>
</html>

Пока, это просто html заготовка. Отображением дерева добавим позже.

Работа с XML

Создадим в корневом каталоге новый файл xmlTree.class.php, как следует из названия, в этом файле будет содержаться xmlTree – класс, для построения XML дерева.

Единственным полем класса будет $xml – корневая ветвь XML документа, типа SimpleXMLElement. Так же будут два метода: закрытый readNode, который, собственно,  строит дерево и возвращает результат как строку, и открытый Show, своего рода оболочка для readNode. Кроме того, есть коструктор класса, который принимает имя XML файла как параметр.

Рассмотрим каждый из методов подробно.

Конструктор

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

  1. class xmlTree {
  2.     private $xml;
  3.  
  4.     public function  __construct( $setFileName ) {
  5.         $this->xml = simplexml_load_file( $setFileName );
  6.     }
  7.  
  8.     ...
  9. }

Метод readNode. Построение XML дерева

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

Метод readNode должен пробежать весь документ, получить все элементы, учитывая их вложенность, также должен получить все атрибуты и текст элементов.

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

Метод, в качестве параметра, будет принимать элемент документа. После того, как имя и атрибуты элемента получены, проверяется, есть ли у элемента дочерние ветви. Если есть, тогда циклом для каждой ветви рекурсивно вызывается этот же метод readNode. Таким образом, получается, обработать каждый элемент XML документа любой вложенности.

На выходе должен получатся правильно сформированный html список.

  1. private function readNode( $node ) {
  2.     $result = "<li>"; // Начинаем новый элемент списка
  3.  
  4.     $result .= $node->getName(); // Добавляем имя элемента
  5.  
  6.     // Циклом проходим все атрибуты
  7.     foreach ( $node->attributes() as $name => $value ) {
  8.         // Добавляем атрибуты. Оборачиваем их в тег span с классом стилей attr
  9.         $result .= '<span class="attr">' . $name . " = \"" .
  10.                                            $value . '"' . '</span>';
  11.     }
  12.  
  13.     // Работаем с текстом элемента
  14.     $text = trim($node); // Убираем лишние пробелы
  15.     // Если текст у элемента вообще есть
  16.     if ( !empty($text) ) {
  17.         // То добавлем его, заключенного в скобки
  18.         $result .= '<span class="text_node">' . "(" . $text . ")" . '</span>';
  19.     }
  20.  
  21.     // Если есть дочерние ветви
  22.     if ( count( $node->children() ) ) {
  23.         // Начинаем вложенный список
  24.         $result .= "<ul>";
  25.         // Цикл по доерним ветвям
  26.         foreach ( $node->children() as $chiled_node ) {
  27.              // Каждую из них обраюатывает этой же функцией
  28.              $result .= $this->readNode( $chiled_node );
  29.         }
  30.         $result .= "</ul>";
  31.     }
  32.     $result .= "</li>"; // Закрываем элемент списка
  33.  
  34.     return $result; // Возвращем сформированный html список
  35. }

Метод show

Открытый метод. Просто выводится readNode, в качестве параметра, которому передается поле $xml - главная ветвь документа.

  1. public function show() {
  2.     echo $this->readNode( $this->xml );
  3. }

На этом с классом xmlTree можно закончить. Вернемся к index.php.

Нужно подключить файл с только что написанным классом. Поместим в начало файла следующий код:

<?php
require_once 'xmlTree.class.php';
?>

Теперь уже можно, собственно, написать код для отображения дерева:

...
        <ul id="xml_tree" class="filetree">
<?php
$tree = new xmlTree( "tmp.xml" );
$tree->show();
?>
        </ul>
...

И, в итоге, мы получаем правильно сформированное XML дерево, удовлетворяющее поставленным выше требованиям. На этом цикл статей по SimpleXML можно завершить.

Скачать исходник

xml, алгоритмы, php, jquery
3 20 июля 2010 | SimpleXML

Комментарии (2)

Димка-программер | 4 октября 2010 г. 14:25 Ответить

Клевая статья, спасибо автору, заимел для себя много полезного)

Сашка-программер :) | 7 января 2011 г. 8:17 Ответить

$this->readNode
это же рекурсия %/

Добавить комментарий

  • Допустимые html-теги:
    <b> </b> - жирный шрифт
    <em> </em> - наклонный
    <s> </s> - зачеркнутый
    <pre> </pre> - сохранение отступов (печать кода)
    [?]
Введите текст с картинки