Материалы моего тренинга по XSLT (на основе материалов ALTOVA)

1. Программные
преобразования
http://ProductivityBlog.com.ua

2. О чем пойдет речь
▪XSLT-преобразования на стороне клиента
▪HTML 5 и XSLT

3. Файлы и инструменты
Файлы демонстраций в папке 5 внутри
папки Practice
Notepad++ для редактирования HTML-
файла

4. XSLT-преобразования на стороне
клиента
▪ Применение JavaScript
▪ Демонстрация

5. Преобразования с помощью
JavaScript
▪ XML-файл с подключенной таблицей стилей XSL
преобразуется браузером автоматически
▪ не всегда хочется включать в файл ссылку на XSLT
▪ браузер может не понимать XSLT
▪ JavaScript – более универсальное решение
▪ код, специфичный для конкретного браузера
▪ разные XSLT-файлы для разных браузеров или групп
пользователей

6. XML-файл

7. XSL-файл

8. HTML-файл

9. HTML-файл

10. Комментарии к примеру
▪ XML-файл не содержит ссылки на XSLT!
▪ Функция loadXMLDoc()
▪создает объект XMLHttpRequest
▪использует его методы open() и send() для
отправки запроса на сервер
* локально работать НЕ БУДЕТ! Нужен хостинг!
▪получает ответ в виде XML-данных

11. Комментарии к примеру
▪ Функция displayResult()
▪ загружает XML и XSL-файлы
▪ проверяет какой браузер используется
▪ MSIE:
▪ использует метод transformNode() для выполнения
трансформации
▪ добавляет полученный HTML внутрь блока с id=“example”
▪ Другие:
▪ создает объект XSLTProcessor и импортирует в него XSL-файл
▪ использует метод transformToFragment() для преобразования
▪ добавляет полученный HTML внутрь блока с id=“example”

12. Демонстрация
Просматриваем в «песочнице» w3school
рассмотренный выше HTML-файл и результат его
работы
Готовый файл можно найти в папке Demo5

13. Кросс-браузерность
▪ Пример не будет работать в браузере без XML-
парсера
▪ Лучше выполнить преобразование на сервере и
отправить на клиент в виде XHTML
▪PHP или ASP.NET
▪также возможно программное создание и
редактирование XML и XSL- файлов

14. HTML 5 и XSLT
▪ xslt.js
▪ AJAXSLT и jQuery
▪ Magic XML

15. xslt.js
▪ Компактная (<2kb) библиотека для
асинхронного преобразования XML на клиенте
▪jQuery-плагин
$('#myid').xslt('bla.xml', 'bla.xslt');
▪инлайн-XML
//без jQuery
new Transformation()
.setXml('<?xml version="1.0"?><bla/>')
.setXslt('<?xml version="1.0"?><xsl:stylesheet …')
.transform('rofl');
// с jQuery-плагином
$('#rofl').xslt('<?xml version="1.0"?><bla/>',
'<?xml version="1.0"?><xsl:stylesheet …');

16. xslt.js
▪ Open Source
▪ http://johannburkard.de/software/xsltjs/
▪ Документация:
http://johannburkard.de/software/xsltjs/apidoc/

17. AJAXSLT
▪ AJAXSLT
https://code.google.com/p/ajaxslt/
▪ библиотека от Google
▪ кросс-браузерная реализация XSLT
▪ начало разработки – 2005
▪ в наше время JSON – более правильная карма
▪ рекомендованная замена – Google Jstemplate
https://code.google.com/p/google-jstemplate/

18. AJAXSLT и jQuery
▪ XSLT-плагин
http://www.jongma.org/webtools/jquery/xslt/
▪ использует AJAXSLT
▪ загрузка XML/XSL через вызов $.ajax() и их
преобразование
▪ $.xslt.version
▪ $.xslt.textToXML(text)
▪ $.xslt.xmlToText(xml)
▪ $.xslt(options)
▪ $(...).xslt(options)

19. Magic XML
▪ Простой кросс-браузерный плагин
http://tomdavies.azurewebsites.net/magicxml/
▪ <script type="text/javascript" src="m-xml.min.js"></script>
▪ <div data-xml="demo.xml" data-xslt="transform.xslt"></div>
▪ magicXML.parse()
▪ Пример использования:
http://tomdavies.azurewebsites.net/xml/client/index.ht
ml

20. Кое-что еще
▪ Советую обратить внимание:
Generating HTML5 using XSLT
http://ukchill.com/technology/generating-html5-using-xslt/

21. Подводим итоги
▪ Мы узнали как выполнить
XSLT-преобразование на клиенте
▪ Настоящая кросс-браузерность =
серверный код
▪ Существует множество JavaScript-
библиотек для работы с XML/XSL

22. Вопросы
и ответы