в России и странах СНГ [изменить]

Другие статьи из этой серии: Совет по XForms

В этой статье:
	Прежде, чем вы начнете: замечания по этой статье
	Базовая форма
	Загрузка URL
	Заключение
	Загрузка
	Ресурсы
	Об авторе
	Выскажите мнение об этой странице

Ссылки по теме:
	XML техническая библиотека

developerWorks Россия > XML >

Совет по XForms: Вызов JavaScript из формы XForms

Опции документа

Опции документа, требующие включения JavaScript, не отображаются

		Обсудить
		Исходные тексты примера

Выскажите мнение об этой странице

Помогите нам улучшить содержание

Уровень сложности: средний

Николас Чейз, независимый автор, Backstop Media

10.07.2007

Так как элементы управления XForms являются частью пространства имен, отделенного от HTML и страницы, вы не можете использовать обычные методы для вызова JavaScript. Так что делать, если вам нужно вызвать JavaScript из формы XForms? Эта статья показывает, как это сделать.

Прежде, чем вы начнете: замечания по этой статье

Эта стаья создана для конкретной задачи. Для дополнительной информации по XForms читайте цикл из трех статей Введение в XForms.

Примеры XForms, описанные в данном совете, протестированы и работают с браузерами Firefox 1.5 (с установленным расширением XForms) и Microsoft® Internet Explorer 6 с установленным элементом управления Formsplayer. Раздел загрузка содержит XHTML-файл для Firefox и HTML-файл для IE.

В начало

Базовая форма

XForms предоставляет простой способ добавления интерактивности к форме, с использованием триггеров и действий, но в большинстве случаев это действия, связанные с XForms. В данной статье вы создадите форму, которая включает кнопку, при нажатии которой выполняется JavaScript. Давайте начнем с базовой формы (листинг 1).

Листинг 1. Базовая форма

                
<?xml version="1.0" encoding="ASCII"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xforms="http://www.w3.org/2002/xforms">
  <head>
    <title>Instance Data-To-XHTML/XForms Example</title>

    <xforms:model id="auctionItems">
      <xforms:instance id="auctions" src="auctions.xml"/>
      <xforms:submission id="submit_model_auctionItems"
                         action="http://xformstest.org/cgi-bin/showinstance.sh"
                         method="post" instance="auctions"/>
    </xforms:model>
    <link href="gen_default.css" rel="stylesheet"/>
  </head>
  <body>
    
    <h1 align="center" id="myTest">Auction Item Inventory</h1>
    
    <xforms:repeat nodeset="instance('auctions')/auctionItem"
 id="repeatAuctionItems">
      <h2 align="center">Auction Item</h2>
      <xforms:input ref="@itemID">
        <xforms:label>Item ID</xforms:label>
      </xforms:input>
      <xforms:input ref="purchaseDate">
        <xforms:label>Purchase Date</xforms:label>
      </xforms:input>
      <xforms:input ref="auctionLength">
        <xforms:label>Auction Length</xforms:label>
      </xforms:input>
      <xforms:input ref="purchasePrice">
        <xforms:label>Purchase Price</xforms:label>
      </xforms:input>

      <xforms:input ref="description">
        <xforms:label>Description</xforms:label>
      </xforms:input>
      <xforms:input ref="estimatedValue">
        <xforms:label>Estimated Value</xforms:label>
      </xforms:input>
    </xforms:repeat>

    <xforms:group>

      <xforms:trigger>
        <xforms:label>Show action</xforms:label>
      </xforms:trigger>

      <xforms:trigger>
        <xforms:label>Insert Auction Item</xforms:label>
        <xforms:insert nodeset="instance('auctions')/auctionItem"
 at="index('repeatAuctionItems')"
                       position="after" ev:event="DOMActivate" />
      </xforms:trigger>
      <xforms:trigger>
        <xforms:label>Delete Auction Item</xforms:label>
        <xforms:delete nodeset="instance('auctions')/auctionItem"
 at="index('repeatAuctionItems')"
                       ev:event="DOMActivate" />
      </xforms:trigger>
    </xforms:group>

    <xforms:submit submission="submit_model_auctionItems">
      <xforms:label>Submit</xforms:label>
    </xforms:submit>

  </body>
</html>

Форма включает кнопку, которая должна показывать действие, подтверждающее форму, как вы можете видеть на рисунке 1.

Рисунок 1. Форма с кнопкой Show action

Чтобы сделать это, начните с создания фактического кода (листинг 2).

Листинг 2. JavaScript

                
...
  <head>
    <title>Instance Data-To-XHTML/XForms Example</title>

    <xforms:model id="auctionItems">
      <xforms:instance id="auctions" src="auctions.xml"/>
      <xforms:submission id="submit_model_auctionItems"
                         action="http://xformstest.org/cgi-bin/showinstance.sh"
                         method="post" instance="auctions"/>
    </xforms:model>
    <link href="gen_default.css" rel="stylesheet"/>

    <script type="text/javascript">
                var testJS= function()
                {
                alert('This form submits to: '+
                document.getElementById('submit_model_auctionItems')
                 .getAttribute('action'));
                 }      
                 </script>

  </head>
  <body>
...

Это код JavaScript, но он взаимодействует с XForms через простые методы DOM.

Теперь вам нужен способ вызова кода.

В начало

Загрузка URL

Элемент XForms load очень похож на ссылку в HTML, в которой он говорит браузеру загрузить ресурс в текущем или новом окне. К счастью, это означает, что вы можете использовать его для вызова URL. Повезло, что мы можем сослаться на этот JavaScript, как на URL. Возможно, вы думаете, что можете настроить это следующим образом (листинг 3).

Листинг 3. Неправильный способ загрузки JavaScript

                
...
      <xforms:trigger>
        <xforms:label>Show action</xforms:label>
        <xforms:load ref="javascript:testJS()" ev:event="DOMActivate"/>
      </xforms:trigger>
...

Но вы не можете настроить это таким образом, потому что атрибут ref принимает только выражения XPath. К счастью, есть очень простой выход из этой ситуации (листинг 4).

Листинг 4. Правильный способ загрузки JavaScript

                
<?xml version="1.0" encoding="ASCII"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xforms="http://www.w3.org/2002/xforms">
  <head>
    <title>Instance Data-To-XHTML/XForms Example</title>

    <xforms:model id="auctionItems">
      <xforms:instance id="auctions" src="auctions.xml"/>
      <xforms:instance id="data">
                <data url="javascript:testJS()"/>
                </xforms:instance>
      <xforms:submission id="submit_model_auctionItems"
                         action="http://xformstest.org/cgi-bin/showinstance.sh"
                         method="post" instance="auctions"/>
    </xforms:model>
 ...
    </xforms:repeat>

    <xforms:group>

      <xforms:trigger>
        <xforms:label>Show action</xforms:label>
        <xforms:load ref="instance('data')/@url"
                ev:event="DOMActivate"/>
      </xforms:trigger>

      <xforms:trigger>
        <xforms:label>Insert Auction Item</xforms:label>
        <xforms:insert nodeset="instance('auctions')/auctionItem"
 at="index('repeatAuctionItems')"
                       position="after" ev:event="DOMActivate" />
      </xforms:trigger>
...

Теперь атрибут ref включает выражение XPath. Это выражение XPath указывает на URL, который ссылается на код, поэтому нажатие кнопки дает желаемый результат, как видно на рисунке 2.

Рисунок 2. Нажатие кнопки дает желаемый результат

В начало

Заключение

Используя элемент load, вы можете состлаться на любой адрес URL. Однако чтобы сделать это, URL должен содержаться в экземпляре данных, чтобы атрибут ref элемента load содержал выражение XPath. Оттуда URL указывает на фактический JavaScript. Также учтите - это означает, что вы можете выполнить произвольный корректный JavaScript, в том числе если он взаимодействует с элементами и атрибутами XForms на странице.

В начало

Загрузка

Описание	Имя	Размер	Метод загрузки
Примеры вызова JavaScript из XForms	calljs_source.zip	4KB	HTTP


	Информация о методах загрузки

Ресурсы

Научиться

Оригинал статьи XForms tip: Call JavaScript from an XForms form.
Пусть Skimstone объяснит вам, что такое XForms.
Посмотрите Skimstone введение в XForms.
Чтобы больше узнать о других возможных типах схем ввода в XForms, прочитайте w3cschools.
Данный цикл является хорошим гидом для начала использования XForms.
Начните с этой ссылки, чтобы узнать больше о Visual XForms Designer от alphaWorks.
В разделе XML на developerWorks вы найдете ресурсы, необходимые для развития навыков в XForms и других XML технологиях.
Посетите магазин технической литературы, чтобы найти книги на эти и другие технические темы.

Получить продукты и технологии

Получите MozzIE, элемент управления с открытым кодом, который позволяет вам визуализировать XForms в IE.

Обсудить

Примите участие в обсуждении материала на форуме.

Об авторе


		Николас Чейз (Nicholas Chase) разрабатывает Web-сайты для таких компаний как Lucent Technologies, Sun Microsystems, Oracle и Tampa Bay Buccaneers. Он работает школьным учителем по физике, менеджером по низкоуровневой утечке радиоактивности, редактором интерактивного журнала по научной фантастике, инженером мультимедийных средств, инструктором по Oracle, директором по технологии компании, специализирующейся на интерактивных взаимодействиях. Является автором нескольких книг, включая "XML Primer Plus".

Выскажите мнение об этой странице

В начало

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

IBM в России

Конфиденциальность

Контакты