Преобразование XSL в XForms из простого файла XML и применение CSS

Я преобразовываю некоторый простой XML-документ в XForms и пытаюсь добавить стиль к конечному результату. Я использую реализацию XSLTForms и указываю на локальный файл CSS (загрузчик Twitter). Итак, XML-файл выглядит так:

<structure>
    <part class="Container" id="container">           
        <part class="Button" id="b1"/>
    </part> 
</structure>
<style>
    <property part-name="b1" name="label">Submit</property>
</style>

Мой XSLT, который преобразует эти части в документ XForms:

<xsl:key name="buttonLabels" match="property[@name='label']" use="@part-name"/>
<xsl:template match="part[@class='Button']"><!-- [key('buttonActions', @id)]-->
    <xsl:element name="xf:trigger">
        <xsl:attribute name="id">
            <xsl:value-of select="@id | @size | @style"/>
        </xsl:attribute>
        <xsl:element name="xf:label">
            <xsl:value-of select="key('buttonLabels', @id)"/>
        </xsl:element>
    </xsl:element>
</xsl:template>

<xsl:template match="part[@class='Container']">
    <xsl:element name="div">
        <xsl:attribute name="class">container</xsl:attribute>
        <xsl:apply-templates/>
    </xsl:element>
</xsl:template>

Теперь это производит: (что хорошо для того, что мне нужно в настоящее время)

<div class="container">
    <xf:trigger id="b1">
       <xf:label>Submit</xf:label>
    </xf:trigger>
</div>

Но я хотел бы добавить к этому <xf:trigger> некоторые правила стиля. Дело в том, что при преобразовании в элементы html структура

|_span
  |_span
     |_button
       |_span (for the label)

Поэтому я не уверен, как сделать XSLT-преобразование, чтобы оно вставляло, скажем, атрибут class="btn-danger" в тег <button>.

Другими словами, мне нужно получить что-то подобное в финальном Html: (в настоящее время я получаю это, но без class="btn-danger" в теге button)

<span id="b1">
    <span>
        <button type="button" class="btn-danger">
            <span id="xsltforms-mainform-label-2_6_2_4_3_" class="xforms-label">Submit</span>
        </button>
    </span>
</span>

Кроме того, я попытался добавить <xsl:attribute name="class">btn-danger</xsl:attribute> в шаблон для xf:trigger, но это вставляет атрибут в первый элемент span. Любые идеи? Заранее спасибо!

ОБНОВЛЕНИЕ:

XSLT, отвечающий за преобразование элемента xforms:trigger в элементы html, можно найти по этой ссылке — http://bpaste.net/show/c42CtcIcjbsI6GFGWK2q/ Но я не хочу редактировать реализацию XSLTForms, а скорее найду обходной путь, чтобы указать стиль кнопок из моего XML-файла. Например:

<structure>
    <part class="Container" id="container">           
        <part class="Button" id="b1"/>
    </part> 
</structure>
<style>
    <property part-name="b1" name="label">Submit</property>
    <property part-name="b1" name="style">btn-danger</property>
</style>

Итак, здесь я сопоставляю имя части и говорю, что хочу, чтобы кнопка с id="b1" имела правила стиля css, например, для btn-danger. Но если у меня есть другая кнопка и для нее нет правила стиля, она должна иметь внешний вид по умолчанию. Надеюсь, это ясно.


person lapadets    schedule 30.07.2014    source источник
comment
Для справки включите шаблоны, обрабатывающие xf:trigger, в преобразование XSLTForms. На этот вопрос нельзя ответить без этой детали.   -  person Tomalak    schedule 30.07.2014
comment
Да, и к вашему сведению, в большинстве случаев нет необходимости писать <xsl:element> или <xsl:attribute>. Просто запишите элементы и используйте шаблоны значений атрибутов, например:   -  person Tomalak    schedule 30.07.2014
comment
Я не уверен, что именно вы имеете в виду? Включены шаблоны для <xf:trigger> и <div>. Проверьте еще раз, пожалуйста.   -  person lapadets    schedule 30.07.2014
comment
Вы включили шаблон, который создает <xf:trigger> из вашего <part class="Button">, но ваша жалоба на самом деле касается шаблона, который создает кнопку HTML из <xf:trigger>. Это шаблон, который вам нужно включить в свой вопрос. (Я знаю, что вы не писали этот шаблон. Тем не менее, для этого вопроса это необходимый контекст.)   -  person Tomalak    schedule 30.07.2014
comment
Ок, понял. Ну, я использую XSLTForms, поэтому часть, которая переводит триггер в html-элементы, оттуда. Я вставил его сюда: bpaste.net/show/BXpf2Q2O1PQhQGlMOvbY Но редактировать не рекомендуется это оттуда... Так есть ли другой путь?   -  person lapadets    schedule 30.07.2014
comment
Святые спагетти, Бэтмен. Судя по всему, у проекта XSLTForms довольно ужасная кодовая база. В любом случае, какую бы часть всего этого вы ни опубликовали - похоже, он не несет ответственности за HTML, который вы показываете в своем вопросе. Есть одна строка (строка 73), которая выводит <button>, но с тремя точками и без дальнейшего содержимого. Я хочу сказать, что вам нужно сначала найти правильное место в исходном коде XSLTForms, чтобы узнать, что вам нужно сделать, чтобы он добавил класс CSS. (Я предполагаю, что вы не можете, но, возможно, вам повезло. Подумайте о том, чтобы добавить его с помощью jQuery, прежде чем применять начальную загрузку.)   -  person Tomalak    schedule 30.07.2014
comment
Да ну, я не обратил особого внимания на xsl XLSTForms - нашел нужный шаблон и добавил его сюда внизу - bpaste.net/show/c42CtcIcjbsI6GFGWK2q . Вы можете заметить, что я вручную добавил атрибут class="btn-success", но это просто сделает все кнопки такими, и я хочу иметь возможность специально изменять внешний вид кнопок на основе моего декларативного XML-описания. Я также сделаю обновление по своему вопросу.   -  person lapadets    schedule 30.07.2014
comment
Как я и думал. XLSTForms xsl не позволяет настраивать этот аспект. Изменение этого приведет к уродливому взлому, независимо от того, как вы это сделаете. Я думаю, что вы действительно не хотите менять исходный код XSLTForms * делает джедайский трюк с разумом *. Как я сказал. На вашем месте я бы изучил возможность добавления желаемых имен классов CSS с помощью нескольких строк кода JS, прежде чем вы загрузите все это в Bootstrap.   -  person Tomalak    schedule 30.07.2014
comment
Готовы ли вы уточнить ответ на вопрос? Я не уверен, как это сделать с помощью jQuery.   -  person lapadets    schedule 30.07.2014
comment
Попробуйте следующее: вы можете добавить класс CSS, не касаясь реализации XSLTForms xsl. Класс просто не заканчивается на нужном элементе. Потратьте некоторое время, чтобы получить HTML-код, выходящий из XSLTForms, как можно ближе к желаемому результату. Как только вы решите, что у вас это есть, опубликуйте HTML как новый вопрос, опустите весь утомительный фон, связанный с XSLT (вы решили, что все равно ничего не можете с этим поделать) и спросите, как лучше всего переместить правильные классы в правильные места с учетом Bootstrap. Если вы все хорошо подготовили со своей стороны, у вас будет несколько предложений в течение нескольких минут.   -  person Tomalak    schedule 30.07.2014
comment
Хорошо, я задал новый вопрос - stackoverflow.com/questions/25041499/ :)   -  person lapadets    schedule 30.07.2014
comment
Похоже, мой прогноз ответа в течение нескольких минут был неверным. Я обвиняю ваше упоминание XSLT в первых строках. Я не говорил опускать это без причины. ;)   -  person Tomalak    schedule 30.07.2014


Ответы (1)


Вы не можете добавить атрибут class непосредственно к элементу кнопки, сгенерированному XSLTForms.

Но вместо этого вы можете определить правило CSS, которое применяется к нему следующим образом:

#myclass button {
  color: red;
}

и используйте класс в триггере:

<xf:trigger class="myclass >

То же самое для каждого элемента управления XForms. Просто загляните в инспектор браузера, чтобы увидеть сгенерированные элементы управления.

person Bill Velasquez    schedule 30.07.2014
comment
Я думаю, это решение без каких-либо дополнительных сложностей! Спасибо :) - person lapadets; 30.07.2014