<![CDATA[Серый форум — HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?id=6672 Mon, 15 Jul 2013 11:18:55 +0000 PunBB <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=73791#p73791 Serge Yolkin
XML/XSL: Обработка всех текстовых узлов всех тегов

Эту задачу тоже можно решить. Сейчас я занят. В будущем отвечу в той теме. Дам разъяснения того кода. Если смогу (время и мое понимание) - помогу решить и эту задачу.

]]> Mon, 15 Jul 2013 11:18:55 +0000 https://forum.script-coding.com/viewtopic.php?pid=73791#p73791 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=73755#p73755 Спасибо, Rumata, затык пройден, буду мудрить дальше.

[Off]
Вообще-то, жаль, что тема XSL на форуме не раскрыта. И в интернете материалов немного. Если не считать перепечатки одних и тех же статей. Собственно, все примеры сводятся к преобразованию заранее известного и хорошо структурированного XML, а более универсальные решения - на вес золота.

Если кому интересно, случайно обнаружил забавный утиль по данной теме (искал, как раз, примеры)

[/Off]

]]> Sat, 13 Jul 2013 21:46:48 +0000 https://forum.script-coding.com/viewtopic.php?pid=73755#p73755 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=73754#p73754 Serge Yolkin

Быстренько, на коленке написал. Подходит? Если требуются более сложные преобразования, то надо углубляться в тему. 


<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="//*/text()">
<xsl:if test="normalize-space() != ''">
<p><xsl:value-of select="normalize-space()" /></p>
</xsl:if>
</xsl:template>

</xsl:stylesheet>
]]> Sat, 13 Jul 2013 20:34:21 +0000 https://forum.script-coding.com/viewtopic.php?pid=73754#p73754 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=73704#p73704 А не подскажете ли, как с помощью xslt преобразования можно обрабатывать текстовые ноды по отдельности? Ну, для примера: из xml

<root>
  <tag1>
    текст1
    <tag2>
      текст2
      <tag3/>
      текст3
    </tag2>
  </tag1>
  текст4
</root>

получить html

<p>текст1</p>
<p>текст2</p>
<p>текст3</p>
<p>текст4</p>

причём, в общем случае (без привязки к именам тэгов и структуре дерева).

]]> Sat, 13 Jul 2013 00:55:39 +0000 https://forum.script-coding.com/viewtopic.php?pid=73704#p73704 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=69686#p69686

К XPath я пришел через несколько собственных попыток понимания XSLT. По сравнению со вторым - первый прост.

А… Ну, так — да, согласен.

]]> Thu, 21 Feb 2013 11:54:22 +0000 https://forum.script-coding.com/viewtopic.php?pid=69686#p69686 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=69685#p69685 alexii
К XPath я пришел через несколько собственных попыток понимания XSLT. По сравнению со вторым - первый прост. Вот другой вопрос - как полно он поддерживается в JScript/VBS. У меня не получилось поиграться с осями, а кроме функции text() других просто не признает.

]]> Thu, 21 Feb 2013 11:16:54 +0000 https://forum.script-coding.com/viewtopic.php?pid=69685#p69685 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=69684#p69684 OFF: Насчёт — «прост», я бы поспорил .

]]> Thu, 21 Feb 2013 08:12:55 +0000 https://forum.script-coding.com/viewtopic.php?pid=69684#p69684 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=69680#p69680 Прошел год с небольшим и я снова вернулся к теме обработки XML. Интерес возник по причине моего увлечения электронной читалкой и, своего рода, каталогизации коллекции электронных книг. В первую очередь было интересно как автоматизировать процесс переименования и сортировки книг.

В связи с этим узнал ближе XPath. Это язык запросов к элементам XML в XSL-преобразованиях. Достаточно прост и элегантен. Было бы интересно попробовать реализовать отображение XPath-запросов к заданным элементам XML-документа. Список запросов можно генерировать однократно для всех объектов (элементов или их атрибутов) в процессе загрузки файла в XML Viewer либо отображать отдельный XPath-запрос по наведению указателя мыши на объект.

]]> Thu, 21 Feb 2013 02:14:47 +0000 https://forum.script-coding.com/viewtopic.php?pid=69680#p69680 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=56536#p56536 Огромная работа проделана. Поздравляю )))

Кроссбраузерность явно представлена только в строках 

e = e || event;
var target = e.target || e.srcElement;

Остальные проверки - чистые алгоритмические проверки, не связанные с кроссбраузерностью. Вычурная срока <!--//--><![CDATA[//><!--... Видимо она как-то связана поддержкой старых браузеров -- я не вдавался в ее магию, а использовал чтобы парсер МСИЕ нормально работал и XML Viewer воспринял код приложения как валидный XML.

]]> Tue, 07 Feb 2012 13:32:53 +0000 https://forum.script-coding.com/viewtopic.php?pid=56536#p56536 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=56530#p56530 Черт меня дернул в посте #68 пожаловаться на то, что "подчиненные ветки <LI> оказываются внутри <SPAN>".
Виноват, дурак, подумать надо было сначала!
На поверку оказалось, что это - не беда, а - великая радость!
Т.е. если отказаться от прежнего алгоритма с последовательным перебором всех подчиненных веток, а скрывать все их целиком (как в варианте Rumata), то можно осуществить свертку одной строкой: objSPAN.style.display = (hide) ? 'none' : ''; без всяких ф-ций и прочих заморочек!
Так, же,одной строкой oLI.className = (hide) ? 'hidden' : ''; осуществляется подсветка свернутого узла.
В общем код получился очень простой и понятный.
Что же касается скорости, то, по моим измерениям, использование XSL обработки увеличивает ее в 1,5-2 раза.
В, общем все последние изменения зафиксированы тут.
Последний zip.

2Rumata
1. Ваше авторство зафиксировал. Если что не так - только скажите - поправлю.
2. Как видите, прекрасно обошелся без всяких "классовых" ф-ций и других "наворотов".
3. Простите, я неверно выразился, обобщив одним словом "кроссбраузерность" все конструкции, нужные только там где неизвестна версия браузера. Всякие там
<script type="text/javascript"><!--//--><![CDATA[//><!--
<!--
<?xml version="1.0"?>
-->
e = e || event;
var target = e.target || e.srcElement;
и т.п.

]]> Tue, 07 Feb 2012 11:42:12 +0000 https://forum.script-coding.com/viewtopic.php?pid=56530#p56530 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=56512#p56512 mozers пишет:

У меня свое видение результата и способов его достижения. У Вас - свое

И это естественно. )))

mozers пишет:

зачем нужны ф-ции подмены классов когда можно запросто присвоить любому элементу нужный класс obj.className='myclass'?

Подмена класса, или точнее добавление/удаление определенного класса. Каждый класс содержит определенный набор правил. Соответственно, управляя классами над заданным элементом легко манипулировать внешним видом элемента. А функции необходимы для унификации обращения с произвольными классами произвольных элементов.

mozers пишет:

постоянные document.getElementById() когда можно просто обратиться к элементу, указав его id?

Если обращение к элементу одноразовое, например Element.removeClass(document.getElementById('error-container'), 'hidden'); и далее по тексту, то и создание переменной избыточно. А использование функции вместо прямого обращения по id - это старые привычки, унаследованные от веб-программирования. Кстати, неплохие привычки. И еще. Я уже не помню, но кажется в одном из браузеров не рекомендуется создавать переменные, одноименные существующим тегам.

mozers пишет:

Зачем понатыкана куча ненужных кросс-браузерных проверок

А вот здесь я требую конкретных примеров кучи.

mozers пишет:

вырву из Вашего кода то, что мне ОЧЕНЬ понравилось и продолжу свой путь

Дерзайте )))

]]> Mon, 06 Feb 2012 19:45:24 +0000 https://forum.script-coding.com/viewtopic.php?pid=56512#p56512 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=56505#p56505 2Rumata
Я просил помощи только с XSL. Вы же по сути выложили совершенно иную программу.
Мне очень нравятся использованные в ней решения, и я обязательно буду их использовать в XMLViewer (конечно, не забыв упомянуть их автора). Но использовать код целиком (пусть даже модифицированный) я не буду.
У меня свое видение результата и способов его достижения. У Вас - свое.
В Вашем коде мне многое непонятно. Например, зачем нужны ф-ции подмены классов когда можно запросто присвоить любому элементу нужный класс obj.className='myclass'? Зачем нужны постоянные document.getElementById() когда можно просто обратиться к элементу, указав его id? Зачем понатыкана куча ненужных кросс-браузерных проверок, ведь HTA работает только на движке IE? Продолжать задавать вопросы можно долго...
Нет уж, лучше я вырву из Вашего кода то, что мне ОЧЕНЬ понравилось и продолжу свой путь

]]> Mon, 06 Feb 2012 16:11:42 +0000 https://forum.script-coding.com/viewtopic.php?pid=56505#p56505 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=56503#p56503 mozers пишет:

как бы сделать так, чтобы содержимое узла отображалось в одной строке с именем и атрибутами

Я тоже думал над этим (когда хотел представить свое видение задачи). Надо отказаться от списков UL/LI и полностью перейти на SPAN - строковым элементам. Либбо изменить отображение элементов с помощью CSS. Это решаемо - ведь МСИЕ показывает текстовое содержимое тега в той же строке что и имя тега. Мозилла в отличие от МСИЕ отображает текст в отдельной строке.

mozers пишет:

Мне очень нравится

Спасибо.

mozers пишет:

вопросы

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

]]> Mon, 06 Feb 2012 13:59:00 +0000 https://forum.script-coding.com/viewtopic.php?pid=56503#p56503 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=56502#p56502 По сути переделано ВСЕ.
А вообще - КЛАСС! Мне очень нравится
Есть, конечно, мелкие вопросы... Но лучше я их оставлю "на потом".
Меня больше интересует как бы сделать так, чтобы содержимое узла отображалось в одной строке с именем и атрибутами (как было раньше), а не занимало отдельную под-строку. И раньше эта проблема решалась непросто и сейчас, видимо, придется покумекать...

]]> Mon, 06 Feb 2012 13:13:05 +0000 https://forum.script-coding.com/viewtopic.php?pid=56502#p56502 <![CDATA[Re: HTA: XML Viewer]]> https://forum.script-coding.com/viewtopic.php?pid=56501#p56501 Вот пример. Это черновик, который изначально состоит из отдельных файлов, которые я объединил в один для простоты тестирования. В конечном результате этот пример должен быть существенно переработан для публикации.

Я счел нужным дать некоторое пространное описание этого черновика. Если эти объяснения скучны и неинтересны, то сразу переходите к самому главному в конце.

Для отображения имени xml-тега выбран H3 из соображений, что он лучше подходит для отображения структуры (так же как Вы выбрали списки). Дизайнер из меня не очень хороший, но я предпочитаю большие буквы и много пустого пространства на странице. Поэтому не пугайтесь.
-- В CSS предусмотрены практически все необходимые правила (некоторые вставлены как пустышки). Кроме того добавлено немного рюшечек, имитирующих раскрывающиеся/схлопывающиеся подуровни в виде символов плюс/минус.
-- XSL "знает" как преобразовать текст, комментарии, xslt-инструкции, вложенные и одиночные теги и атрибуты тегов. Также "различает" теги с установленным атрибутом type="text/*".
-- JavaScript добавляет необходимую динамику - свернуть/развернуть теги.
-- HTA контейнер всего этого хозяйства.

Еще немного слов по поводу динамики. Она достигалась добавлением класса к внешнему тегу. Сокращенный пример, объясняющий действо.

Обычный вид - тег развернут


<div class="node-container">
<h3 class="node-tag">...</h3>
<div class="node-content">
...
</div>
</div>

.
Тег свернут


<div class="node-container collapsed">
<h3 class="node-tag">...</h3>
<div class="node-content">
...
</div>
</div>

.
Желаемый результат достигается за счет того, что заданы CSS-правила:

.collapsed .node-tag	{
	background-color: #ffc;
}
.collapsed .node-content	{
	display: none;
}

Первое правило меняет фоновый цвет тега, второе правило скрывает содержимое. Код управляет добавлением/удалением класса .collapsed элементу .node-container при клике внутри элемента .node-tag. 


<html>
<head>
<title>XML Viewer</title>
<!--
<link type="text/css" rel="stylesheet" href="xmlview.css" />
-->
<style type="text/css">

.instruction	{
	border: 1px solid #00f;
	color: #00c;
	font-style: italic;
	font-size: 11pt;
}

.comment	{
	border: 1px solid #ccc;
	color: #999;
	font-style: italic;
	font-size: 11pt;
}

.node-container	{
	border-left: 1px solid #eee;
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 11pt;
}
.node-single-tag	{
	margin: 0;
}
.node-tag	{
	border-bottom: 1px solid #eee;
	cursor: pointer;
	margin: 0;
}
.node-name	{
}
.node-text	{
}
.node-content	{
	margin: 0 0 0 20px;
}
.node-code	{
	border: 1px solid #ccc;
	background-color: #eee;
	font-size: 0.8em;
	margin: 0;
}

.attr	{
	font-size: 0.9em;
}
.attr-name	{
	color: #c00;
	font-weight: bold;
}
.attr-value	{
	color: #00c;
	font-style: italic;
}

.collapsed .node-tag	{
	background-color: #ffc;
}
.collapsed .node-content	{
	display: none;
}

.sign-closed, 
.sign-opened	{
	font-size: 12pt;
	margin-left: -15px;
	text-align: center;
	width: 15px;
}
.sign-closed	{
	display: none;
}
.collapsed .sign-closed	{
	display: inline-block;
}
.sign-opened	{
	display: inline-block;
}
.collapsed .sign-opened	{
	display: none;
}

.hidden	{
	display: none;
}

.error	{
	background-color: #ffc;
	border: 1px solid #f00;
	font-family: Verdana, Tahoma, sans-serif;
	padding: 10px;
}
.error-line	{
	color: #f00;
}

</style>
<!--
<script type="text/javascript" src="xmlview.js"></script>
-->
<script type="text/javascript"><!--//--><![CDATA[//><!--

var Element = {
	/**
	 * Checks that an element has a provided className
	 */
	classExists: function(element, className)
	{
		return this.RE(className).test(element.className);
	}, 
	/**
	 * Creates the regular expression to check that 
	 * a className is defined for an element and 
	 * remove an existing one from an element
	 */
	RE: function(className)
	{
		return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', 'g');
	}, 
	/**
	 * Adds a className to an element
	 */
	addClass: function(element, className)
	{
		if ( ! this.classExists(element, className) ) {
			element.className += ' ' + className;
		}
		return element;
	}, 
	/**
	 * Removes a classname
	 */
	removeClass: function(element, className)
	{
		className = element.className.replace(this.RE(className), ' ');
		if ( className != element.className ) {
			element.className = className;
		}
		return element;
	}, 
	/**
	 * Toggles (turn on/turn off) a className
	 */
	toggleClass: function(element, className)
	{
		if ( this.classExists(element, className) ) {
			this.removeClass(element, className);
		} else {
			this.addClass(element, className);
		}
		return element;
	}
};

var XMLView = {
	/**
	 * Loads and validate a xml-file
	 */
	loadXml: function(filename, async, onreadystatechange)
	{
		var doc = new ActiveXObject("Msxml2.DOMDocument");
		doc.async = async;
		if ( typeof onreadystatechange == 'function' ) {
			doc.onreadystatechange = onreadystatechange;
		}
		doc.load(filename);
		return doc;
	}, 
	/**
	 * Loads an input xml-file, shows errors if they occur
	 *
	 * loader is callback-function that should return an xml-document
	 *
	 * onerror is callback function, handler of parsing errors
	 */
	loadSafely: function(loader, onerror)
	{
		if ( typeof loader != 'function' ) {
			throw new TypeError();
		}

		var doc = loader(this);
		if ( ! doc ) {
			return;
		}

		var err = doc.parseError;

		if ( err.errorCode == 0 ) {
			return doc;
		}

		if ( typeof onerror == 'function' ) {
			onerror(err);
		}
	}, 
	/**
	 * Loads an input xml-file and the predefined xsl-file
	 * and transforms a xml-file accordingly xsl
	 *
	 * xmlLoader and xslLoader are callback-functions that 
	 * should return xml-documents
	 *
	 * onerror is callback function, handler of parsing errors
	 */
	transform: function(xmlLoader, xslLoader, onerror)
	{
		var xml = this.loadSafely(xmlLoader, onerror);
		if ( ! xml ) {
			return;
		}

		var xsl = this.loadSafely(xslLoader, onerror);
		if ( ! xsl ) {
			return;
		}

		return xml.transformNode(xsl);
	}, 

	/**
	 * The main routine
	 *
	 * Loads the predefined xsl-file
	 * Loads an input xml-file
	 * Transform an input file
	 * Outputs the result or details on error to a html page
	 *
	 * element is a reference to a html-element that is provided
	 * when the method is called
	 *
	 * xmlLoader and xslLoader are callback-functions that 
	 * should return well-fromed xml-files
	 *
	 * onerror is callback function, handler of parsing errors
	 */
	init: function(element, xmlLoader, xslLoader, onerror)
	{
		var html;

		if ( element ) {
			html = this.transform(xmlLoader, xslLoader, onerror);
		}

		if ( html ) {
			element.innerHTML = html;
		}

		document.onmousedown = function(e)
		{
			e = e || event;
			var target = e.target || e.srcElement;

			// Looking for the nearest node-tag
			while ( target && (target.className || '').indexOf('node-tag') == -1 ) {
				target = target.parentNode;
			}

			if ( ! target ) {
				return;
			}

			// Perform toggle (turn on/turn off)
			Element.toggleClass(target.parentNode, 'collapsed');
		};
	}
};

//--><!]]></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--

window.onload = function()
{
	var html_entity_encode = function(value)
	{
		var div = document.createElement('div');
		var text = document.createTextNode(value);
		div.appendChild(text);
		return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, ''');
	};

	var xmlfile;
//	var xslfile = 'xmlview.xsl';

	XMLView.init(
		// the reference to the xml-container
		document.getElementById('xml-container'), 

		// xml-file loader
		function(XMLView)
		{
			// Load a file using type=file input
			var f = document.getElementById('openFile');
			f.click();

			xmlfile = f.value;
			if ( ! xmlfile ) {
				return;
			}

			document.title += ' :: ' + xmlfile;

			return XMLView.loadXml(xmlfile);
		}, 

		// xsl-file loader
		function(XMLView)
		{
			return document.getElementById('xslDocument');
//			return XMLView.loadXml(xslfile);
		}, 

		// parsing error handler
		function(err)
		{
			Element.removeClass(document.getElementById('error-container'), 'hidden');

			document.getElementById('error-url').innerHTML = err.url;
			document.getElementById('error-reason').innerHTML = err.reason;
			document.getElementById('error-line').innerHTML = err.line;
			document.getElementById('error-linepos').innerHTML = err.linepos;

			document.getElementById('error-srcText').innerHTML = html_entity_encode(err.srcText);
			document.getElementById('error-pointer').innerHTML = new Array(err.linepos).join('-') + '^';
		}
	);
};

//--><!]]></script>
</head>
<body>

<div id="xml-container"></div>

<div class="error hidden" id="error-container">
<b>URL: </b><span id="error-url"></span><br />
<b>Error: </b><span id="error-reason"></span><br />
<b>Line: </b><span id="error-line"></span><br />
<b>Position: </b><span id="error-linepos"></span><br />
<br />
<code class="error-line" id="error-srcText"></code><br />
<code class="error-line" id="error-pointer"></code>
</div>

<div class="hidden">
<input type="file" id="openFile" />
</div>

</body>
<xml id="xslDocument">
<!--
<?xml version="1.0"?>
-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="1.0" indent="no" />

<xsl:template match="/">
<xsl:apply-templates />
</xsl:template>

<xsl:template match="processing-instruction()">
<div class="instruction"><xsl:value-of select="name()"/><xsl:text> </xsl:text><xsl:value-of select="."/></div>
</xsl:template>

<xsl:template match="comment()">
<div class="comment"><xsl:value-of select="." /></div>
</xsl:template>

<xsl:template match="text()">
<span class="node-text"><xsl:value-of select="." /></span>
</xsl:template>

<xsl:template match="*">
<div class="node-container">
<h3 class="node-single-tag"><span class="node-name"><xsl:value-of select="name()" /></span><xsl:apply-templates select="@*" /></h3>
</div>
</xsl:template>

<xsl:template match="*[node()]">
<div class="node-container">
<h3 class="node-tag">
<span class="sign-opened">-</span><span class="sign-closed">+</span>
<span class="node-name"><xsl:value-of select="name()" /></span><xsl:apply-templates select="@*" /></h3>
<div class="node-content">
<xsl:choose>
<xsl:when test="starts-with(@type,'text/')">
<pre class="node-code"><xsl:value-of select="." /></pre>
</xsl:when>
<xsl:otherwise>
<xsl:apply-templates />
</xsl:otherwise>
</xsl:choose>
</div>
</div>
</xsl:template>

<xsl:template match="@*">
<xsl:text> </xsl:text><span class="attr"><code class="attr-name"><xsl:value-of select="name()" /></code><xsl:text>=</xsl:text><code class="attr-value"><xsl:value-of select="." /></code></span>
</xsl:template>

</xsl:stylesheet>
</xml>
</html>
]]> Mon, 06 Feb 2012 11:56:47 +0000 https://forum.script-coding.com/viewtopic.php?pid=56501#p56501