Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > XML, XSL > Смена дизайна сайта

Автор: koss 17.11.2005, 22:17

Привет всем!

Дано:
1. Документ person.xml.
2. Две таблицы стилей: pers1.xsl и pers2.xsl.
3. Две CSS таблицы: style1.css и style2.css.

Допустим, в настоящий момент есть связка: person.xml->pers1.xsl->style1.css. Т.е. на экране я вижу страничку, оформленную в одном стиле.

Вопрос:
Как реализовать переход к другому оформлению странички (person.xml->pers2.xsl->style2.css) в "прямом" эфире. Т.е. пользователь кликает к-нить кнопку и происходит смена дизайна (а контент остается)?

Я, собственно, не в курсе, как надо делать в идеале, поэтому css+xsl+xml выбрал по своему усмотрению. Т.е. м.б. существует более красивое решение поставленной задачи.
В любом случае рассчитываю на помощь...
smile

Заранее спасибо!

Автор: 3,14 18.11.2005, 10:27

Нужно чтоб person.xml генерировался каким-то скриптом.
Пользователь передаёт информацию серверу какой интрефейс ему нужен (пусть это будет пар-р skin_id):
skin_id = 0 (по умолчанию) - person1.xsl
skin_id = 1 - person2.xsl

скрипт смотрит если пришёл skin_id = 1, вставляет в начало person.xml такую строку:

Код


<?xml-stylesheet type="text/xsl" href="http://mysite.ru/xsl/person2.xsl"?>

Иначе:

Код


<?xml-stylesheet type="text/xsl" href="http://mysite.ru/xsl/person2.xsl"?>

Теперь о css:
В person1.xsl ставишь строчку:

Код


<link rel="stylesheet" href="http://mysite.ru/css/style1.css" type="text/css"/>

ну а в person2.xsl соответсвенно:

Код


<link rel="stylesheet" href="http://mysite.ru/css/style2.css" type="text/css"/>

Автор: koss 18.11.2005, 12:21

Спасибо! Будем ваять скрипт...

P.S. Кстати, а рационально ли решать такую проблему средствами XML? Интересно было бы узнать мнение спецов...

Автор: 3,14 21.11.2005, 11:17

koss, рационально,
1) трафик экономиться
2) можно прикрутить GUI клиентовый

Но емть и проблемма: не всеми браузерами поддерживается.

Автор: koss 23.11.2005, 16:07

В общем получилась такая штука:

1. Файл index.html:

Код


<html>
<script language="JavaScript">
function yes() {
    Document = dsoInput.XMLDocument;
    Document.documentElement.childNodes(0).childNodes(2).text="YES!";
    title.innerText = Document.documentElement.childNodes(0).text;
}
function no() {
    Document = dsoInput.XMLDocument;
    Document.documentElement.childNodes(0).childNodes(2).text="NONO!";
    title.innerText = Document.documentElement.childNodes(0).text;
}
</script>
<body>
<xml id="dsoInput" src="persons.xml"></xml>

<table datasrc="#test" border="1" align="center" width="400">
<tr>
    <td><span id="title"></span></td>
</tr>
</table>
<form name="yepno">
<input onclick="yes()" type="button" value="YES!">
<input onclick="no()" type="button" value="NO!">
</form>
</body>

</html>

2. Файл person.xml:

Код


<?xml version="1.0" encoding="Windows-1251"?>
<?xml-stylesheet type="text/xsl" href="persons.xsl" ?>
<persons_contact>
 
<person>
    <name>Алина</name>
    <nick>Tiger</nick>
    <DOB>1980</DOB>
    <exp>4</exp>
    <country>Польша</country>
    <top>7.5</top>
    <email>dot@ubar.pl</email>
    <rank>Сержант</rank>
    <photo img="i/1.jpg" />
    </person>                                

<person>
    <name>Марио</name>
    <nick>Donnald</nick>
    <DOB>1975</DOB>
    <exp>9 лет</exp>
    <country>Италия</country>
    <top>9.2</top>
    <email>donn@uras.benn.it</email>
    <rank>Лейтенант</rank>
    <photo img="i/4.jpg" />
    </person>
</persons_contact>

В html-е есть две функции, которые при нажатии изменяют элемент <DOB>. Используется объектная модель xml документа.

В общем, это как пример, я пытаюсь выразить идею вопроса.

Вопрос:
Каким образом (используя объектную модель xml документа), получить доступ к строке

Код


<?xml-stylesheet type="text/xsl" href="persons.xsl" ?>

?

Хочу выводить в окно браузера непосредственно xml документ, который связан с таблицами xsl (для своего дизайна - своя), которые выглядеть должны так:
persons.xsl

Код


<?xml version="1.0" encoding="windows-1251"?>
        
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl:template match="/">        
 <HTML>         
 <HEAD>         
  <TITLE>PERSONS</TITLE>        
  <META http-equiv="Content-Type" content="text/html; charset=windows-1251" />    
  <LINK rel="stylesheet" href="i/st.css" type="text/css" />       
  </HEAD>       

<script language="JavaScript">
FUNCTION DESIGN1() {}
</script> 

<BODY>         
............
............
  </BODY>       
  </HTML>       
  </xsl:template>       
</xsl:stylesheet>

persons2.xsl

Код


<?xml version="1.0" encoding="windows-1251"?>
        
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl:template match="/">        
 <HTML>         
 <HEAD>         
  <TITLE>PERSONS</TITLE>        
  <META http-equiv="Content-Type" content="text/html; charset=windows-1251" />    
  <LINK rel="stylesheet" href="i/st.css" type="text/css" />       
  </HEAD>       

<script language="JavaScript">
FUNCTION DESIGN2() {}
</script> 

<BODY>         
............
............
  </BODY>       
  </HTML>       
  </xsl:template>       
</xsl:stylesheet>

И, когда чел заходит на мою страничку, он видит сайт в одном оформлении (которое я установил по умолчанию).
Потом он жмакает кнопку и выполняется функция смена дизайна, заменяется строчка в xml документе и изменяется разметка, оформление, цвета, а сам контент не подгружается...

Подскажите плиз... smile

Автор: 3,14 24.11.2005, 12:40

Цитата(koss @ 23.11.2005, 16:07)

используя объектную модель xml документа

Что за обьектная модель?

Автор: koss 24.11.2005, 20:39

Объектная модель xml документа - Document Object Model (DOM). DOM cостоит из группы программных объектов, представляющих различные компоненты xml-документа.

DOM хранит записи в иерархической, древовидной структуре, отражающей иерархическую структуру XML-документа. И вы можете использовать ее для доступа к любым компонентам XML-документа, включая элементы, атрибуты, инструкции по обработке, комментарии...

В примере, который я привёл выше, я с помощью функции:

Код


<script language="JavaScript">    
function yes() {    
    Document = dsoInput.XMLDocument;    
    Document.documentElement.childNodes(0).childNodes(2).text="YES!";    
    title.innerText = Document.documentElement.childNodes(0).text;    
}

Сначала подключаю xml. Потом, получаю доступ к узлу DOB. Т.е.: сначала мы двигаемся из коревого элемента к первому потомку (childNodes(0)) первого уровня вложенности. Это узел <person> с именем Алина. Находясь в этом узле получаю доступ к узлу DOB: childNodes(2). А потом пользуюсь свойством text и меняю текстовое содержимое данного элемента на YES!. Причём, изменения не происходят в самом файле.
Потом в переменную title помещаю всё содержимое первого потомка и строками

Код


<xml id="dsoInput" src="persons.xml"></xml>    
<table border="1" align="center" width="400">    
<tr>    
    <td><span id="title"></span></td>    
</tr>    
</table>

задаю связь с xml, и содержимое переменной title связываю с элементом [b]<span>/[b].
Я пользовался мануалами:
1. http://www.realcoding.net/article/view/2050.
2. http://gberman.narod.ru/xmllections/dom/start.htm.

Но нигде не сказано, как получить доступ, используюя механизм DOM, к строке, в которой устанавливается связь с xsl...

Автор: 3,14 28.11.2005, 13:16

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

Код


document.styleSheets

Если нужно подробнее спроси в форуме по JavaScript

Хотя на мой взгляд генерировать XML на стороне клиента по крайней мере странно, обычно XML фсё же формируют на стороне сервера, иначк просто смысл теряется.

Автор: koss 28.11.2005, 14:53

Нет. Документ уже существует, он лежит на сервере. Клиент его получает полностью. Один раз, при первом посещении. Потом делает с ним, что хочет: меняет оформление (для печати, или разные стили отображения в браузере), сортирует, ищет, меняет отображаемые поля и т.д.

Т.е. не происходит постоянного обмена межу С и К: запрос-обработка-ответ. Экономится трафик и снижается нагрузка на сервер. Клиент (при желании) просто дополучает доп. инфу в виде xsl. И смысл не теряется. Как раз наоборот, используем одну из особенностей XML... Разве нет?

Автор: 3,14 29.11.2005, 10:12

Нет смысла использовать XML, можно просто обойтись JavaScript и получить всё тоже самое.
Основная идея использования XML + XSLT разделить офрмление и содержание, у тебя же вроде этого не происходит.

Автор: koss 29.11.2005, 16:49

Да ладно!

Как раз таки это и происходит! Документ xml один, а таблиц с оформлением - сколько хочешь! Одними только JavaScript'ами (+ HTML) далеко не уедешь... Точнее сказать - никуда не удешь.

XML + XSLT + JavaScripts - вот динамика в чистом виде + независимость контента от дизайна...

Автор: Ignat 29.11.2005, 17:33

Цитата(koss @ 29.11.2005, 16:49)

XML + XSLT + JavaScripts - вот динамика в чистом виде + независимость контента от дизайна...

+ серверные скрипты (на выбор)